salix-front/src/pages/Worker/Card/WorkerBusiness.vue

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnTable from 'components/VnTable/VnTable.vue';
import { toDate } from 'src/filters';
import { useQuasar } from 'quasar';
import axios from 'axios';

const { t } = useI18n();
const route = useRoute();
const tableRef = ref();
const entityId = computed(() => route.params.id);
const quasar = useQuasar();

async function reactivateWorker() {
    const hasToReactive = tableRef.value.CrudModelRef.formData.find(
        (data) => !data.ended
    );
    if (hasToReactive) {
        quasar
            .dialog({
                message: t('Do you want to reactivate the user?'),
                ok: {
                    push: true,
                    color: 'primary',
                },
                cancel: true,
            })
            .onOk(async () => {
                await axios.patch(`Workers/${entityId.value}`, {
                    isDisable: false,
                });
            });
    }
}
const columns = computed(() => [
    {
        name: 'started',
        label: t('worker.business.tableVisibleColumns.started'),
        align: 'left',
        format: ({ started }) => toDate(started),
        component: 'date',
        cardVisible: true,
        create: true,
    },

    {
        name: 'ended',
        label: t('worker.business.tableVisibleColumns.ended'),
        align: 'left',
        format: ({ ended }) => toDate(ended),
        component: 'date',
        cardVisible: true,
        create: true,
    },
    {
        label: t('worker.business.tableVisibleColumns.company'),
        align: 'left',
        name: 'companyCodeFk',
        component: 'select',
        attrs: {
            url: 'Companies',
            fields: ['code'],
            optionLabel: 'code',
            optionValue: 'code',
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'reasonEndFk',
        component: 'select',
        label: t('worker.business.tableVisibleColumns.reasonEnd'),
        attrs: {
            url: 'BusinessReasonEnds',
            fields: ['id', 'reason'],
            optionLabel: 'reason',
        },
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'departmentFk',
        component: 'select',
        label: t('worker.business.tableVisibleColumns.department'),
        attrs: {
            url: 'Departments',
            fields: ['id', 'name'],
            optionLabel: 'name',
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'workerBusinessProfessionalCategoryFk',
        component: 'select',
        label: t('worker.business.tableVisibleColumns.professionalCategory'),
        attrs: {
            url: 'WorkerBusinessProfessionalCategories',
            fields: ['id', 'description', 'code'],
            optionLabel: 'description',
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'calendarTypeFk',
        component: 'select',
        label: t('worker.business.tableVisibleColumns.calendarType'),
        attrs: {
            url: 'CalendarTypes',
            fields: ['id', 'description'],
            optionLabel: 'description',
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'workcenterFk',
        component: 'select',
        label: t('worker.business.tableVisibleColumns.workCenter'),
        attrs: {
            url: 'WorkCenters',
            fields: ['id', 'name'],
            optionLabel: 'name',
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'workerBusinessCategoryFk',
        component: 'select',
        label: t('worker.business.tableVisibleColumns.payrollCategories'),
        attrs: {
            url: 'payrollCategories',
            fields: ['id', 'description'],
            optionLabel: 'description',
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'occupationCodeFk',
        component: 'select',
        label: t('worker.business.tableVisibleColumns.occupationCode'),
        attrs: {
            url: 'OccupationCodes',
            fields: ['code', 'name'],
            optionValue: 'code',
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'rate',
        label: t('worker.business.tableVisibleColumns.rate'),
        component: 'input',
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'workerBusinessTypeFk',
        component: 'select',
        label: t('worker.business.tableVisibleColumns.businessType'),
        attrs: {
            url: 'WorkerBusinessTypes',
            fields: ['id', 'name'],
        },
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        label: t('worker.business.tableVisibleColumns.amount'),
        name: 'amount',
        component: 'input',
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        label: t('worker.business.tableVisibleColumns.basicSalary'),
        name: 'basicSalary',
        component: 'input',
        cardVisible: true,
        create: true,
    },
    {
        name: 'notes',
        label: t('worker.business.tableVisibleColumns.notes'),
        align: 'left',
        component: 'input',
        cardVisible: true,
    },
]);
</script>

<template>
    <VnTable
        ref="tableRef"
        data-key="WorkerBusiness"
        :url="`Workers/${entityId}/Business`"
        save-url="/Businesses/crud"
        :create="{
            urlCreate: `Workers/${entityId}/Business`,
            title: 'Create business',
            onDataSaved: () => tableRef.reload(),
            formInitialData: {},
        }"
        order="id DESC"
        :columns="columns"
        default-mode="card"
        auto-load
        :disable-option="{ table: true }"
        :right-search="false"
        card-class="grid-two q-gutter-x-xl q-gutter-y-md q-pr-lg q-py-lg"
        :is-editable="true"
        :use-model="true"
        @save-changes="(data) => reactivateWorker(data)"
    />
</template>
<i18n>
es:
    Do you want to reactivate the user?: desea reactivar el usuario?
</i18n>