Add project configuration components.

The configuration settings are quite complex so we divide the
GUI into modular components.

lib/www/client/source/src/components/project-settings/input-final-pending.vue

@@ -0,0 +1,85 @@
+<template>
+  <v-card>
+    <v-card-title>Pending sequence detection</v-card-title>
+    <v-card-subtitle>Sequences which are pending acceptance (e.g., due to marginal quality) can be marked as such by the naming of their <b>final</b> files or parent directory. Dougal uses regular expression matching against the full path, not just the file name. This pattern applies to both P1/90 and P1/11 files.</v-card-subtitle>
+    <v-card-text>
+      <v-form>
+        <v-text-field
+          label="Pattern"
+          hint="Regular expression text"
+          persistent-hint
+          v-model="regex"
+        >
+        </v-text-field>
+        <v-text-field
+          label="Flags"
+          hint="Regular expression modifier flags"
+          persistent-hint
+          v-model="flags"
+        >
+        </v-text-field>
+      </v-form>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        color="primary"
+        @click="save"
+      >Save</v-btn>
+      <v-spacer></v-spacer>
+      <v-btn
+        color="warning"
+        @click="reset"
+      >Reset</v-btn>
+      <v-spacer></v-spacer>
+      <v-btn
+        color="secondary"
+        @click="back"
+      >Back</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+
+export default {
+  name: "DougalProjectSettingsFinalPending",
+
+  props: [ "value" ],
+
+  data () {
+    return {
+      regex: "PENDING",
+      flags: "i"
+    }
+  },
+
+  watch: {
+    value (newValue) {
+      this.reset();
+    }
+  },
+
+  methods: {
+
+    reset () {
+      for (const key of Object.keys(this.$data)) {
+        this[key] = this.value[key];
+      }
+    },
+
+    save () {
+      this.$emit('input', {...this.$data});
+    },
+
+    back () {
+      this.$emit('close');
+    }
+
+  },
+
+  mounted () {
+    this.reset();
+  }
+
+}
+</script>