@verdnatura/vn-front-lib 0.0.9 → 0.0.11

package/lib/composables/useQueryResolver.js

@@ -0,0 +1,306 @@
+import axios from 'axios';
+import qs from 'qs';
+import { getObjectByKeys, isSameValue } from 'lib/composables';
+import { advancedFilters, defaultOperator, trackAnalyticEvent } from 'lib/utils';
+
+const DEFAULT_OPERATOR = defaultOperator;
+
+export async function requestData(params, canceller, store) {
+    const { isLocal, remoteParamsArray, customFilterFn, keyData, url } = store;
+
+    if (store?.dataAnalyticsFilter) {
+        const path = window.location.hash.slice(1).split('?')[0];
+        trackAnalyticEvent(store.dataAnalyticsFilter, path);
+    }
+
+    if (!isLocal) return fetchRemote(params);
+
+    let response;
+
+    const { remote: currentRemoteParams, local: currentLocalParams } =
+        getRemoteAndLocalParams(params, remoteParamsArray);
+
+    const { remote: appliedRemoteParams, local: appliedLocalParams } =
+        getRemoteAndLocalParams(store.appliedParams, remoteParamsArray);
+
+    const hasNewRemoteParams =
+        !store.appliedParams || !isSameValue(currentRemoteParams, appliedRemoteParams);
+
+    const hasNewLocalParams =
+        !store.appliedParams || !isSameValue(currentLocalParams, appliedLocalParams);
+
+    const localParamsToApply = hasNewLocalParams
+        ? currentLocalParams
+        : appliedLocalParams;
+
+    // prettier-ignore
+    if (((!hasNewRemoteParams && !hasNewLocalParams) || (!store?.rawResponse || hasNewRemoteParams)) && url)
+        response = await fetchRemote(currentRemoteParams);
+
+    response = fetchLocalData(
+        store.rawResponse,
+        localParamsToApply,
+        customFilterFn,
+        keyData,
+        store,
+    );
+    store.appliedParams = JSON.parse(JSON.stringify(params));
+
+    return response;
+
+    async function fetchRemote(remoteParams) {
+        const requestParams = {
+            ...remoteParams,
+            filter: JSON.stringify(remoteParams.filter),
+        };
+
+        const query = await axios.get(store.url, {
+            signal: canceller.signal,
+            params: requestParams,
+            paramsSerializer: (params) => qs.stringify(params, { skipNulls: false }),
+        });
+        store.appliedParams = JSON.parse(JSON.stringify(params));
+        store.rawResponse = structuredClone(query.data);
+        return query;
+    }
+}
+
+export function getRemoteAndLocalParams(params, remoteParamsArray = []) {
+    const isPlainObject = (value) =>
+        value && typeof value === 'object' && !Array.isArray(value);
+
+    const source = isPlainObject(params) ? params : {};
+    const remoteKeys = Array.isArray(remoteParamsArray)
+        ? remoteParamsArray.filter((key) => typeof key === 'string')
+        : [];
+    const remoteKeySet = new Set(remoteKeys);
+
+    const remote = getObjectByKeys(source, remoteKeys);
+    const local = Object.fromEntries(
+        Object.entries(source).filter(
+            ([key]) => key !== 'filter' && !remoteKeySet.has(key),
+        ),
+    );
+
+    const sourceFilter = isPlainObject(source.filter) ? source.filter : null;
+    if (!sourceFilter) return { remote, local };
+
+    const localFilter = {};
+    const remoteFilter = {};
+
+    if (isPlainObject(sourceFilter.where)) {
+        const remoteWhere = getObjectByKeys(sourceFilter.where, remoteKeys);
+        const localWhere = Object.fromEntries(
+            Object.entries(sourceFilter.where).filter(([key]) => !remoteKeySet.has(key)),
+        );
+
+        if (Object.keys(localWhere).length) localFilter.where = localWhere;
+        if (Object.keys(remoteWhere).length) remoteFilter.where = remoteWhere;
+    }
+
+    if (Array.isArray(sourceFilter.order)) {
+        const matchesRemoteOrder = (orderClause) => {
+            if (typeof orderClause !== 'string') return false;
+
+            const normalizedClause = orderClause.toLowerCase();
+            return remoteKeys.some((remoteKey) => {
+                const normalizedKey = remoteKey.toLowerCase();
+                return (
+                    normalizedClause === normalizedKey ||
+                    normalizedClause.startsWith(`${normalizedKey} `) ||
+                    normalizedClause.includes(`.${normalizedKey} `)
+                );
+            });
+        };
+
+        const remoteOrder = sourceFilter.order.filter(matchesRemoteOrder);
+        const localOrder = sourceFilter.order.filter(
+            (orderClause) => !matchesRemoteOrder(orderClause),
+        );
+
+        if (localOrder.length) localFilter.order = localOrder;
+        if (remoteOrder.length) remoteFilter.order = remoteOrder;
+    }
+
+    Object.assign(
+        remoteFilter,
+        Object.fromEntries(
+            Object.entries(sourceFilter).filter(
+                ([filterKey]) => filterKey !== 'where' && filterKey !== 'order',
+            ),
+        ),
+    );
+
+    if (Object.keys(localFilter).length) local.filter = localFilter;
+    if (Object.keys(remoteFilter).length) remote.filter = remoteFilter;
+
+    return { remote, local };
+}
+
+export function fetchLocalData(data, params, customFn, keyData, store) {
+    const { isStackableParams, nonStackableParams, stackedParams } = store;
+    let dataToFilter = keyData ? data[keyData] : (data ?? store.data);
+
+    const currentParams = JSON.parse(JSON.stringify(params));
+    const filter = currentParams?.filter;
+    const order = filter?.order;
+    const where = filter?.where;
+    const otherParams = JSON.parse(JSON.stringify(currentParams));
+    delete otherParams.filter;
+
+    const hasWhere = Object.keys(where ?? {}).length;
+    const hasOtherParams = Object.keys(otherParams ?? {}).length;
+    const hasStackedParams = isStackableParams && stackedParams.length;
+
+    if (hasWhere || hasOtherParams || hasStackedParams) {
+        const filters = [];
+        if (where) setFilters(where, filters);
+        if (otherParams) setFilters(otherParams, filters);
+        if (isStackableParams) setStackedFilters(store, filters);
+
+        function setStackedFilters(store, filters) {
+            filters.push(
+                ...store.stackedParams.filter(
+                    (p) =>
+                        !filters.find(
+                            (f) =>
+                                f.column === p.column &&
+                                f.operator === p.operator &&
+                                !Array.isArray(p.value) &&
+                                isSameValue(f.value, p.value),
+                        ),
+                ),
+            );
+            if (isStackableParams)
+                store.stackedParams = filters.filter(
+                    (f) => !nonStackableParams?.includes(f.column),
+                );
+        }
+
+        function setFilters(params, filters) {
+            for (const key in params) {
+                const complexOp =
+                    params[key] &&
+                    typeof params[key] === 'object' &&
+                    !Array.isArray(params[key]);
+
+                const rawOperator = complexOp
+                    ? Object.keys(params[key])[0]
+                    : DEFAULT_OPERATOR;
+                const value = complexOp ? params[key][rawOperator] : params[key];
+
+                filters.push({ column: key, operator: rawOperator, value });
+            }
+        }
+
+        function filterFn(row, filters) {
+            let match;
+            for (const filter of filters) {
+                try {
+                    const opFn = advancedFilters?.[filter.operator]?.localEval;
+                    match = opFn ? opFn(row[filter.column], filter.value) : false;
+                } catch (error) {
+                    console.error('fetchLocalData filter comparison error', {
+                        row,
+                        filter,
+                        filters,
+                        error,
+                    });
+                    return false;
+                }
+                if (!match) break;
+            }
+            return match;
+        }
+
+        const matcher = customFn
+            ? (row) => customFn(row, filters, filterFn)
+            : (row) => filterFn(row, filters);
+
+        dataToFilter = dataToFilter.filter(matcher);
+    }
+
+    if (order) {
+        const sortParams = parseOrder(order);
+        dataToFilter = multiSort(dataToFilter, sortParams);
+    }
+
+    let response;
+
+    if (keyData) response = { ...data, [keyData]: dataToFilter };
+    else response = { data: dataToFilter };
+
+    return response;
+}
+
+function parseOrder(order) {
+    if (typeof order === 'string') order = order.split(',');
+
+    return order.map((str) => {
+        const [key, direction = 'asc'] = str.trim().split(/\s+/);
+
+        return {
+            key,
+            order: direction.toLowerCase() === 'desc' ? 'desc' : 'asc',
+        };
+    });
+}
+
+function normalizeValue(val) {
+    if (val == null) return null;
+
+    if (val instanceof Date) return val.getTime();
+
+    if (typeof val === 'boolean') return val ? 1 : 0;
+
+    if (typeof val === 'number') return val;
+
+    if (typeof val === 'string') {
+        const num = Number(val);
+        if (!isNaN(num) && val.trim() !== '') return num;
+
+        if (isLikelyDateString(val)) {
+            const date = new Date(val);
+            if (!isNaN(date.getTime())) return date.getTime();
+        }
+
+        return val.toLowerCase();
+    }
+
+    return val;
+}
+
+function isLikelyDateString(val) {
+    return /^(\d{4}-\d{2}-\d{2})([T ][\d:.+-]+(?:Z)?)?$/.test(val.trim());
+}
+
+function compareValues(a, b, order) {
+    const dir = order === 'asc' ? 1 : -1;
+
+    const valA = normalizeValue(a);
+    const valB = normalizeValue(b);
+
+    if (valA == null && valB == null) return 0;
+    if (valA == null) return 1;
+    if (valB == null) return -1;
+
+    if (typeof valA === 'string' && typeof valB === 'string') {
+        const res = valA.localeCompare(valB);
+        return dir * res;
+    }
+
+    if (valA > valB) return dir;
+    if (valA < valB) return -dir;
+
+    return 0;
+}
+
+function multiSort(array, sortParams) {
+    return [...array].sort((a, b) => {
+        for (const { key, order } of sortParams) {
+            const res = compareValues(a[key], b[key], order);
+            if (res !== 0) return res;
+        }
+        return 0;
+    });
+}

package/lib/composables/useState.js

@@ -0,0 +1,81 @@
+import { ref, computed } from 'vue';
+
+const state = ref({});
+
+const user = ref({
+    id: 0,
+    name: '',
+    nickname: '',
+    lang: '',
+    darkMode: null,
+    companyFk: null,
+    warehouseFk: null,
+    centralWeekPlacement: null,
+    yearScope: null,
+});
+if (sessionStorage.getItem('user'))
+    user.value = JSON.parse(sessionStorage.getItem('user'));
+
+const roles = ref([]);
+const acls = ref([]);
+const drawer = ref(true);
+const headerMounted = ref(false);
+
+export function useState() {
+    function getUser() {
+        return computed(() => {
+            return user.value;
+        });
+    }
+
+    function setUser(data) {
+        const currentUser = { ...JSON.parse(sessionStorage.getItem('user')), ...data };
+        sessionStorage.setItem('user', JSON.stringify(currentUser));
+        user.value = currentUser;
+        return currentUser;
+    }
+
+    function getRoles() {
+        return computed(() => {
+            return roles.value;
+        });
+    }
+
+    function setRoles(data) {
+        roles.value = data;
+    }
+
+    function getAcls() {
+        return computed(() => acls.value);
+    }
+
+    function setAcls(data) {
+        acls.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,
+        getAcls,
+        setAcls,
+        set,
+        get,
+        unset,
+        drawer,
+        headerMounted,
+    };
+}

package/lib/filters/filterPanel.js

@@ -0,0 +1,95 @@
+/**
+ * Passes a loopback fields filter to an object.
+ *
+ * @param {Object} fields The fields object or array
+ * @return {Object} The fields as object
+ */
+function fieldsToObject(fields) {
+    const fieldsObj = {};
+
+    if (Array.isArray(fields)) {
+        for (const field of fields) fieldsObj[field] = true;
+    } else if (typeof fields == 'object') {
+        for (const field in fields) {
+            if (fields[field]) fieldsObj[field] = true;
+        }
+    }
+
+    return fieldsObj;
+}
+
+/**
+ * Merges two loopback fields filters.
+ *
+ * @param {Object|Array} src The source fields
+ * @param {Object|Array} dst The destination fields
+ * @return {Array} The merged fields as an array
+ */
+function mergeFields(src, dst) {
+    const fields = {};
+    Object.assign(fields, fieldsToObject(src), fieldsToObject(dst));
+    return Object.keys(fields);
+}
+
+/**
+ * Merges two loopback where filters.
+ *
+ * @param {Object|Array} src The source where
+ * @param {Object|Array} dst The destination where
+ * @return {Array} The merged wheres
+ */
+function mergeWhere(src, dst) {
+    const and = [];
+    if (src) and.push(src);
+    if (dst) and.push(dst);
+    return simplifyOperation(and, 'and');
+}
+
+/**
+ * Merges two loopback filters returning the merged filter.
+ *
+ * @param {Object} src The source filter
+ * @param {Object} dst The destination filter
+ * @return {Object} The result filter
+ */
+function mergeFilters(src, dst) {
+    const res = { ...dst };
+
+    if (!src) return res;
+
+    if (src.fields) res.fields = mergeFields(src.fields, res.fields);
+    if (src.where) res.where = mergeWhere(res.where, src.where);
+    if (src.include) res.include = src.include;
+    if (src.order) res.order = src.order;
+    if (src.limit) res.limit = src.limit;
+    if (src.offset) res.offset = src.offset;
+    if (src.skip) res.skip = src.skip;
+
+    return res;
+}
+
+function simplifyOperation(operation, operator) {
+    switch (operation.length) {
+        case 0:
+            return undefined;
+        case 1:
+            return operation[0];
+        default:
+            return { [operator]: operation };
+    }
+}
+
+function buildFilter(params, builderFunc) {
+    const and = [];
+
+    for (const param in params) {
+        const value = params[param];
+        if (value === undefined) continue;
+
+        const expr = builderFunc(param, value);
+        if (expr) and.push(expr);
+    }
+    return simplifyOperation(and, 'and');
+}
+
+export { fieldsToObject, mergeFields, mergeWhere, mergeFilters, buildFilter };

package/lib/filters/getDifferences.js

@@ -0,0 +1,18 @@
+export function getDifferences(formData = {}, initialData = {}) {
+    const diff = {};
+    const initial = { ...initialData };
+    const form = { ...formData };
+    delete initial.$index;
+    delete form.$index;
+
+    for (const key in form) {
+        if (!Object.prototype.hasOwnProperty.call(initial, key)) diff[key] = form[key];
+        else if (JSON.stringify(form[key]) !== JSON.stringify(initial[key]))
+            diff[key] = form[key];
+    }
+
+    for (const key in initial)
+        if (!Object.prototype.hasOwnProperty.call(form, key)) diff[key] = initial[key];
+
+    return diff;
+}

package/lib/filters/getUpdatedValues.js

@@ -0,0 +1,6 @@
+export function getUpdatedValues(keys, formData) {
+    return keys.reduce((acc, key) => {
+        acc[key] = formData[key];
+        return acc;
+    }, {});
+}

package/lib/filters/index.js

@@ -0,0 +1,5 @@
+export * from './filterPanel';
+export * from './getDifferences';
+export * from './getUpdatedValues';
+export * from './isDialogOpened';
+export * from './onBeforeSave';

package/lib/filters/isDialogOpened.js

@@ -0,0 +1,3 @@
+export function isDialogOpened(query = '[role="dialog"]') {
+    return document.querySelectorAll(query).length > 0;
+}

package/lib/filters/onBeforeSave.js

@@ -0,0 +1,9 @@
+import { getDifferences } from 'lib/filters';
+import { getUpdatedValues } from 'lib/filters';
+
+export function onBeforeSave(formData, originalData) {
+    return getUpdatedValues(
+        Object.keys(getDifferences(formData, originalData)),
+        formData,
+    );
+}

package/lib/stores/index.js

@@ -1 +1,3 @@
+export * from './useArrayDataStore';
+export * from './useStateStore';
 export * from './useValidationsStore';

package/lib/stores/useArrayDataStore.js

@@ -0,0 +1,82 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useArrayDataStore = defineStore('arrayDataStore', () => {
+    const state = ref({});
+    const defaultOpts = {
+        filter: {},
+        userFilter: {},
+        userParams: {},
+        appliedParams: null,
+        rawResponse: null,
+        url: '',
+        limit: 20,
+        skip: 0,
+        order: '',
+        isLoading: false,
+        userParamsChanged: false,
+        exprBuilder: null,
+        dynamicExprBuilder: {},
+        dynamicWhereBuilder: {},
+        searchUrl: 'params',
+        navigate: null,
+        page: 1,
+        mapKey: 'id',
+        oneRecord: false,
+        hasChanges: false,
+        isLocal: false,
+        customFilterFn: null,
+        remoteParamsArray: [],
+        keyData: null,
+        isStackableParams: false,
+        nonStackableParams: [],
+        stackedParams: [],
+        dataAnalyticsFilter: false,
+        ignoreUrlParams: [],
+    };
+
+    function get(key) {
+        return state.value[key];
+    }
+
+    function set(key) {
+        state.value[key] = getDefaultState(key);
+    }
+
+    function clear(key) {
+        state.value[key]?.channel?.close();
+        delete state.value[key];
+    }
+
+    function reset(key, opts = []) {
+        if (!opts.length) state.value[key] = getDefaultState();
+        else
+            opts.forEach((opt) => {
+                if (opt.includes('.')) {
+                    const [parent, child] = opt.split('.');
+                    state.value[key][parent][child] = defaultOpts[child];
+                } else if (Object.hasOwn(state.value[key], opt))
+                    state.value[key][opt] = defaultOpts[opt];
+            });
+    }
+
+    function getDefaultState(key) {
+        return Object.assign(JSON.parse(JSON.stringify(defaultOpts)), {
+            data: ref(),
+            map: ref(new Map()),
+            channel: new BroadcastChannel(`channel-data-${key}`),
+        });
+    }
+
+    function resetPagination(key) {
+        reset(key, ['skip', 'filter.skip', 'page']);
+    }
+
+    return {
+        get,
+        set,
+        clear,
+        reset,
+        resetPagination,
+    };
+});

package/lib/stores/useStateStore.js

@@ -0,0 +1,84 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useStateStore = defineStore('stateStore', () => {
+    const isMounted = ref(false);
+    const leftDrawer = ref(false);
+    const rightDrawer = ref(false);
+    const rightAdvancedDrawer = ref(false);
+    const subToolbar = ref(false);
+    const cardDescriptor = ref(null);
+    const descriptors = ref({});
+
+    function cardDescriptorChangeValue(descriptor) {
+        cardDescriptor.value = descriptor;
+    }
+    function toggleLeftDrawer() {
+        leftDrawer.value = !leftDrawer.value;
+    }
+
+    function toggleRightDrawer() {
+        rightDrawer.value = !rightDrawer.value;
+    }
+
+    function toggleRightAdvancedDrawer() {
+        rightAdvancedDrawer.value = !rightAdvancedDrawer.value;
+    }
+
+    function rightDrawerChangeValue(value) {
+        rightDrawer.value = value;
+    }
+
+    function rightAdvancedDrawerChangeValue(value) {
+        rightAdvancedDrawer.value = value;
+    }
+
+    function toggleSubToolbar() {
+        subToolbar.value = !subToolbar.value;
+    }
+
+    function setMounted() {
+        isMounted.value = true;
+    }
+
+    function isHeaderMounted() {
+        return isMounted.value;
+    }
+
+    function isLeftDrawerShown() {
+        return leftDrawer.value;
+    }
+
+    function isRightDrawerShown() {
+        return rightDrawer.value;
+    }
+
+    function isSubToolbarShown() {
+        return subToolbar.value;
+    }
+
+    function setDescriptors(value) {
+        descriptors.value = value;
+    }
+
+    return {
+        cardDescriptor,
+        cardDescriptorChangeValue,
+        leftDrawer,
+        rightDrawer,
+        rightAdvancedDrawer,
+        setMounted,
+        isHeaderMounted,
+        toggleLeftDrawer,
+        toggleRightDrawer,
+        toggleRightAdvancedDrawer,
+        isLeftDrawerShown,
+        isRightDrawerShown,
+        isSubToolbarShown,
+        toggleSubToolbar,
+        rightDrawerChangeValue,
+        rightAdvancedDrawerChangeValue,
+        descriptors,
+        setDescriptors,
+    };
+});