Add project settings cloning component.

Asks for the new ID, name and root file path.

lib/www/client/source/src/components/project-settings/name-id-rootpath.vue

@@ -0,0 +1,101 @@
+<template>
+  <v-card>
+    <v-card-title>Files</v-card-title>
+    <v-card-subtitle>File path configuration for this project.</v-card-subtitle>
+    <v-card-text>
+      <v-form>
+        <v-text-field
+          label="ID"
+          hint="Short survey ID"
+          persistent-hint
+          v-model="id"
+        >
+        </v-text-field>
+        <v-text-field
+          label="Name"
+          hint="Survey name"
+          persistent-hint
+          v-model="name"
+        >
+        </v-text-field>
+        <v-text-field
+          label="Project folder"
+          hint="Root file path for this project"
+          persistent-hint
+          v-model="path"
+        >
+          <dougal-file-browser-dialog
+            slot="append"
+            v-model="path"
+            mimetypes="inode/directory"
+          ></dougal-file-browser-dialog>
+        </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>
+import DougalFileBrowserDialog from '@/components/file-browser/file-browser-dialog';
+
+export default {
+  name: "DougalProjectSettingsNameIdRootpath",
+
+  components: { DougalFileBrowserDialog },
+
+  props: [ "value" ],
+
+  data () {
+    return {
+      id: "",
+      name: "",
+      path: ""
+    }
+  },
+
+  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>