From b13bcea3319f260f5f9eed75fc490f3a620c64d5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 22 Apr 2025 17:43:29 +0200
Subject: [PATCH] feat: add VnMultiCheck component for multi-selection
 functionality

---
 src/components/VnTable/VnTable.vue     | 30 ++++++++++++++-
 src/components/common/VnMultiCheck.vue | 51 ++++++++++++++++++++++++++
 2 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/components/common/VnMultiCheck.vue

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 7e9ab85cb..6af2ccf7e 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -33,7 +33,8 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 import VnTableFilter from './VnTableFilter.vue';
 import { getColAlign } from 'src/composables/getColAlign';
 import RightMenu from '../common/RightMenu.vue';
-import VnScroll from '../common/VnScroll.vue'
+import VnScroll from '../common/VnScroll.vue';
+import VnMultiCheck from '../common/VnMultiCheck.vue';
 
 const arrayData = useArrayData(useAttrs()['data-key']);
 const $props = defineProps({
@@ -157,6 +158,7 @@ const CARD_MODE = 'card';
 const TABLE_MODE = 'table';
 const mode = ref(CARD_MODE);
 const selected = ref([]);
+const selectAll = ref(false);
 const hasParams = ref(false);
 const CrudModelRef = ref({});
 const showForm = ref(false);
@@ -638,6 +640,23 @@ const rowCtrlClickFunction = computed(() => {
         };
     return () => {};
 });
+const handleMultiCheck = (value) => {
+    if (value) {
+        selected.value = tableRef.value.rows;
+    } else {
+        selected.value = [];
+    }
+    emit('update:selected', selected.value);
+};
+
+const handleSelectedAll = (data) => {
+    if (data) {
+        selected.value = data;
+    } else {
+        selected.value = [];
+    }
+    emit('update:selected', selected.value);
+};
 </script>
 <template>
     <RightMenu v-if="$props.rightSearch" :overlay="overlay">
@@ -700,6 +719,15 @@ const rowCtrlClickFunction = computed(() => {
                 :hide-selected-banner="true"
                 :data-cy
             >
+                <template #header-selection>
+                    <VnMultiCheck
+                        v-model="selectAll"
+                        :url="$attrs['url']"
+                        @update:selected="handleMultiCheck"
+                        @select:all="handleSelectedAll"
+                    ></VnMultiCheck>
+                </template>
+
                 <template #top-left v-if="!$props.withoutHeader">
                     <slot name="top-left"> </slot>
                 </template>
diff --git a/src/components/common/VnMultiCheck.vue b/src/components/common/VnMultiCheck.vue
new file mode 100644
index 000000000..d898b97a5
--- /dev/null
+++ b/src/components/common/VnMultiCheck.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from 'vue';
+import VnCheckbox from './VnCheckbox.vue';
+import axios from 'axios';
+import { toRaw } from 'vue';
+
+const model = defineModel({ type: [Boolean] });
+const props = defineProps({
+    url: {
+        type: String,
+        default: null,
+        required: true,
+    },
+});
+const value = ref(false);
+const rows = ref(0);
+defineEmits(['update:selected', 'select:all']);
+const onClick = async () => {
+    if (value.value) {
+        axios
+            .get(props.url, {
+                params: {
+                    filter: null,
+                },
+            })
+            .then((response) => {
+                rows.value = response.data;
+                console.log(response.data);
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    }
+};
+</script>
+
+<template>
+    <div style="display: flex">
+        <VnCheckbox v-model="value" @click="$emit('update:selected', value)" />
+        <QBtn v-if="value" flat dense icon="expand_more" @click="onClick">
+            <QMenu anchor="bottom right" self="top right">
+                <QList>
+                    <QItem v-ripple clickable @click="$emit('select:all', toRaw(rows))">
+                        Select all({{ rows.length }})</QItem
+                    >
+                    <slot name="more-options"></slot>
+                </QList>
+            </QMenu>
+        </QBtn>
+    </div>
+</template>