Refactor <dougal-project-settings-file-matching-parameters/>.

It uses a fixed width format specification instead of a regular
expression.

It shows a preview of what parts of the string are decoded as what.

lib/www/client/source/src/components/project-settings/file-matching-parameters.vue

@@ -6,7 +6,8 @@
       <v-tabs v-model="tab">
         <v-tab>Paths</v-tab>
         <v-tab>Globs</v-tab>
-        <v-tab>Pattern</v-tab>
+        <v-tab v-if="pattern">Pattern</v-tab>
+        <v-tab v-if="lineNameInfo">Line info</v-tab>
       </v-tabs>
 
       <v-tabs-items v-model="tab">
@@ -24,7 +25,7 @@
                   <dougal-file-browser-dialog
                     slot="append"
                     v-model="paths[index]"
-                    :root="value.rootPath"
+                    :root="rootPath"
                     :mimetypes="[ 'inode/directory' ]"
                     title="Select a directory"
                   ></dougal-file-browser-dialog>
@@ -90,10 +91,11 @@
           </v-card>
         </v-tab-item>
 
-        <v-tab-item>
+        <v-tab-item v-if="pattern">
           <v-card flat>
             <v-card-subtitle>
               Regular expression that describes the file format definition. Used to capture information such as line and sequence number, etc.
+              <b v-if="lineNameInfo">Note: Use the <a @click.stop="tab=3">line info</a> tab preferentially.</b>
             </v-card-subtitle>
             <v-card-text>
               <v-form>
@@ -148,6 +150,31 @@
           </v-card>
         </v-tab-item>
 
+        <v-tab-item v-if="lineNameInfo">
+          <v-card flat>
+            <v-card-subtitle>
+              Line information that will be extracted from file names
+            </v-card-subtitle>
+            <v-card-text>
+              <v-form>
+                <v-text-field
+                  label="Example file name"
+                  hint="Enter the name of a representative file to make it easier to visualise your configuration"
+                  persistent-hint
+                  v-model="lineNameInfo.example"
+                ></v-text-field>
+
+                <dougal-fixed-string-decoder
+                  :multiline="true"
+                  :text="lineNameInfo.example"
+                  :fields.sync="lineNameInfo.fields"
+                ></dougal-fixed-string-decoder>
+
+              </v-form>
+            </v-card-text>
+          </v-card>
+        </v-tab-item>
+
       </v-tabs-items>
     </v-card-text>
     <v-card-actions>
@@ -178,24 +205,39 @@
 </style>
 
 <script>
+import { deepCompare } from '@/lib/utils';
 import DougalFileBrowserDialog from '@/components/file-browser/file-browser-dialog';
+import DougalFixedStringDecoder from '@/components/decoder/fixed-string-decoder';
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
   name: "DougalProjectSettingsFileMatchingParameters",
 
   components: {
-    DougalFileBrowserDialog
+    DougalFileBrowserDialog,
+    DougalFixedStringDecoder
   },
 
-  props: [ "value", "title", "subtitle" ],
+  props: {
+    title: String,
+    subtitle: String,
+    isValid: { type: Boolean, default: true },
+    save: Function,
+
+    rootPath: String,
+    paths: Array,
+    globs: Array,
+    lineNameInfo: Object,
+    pattern: Object
+  },
 
   data () {
     return {
       tab: null,
-      globs: [],
-      paths: [],
-      pattern: {
+      globs_: [],
+      paths_: [],
+      lineNameInfo_: {},
+      pattern_: {
         flags: "i",
         regex: null,
         captures: []
@@ -204,34 +246,50 @@ export default {
   },
 
   computed: {
-
-    isValid () {
-      return false;
-      // return this.preplots && this.preplots.every( item => item.format != null );
-    }
-
   },
 
   watch: {
-    value (newValue) {
-      this.reset();
+
+    globs () {
+      if (!deepCompare(this.globs, this.globs_)) {
+        this.globs_ = this.globs;
       }
     },
 
+    paths () {
+      if (!deepCompare(this.paths, this.paths_)) {
+        this.paths_ = this.paths;
+      }
+    },
+
+    lineNameInfo () {
+      if (!deepCompare(this.lineNameInfo, this.lineNameInfo_)) {
+        this.lineNameInfo_ = this.lineNameInfo;
+      }
+    },
+
+    pattern () {
+      if (!deepCompare(this.pattern, this.pattern_)) {
+        this.pattern_ = this.pattern;
+      }
+    }
+
+  },
+
   methods: {
 
     reset () {
-      if (!this.value) {
-        return;
-      }
-      this.globs = this.value.globs;
-      this.paths = this.value.paths;
-      this.pattern = this.value.pattern;
+      this.globs_ = this.globs;
+      this.paths_ = this.paths;
+      this.lineNameInfo_ = this.lineNameInfo;
+      this.pattern_ = this.pattern;
     },
 
+    /*
     save () {
       this.$emit('input', this.data);
     },
+    */
 
     back () {
       this.$emit('close');