From 36828d363433c3a9f727ddafffebec9ff84ca6ec Mon Sep 17 00:00:00 2001
From: wh1te909 <dcparsi@gmail.com>
Date: Sun, 8 Nov 2020 10:11:45 +0000
Subject: [PATCH] client/site modal fixes

---
 src/components/modals/clients/ClientsForm.vue | 43 +++++++++++--------
 src/components/modals/clients/SitesForm.vue   | 38 +++++++++-------
 src/views/InitialSetup.vue                    | 20 +++------
 3 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/src/components/modals/clients/ClientsForm.vue b/src/components/modals/clients/ClientsForm.vue
index 55a188c..d752d84 100644
--- a/src/components/modals/clients/ClientsForm.vue
+++ b/src/components/modals/clients/ClientsForm.vue
@@ -2,7 +2,7 @@
   <q-card style="min-width: 400px">
     <q-card-section class="row">
       <q-card-actions align="left">
-        <div class="text-h6">Edit Clients</div>
+        <div class="text-h6">{{ modalTitle }}</div>
       </q-card-actions>
       <q-space />
       <q-card-actions align="right">
@@ -10,10 +10,9 @@
       </q-card-actions>
     </q-card-section>
     <q-card-section>
-      <q-form @submit="submit">
-        <q-card-section>
+      <q-form @submit.prevent="submit">
+        <q-card-section v-if="op === 'edit' || op === 'delete'">
           <q-select
-            v-if="op === 'edit' || op === 'delete'"
             :rules="[val => !!val || '*Required']"
             outlined
             options-dense
@@ -22,22 +21,21 @@
             :options="client_options"
           />
         </q-card-section>
-        <q-card-section>
+        <q-card-section v-if="op === 'add'">
           <q-input
-            v-if="op === 'add'"
             outlined
             v-model="client.name"
-            label="Client:"
+            label="Client"
             :rules="[val => (val && val.length > 0) || '*Required']"
           />
         </q-card-section>
-        <q-card-section>
+        <q-card-section v-if="op === 'add' || op === 'edit'">
           <q-input
             v-if="op === 'add'"
             :rules="[val => !!val || '*Required']"
             outlined
             v-model="client.site"
-            label="Default first site:"
+            label="Default first site"
           />
           <q-input
             v-else-if="op === 'edit'"
@@ -48,7 +46,12 @@
           />
         </q-card-section>
         <q-card-actions align="left">
-          <q-btn :label="capitalize(op)" color="primary" type="submit" />
+          <q-btn
+            :label="capitalize(op)"
+            :color="op === 'delete' ? 'negative' : 'primary'"
+            type="submit"
+            class="full-width"
+          />
         </q-card-actions>
       </q-form>
     </q-card-section>
@@ -56,7 +59,6 @@
 </template>
 
 <script>
-import axios from "axios";
 import mixins from "@/mixins/mixins";
 export default {
   name: "ClientsForm",
@@ -82,6 +84,13 @@ export default {
       this.client.name = newClient.label;
     },
   },
+  computed: {
+    modalTitle() {
+      if (this.op === "add") return "Add Client";
+      if (this.op === "edit") return "Edit Client";
+      if (this.op === "delete") return "Delete Client";
+    },
+  },
   methods: {
     submit() {
       if (this.op === "add") this.addClient();
@@ -89,7 +98,7 @@ export default {
       if (this.op === "delete") this.deleteClient();
     },
     getClients() {
-      axios.get("/clients/clients/").then(r => {
+      this.$axios.get("/clients/clients/").then(r => {
         this.client_options = r.data.map(client => ({ label: client.name, value: client.id }));
 
         if (this.clientpk !== undefined && this.clientpk !== null) {
@@ -103,13 +112,11 @@ export default {
     },
     addClient() {
       this.$q.loading.show();
-
       const data = {
         client: this.client.name,
         site: this.client.site,
       };
-
-      axios
+      this.$axios
         .post("/clients/clients/", data)
         .then(r => {
           this.$emit("close");
@@ -129,13 +136,11 @@ export default {
     },
     editClient() {
       this.$q.loading.show();
-
       const data = {
         id: this.client.id,
         name: this.client.name,
       };
-
-      axios
+      this.$axios
         .put(`/clients/${this.client.id}/client/`, this.client)
         .then(r => {
           this.$emit("edited");
@@ -178,7 +183,7 @@ export default {
     },
   },
   created() {
-    this.getClients();
+    if (this.op !== "add") this.getClients();
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/modals/clients/SitesForm.vue b/src/components/modals/clients/SitesForm.vue
index 19dbcf3..0aeb348 100644
--- a/src/components/modals/clients/SitesForm.vue
+++ b/src/components/modals/clients/SitesForm.vue
@@ -2,7 +2,7 @@
   <q-card style="min-width: 400px">
     <q-card-section class="row">
       <q-card-actions align="left">
-        <div class="text-h6">Edit Sites</div>
+        <div class="text-h6">{{ modalTitle }}</div>
       </q-card-actions>
       <q-space />
       <q-card-actions align="right">
@@ -19,12 +19,11 @@
             label="Select client"
             v-model="selected_client"
             :options="client_options"
-            @input="op === 'edit' ? (selected_site = sites[0]) : () => {}"
+            @input="op === 'edit' || op === 'delete' ? (selected_site = sites[0]) : () => {}"
           />
         </q-card-section>
-        <q-card-section>
+        <q-card-section v-if="op === 'edit' || op === 'delete'">
           <q-select
-            v-if="op === 'edit' || op === 'delete'"
             :rules="[val => !!val || '*Required']"
             outlined
             options-dense
@@ -33,12 +32,12 @@
             :options="sites"
           />
         </q-card-section>
-        <q-card-section>
+        <q-card-section v-if="op === 'add' || op === 'edit'">
           <q-input
             v-if="op === 'add'"
             outlined
             v-model="site.name"
-            label="Default first site:"
+            label="Site"
             :rules="[val => !!val || '*Required']"
           />
           <q-input
@@ -50,7 +49,12 @@
           />
         </q-card-section>
         <q-card-actions align="left">
-          <q-btn :label="capitalize(op)" color="primary" type="submit" />
+          <q-btn
+            :label="capitalize(op)"
+            :color="op === 'delete' ? 'negative' : 'primary'"
+            type="submit"
+            class="full-width"
+          />
         </q-card-actions>
       </q-form>
     </q-card-section>
@@ -58,7 +62,6 @@
 </template>
 
 <script>
-import axios from "axios";
 import mixins from "@/mixins/mixins";
 export default {
   name: "SitesForm",
@@ -88,6 +91,11 @@ export default {
     sites() {
       return !!this.selected_client ? this.formatSiteOptions(this.selected_client.sites) : [];
     },
+    modalTitle() {
+      if (this.op === "add") return "Add Site";
+      if (this.op === "edit") return "Edit Site";
+      if (this.op === "delete") return "Delete Site";
+    },
   },
   methods: {
     submit() {
@@ -96,7 +104,7 @@ export default {
       if (this.op === "delete") this.deleteSite();
     },
     getClients() {
-      axios.get("/clients/clients/").then(r => {
+      this.$axios.get("/clients/clients/").then(r => {
         this.client_options = this.formatClientOptions(r.data);
 
         if (this.sitepk !== undefined && this.sitepk !== null) {
@@ -110,7 +118,7 @@ export default {
           });
         } else {
           this.selected_client = this.client_options[0];
-          this.selected_site = this.sites[0];
+          if (this.op !== "add") this.selected_site = this.sites[0];
         }
       });
     },
@@ -122,7 +130,7 @@ export default {
         name: this.site.name,
       };
 
-      axios
+      this.$axios
         .post("/clients/sites/", data)
         .then(() => {
           this.$emit("close");
@@ -130,9 +138,9 @@ export default {
           this.$q.loading.hide();
           this.notifySuccess(`Site ${this.site.name} was added!`);
         })
-        .catch(err => {
+        .catch(e => {
           this.$q.loading.hide();
-          this.notifyError(err.response.data);
+          this.notifyError(e.response.data.non_field_errors);
         });
     },
     editSite() {
@@ -144,7 +152,7 @@ export default {
         client: this.selected_client.value,
       };
 
-      axios
+      this.$axios
         .put(`/clients/${this.site.id}/site/`, data)
         .then(() => {
           this.$emit("edited");
@@ -154,7 +162,7 @@ export default {
         })
         .catch(e => {
           this.$q.loading.hide();
-          this.notifyError(e.response.data);
+          this.notifyError(e.response.data.non_field_errors);
         });
     },
     deleteSite() {
diff --git a/src/views/InitialSetup.vue b/src/views/InitialSetup.vue
index ff16a78..68a8feb 100644
--- a/src/views/InitialSetup.vue
+++ b/src/views/InitialSetup.vue
@@ -10,12 +10,7 @@
           <q-form @submit.prevent="finish">
             <q-card-section>
               <div>Add Client:</div>
-              <q-input
-                dense
-                outlined
-                v-model="client.client"
-                :rules="[ val => !!val || '*Required' ]"
-              >
+              <q-input dense outlined v-model="client.client" :rules="[val => !!val || '*Required']">
                 <template v-slot:prepend>
                   <q-icon name="business" />
                 </template>
@@ -23,12 +18,7 @@
             </q-card-section>
             <q-card-section>
               <div>Add Site:</div>
-              <q-input
-                dense
-                outlined
-                v-model="client.site"
-                :rules="[ val => !!val || '*Required' ]"
-              >
+              <q-input dense outlined v-model="client.site" :rules="[val => !!val || '*Required']">
                 <template v-slot:prepend>
                   <q-icon name="apartment" />
                 </template>
@@ -42,7 +32,7 @@
               <div class="row">
                 <q-file
                   v-model="meshagent"
-                  :rules="[ val => !!val || '*Required' ]"
+                  :rules="[val => !!val || '*Required']"
                   label="Upload MeshAgent"
                   stack-label
                   filled
@@ -112,8 +102,8 @@ export default {
         })
         .catch(e => {
           this.$q.loading.hide();
-          if (e.response.data.client) {
-            this.notifyError(e.response.data.client);
+          if (e.response.data.name) {
+            this.notifyError(e.response.data.name);
           } else {
             this.notifyError(e.response.data.non_field_errors);
           }