Refactor configuration GUI.

Another refactoring. What we're doing now is eliminating the
need to save individually on each section. Configuration changes
are done directly on the local configuration and then the local
configuration is saved, downloaded or discarded in one go.

lib/www/client/source/src/components/project-settings/asaqc.vue

@@ -9,21 +9,21 @@
           hint="ID number for this survey in ASAQC"
           persistent-hint
           type="number"
-          v-model.number="value_.id"
+          v-model.number="cwo.id"
         >
         </v-text-field>
         <v-text-field
           label="IMO"
           hint="Project vessel's International Maritime Organisation's identification number"
           persistent-hint
-          v-model.number="value_.imo"
+          v-model.number="cwo.imo"
         >
         </v-text-field>
         <v-text-field
           label="MMSI"
           hint="Maritime Mobile Service Identities (MMSI) number"
           persistent-hint
-          v-model.number="value_.mmsi"
+          v-model.number="cwo.mmsi"
         >
         </v-text-field>
         <v-text-field
@@ -32,13 +32,14 @@
           persistent-hint
           :type="subscriptionKeyVisible ? 'text' : 'password'"
           :append-icon="subscriptionKeyVisible ? 'mdi-eye' : 'mdi-eye-off'"
-          v-model="value_.subscriptionKey"
+          v-model="cwo.subscriptionKey"
           @click:append="subscriptionKeyVisible = !subscriptionKeyVisible"
         >
         </v-text-field>
       </v-form>
     </v-card-text>
     <v-card-actions>
+      <!--
       <v-btn
         color="primary"
         @click="save"
@@ -48,6 +49,7 @@
         color="warning"
         @click="reset"
       >Reset</v-btn>
+      -->
       <v-spacer></v-spacer>
       <v-btn
         color="secondary"
@@ -58,54 +60,60 @@
 </template>
 
 <script>
-import { deepCompare, deepMerge } from '@/lib/utils';
-import setIfDifferent from '@/lib/watcher-mixin';
+import { deepSet } from '@/lib/utils';
 
 export default {
   name: "DougalProjectSettingsASAQC",
 
-  mixins: [
-    setIfDifferent({
-      value: "value_"
-    })
-  ],
-
-  props: [ "value" ],
+  props: {
+    value: Object
+  },
 
   data () {
     return {
-      value_: {
-        id: null,
-        imo: null,
-        mmsi: null,
-        subscriptionKey: null
-      },
       subscriptionKeyVisible: false
     }
   },
 
-  watch: {
-    value (newValue) {
-      this.reset();
+  computed: {
+    // Current working object.
+    // A shortcut so we don't have to specify the full path
+    // on every input control. It also makes it easier to
+    // change that path if necessary. Finally, it ensures that
+    // the properties being modified are always available.
+    cwo: {
+
+      get () {
+        if (this.value) {
+          if (!this.value?.cloud?.asaqc) {
+            deepSet(this.value, [ "cloud", "asaqc" ], {
+              id: null,
+              imo: null,
+              mmsi: null,
+              subscriptionKey: null
+            });
+          }
+          return this.value.cloud.asaqc;
+        } else {
+          return {};
+        }
+      },
+
+      set (v) {
+        if (this.value) {
+          deepSet(this.value, [ "cloud", "asaqc" ], v);
+        }
+      }
+
     }
   },
 
   methods: {
 
     reset () {
-
-      this.value_ = deepMerge({
-        id: null,
-        imo: null,
-        mmsi: null,
-        subscriptionKey: null
-      }, structuredClone(this.value??{}));
-
     },
 
     save () {
-      this.$emit("merge", [ [ "cloud", "asaqc" ], this.value_ ]);
-      this.$nextTick(this.reset);
     },
 
     back () {