Small update Corpus File List Selection

This commit is contained in:
Inga Kirschnick 2023-05-15 15:18:44 +02:00
parent 49ff1aa284
commit b795cfa891

View File

@ -12,7 +12,7 @@ class CorpusFileList extends ResourceList {
element.addEventListener('click', (event) => {this.onSelectionAction(event)}); element.addEventListener('click', (event) => {this.onSelectionAction(event)});
}); });
this.isInitialized = false; this.isInitialized = false;
this.selectedItemIds = []; this.selectedItemIds = new Set();
this.userId = listContainerElement.dataset.userId; this.userId = listContainerElement.dataset.userId;
this.corpusId = listContainerElement.dataset.corpusId; this.corpusId = listContainerElement.dataset.corpusId;
this.hasPermissionView = listContainerElement.dataset?.hasPermissionView == 'true' || false; this.hasPermissionView = listContainerElement.dataset?.hasPermissionView == 'true' || false;
@ -35,7 +35,7 @@ class CorpusFileList extends ResourceList {
<tr class="list-item"> <tr class="list-item">
<td> <td>
<label class="list-action-trigger ${this.hasPermissionView ? '' : 'hide'}" data-list-action="select"> <label class="list-action-trigger ${this.hasPermissionView ? '' : 'hide'}" data-list-action="select">
<input type="checkbox"> <input class="select-checkbox" type="checkbox">
<span class="disable-on-click"></span> <span class="disable-on-click"></span>
</label> </label>
</td> </td>
@ -80,7 +80,7 @@ class CorpusFileList extends ResourceList {
<tr> <tr>
<th> <th>
<label class="selection-action-trigger ${this.listContainerElement.dataset?.hasPermissionView == 'true' ? '' : 'hide'}" data-selection-action="select-all"> <label class="selection-action-trigger ${this.listContainerElement.dataset?.hasPermissionView == 'true' ? '' : 'hide'}" data-selection-action="select-all">
<input type="checkbox"> <input class="select-all-checkbox" type="checkbox">
<span></span> <span></span>
</label> </label>
</th> </th>
@ -158,7 +158,7 @@ class CorpusFileList extends ResourceList {
window.location.reload(); window.location.reload();
}); });
} else { } else {
Requests.corpora.entity.followers.entity.delete(this.corpusId, followerId); Requests.corpora.entity.followers.entity.delete(this.corpusId, itemId);
} }
}); });
modal.open(); modal.open();
@ -173,13 +173,11 @@ class CorpusFileList extends ResourceList {
break; break;
} }
case 'select': { case 'select': {
if (event.target.checked) { if (event.target.checked) {
this.selectedItemIds.push(itemId); this.selectedItemIds.add(itemId);
} else { } else {
let index = this.selectedItemIds.indexOf(itemId); this.selectedItemIds.delete(itemId);
if (index > -1) {
this.selectedItemIds.splice(index, 1);
}
} }
this.renderingItemSelection(); this.renderingItemSelection();
} }
@ -195,18 +193,19 @@ class CorpusFileList extends ResourceList {
let items = this.listjs.items; let items = this.listjs.items;
let selectableItems = Array.from(items) let selectableItems = Array.from(items)
.filter(item => item.elm) .filter(item => item.elm)
.map(item => item.elm.querySelector('input[type="checkbox"]')); .map(item => item.elm.querySelector('.select-checkbox[type="checkbox"]'));
switch (selectionAction) { switch (selectionAction) {
case 'select-all': { case 'select-all': {
let selectedIds = Array.from(items) let selectedIds = new Set(Array.from(items)
.map(item => item.values().id); .map(item => item.values().id))
if (event.target.checked) { if (event.target.checked) {
selectableItems.forEach(selectableItem => selectableItem.checked = true); selectableItems.forEach(selectableItem => selectableItem.checked = true);
this.selectedItemIds = selectedIds; this.selectedItemIds = selectedIds;
} else { } else {
selectableItems.forEach(checkbox => checkbox.checked = false); selectableItems.forEach(checkbox => checkbox.checked = false);
this.selectedItemIds = this.selectedItemIds.filter(id => !selectedIds.includes(id)); this.selectedItemIds = new Set([...this.selectedItemIds].filter(id => !selectedIds.has(id)));
} }
this.renderingItemSelection(); this.renderingItemSelection();
break; break;
@ -249,9 +248,16 @@ class CorpusFileList extends ResourceList {
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]'); let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
confirmElement.addEventListener('click', (event) => { confirmElement.addEventListener('click', (event) => {
this.selectedItemIds.forEach(selectedItemId => { this.selectedItemIds.forEach(selectedItemId => {
Requests.corpora.entity.files.ent.delete(this.corpusId, selectedItemId); if (currentUserId != this.userId) {
Requests.corpora.entity.files.ent.delete(this.corpusId, selectedItemId)
.then(() => {
window.location.reload();
});
} else {
Requests.corpora.entity.files.ent.delete(this.corpusId, selectedItemId);
}
}); });
this.selectedItemIds = []; this.selectedItemIds.clear();
this.renderingItemSelection(); this.renderingItemSelection();
}); });
modal.open(); modal.open();
@ -265,7 +271,7 @@ class CorpusFileList extends ResourceList {
downloadLink.click(); downloadLink.click();
}); });
selectableItems.forEach(checkbox => checkbox.checked = false); selectableItems.forEach(checkbox => checkbox.checked = false);
this.selectedItemIds = []; this.selectedItemIds.clear();
this.renderingItemSelection(); this.renderingItemSelection();
break; break;
} }
@ -287,7 +293,7 @@ class CorpusFileList extends ResourceList {
Object.values(selectableItems).forEach(selectableItem => { Object.values(selectableItems).forEach(selectableItem => {
if (selectableItem.elm) { if (selectableItem.elm) {
let checkbox = selectableItem.elm.querySelector('input[type="checkbox"]'); let checkbox = selectableItem.elm.querySelector('.select-checkbox[type="checkbox"]');
if (checkbox.checked) { if (checkbox.checked) {
selectableItem.elm.classList.add('grey', 'lighten-3'); selectableItem.elm.classList.add('grey', 'lighten-3');
} else { } else {
@ -305,7 +311,7 @@ class CorpusFileList extends ResourceList {
} }
}); });
// Hide item action buttons if > 0 item is selected and show selection action buttons // Hide item action buttons if > 0 item is selected and show selection action buttons
if (this.selectedItemIds.length > 0) { if (this.selectedItemIds.size > 0) {
selectionActionButtons.forEach(selectionActionButton => { selectionActionButtons.forEach(selectionActionButton => {
selectionActionButton.classList.remove('hide'); selectionActionButton.classList.remove('hide');
}); });