salix-front/src/pages/Customer/CustomerCreate.vue

<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';

import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnLocation from 'src/components/common/VnLocation.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';

const { t } = useI18n();

const newClientForm = reactive({
    active: true,
    name: null,
    salesPersonFk: null,
    businessTypeFk: null,
    fi: null,
    socialName: null,
    street: null,
    postcode: null,
    city: null,
    provinceFk: null,
    countryFk: null,
    userName: null,
    email: null,
    isEqualizated: false,
});

const workersOptions = ref([]);
const businessTypesOptions = ref([]);
const postcodesOptions = ref([]);

function handleLocation(data, location) {
    const { town, code, provinceFk, countryFk } = location ?? {};
    data.postcode = code;
    data.city = town;
    data.provinceFk = provinceFk;
    data.countryFk = countryFk;
}
</script>

<template>
    <FetchData
        @on-fetch="(data) => (workersOptions = data)"
        auto-load
        url="Workers/search?departmentCodes"
    />
    <FetchData
        @on-fetch="(data) => (businessTypesOptions = data)"
        auto-load
        url="BusinessTypes"
    />
    <QPage>
        <VnSubToolbar />
        <FormModel
            :form-initial-data="newClientForm"
            model="client"
            url-create="Clients/createWithUser"
        >
            <template #form="{ data, validate }">
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <QInput :label="t('Comercial name')" v-model="data.name" />
                    </div>
                    <div class="col">
                        <VnSelectFilter
                            :label="t('Salesperson')"
                            :options="workersOptions"
                            hide-selected
                            option-label="name"
                            option-value="id"
                            v-model="data.salesPersonFk"
                        />
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnSelectFilter
                            :label="t('Business type')"
                            :options="businessTypesOptions"
                            hide-selected
                            option-label="description"
                            option-value="code"
                            v-model="data.businessTypeFk"
                        />
                    </div>
                    <div class="col">
                        <QInput v-model="data.fi" :label="t('Tax number')" />
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <QInput
                            :label="t('Business name')"
                            :rules="validate('Client.socialName')"
                            v-model="data.socialName"
                        />
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <QInput
                            :label="t('Street')"
                            :rules="validate('Client.street')"
                            v-model="data.street"
                        />
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnLocation
                            :rules="validate('Worker.postcode')"
                            :roles-allowed-to-create="['deliveryAssistant']"
                            :options="postcodesOptions"
                            v-model="data.location"
                            @update:model-value="
                                (location) => handleLocation(data, location)
                            "
                        >
                        </VnLocation>
                    </div>
                </VnRow>

                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <QInput v-model="data.userName" :label="t('Web user')" />
                    </div>
                    <div class="col">
                        <QInput v-model="data.email" :label="t('Email')" />
                    </div>
                </VnRow>
                <QCheckbox
                    :label="t('Is equalizated')"
                    v-model="newClientForm.isEqualizated"
                />
            </template>
        </FormModel>
    </QPage>
</template>

<style lang="scss" scoped>
.card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
}
</style>

<i18n>
es:
    Comercial name: Nombre comercial
    Salesperson: Comercial
    Business type: Tipo de negocio
    Tax number: NIF / CIF
    Business name: Razón social
    Street: Dirección fiscal
    Postcode: Código postal
    City: Población
    Province: Provincia
    Country: País
    Web user: Usuario web
    Email: Email
    Is equalizated: Recargo de equivalencia
</i18n>