171 lines
4.9 KiB
Vue
171 lines
4.9 KiB
Vue
<template>
|
|
<q-dialog ref="dialog" @hide="onHide">
|
|
<q-card style="width: 50vw; max-width: 50vw">
|
|
<q-bar>
|
|
Policy Exclusions for {{ policy.name }}
|
|
<q-space />
|
|
<q-btn dense flat icon="close" v-close-popup>
|
|
<q-tooltip class="bg-white text-primary">Close</q-tooltip>
|
|
</q-btn>
|
|
</q-bar>
|
|
<q-form ref="form" @submit.prevent="onSubmit">
|
|
<q-card-section>
|
|
<q-select
|
|
label="Excluded Clients"
|
|
dense
|
|
options-dense
|
|
outlined
|
|
multiple
|
|
v-model="localPolicy.excluded_clients"
|
|
:options="clientOptions"
|
|
use-chips
|
|
map-options
|
|
emit-value
|
|
/>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-select
|
|
label="Excluded Sites"
|
|
dense
|
|
options-dense
|
|
outlined
|
|
multiple
|
|
v-model="localPolicy.excluded_sites"
|
|
:options="siteOptions"
|
|
use-chips
|
|
map-options
|
|
emit-value
|
|
>
|
|
<template v-slot:option="scope">
|
|
<q-item
|
|
v-if="!scope.opt.category"
|
|
v-bind="scope.itemProps"
|
|
v-on="scope.itemProps.itemEvents"
|
|
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>
|
|
<q-select
|
|
label="Excluded Agents"
|
|
dense
|
|
options-dense
|
|
outlined
|
|
multiple
|
|
v-model="localPolicy.excluded_agents"
|
|
:options="agentOptions"
|
|
use-chips
|
|
map-options
|
|
emit-value
|
|
>
|
|
<template v-slot:option="scope">
|
|
<q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" 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-actions align="right">
|
|
<q-btn dense flat label="Cancel" v-close-popup />
|
|
<q-btn dense flat label="Save" color="primary" type="submit" />
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import mixins from "@/mixins/mixins";
|
|
export default {
|
|
name: "PolicyExclusions",
|
|
emits: ["hide", "ok", "cancel"],
|
|
props: { policy: !Object },
|
|
mixins: [mixins],
|
|
data() {
|
|
return {
|
|
localPolicy: {
|
|
excluded_clients: [],
|
|
excluded_sites: [],
|
|
excluded_agents: [],
|
|
},
|
|
clientOptions: [],
|
|
siteOptions: [],
|
|
agentOptions: [],
|
|
};
|
|
},
|
|
methods: {
|
|
onSubmit() {
|
|
this.$axios
|
|
.put(`automation/policies/${this.policy.id}/`, this.localPolicy)
|
|
.then(r => {
|
|
this.$q.loading.hide();
|
|
this.onOk();
|
|
this.notifySuccess("Policy exclusions added");
|
|
})
|
|
.catch(e => {
|
|
this.$q.loading.hide();
|
|
});
|
|
},
|
|
getClients() {
|
|
this.$axios
|
|
.get("/clients/clients/")
|
|
.then(r => {
|
|
this.clientOptions = r.data.map(client => ({ label: client.name, value: client.id }));
|
|
})
|
|
.catch(e => {});
|
|
},
|
|
getSites() {
|
|
this.$axios
|
|
.get("/clients/clients/")
|
|
.then(r => {
|
|
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 => {});
|
|
},
|
|
getOptions() {
|
|
this.getClients();
|
|
this.getSites();
|
|
this.agentOptions = this.getAgentOptions();
|
|
},
|
|
show() {
|
|
this.$refs.dialog.show();
|
|
},
|
|
hide() {
|
|
this.$refs.dialog.hide();
|
|
},
|
|
onHide() {
|
|
this.$emit("hide");
|
|
},
|
|
onOk() {
|
|
this.$emit("ok");
|
|
this.hide();
|
|
},
|
|
},
|
|
created() {
|
|
this.getOptions();
|
|
|
|
// copy prop data locally
|
|
this.localPolicy.id = this.policy.id;
|
|
this.localPolicy.excluded_clients = this.policy.excluded_clients.map(client => client.id);
|
|
this.localPolicy.excluded_sites = this.policy.excluded_sites.map(site => site.id);
|
|
this.localPolicy.excluded_agents = this.policy.excluded_agents.map(agent => agent.pk);
|
|
},
|
|
};
|
|
</script> |