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

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

@ -26,9 +26,7 @@
<footer class="app-footer"></footer> <footer class="app-footer"></footer>
</template> </template>
<style scoped> <style scoped></style>
@import "@/assets/base.css";
</style>
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?
<script> <script>
import { TabulatorFull as Tabulator } from "tabulator-tables"; import { TabulatorFull as Tabulator } from "tabulator-tables";
@ -59,21 +57,12 @@ export default {
this.fetchTags(); this.fetchTags();
const vueComponent = this; const vueComponent = this;
const api = new WorkerMgtApi(getAPIClient());
window.api = api;
const tag_options = { const tag_options = {
columns: [ columns: [
{ title: "Name", field: "name", sorter: "string" }, { title: "Name", field: "name", sorter: "string" },
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.
{ title: "Description", field: "description", sorter: "string" }, { title: "Description", field: "description", sorter: "string" },
], ],
rowFormatter(row) {
const data = row.getData();
const isActive = data.id === vueComponent.activeTagID;
const classList = row.getElement().classList;
classList.toggle("active-row", isActive);
classList.toggle("deletion-requested", !!data.delete_requested_at);
},
layout: "fitData", layout: "fitData",
layoutColumnsOnNewData: true, layoutColumnsOnNewData: true,
height: "525px", // Must be set in order for the virtual DOM to function correctly. height: "525px", // Must be set in order for the virtual DOM to function correctly.
@ -88,10 +77,6 @@ export default {
}, },
methods: { methods: {
sortData() {
const tab = this.tabulator;
tab.setSort(tab.getSorters()); // This triggers re-sorting.
},
_onTableBuilt() { _onTableBuilt() {
this.fetchTags(); this.fetchTags();
}, },
@ -118,6 +103,7 @@ export default {
.createWorkerTag(newTag) .createWorkerTag(newTag)
.then(() => { .then(() => {
this.fetchTags(); // Refresh table data this.fetchTags(); // Refresh table data
//TODO: Clear the tab as well
}) })
.catch((error) => { .catch((error) => {
const errorMsg = JSON.stringify(error); const errorMsg = JSON.stringify(error);
@ -156,16 +142,12 @@ export default {
}, },
onTagClick(tag, rowIndex) { onTagClick(tag, rowIndex) {
console.log("Clicked Tag:", tag); this.tabulator.deselectRow();
console.log("Selected Tag:", this.selectedTag);
this.selectedTag = this.selectedTag === tag ? null : tag;
this.activeRowIndex = rowIndex;
},
},
computed: { this.tabulator.selectRow(rowIndex);
isSelected() {
return (tag) => tag === this.selectedTag; this.selectedTag = tag;
this.activeRowIndex = rowIndex;
}, },
}, },
}; };