From c8db00d970c6833ec9c64c640faae8f7297c9816 Mon Sep 17 00:00:00 2001
From: sadnub <josh@torchlake.com>
Date: Sun, 30 May 2021 16:29:05 -0400
Subject: [PATCH] fix saving custom field values and change sites dropdown in
 edit agent modal

---
 package-lock.json                             | 24 +++---
 package.json                                  |  2 +-
 src/components/modals/agents/EditAgent.vue    | 73 ++++++++-----------
 src/components/modals/clients/ClientsForm.vue | 14 ++--
 src/components/modals/clients/SitesForm.vue   | 29 +++-----
 src/mixins/mixins.js                          | 15 ++--
 6 files changed, 67 insertions(+), 90 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 52039e3..5519cf8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,7 @@
     "": {
       "version": "0.1.8",
       "dependencies": {
-        "@quasar/extras": "^1.10.5",
+        "@quasar/extras": "^1.10.6",
         "apexcharts": "^3.26.3",
         "axios": "^0.21.1",
         "dotenv": "^8.6.0",
@@ -18,7 +18,7 @@
         "vue3-apexcharts": "^1.4.0"
       },
       "devDependencies": {
-        "@quasar/app": "^3.0.0-beta.27",
+        "@quasar/app": "^3.0.0-beta.28",
         "@quasar/cli": "^1.2.0"
       }
     },
@@ -1623,9 +1623,9 @@
       }
     },
     "node_modules/@quasar/app": {
-      "version": "3.0.0-beta.27",
-      "resolved": "https://registry.npmjs.org/@quasar/app/-/app-3.0.0-beta.27.tgz",
-      "integrity": "sha512-Oc1kDDKY8h1V5od/nrLaB+JTmgSAAj1w5Rt3chaGLqLEUa3umidDn3oetTrTdywLM8hZL5EOXc+zVV9M8BqJdQ==",
+      "version": "3.0.0-beta.28",
+      "resolved": "https://registry.npmjs.org/@quasar/app/-/app-3.0.0-beta.28.tgz",
+      "integrity": "sha512-3EEca6gSqwzrY7j6Ni0JqQMl3GgP3X63nhHHpeJqDqei24KEWsQbmIqafnCFOWtHnMUvm+musPwKlrNudIjJVA==",
       "dev": true,
       "dependencies": {
         "@quasar/babel-preset-app": "2.0.1",
@@ -14419,9 +14419,9 @@
       "dev": true
     },
     "@quasar/app": {
-      "version": "3.0.0-beta.27",
-      "resolved": "https://registry.npmjs.org/@quasar/app/-/app-3.0.0-beta.27.tgz",
-      "integrity": "sha512-Oc1kDDKY8h1V5od/nrLaB+JTmgSAAj1w5Rt3chaGLqLEUa3umidDn3oetTrTdywLM8hZL5EOXc+zVV9M8BqJdQ==",
+      "version": "3.0.0-beta.28",
+      "resolved": "https://registry.npmjs.org/@quasar/app/-/app-3.0.0-beta.28.tgz",
+      "integrity": "sha512-3EEca6gSqwzrY7j6Ni0JqQMl3GgP3X63nhHHpeJqDqei24KEWsQbmIqafnCFOWtHnMUvm+musPwKlrNudIjJVA==",
       "dev": true,
       "requires": {
         "@quasar/babel-preset-app": "2.0.1",
@@ -14618,9 +14618,9 @@
       }
     },
     "@quasar/extras": {
-      "version": "1.10.5",
-      "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.10.5.tgz",
-      "integrity": "sha512-iBI9bRfomvxfnE2RUYMK0q7tki7Y0I0KMLuxoSEQC0OsOghJ/3ANENyGm1S0AsVMmNYwj0bzQWYVA6KD7/NwHg=="
+      "version": "1.10.6",
+      "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.10.6.tgz",
+      "integrity": "sha512-LdqgITUDWr6c3bTS0Br/UIE+92JvUdZ0mu08qM4C+y0t6Q4i4WYgbjurLJKpU55g5zUXvzra868qbljLbNSLxg=="
     },
     "@quasar/fastclick": {
       "version": "1.1.4",
@@ -23373,4 +23373,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index dbed8dd..c283665 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "vue3-apexcharts": "^1.4.0"
   },
   "devDependencies": {
-    "@quasar/app": "^3.0.0-beta.27",
+    "@quasar/app": "^3.0.0-beta.28",
     "@quasar/cli": "^1.2.0"
   },
   "browserslist": [
diff --git a/src/components/modals/agents/EditAgent.vue b/src/components/modals/agents/EditAgent.vue
index a64a214..6a1a203 100644
--- a/src/components/modals/agents/EditAgent.vue
+++ b/src/components/modals/agents/EditAgent.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card style="min-width: 800px" v-if="agentLoaded && clientsLoaded">
+  <q-card style="min-width: 800px">
     <q-splitter v-model="splitterModel">
       <template v-slot:before>
         <q-tabs dense v-model="tab" vertical class="text-primary">
@@ -18,32 +18,30 @@
             <q-tab-panels v-model="tab" animated transition-prev="jump-up" transition-next="jump-up">
               <!-- general -->
               <q-tab-panel name="general">
-                <q-card-section class="row">
-                  <div class="col-2">Client:</div>
-                  <div class="col-2"></div>
-                  <q-select
-                    @input="agent.site = site_options[0].value"
-                    dense
-                    options-dense
-                    outlined
-                    v-model="agent.client"
-                    :options="client_options"
-                    class="col-8"
-                  />
-                </q-card-section>
                 <q-card-section class="row">
                   <div class="col-2">Site:</div>
                   <div class="col-2"></div>
                   <q-select
-                    class="col-8"
                     dense
                     options-dense
-                    emit-value
-                    map-options
                     outlined
                     v-model="agent.site"
-                    :options="site_options"
-                  />
+                    :options="siteOptions"
+                    map-options
+                    emit-value
+                    class="col-8"
+                  >
+                    <template v-slot:option="scope">
+                      <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" class="q-pl-lg">
+                        <q-item-section>
+                          <q-item-label v-html="scope.opt.label"></q-item-label>
+                        </q-item-section>
+                      </q-item>
+                      <q-item-label v-if="scope.opt.category" v-bind="scope.itemProps" header class="q-pa-sm">{{
+                        scope.opt.category
+                      }}</q-item-label>
+                    </template>
+                  </q-select>
                 </q-card-section>
                 <q-card-section class="row">
                   <div class="col-2">Type:</div>
@@ -126,7 +124,7 @@
                   <q-checkbox v-model="agent.overdue_text_alert" label="Get overdue sms alerts" />
                 </q-card-section>
                 <div class="text-h6">Custom Fields</div>
-                <q-card-section v-for="field in customFields">
+                <q-card-section v-for="field in customFields" :key="field.id">
                   <CustomField v-model="custom_fields[field.name]" :field="field" />
                 </q-card-section>
               </q-tab-panel>
@@ -160,8 +158,6 @@ export default {
     return {
       customFields: [],
       custom_fields: {},
-      agentLoaded: false,
-      clientsLoaded: false,
       agent: {},
       monTypes: ["server", "workstation"],
       client_options: [],
@@ -171,6 +167,7 @@ export default {
       tz_inherited: true,
       original_tz: null,
       allTimezones: [],
+      siteOptions: [],
     };
   },
   methods: {
@@ -194,39 +191,36 @@ export default {
             this.original_tz = r.data.time_zone;
           }
 
-          this.agent.client = { label: r.data.client.name, id: r.data.client.id, sites: r.data.client.sites };
-          this.agentLoaded = true;
-
           for (let field of this.customFields) {
             const value = r.data.custom_fields.find(value => value.field === field.id);
 
             if (field.type === "multiple") {
-              if (value) this.$set(this.custom_fields, field.name, value.value);
-              else this.$set(this.custom_fields, field.name, []);
+              if (value) this.custom_fields[field.name] = value.value;
+              else this.custom_fields[field.name] = [];
             } else if (field.type === "checkbox") {
-              if (value) this.$set(this.custom_fields, field.name, value.value);
-              else this.$set(this.custom_fields, field.name, false);
+              if (value) this.custom_fields[field.name] = value.value;
+              else this.this.custom_fields[field.name] = false;
             } else {
-              if (value) this.$set(this.custom_fields, field.name, value.value);
-              else this.$set(this.custom_fields, field.name, "");
+              if (value) this.custom_fields[field.name] = value.value;
+              else this.custom_fields[field.name] = "";
             }
           }
         })
         .catch(e => {});
     },
-    getClientsSites() {
+    getSiteOptions() {
       this.$axios
         .get("/clients/clients/")
         .then(r => {
-          this.client_options = this.formatClientOptions(r.data);
-          this.clientsLoaded = true;
+          r.data.forEach(client => {
+            this.siteOptions.push({ category: client.name });
+            client.sites.forEach(site => this.siteOptions.push({ label: site.name, value: site.id }));
+          });
         })
         .catch(e => {});
     },
     editAgent() {
       delete this.agent.all_timezones;
-      delete this.agent.client;
-      delete this.agent.sites;
       delete this.agent.timezone;
       delete this.agent.winupdatepolicy[0].created_by;
       delete this.agent.winupdatepolicy[0].created_time;
@@ -256,11 +250,6 @@ export default {
   },
   computed: {
     ...mapGetters(["selectedAgentPk"]),
-    site_options() {
-      if (this.agentLoaded && this.clientsLoaded) {
-        return this.formatSiteOptions(this.agent.client["sites"]);
-      }
-    },
   },
   mounted() {
     // Get custom fields
@@ -268,7 +257,7 @@ export default {
       this.customFields = r.data.filter(field => !field.hide_in_ui);
     });
     this.getAgentInfo();
-    this.getClientsSites();
+    this.getSiteOptions();
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/modals/clients/ClientsForm.vue b/src/components/modals/clients/ClientsForm.vue
index c7ef0c9..1d1a7c9 100644
--- a/src/components/modals/clients/ClientsForm.vue
+++ b/src/components/modals/clients/ClientsForm.vue
@@ -30,7 +30,7 @@
           </q-card-section>
 
           <div class="text-h6">Custom Fields</div>
-          <q-card-section v-for="field in customFields">
+          <q-card-section v-for="field in customFields" :key="field.id">
             <CustomField v-model="custom_fields[field.name]" :field="field" />
           </q-card-section>
           <q-card-actions align="right">
@@ -131,14 +131,14 @@ export default {
             const value = r.data.custom_fields.find(value => value.field === field.id);
 
             if (field.type === "multiple") {
-              if (value) this.$set(this.custom_fields, field.name, value.value);
-              else this.$set(this.custom_fields, field.name, []);
+              if (value) this.custom_fields[field.name] = value.value;
+              else this.custom_fields[field.name] = [];
             } else if (field.type === "checkbox") {
-              if (value) this.$set(this.custom_fields, field.name, value.value);
-              else this.$set(this.custom_fields, field.name, false);
+              if (value) this.custom_fields[field.name] = value.value;
+              else this.this.custom_fields[field.name] = false;
             } else {
-              if (value) this.$set(this.custom_fields, field.name, value.value);
-              else this.$set(this.custom_fields, field.name, "");
+              if (value) this.custom_fields[field.name] = value.value;
+              else this.custom_fields[field.name] = "";
             }
           }
         })
diff --git a/src/components/modals/clients/SitesForm.vue b/src/components/modals/clients/SitesForm.vue
index c0d07b1..4afc6da 100644
--- a/src/components/modals/clients/SitesForm.vue
+++ b/src/components/modals/clients/SitesForm.vue
@@ -34,7 +34,7 @@
           </q-card-section>
 
           <div class="text-h6">Custom Fields</div>
-          <q-card-section v-for="field in customFields">
+          <q-card-section v-for="field in customFields" :key="field.id">
             <CustomField v-model="custom_fields[field.name]" :field="field" />
           </q-card-section>
 
@@ -134,26 +134,15 @@ export default {
           for (let field of this.customFields) {
             const value = r.data.custom_fields.find(value => value.field === field.id);
 
-            // Set correct value for custom field
-            if (
-              field.type === "text" ||
-              field.type === "number" ||
-              field.type === "datetime" ||
-              field.type === "single"
-            ) {
-              if (!!value) this.$set(this.custom_fields, field.name, value.value);
-              else if (!!field.default_value) this.$set(this.custom_fields, field.name, field.default_value);
-              else this.$set(this.custom_fields, field.name, "");
-            } else if (field.type === "multiple") {
-              if (!!value) this.$set(this.custom_fields, field.name, value.multiple_value);
-              else if (!!field.multiple_default_value)
-                this.$set(this.custom_fields, field.name, field.multiple_default_value);
-              else this.$set(this.custom_fields, field.name, []);
+            if (field.type === "multiple") {
+              if (value) this.custom_fields[field.name] = value.value;
+              else this.custom_fields[field.name] = [];
             } else if (field.type === "checkbox") {
-              if (!!value) this.$set(this.custom_fields, field.name, value.checkbox_value);
-              else if (!!field.checkbox_default_value)
-                this.$set(this.custom_fields, field.name, field.checkbox_default_value);
-              else this.$set(this.custom_fields, field.name, false);
+              if (value) this.custom_fields[field.name] = value.value;
+              else this.this.custom_fields[field.name] = false;
+            } else {
+              if (value) this.custom_fields[field.name] = value.value;
+              else this.custom_fields[field.name] = "";
             }
           }
         })
diff --git a/src/mixins/mixins.js b/src/mixins/mixins.js
index 0a03384..2876033 100644
--- a/src/mixins/mixins.js
+++ b/src/mixins/mixins.js
@@ -145,14 +145,13 @@ export default {
       let tempArray = [];
 
       for (let field of fields) {
-        if (values[field.name] !== null || values[field.name] !== undefined)
-          if (field.type === "multiple") {
-            tempArray.push({ multiple_value: values[field.name], field: field.id });
-          } else if (field.type === "checkbox") {
-            tempArray.push({ bool_value: values[field.name], field: field.id });
-          } else {
-            tempArray.push({ string_value: values[field.name], field: field.id });
-          }
+        if (field.type === "multiple") {
+          tempArray.push({ multiple_value: values[field.name], field: field.id });
+        } else if (field.type === "checkbox") {
+          tempArray.push({ bool_value: values[field.name], field: field.id });
+        } else {
+          tempArray.push({ string_value: values[field.name], field: field.id });
+        }
       }
       return tempArray
     },