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 +39 -29
1 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,12 +2,6 @@
<div class="col col-tags-list">
<h2 class="column-title">Available Tags</h2>
<div class="action-buttons btn-bar-group">
<div class="btn-bar">
<button @click="deleteTag" :disabled="!selectedTag">Delete Tag</button>
</div>
</div>
<div class="action-buttons btn-bar">
<form @submit="createTag">
<div class="create-tag-container">
@ -126,12 +120,22 @@ export default {
const tag_options = {
columns: [
{ title: 'Name', field: 'name', sorter: 'string', editor: 'input' },
{
title: 'Name',
field: 'name',
sorter: 'string',
editor: 'input',
vertAlign: 'center',
widthGrow: 1,
},
{
title: 'Description',
field: 'description',
sorter: 'string',
editor: 'input',
vertAlign: 'center',
widthGrow: 2,
dr.sybren marked this conversation as resolved Outdated
Sybren A. Stüvel commented 2023-09-04 23:34:32 +02:00
Outdated
Review
Copy Link

Add this column to the end, so that it has the same layout as the job blocklist (there the ❌ is on the right as well).

Add this column to the end, so that it has the same layout as the job blocklist (there the ❌ is on the right as well).
formatter(cell) {
const cellValue = cell.getData().description;
if (!cellValue) {
@ -140,15 +144,33 @@ export default {
return cellValue;
},
},
{
title: '',
headerHozAlign: 'right',
width: 60,
formatter: (cell) => {
const button = document.createElement('button');
button.classList.add('remove-tag-button');
button.innerHTML = '❌';
button.addEventListener('click', () => {
const tag = cell.getRow().getData();
this.deleteTag(tag);
});
return button;
},
headerSort: false,
vertAlign: 'center',
},
],
layout: 'fitData',
layout: 'fitColumns',
dr.sybren marked this conversation as resolved Outdated
Sybren A. Stüvel commented 2023-09-04 23:35:31 +02:00
Outdated
Review
Copy Link

Not sure if a fixed width is going to work well here, especially when the window gets resized.

Not sure if a fixed width is going to work well here, especially when the window gets resized.
layoutColumnsOnNewData: true,
height: '82%',
selectable: true,
selectable: false,
};
this.tabulator = new Tabulator('#tag-table-container', tag_options);
this.tabulator.on('rowClick', this.onRowClick);
this.tabulator.on('tableBuilt', () => {
this.fetchTags();
});
@ -211,17 +233,16 @@ export default {
});
},
deleteTag() {
if (!this.selectedTag) {
return;
}
deleteTag(tag) {
const api = new WorkerMgtApi(getAPIClient());
api
.deleteWorkerTag(this.selectedTag.id)
.deleteWorkerTag(tag.id)
.then(() => {
this.selectedTag = null;
this.tabulator.setData(this.tags);
this.tabulator.getRows().forEach((row) => {
if (row.getData().id === tag.id) {
row.delete();
}
});
})
.catch((error) => {
const errorMsg = JSON.stringify(error);
dr.sybren marked this conversation as resolved Outdated
Sybren A. Stüvel commented 2023-09-04 23:33:12 +02:00
Outdated
Review
Copy Link

This shouldn't happen anyway, so you can just remove the entire conditional return here. Better to raise an error that you can see & debug (because of the tag.id access failing) than to silently ignore mistakes.

This shouldn't happen anyway, so you can just remove the entire conditional return here. Better to raise an error that you can see & debug (because of the `tag.id` access failing) than to silently ignore mistakes.
@ -229,17 +250,6 @@ export default {
});
},
onRowClick(event, row) {
const tag = row.getData();
const rowIndex = row.getIndex();
this.tabulator.deselectRow();
this.tabulator.selectRow(rowIndex);
this.selectedTag = tag;
this.activeRowIndex = rowIndex;
},
// SocketIO connection event handlers:
onSIOReconnected() {
this.fetchTags();