Fix and improve select cards logic in invoice out list

src/components/ui/CardList.vue

@@ -1,28 +1,20 @@
 <script setup>
-import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
 const $props = defineProps({
-    addElement: { type: Function, required: false },
     element: { type: Object, default: null },
     id: { type: Number, default: null },
     isSelected: { type: Boolean, default: false },
     title: { type: String, default: null },
     showCheckbox: { type: Boolean, default: false },
 });
-const checkSelect = ref(false);
 
-watch(
+const emit = defineEmits(['toggleCardCheck']);
-    () => $props.isSelected,
-    (value) => {
-        checkSelect.value = value;
-    }
-);
 
-const selectedItem = (item) => {
+const toggleCardCheck = (item) => {
-    $props.addElement(item);
+    emit('toggleCardCheck', item);
 };
 </script>
 
@@ -41,8 +33,8 @@ const selectedItem = (item) => {
                     </div>
                     <QCheckbox
                         v-if="showCheckbox"
-                        v-model="checkSelect"
+                        :model-value="isSelected"
-                        @click="selectedItem($props.element)"
+                        @click="toggleCardCheck($props.element)"
                     />
                 </div>
             </slot>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -13,11 +13,9 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 
 const { t } = useI18n();
-const arrayElements = ref([]);
+const selectedCards = ref(new Map());
-const manageCheckboxes = ref(false);
 const quasar = useQuasar();
 const router = useRouter();
-const showSelect = ref(false);
 const stateStore = useStateStore();
 
 onMounted(() => (stateStore.rightDrawer = true));
@@ -36,42 +34,40 @@ function viewSummary(id) {
     });
 }
 
-const setShowSelect = () => {
+const toggleIndividualCard = (cardData) => {
-    showSelect.value = !showSelect.value;
+    if (selectedCards.value.has(cardData.id)) {
+        selectedCards.value.delete(cardData.id);
+        return;
+    }
+    selectedCards.value.set(cardData.id, cardData);
 };
 
-const setManageCheckboxes = (downloadType) => {
+const toggleAllCards = (cardsData) => {
-    console.log(downloadType);
+    const allSelected = selectedCards.value.size === cardsData.length;
-};
 
-const addElement = (element) => {
+    if (!allSelected) {
-    showSelect.value = false;
+        // Si no todas las tarjetas están seleccionadas, selecciónalas todas
-    manageCheckboxes.value = false;
+        cardsData.forEach((data) => {
-    if (arrayElements.value.length >= 0) {
+            if (!selectedCards.value.has(data.id)) {
-        const index = arrayElements.value.findIndex((item) => item.id === element.id);
+                selectedCards.value.set(data.id, data);
-        if (index >= 0) {
+            }
-            arrayElements.value.splice(index, 1);
+        });
-        } else {
+    } else {
-            arrayElements.value.push(element);
+        // Si todas las tarjetas están seleccionadas, deselecciónalas todas
-        }
+        selectedCards.value.clear();
     }
 };
 
-watch(manageCheckboxes, (current, prev) => {
+const downloadCsv = () => {
-    if (!current) {
+    if (selectedCards.value.size === 0) return;
-        arrayElements.value = [];
+    const selectedCardsArray = Array.from(selectedCards.value.values());
-    }
-});
-
-const downloadCsv = (rows) => {
-    const data = arrayElements.value.length ? arrayElements.value : rows;
     let file;
-    for (var i = 0; i < data.length; i++) {
+    for (var i = 0; i < selectedCardsArray.length; i++) {
-        if (i == 0) file += Object.keys(data[i]).join(';') + '\n';
+        if (i == 0) file += Object.keys(selectedCardsArray[i]).join(';') + '\n';
         file +=
-            Object.keys(data[i])
+            Object.keys(selectedCardsArray[i])
                 .map(function (key) {
-                    return data[i][key];
+                    return selectedCardsArray[i][key];
                 })
                 .join(';') + '\n';
     }
@@ -79,7 +75,6 @@ const downloadCsv = (rows) => {
         encoding: 'windows-1252',
         mimeType: 'text/csv;charset=windows-1252;',
     });
-
     if (status === true) {
         quasar.notify({
             message: t('fileAllowed'),
@@ -137,14 +132,13 @@ const downloadCsv = (rows) => {
                 <QToolbar class="bg-vn-dark justify-end">
                     <div id="st-actions">
                         <QBtn
-                            @click="downloadCsv(rows)"
+                            @click="downloadCsv()"
                             class="q-mr-xl"
                             color="primary"
-                            :disable="!manageCheckboxes && arrayElements.length < 1"
+                            :disable="selectedCards.size === 0"
                             :label="t('globals.download')"
-                            v-if="!showSelect"
                         />
-                        <QBtnDropdown
+                        <!-- <QBtnDropdown
                             class="q-mr-xl"
                             color="primary"
                             :disable="!manageCheckboxes && arrayElements.length < 1"
@@ -176,13 +170,12 @@ const downloadCsv = (rows) => {
                                     </QItemSection>
                                 </QItem>
                             </QList>
-                        </QBtnDropdown>
+                        </QBtnDropdown> -->
-
                         <QCheckbox
                             left-label
                             :label="t('globals.markAll')"
-                            v-model="manageCheckboxes"
+                            @click="toggleAllCards(rows)"
-                            @click="setShowSelect"
+                            :model-value="selectedCards.size === rows.length"
                             class="q-mr-md"
                         />
                     </div>
@@ -190,14 +183,14 @@ const downloadCsv = (rows) => {
                 <div class="flex flex-center q-pa-md">
                     <div class="card-list">
                         <CardList
-                            :add-element="addElement"
                             :element="row"
                             :id="row.id"
-                            :is-selected="manageCheckboxes"
                             :show-checkbox="true"
+                            :is-selected="selectedCards.has(row.id)"
                             :key="row.id"
                             :title="row.ref"
                             @click="navigate(row.id)"
+                            @toggle-card-check="toggleIndividualCard(row)"
                             v-for="row of rows"
                         >
                             <template #list-items>