Refactor <dougal-project-settings-groups/>

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"
@@ -83,11 +83,11 @@ import { mapGetters } from 'vuex'
 export default {
   name: "DougalProjectSettingsGroups",
 
-  props: [ "value" ],
+  props: [ "groups" ],
 
   data () {
     return {
-      groups: [],
+      groups_: [],
       search: null
     }
   },
@@ -102,12 +102,7 @@ export default {
         return;
       }
 
-      this.groups = cur?.map(i => {
-        return typeof i === "string"
-          ? { text: i, colour: this.nextColour}
-          : i
-      });
-
+      this.setGroups(cur);
     }
   },
 
@@ -118,7 +113,7 @@ export default {
     },
 
     nextColour () {
-      return this.colours[(this.items.length + (this.groups?.length ?? 0)) % this.colours.length];
+      return this.colours[(this.items.length + (this.groups_?.length ?? 0)) % this.colours.length];
     },
 
     items () {
@@ -135,14 +130,20 @@ export default {
 
   methods: {
 
+    setGroups (groups) {
+      this.groups_ = groups?.map(i => {
+        return typeof i === "string"
+          ? { text: i, colour: this.nextColour}
+          : i
+      });
+    },
+
     reset () {
-      for (const key of Object.keys(this.$data)) {
-        this[key] = this.value[key];
-      }
+      this.setGroups(this.groups);
     },
 
     save () {
-      this.$emit('input', {groups: this.groups?.map(i => i.text)});
+      this.$emit('input', {groups: this.groups_?.map(i => i.text)});
     },
 
     back () {