From 5245e6a135ff4da50eefec39dc4c94bcbfef8a03 Mon Sep 17 00:00:00 2001
From: "D. Berge" <dberge@aaltronav.eu>
Date: Mon, 13 Nov 2023 22:27:22 +0100
Subject: [PATCH] Refactor <dougal-project-settings-raw-ntbp/>

---
 .../project-settings/input-raw-ntbp.vue       | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/lib/www/client/source/src/components/project-settings/input-raw-ntbp.vue b/lib/www/client/source/src/components/project-settings/input-raw-ntbp.vue
index a46c268..2a488d7 100644
--- a/lib/www/client/source/src/components/project-settings/input-raw-ntbp.vue
+++ b/lib/www/client/source/src/components/project-settings/input-raw-ntbp.vue
@@ -8,14 +8,14 @@
           label="Pattern"
           hint="Regular expression text"
           persistent-hint
-          v-model="regex"
+          v-model="regex_"
         >
         </v-text-field>
         <v-text-field
           label="Flags"
           hint="Regular expression modifier flags"
           persistent-hint
-          v-model="flags"
+          v-model="flags_"
         >
         </v-text-field>
       </v-form>
@@ -40,35 +40,44 @@
 </template>
 
 <script>
+import { deepCompare, deepMerge } from '@/lib/utils';
+import setIfDifferent from '@/lib/watcher-mixin';
 
 export default {
   name: "DougalProjectSettingsRawNTBP",
 
-  props: [ "value" ],
+  mixins: [
+    setIfDifferent({
+      regex: "regex_",
+      flags: "flags_"
+    })
+  ],
+
+  props: [ "regex", "flags" ],
 
   data () {
     return {
-      regex: "NTBP",
-      flags: "i"
+      regex_: "NTBP",
+      flags_: "i"
     }
   },
 
   watch: {
-    value (newValue) {
-      this.reset();
-    }
   },
 
   methods: {
 
     reset () {
-      for (const key of Object.keys(this.$data)) {
-        this[key] = this.value[key];
-      }
+      this.regex_ = this.regex;
+      this.flags_ = this.flags;
     },
 
     save () {
-      this.$emit('input', {...this.$data});
+      this.$emit('merge', [ ["raw", "ntbp"], {
+        regex: this.regex_,
+        flags: this.flags_
+      }]);
+      this.$nextTick(this.reset);
     },
 
     back () {