From e03ad73c7fd20e59f00793038253ae83f3e7d465 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 3 Nov 2022 16:26:50 +0100
Subject: [PATCH] Fix multiselect of resources

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/assets/oruga-tailwindcss.css          |  3 +
 js/src/components/Resource/DraggableList.vue | 77 ++++++++++----------
 2 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/js/src/assets/oruga-tailwindcss.css b/js/src/assets/oruga-tailwindcss.css
index 5924b0965..b413f0a91 100644
--- a/js/src/assets/oruga-tailwindcss.css
+++ b/js/src/assets/oruga-tailwindcss.css
@@ -36,6 +36,9 @@ body {
 .btn-size-large {
   @apply text-2xl py-6;
 }
+.btn-size-small {
+  @apply text-sm py-1 px-2;
+}
 .btn-disabled {
   @apply opacity-50 cursor-not-allowed;
 }
diff --git a/js/src/components/Resource/DraggableList.vue b/js/src/components/Resource/DraggableList.vue
index 9eaee7fdd..c470c993b 100644
--- a/js/src/components/Resource/DraggableList.vue
+++ b/js/src/components/Resource/DraggableList.vue
@@ -1,31 +1,32 @@
 <template>
-  <section>
+  <section class="bg-white p-2">
     <p v-if="isRoot">
       {{ $t("A place to store links to documents or resources of any type.") }}
     </p>
-    <div class="list-header">
-      <div class="list-header-right">
-        <o-checkbox v-model="checkedAll" v-if="resources.length > 0" />
-        <div class="actions" v-if="validCheckedResources.length > 0">
-          <small>
-            {{
-              $t(
-                "No resources selected",
-                {
-                  count: validCheckedResources.length,
-                },
-                validCheckedResources.length
-              )
-            }}
-          </small>
-          <o-button
-            variant="danger"
-            icon-right="delete"
-            size="small"
-            @click="deleteMultipleResources"
-            >{{ $t("Delete") }}</o-button
-          >
-        </div>
+    <div class="pl-6 mt-2 flex items-center gap-3">
+      <o-checkbox v-model="checkedAll" v-if="resources.length > 0" />
+      <div
+        class="flex items-center gap-3"
+        v-if="validCheckedResources.length > 0"
+      >
+        <small>
+          {{
+            $t(
+              "No resources selected",
+              {
+                count: validCheckedResources.length,
+              },
+              validCheckedResources.length
+            )
+          }}
+        </small>
+        <o-button
+          variant="danger"
+          icon-right="delete"
+          size="small"
+          @click="deleteMultipleResources"
+          >{{ $t("Delete") }}</o-button
+        >
       </div>
     </div>
     <draggable
@@ -37,7 +38,7 @@
       item-key="id"
     >
       <template #item="{ element }">
-        <div class="resource-item">
+        <div class="flex border m-2 p-2 items-center">
           <div
             class="resource-checkbox px-2"
             :class="{ checked: checkedResources[element.id as string] }"
@@ -73,7 +74,7 @@
 <script lang="ts" setup>
 import ResourceItem from "@/components/Resource/ResourceItem.vue";
 import FolderItem from "@/components/Resource/FolderItem.vue";
-import { ref, watch } from "vue";
+import { reactive, ref, watch } from "vue";
 import { IResource } from "@/types/resource";
 import Draggable from "zhyswan-vuedraggable";
 import { IGroup } from "@/types/actor";
@@ -95,22 +96,12 @@ const groupObject: Record<string, unknown> = {
   put: true,
 };
 
-const checkedResources = ref<{ [key: string]: boolean }>({});
+const checkedResources = reactive<{ [key: string]: boolean }>({});
 
 const validCheckedResources = ref<string[]>([]);
 
 const checkedAll = ref(false);
 
-watch(checkedResources, () => {
-  const newValidCheckedResources: string[] = [];
-  Object.entries(checkedResources).forEach(([key, value]) => {
-    if (value) {
-      newValidCheckedResources.push(key);
-    }
-  });
-  validCheckedResources.value = newValidCheckedResources;
-});
-
 const deleteMultipleResources = async (): Promise<void> => {
   validCheckedResources.value.forEach((resourceID) => {
     emit("delete", resourceID);
@@ -120,10 +111,20 @@ const deleteMultipleResources = async (): Promise<void> => {
 watch(checkedAll, () => {
   props.resources.forEach(({ id }) => {
     if (!id) return;
-    checkedResources.value[id] = checkedAll.value;
+    checkedResources[id] = checkedAll.value;
   });
 });
 
+watch(checkedResources, (newCheckedResources) => {
+  const newValidCheckedResources: string[] = [];
+  Object.entries(newCheckedResources).forEach(([key, value]) => {
+    if (value) {
+      newValidCheckedResources.push(key);
+    }
+  });
+  validCheckedResources.value = newValidCheckedResources;
+});
+
 // const deleteResource = (resourceID: string) => {
 //   validCheckedResources.value = validCheckedResources.value.filter(
 //     (id) => id !== resourceID