Refactor <dougal-project-settings-production/>

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

@@ -10,7 +10,7 @@
           persistent-hint
           suffix="min"
           type="number"
-          v-model.number="nominalLineChangeDuration"
+          v-model.number="production_.nominalLineChangeDuration"
         >
         </v-text-field>
       </v-form>
@@ -35,20 +35,32 @@
 </template>
 
 <script>
+import { deepCompare, deepMerge } from '@/lib/utils';
+import setIfDifferent from '@/lib/watcher-mixin';
 
 export default {
   name: "DougalProjectSettingsProduction",
 
-  props: [ "value" ],
+  mixins: [
+    setIfDifferent({
+      production: "production_"
+    })
+  ],
+
+  props: {
+    production: Object
+  },
 
   data () {
     return {
-      nominalLineChangeDuration: null
+      production_: {
+        nominalLineChangeDuration: null
+      }
     }
   },
 
   watch: {
-    value (newValue) {
+    production (newValue) {
       this.reset();
     }
   },
@@ -56,13 +68,15 @@ export default {
   methods: {
 
     reset () {
-      for (const key of Object.keys(this.$data)) {
-        this[key] = this.value[key];
-      }
+
+      this.production_ = deepMerge({
+        nominalLineChangeDuration: null
+      }, structuredClone(this.production ?? {}));
     },
 
     save () {
-      this.$emit('input', {...this.$data});
+      this.$emit("merge", [ [], this.production_ ]);
+      this.$nextTick(this.reset);
     },
 
     back () {