@verdnatura/vn-front-lib 0.0.9 → 0.0.11

package/lib/components/models/VnForm.vue

@@ -0,0 +1,492 @@
+<script setup>
+import axios from 'axios';
+import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
+import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import {
+    useState,
+    useValidator,
+    useNotify,
+    tMobile,
+    useArrayData,
+    focusFirstInput,
+} from 'lib/composables';
+import { useStateStore } from 'lib/stores';
+import { VnConfirm, VnSpinner, VnSkeletonForm } from 'lib/components';
+import { onBeforeSave } from 'lib/filters';
+const { push } = useRouter();
+const quasar = useQuasar();
+const state = useState();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { validate, validations } = useValidator();
+const { notify } = useNotify();
+const route = useRoute();
+const myForm = ref(null);
+const $props = defineProps({
+    url: {
+        type: String,
+        default: '',
+    },
+    model: {
+        type: String,
+        default: null,
+    },
+    filter: {
+        type: Object,
+        default: null,
+    },
+    urlUpdate: {
+        type: String,
+        default: null,
+    },
+    urlCreate: {
+        type: String,
+        default: null,
+    },
+    defaultActions: {
+        type: Boolean,
+        default: true,
+    },
+    defaultButtons: {
+        type: Object,
+        default: () => {},
+    },
+    autoLoad: {
+        type: Boolean,
+        default: false,
+    },
+    formInitialData: {
+        type: Object,
+        default: () => {},
+    },
+    observeFormChanges: {
+        type: Boolean,
+        default: true,
+        description:
+            'Esto se usa principalmente para permitir guardar sin hacer cambios (Útil para la feature de clonar ya que en este caso queremos poder guardar de primeras)',
+    },
+    mapper: {
+        type: Function,
+        default: onBeforeSave,
+    },
+    clearStoreOnUnmount: {
+        type: Boolean,
+        default: true,
+    },
+    saveFn: {
+        type: Function,
+        default: null,
+    },
+    goTo: {
+        type: String,
+        default: '',
+        description: 'It is used for redirect on click "save and continue"',
+    },
+    reload: {
+        type: Boolean,
+        default: true,
+    },
+    defaultTrim: {
+        type: Boolean,
+        default: true,
+    },
+    maxWidth: {
+        type: [String, Boolean],
+        default: '800px',
+    },
+    onDataSaved: {
+        type: Function,
+        default: () => {},
+    },
+    preventSubmit: {
+        type: Boolean,
+        default: false,
+    },
+    customMethod: {
+        type: String,
+        default: null,
+    },
+    formUrl: {
+        type: [String, Boolean],
+        default: 'createForm',
+    },
+    paddingClass: {
+        type: String,
+        default: 'q-pa-md',
+    },
+    showTitle: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        default: null,
+    },
+});
+const emit = defineEmits(['onFetch', 'onDataSaved', 'onDataSaveFail', 'submit']);
+const modelValue = computed(
+    () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`,
+).value;
+const componentIsRendered = ref(false);
+const arrayData = useArrayData(modelValue);
+const isLoading = ref(false);
+// Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
+const isResetting = ref(false);
+const hasChanges = ref(!$props.observeFormChanges);
+let urlData = {};
+const originalData = computed(() => state.get(modelValue));
+const formData = ref();
+const formEl = computed(() => myForm.value?.$el);
+const defaultButtons = computed(() => ({
+    save: {
+        dataCy: 'saveDefaultBtn',
+        color: 'primary',
+        icon: 'save',
+        label: 'globals.save',
+        click: async (evt) => submitForm(evt),
+        type: 'submit',
+    },
+    reset: {
+        dataCy: 'resetDefaultBtn',
+        color: 'primary',
+        icon: 'restart_alt',
+        label: 'globals.reset',
+        click: () => reset(),
+    },
+    ...$props.defaultButtons,
+}));
+
+const submitForm = async (evt) => {
+    const isFormValid = await myForm.value.validate();
+    if (isFormValid) {
+        await save(evt);
+    }
+};
+
+function getUrlData() {
+    urlData = $props.formUrl
+        ? JSON.parse(route?.query[$props.formUrl] ?? '{}')
+        : undefined;
+}
+
+onMounted(async () => {
+    if (!arrayData.store.url && $props.url)
+        arrayData.setOptions({ url: $props.url, filter: $props.filter });
+    getUrlData();
+    nextTick(() => (componentIsRendered.value = true));
+
+    // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
+    if ($props.formInitialData && urlData)
+        state.set(modelValue, { ...$props.formInitialData, ...urlData });
+
+    if (!$props.formInitialData) {
+        if ($props.autoLoad && $props.url) await fetch();
+        else if (arrayData.store.data)
+            updateAndEmit('onFetch', { val: arrayData.store.data });
+    }
+    if ($props.observeFormChanges) {
+        watch(
+            () => formData.value,
+            (newVal, oldVal) => {
+                if (!oldVal) return;
+                hasChanges.value =
+                    !isResetting.value &&
+                    JSON.stringify(newVal) !== JSON.stringify(originalData.value);
+                isResetting.value = false;
+            },
+            { deep: true },
+        );
+    }
+});
+
+if (!$props.url)
+    watch(
+        () => arrayData.store.data,
+        (val) => updateAndEmit('onFetch', { val }),
+    );
+
+watch(
+    originalData,
+    async (val) => {
+        if (val) formData.value = JSON.parse(JSON.stringify(val));
+        await nextTick();
+        if (formEl.value) focusFirstInput(formEl.value);
+    },
+    { immediate: true },
+);
+
+watch(
+    () => [$props.url, $props.filter],
+    async () => {
+        state.set(modelValue, null);
+        reset();
+        await fetch();
+    },
+);
+
+if ($props.formInitialData)
+    watch(
+        () => $props.formInitialData,
+        (val) => {
+            if (val) state.set(modelValue, { ...val, ...urlData });
+        },
+    );
+
+onBeforeRouteLeave((to, from, next) => {
+    if (hasChanges.value && $props.observeFormChanges)
+        quasar.dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('globals.unsavedPopup.title'),
+                message: t('globals.unsavedPopup.subtitle'),
+                promise: () => next(),
+            },
+        });
+    else next();
+});
+
+onUnmounted(() => {
+    // Restauramos los datos originales en el store si se realizaron cambios en el formulario pero no se guardaron, evitando modificaciones erróneas.
+    if (hasChanges.value) return state.set(modelValue, originalData.value);
+    if ($props.clearStoreOnUnmount) state.unset(modelValue);
+});
+
+async function fetch() {
+    try {
+        let data;
+        if ($props.model)
+            data = (await arrayData.addFilter({ filter: $props.filter })).response?.data;
+        else
+            data = (
+                await axios.get($props.url, {
+                    params: { filter: JSON.stringify($props.filter) },
+                })
+            ).data;
+        if (Array.isArray(data)) data = data[0] ?? {};
+
+        updateAndEmit('onFetch', { val: data });
+    } catch (e) {
+        state.set(modelValue, {});
+        throw e;
+    }
+}
+
+async function save() {
+    if ($props.observeFormChanges && !hasChanges.value)
+        return notify('globals.noChanges', 'negative');
+
+    isLoading.value = true;
+    try {
+        formData.value = trimData(formData.value);
+        const method = $props.urlCreate ? 'post' : 'patch';
+        const body =
+            method === 'post'
+                ? $props.mapper(formData.value)
+                : $props.mapper(formData.value, originalData.value);
+        const url =
+            $props.urlCreate || $props.urlUpdate || $props.url || arrayData.store.url;
+        const response = await Promise.resolve(
+            $props.saveFn
+                ? $props.saveFn(body)
+                : axios[$props.customMethod ?? method](url, body),
+        );
+
+        if ($props.urlCreate) notify('globals.dataCreated', 'positive');
+
+        hasChanges.value = false;
+        updateAndEmit('onDataSaved', {
+            val: formData.value,
+            res: response?.data,
+            old: originalData.value,
+            rawRes: response,
+        });
+        if ($props.reload) await arrayData.fetch({});
+    } catch (e) {
+        emit('onDataSaveFail', formData.value);
+        throw e;
+    } finally {
+        isLoading.value = false;
+    }
+}
+
+async function saveAndGo() {
+    await save(true);
+    push({ path: $props.goTo });
+}
+
+function reset() {
+    formData.value = JSON.parse(JSON.stringify(originalData.value));
+    updateAndEmit('onFetch', { val: originalData.value });
+    if ($props.observeFormChanges) {
+        hasChanges.value = false;
+        isResetting.value = true;
+    }
+}
+
+// eslint-disable-next-line vue/no-dupe-keys
+function filter(value, update, filterOptions) {
+    update(
+        () => {
+            const { options, filterFn } = filterOptions;
+
+            options.value = filterFn(options, value);
+        },
+        (ref) => {
+            ref.setOptionIndex(-1);
+            ref.moveOptionSelection(1, true);
+        },
+    );
+}
+
+async function updateAndEmit(
+    evt,
+    { val, res, old, rawRes } = { val: null, res: null, old: null, rawRes: null },
+) {
+    state.set(modelValue, val);
+    if (!$props.url) arrayData.store.data = val;
+
+    emit(evt, state.get(modelValue), res, old, formData, rawRes);
+    if (formEl.value) focusFirstInput(formEl.value);
+}
+
+function trimData(data) {
+    if (!$props.defaultTrim) return data;
+    for (const key in data) {
+        if (typeof data[key] == 'string') data[key] = data[key].trim();
+    }
+    return data;
+}
+
+async function onKeyup(evt) {
+    if (evt.key === 'Enter' && !$props.preventSubmit && hasChanges.value) {
+        const input = evt.target;
+        if (input.type == 'textarea' && evt.shiftKey) {
+            let { selectionStart, selectionEnd } = input;
+            input.value =
+                input.value.substring(0, selectionStart) +
+                '\n' +
+                input.value.substring(selectionEnd);
+            selectionStart = selectionEnd = selectionStart + 1;
+            return;
+        }
+        await myForm.value.submit(evt);
+    }
+}
+
+defineExpose({
+    submitForm,
+    myForm,
+    save,
+    isLoading,
+    hasChanges,
+    reset,
+    fetch,
+    formData,
+});
+</script>
+<template>
+    <div class="column items-center full-width" style="position: relative">
+        <QInnerLoading
+            :showing="isLoading"
+            :label="t('globals.pleaseWait')"
+            color="primary"
+            style="min-width: 100%"
+        >
+            <VnSpinner size="md" />
+        </QInnerLoading>
+        <QForm
+            id="vnForm"
+            v-bind="$attrs"
+            ref="myForm"
+            v-if="formData"
+            @submit.prevent="save"
+            @keyup.prevent="onKeyup"
+            @reset="reset"
+            class="full-width"
+            :class="[paddingClass]"
+            :style="{ maxWidth: maxWidth || 'none', width: '100%' }"
+        >
+            <QCard class="q-pa-none">
+                <QCardSection
+                    v-if="showTitle"
+                    class="vn-basic-data__header q-px-none q-pb-none"
+                >
+                    <span
+                        class="text-h6"
+                        v-text="title || $t('globals.pageTitles.basicData')"
+                    />
+                </QCardSection>
+                <slot
+                    v-if="formData"
+                    name="form"
+                    :data="formData"
+                    :validate="validate"
+                    :validations="validations()"
+                    :filter="filter"
+                />
+                <VnSkeletonForm v-else />
+            </QCard>
+        </QForm>
+    </div>
+    <Teleport
+        to="#st-actions"
+        v-if="
+            $props.defaultActions &&
+            stateStore?.isSubToolbarShown() &&
+            componentIsRendered
+        "
+    >
+        <QBtnGroup push class="q-gutter-x-sm">
+            <slot name="moreActions" />
+            <QBtn
+                :label="tMobile(defaultButtons.reset.label)"
+                :color="defaultButtons.reset.color"
+                :icon="defaultButtons.reset.icon"
+                flat
+                @click="defaultButtons.reset.click"
+                :disable="!hasChanges"
+                :title="t(defaultButtons.reset.label)"
+                data-cy="resetDefaultBtn"
+            />
+            <QBtn
+                data-cy="saveDefaultBtn"
+                :label="tMobile('globals.save')"
+                color="primary"
+                icon="save"
+                @click="defaultButtons.save.click"
+                :disable="!hasChanges"
+                :title="t(defaultButtons.save.label)"
+                :flat="!!$props.goTo"
+            />
+            <QBtn
+                v-if="$props.goTo"
+                data-cy="saveAndContinueDefaultBtn"
+                @click="saveAndGo"
+                :label="
+                    tMobile('globals.saveAndContinue') +
+                    ' ' +
+                    t('globals.' + $props.goTo.split('/').pop())
+                "
+                :title="
+                    t('globals.saveAndContinue') +
+                    ' ' +
+                    t('globals.' + $props.goTo.split('/').pop())
+                "
+                :disable="!hasChanges"
+                color="primary"
+                icon="save"
+            />
+        </QBtnGroup>
+    </Teleport>
+</template>
+<style lang="scss" scoped>
+.q-notifications {
+    color: black;
+}
+
+.q-card {
+    padding: 32px;
+}
+</style>

package/lib/composables/index.js

@@ -1,2 +1,9 @@
+export * from './tMobile';
+export * from './useArrayData';
+export * from './useForm';
+export * from './useNotify';
+export * from './useObjectComparison';
+export * from './useQueryResolver';
 export * from './useRequired';
+export * from './useState';
 export * from './useValidator';

package/lib/composables/tMobile.js

@@ -0,0 +1,8 @@
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+export function tMobile(...args) {
+    const quasar = useQuasar();
+    const { t } = useI18n();
+    if (!quasar.screen.xs) return t(...args);
+}