Se crea el formulario para la creacion de un agente de aduanas

src/pages/Customer/Card/CustomerConsignees.vue

@@ -47,7 +47,10 @@ const toCustomerConsigneeEdit = () => {
                 <QCard
                     v-for="(item, index) in rows"
                     :key="index"
-                    :class="['consignees-card', { 'q-mb-md': rows.length - 1 !== index }]"
+                    :class="{
+                        'consignees-card': true,
+                        'q-mb-md': index < rows.length - 1,
+                    }"
                     @click="toCustomerConsigneeEdit()"
                 >
                     <div class="consignees-card-icon">
@@ -63,15 +66,14 @@ const toCustomerConsigneeEdit = () => {
                             {{ setProvince(item.provinceFk) }}
                         </div>
                         <div class="flex">
-                            <VnLv
+                            <QCheckbox
                                 :label="t('Is equalizated')"
-                                :value="item.isEqualizated"
+                                v-model="item.isEqualizated"
-                                class="row q-mr-lg"
+                                class="q-mr-lg"
                             />
-                            <VnLv
+                            <QCheckbox
                                 :label="t('Is logiflora allowed')"
-                                :value="item.isLogifloraAllowed"
+                                v-model="item.isLogifloraAllowed"
-                                class="row"
                             />
                         </div>
                     </div>

src/pages/Customer/components/CustomerConsigneeCreate.vue

@@ -8,8 +8,9 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -124,15 +125,12 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
                             <QItem v-bind="scope.itemProps">
                                 <QItemSection v-if="scope.opt">
                                     <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                    <QItemLabel caption
+                                    <QItemLabel caption>
-                                        >{{ scope.opt.code }} -
+                                        {{ scope.opt.code }} -
-                                        {{ scope.opt.town.name }} ({{
+                                        {{ scope.opt.town.name }}
-                                            scope.opt.town.province.name
+                                        ({{ scope.opt.town.province.name }},
-                                        }},
+                                        {{ scope.opt.town.province.country.country }})
-                                        {{
+                                    </QItemLabel>
-                                            scope.opt.town.province.country.country
-                                        }})</QItemLabel
-                                    >
                                 </QItemSection>
                             </QItem>
                         </template>
@@ -218,20 +216,32 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelectCreate
                         :label="t('Customs agent')"
                         :options="customsAgents"
                         hide-selected
                         option-label="fiscalName"
                         option-value="id"
                         v-model="data.customsAgentFk"
-                    />
+                    >
+                        <template #form>
+                            <CustomsNewCustomsAgent />
+                        </template>
+                    </VnSelectCreate>
                 </div>
             </VnRow>
         </template>
     </FormModel>
 </template>
 
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
+
 <i18n>
 es:
     Default: Predeterminado

src/pages/Customer/components/CustomerNewCustomsAgent.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+
+const initialData = reactive({
+    nif: null,
+    fiscalName: null,
+    street: null,
+    phone: null,
+});
+
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
+};
+</script>
+
+<template>
+    <FormModelPopup
+        :title="t('New customs agent')"
+        url-create="CustomsAgents"
+        model="customer"
+        :form-initial-data="initialData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('NIF')" :required="true" v-model="data.nif" />
+                </div>
+                <div class="col">
+                    <VnInput
+                        :label="t('Fiscal name')"
+                        :required="true"
+                        v-model="data.fiscalName"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Street')" v-model="data.street" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Phone')" v-model="data.phone" />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New customs agent: Nuevo agente de aduanas
+    NIF: NIF
+    Fiscal name: Nombre fiscal
+    Street: Dirección fiscal
+    Phone: Teléfono
+</i18n>

src/router/modules/customer.js

@@ -173,7 +173,7 @@ export default {
                             },
                             component: () =>
                                 import(
-                                    'src/pages/Customer/Card/CustomerConsigneeCreate.vue'
+                                    'src/pages/Customer/components/CustomerConsigneeCreate.vue'
                                 ),
                         },
                         {
@@ -184,7 +184,7 @@ export default {
                             },
                             component: () =>
                                 import(
-                                    'src/pages/Customer/Card/CustomerConsigneeEdit.vue'
+                                    'src/pages/Customer/components/CustomerConsigneeEdit.vue'
                                 ),
                         },
                     ],