client/site modal fixes

This commit is contained in:
wh1te909
2020-11-08 10:11:45 +00:00
parent aff2aaa8d3
commit 36828d3634
3 changed files with 52 additions and 49 deletions

View File

@@ -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>

View File

@@ -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() {

View File

@@ -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);
}