salix-front/src/pages/Claim/Card/ClaimDevelopment.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';
import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';

const route = useRoute();

const { t } = useI18n();

const claimDevelopmentForm = ref();
const claimReasons = ref([]);
const claimResults = ref([]);
const claimResponsibles = ref([]);
const claimRedeliveries = ref([]);
const selected = ref([]);
const saveButtonRef = ref();

const developmentsFilter = computed(() => {
    return {
        fields: [
            'id',
            'claimFk',
            'claimReasonFk',
            'claimResultFk',
            'claimResponsibleFk',
            'workerFk',
            'claimRedeliveryFk',
        ],
        where: {
            claimFk: route.params.id,
        },
    };
});

const columns = computed(() => [
    {
        name: 'claimReason',
        label: t('Reason'),
        field: (row) => row.claimReasonFk,
        sortable: true,
        options: claimReasons.value,
        required: true,
        model: 'claimReasonFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 1,
        align: 'left',
    },
    {
        name: 'claimResult',
        label: t('Result'),
        field: (row) => row.claimResultFk,
        sortable: true,
        options: claimResults.value,
        required: true,
        model: 'claimResultFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 2,
        align: 'left',
    },
    {
        name: 'claimResponsible',
        label: t('Responsible'),
        field: (row) => row.claimResponsibleFk,
        sortable: true,
        options: claimResponsibles.value,
        required: true,
        model: 'claimResponsibleFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 3,
        align: 'left',
    },
    {
        name: 'worker',
        label: t('Worker'),
        field: (row) => row.workerFk,
        sortable: true,
        url: 'Workers/search',
        where: { active: 1 },
        sortBy: 'name ASC',
        model: 'workerFk',
        optionValue: 'id',
        optionLabel: 'nickname',
        tabIndex: 4,
        align: 'left',
    },
    {
        name: 'claimRedelivery',
        label: t('Redelivery'),
        field: (row) => row.claimRedeliveryFk,
        sortable: true,
        options: claimRedeliveries.value,
        required: true,
        model: 'claimRedeliveryFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 5,
        align: 'left',
    },
]);
</script>
<template>
    <FetchData
        url="ClaimReasons"
        order="description"
        @on-fetch="(data) => (claimReasons = data)"
        auto-load
    />
    <FetchData
        url="ClaimResults"
        order="description"
        @on-fetch="(data) => (claimResults = data)"
        auto-load
    />
    <FetchData
        url="ClaimResponsibles"
        order="description"
        @on-fetch="(data) => (claimResponsibles = data)"
        auto-load
    />
    <FetchData
        url="ClaimRedeliveries"
        order="description"
        @on-fetch="(data) => (claimRedeliveries = data)"
        auto-load
    />
    <CrudModel
        data-key="ClaimDevelopments"
        url="ClaimDevelopments"
        model="claimDevelopment"
        :filter="developmentsFilter"
        ref="claimDevelopmentForm"
        :data-required="{ claimFk: route.params.id }"
        v-model:selected="selected"
        @save-changes="$router.push(`/claim/${route.params.id}/action`)"
        :default-save="false"
        auto-load
    >
        <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="claimDevelopmentForm.saveChanges()"
                    >
                        <VnSelectWorker
                            v-if="col.name == 'worker'"
                            v-model="row[col.model]"
                            :autofocus="col.tabIndex == 1"
                            input-debounce="0"
                            hide-selected
                        >
                            <template #option="scope">
                                <QItem v-bind="scope.itemProps">
                                    <QItemSection>
                                        <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
                                        <QItemLabel caption>
                                            {{ scope.opt?.nickname }}
                                            {{ scope.opt?.code }}
                                        </QItemLabel>
                                    </QItemSection>
                                </QItem>
                            </template>
                        </VnSelectWorker>
                        <VnSelect
                            v-else
                            v-model="row[col.model]"
                            :url="col.url"
                            :where="col.where"
                            :sort-by="col.sortBy"
                            :options="col.options"
                            :option-value="col.optionValue"
                            :option-label="col.optionLabel"
                            :autofocus="col.tabIndex == 1"
                            input-debounce="0"
                            hide-selected
                        />
                    </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="claimDevelopmentForm?.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="!claimDevelopmentForm?.hasChanges"
                @click="claimDevelopmentForm?.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="claimDevelopmentForm.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>