@arrai-innovations/reactive-helpers 10.3.0 → 10.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "10.3.0",
+    "version": "10.4.1",
     "description": "VueJS 3 utility composition functions to help manipulate objects and lists.",
     "main": "index.js",
     "type": "module",

package/tests/unit/use/listSort.spec.js

@@ -1,4 +1,5 @@
 import { doAwaitTimeout } from "../../../utils/index.js";
+import { reactive } from "vue";
 import { deepUnref } from "vue-deepunref";
 
 describe("use/useListSort", () => {
@@ -7,6 +8,8 @@ describe("use/useListSort", () => {
         sortThrottleWait,
         useListInstance,
         useListInstances,
+        useListRelated,
+        useListCalculated,
         useListSort,
         useListSorts,
         setListSortDefaultOptions,
@@ -41,6 +44,8 @@ describe("use/useListSort", () => {
         const imported = await import("../../../use");
         useListInstance = imported.useListInstance;
         useListInstances = imported.useListInstances;
+        useListRelated = imported.useListRelated;
+        useListCalculated = imported.useListCalculated;
         orderByRules = [
             { key: "organization", desc: true, localeCompare: false },
             { key: "lexical_name", desc: false, localeCompare: true },
@@ -207,6 +212,72 @@ describe("use/useListSort", () => {
         expect(deepUnref(listSorts.A.state)).toEqual(deepUnref(listSortA.state));
         expect(deepUnref(listSorts.B.state)).toEqual(deepUnref(listSortB.state));
     });
+    it("orderByRules can refer to relatedItem or calculatedItem", async () => {
+        const listInstance = useListInstance({
+            props: reactive({
+                crudArgs: { stream: "test_stream" },
+                listArgs: { user: 1 },
+                retrieveArgs: {
+                    fields: ["id", "__str__", "name", "relatedItem", "calculatedItem"],
+                },
+            }),
+        });
+        const relatedListInstance = useListInstance({
+            props: reactive({
+                crudArgs: { stream: "test_related_stream" },
+                listArgs: { user: 1 },
+                retrieveArgs: {
+                    fields: ["id", "__str__", "name"],
+                },
+            }),
+        });
+        const listRelated = useListRelated({
+            parentState: listInstance.state,
+            relatedObjectsRules: reactive({
+                relatedItemName: {
+                    objects: relatedListInstance.state.objects,
+                    pkKey: "relatedItem",
+                },
+            }),
+        });
+        const listCalculated = useListCalculated({
+            parentState: listRelated.state,
+            calculatedObjectsRules: reactive({
+                calculatedItemName: (obj, relatedObj) => {
+                    return obj.sameValue + ":" + relatedObj.relatedItemName?.oppositeOrder;
+                },
+            }),
+        });
+        const orderByRules = reactive([
+            { key: "calculatedItem.calculatedItemName", desc: false, localeCompare: false },
+        ]);
+        const listSort = useListSort({
+            parentState: listCalculated.state,
+            orderByRules,
+        });
+        for (let i = 1; i <= 4; i++) {
+            listInstance.addListObject({
+                id: i,
+                name: `item${i}`,
+                relatedItem: i,
+                sameValue: "sameValue",
+            });
+            relatedListInstance.addListObject({
+                id: i,
+                name: `relatedItem${i}`,
+                oppositeOrder: 5 - i,
+            });
+        }
+        await waitForListSort(listSort);
+        expect(listSort.state.order).toEqual(["4", "3", "2", "1"]);
+        orderByRules[0].key = "relatedItemName.name";
+        await waitForListSort(listSort);
+        expect(listSort.state.order).toEqual(["1", "2", "3", "4"]);
+        orderByRules[0].key = "relatedItemName.sameValue";
+        orderByRules[1] = { key: "calculatedItem.calculatedItemName", desc: false, localeCompare: false };
+        await waitForListSort(listSort);
+        expect(listSort.state.order).toEqual(["4", "3", "2", "1"]);
+    });
     describe("useListSort/sortThrottleWait", () => {
         it("respects throttle time prior to triggering", async () => {
             setListSortDefaultOptions({

package/tests/unit/utils/assignReactiveObject.spec.js

@@ -3,7 +3,7 @@ import {
     assignReactiveObject,
     AssignReactiveObjectError,
 } from "../../../utils/assignReactiveObject.js";
-import { computed, EffectScope, effectScope, reactive, toRef } from "vue";
+import { computed, EffectScope, effectScope, reactive, toRef, unref } from "vue";
 
 describe("utils/assignReactiveObject", function () {
     describe.skip("addOrUpdateReactiveObject", function () {});
@@ -57,6 +57,68 @@ describe("utils/assignReactiveObject", function () {
                     tes.stop();
                 }
             });
+            it("when target is reactive and source are reactive, for non-primitive values", function () {
+                const target = reactive({
+                    a: { e: 8 },
+                    b: { f: 16 },
+                    c: null,
+                });
+                const source = reactive({
+                    a: { e: 1 },
+                    b: { f: 2 },
+                    c: { g: 4 },
+                });
+                target.c = toRef(source, "c");
+                const tes = effectScope();
+                let computedSum;
+                tes.run(() => {
+                    computedSum = computed(() => target.a.e + target.b.f + target.c.g);
+                });
+                try {
+                    expect(unref(target.a)).not.toBe(unref(source.a));
+                    expect(unref(target.b)).not.toBe(unref(source.b));
+                    expect(unref(target.c)).toBe(unref(source.c));
+                    expect(computedSum.value).toBe(28);
+                    assignReactiveObject(target, source);
+                    expect(target).toEqual({
+                        a: { e: 1 },
+                        b: { f: 2 },
+                        c: { g: 4 },
+                    });
+                    expect(unref(target.a)).toBe(unref(source.a));
+                    expect(unref(target.b)).toBe(unref(source.b));
+                    expect(unref(target.c)).toBe(unref(source.c));
+                    expect(computedSum.value).toBe(7);
+                } finally {
+                    computedSum = null;
+                    tes.stop();
+                }
+            });
+            it("does nothing when all targets are objectlike and already point to the source", function () {
+                const target = reactive({});
+                const source = reactive({
+                    a: { e: 1 },
+                    b: { f: 2 },
+                    c: { g: 4 },
+                });
+                target.a = toRef(source, "a");
+                target.b = toRef(source, "b");
+                target.c = toRef(source, "c");
+                expect(unref(toRef(target, "a"))).toBe(unref(source.a));
+                expect(unref(toRef(target, "b"))).toBe(unref(source.b));
+                expect(unref(toRef(target, "c"))).toBe(unref(source.c));
+                expect(target.a).toBe(source.a);
+                expect(target.b).toBe(source.b);
+                expect(target.c).toBe(source.c);
+                const didAnything = assignReactiveObject(target, source);
+                expect(didAnything).toBeFalsy();
+                expect(unref(toRef(target, "a"))).toBe(unref(source.a));
+                expect(unref(toRef(target, "b"))).toBe(unref(source.b));
+                expect(unref(toRef(target, "c"))).toBe(unref(source.c));
+                expect(target.a).toBe(source.a);
+                expect(target.b).toBe(source.b);
+                expect(target.c).toBe(source.c);
+            });
         });
         describe("should throw an error", function () {
             it("when target is not an array or object", function () {

package/use/listFilter.js

@@ -42,6 +42,8 @@ export function useListFilter({
     excludedValues = {},
     allowedFilter,
     excludedFilter,
+    customIndexOptions = {},
+    customSearchOptions = {},
 }) {
     const state = reactive({
         objectIndexes: {},
@@ -77,7 +79,7 @@ export function useListFilter({
             state[key] = toRef(parentState, key);
         }
         if (useTextSearch) {
-            textSearchIndex = useSearch();
+            textSearchIndex = useSearch(customIndexOptions, customSearchOptions);
             textSearchIndex.state.search = toRef(state, "textSearchValue");
             state.searched = toRef(textSearchIndex.state, "searched");
             state.searching = toRef(textSearchIndex.state, "searching");

package/use/listSort.js

@@ -77,7 +77,7 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
         delete state.sortCriteria[removedKey];
     }
 
-    function addSortCriteria(object, key) {
+    function addSortCriteria(object, relatedObject, calculatedObject, key) {
         const oldScope = state.sortCriteriaEffectScopes[key];
         if (oldScope) {
             oldScope.stop();
@@ -88,16 +88,24 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
                 state.sortCriteria[key] = [];
             }
             watch(
-                [object, toRef(state, "orderByRules")],
+                [object, relatedObject, calculatedObject, toRef(state, "orderByRules")],
                 () => {
                     const obj = unref(object);
+                    const relatedObj = unref(relatedObject);
+                    const calculatedObj = unref(calculatedObject);
                     const newSearchCriteria = [];
                     for (const orderByObj of state.orderByRules.filter(identity)) {
                         let newItem;
                         if (orderByObj.keyFn) {
                             newItem = orderByObj.keyFn(obj, state);
                         } else {
-                            newItem = get(obj, orderByObj.key);
+                            if (orderByObj.key.startsWith("relatedItem.")) {
+                                newItem = get(relatedObj, orderByObj.key.slice(12));
+                            } else if (orderByObj.key.startsWith("calculatedItem.")) {
+                                newItem = get(calculatedObj, orderByObj.key.slice(15));
+                            } else {
+                                newItem = get(obj, orderByObj.key);
+                            }
                         }
                         newSearchCriteria.push(newItem);
                     }
@@ -141,7 +149,9 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
             es.run(() => {
                 for (const addedKey of addedKeys) {
                     const object = toRef(() => parentState.objects[addedKey]);
-                    addSortCriteria(object, addedKey);
+                    const relatedObj = toRef(() => parentState.relatedObjects?.[addedKey]);
+                    const calculatedObj = toRef(() => parentState.calculatedObjects?.[addedKey]);
+                    addSortCriteria(object, relatedObj, calculatedObj, addedKey);
                 }
             });
             assignReactiveObject(

package/utils/assignReactiveObject.js

@@ -2,6 +2,7 @@ import { keyDiff } from "./keyDiff.js";
 import inspect from "browser-util-inspect";
 import isArray from "lodash-es/isArray.js";
 import isObject from "lodash-es/isObject.js";
+import isObjectLike from "lodash-es/isObjectLike.js";
 import { isReactive, isRef, toRef, unref } from "vue";
 
 /**
@@ -89,6 +90,16 @@ function reactiveReplaceKeys(target, source, keys, exclude = []) {
     for (const key of keys) {
         if (!exclude.includes(key)) {
             if (targetIsReactive && sourceIsReactive) {
+                const targetPropRaw = unref(toRef(target, key));
+                // if they are object like  we can see if the values are the same
+                if (isObjectLike(targetPropRaw)) {
+                    const sourcePropRaw = unref(toRef(source, key));
+                    if (isObjectLike(sourcePropRaw)) {
+                        if (targetPropRaw === sourcePropRaw) {
+                            continue;
+                        }
+                    }
+                }
                 target[key] = toRef(source, key);
                 didAnything = true;
             } else if (target[key] !== source[key]) {
@@ -226,7 +237,7 @@ export function assignReactiveObject(target, source, exclude = []) {
     ({ target, source } = validateTargetAndSource(target, source));
     const { addedKeys, sameKeys, removedKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []);
     let didAnything = false;
-    didAnything |= trimReactiveObject(target, removedKeys, exclude);
+    didAnything |= trimReactiveObject(target, source, exclude, removedKeys);
     didAnything |= addOrUpdateReactiveObject(target, source, exclude, addedKeys, sameKeys);
     return didAnything;
 }
@@ -290,7 +301,7 @@ function recursiveInner(target, source, exclude, addedKeys, sameKeys, path, fn)
 function assignReactiveObjectRecursive(target, source, exclude = [], path = "") {
     let { addedKeys, sameKeys, removedKeys } = keyDiff(Object.keys(source) || [], Object.keys(target) || []);
     let didAnything = false;
-    didAnything |= trimReactiveObject(target, removedKeys, exclude);
+    didAnything |= trimReactiveObject(target, source, exclude, removedKeys);
     didAnything |= recursiveInner(target, source, exclude, addedKeys, sameKeys, path, assignReactiveObjectRecursive);
     return didAnything;
 }