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 {
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()
.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}`);
});
}, },
deleteTag() { deleteTag() {