@arrai-innovations/reactive-helpers 10.3.0 → 10.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "10.3.0",
+    "version": "10.4.0",
     "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/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(