Fix: Tag Interface Delete Button #104256

Manually merged
Sybren A. Stüvel merged 39 commits from Evelinealy/flamenco:tag-interface into main 2023-11-02 16:13:14 +01:00
Showing only changes of commit 27c164bca8 - Show all commits

View File

@ -1,10 +1,9 @@
<template> <template>
<div class="col col-workers-list"> <div class="col col-tags-list">
<h2 class="column-title">Tag Details</h2> <h2 class="column-title">Available Tags</h2>
<div class="action-buttons btn-bar-group"> <div class="action-buttons btn-bar-group">
<div class="btn-bar"> <div class="btn-bar">
<button @click="fetchTags">Refresh</button>
<button @click="deleteTag" :disabled="!selectedTag">Delete Tag</button> <button @click="deleteTag" :disabled="!selectedTag">Delete Tag</button>
</div> </div>
</div> </div>
@ -32,10 +31,67 @@
<div id="tag-table-container"></div> <div id="tag-table-container"></div>
</div> </div>
<footer class="app-footer"></footer> <div class="col col-tags-info">
<h2 class="column-title">Information</h2>
<p>
Workers and jobs can be tagged. With these tags you can assign a job to a
subset of your workers.
</p>
<h4>Job Perspective:</h4>
<ul>
<li>A job can have one tag, or no tag.</li>
<li>
A job <strong>with</strong> a tag will only be assigned to workers with
that tag.
</li>
<li>
A job <strong>without</strong> tag will be assigned to any worker.
</li>
</ul>
<h4>Worker Perspective:</h4>
<ul>
<li>A worker can have any number of tags.</li>
<li>
A worker <strong>with</strong> one or more tags will work only on jobs
with one those tags, and on tagless jobs.
</li>
<li>
A worker <strong>without</strong> tags will work only work on tagless
jobs.
</li>
</ul>
</div>
<footer class="app-footer">
<notification-bar />
<update-listener
ref="updateListener"
mainSubscription="allWorkerTags"
@workerTagUpdate="onSIOWorkerTagsUpdate"
@sioReconnected="onSIOReconnected"
@sioDisconnected="onSIODisconnected"
/>
</footer>
</template> </template>
<style scoped> <style>
.col-tags-list {
grid-area: col-1;
}
.col-tags-info {
grid-area: col-2;
color: var(--color-text-muted);
}
.col-tags-info h4 {
margin-bottom: 0.5em;
}
.col-tags-info ul {
margin-top: 0.5em;
padding-left: 2em;
}
.create-tag-container { .create-tag-container {
width: 100%; width: 100%;
display: flex; display: flex;
@ -47,6 +103,9 @@
margin-right: 10px; margin-right: 10px;
height: 30px; height: 30px;
} }
.placeholder {
color: var(--color-text-hint);
}
</style> </style>
<script> <script>
@ -56,13 +115,13 @@ import { useNotifs } from "@/stores/notifications";
import { WorkerMgtApi } from "@/manager-api"; import { WorkerMgtApi } from "@/manager-api";
import { WorkerTag } from "@/manager-api"; import { WorkerTag } from "@/manager-api";
import { getAPIClient } from "@/api-client"; import { getAPIClient } from "@/api-client";
import TabItem from "@/components/TabItem.vue"; import NotificationBar from "@/components/footer/NotificationBar.vue";
import TabsWrapper from "@/components/TabsWrapper.vue"; import UpdateListener from "@/components/UpdateListener.vue";
export default { export default {
components: { components: {
TabItem, NotificationBar,
TabsWrapper, UpdateListener,
}, },
data() { data() {
return { return {
@ -75,6 +134,8 @@ export default {
}, },
mounted() { mounted() {
document.body.classList.add("is-two-columns");
dr.sybren marked this conversation as resolved Outdated

Add this column to the end, so that it has the same layout as the job blocklist (there the is on the right as well).

Add this column to the end, so that it has the same layout as the job blocklist (there the ❌ is on the right as well).
this.fetchTags(); this.fetchTags();
const tag_options = { const tag_options = {
@ -85,6 +146,13 @@ export default {
field: "description", field: "description",
sorter: "string", sorter: "string",
editor: "input", editor: "input",
formatter(cell) {
const cellValue = cell.getData().description;
if (!cellValue) {
return '<span class="placeholder">click to set a description</span>';
}
return cellValue;
},
}, },
], ],
layout: "fitData", layout: "fitData",
@ -103,6 +171,9 @@ export default {
this.updateTagInAPI(editedTag); this.updateTagInAPI(editedTag);
}); });
}, },
unmounted() {
document.body.classList.remove("is-two-columns");
},
methods: { methods: {
_onTableBuilt() { _onTableBuilt() {
@ -127,9 +198,6 @@ export default {
const api = new WorkerMgtApi(getAPIClient()); const api = new WorkerMgtApi(getAPIClient());
const newTag = new WorkerTag(this.newTagName); const newTag = new WorkerTag(this.newTagName);
newTag.description = "Default Description...";
api api
.createWorkerTag(newTag) .createWorkerTag(newTag)
.then(() => { .then(() => {
@ -149,13 +217,6 @@ export default {
api api
.updateWorkerTag(tagId, updatedTagData) .updateWorkerTag(tagId, updatedTagData)
.then(() => { .then(() => {
// Update the local state with the edited data without requiring a page refresh
this.tags = this.tags.map((tag) => {
if (tag.id === tagId) {
return { ...tag, ...updatedTagData };
}
return tag;
});
console.log("Tag updated successfully"); console.log("Tag updated successfully");
}) })
.catch((error) => { .catch((error) => {
@ -175,8 +236,6 @@ export default {
.then(() => { .then(() => {
this.selectedTag = null; this.selectedTag = null;
this.tabulator.setData(this.tags); this.tabulator.setData(this.tags);
this.fetchTags();
}) })
.catch((error) => { .catch((error) => {
const errorMsg = JSON.stringify(error); const errorMsg = JSON.stringify(error);
@ -194,6 +253,15 @@ export default {
this.selectedTag = tag; this.selectedTag = tag;
this.activeRowIndex = rowIndex; this.activeRowIndex = rowIndex;
}, },
dr.sybren marked this conversation as resolved Outdated

This can be removed. The SocketIO handling will already remove the tag, no matter who did the deletion.

This can be removed. The SocketIO handling will already remove the tag, no matter who did the deletion.
// SocketIO connection event handlers:
onSIOReconnected() {
this.fetchTags();
},
onSIODisconnected(reason) {},
onSIOWorkerTagsUpdate(workerTagsUpdate) {
this.fetchTags();
},
}, },
}; };
</script> </script>