WIP

2023-12-13 12:09:23 -03:00 · 2023-12-13 12:09:23 -03:00 · d4b9dcc0b9
parent 11839c7811
commit d4b9dcc0b9
5 changed files with 146 additions and 59 deletions
--- a/src/components/CreateBankEntityForm.vue
+++ b/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>
--- a/src/components/FormModel.vue
+++ b/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;
    }
--- a/src/components/common/VnSelectCreate.vue
+++ b/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>

--- a/src/pages/Travel/TravelCreate.vue
+++ b/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>
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/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
-                            :label="t('worker.create.bankEntity')"
-                            v-model="data.bankEntityFk"
-                            :options="filtersOptions.bankEntities"
-                            option-value="id"
-                            option-label="bic"
-                            hide-selected
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <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"
+                        option-label="name"
+                        option-value="id"
+                        hide-selected
                        :roles-allowed-to-create="['salesAssistant', 'hr']"
                    >
                        <template #form>
-                            <CreateBankEntityForm></CreateBankEntityForm>
+                            <CreateBankEntityForm />
+                        </template>
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection v-if="scope.opt">
+                                    <QItemLabel
+                                        >{{ scope.opt.bic }}
+                                        {{ scope.opt.name }}</QItemLabel
+                                    >
+                                </QItemSection>
+                            </QItem>
                        </template>
                    </VnSelectCreate>
                </VnRow>