salix-front/src/pages/Account/Card/AccountInheritedRoles.vue

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import CrudModel from 'components/CrudModel.vue';
import FetchData from 'components/FetchData.vue';
import VnSelect from 'components/common/VnSelect.vue';
import { tMobile } from 'composables/tMobile';

const route = useRoute();

const { t } = useI18n();

const accountDevelopmentForm = ref();
const accountReasons = ref([]);
const accountResults = ref([]);
const accountResponsibles = ref([]);
const accountRedeliveries = ref([]);
const workers = ref([]);
const selected = ref([]);
const saveButtonRef = ref();

const developmentsFilter = {
    fields: [
        'id',
        'accountFk',
        'accountReasonFk',
        'accountResultFk',
        'accountResponsibleFk',
        'workerFk',
        'accountRedeliveryFk',
    ],
    where: {
        accountFk: route.params.id,
    },
};

const columns = computed(() => [
    {
        name: 'accountReason',
        label: t('Reason'),
        field: (row) => row.accountReasonFk,
        sortable: true,
        options: accountReasons.value,
        required: true,
        model: 'accountReasonFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 1,
        align: 'left',
    },
    {
        name: 'accountResult',
        label: t('Result'),
        field: (row) => row.accountResultFk,
        sortable: true,
        options: accountResults.value,
        required: true,
        model: 'accountResultFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 2,
        align: 'left',
    },
    {
        name: 'accountResponsible',
        label: t('Responsible'),
        field: (row) => row.accountResponsibleFk,
        sortable: true,
        options: accountResponsibles.value,
        required: true,
        model: 'accountResponsibleFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 3,
        align: 'left',
    },
    {
        name: 'worker',
        label: t('Worker'),
        field: (row) => row.workerFk,
        sortable: true,
        options: workers.value,
        model: 'workerFk',
        optionValue: 'id',
        optionLabel: 'nickname',
        tabIndex: 4,
        align: 'left',
    },
    {
        name: 'accountRedelivery',
        label: t('Redelivery'),
        field: (row) => row.accountRedeliveryFk,
        sortable: true,
        options: accountRedeliveries.value,
        required: true,
        model: 'accountRedeliveryFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 5,
        align: 'left',
    },
]);
</script>
<template>
    <FetchData
        url="AccountReasons"
        order="description"
        @on-fetch="(data) => (accountReasons = data)"
        auto-load
    />
    <FetchData
        url="AccountResults"
        order="description"
        @on-fetch="(data) => (accountResults = data)"
        auto-load
    />
    <FetchData
        url="AccountResponsibles"
        order="description"
        @on-fetch="(data) => (accountResponsibles = data)"
        auto-load
    />
    <FetchData
        url="AccountRedeliveries"
        order="description"
        @on-fetch="(data) => (accountRedeliveries = data)"
        auto-load
    />
    <FetchData
        url="Workers/search"
        :where="{ active: 1 }"
        order="name ASC"
        @on-fetch="(data) => (workers = data)"
        auto-load
    />
    <CrudModel
        data-key="AccountDevelopments"
        url="AccountDevelopments"
        model="accountDevelopment"
        :filter="developmentsFilter"
        ref="accountDevelopmentForm"
        :data-required="{ accountFk: route.params.id }"
        v-model:selected="selected"
        auto-load
        @save-changes="$router.push(`/account/${route.params.id}/action`)"
        :default-save="false"
    >
        <template #body="{ rows }">
            <QTable
                :columns="columns"
                :rows="rows"
                row-key="$index"
                selection="multiple"
                v-model:selected="selected"
                :grid="$q.screen.lt.md"
                table-header-class="text-left"
            >
                <template #body-cell="{ row, col }">
                    <QTd
                        auto-width
                        @keyup.ctrl.enter.stop="accountDevelopmentForm.saveChanges()"
                    >
                        <VnSelect
                            v-model="row[col.model]"
                            :options="col.options"
                            :option-value="col.optionValue"
                            :option-label="col.optionLabel"
                            :autofocus="col.tabIndex == 1"
                            input-debounce="0"
                            hide-selected
                        >
                            <template #option="scope" v-if="col.name == 'worker'">
                                <QItem v-bind="scope.itemProps">
                                    <QItemSection>
                                        <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
                                        <QItemLabel caption>
                                            {{ scope.opt?.nickname }}
                                            {{ scope.opt?.code }}
                                        </QItemLabel>
                                    </QItemSection>
                                </QItem>
                            </template>
                        </VnSelect>
                    </QTd>
                </template>
                <template #item="props">
                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
                        <QCard
                            bordered
                            flat
                            @keyup.ctrl.enter.stop="accountDevelopmentForm?.saveChanges()"
                        >
                            <QCardSection>
                                <QCheckbox v-model="props.selected" dense />
                            </QCardSection>
                            <QSeparator />
                            <QList dense>
                                <QItem v-for="col in props.cols" :key="col.name">
                                    <QItemSection>
                                        <VnSelect
                                            :label="col.label"
                                            v-model="props.row[col.model]"
                                            :options="col.options"
                                            :option-value="col.optionValue"
                                            :option-label="col.optionLabel"
                                            dense
                                            input-debounce="0"
                                            :autofocus="col.tabIndex == 1"
                                            hide-selected
                                        />
                                    </QItemSection>
                                </QItem>
                            </QList>
                        </QCard>
                    </div>
                </template>
            </QTable>
        </template>
        <template #moreAfterActions>
            <QBtn
                :label="tMobile('globals.save')"
                ref="saveButtonRef"
                color="primary"
                icon="save"
                :disable="!accountDevelopmentForm?.hasChanges"
                @click="accountDevelopmentForm?.onSubmit"
                :title="t('globals.save')"
            />
        </template>
    </CrudModel>
    <QPageSticky position="bottom-right" :offset="[25, 25]">
        <QBtn
            fab
            color="primary"
            icon="add"
            @keydown.tab.prevent="saveButtonRef.$el.focus()"
            @click="accountDevelopmentForm.insert()"
        />
    </QPageSticky>
</template>

<style lang="scss" scoped>
.grid-style-transition {
    transition: transform 0.28s, background-color 0.28s;
}
</style>

<i18n>
es:
    Reason: Motivo
    Result: Consecuencia
    Responsible: Responsable
    Worker: Trabajador
    Redelivery: Devolución
</i18n>