add custom fields to forms and get saving to work

src/components/modals/agents/EditAgent.vue

@@ -131,6 +131,9 @@
                   <q-checkbox v-model="agent.overdue_email_alert" label="Get overdue email alerts" />
                   <q-checkbox v-model="agent.overdue_text_alert" label="Get overdue sms alerts" />
                 </q-card-section>
+                <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>
               <!-- patch -->
               <q-tab-panel name="patch">
@@ -151,13 +154,16 @@
 import { mapGetters } from "vuex";
 import mixins from "@/mixins/mixins";
 import PatchPolicyForm from "@/components/modals/agents/PatchPolicyForm";
+import CustomField from "@/components/CustomField";
 
 export default {
   name: "EditAgent",
-  components: { PatchPolicyForm },
+  components: { PatchPolicyForm, CustomField },
   mixins: [mixins],
   data() {
     return {
+      customFields: [],
+      custom_fields: {},
       agentLoaded: false,
       clientsLoaded: false,
       agent: {},
@@ -192,6 +198,14 @@ export default {
 
         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 (!!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, "");
+        }
       });
     },
     getClientsSites() {
@@ -221,12 +235,22 @@ export default {
       this.$axios
         .patch("/agents/editagent/", this.agent)
         .then(r => {
+          this.saveCustomFields(this.agent.id)
           this.$emit("close");
           this.$emit("edited");
           this.notifySuccess("Agent was edited!");
         })
         .catch(() => this.notifyError("Something went wrong"));
     },
+    saveCustomFields(pk = None) {
+      this.$axios
+        .post(`/agents/customfields/`, {
+          custom_fields: this.formatCustomFields(this.customFields, this.custom_fields, pk),
+        })
+        .catch(e => {
+          console.log({ e });
+        });
+    },
   },
   computed: {
     ...mapGetters(["selectedAgentPk"]),
@@ -237,6 +261,10 @@ export default {
     },
   },
   created() {
+    // Get custom fields
+    this.getCustomFields("agent").then(r => {
+      this.customFields = r.data;
+    });
     this.getAgentInfo();
     this.getClientsSites();
   },

src/components/modals/clients/ClientsForm.vue

@@ -28,6 +28,10 @@
               label="Default first site"
             />
           </q-card-section>
+
+          <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">
             <q-btn dense flat label="Cancel" v-close-popup />
             <q-btn dense flat label="Save" color="primary" type="submit" />
@@ -59,6 +63,7 @@ export default {
       localClient: {
         name: "",
       },
+      custom_fields: {},
     };
   },
   computed: {
@@ -77,8 +82,12 @@ export default {
     addClient() {
       this.$q.loading.show();
       this.$axios
-        .post("/clients/clients/", { site: this.site, client: this.localClient })
+        .post("/clients/clients/", {
+          site: this.site,
+          client: this.localClient,
+        })
         .then(r => {
+          this.saveCustomFields();
           this.refreshDashboardTree();
           this.$q.loading.hide();
           this.onOk();
@@ -95,9 +104,11 @@ export default {
     },
     editClient() {
       this.$q.loading.show();
+
       this.$axios
         .put(`/clients/${this.client.id}/client/`, this.localClient)
         .then(r => {
+          this.saveCustomFields(this.client.id);
           this.refreshDashboardTree();
           this.onOk();
           this.$q.loading.hide();
@@ -113,6 +124,35 @@ export default {
           }
         });
     },
+    getClient() {
+      this.$q.loading.show();
+      this.$axios
+        .get(`/clients/${this.client.id}/client/`)
+        .then(r => {
+          this.$q.loading.hide();
+          this.localClient.name = r.data.name;
+
+          for (let field of this.customFields) {
+            const value = r.data.custom_fields.find(value => value.field === field.id);
+
+            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, "");
+          }
+        })
+        .catch(e => {
+          this.$q.loading.hide();
+        });
+    },
+    saveCustomFields(pk = None) {
+      this.$axios
+        .post(`/clients/customfields/`, {
+          custom_fields: this.formatCustomFields(this.customFields, this.custom_fields, pk),
+        })
+        .catch(e => {
+          console.log({ e });
+        });
+    },
     refreshDashboardTree() {
       this.$store.dispatch("loadTree");
       this.$store.dispatch("getUpdatedSites");
@@ -132,10 +172,14 @@ export default {
     },
   },
   created() {
+    // Get custom fields
+    this.getCustomFields("client").then(r => {
+      this.customFields = r.data;
+    });
+
     // Copy client prop locally
     if (this.editing) {
-      this.localClient.id = this.client.id;
-      this.localClient.name = this.client.name;
+      this.getClient();
     }
   },
 };

src/components/modals/clients/SitesForm.vue

@@ -32,6 +32,11 @@
               label="Name"
             />
           </q-card-section>
+
+          <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">
             <q-btn dense flat label="Cancel" v-close-popup />
             <q-btn dense flat label="Save" color="primary" type="submit" />
@@ -60,10 +65,10 @@ export default {
       customFields: [],
       clientOptions: [],
       localSite: {
-        id: null,
         client: null,
         name: "",
       },
+      custom_fields: {},
     };
   },
   computed: {
@@ -84,6 +89,7 @@ export default {
       this.$axios
         .post("/clients/sites/", this.localSite)
         .then(r => {
+          this.saveCustomFields();
           this.refreshDashboardTree();
           this.$q.loading.hide();
           this.onOk();
@@ -103,6 +109,7 @@ export default {
       this.$axios
         .put(`/clients/sites/${this.site.id}/`, this.localSite)
         .then(r => {
+          this.saveCustomFields(this.site.id);
           this.refreshDashboardTree();
           this.onOk();
           this.$q.loading.hide();
@@ -117,6 +124,27 @@ export default {
           }
         });
     },
+    getSite() {
+      this.$q.loading.show();
+      this.$axios
+        .get(`/clients/sites/${this.site.id}/`)
+        .then(r => {
+          this.$q.loading.hide();
+          this.localSite.name = r.data.name;
+          this.localSite.client = r.data.client;
+
+          for (let field of this.customFields) {
+            const value = r.data.custom_fields.find(value => value.field === field.id);
+
+            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, "");
+          }
+        })
+        .catch(e => {
+          this.$q.loading.hide();
+        });
+    },
     refreshDashboardTree() {
       this.$store.dispatch("loadTree");
       this.$store.dispatch("getUpdatedSites");
@@ -128,6 +156,15 @@ export default {
         });
       });
     },
+    saveCustomFields(pk = None) {
+      this.$axios
+        .post(`/clients/sites/customfields/`, {
+          custom_fields: this.formatCustomFields(this.customFields, this.custom_fields, pk),
+        })
+        .catch(e => {
+          console.log({ e });
+        });
+    },
     show() {
       this.$refs.dialog.show();
     },
@@ -145,14 +182,17 @@ export default {
   created() {
     this.getClients();
 
+    // Get custom fields
+    this.getCustomFields("site").then(r => {
+      this.customFields = r.data;
+    });
+
     // Copy site prop locally
     if (this.editing) {
-      this.localSite.id = this.site.id;
-      this.localSite.name = this.site.name;
-      this.localSite.client = this.site.client;
+      this.getSite();
+    } else {
+      if (this.client) this.localSite.client = this.client;
     }
-
-    if (this.client) this.localSite.client = this.client;
   },
 };
 </script>

src/mixins/mixins.js

@@ -142,13 +142,25 @@ export default {
       return string[0].toUpperCase() + string.substring(1)
     },
     getCustomFields(model) {
-      axios.patch("/core/customfields/", { model: model }).then(r => {
-        return r.data
-      })
+      return axios.patch("/core/customfields/", { model: model })
         .catch(e => {
-          this.notifyError("There was an issue getting Client Custom Fields")
+          this.notifyError("There was an issue getting Custom Fields")
         })
-    }
+    },
+    formatCustomFields(fields, values, pk) {
+      let tempArray = []
+
+      for (let field of fields) {
+        const value = values[field.name]
+        if (value !== field.default_value) {
+          let obj = { value: value, field: field.id }
+          if (!!pk) obj.model = pk
+          tempArray.push(obj)
+        }
+      }
+      console.log(tempArray)
+      return tempArray
+    },
 
   }
 };