salix-front/src/pages/Claim/Card/ClaimDevelopment.vue

<script setup>
import { ref, computed, onMounted } 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 VnSelectFilter from 'components/common/VnSelectFilter.vue';
import { getUrl } from 'composables/getUrl';
import { tMobile } from 'composables/tMobile';

const route = useRoute();

const { t } = useI18n();

const claimDevelopmentForm = ref();
const claimReasons = ref([]);
const claimResults = ref([]);
const claimResponsibles = ref([]);
const claimRedeliveries = ref([]);
const workers = ref([]);
const selected = ref([]);
const insertButtonRef = ref();
let salixUrl;

onMounted(async () => {
    salixUrl = await getUrl(`claim/${route.params.id}`);
});

const developmentsFilter = {
    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,
    },
    {
        name: 'claimResult',
        label: t('Result'),
        field: (row) => row.claimResultFk,
        sortable: true,
        options: claimResults.value,
        required: true,
        model: 'claimResultFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 2,
    },
    {
        name: 'claimResponsible',
        label: t('Responsible'),
        field: (row) => row.claimResponsibleFk,
        sortable: true,
        options: claimResponsibles.value,
        required: true,
        model: 'claimResponsibleFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 3,
    },
    {
        name: 'worker',
        label: t('Worker'),
        field: (row) => row.workerFk,
        sortable: true,
        options: workers.value,
        model: 'workerFk',
        optionValue: 'id',
        optionLabel: 'nickname',
        tabIndex: 4,
    },
    {
        name: 'claimRedelivery',
        label: t('Redelivery'),
        field: (row) => row.claimRedeliveryFk,
        sortable: true,
        options: claimRedeliveries.value,
        required: true,
        model: 'claimRedeliveryFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 5,
    },
]);

function goToAction() {
    location.href = `${salixUrl}/action`;
}
</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
    />
    <FetchData
        url="Workers/search"
        :where="{ active: 1 }"
        order="name ASC"
        @on-fetch="(data) => (workers = 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"
        auto-load
        @save-changes="goToAction"
        :default-save="false"
    >
        <template #body="{ rows }">
            <QTable
                :columns="columns"
                :rows="rows"
                :pagination="{ rowsPerPage: 0 }"
                row-key="$index"
                selection="multiple"
                hide-pagination
                v-model:selected="selected"
                :grid="$q.screen.lt.md"
            >
                <template #body-cell="{ row, col }">
                    <QTd
                        auto-width
                        @keyup.ctrl.enter.stop="claimDevelopmentForm.saveChanges()"
                    >
                        <VnSelectFilter
                            :label="col.label"
                            v-model="row[col.model]"
                            :options="col.options"
                            :option-value="col.optionValue"
                            :option-label="col.optionLabel"
                            :autofocus="col.tabIndex == 1"
                            input-debounce="0"
                        >
                            <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>
                        </VnSelectFilter>
                    </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>
                                        <VnSelectFilter
                                            :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"
                                        />
                                    </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
            ref="insertButtonRef"
            fab
            color="primary"
            icon="add"
            @click="claimDevelopmentForm.insert()"
            @keydown.ctrl.enter.stop="claimDevelopmentForm.saveChanges()"
            @keydown.enter.stop
        />
    </QPageSticky>
</template>

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

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