Merge pull request '#5834 - Bic/Swift' (!169) from 5834_billingDataSwift into dev

Reviewed-on: #169
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/CreateBankEntityForm.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
 
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
@@ -54,16 +55,18 @@ const onDataSaved = (data) => {
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         :label="t('name')"
                         v-model="data.name"
+                        :required="true"
                         :rules="validate('bankEntity.name')"
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         :label="t('swift')"
                         v-model="data.bic"
+                        :required="true"
                         :rules="validate('bankEntity.bic')"
                     />
                 </div>
@@ -77,11 +80,17 @@ const onDataSaved = (data) => {
                         option-value="id"
                         option-label="country"
                         hide-selected
+                        :required="true"
                         :rules="validate('bankEntity.countryFk')"
                     />
                 </div>
                 <div v-if="showEntityField" class="col">
-                    <QInput :label="t('id')" v-model="data.id" />
+                    <VnInput
+                        :label="t('id')"
+                        v-model="data.id"
+                        :required="true"
+                        :rules="validate('city.name')"
+                    />
                 </div>
             </VnRow>
         </template>
@@ -92,15 +101,15 @@ const onDataSaved = (data) => {
 en:
     title: New bank entity
     subtitle: Please, ensure you put the correct data!
-    name: Name *
-    swift: Swift *
+    name: Name
+    swift: Swift
     country: Country
     id: Entity code
 es:
     title: Nueva entidad bancaria
     subtitle: ¡Por favor, asegúrate de poner los datos correctos!
-    name: Nombre *
-    swift: Swift *
+    name: Nombre
+    swift: Swift
     country: País
     id: Código de la entidad
 </i18n>

src/components/common/VnLocation.vue

@@ -94,7 +94,7 @@ function handleFetch( data) {
         :options="postcodesOptions"
         :label="t('Location')"
         :option-label="showLabel"
-        :placeholder="t('Search by postalCode, town, province or country')"
+        :placeholder="t('search_by_postalcode')"
         @input-value="locationFilter"
         :default-filter="false"
         :input-debounce="300"
@@ -129,7 +129,9 @@ function handleFetch( data) {
 </style>
 
 <i18n>
+en:
+    search_by_postalcode: Search by postalcode, town, province or country
 es:
     Location: Ubicación
-    Search by postalcode, town, province or country: Buscar por código postal, ciudad o país
+    search_by_postalcode: Buscar por código postal, ciudad o país
 </i18n>

src/i18n/en/index.js

@@ -1108,5 +1108,6 @@ export default {
         VnLv: {
             copyText: '{copyValue} has been copied to the clipboard',
         },
+        iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789',
     },
 };

src/i18n/es/index.js

@@ -1108,5 +1108,6 @@ export default {
         VnLv: {
             copyText: '{copyValue} se ha copiado al portapepeles',
         },
+        iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789',
     },
 };

src/pages/Customer/Card/CustomerBillingData.vue

@@ -70,7 +70,13 @@ const getBankEntities = () => {
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnInput :label="t('IBAN')" v-model="data.iban" />
+                    <VnInput :label="t('IBAN')" v-model="data.iban">
+                        <template #append>
+                            <QIcon name="info" class="cursor-info">
+                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </VnInput>
                 </div>
                 <div class="col">
                     <VnSelectCreate

src/pages/Supplier/Card/SupplierAccounts.vue

@@ -99,10 +99,15 @@ onMounted(() => {
                     class="row q-gutter-md q-mb-md"
                 >
                     <div class="col">
-                        <VnInput
-                            :label="t('supplier.accounts.iban')"
-                            v-model="row.iban"
-                        />
+                        <VnInput :label="t('supplier.accounts.iban')" v-model="row.iban">
+                            <template #append>
+                                <QIcon name="info" class="cursor-info">
+                                    <QTooltip>{{
+                                        t('components.iban_tooltip')
+                                    }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </VnInput>
                     </div>
                     <div class="col">
                         <VnSelectCreate

src/pages/Worker/WorkerCreate.vue

@@ -248,7 +248,15 @@ onMounted(async () => {
                             v-model="data.iban"
                             :label="t('worker.create.iban')"
                             :rules="validate('Worker.iban')"
-                        />
+                        >
+                            <template #append>
+                                <QIcon name="info" class="cursor-info">
+                                    <QTooltip>{{
+                                        t('components.iban_tooltip')
+                                    }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </VnInput>
                     </div>
                     <VnSelectCreate
                         :label="t('worker.create.bankEntity')"