2022-11-02 11:33:08 +00:00
8 changed files with 343 additions and 230 deletions
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@ -0,0 +1,46 @@
+<script setup>
+import { h, onMounted } from 'vue';
+import axios from 'axios';
+
+const $props = defineProps({
+    autoLoad: {
+        type: Boolean,
+        default: false,
+    },
+    url: {
+        type: String,
+        default: '',
+    },
+    filter: {
+        type: Object,
+        default: null,
+    },
+    limit: {
+        type: String,
+        default: '20',
+    },
+});
+
+const emit = defineEmits(['fetch-data']);
+
+onMounted(async () => {
+    if ($props.autoLoad) {
+        await fetch();
+    }
+});
+
+async function fetch() {
+    const { data } = await axios.get($props.url, {
+        params: { filter: $props.filter },
+    });
+
+    return emit('fetch-data', data);
+}
+
+const render = () => {
+    return h('div', []);
+};
+</script>
+<template>
+    <render />
+</template>
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@ -0,0 +1,97 @@
+<script setup>
+import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
+
+import { useState } from 'src/composables/useState';
+import SkeletonForm from 'src/components/SkeletonForm.vue';
+
+const quasar = useQuasar();
+const { t } = useI18n();
+const state = useState();
+
+const $props = defineProps({
+    url: {
+        type: String,
+        default: '',
+    },
+    model: {
+        type: String,
+        default: '',
+    },
+    filter: {
+        type: Object,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['fetch-data']);
+
+defineExpose({
+    save,
+});
+
+onMounted(async () => await fetch());
+
+onUnmounted(() => {
+    state.unset($props.model);
+});
+
+const isLoading = ref(false);
+const hasChanges = ref(false);
+const formData = computed(() => state.get($props.model));
+const originalData = ref();
+
+async function fetch() {
+    const { data } = await axios.get($props.url, {
+        params: { filter: $props.filter },
+    });
+
+    state.set($props.model, data);
+    originalData.value = Object.assign({}, data);
+
+    watch(formData.value, () => (hasChanges.value = true));
+
+    return emit('fetch-data', state.get($props.model));
+}
+
+async function save() {
+    if (!hasChanges.value) {
+        return quasar.notify({
+            type: 'negative',
+            message: t('globals.noChanges'),
+        });
+    }
+    isLoading.value = true;
+    await new Promise((resolve) => {
+        setTimeout(resolve, 5000);
+    });
+    await axios.patch($props.url, formData.value);
+    isLoading.value = false;
+}
+
+function reset() {
+    state.set($props.model, originalData.value);
+    hasChanges.value = false;
+}
+</script>
+<template>
+    <q-banner v-if="hasChanges" inline-actions class="text-white bg-red"> You have changes pending to save </q-banner>
+    <q-form v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
+        <slot name="form" :data="formData"></slot>
+        <slot name="actions">
+            <q-btn :label="t('globals.save')" type="submit" color="primary" />
+            <q-btn
+                :label="t('globals.reset')"
+                type="reset"
+                class="q-ml-sm"
+                color="primary"
+                flat
+                :disable="!hasChanges"
+            />
+        </slot>
+    </q-form>
+    <skeleton-form v-if="!formData" />
+    <q-inner-loading :showing="isLoading" :label="t('globals.pleaseWait')" color="primary" />
+</template>
--- a/src/components/SkeletonForm.vue
+++ b/src/components/SkeletonForm.vue
@ -1,4 +1,5 @@
 <template>
+    <div class="q-pa-md">
        <div class="row q-gutter-md q-mb-md">
            <div class="col">
                <q-skeleton type="QInput" square />
@ -27,4 +28,5 @@
            <q-skeleton type="QBtn" />
            <q-skeleton type="QBtn" />
        </div>
+    </div>
 </template>
--- a/src/composables/useState.js
+++ b/src/composables/useState.js
@ -1,5 +1,7 @@
 import { ref, computed } from 'vue';

+const state = ref({});
+
 const user = ref({
    id: 0,
    name: '',
@ -44,11 +46,27 @@ export function useState() {
        roles.value = data;
    }

+    function set(name, data) {
+        state.value[name] = ref(data);
+    }
+
+    function get(name) {
+        return state.value[name];
+    }
+
+    function unset(name) {
+        delete state.value[name];
+    }
+
+
    return {
        getUser,
        setUser,
        getRoles,
        setRoles,
+        set,
+        get,
+        unset,
        drawer
    };
 }
--- a/src/composables/useValidator.js
+++ b/src/composables/useValidator.js
@ -33,10 +33,6 @@ export function useValidator() {
            return validations(validation)[validation.validation];
        });

-        if (property === 'socialName') {
-            console.log(modelValidations[property])
-        }
-
        return rules;
    }

--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@ -23,7 +23,8 @@ export default {
        noChanges: 'No changes to save',
        confirmRemove: 'You are about to delete this row. Are you sure?',
        rowAdded: 'Row added',
-        rowRemoved: 'Row removed'
+        rowRemoved: 'Row removed',
+        pleaseWait: 'Please wait...'
    },
    moduleIndex: {
        allModules: 'All modules'
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@ -23,7 +23,8 @@ export default {
        noChanges: 'Sin cambios que guardar',
        confirmRemove: 'Vas a eliminar este registro. ¿Continuar?',
        rowAdded: 'Fila añadida',
-        rowRemoved: 'Fila eliminada'
+        rowRemoved: 'Fila eliminada',
+        pleaseWait: 'Por favor, espera...'
    },
    moduleIndex: {
        allModules: 'Todos los módulos'
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@ -1,135 +1,90 @@
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
-import axios from 'axios';
+// import { useQuasar } from 'quasar';
+// import axios from 'axios';
 import { useSession } from 'src/composables/useSession';
 import { useValidator } from 'src/composables/useValidator';
-import SkeletonForm from 'src/components/SkeletonForm.vue';
+import { useState } from 'src/composables/useState';
+import FetchData from 'src/components/FetchData.vue';
+import FormModel from 'src/components/FormModel.vue';

 onMounted(() => {
-    fetch();
-    fetchWorkers();
-    fetchBusinessTypes();
-    fetchContactChannels();
+    // fetch();
+    // fetchWorkers();
+    // fetchBusinessTypes();
+    // fetchContactChannels();
 });

 const route = useRoute();
-const quasar = useQuasar();
+// const quasar = useQuasar();
 const { t } = useI18n();
 const { validate } = useValidator();
+const state = useState();
 const session = useSession();
 const token = session.getToken();
-
-const customer = ref(null);
-const customerCopy = ref(null);
-const hasChanges = ref(false);
-
-function fetch() {
-    const id = route.params.id;
-    const filter = {
-        include: [],
-    };
-    const options = { params: { filter } };
-    axios.get(`Clients/${id}`, options).then(({ data }) => {
-        customer.value = data;
-        customerCopy.value = Object.assign({}, data);
-
-        watch(customer.value, () => (hasChanges.value = true));
-    });
-}
-
-const businessTypes = ref([]);
-function fetchBusinessTypes() {
-    axios.get(`BusinessTypes`).then(({ data }) => {
-        businessTypes.value = data;
-    });
-}
-
-const contactChannels = ref([]);
-function fetchContactChannels() {
-    axios.get(`ContactChannels`).then(({ data }) => {
-        contactChannels.value = data;
-    });
-}
+const data2 = state.get('customer');
+console.log(data2);

 const workers = ref([]);
-const workersCopy = ref([]);
-function fetchWorkers() {
-    const filter = {
-        where: {
-            role: 'salesPerson',
-        },
-    };
-    const options = { params: { filter } };
-    axios.get(`Workers/activeWithRole`, options).then(({ data }) => {
-        workers.value = data;
-        workersCopy.value = data;
-    });
-}
+const contactChannels = ref([]);
+const businessTypes = ref([]);

-function filter(value, update, options, originalOptions, filter) {
-    update(
-        () => {
-            if (value === '') {
-                options.value = originalOptions.value;
+// const customer = ref(null);
+// const customerCopy = ref(null);
+// const hasChanges = ref(false);

-                return;
-            }
+// function filter(value, update, options, originalOptions, filter) {
+//     update(
+//         () => {
+//             if (value === '') {
+//                 options.value = originalOptions.value;

-            options.value = options.value.filter(filter);
-        },
-        (ref) => {
-            ref.setOptionIndex(-1);
-            ref.moveOptionSelection(1, true);
-        }
-    );
-}
+//                 return;
+//             }

-function filterWorkers(value, update) {
-    const search = value.toLowerCase();
+//             options.value = options.value.filter(filter);
+//         },
+//         (ref) => {
+//             ref.setOptionIndex(-1);
+//             ref.moveOptionSelection(1, true);
+//         }
+//     );
+// }

-    filter(value, update, workers, workersCopy, (row) => {
-        const id = row.id;
-        const name = row.name.toLowerCase();
+// function filterWorkers(value, update) {
+//     const search = value.toLowerCase();

-        const idMatch = id == search;
-        const nameMatch = name.indexOf(search) > -1;
+//     filter(value, update, workers, workersCopy, (row) => {
+//         const id = row.id;
+//         const name = row.name.toLowerCase();

-        return idMatch || nameMatch;
-    });
-}
+//         const idMatch = id == search;
+//         const nameMatch = name.indexOf(search) > -1;

-function save() {
-    const id = route.params.id;
-    const formData = customer.value;
-
-    if (!hasChanges.value) {
-        return quasar.notify({
-            type: 'negative',
-            message: t('globals.noChanges'),
-        });
-    }
-
-    axios.patch(`Clients/${id}`, formData).then((hasChanges.value = false));
-}
-
-function onReset() {
-    customer.value = customerCopy.value;
-    hasChanges.value = false;
-}
+//         return idMatch || nameMatch;
+//     });
+// }
 </script>
 <template>
+    <fetch-data
+        url="Workers/activeWithRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @fetch-data="($data) => (workers = $data)"
+        auto-load
+    />
+    <fetch-data url="ContactChannels" @fetch-data="($data) => (contactChannels = $data)" auto-load />
+    <fetch-data url="BusinessTypes" @fetch-data="($data) => (businessTypes = $data)" auto-load />
    <q-page class="q-pa-md">
        <div class="container">
-            <q-card class="q-pa-md">
-                <skeleton-form v-if="!customer" />
-                <q-form v-if="customer" @submit="save" @reset="onReset" greedy>
+            <q-card>
+                <form-model :url="`Clients/${route.params.id}`" model="customer">
+                    <template #form="{ data }">
                        <div class="row q-gutter-md q-mb-md">
                            <div class="col">
                                <q-input
-                                v-model="customer.socialName"
+                                    v-model="data.socialName"
                                    :label="t('customer.basicData.socialName')"
                                    :rules="validate('client.socialName')"
                                    autofocus
@ -137,7 +92,7 @@ function onReset() {
                            </div>
                            <div class="col">
                                <q-select
-                                v-model="customer.businessTypeFk"
+                                    v-model="data.businessTypeFk"
                                    :options="businessTypes"
                                    option-value="code"
                                    option-label="description"
@ -152,7 +107,7 @@ function onReset() {
                        <div class="row q-gutter-md q-mb-md">
                            <div class="col">
                                <q-input
-                                v-model="customer.contact"
+                                    v-model="data.contact"
                                    :label="t('customer.basicData.contact')"
                                    :rules="validate('client.contact')"
                                    clearable
@ -160,7 +115,7 @@ function onReset() {
                            </div>
                            <div class="col">
                                <q-input
-                                v-model="customer.email"
+                                    v-model="data.email"
                                    type="email"
                                    :label="t('customer.basicData.email')"
                                    :rules="validate('client.email')"
@ -171,7 +126,7 @@ function onReset() {
                        <div class="row q-gutter-md q-mb-md">
                            <div class="col">
                                <q-input
-                                v-model="customer.phone"
+                                    v-model="data.phone"
                                    :label="t('customer.basicData.phone')"
                                    :rules="validate('client.phone')"
                                    clearable
@ -179,7 +134,7 @@ function onReset() {
                            </div>
                            <div class="col">
                                <q-input
-                                v-model="customer.mobile"
+                                    v-model="data.mobile"
                                    :label="t('customer.basicData.mobile')"
                                    :rules="validate('client.mobile')"
                                    clearable
@ -189,7 +144,7 @@ function onReset() {
                        <div class="row q-gutter-md q-mb-md">
                            <div class="col">
                                <q-select
-                                v-model="customer.salesPersonFk"
+                                    v-model="data.salesPersonFk"
                                    :options="workers"
                                    option-value="id"
                                    option-label="name"
@ -204,8 +159,8 @@ function onReset() {
                                    <template #before>
                                        <q-avatar color="orange">
                                            <q-img
-                                            v-if="customer.salesPersonFk"
-                                            :src="`/api/Images/user/160x160/${customer.salesPersonFk}/download?access_token=${token}`"
+                                                v-if="data.salesPersonFk"
+                                                :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
                                                spinner-color="white"
                                            />
                                        </q-avatar>
@ -214,7 +169,7 @@ function onReset() {
                            </div>
                            <div class="col">
                                <q-select
-                                v-model="customer.contactChannelFk"
+                                    v-model="data.contactChannelFk"
                                    :options="contactChannels"
                                    option-value="id"
                                    option-label="name"
@ -226,11 +181,8 @@ function onReset() {
                                />
                            </div>
                        </div>
-                    <div>
-                        <q-btn :label="t('globals.save')" type="submit" color="primary" />
-                        <q-btn :label="t('globals.reset')" type="reset" class="q-ml-sm" color="primary" flat />
-                    </div>
-                </q-form>
+                    </template>
+                </form-model>
            </q-card>
        </div>
    </q-page>