fix multiselect checkboxes

Signed-off-by: Vinzenz Rosenkranz <[email protected]>
DH-Center-Tuebingen · Oct 17, 2023 · 8c17fc8 · 8c17fc8
1 parent 8b4d66b
commit 8c17fc8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/resources/js/bootstrap/font.js b/resources/js/bootstrap/font.js
@@ -60,6 +60,7 @@ import {
     faChevronLeft,
     faChevronRight,
     faCircle,
+    faCircleCheck,
     faClipboard,
     faClock,
     faClone,
@@ -245,6 +246,7 @@ library.add(
     faChevronLeft,
     faChevronRight,
     faCircle,
+    faCircleCheck,
     faCircleReg,
     faClipboard,
     faClock,

diff --git a/resources/js/components/tree/Node.vue b/resources/js/components/tree/Node.vue
@@ -1,6 +1,13 @@
 <template>
-    <div @dragenter="onDragEnter" @dragleave="onDragLeave" :id="`tree-node-${data.id}`">
-        <input class="mx-1 form-check-input" type="checkbox" :disabled="state.isSelectionDisabled" :id="`tree-node-mes-${data.id}`" v-model="state.multieditSelected" v-show="state.isSelectionMode" @click.stop="addToMSList()" />
+    <div @dragenter="onDragEnter" @dragleave="onDragLeave" :id="`tree-node-${data.id}`" @click="e => addToMSList(e)">
+        <span v-show="state.isSelectionMode" class="mx-1">
+            <span v-show="state.multieditSelected" class="text-success">
+                <i class="fas fa-fw fa-circle-check"></i>
+            </span>
+            <span v-show="!state.multieditSelected">
+                <i class="far fa-fw fa-circle"></i>
+            </span>
+        </span>
         <a href="" :id="`tree-node-cm-toggle-${data.id}`" @click.prevent @contextmenu.stop.prevent="togglePopup()" class="text-body text-decoration-none disabled" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
             <span style="display: inline-block; text-align: center;" class="px-1">
                 <span v-if="data.children_count" class="badge rounded-pill" style="font-size: 9px;" :style="state.colorStyles" :title="data.children_count">
@@ -152,7 +159,11 @@
             const onDragLeave = _ => {
 
             };
-            const addToMSList = _ => {
+            const addToMSList = event => {
+                if(!state.isSelectionMode) return;
+
+                event.stopPropagation();
+                event.preventDefault();
                 state.multieditSelected = !state.multieditSelected;
                 if(state.multieditSelected) {
                     store.dispatch('addToTreeSelection', {