Web Interface for Tags #104244

Merged
Sybren A. Stüvel merged 30 commits from Evelinealy/flamenco:tag-interface into main 2023-09-04 13:06:10 +02:00
Showing only changes of commit 7461c7d44f - Show all commits

View File

@ -11,7 +11,12 @@
<div class="action-buttons">
<form @submit="createTag">
<input type="text" name="newtagname" v-model="newTagName" placeholder="New Tag Name">
<input
type="text"
name="newtagname"
v-model="newTagName"
placeholder="New Tag Name"
/>
<button type="submit">Create Tag</button>
</form>
</div>
@ -105,8 +110,8 @@
<script>
import { useWorkers } from "@/stores/workers";
import { useNotifs } from "@/stores/notifications";
import { WorkerMgtApi } from '@/manager-api';
import { WorkerTag } from '@/manager-api';
import { WorkerMgtApi } from "@/manager-api";
import { WorkerTag } from "@/manager-api";
import { getAPIClient } from "@/api-client";
import TabItem from "@/components/TabItem.vue";
import TabsWrapper from "@/components/TabsWrapper.vue";
@ -134,7 +139,8 @@ export default {
methods: {
fetchTags() {
this.workers.refreshTags()
this.workers
.refreshTags()
.then(() => {
this.tags = this.workers.tags;
})
@ -150,7 +156,8 @@ export default {
const api = new WorkerMgtApi(getAPIClient());
const newTag = new WorkerTag(this.newTagName);

Not sure why this is implemented in a separate function, it could just all be part of the onRowClick event handler.

Not sure why this is implemented in a separate function, it could just all be part of the `onRowClick` event handler.
api.createWorkerTag(newTag)
api
.createWorkerTag(newTag)
.then(this.fetchTags)

This alone is not enough to update all the rows in the table. When I click one tag, and then another, both appear as if they're selected. You probably need to force a redraw of the table somehow (there's a Tabulator API call for this).

This alone is not enough to update all the rows in the table. When I click one tag, and then another, both appear as if they're selected. You probably need to force a redraw of the table somehow (there's a Tabulator API call for this).
.catch((error) => {
const errorMsg = JSON.stringify(error);
@ -166,10 +173,20 @@ export default {
return;
}
// Find the index of the selected tag in the tags array
const index = this.tags.findIndex((tag) => tag === this.selectedTag);
const index = this.tags.findIndex((tag) => tag.id === this.selectedTag.id);
if (index !== -1) {
this.tags.splice(index, 1);
this.selectedTag = null;
const api = new WorkerMgtApi(getAPIClient());
api
.deleteWorkerTag(this.selectedTag.id)
.then(() => {
this.tags.splice(index, 1);
this.selectedTag = null;
})
.catch((error) => {
const errorMsg = JSON.stringify(error);
useNotifs().add(`Error: ${errorMsg}`);
});
}
},