From 8c17fc8ef6182c757c92214da5c4b226debc3a43 Mon Sep 17 00:00:00 2001
From: Vinzenz Rosenkranz <vinzenz.rosenkranz@uni-tuebingen.de>
Date: Tue, 17 Oct 2023 13:11:16 +0200
Subject: [PATCH] fix multiselect checkboxes

Signed-off-by: Vinzenz Rosenkranz <vinzenz.rosenkranz@uni-tuebingen.de>
---
 resources/js/bootstrap/font.js        |  2 ++
 resources/js/components/tree/Node.vue | 17 ++++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/resources/js/bootstrap/font.js b/resources/js/bootstrap/font.js
index 11281fee..2cb7be27 100644
--- 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
index 5565c4f3..5338dcd0 100644
--- 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', {