Browse Source

WIP: Complete TagsManager functionality

remotes/philippdormann/main
Nelson Chan 4 years ago
parent
commit
105dfb3950
  1. 2
      server/model/monitor.js
  2. 5
      server/server.js
  3. 88
      src/components/TagsManager.vue
  4. 6
      src/pages/EditMonitor.vue

2
server/model/monitor.js

@ -32,7 +32,7 @@ class Monitor extends BeanModel {
notificationIDList[bean.notification_id] = true; notificationIDList[bean.notification_id] = true;
} }
const tags = await R.getAll("SELECT * FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [this.id]); const tags = await R.getAll("SELECT mt.*, tag.name, tag.color FROM monitor_tag mt JOIN tag ON mt.tag_id = tag.id WHERE mt.monitor_id = ?", [this.id]);
return { return {
id: this.id, id: this.id,

5
server/server.js

@ -471,6 +471,7 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
let bean = R.dispense("tag") let bean = R.dispense("tag")
bean.name = tag.name bean.name = tag.name
bean.color = tag.color
await R.store(bean) await R.store(bean)
callback({ callback({
@ -492,6 +493,7 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
let bean = await R.findOne("monitor", " id = ? ", [ tag.id ]) let bean = await R.findOne("monitor", " id = ? ", [ tag.id ])
bean.name = tag.name bean.name = tag.name
bean.color = tag.color
await R.store(bean) await R.store(bean)
callback({ callback({
@ -581,6 +583,9 @@ let indexHTML = fs.readFileSync("./dist/index.html").toString();
monitorID, monitorID,
]) ])
// Cleanup unused Tags
await R.exec("delete from tag where ( select count(*) from monitor_tag mt where tag.id = mt.tag_id ) = 0");
callback({ callback({
ok: true, ok: true,
msg: "Deleted Successfully.", msg: "Deleted Successfully.",

88
src/components/TagsManager.vue

@ -6,7 +6,7 @@
v-for="item in selectedTags" v-for="item in selectedTags"
:key="item.id" :key="item.id"
:item="item" :item="item"
:remove="removeTag" :remove="deleteTag"
/> />
</div> </div>
<div> <div>
@ -79,9 +79,10 @@
<input v-model="newDraftTag.value" class="form-control mb-2" :placeholder="$t('value (optional)')" /> <input v-model="newDraftTag.value" class="form-control mb-2" :placeholder="$t('value (optional)')" />
<div class="mb-2"> <div class="mb-2">
<button <button
type="button"
class="btn btn-secondary float-end" class="btn btn-secondary float-end"
:disabled="processing || newDraftTag.invalid" :disabled="processing || newDraftTag.invalid"
@click="addDraftTag" @click.stop="addDraftTag"
> >
{{ $t("Add") }} {{ $t("Add") }}
</button> </button>
@ -93,6 +94,8 @@
<script> <script>
import VueMultiselect from "vue-multiselect"; import VueMultiselect from "vue-multiselect";
import Tag from "../components/Tag.vue"; import Tag from "../components/Tag.vue";
import { useToast } from "vue-toastification"
const toast = useToast()
export default { export default {
components: { components: {
@ -113,7 +116,7 @@ export default {
return { return {
processing: false, processing: false,
newTags: [], newTags: [],
removeTags: [], deleteTags: [],
newDraftTag: { newDraftTag: {
name: null, name: null,
select: null, select: null,
@ -129,7 +132,7 @@ export default {
return this.tags; return this.tags;
}, },
selectedTags() { selectedTags() {
return this.preSelectedTags.concat(this.newTags).filter(tag => !this.removeTags.includes(tag.id)); return this.preSelectedTags.concat(this.newTags).filter(tag => !this.deleteTags.find(monitorTag => monitorTag.id == tag.id));
}, },
colorOptions() { colorOptions() {
return [ return [
@ -167,13 +170,13 @@ export default {
}, },
}, },
methods: { methods: {
removeTag(item) { deleteTag(item) {
if (item.new) { if (item.new) {
// Undo Adding a new Tag // Undo Adding a new Tag
this.newTags = this.newTags.filter(tag => tag.name != item.name && tag.value != item.value); this.newTags = this.newTags.filter(tag => tag.name != item.name && tag.value != item.value);
} else { } else {
// Remove an Existing Tag // Remove an Existing Tag
this.removeTags.push(item); this.deleteTags.push(item);
} }
}, },
validateDraftTag() { validateDraftTag() {
@ -221,6 +224,79 @@ export default {
new: true, new: true,
}) })
} }
},
addTagAsync(newTag) {
return new Promise((resolve) => {
this.$root.getSocket().emit("addTag", newTag, resolve);
});
},
addMonitorTagAsync(tagId, monitorId, value) {
return new Promise((resolve) => {
this.$root.getSocket().emit("addMonitorTag", tagId, monitorId, value, resolve);
});
},
deleteMonitorTagAsync(tagId, monitorId) {
return new Promise((resolve) => {
this.$root.getSocket().emit("deleteMonitorTag", tagId, monitorId, resolve);
});
},
async submit(monitorId) {
console.log(`Submitting tag changes for monitor ${monitorId}...`);
this.processing = true;
for (const newTag of this.newTags) {
let tagId;
if (newTag.id == null) {
let newTagResult;
await this.addTagAsync(newTag).then((res) => {
if (!res.ok) {
toast.error(res.msg);
newTagResult = false;
}
newTagResult = res.tag;
});
if (!newTagResult) {
// abort
this.processing = false;
return;
}
tagId = newTagResult.id;
} else {
tagId = newTag.id;
}
let newMonitorTagResult;
await this.addMonitorTagAsync(tagId, monitorId, newTag.value).then((res) => {
if (!res.ok) {
toast.error(res.msg);
newMonitorTagResult = false;
}
newMonitorTagResult = true;
});
if (!newMonitorTagResult) {
// abort
this.processing = false;
return;
}
}
for (const deleteTag of this.deleteTags) {
let deleteMonitorTagResult;
await this.deleteMonitorTagAsync(deleteTag.tag_id, deleteTag.monitor_id).then((res) => {
if (!res.ok) {
toast.error(res.msg);
deleteMonitorTagResult = false;
}
deleteMonitorTagResult = true;
});
if (!deleteMonitorTagResult) {
// abort
this.processing = false;
return;
}
}
this.processing = false;
} }
}, },
}; };

6
src/pages/EditMonitor.vue

@ -159,7 +159,7 @@
</template> </template>
<div class="my-3"> <div class="my-3">
<tags-manager :pre-selected-tags="monitor.tags" :tags="tags"></tags-manager> <tags-manager ref="tagsManager" :pre-selected-tags="monitor.tags" :tags="tags"></tags-manager>
</div> </div>
<div class="mt-5 mb-1"> <div class="mt-5 mb-1">
@ -332,6 +332,8 @@ export default {
this.processing = false; this.processing = false;
if (res.ok) { if (res.ok) {
this.$refs.tagsManager.submit(res.monitorID);
toast.success(res.msg); toast.success(res.msg);
this.$router.push("/dashboard/" + res.monitorID) this.$router.push("/dashboard/" + res.monitorID)
} else { } else {
@ -340,6 +342,8 @@ export default {
}) })
} else { } else {
this.$refs.tagsManager.submit(this.monitor.id);
this.$root.getSocket().emit("editMonitor", this.monitor, (res) => { this.$root.getSocket().emit("editMonitor", this.monitor, (res) => {
this.processing = false; this.processing = false;
this.$root.toastRes(res) this.$root.toastRes(res)

Loading…
Cancel
Save