Files
tacticalrmm-web/src/components/modals/coresettings/URLActionsForm.vue

130 lines
2.9 KiB
Vue

<template>
<q-dialog ref="dialog" @hide="onHide">
<q-card class="q-dialog-plugin" style="width: 60vw">
<q-bar>
{{ title }}
<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 @submit="submit">
<!-- name -->
<q-card-section>
<q-input
label="Name"
outlined
dense
v-model="localAction.name"
:rules="[(val) => !!val || '*Required']"
/>
</q-card-section>
<!-- description -->
<q-card-section>
<q-input
label="Description"
outlined
dense
v-model="localAction.desc"
/>
</q-card-section>
<!-- pattern -->
<q-card-section>
<q-input
label="URL Pattern"
outlined
dense
v-model="localAction.pattern"
:rules="[(val) => !!val || '*Required']"
/>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Cancel" v-close-popup />
<q-btn flat label="Submit" color="primary" type="submit" />
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<script>
import mixins from "@/mixins/mixins";
export default {
name: "URLActionsForm",
emits: ["hide", "ok", "cancel"],
mixins: [mixins],
props: { action: Object },
data() {
return {
localAction: {
name: "",
desc: "",
pattern: "",
},
};
},
computed: {
title() {
return this.editing ? "Edit URL Action" : "Add URL Action";
},
editing() {
return !!this.action;
},
},
methods: {
submit() {
this.$q.loading.show();
let data = {
...this.localAction,
};
if (this.editing) {
this.$axios
.put(`/core/urlaction/${data.id}/`, data)
.then(() => {
this.$q.loading.hide();
this.onOk();
this.notifySuccess("Url Action was edited!");
})
.catch(() => {
this.$q.loading.hide();
});
} else {
this.$axios
.post("/core/urlaction/", data)
.then(() => {
this.$q.loading.hide();
this.onOk();
this.notifySuccess("URL Action was added!");
})
.catch(() => {
this.$q.loading.hide();
});
}
},
show() {
this.$refs.dialog.show();
},
hide() {
this.$refs.dialog.hide();
},
onHide() {
this.$emit("hide");
},
onOk() {
this.$emit("ok");
this.hide();
},
},
mounted() {
// If pk prop is set that means we are editing
if (this.action) Object.assign(this.localAction, this.action);
},
};
</script>