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 +164
1 changed files with 164 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5f4a8b3fba - Show all commits

164
web/app/src/views/TagsView.vue Normal file
View File

@ -0,0 +1,164 @@
<template>
<div class="col col-workers-list">
<h2 class="column-title">Tag Details</h2>
<div class="action-buttons">
<button @click="createTag">Create Tag</button>
<button @click="deleteTag" :disabled="tags.length === 0">
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>
</div>
<!-- Table to display tags -->
<table v-if="tags.length > 0" class="tag-table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr
v-for="tag in tags"
:key="tag.name"
@click="onTagClick(tag)"
:class="{ selected: isSelected(tag) }"
>
<td>{{ tag.name }}</td>
<td>{{ tag.description }}</td>
</tr>
</tbody>
Sybren A. Stüvel commented 2023-08-21 09:33:05 +02:00
Outdated
Review
Copy Link

There shouldn't be any need to import this CSS file here. Which problem is this solving?

There shouldn't be any need to import this CSS file here. Which problem is this solving?
</table>
<!-- Show message when no tags found -->
<div v-else class="dl-no-data">
<span>No tags found.</span>
</div>
</div>
<footer class="app-footer"></footer>
</template>
<style scoped>
.action-buttons {
margin-bottom: 10px;
margin-top: 10px;
}
.action-buttons button {
margin-right: 10px;
}
/* Add some basic styling to the table */
.tag-table {
background-color: var(--table-color-background-row-odd);
border-radius: var(--border-radius);
Sybren A. Stüvel commented 2023-08-21 09:30:39 +02:00
Outdated
Review
Copy Link

activeRowIndex is only set, but never read. That means it can be removed.

`activeRowIndex` is only set, but never read. That means it can be removed.
color: var(--color-text-muted);
font-family: var(--font-family-mono);
font-size: var(--font-size-sm);
text-align: left;
width: 100%;
border-collapse: collapse;
margin-top: 20px;
overflow: hidden;
position: relative;
Sybren A. Stüvel commented 2023-08-21 09:21:52 +02:00
Outdated
Review
Copy Link

This line was just for debugging, so it can be removed now.

This line was just for debugging, so it can be removed now.
text-align: left;
transform: translateZ(0);
}
.tag-table th {
height: 24px;
white-space: nowrap;
}
.tag-table td {
border: 1px solid #ccc;
padding: 8px;
Sybren A. Stüvel commented 2023-08-21 09:22:55 +02:00
Outdated
Review
Copy Link

I think this is a copy-paste leftover of the jobs table; tags are immediately deleted, whereas jobs are first marked as 'deletion requested' and then deleted by a background process. This line can be removed.

I think this is a copy-paste leftover of the jobs table; tags are immediately deleted, whereas jobs are first marked as 'deletion requested' and then deleted by a background process. This line can be removed.
text-align: left;
}
.tag-table th {
background-color: #f0f0f0;
}
.tag-table tbody tr:hover {
background-color: #f5f5f5;
}
/* Style for selected row */
.tag-table tbody tr.selected {
background-color: rgb(137, 130, 201);
font-weight: bold;
}
Sybren A. Stüvel commented 2023-08-21 09:23:53 +02:00
Outdated
Review
Copy Link

This function is not called, and thus should be removed.

This function is not called, and thus should be removed.
.selected {
background-color: #f0f0f0;
}
Sybren A. Stüvel commented 2023-08-21 09:24:08 +02:00
Outdated
Review
Copy Link

This function is not called, and thus should be removed.

This function is not called, and thus should be removed.
</style>
<script>
import { useWorkers } from "@/stores/workers";
import { useNotifs } from "@/stores/notifications";
import TabItem from "@/components/TabItem.vue";
import TabsWrapper from "@/components/TabsWrapper.vue";
export default {
components: {
TabItem,
TabsWrapper,
},
data() {
return {
tags: [],
selectedTag: null,
};
},
mounted() {
this.fetchTags();
},
methods: {
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.
fetchTags() {
useWorkers()
.refreshTags()
.then(() => {
this.tags = useWorkers().tags;
})
.catch((error) => {
const errorMsg = JSON.stringify(error);
useNotifs().add(`Error: ${errorMsg}`);
});
},
createTag() {
const newTag = { name: "name", description: "this is a test field" };
this.tags.push(newTag);
},
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.
deleteTag() {
if (this.tags.length === 0) {
return;
}
if (!this.selectedTag) {
return;
}
// Find the index of the selected tag in the tags array
const index = this.tags.findIndex((tag) => tag === this.selectedTag);
if (index !== -1) {
this.tags.splice(index, 1);
this.selectedTag = null;
}
},
onTagClick(tag) {
this.selectedTag = tag;
},
},
computed: {
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.
isSelected() {
return (tag) => tag === this.selectedTag;
},
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).
},
};
</script>