WIP

src/components/CreateBankEntityForm.vue

@@ -1,7 +1,14 @@
 <script setup>
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
+const emit = defineEmits(['closeForm', 'onDataSaved']);
+
 const { t } = useI18n();
 
 const formData = reactive({
@@ -10,23 +17,122 @@ const formData = reactive({
     countryFk: null,
     id: null,
 });
+
+const countriesFilter = {
+    fields: ['id', 'country', 'code'],
+};
+
+const countriesOptions = ref([]);
+const loading = ref(false);
+
+const setCountriesOptions = (data) => {
+    countriesOptions.value = data;
+};
+
+const closeForm = () => {
+    emit('closeForm');
+};
+
+const onDataSaved = (data) => {
+    emit('onDataSaved', data);
+    closeForm();
+};
 </script>
 
 <template>
-    <QCard class="q-pa-xl column">
-        <span>{{ t('title') }}</span>
-        <span>{{ t('subtitle') }}</span>
-        <QInput :label="t('name')" v-model="formData.name" />
-    </QCard>
+    <FetchData
+        url="Countries"
+        @on-fetch="(data) => setCountriesOptions(data)"
+        :filter="countriesFilter"
+        auto-load
+    />
+    <FormModel
+        :form-initial-data="formData"
+        :observe-form-changes="false"
+        :default-actions="false"
+        url-create="bankEntities"
+        model="bankEntity"
+        @on-data-saved="onDataSaved(data)"
+    >
+        <template #form="{ data, validate }">
+            <h1 class="title">{{ t('title') }}</h1>
+            <span class="q-mb-md">{{ t('subtitle') }}</span>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('name')"
+                        v-model="data.name"
+                        :rules="validate('bankEntity.name')"
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('swift')"
+                        v-model="data.bic"
+                        :rules="validate('bankEntity.bic')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('country')"
+                        v-model="formData.countryFk"
+                        :options="countriesOptions"
+                        option-value="id"
+                        option-label="country"
+                        hide-selected
+                        :rules="validate('bankEntity.countryFk')"
+                    />
+                </div>
+                <div class="col">
+                    <QInput :label="t('id')" v-model="formData.id" />
+                </div>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="loading"
+                    :loading="loading"
+                />
+                <QBtn
+                    :label="t('globals.cancel')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                    :disabled="loading"
+                    :loading="loading"
+                    v-close-popup
+                />
+            </div>
+        </template>
+    </FormModel>
 </template>
 
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+</style>
+
 <i18n>
 en:
-    name: Name *
     title: New bank entity
     subtitle: Please, ensure you put the correct data!
+    name: Name *
+    swift: Swift *
+    country: Country
+    id: Entity code
 es:
-    name: Nombre *
     title: Nueva entidad bancaria
     subtitle: ¡Por favor, asegúrate de poner los datos correctos!
+    name: Nombre *
+    swift: Swift *
+    country: País
+    id: Código de la entidad
 </i18n>

src/components/FormModel.vue

@@ -57,7 +57,7 @@ const $props = defineProps({
     },
 });
 
-const emit = defineEmits(['onFetch']);
+const emit = defineEmits(['onFetch', 'onDataSaved']);
 
 defineExpose({
     save,
@@ -114,7 +114,7 @@ async function fetch() {
 }
 
 async function save() {
-    if (!hasChanges.value) {
+    if ($props.observeFormChanges && !hasChanges.value) {
         notify('globals.noChanges', 'negative');
         return;
     }

src/components/common/VnSelectCreate.vue

@@ -27,7 +27,7 @@ const $props = defineProps({
 });
 
 const role = useRole();
-const popup = ref(null);
+const showForm = ref(false);
 
 const value = computed({
     get() {
@@ -42,31 +42,27 @@ const isAllowedToCreate = computed(() => {
     return role.hasAny($props.rolesAllowedToCreate);
 });
 
-const openCreateForm = () => {
-    popup.value.show();
+const toggleForm = () => {
+    showForm.value = !showForm.value;
 };
 </script>
 
 <template>
-    <VnSelectFilter
-        label="Label"
-        v-model="value"
-        :options="options"
-        option-value="value"
-        option-label="label"
-        hide-selected
-    >
+    <VnSelectFilter v-model="value" :options="options">
         <template v-if="isAllowedToCreate" #append>
             <QIcon
-                @click.stop.prevent="openCreateForm()"
+                @click.stop.prevent="toggleForm()"
                 name="add"
                 size="19px"
                 class="add-icon"
             />
-            <QDialog ref="popup" cover transition-show="scale" transition-hide="scale">
-                <slot name="form" />
+            <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
+                <slot name="form" @close-form="toggleForm()" />
             </QDialog>
         </template>
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData" :key="slotName" />
+        </template>
     </VnSelectFilter>
 </template>
 

src/pages/Travel/TravelCreate.vue

@@ -169,11 +169,3 @@ const onFetchWarehouses = (warehouses) => {
         </FormModel>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    grid-gap: 20px;
-}
-</style>

src/pages/Worker/WorkerCreate.vue

@@ -59,14 +59,14 @@ const updateFilterOptions = (data, optionKey) => {
     filtersOptions[optionKey] = [...data];
 };
 
+const onFetchWorkerConfig = (workerConfig) => {
+    newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
+};
+
 onMounted(async () => {
     const userInfo = await useUserConfig().fetch();
     newWorkerForm.value = { companyFk: userInfo.companyFk };
 });
-
-const onFetchWorkerConfig = (workerConfig) => {
-    newWorkerForm.value.payMethodFk = workerConfig.payMethodFk;
-};
 </script>
 
 <template>
@@ -108,6 +108,7 @@ const onFetchWorkerConfig = (workerConfig) => {
         @on-fetch="(data) => updateFilterOptions(data, 'bankEntities')"
         auto-load
     />
+
     <QPage>
         <QToolbar class="bg-vn-dark">
             <div id="st-data"></div>
@@ -115,7 +116,7 @@ const onFetchWorkerConfig = (workerConfig) => {
             <div id="st-actions"></div>
         </QToolbar>
         <FormModel
-            url-create="Workers/new"
+            url-create="Countries"
             model="worker"
             :form-initial-data="newWorkerForm"
         >
@@ -261,35 +262,27 @@ const onFetchWorkerConfig = (workerConfig) => {
                     <div class="col">
                         <QInput v-model="data.iban" :label="t('worker.create.iban')" />
                     </div>
-                    <!-- <div class="col">
-                        <VnSelectFilter
+                    <VnSelectCreate
                         :label="t('worker.create.bankEntity')"
                         v-model="data.bankEntityFk"
                         :options="filtersOptions.bankEntities"
+                        option-label="name"
                         option-value="id"
-                            option-label="bic"
                         hide-selected
+                        :roles-allowed-to-create="['salesAssistant', 'hr']"
                     >
+                        <template #form>
+                            <CreateBankEntityForm />
+                        </template>
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
+                                <QItemSection v-if="scope.opt">
                                     <QItemLabel
                                         >{{ scope.opt.bic }}
                                         {{ scope.opt.name }}</QItemLabel
                                     >
                                 </QItemSection>
                             </QItem>
-                            </template></VnSelectFilter
-                        >
-                    </div> -->
-                    <VnSelectCreate
-                        :label="t('worker.create.bankEntity')"
-                        v-model="data.bankEntityFk"
-                        :options="filtersOptions.bankEntities"
-                        :roles-allowed-to-create="['salesAssistant', 'hr']"
-                    >
-                        <template #form>
-                            <CreateBankEntityForm></CreateBankEntityForm>
                         </template>
                     </VnSelectCreate>
                 </VnRow>