studio/flamenco
studio/flamenco
12
30
Fork 38
Code Issues 63 Pull Requests 5 Releases Wiki Activity

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
Conversation 6 Commits 30 Files Changed 3 +30 -7
1 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7ecf89e94b - Show all commits

37
web/app/src/views/TagsView.vue
View File

@ -3,12 +3,19 @@
<h2 class="column-title">Tag Details</h2> <h2 class="column-title">Tag Details</h2>
<div class="action-buttons"> <div class="action-buttons">
<button @click="createTag">Create Tag</button> <button @click="fetchTags">Refresh</button>
<button @click="deleteTag" :disabled="tags.length === 0"> <button @click="deleteTag" :disabled="tags.length === 0">
Delete Tag Delete Tag
Sybren A. Stüvel commented 2023-09-04 12:35:54 +02:00
Review
Copy Link

For a followup PR, I think it would be nicer to remove this button, and have a little ❌ icon behind each tag (just like in Blocklist.vue for removing blocklist entries).

Since selection of tags is only used for deleting them, this little change would remove the entire need to select tags. It also clears up the double semantics of clicking on a tag name: it currently both selects the tag and allows renaming it.

For a followup PR, I think it would be nicer to remove this button, and have a little ❌ icon behind each tag (just like in `Blocklist.vue` for removing blocklist entries). Since selection of tags is only used for deleting them, this little change would remove the entire need to select tags. It also clears up the double semantics of clicking on a tag name: it currently both selects the tag and allows renaming it.
</button> </button>
</div> </div>
<div class="action-buttons">
<form @submit="createTag">
<input type="text" name="newtagname" v-model="newTagName" placeholder="New Tag Name">
<button type="submit">Create Tag</button>
</form>
</div>
<!-- Table to display tags --> <!-- Table to display tags -->
<table v-if="tags.length > 0" class="tag-table"> <table v-if="tags.length > 0" class="tag-table">
<thead> <thead>
@ -98,6 +105,9 @@
<script> <script>
import { useWorkers } from "@/stores/workers"; import { useWorkers } from "@/stores/workers";
import { useNotifs } from "@/stores/notifications"; import { useNotifs } from "@/stores/notifications";
import { WorkerMgtApi } from '@/manager-api';
import { WorkerTag } from '@/manager-api';
import { getAPIClient } from "@/api-client";
import TabItem from "@/components/TabItem.vue"; import TabItem from "@/components/TabItem.vue";
import TabsWrapper from "@/components/TabsWrapper.vue"; import TabsWrapper from "@/components/TabsWrapper.vue";
@ -110,19 +120,23 @@ export default {
return { return {
Sybren A. Stüvel commented 2023-08-21 09:30:03 +02:00
Outdated
Review
Copy Link

I think it's also nice to clear the input field once the tag has been succesfully created.

I think it's also nice to clear the input field once the tag has been succesfully created.
tags: [], tags: [],
selectedTag: null, selectedTag: null,
newTagName: "",
workers: useWorkers(),
}; };
}, },
mounted() { mounted() {
this.fetchTags(); this.fetchTags();
const api = new WorkerMgtApi(getAPIClient());
window.api = api;
}, },
methods: { methods: {
fetchTags() { fetchTags() {
useWorkers() this.workers.refreshTags()
Sybren A. Stüvel commented 2023-08-21 09:27:05 +02:00
Outdated
Review
Copy Link

Instead of trying to find the just-deleted tag, just call this.fetchTags().

This is all temporary code, and that it should be removed once the SocketIO broadcasting of tag changes is implemented.

Instead of trying to find the just-deleted tag, just call `this.fetchTags()`. This is all temporary code, and that it should be removed once the SocketIO broadcasting of tag changes is implemented.
.refreshTags()
.then(() => { .then(() => {
this.tags = useWorkers().tags; this.tags = this.workers.tags;
}) })
.catch((error) => { .catch((error) => {
const errorMsg = JSON.stringify(error); const errorMsg = JSON.stringify(error);
@ -130,9 +144,18 @@ export default {
}); });
}, },
createTag() { createTag(event) {
const newTag = { name: "name", description: "this is a test field" }; event.preventDefault();
this.tags.push(newTag);
const api = new WorkerMgtApi(getAPIClient());
const newTag = new WorkerTag(this.newTagName);
api.createWorkerTag(newTag)
.then(this.fetchTags)
.catch((error) => {
const errorMsg = JSON.stringify(error);
useNotifs().add(`Error: ${errorMsg}`);
});
Sybren A. Stüvel commented 2023-08-21 09:29:32 +02:00
Outdated
Review
Copy Link

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.
}, },
deleteTag() { deleteTag() {
Sybren A. Stüvel commented 2023-08-21 09:31:39 +02:00
Outdated
Review
Copy Link

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).