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

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import { useSession } from 'src/composables/useSession';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';

const route = useRoute();
const { t } = useI18n();
const session = useSession();
const token = session.getToken();

const claimFilter = {
    include: [
        {
            relation: 'client',
            scope: {
                fields: ['name'],
            },
        },
    ],
};

const workers = ref([]);
const workersCopy = ref([]);
const claimStates = ref([]);
const claimStatesCopy = ref([]);

function setWorkers(data) {
    workers.value = data;
    workersCopy.value = data;
}

function setClaimStates(data) {
    claimStates.value = data;
    claimStatesCopy.value = data;
}

const workerFilter = {
    options: workers,
    filterFn: (options, value) => {
        const search = value.toLowerCase();

        if (value === '') return workersCopy.value;

        return options.value.filter((row) => {
            const id = row.id;
            const name = row.name.toLowerCase();

            const idMatches = id == search;
            const nameMatches = name.indexOf(search) > -1;

            return idMatches || nameMatches;
        });
    },
};

const statesFilter = {
    options: claimStates,
    filterFn: (options, value) => {
        const search = value.toLowerCase();

        if (value === '') return claimStatesCopy.value;

        return options.value.filter((row) => {
            const description = row.description.toLowerCase();

            return description.indexOf(search) > -1;
        });
    },
};
</script>
<template>
    <FetchData
        url="Workers/activeWithInheritedRole"
        :filter="{ where: { role: 'salesPerson' } }"
        @on-fetch="setWorkers"
        auto-load
    />
    <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />

    <div class="column items-center">
        <QCard>
            <FormModel
                :url="`Claims/${route.params.id}`"
                :filter="claimFilter"
                model="claim"
            >
                <template #form="{ data, validate, filter }">
                    <div class="row q-gutter-md q-mb-md">
                        <div class="col">
                            <QInput
                                v-model="data.client.name"
                                :label="t('claim.basicData.customer')"
                                disable
                            />
                        </div>
                        <div class="col">
                            <QInput
                                v-model="data.created"
                                mask="####-##-##"
                                fill-mask="_"
                                autofocus
                            >
                                <template #append>
                                    <QIcon name="event" class="cursor-pointer">
                                        <QPopupProxy
                                            cover
                                            transition-show="scale"
                                            transition-hide="scale"
                                        >
                                            <QDate
                                                v-model="data.created"
                                                mask="YYYY-MM-DD"
                                            >
                                                <div class="row items-center justify-end">
                                                    <QBtn
                                                        v-close-popup
                                                        label="Close"
                                                        color="primary"
                                                        flat
                                                    />
                                                </div>
                                            </QDate>
                                        </QPopupProxy>
                                    </QIcon>
                                </template>
                            </QInput>
                        </div>
                    </div>
                    <div class="row q-gutter-md q-mb-md">
                        <div class="col">
                            <QSelect
                                v-model="data.workerFk"
                                :options="workers"
                                option-value="id"
                                option-label="name"
                                emit-value
                                :label="t('claim.basicData.assignedTo')"
                                map-options
                                use-input
                                @filter="
                                    (value, update) => filter(value, update, workerFilter)
                                "
                                :rules="validate('claim.claimStateFk')"
                                :input-debounce="0"
                            >
                                <template #before>
                                    <QAvatar color="orange">
                                        <QImg
                                            v-if="data.workerFk"
                                            :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
                                            spinner-color="white"
                                        />
                                    </QAvatar>
                                </template>
                            </QSelect>
                        </div>
                        <div class="col">
                            <QSelect
                                v-model="data.claimStateFk"
                                :options="claimStates"
                                option-value="id"
                                option-label="description"
                                emit-value
                                :label="t('claim.basicData.state')"
                                map-options
                                use-input
                                @filter="
                                    (value, update) => filter(value, update, statesFilter)
                                "
                                :rules="validate('claim.claimStateFk')"
                                :input-debounce="0"
                            >
                            </QSelect>
                        </div>
                    </div>
                    <div class="row q-gutter-md q-mb-md">
                        <div class="col">
                            <QInput
                                v-model="data.packages"
                                :label="t('claim.basicData.packages')"
                                :rules="validate('claim.packages')"
                            />
                        </div>
                        <div class="col">
                            <QInput
                                v-model="data.rma"
                                :label="t('claim.basicData.returnOfMaterial')"
                                :rules="validate('claim.rma')"
                            />
                        </div>
                    </div>
                    <div class="row q-gutter-md q-mb-md">
                        <div class="col">
                            <QCheckbox
                                v-model="data.hasToPickUp"
                                :label="t('claim.basicData.picked')"
                            />
                        </div>
                    </div>
                </template>
            </FormModel>
        </QCard>
    </div>
</template>

<style lang="scss" scoped>
.q-card {
    width: 100%;
    max-width: 60em;
}
</style>