salix-front/src/pages/InvoiceOut/InvoiceOutList.vue

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { exportFile, useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
import { toDate, toCurrency } from 'src/filters/index';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import InvoiceOutFilter from './InvoiceOutFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList2 from 'src/components/ui/CardList2.vue';

const { t } = useI18n();
const arrayElements = ref([]);
const manageCheckboxes = ref(false);
const quasar = useQuasar();
const router = useRouter();
const showSelect = ref(false);
const stateStore = useStateStore();

onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));

function navigate(id) {
    router.push({ path: `/invoice-out/${id}` });
}

function viewSummary(id) {
    quasar.dialog({
        component: InvoiceOutSummaryDialog,
        componentProps: {
            id,
        },
    });
}

const setShowSelect = () => {
    showSelect.value = !showSelect.value;
};

const setManageCheckboxes = (downloadType) => {
    console.log(downloadType);
};

const addElement = (element) => {
    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);
        }
    }
};

const downloadCsv = (rows) => {
    const data = arrayElements.value.length ? arrayElements.value : rows;
    let file;
    for (var i = 0; i < data.length; i++) {
        if (i == 0) file += Object.keys(data[i]).join(';') + '\n';
        file +=
            Object.keys(data[i])
                .map(function (key) {
                    return data[i][key];
                })
                .join(';') + '\n';
    }
    const status = exportFile('file.csv', file, {
        encoding: 'windows-1252',
        mimeType: 'text/csv;charset=windows-1252;',
    });

    if (status === true) {
        quasar.notify({
            message: t('fileAllowed'),
            color: 'positive',
            icon: 'check',
        });
    } else {
        quasar.notify({
            message: t('fileDenied'),
            color: 'negative',
            icon: 'warning',
        });
    }
};
</script>

<template>
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport to="#searchbar">
            <VnSearchbar
                :info="t('youCanSearchByInvoiceReference')"
                :label="t('searchInvoice')"
                data-key="InvoiceOutList"
            />
        </Teleport>
        <Teleport to="#actions-append">
            <div class="row q-gutter-x-sm">
                <QBtn
                    @click="stateStore.toggleRightDrawer()"
                    dense
                    flat
                    icon="menu"
                    round
                >
                    <QTooltip bottom anchor="bottom right">
                        {{ t('globals.collapseMenu') }}
                    </QTooltip>
                </QBtn>
            </div>
        </Teleport>
    </template>
    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
        <QScrollArea class="fit text-grey-8">
            <InvoiceOutFilter data-key="InvoiceOutList" />
        </QScrollArea>
    </QDrawer>
    <QPage class="column items-center q-pa-md">
        <div class="card-list">
            <VnPaginate
                auto-load
                data-key="InvoiceOutList"
                order="issued DESC, id DESC"
                url="InvoiceOuts/filter"
            >
                <template #body="{ rows }">
                    <div class="flex justify-around q-mb-md">
                        <div>
                            <QCheckbox
                                label="Marcar todo"
                                v-model="manageCheckboxes"
                                @click="setShowSelect"
                            />

                            <QBtn
                                :disable="!manageCheckboxes"
                                class="q-ml-md"
                                dense
                                flat
                                icon="cloud_download"
                                round
                                v-bind:class="{ dark_icon: !manageCheckboxes }"
                            >
                                <QMenu>
                                    <QList padding dense>
                                        <QItem
                                            @click="setManageCheckboxes('all')"
                                            clickable
                                            v-ripple
                                        >
                                            Todo {{ rows.length }} filas(s)
                                        </QItem>
                                        <QItem
                                            @click="setManageCheckboxes('partial')"
                                            clickable
                                            v-ripple
                                        >
                                            Seleccionar las {{ rows.length }} filas(s)
                                        </QItem>
                                    </QList>
                                </QMenu>
                            </QBtn>
                        </div>
                        <QBtn
                            label="Descargar"
                            color="primary"
                            type="submit"
                            @click="downloadCsv(rows)"
                        />
                    </div>
                    <CardList2
                        :addElement="addElement"
                        :element="row"
                        :id="row.id"
                        :isSelected="manageCheckboxes"
                        :showCheckbox="true"
                        :key="row.id"
                        :title="row.ref"
                        @click="navigate(row.id)"
                        v-for="row of rows"
                    >
                        <template #list-items>
                            <VnLv label="ID" :value="row.id" />
                            <VnLv
                                :label="t('invoiceOut.list.shortIssued')"
                                :title-label="t('invoiceOut.list.issued')"
                                :value="toDate(row.issued)"
                            />
                            <VnLv
                                :label="t('invoiceOut.list.amount')"
                                :value="toCurrency(row.amount)"
                            />
                            <VnLv
                                :label="t('invoiceOut.list.client')"
                                :value="row.clientSocialName"
                            />
                            <VnLv
                                :label="t('invoiceOut.list.shortCreated')"
                                :title-label="t('invoiceOut.list.created')"
                                :value="toDate(row.created)"
                            />
                            <VnLv
                                :label="t('invoiceOut.list.company')"
                                :value="row.companyCode"
                            />
                            <VnLv
                                :label="t('invoiceOut.list.shortDued')"
                                :title-label="t('invoiceOut.list.dued')"
                                :value="toDate(row.dued)"
                            />
                        </template>
                        <template #actions>
                            <QBtn
                                :label="t('components.smartCard.openCard')"
                                @click.stop="navigate(row.id)"
                                color="white"
                                outline
                                type="reset"
                            />
                            <QBtn
                                :label="t('components.smartCard.openSummary')"
                                @click.stop="viewSummary(row.id)"
                                color="primary"
                                style="margin-top: 15px"
                                type="submit"
                            />
                        </template>
                    </CardList2>
                </template>
            </VnPaginate>
        </div>
    </QPage>
</template>

<style lang="scss" scoped>
.card-list {
    width: 100%;
    max-width: 60em;
}

.dark_icon {
    color: #121212;
}

.disabled,
.disabled *,
[disabled],
[disabled] * {
    cursor: default !important;
}
</style>

<i18n>
    {
        "en": {
            "searchInvoice": "Search issued invoice",
            "fileDenied": "Browser denied file download...",
            "fileAllowed": "Successful download of CSV file",
            "youCanSearchByInvoiceReference": "You can search by invoice reference"
        },
        "es": {
            "searchInvoice": "Buscar factura emitida",
            "fileDenied": "El navegador denegó la descarga de archivos...",
            "fileAllowed": "Descarga exitosa de archivo CSV",
            "youCanSearchByInvoiceReference": "Puedes buscar por referencia de la factura"
        }
    }
</i18n>