add deleting clients/site to ui

src/components/FileBar.vue

@@ -5,12 +5,40 @@
         <q-btn size="md" dense no-caps flat label="File">
           <q-menu>
             <q-list dense style="min-width: 100px">
-              <q-item clickable v-close-popup @click="showAddClientModal = true">
-                <q-item-section>Add Client</q-item-section>
+              <q-item clickable>
+                <q-item-section>Add</q-item-section>
+                <q-item-section side>
+                  <q-icon name="keyboard_arrow_right" />
+                </q-item-section>
+                <q-menu anchor="top right" self="top left">
+                  <q-list dense style="min-width: 100px">
+                    <q-item clickable v-close-popup @click="showAddClientModal = true">
+                      <q-item-section>Add Client</q-item-section>
+                    </q-item>
+                    <q-item clickable v-close-popup @click="showAddSiteModal = true">
+                      <q-item-section>Add Site</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
               </q-item>
-              <q-item clickable v-close-popup @click="showAddSiteModal = true">
-                <q-item-section>Add Site</q-item-section>
+
+              <q-item clickable>
+                <q-item-section>Delete</q-item-section>
+                <q-item-section side>
+                  <q-icon name="keyboard_arrow_right" />
+                </q-item-section>
+                <q-menu anchor="top right" self="top left">
+                  <q-list dense style="min-width: 100px">
+                    <q-item clickable v-close-popup @click="showDeleteClientModal = true">
+                      <q-item-section>Delete Client</q-item-section>
+                    </q-item>
+                    <q-item clickable v-close-popup @click="showDeleteSiteModal = true">
+                      <q-item-section>Delete Site</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
               </q-item>
+
               <q-item clickable v-close-popup @click="showUploadMesh = true">
                 <q-item-section>Upload MeshAgent</q-item-section>
               </q-item>
@@ -99,6 +127,13 @@
       <q-dialog v-model="showEditSitesModal">
         <EditSites @close="showEditSitesModal = false" @edited="edited" />
       </q-dialog>
+      <!-- delete -->
+      <q-dialog v-model="showDeleteClientModal">
+        <DeleteClient @close="showDeleteClientModal = false" @edited="edited" />
+      </q-dialog>
+      <q-dialog v-model="showDeleteSiteModal">
+        <DeleteSite @close="showDeleteSiteModal = false" @edited="edited" />
+      </q-dialog>
       <!-- edit core settings modal -->
       <q-dialog v-model="showEditCoreSettingsModal">
         <EditCoreSettings @close="showEditCoreSettingsModal = false" />
@@ -162,6 +197,8 @@ import AddClient from "@/components/modals/clients/AddClient";
 import EditClients from "@/components/modals/clients/EditClients";
 import AddSite from "@/components/modals/clients/AddSite";
 import EditSites from "@/components/modals/clients/EditSites";
+import DeleteClient from "@/components/modals/clients/DeleteClient";
+import DeleteSite from "@/components/modals/clients/DeleteSite";
 import UpdateAgents from "@/components/modals/agents/UpdateAgents";
 import ScriptManager from "@/components/ScriptManager";
 import EditCoreSettings from "@/components/modals/coresettings/EditCoreSettings";
@@ -179,6 +216,8 @@ export default {
     EditClients,
     AddSite,
     EditSites,
+    DeleteClient,
+    DeleteSite,
     UpdateAgents,
     ScriptManager,
     EditCoreSettings,
@@ -195,6 +234,8 @@ export default {
       showEditClientsModal: false,
       showAddSiteModal: false,
       showEditSitesModal: false,
+      showDeleteClientModal: false,
+      showDeleteSiteModal: false,
       showUpdateAgentsModal: false,
       showEditCoreSettingsModal: false,
       showAutomationManager: false,

src/components/modals/clients/DeleteClient.vue

@@ -0,0 +1,96 @@
+<template>
+  <q-card style="min-width: 400px">
+    <q-card-section class="row">
+      <q-card-actions align="left">
+        <div class="text-h6">Delete Client</div>
+      </q-card-actions>
+      <q-space />
+      <q-card-actions align="right">
+        <q-btn v-close-popup flat round dense icon="close" />
+      </q-card-actions>
+    </q-card-section>
+    <q-card-section>
+      <q-form @submit.prevent="deleteClient">
+        <q-card-section>
+          <q-select
+            :rules="[val => !!val || '*Required']"
+            outlined
+            options-dense
+            label="Select client"
+            v-model="client.id"
+            :options="clients"
+            @input="onChange"
+            emit-value
+            map-options
+          />
+        </q-card-section>
+        <q-card-section></q-card-section>
+        <q-card-actions align="left">
+          <q-btn
+            :disable="client.client === null"
+            :label="deleteLabel"
+            class="full-width"
+            color="negative"
+            type="submit"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script>
+import mixins from "@/mixins/mixins";
+export default {
+  name: "DeleteClient",
+  mixins: [mixins],
+  data() {
+    return {
+      clients: [],
+      client: {
+        client: null,
+        id: null,
+      },
+    };
+  },
+  computed: {
+    deleteLabel() {
+      return this.client.client !== null ? `Delete ${this.client.client}` : "Delete";
+    },
+  },
+  methods: {
+    getClients() {
+      this.$axios.get("/clients/clients/").then(r => {
+        r.data.forEach(client => {
+          this.clients.push({ label: client.client, value: client.id });
+        });
+      });
+    },
+    onChange() {
+      this.client.client = this.clients.find(i => i.value === this.client.id).label;
+    },
+    deleteClient() {
+      this.$q
+        .dialog({
+          title: "Are you sure?",
+          message: `Delete client ${this.client.client}`,
+          cancel: true,
+          ok: { label: "Delete", color: "negative" },
+        })
+        .onOk(() => {
+          this.$axios
+            .delete(`/clients/${this.client.id}/client/`)
+            .then(r => {
+              this.$emit("edited");
+              this.$emit("close");
+              this.notifySuccess(r.data);
+            })
+            .catch(e => this.notifyError(e.response.data, 6000));
+        });
+    },
+  },
+  created() {
+    this.getClients();
+  },
+};
+</script>

src/components/modals/clients/DeleteSite.vue

@@ -0,0 +1,104 @@
+<template>
+  <q-card style="min-width: 400px">
+    <q-card-section class="row">
+      <q-card-actions align="left">
+        <div class="text-h6">Delete Site</div>
+      </q-card-actions>
+      <q-space />
+      <q-card-actions align="right">
+        <q-btn v-close-popup flat round dense icon="close" />
+      </q-card-actions>
+    </q-card-section>
+    <q-card-section>
+      <q-form @submit.prevent="deleteSite">
+        <q-card-section v-if="tree !== null">
+          <q-select
+            :rules="[val => !!val || '*Required']"
+            outlined
+            options-dense
+            label="Select client"
+            v-model="client"
+            :options="Object.keys(tree)"
+            @input="site = sites[0]"
+          />
+        </q-card-section>
+        <q-card-section>
+          <q-select
+            :rules="[val => !!val || '*Required']"
+            outlined
+            options-dense
+            label="Select site"
+            v-model="site"
+            :options="sites"
+          />
+        </q-card-section>
+        <q-card-actions align="left">
+          <q-btn
+            :disable="site === null"
+            :label="`Delete ${site}`"
+            class="full-width"
+            color="negative"
+            type="submit"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script>
+import mixins from "@/mixins/mixins";
+export default {
+  name: "DeleteSite",
+  mixins: [mixins],
+  data() {
+    return {
+      tree: null,
+      client: null,
+      site: null,
+    };
+  },
+  computed: {
+    sites() {
+      if (this.tree !== null && this.client !== null) {
+        this.site = this.tree[this.client][0];
+        return this.tree[this.client];
+      }
+    },
+  },
+  methods: {
+    getTree() {
+      this.$axios.get("/clients/loadclients/").then(r => {
+        this.tree = r.data;
+        this.client = Object.keys(r.data)[0];
+      });
+    },
+    deleteSite() {
+      const data = {
+        client: this.client,
+        site: this.site,
+      };
+      this.$q
+        .dialog({
+          title: "Are you sure?",
+          message: `Delete site ${this.site}`,
+          cancel: true,
+          ok: { label: "Delete", color: "negative" },
+        })
+        .onOk(() => {
+          this.$axios
+            .delete("/clients/deletesite/", { data })
+            .then(r => {
+              this.$emit("edited");
+              this.$emit("close");
+              this.notifySuccess(r.data);
+            })
+            .catch(e => this.notifyError(e.response.data, 6000));
+        });
+    },
+  },
+  created() {
+    this.getTree();
+  },
+};
+</script>

src/views/Dashboard.vue

@@ -60,16 +60,12 @@
                           </q-item-section>
                           <q-item-section>Edit</q-item-section>
                         </q-item>
-                        <!--<q-item
-                          clickable
-                          v-close-popup
-                          @click="showDelete(props.node)"
-                        >
+                        <q-item clickable v-close-popup @click="showDeleteModal(props.node)">
                           <q-item-section side>
                             <q-icon name="delete" />
                           </q-item-section>
                           <q-item-section>Delete</q-item-section>
-                        </q-item>-->
+                        </q-item>
 
                         <q-separator></q-separator>
 
@@ -156,11 +152,19 @@
 
     <!-- edit client modal -->
     <q-dialog v-model="showEditClientModal">
-      <EditClients @close="showEditClientModal = false" />
+      <EditClients @close="showEditClientModal = false" @edited="refreshEntireSite" />
     </q-dialog>
     <!-- edit site modal -->
     <q-dialog v-model="showEditSiteModal">
-      <EditSites @close="showEditSiteModal = false" />
+      <EditSites @close="showEditSiteModal = false" @edited="refreshEntireSite" />
+    </q-dialog>
+    <!-- delete client modal -->
+    <q-dialog v-model="showDeleteClientModal">
+      <DeleteClient @close="showDeleteClientModal = false" @edited="refreshEntireSite" />
+    </q-dialog>
+    <!-- delete site modal -->
+    <q-dialog v-model="showDeleteSiteModal">
+      <DeleteSite @close="showDeleteSiteModal = false" @edited="refreshEntireSite" />
     </q-dialog>
     <!-- add policy modal -->
     <q-dialog v-model="showPolicyAddModal">
@@ -183,6 +187,8 @@ import AlertsIcon from "@/components/AlertsIcon";
 import PolicyAdd from "@/components/automation/modals/PolicyAdd";
 import EditSites from "@/components/modals/clients/EditSites";
 import EditClients from "@/components/modals/clients/EditClients";
+import DeleteClient from "@/components/modals/clients/DeleteClient";
+import DeleteSite from "@/components/modals/clients/DeleteSite";
 
 export default {
   components: {
@@ -193,11 +199,15 @@ export default {
     PolicyAdd,
     EditSites,
     EditClients,
+    DeleteClient,
+    DeleteSite,
   },
   data() {
     return {
       showEditClientModal: false,
       showEditSiteModal: false,
+      showDeleteClientModal: false,
+      showDeleteSiteModal: false,
       showPolicyAddModal: false,
       policyAddType: null,
       policyAddPk: null,
@@ -380,6 +390,13 @@ export default {
         this.showEditSiteModal = true;
       }
     },
+    showDeleteModal(node) {
+      if (node.children) {
+        this.showDeleteClientModal = true;
+      } else {
+        this.showDeleteSiteModal = true;
+      }
+    },
     reload() {
       this.$store.dispatch("reload");
     },