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/groups.vue

@@ -1,11 +1,11 @@
 <template>
   <v-card>
     <v-card-title>Groups</v-card-title>
-    <v-card-subtitle>For <abbr title="Permanent Reservoir Monitoring">PRM</abbr> and 4D operations, each project can be assigned to one or more groups_ sharing the same (or substantially the same) preplots.</v-card-subtitle>
+    <v-card-subtitle>For <abbr title="Permanent Reservoir Monitoring">PRM</abbr> and 4D operations, each project can be assigned to one or more groups sharing the same (or substantially the same) preplots.</v-card-subtitle>
     <v-card-text>
       <v-form>
         <v-combobox
-          v-model="groups_"
+          v-model="groups"
           :items="items"
           multiple
           :search-input.sync="search"
@@ -59,6 +59,7 @@
       </v-form>
     </v-card-text>
     <v-card-actions>
+      <!--
       <v-btn
         color="primary"
         @click="save"
@@ -68,6 +69,7 @@
         color="warning"
         @click="reset"
       >Reset</v-btn>
+      -->
       <v-spacer></v-spacer>
       <v-btn
         color="secondary"
@@ -79,33 +81,19 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import { deepSet } from '@/lib/utils';
 
 export default {
   name: "DougalProjectSettingsGroups",
 
-  props: [ "groups" ],
+  props: [ "value" ],
 
   data () {
     return {
-      groups_: [],
       search: null
     }
   },
 
-  watch: {
-    value (newValue) {
-      this.reset();
-    },
-
-    groups (cur, prev) {
-      if (cur?.length == prev?.length) {
-        return;
-      }
-
-      this.setGroups(cur);
-    }
-  },
-
   computed: {
 
     colours () {
@@ -113,7 +101,8 @@ export default {
     },
 
     nextColour () {
-      return this.colours[(this.items.length + (this.groups_?.length ?? 0)) % this.colours.length];
+      // FIXME Fix colour when adding a new group
+      return this.colours[(this.items.length + (this.value?.groups?.length ?? 0)) % this.colours.length];
     },
 
     items () {
@@ -125,25 +114,33 @@ export default {
       });
     },
 
+    groups: {
+
+      get () {
+        return this.value?.groups?.map(i => {
+          return typeof i === "string"
+            ? { text: i, colour: this.nextColour}
+            : i
+        }) ?? [];
+      },
+
+      set (v) {
+        if (this.value) {
+          this.value.groups = v?.map( i => i?.text ?? i );
+        }
+      }
+
+    },
+
     ...mapGetters(["projectGroups"])
   },
 
   methods: {
 
-    setGroups (groups) {
-      this.groups_ = groups?.map(i => {
-        return typeof i === "string"
-          ? { text: i, colour: this.nextColour}
-          : i
-      });
-    },
-
     reset () {
-      this.setGroups(this.groups);
     },
 
     save () {
-      this.$emit('input', {groups: this.groups_?.map(i => i.text)});
     },
 
     back () {