From 965dac6514bff434688b559b3b44de52415ea138 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Mon, 27 May 2024 22:22:21 +0300
Subject: [PATCH] #2296 Add data bank bulk edit

---
 public/scripts/chats.js                       | 63 +++++++++++++++++++
 .../extensions/attachments/manager.html       | 25 +++++++-
 .../scripts/extensions/attachments/style.css  | 24 +++++++
 3 files changed, 110 insertions(+), 2 deletions(-)

diff --git a/public/scripts/chats.js b/public/scripts/chats.js
index f3019759a..a5ec1abd3 100644
--- a/public/scripts/chats.js
+++ b/public/scripts/chats.js
@@ -855,6 +855,12 @@ async function openAttachmentManager() {
             [ATTACHMENT_SOURCE.CHAT]: '.chatAttachmentsList',
         };
 
+        const selected = template
+            .find(sources[source])
+            .find('.attachmentListItemCheckbox:checked')
+            .map((_, el) => $(el).closest('.attachmentListItem').attr('data-attachment-url'))
+            .get();
+
         template.find(sources[source]).empty();
 
         // Sort attachments by sortField and sortOrder, and apply filter
@@ -864,6 +870,8 @@ async function openAttachmentManager() {
             const isDisabled = isAttachmentDisabled(attachment);
             const attachmentTemplate = template.find('.attachmentListItemTemplate .attachmentListItem').clone();
             attachmentTemplate.toggleClass('disabled', isDisabled);
+            attachmentTemplate.attr('data-attachment-url', attachment.url);
+            attachmentTemplate.attr('data-attachment-source', source);
             attachmentTemplate.find('.attachmentFileIcon').attr('title', attachment.url);
             attachmentTemplate.find('.attachmentListItemName').text(attachment.name);
             attachmentTemplate.find('.attachmentListItemSize').text(humanFileSize(attachment.size));
@@ -876,6 +884,10 @@ async function openAttachmentManager() {
             attachmentTemplate.find('.enableAttachmentButton').toggle(isDisabled).on('click', () => enableAttachment(attachment, renderAttachments));
             attachmentTemplate.find('.disableAttachmentButton').toggle(!isDisabled).on('click', () => disableAttachment(attachment, renderAttachments));
             template.find(sources[source]).append(attachmentTemplate);
+
+            if (selected.includes(attachment.url)) {
+                attachmentTemplate.find('.attachmentListItemCheckbox').prop('checked', true);
+            }
         }
     }
 
@@ -1044,6 +1056,57 @@ async function openAttachmentManager() {
         localStorage.setItem('DataBank_sortOrder', sortOrder);
         renderAttachments();
     });
+    template.find('.bulkActionDelete').on('click', async () => {
+        const selectedAttachments =  document.querySelectorAll('.attachmentListItemCheckboxContainer .attachmentListItemCheckbox:checked');
+
+        if (selectedAttachments.length === 0) {
+            toastr.info('No attachments selected.', 'Data Bank');
+            return;
+        }
+
+        const confirm = await callGenericPopup('Are you sure you want to delete the selected attachments?', POPUP_TYPE.CONFIRM);
+
+        if (confirm !== POPUP_RESULT.AFFIRMATIVE) {
+            return;
+        }
+
+        const attachments = getDataBankAttachments();
+        selectedAttachments.forEach(async (checkbox) => {
+            const listItem = checkbox.closest('.attachmentListItem');
+            if (!(listItem instanceof HTMLElement)) {
+                return;
+            }
+            const url = listItem.dataset.attachmentUrl;
+            const source = listItem.dataset.attachmentSource;
+            const attachment = attachments.find(a => a.url === url);
+            if (!attachment) {
+                return;
+            }
+            await deleteAttachment(attachment, source, () => {}, false);
+        });
+
+        document.querySelectorAll('.attachmentListItemCheckbox, .attachmentsBulkEditCheckbox').forEach(checkbox => {
+            if (checkbox instanceof HTMLInputElement) {
+                checkbox.checked = false;
+            }
+        });
+
+        await renderAttachments();
+    });
+    template.find('.bulkActionSelectAll').on('click', () => {
+        $('.attachmentListItemCheckbox:visible').each((_, checkbox) => {
+            if (checkbox instanceof HTMLInputElement) {
+                checkbox.checked = true;
+            }
+        });
+    });
+    template.find('.bulkActionSelectNone').on('click', () => {
+        $('.attachmentListItemCheckbox:visible').each((_, checkbox) => {
+            if (checkbox instanceof HTMLInputElement) {
+                checkbox.checked = false;
+            }
+        });
+    });
 
     const cleanupFn = await renderButtons();
     await verifyAttachments();
diff --git a/public/scripts/extensions/attachments/manager.html b/public/scripts/extensions/attachments/manager.html
index ea1ce807d..dad00cac8 100644
--- a/public/scripts/extensions/attachments/manager.html
+++ b/public/scripts/extensions/attachments/manager.html
@@ -1,4 +1,4 @@
-<div class="wide100p padding5">
+<div class="wide100p padding5 dataBankAttachments">
     <h2 class="marginBot5">
         <span data-i18n="Data Bank">
             Data Bank
@@ -37,7 +37,27 @@
                 Size (Largest First)
             </option>
         </select>
-
+        <label class="margin0 menu_button menu_button_icon attachmentsBulkEditButton">
+            <i class="fa-solid fa-edit"></i>
+            <span data-i18n="Bulk Edit">Bulk Edit</span>
+            <input type="checkbox" class="displayNone attachmentsBulkEditCheckbox" hidden>
+        </label>
+    </div>
+    <div class="attachmentBulkActionsContainer flex-container marginTopBot5 alignItemsBaseline">
+        <div class="flex-container">
+            <div class="menu_button menu_button_icon bulkActionSelectAll" title="Select all *visible* attachments">
+                <i class="fa-solid fa-check-square"></i>
+                <span data-i18n="Select All">Select All</span>
+            </div>
+            <div class="menu_button menu_button_icon bulkActionSelectNone" title="Deselect all *visible* attachments">
+                <i class="fa-solid fa-square"></i>
+                <span data-i18n="Select None">Select None</span>
+            </div>
+            <div class="menu_button menu_button_icon bulkActionDelete" title="Delete selected attachments">
+                <i class="fa-solid fa-trash"></i>
+                <span data-i18n="Delete">Delete</span>
+            </div>
+        </div>
     </div>
     <div class="justifyLeft globalAttachmentsBlock marginBot10">
         <h3 class="globalAttachmentsTitle margin0 title_restorable">
@@ -102,6 +122,7 @@
 
     <div class="attachmentListItemTemplate template_element">
         <div class="attachmentListItem flex-container alignItemsCenter flexGap10">
+            <div class="attachmentListItemCheckboxContainer"><input type="checkbox" class="attachmentListItemCheckbox"></div>
             <div class="attachmentFileIcon fa-solid fa-file-alt"></div>
             <div class="attachmentListItemName flex1"></div>
             <small class="attachmentListItemCreated"></small>
diff --git a/public/scripts/extensions/attachments/style.css b/public/scripts/extensions/attachments/style.css
index 3c46e7cc9..d2abc4985 100644
--- a/public/scripts/extensions/attachments/style.css
+++ b/public/scripts/extensions/attachments/style.css
@@ -37,3 +37,27 @@
 .attachmentListItemCreated {
     text-align: right;
 }
+
+.attachmentListItemCheckboxContainer,
+.attachmentBulkActionsContainer,
+.attachmentsBulkEditCheckbox {
+    display: none;
+}
+
+@supports selector(:has(*)) {
+    .dataBankAttachments:has(.attachmentsBulkEditCheckbox:checked) .attachmentsBulkEditButton {
+        color: var(--golden);
+    }
+
+    .dataBankAttachments:has(.attachmentsBulkEditCheckbox:checked) .attachmentBulkActionsContainer {
+        display: flex;
+    }
+
+    .dataBankAttachments:has(.attachmentsBulkEditCheckbox:checked) .attachmentListItemCheckboxContainer {
+        display: inline-flex;
+    }
+
+    .dataBankAttachments:has(.attachmentsBulkEditCheckbox:checked) .attachmentFileIcon {
+        display: none;
+    }
+}