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

Fix: Tag Interface Delete Button #104256

Manually merged
Sybren A. Stüvel merged 39 commits from Evelinealy/flamenco:tag-interface into main 2023-11-02 16:13:14 +01:00
Conversation 3 Commits 39 Files Changed 1 +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>
<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" },
{ 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;
}, },
}, },
}; };