From 926f67e1b52ffad3bdd6f3b9698a658bddabf9b8 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Tue, 23 Mar 2021 23:08:59 +0100
Subject: [PATCH] feat(riot-v5): re-add ALT+click feature on tag list page

---
 src/components/tag-list/remove-image.riot |  6 +++++-
 src/components/tag-list/tag-table.riot    | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/tag-list/remove-image.riot b/src/components/tag-list/remove-image.riot
index 0e343b9..6369d0f 100644
--- a/src/components/tag-list/remove-image.riot
+++ b/src/components/tag-list/remove-image.riot
@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <i class="material-icons">delete</i>
   </material-button>
   <material-checkbox if="{ props.multiDelete }" title="Select this tag to delete it." disabled="{ !state.digest }"
-    onChange="{ handleCheckboxChange }">
+    onChange="{ handleCheckboxChange }" checked="{ state.checked }">
   </material-checkbox>
   <script>
     import {
@@ -29,6 +29,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import router from '../../scripts/router'
     export default {
       onBeforeMount(props, state) {
+        state.checked = props.checked;
         props.image.one('content-digest', (digest) => {
           this.update({
             digest
@@ -36,6 +37,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         });
         props.image.trigger('get-content-digest');
       },
+      onBeforeUpdate(props, state) {
+        state.checked = props.checked;
+      },
       deleteImage(ignoreError) {
         // registryUI.taglist.go(name);
         deleteImage(this.props.image, this.props.registryUrl, ignoreError)
diff --git a/src/components/tag-list/tag-table.riot b/src/components/tag-list/tag-table.riot
index 0d82889..4ad5372 100644
--- a/src/components/tag-list/tag-table.riot
+++ b/src/components/tag-list/tag-table.riot
@@ -60,7 +60,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           </td>
           <td if="{ props.isImageRemoveActivated }" class="remove-tag">
             <remove-image multi-delete="{ state.multiDelete }" image="{ image }" registry-url="{ props.registryUrl }"
-              handleCheckboxChange="{ onRemoveImageChange }" />
+              handleCheckboxChange="{ onRemoveImageChange }" checked="{ state.toDelete.has(image) }" />
           </td>
         </tr>
       </tbody>
@@ -108,10 +108,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       bulkDelete() {
         this.state.toDelete.forEach(image => deleteImage(image, this.props.registryUrl, true))
       },
-      onRemoveImageHeaderChange(checked) {
-        this.update({
-          multiDelete: checked
-        })
+      onRemoveImageHeaderChange(checked, event) {
+        if (event.altKey === true) {
+          const tags = getPage(this.props.tags, this.props.page);
+          tags.forEach(tag => this.state.toDelete.add(tag));
+          this.update({
+            multiDelete: true,
+            toDelete: this.state.toDelete
+          })
+        } else {
+          this.update({
+            multiDelete: checked
+          })
+        }
       },
       onRemoveImageChange(checked, image) {
         if (checked) {