salix-front/src/pages/Account/AccountList.vue

<script setup>
import { useI18n } from 'vue-i18n';
import { computed, ref } from 'vue';
import VnTable from 'components/VnTable/VnTable.vue';
import AccountSummary from './Card/AccountSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VnSection from 'src/components/common/VnSection.vue';
import FetchData from 'src/components/FetchData.vue';
import VnInputPassword from 'src/components/common/VnInputPassword.vue';

const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const filter = {
    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
};
const dataKey = 'AccountList';
const roles = ref([]);
const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('Id'),
        isId: true,
        field: 'id',
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'name',
        label: t('Name'),
        component: 'input',
        columnField: {
            component: null,
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'roleFk',
        label: t('Role'),
        component: 'select',
        attrs: {
            url: 'VnRoles',
            optionValue: 'id',
            optionLabel: 'name',
        },
        columnFilter: {
            component: 'select',
            name: 'roleFk',
            attrs: {
                options: roles,
                optionValue: 'id',
                optionLabel: 'name',
            },
        },
        columnField: {
            component: null,
        },
        format: ({ role }, dashIfEmpty) => dashIfEmpty(role?.name),
        create: true,
    },
    {
        align: 'left',
        name: 'nickname',
        label: t('Nickname'),
        isTitle: true,
        component: 'input',
        columnField: {
            component: null,
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'email',
        label: t('Email'),
        component: 'input',
        columnField: {
            component: null,
        },
        create: true,
        visible: false,
    },
    {
        align: 'left',
        name: 'password',
        label: t('Password'),
        columnField: {
            component: null,
        },
        attrs: {},
        required: true,
        visible: false,
    },

    {
        align: 'left',
        name: 'active',
        label: t('Active'),
        component: 'checkbox',
        create: true,
        visible: false,
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, AccountSummary),
                isPrimary: true,
            },
        ],
    },
]);

function exprBuilder(param, value) {
    switch (param) {
        case 'search':
            return /^\d+$/.test(value)
                ? { id: value }
                : {
                      or: [
                          { name: { like: `%${value}%` } },
                          { nickname: { like: `%${value}%` } },
                      ],
                  };
        case 'name':
        case 'nickname':
            return { [param]: { like: `%${value}%` } };
        case 'roleFk':
            return { [param]: value };
    }
}
</script>
<template>
    <FetchData url="VnRoles" @on-fetch="(data) => (roles = data)" auto-load />
    <VnSection
        :data-key="dataKey"
        :columns="columns"
        prefix="account"
        :array-data-props="{
            url: 'VnUsers/preview',
            userFilter: filter,
            order: 'id DESC',
            exprBuilder,
        }"
    >
        <template #body>
            <VnTable
                ref="tableRef"
                :data-key="dataKey"
                :columns="columns"
                :create="{
                    urlCreate: 'VnUsers',
                    title: t('Create user'),
                    onDataSaved: ({ id }) => $refs.tableRef.redirect(id),
                    formInitialData: {},
                }"
                default-mode="table"
                redirect="account"
                :use-model="true"
                :right-search="false"
            >
                <template #more-create-dialog="{ data }">
                    <QCardSection>
                        <VnInputPassword
                            :label="t('Password')"
                            v-model="data.password"
                            :required="true"
                            autocomplete="new-password"
                        />
                    </QCardSection>
                </template>
            </VnTable>
        </template>
    </VnSection>
</template>

<i18n>
    es:
        Id: Id
        Nickname: Nickname
        Name: Nombre
        Password: Contraseña
        Active: Activo
        Role: Rol
</i18n>