Add code for a ‘new project’ button to project list navigation.

This is currently disabled though (value in route/index.js is
commented out) as it is not possible at the moment to create
new projects fully from scratch from the frontend. See comment
on previous commit.

NB: projects may be created fully from scratch by making an API
request with a suitable YAML / JSON configuration file, thusly:

curl -vs "https://[hostname]/api/project" -X POST \
    -H "Content-Type: application/yaml"
    --data-binary @/path/to/configuration.yaml

lib/www/client/source/src/components/app-bar-extension-project-list.vue

@@ -0,0 +1,85 @@
+<template>
+  <v-dialog
+    v-model="dialogOpen"
+    @input="(e) => $emit('input', e)"
+    max-width="600"
+  >
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn v-if="adminaccess"
+        title="Create a new project from scratch. Generally, it's preferable to clone an existing project (right-click → ‘Clone’)"
+        small
+        outlined
+        color="warning"
+        v-bind="attrs"
+        v-on="on"
+      >
+        <span>Create new project</span>
+        <v-icon right small>mdi-file-document-plus-outline</v-icon>
+      </v-btn>
+    </template>
+
+    <dougal-project-settings-name-id-geodetics
+      :value="newProjectDetails"
+      @input="save"
+      @close="dialogOpen = false"
+    >
+    </dougal-project-settings-name-id-geodetics>
+
+  </v-dialog>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import DougalProjectSettingsNameIdGeodetics from '@/components/project-settings/name-id-geodetics'
+
+export default {
+  name: 'DougalAppBarExtensionProjectList',
+
+  components: {
+    DougalProjectSettingsNameIdGeodetics
+  },
+
+  data() {
+    return {
+      dialogOpen: false,
+      newProjectDetails: {
+        name: null,
+        id: null,
+        epsg: null
+      }
+    };
+  },
+
+  computed: {
+    ...mapGetters(["adminaccess"])
+  },
+
+  methods: {
+    async save (data) {
+      this.dialogOpen = false;
+      data.archived = true; // Make the project inactive to start with
+      console.log("POST the new project data");
+      console.log(data);
+
+      const init = {
+        method: "POST",
+        body: data
+      };
+      const cb = (err, res) => {
+        if (!err && res) {
+          console.log(res);
+          if (res.status == "201") {
+            // Redirect to new project settings page
+            const settingsUrl = `/projects/${data.id.toLowerCase()}/configuration`;
+            this.$router.push(settingsUrl);
+
+          }
+        }
+      };
+      await this.api(["/project", init, cb]);
+    },
+
+    ...mapActions(["api"])
+  }
+}
+</script>

lib/www/client/source/src/router/index.js

@@ -16,7 +16,9 @@ import Log from '../views/Log.vue'
 import QC from '../views/QC.vue'
 import Graphs from '../views/Graphs.vue'
 import Map from '../views/Map.vue'
+import ProjectSettings from '../views/ProjectSettings.vue'
 import DougalAppBarExtensionProject from '../components/app-bar-extension-project'
+import DougalAppBarExtensionProjectList from '../components/app-bar-extension-project-list'
 
 Vue.use(VueRouter)
 
@@ -80,7 +82,10 @@ Vue.use(VueRouter)
     meta: {
       breadcrumbs: [
         { text: "Projects", href: "/projects", disabled: true }
-      ]
+      ],
+      appBarExtension: {
+        // component: DougalAppBarExtensionProjectList
+      }
     }
   },
   {
@@ -168,6 +173,11 @@ Vue.use(VueRouter)
         path: "map",
         name: "map",
         component: Map
+      },
+      {
+        path: "configuration",
+        name: "configuration",
+        component: ProjectSettings
       }
     ]
   }