forked from verdnatura/salix-front
Fix and improve select cards logic in invoice out list
This commit is contained in:
parent
d75ca32d1b
commit
fdb417cf13
|
|
@ -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(
|
||||
() => $props.isSelected,
|
||||
(value) => {
|
||||
checkSelect.value = value;
|
||||
}
|
||||
);
|
||||
const emit = defineEmits(['toggleCardCheck']);
|
||||
|
||||
const selectedItem = (item) => {
|
||||
$props.addElement(item);
|
||||
const toggleCardCheck = (item) => {
|
||||
emit('toggleCardCheck', item);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -41,8 +33,8 @@ const selectedItem = (item) => {
|
|||
</div>
|
||||
<QCheckbox
|
||||
v-if="showCheckbox"
|
||||
v-model="checkSelect"
|
||||
@click="selectedItem($props.element)"
|
||||
:model-value="isSelected"
|
||||
@click="toggleCardCheck($props.element)"
|
||||
/>
|
||||
</div>
|
||||
</slot>
|
||||
|
|
|
|||
|
|
@ -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 manageCheckboxes = ref(false);
|
||||
const selectedCards = ref(new Map());
|
||||
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 = () => {
|
||||
showSelect.value = !showSelect.value;
|
||||
const toggleIndividualCard = (cardData) => {
|
||||
if (selectedCards.value.has(cardData.id)) {
|
||||
selectedCards.value.delete(cardData.id);
|
||||
return;
|
||||
}
|
||||
selectedCards.value.set(cardData.id, cardData);
|
||||
};
|
||||
|
||||
const setManageCheckboxes = (downloadType) => {
|
||||
console.log(downloadType);
|
||||
};
|
||||
const toggleAllCards = (cardsData) => {
|
||||
const allSelected = selectedCards.value.size === cardsData.length;
|
||||
|
||||
const addElement = (element) => {
|
||||
showSelect.value = false;
|
||||
manageCheckboxes.value = false;
|
||||
if (arrayElements.value.length >= 0) {
|
||||
const index = arrayElements.value.findIndex((item) => item.id === element.id);
|
||||
if (index >= 0) {
|
||||
arrayElements.value.splice(index, 1);
|
||||
} else {
|
||||
arrayElements.value.push(element);
|
||||
}
|
||||
if (!allSelected) {
|
||||
// Si no todas las tarjetas están seleccionadas, selecciónalas todas
|
||||
cardsData.forEach((data) => {
|
||||
if (!selectedCards.value.has(data.id)) {
|
||||
selectedCards.value.set(data.id, data);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Si todas las tarjetas están seleccionadas, deselecciónalas todas
|
||||
selectedCards.value.clear();
|
||||
}
|
||||
};
|
||||
|
||||
watch(manageCheckboxes, (current, prev) => {
|
||||
if (!current) {
|
||||
arrayElements.value = [];
|
||||
}
|
||||
});
|
||||
|
||||
const downloadCsv = (rows) => {
|
||||
const data = arrayElements.value.length ? arrayElements.value : rows;
|
||||
const downloadCsv = () => {
|
||||
if (selectedCards.value.size === 0) return;
|
||||
const selectedCardsArray = Array.from(selectedCards.value.values());
|
||||
let file;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (i == 0) file += Object.keys(data[i]).join(';') + '\n';
|
||||
for (var i = 0; i < selectedCardsArray.length; i++) {
|
||||
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="setShowSelect"
|
||||
@click="toggleAllCards(rows)"
|
||||
: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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue