projectgroupsettings: add delete project group

src/components/projectgroupsettings.vue

@@ -1,11 +1,45 @@
 <template>
   <div>
     <projectvars :variables="variables" :allvariables="allvariables"/>
+    <hr>
+    <div>
+      <h4 class="title is-4">Delete This Project Group</h4>
+
+      <div class="message is-danger">
+        <div class="message-body">
+          This operation
+          <strong>CANNOT</strong> be undone.
+          This operation will remove
+          <strong>{{projectGroupPath}}</strong>
+        </div>
+      </div>
+      <label class="label">
+        Please type the project group name for confirmation:
+        <span
+          class="has-text-danger"
+        >{{ projectGroupName }}</span>
+      </label>
+      <div class="field">
+        <input
+          v-model="projectGroupNameToDelete"
+          class="input"
+          type="email"
+          placeholder="Project Group name to delete"
+        >
+      </div>
+      <button
+        class="button is-danger"
+        @click="deleteProjectGroup()"
+        :disabled="!deleteButtonEnabled"
+      >Delete Project Group</button>
+    </div>
   </div>
 </template>
 
 <script>
-import { fetchVariables } from "@/util/data.js";
+import { fetchVariables, deleteProjectGroup } from "@/util/data.js";
+
+import { projectGroupLink } from "@/util/link.js";
 
 import projectvars from "@/components/projectvars";
 
@@ -20,9 +54,43 @@ export default {
   data() {
     return {
       variables: [],
-      allvariables: []
+      allvariables: [],
+      projectGroupNameToDelete: ""
     };
   },
+  computed: {
+    projectGroupName: function() {
+      return this.projectgroupref[this.projectgroupref.length - 1];
+    },
+    projectGroupPath: function() {
+      return ["", this.ownertype, this.ownername, ...this.projectgroupref].join(
+        "/"
+      );
+    },
+    deleteButtonEnabled: function() {
+      return this.projectGroupNameToDelete == this.projectGroupName;
+    }
+  },
+  methods: {
+    async deleteProjectGroup() {
+      let projectgroupref = [
+        this.ownertype,
+        this.ownername,
+        ...this.projectgroupref
+      ].join("/");
+
+      if (this.projectGroupNameToDelete == this.projectGroupName) {
+        let res = await deleteProjectGroup(projectgroupref);
+        this.$router.push(
+          projectGroupLink(
+            this.ownertype,
+            this.ownername,
+            this.projectgroupref.slice(0, -1)
+          )
+        );
+      }
+    }
+  },
   created: async function() {
     this.variables = await fetchVariables(
       "projectgroup",

src/util/data.js

@@ -158,4 +158,13 @@ export async function deleteProject(projectref) {
     }
     let res = await fetch(apiurl(path), init)
     return res.text();
+}
+
+export async function deleteProjectGroup(projectgroupref) {
+    let path = "/projectgroups/" + encodeURIComponent(projectgroupref)
+    let init = {
+        method: "DELETE",
+    }
+    let res = await fetch(apiurl(path), init)
+    return res.text();
 }