From 0a41ce6aa94b47e2721084d6eda4deffc2542fd8 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Thu, 14 Dec 2023 06:49:40 -0500
Subject: [PATCH] Se crea formulario de creacion de cliente

---
 src/pages/Customer/CustomerCreate.vue         | 260 ++++++++++++++++++
 .../Customer/CustomerCreateNewPostcode.vue    | 127 +++++++++
 src/pages/Customer/CustomerList.vue           |  31 ++-
 src/router/modules/customer.js                |   8 +
 4 files changed, 416 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/Customer/CustomerCreate.vue
 create mode 100644 src/pages/Customer/CustomerCreateNewPostcode.vue

diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
new file mode 100644
index 000000000..eab238b6a
--- /dev/null
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -0,0 +1,260 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import CustomerCreateNewPostcode from './CustomerCreateNewPostcode.vue';
+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';
+
+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 citiesLocationOptions = ref([]);
+const provincesLocationOptions = ref([]);
+const countriesOptions = ref([]);
+
+const onFetchWorkers = (workers) => {
+    workersOptions.value = [...workers];
+};
+
+const onFetchBusinessTypes = (businessTypes) => {
+    businessTypesOptions.value = [...businessTypes];
+};
+
+const onFetchCitiesLocation = (citiesLocation) => {
+    citiesLocationOptions.value = [...citiesLocation];
+};
+
+const onFetchProvincesLocation = (provincesLocation) => {
+    provincesLocationOptions.value = [...provincesLocation];
+};
+
+const onFetchCountries = (countries) => {
+    countriesOptions.value = [...countries];
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => onFetchWorkers(data)"
+        auto-load
+        url="Workers/search?departmentCodes"
+    />
+    <FetchData
+        @on-fetch="(data) => onFetchBusinessTypes(data)"
+        auto-load
+        url="BusinessTypes"
+    />
+    <FetchData
+        @on-fetch="(data) => onFetchCitiesLocation(data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData
+        @on-fetch="(data) => onFetchProvincesLocation(data)"
+        auto-load
+        url="Provinces/location"
+    />
+    <FetchData url="Countries" @on-fetch="(data) => onFetchCountries(data)" auto-load />
+    <QPage>
+        <QToolbar class="bg-vn-dark">
+            <div id="st-data"></div>
+            <QSpace />
+            <div id="st-actions"></div>
+        </QToolbar>
+        <FormModel
+            :form-initial-data="newClientForm"
+            :observe-form-changes="false"
+            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">
+                        <QInput v-model="data.postcode" :label="t('Postcode')">
+                            <template #append>
+                                <QBtn
+                                    class="cursor-pointer"
+                                    color="primary"
+                                    dense
+                                    icon="add"
+                                    round
+                                    size="xs"
+                                >
+                                    <QPopupProxy
+                                        cover
+                                        transition-hide="scale"
+                                        transition-show="scale"
+                                    >
+                                        <CustomerCreateNewPostcode />
+                                    </QPopupProxy>
+                                </QBtn>
+                            </template>
+                        </QInput>
+                    </div>
+                    <div class="col">
+                        <!-- ciudades -->
+                        <VnSelectFilter
+                            :label="t('City')"
+                            :options="citiesLocationOptions"
+                            hide-selected
+                            option-label="name"
+                            option-value="name"
+                            v-model="data.city"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            {{
+                                                `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
+                                            }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Province')"
+                            :options="provincesLocationOptions"
+                            hide-selected
+                            option-label="name"
+                            option-value="id"
+                            v-model="data.provinceFk"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{
+                                            `${scope.opt.name} (${scope.opt.country.country})`
+                                        }}</QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Country')"
+                            :options="countriesOptions"
+                            hide-selected
+                            option-label="country"
+                            option-value="id"
+                            v-model="data.countryFk"
+                        />
+                    </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>
diff --git a/src/pages/Customer/CustomerCreateNewPostcode.vue b/src/pages/Customer/CustomerCreateNewPostcode.vue
new file mode 100644
index 000000000..d2f462ce5
--- /dev/null
+++ b/src/pages/Customer/CustomerCreateNewPostcode.vue
@@ -0,0 +1,127 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+
+import FetchData from 'components/FetchData.vue';
+import useNotify from 'src/composables/useNotify';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const { notify } = useNotify();
+const { t } = useI18n();
+
+const data = reactive({
+    city: null,
+    code: null,
+    countryFk: null,
+    provinceFk: null,
+    townFk: null,
+});
+
+const countriesOptions = ref([]);
+const isLoading = ref(false);
+const provincesOptions = ref([]);
+const townsLocationOptions = ref([]);
+
+const onFetchTownsLocation = (townsLocation) => {
+    townsLocationOptions.value = [...townsLocation];
+};
+
+const onFetchProvinces = (provinces) => {
+    provincesOptions.value = [...provinces];
+};
+
+const onFetchCountries = (countries) => {
+    countriesOptions.value = [...countries];
+};
+
+async function save() {
+    isLoading.value = true;
+
+    try {
+        const { city, code, countryFk, provinceFk } = data;
+        const payload = {
+            city: city.name,
+            code,
+            countryFk,
+            provinceFk,
+            townFk: city.id,
+        };
+
+        await axios.patch('/postcodes', payload);
+    } catch (err) {
+        notify('errors.create', 'negative');
+    }
+
+    isLoading.value = false;
+}
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => onFetchTownsLocation(data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData @on-fetch="(data) => onFetchProvinces(data)" auto-load url="Provinces" />
+    <FetchData @on-fetch="(data) => onFetchCountries(data)" auto-load url="Countries" />
+    <div class="q-pa-lg">
+        <h6 class="q-my-xs">New postcode</h6>
+        <p>Please, ensure you put the correct data!</p>
+        <VnRow class="row q-gutter-md q-mb-md">
+            <div class="col">
+                <QInput label="Postcode" v-model="data.code" />
+            </div>
+            <div class="col">
+                <VnSelectFilter
+                    :options="townsLocationOptions"
+                    hide-selected
+                    label="City"
+                    option-label="name"
+                    option-value="city"
+                    v-model="data.city"
+                />
+            </div>
+        </VnRow>
+        <VnRow class="row q-gutter-md q-mb-xl">
+            <div class="col">
+                <VnSelectFilter
+                    :options="provincesOptions"
+                    hide-selected
+                    label="Province"
+                    option-label="name"
+                    option-value="id"
+                    v-model="data.provinceFk"
+                />
+            </div>
+            <div class="col">
+                <VnSelectFilter
+                    :options="countriesOptions"
+                    hide-selected
+                    label="Country"
+                    option-label="country"
+                    option-value="id"
+                    v-model="data.countryFk"
+                />
+            </div>
+        </VnRow>
+        <div class="flex justify-end">
+            <QBtn class="q-mr-lg" color="primary" label="Cancel" outline v-close-popup />
+            <QBtn @click="save" color="primary" label="Save" v-close-popup />
+        </div>
+    </div>
+    <QInnerLoading
+        :showing="isLoading"
+        :label="t('globals.pleaseWait')"
+        color="primary"
+    />
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-gap: 20px;
+}
+</style>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 7e37bb88a..540afcc4c 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -28,25 +28,29 @@ function viewSummary(id) {
         },
     });
 }
+
+const redirectToCreateView = () => {
+    router.push({ name: 'CustomerCreate' });
+};
 </script>
 
 <template>
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#searchbar">
             <VnSearchbar
-                data-key="CustomerList"
-                :label="t('Search customer')"
                 :info="t('You can search by customer id or name')"
+                :label="t('Search customer')"
+                data-key="CustomerList"
             />
         </Teleport>
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
                 <QBtn
-                    flat
                     @click="stateStore.toggleRightDrawer()"
-                    round
                     dense
+                    flat
                     icon="menu"
+                    round
                 >
                     <QTooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
@@ -55,7 +59,7 @@ function viewSummary(id) {
             </div>
         </Teleport>
     </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
         <QScrollArea class="fit text-grey-8">
             <CustomerFilter data-key="CustomerList" />
         </QScrollArea>
@@ -63,18 +67,18 @@ function viewSummary(id) {
     <QPage class="column items-center q-pa-md">
         <div class="card-list">
             <VnPaginate
-                data-key="CustomerList"
-                url="/Clients/filter"
-                order="id DESC"
                 auto-load
+                data-key="CustomerList"
+                order="id DESC"
+                url="/Clients/filter"
             >
                 <template #body="{ rows }">
                     <CardList
-                        v-for="row of rows"
+                        :id="row.id"
                         :key="row.id"
                         :title="row.name"
-                        :id="row.id"
                         @click="navigate(row.id)"
+                        v-for="row of rows"
                     >
                         <template #list-items>
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
@@ -103,6 +107,12 @@ function viewSummary(id) {
                 </template>
             </VnPaginate>
         </div>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="redirectToCreateView()" color="primary" fab icon="add" />
+            <QTooltip>
+                {{ t('New client') }}
+            </QTooltip>
+        </QPageSticky>
     </QPage>
 </template>
 
@@ -117,4 +127,5 @@ function viewSummary(id) {
 es:
     Search customer: Buscar cliente
     You can search by customer id or name: Puedes buscar por id o nombre del cliente
+    New client: Nuevo cliente
 </i18n>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 832a1e0fd..7c9940ebe 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -29,6 +29,14 @@ export default {
                     },
                     component: () => import('src/pages/Customer/CustomerList.vue'),
                 },
+                {
+                    path: 'create',
+                    name: 'CustomerCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Customer/CustomerCreate.vue'),
+                },
                 {
                     path: 'payments',
                     name: 'CustomerPayments',