@verdnatura/vn-front-lib 0.0.9 → 0.0.11

package/lib/composables/useArrayData.js

@@ -0,0 +1,451 @@
+import { onMounted, computed, ref, markRaw } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useArrayDataStore } from 'lib/stores';
+import { buildFilter, isDialogOpened } from 'lib/filters';
+import { advancedFilters } from 'lib/utils';
+import { requestData } from 'lib/composables';
+
+export function useArrayData(key, userOptions) {
+    if (key == null) key = useRoute().meta.moduleName;
+
+    if (!key) throw new Error('ArrayData: A key is required to use this composable');
+    const arrayDataStore = useArrayDataStore();
+    if (!arrayDataStore.get(key)) arrayDataStore.set(key);
+
+    const store = arrayDataStore.get(key);
+    store.dataKey = key;
+
+    const route = useRoute();
+    const router = useRouter();
+    let canceller = null;
+    onMounted(() => {
+        setOptions(userOptions ?? {});
+        reset(['skip']);
+
+        const query = route.query;
+        const searchUrl = store.searchUrl;
+        if (query[searchUrl]) {
+            const params = JSON.parse(query[searchUrl]);
+            const filter =
+                params?.filter && typeof params?.filter == 'object'
+                    ? params?.filter
+                    : JSON.parse(params?.filter ?? '{}');
+            delete params.filter;
+            store.userParams = {
+                ...sanitizerParams(removeIgnoreUrlParams(params)),
+                ...getIgnoreParams(),
+            };
+            store.filter = { ...filter, ...store.userFilter };
+            if (filter?.order) store.order = filter.order;
+        }
+        if (query.stackedParams) store.stackedParams = JSON.parse(query.stackedParams);
+
+        setCurrentFilter();
+    });
+
+    if (userOptions) setOptions(userOptions);
+
+    function setOptions(params) {
+        if (!params) return;
+        const allowedOptions = [
+            'url',
+            'filter',
+            'where',
+            'order',
+            'limit',
+            'skip',
+            'userParams',
+            'userFilter',
+            'exprBuilder',
+            'dynamicExprBuilder',
+            'searchUrl',
+            'navigate',
+            'mapKey',
+            'oneRecord',
+            'hasChanges',
+            'isLocal',
+            'customFilterFn',
+            'remoteParamsArray',
+            'keyData',
+            'isStackableParams',
+            'nonStackableParams',
+            'stackedParams',
+            'dataAnalyticsFilter',
+            'ignoreUrlParams',
+        ];
+        if (typeof params === 'object') {
+            for (const option in params) {
+                const isEmpty = params[option] == null || params[option] === '';
+                if (isEmpty || !allowedOptions.includes(option)) continue;
+
+                if (Object.hasOwn(store, option)) {
+                    const defaultOpts = params[option];
+                    store[option] = params.keepOpts?.includes(option)
+                        ? Object.assign(defaultOpts, store[option])
+                        : defaultOpts;
+                    if (option === 'userParams') store.defaultParams = store[option];
+                }
+            }
+        }
+    }
+
+    async function fetch({ append = false, updateRouter = true }) {
+        cancelRequest();
+        canceller = new AbortController();
+        const { params, limit } = setCurrentFilter();
+
+        let exprFilter;
+        if (store?.exprBuilder || Object.keys(store.dynamicWhereBuilder).length) {
+            exprFilter = buildFilter(params, (param, value) => {
+                if (param == 'filter') return;
+                let res = store.exprBuilder?.(param, value);
+                if (store.dynamicWhereBuilder[param]) res = { [param]: value };
+                if (res) delete params[param];
+                return res;
+            });
+        }
+
+        if (params.filter.where || exprFilter)
+            params.filter.where = { ...params.filter.where, ...exprFilter };
+
+        if (!params?.filter?.order?.length) delete params?.filter?.order;
+        if (!Object.keys(params?.filter?.where ?? {})?.length)
+            delete params?.filter?.where;
+
+        store.isLoading = true;
+        let response;
+        try {
+            response = await requestData(params, canceller, store);
+        } finally {
+            store.isLoading = false;
+            canceller = null;
+        }
+
+        store.hasMoreData = limit && response.data.length >= limit;
+
+        if (!append && !isDialogOpened() && updateRouter) {
+            if (updateStateParams()?.redirect) return;
+        }
+
+        processData(response.data, {
+            map: !!store.mapKey,
+            append,
+            oneRecord: store.oneRecord,
+        });
+        return response;
+    }
+
+    function destroy() {
+        if (arrayDataStore.get(key)) arrayDataStore.clear(key);
+    }
+
+    function deleteOption(option) {
+        delete store[option];
+    }
+
+    function reset(opts = []) {
+        if (arrayDataStore.get(key)) arrayDataStore.reset(key, opts);
+    }
+
+    function resetPagination() {
+        if (arrayDataStore.get(key)) arrayDataStore.resetPagination(key);
+    }
+
+    function cancelRequest() {
+        if (canceller) {
+            canceller.abort();
+            canceller = null;
+        }
+    }
+
+    async function applyFilter({ filter, params }, fetchOptions = {}) {
+        if (filter) store.filter = filter;
+        if (params) store.userParams = { ...params };
+
+        const response = await fetch(fetchOptions);
+        return response;
+    }
+
+    async function addFilter({ filter, params }) {
+        if (filter) store.filter = filter;
+
+        let userParams = { ...store.userParams, ...params };
+        userParams = sanitizerParams(userParams);
+
+        store.userParams = userParams;
+        resetPagination();
+        const response = await fetch({});
+        return { response, filter, params };
+    }
+
+    /**
+     * @deprecated Use addFilter instead, altering the "where" is a bad practice
+     */
+    async function addFilterWhere(where) {
+        const storedFilter = { ...store.filter };
+        if (!storedFilter?.where) storedFilter.where = {};
+        where = { ...storedFilter.where, ...where };
+        await addFilter({ filter: { where } });
+    }
+
+    async function addOrder(field, direction = 'ASC') {
+        const newOrder = `${field} ${direction}`;
+        const order = toArray(store.order);
+
+        let index = getOrderIndex(order, field);
+        if (index > -1) {
+            order[index] = newOrder;
+        } else {
+            index = order.length;
+            order.push(newOrder);
+        }
+
+        store.order = order;
+        resetPagination();
+        await fetch({});
+        index++;
+
+        return { index, order };
+    }
+
+    async function applyOrder(field, direction = 'ASC') {
+        const newOrder = `${field} ${direction}`;
+        store.order = [newOrder];
+        resetPagination();
+        await fetch({});
+
+        return { index: 1, order: [newOrder] };
+    }
+
+    async function applyOrders(order, reload = true) {
+        store.order = order;
+        resetPagination();
+        if (reload) await fetch({});
+    }
+
+    async function deleteOrder(field) {
+        const order = toArray(store.order);
+        const index = getOrderIndex(order, field);
+        if (index > -1) order.splice(index, 1);
+
+        store.order = order;
+        fetch({});
+    }
+
+    function sanitizerParams(params) {
+        for (const param in params) {
+            if (params[param] && typeof params[param] == 'object') {
+                let operator = Object.keys(params[param])[0];
+                if (Object.values(params[param])[0] === null)
+                    operator = operator == 'eq' ? 'null' : 'notNull';
+                if (advancedFilters[operator]) {
+                    store.dynamicExprBuilder[param] = operator;
+                    const newValue = Object.values(params[param])[0];
+                    store.userParams[param] = newValue;
+                    params[param] = newValue;
+                }
+            }
+            if (!isErasable(params[param], param)) continue;
+            delete store.userParams[param];
+            delete params[param];
+
+            if (store.filter?.where) {
+                const key = param;
+                if (store?.exprBuilder) {
+                    const expr = store.exprBuilder(param);
+                    if (!expr) continue;
+                    const canErase = Object.values(expr).every((value) =>
+                        isErasable(value, param),
+                    );
+                    if (!canErase) continue;
+                }
+                delete store.filter.where[key];
+                delete store.dynamicExprBuilder[key];
+                if (!Object.keys(store.filter.where).length) delete store.filter.where;
+            }
+        }
+        return params;
+    }
+
+    async function loadMore() {
+        if (!store.hasMoreData) return;
+
+        store.skip = (store?.filter?.limit ?? store.limit) * store.page;
+        store.page += 1;
+
+        await fetch({ append: true });
+    }
+
+    async function refresh() {
+        if (Object.values(store.userParams).length) await fetch({});
+    }
+
+    function updateStateParams() {
+        if (!route?.path) return;
+        const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
+        if (store?.searchUrl) {
+            newUrl.query[store.searchUrl] = JSON.stringify(
+                removeIgnoreUrlParams(store.currentFilter),
+            );
+
+            if (store.stackedParams?.length)
+                newUrl.query.stackedParams = JSON.stringify(store.stackedParams);
+            else delete newUrl.query.stackedParams;
+        }
+
+        router.replace(newUrl);
+    }
+
+    function getCurrentFilter() {
+        if (!Object.keys(store?.userParams ?? {}).length)
+            store.userParams = store.defaultParams ?? {};
+
+        const filter = {
+            limit: store.limit,
+            ...store.userFilter,
+        };
+
+        let where;
+        if (filter?.where || store.filter?.where)
+            where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
+        Object.assign(filter, store.filter);
+        filter.where = where;
+        const params = { filter };
+
+        Object.assign(params, store.userParams);
+        if (params.filter) params.filter.skip = store.skip;
+        if (store.order) params.filter.order = toArray(store.order);
+        else delete params.filter.order;
+
+        for (const [key, value] of Object.entries(params)) {
+            if (
+                isErasable(value, key) ||
+                (value && typeof value == 'object' && !Array.isArray(value))
+            )
+                continue;
+            const res = getAdvancedFilter(key)?.expr?.(value);
+            if (res) params[key] = res;
+        }
+
+        return { filter, params, limit: filter.limit };
+    }
+
+    function setCurrentFilter() {
+        const { filter, params, limit } = getCurrentFilter();
+        const saveFilter = JSON.parse(JSON.stringify(params));
+
+        delete saveFilter.filter.include;
+        delete saveFilter.filter.fields;
+        delete saveFilter.filter.limit;
+        delete saveFilter.filter.skip;
+        saveFilter.filter = JSON.stringify(saveFilter.filter);
+        store.currentFilter = markRaw(saveFilter);
+        return { filter, params, limit };
+    }
+
+    function processData(data, { map = true, append = true, oneRecord = false }) {
+        store.append = append;
+        if (oneRecord) {
+            store.data = Array.isArray(data) ? data[0] : data;
+            return;
+        }
+        if (!append) {
+            store.data = [];
+            store.map = new Map();
+        }
+        if (!Array.isArray(data)) {
+            store.data = data;
+        } else if (!map && append) {
+            for (const row of data) store.data.push(row);
+        } else {
+            for (const row of data) {
+                const key = row[store.mapKey];
+                row.key = key;
+                const existing = store.map.get(key);
+                if (key && existing) {
+                    const { position } = existing;
+                    row.position = position;
+                    store.map.set(key, row);
+                    store.data[position] = row;
+                } else {
+                    row.position = store.map.size;
+                    store.map.set(key, row);
+                    store.data.push(row);
+                }
+            }
+        }
+    }
+
+    function getAdvancedFilter(param) {
+        const operator = store.dynamicExprBuilder[param];
+        if (!operator) {
+            return;
+        }
+        return advancedFilters[operator];
+    }
+
+    function isErasable(value, param) {
+        return (
+            value === '' ||
+            value === undefined ||
+            (value === null && !getAdvancedFilter(param)?.isNullable)
+        );
+    }
+
+    function removeIgnoreUrlParams(params) {
+        const currentParams = { ...params };
+        if (store.ignoreUrlParams.length && Object.keys(currentParams).length)
+            for (const param of store.ignoreUrlParams) delete currentParams[param];
+
+        return currentParams;
+    }
+
+    function getIgnoreParams() {
+        const currentParams = {};
+        if (store.ignoreUrlParams.length && Object.keys(store.userParams).length)
+            for (const param of store.ignoreUrlParams)
+                currentParams[param] = store.userParams[param];
+
+        return currentParams;
+    }
+
+    const totalRows = computed(() => (store.data && store.data.length) || 0);
+    const isLoading = ref(store.isLoading || false);
+
+    return {
+        fetch,
+        applyFilter,
+        addFilter,
+        getCurrentFilter,
+        setCurrentFilter,
+        addFilterWhere,
+        addOrder,
+        applyOrder,
+        applyOrders,
+        deleteOrder,
+        refresh,
+        destroy,
+        loadMore,
+        store,
+        totalRows,
+        updateStateParams,
+        isLoading,
+        deleteOption,
+        reset,
+        resetPagination,
+        setOptions,
+        sanitizerParams,
+        processData,
+        dataKey: key,
+    };
+}
+
+function getOrderIndex(order, field) {
+    return order.findIndex((o) => o.split(' ')[0] === field);
+}
+
+function toArray(str = []) {
+    if (!str) return [];
+    if (Array.isArray(str)) return str;
+    if (typeof str === 'string') return str.split(',').map((item) => item.trim());
+}

package/lib/composables/useForm.js

@@ -0,0 +1,12 @@
+export function focusFirstInput(form) {
+    if (!form || form.hasAttribute('data-no-focus')) return;
+    const textareas = form.querySelectorAll(
+        'textarea:not([disabled]), [contenteditable]:not([disabled])',
+    );
+    const inputs = form.querySelectorAll('input:not([disabled]):not([type="checkbox"])');
+    const [firstInput] = inputs;
+    const textareaLen = textareas.length;
+    const el = textareaLen ? textareas[textareaLen - 1] : firstInput;
+
+    if (el !== document.activeElement) el?.focus();
+}

package/lib/composables/useNotify.js

@@ -0,0 +1,24 @@
+import { Notify } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+export function useNotify() {
+    const { t } = useI18n();
+    const notify = (message, type = 'positive', icon, opts = {}) => {
+        const defaultIcons = {
+            warning: 'warning',
+            negative: 'error',
+            positive: 'check',
+        };
+
+        Notify.create({
+            message: t(message, opts.translationParams || {}),
+            type: type,
+            icon: icon ? icon : defaultIcons[type],
+            ...opts,
+        });
+    };
+
+    return {
+        notify,
+    };
+}

package/lib/composables/useObjectComparison.js

@@ -0,0 +1,67 @@
+export function getObjectByKeys(source, keys) {
+    if (!source || typeof source !== 'object') return {};
+    if (!Array.isArray(keys) || !keys.length) return {};
+
+    const selected = {};
+    for (const key of keys) {
+        if (Object.hasOwn(source, key)) selected[key] = source[key];
+    }
+
+    return selected;
+}
+
+export function getObjectDifferences(source, target) {
+    const left = isComparableObject(source) ? source : {};
+    const right = isComparableObject(target) ? target : {};
+    const differences = {};
+    const keys = new Set([...Object.keys(left), ...Object.keys(right)]);
+
+    for (const key of keys) {
+        const expected = left[key];
+        const actual = right[key];
+
+        if (isComparableObject(expected) && isComparableObject(actual)) {
+            const nestedDiff = getObjectDifferences(expected, actual);
+            if (Object.keys(nestedDiff).length) differences[key] = nestedDiff;
+            continue;
+        }
+
+        if (!isSameValue(expected, actual)) {
+            differences[key] = { expected, actual };
+        }
+    }
+
+    return differences;
+}
+
+export function isComparableObject(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+export function isSameValue(left, right) {
+    if (Array.isArray(left) && Array.isArray(right)) {
+        if (left.length !== right.length) return false;
+
+        for (let i = 0; i < left.length; i++) {
+            if (!isSameValue(left[i], right[i])) return false;
+        }
+
+        return true;
+    }
+
+    if (isComparableObject(left) && isComparableObject(right)) {
+        const nestedDiff = getObjectDifferences(left, right);
+        return !Object.keys(nestedDiff).length;
+    }
+
+    return Object.is(left, right);
+}
+
+export function useObjectComparison() {
+    return {
+        getObjectByKeys,
+        getObjectDifferences,
+        isComparableObject,
+        isSameValue,
+    };
+}