salix-front/src/components/VnTable/VnVisibleColumn.vue

<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed, onMounted } from 'vue';

import { useState } from 'src/composables/useState';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';

const columns = defineModel({ type: Object, default: [] });
const $props = defineProps({
    tableCode: {
        type: String,
        default: '',
    },
    skip: {
        type: Array,
        default: () => [],
    },
});

const { notify } = useNotify();
const { t } = useI18n();
const state = useState();
const user = state.getUser();
const popupProxyRef = ref();
const initialUserConfigViewData = ref();
const localColumns = ref([]);

const areAllChecksMarked = computed(() => {
    return localColumns.value.every((col) => col.visible);
});

function setUserConfigViewData(data, isLocal) {
    if (!data) return;
    // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
    if (!isLocal) localColumns.value = [];
    // Array to Object
    const skippeds = $props.skip.reduce((a, v) => ({ ...a, [v]: v }), {});

    for (let column of columns.value) {
        const { label, name } = column;
        if (skippeds[name]) continue;
        column.visible = data[name] ?? true;
        if (!isLocal) localColumns.value.push({ name, label, visible: column.visible });
    }
}

function toggleMarkAll(val) {
    localColumns.value.forEach((col) => (col.visible = val));
}

async function getConfig(url, filter) {
    const response = await axios.get(url, {
        params: { filter: filter },
    });
    return response.data && response.data.length > 0 ? response.data[0] : null;
}

async function fetchViewConfigData() {
    try {
        const defaultFilter = {
            where: { tableCode: $props.tableCode },
        };

        const userConfig = await getConfig('UserConfigViews', {
            where: {
                ...defaultFilter.where,
                ...{ userFk: user.value.id },
            },
        });

        if (userConfig) {
            initialUserConfigViewData.value = userConfig;
            setUserConfigViewData(userConfig.configuration);
            return;
        }

        const defaultConfig = await getConfig('DefaultViewConfigs', defaultFilter);
        if (defaultConfig) {
            setUserConfigViewData(defaultConfig.columns);
            return;
        }
    } catch (err) {
        console.error('Error fetching config view data', err);
    }
}

async function saveConfig() {
    const configuration = {};
    for (const { name, visible } of localColumns.value)
        configuration[name] = visible ?? true;
    setUserConfigViewData(configuration, true);
    if (!$props.tableCode) return popupProxyRef.value.hide();

    try {
        const params = {};
        // Si existe una view config del usuario hacemos un update si no la creamos
        if (initialUserConfigViewData.value) {
            params.updates = [
                {
                    data: {
                        configuration,
                    },
                    where: {
                        id: initialUserConfigViewData.value.id,
                    },
                },
            ];
        } else {
            params.creates = [
                {
                    userFk: user.value.id,
                    tableCode: $props.tableCode,
                    tableConfig: $props.tableCode,
                    configuration,
                },
            ];
        }

        const response = await axios.post('UserConfigViews/crud', params);
        if (response.data && response.data[0]) {
            initialUserConfigViewData.value = response.data[0];
        }
        notify('globals.dataSaved', 'positive');
        popupProxyRef.value.hide();
    } catch (err) {
        console.error('Error saving user view config', err);
        notify('errors.writeRequest', 'negative');
    }
}

onMounted(async () => {
    setUserConfigViewData({});
    await fetchViewConfigData();
});
</script>
<template>
    <QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md q-px-sm" dense>
        <QPopupProxy ref="popupProxyRef">
            <QCard class="column q-pa-md">
                <QIcon name="info" size="sm" class="info-icon">
                    <QTooltip>{{ t('Check the columns you want to see') }}</QTooltip>
                </QIcon>
                <span class="text-body1 q-mb-sm">{{ t('Visible columns') }}</span>
                <QCheckbox
                    :label="t('Tick all')"
                    :model-value="areAllChecksMarked"
                    @update:model-value="toggleMarkAll($event)"
                    class="q-mb-sm"
                />
                <div v-if="columns.length > 0" class="checks-layout">
                    <QCheckbox
                        v-for="col in localColumns"
                        :key="col.name"
                        :label="col.label"
                        v-model="col.visible"
                    />
                </div>
                <QBtn
                    class="full-width q-mt-md"
                    color="primary"
                    @click="saveConfig()"
                    :label="t('globals.save')"
                />
            </QCard>
        </QPopupProxy>
        <QTooltip>{{ t('Visible columns') }}</QTooltip>
    </QBtn>
</template>

<style lang="scss" scoped>
.info-icon {
    position: absolute;
    top: 20px;
    right: 20px;
}

.checks-layout {
    display: grid;
    grid-template-columns: repeat(3, 200px);
}
</style>

<i18n>
    es:
        Check the columns you want to see: Marca las columnas que quieres ver
        Visible columns: Columnas visibles
        Tick all: Marcar todas
</i18n>