@arrai-innovations/reactive-helpers 11.0.2 → 11.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "11.0.2",
+    "version": "11.0.3",
     "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,5 +1,5 @@
-import { doAwaitTimeout } from "../../../utils/index.js";
-import { reactive } from "vue";
+import { doAwaitTimeout, doAwaitNot } from "../../../utils/index.js";
+import { reactive, ref } from "vue";
 import { deepUnref } from "vue-deepunref";
 
 describe("use/useListSort", () => {
@@ -10,6 +10,7 @@ describe("use/useListSort", () => {
         useListInstances,
         useListRelated,
         useListCalculated,
+        useListFilter,
         useListSort,
         useListSorts,
         setListSortDefaultOptions,
@@ -46,6 +47,7 @@ describe("use/useListSort", () => {
         useListInstances = imported.useListInstances;
         useListRelated = imported.useListRelated;
         useListCalculated = imported.useListCalculated;
+        useListFilter = imported.useListFilter;
         orderByRules = [
             { key: "organization", desc: true, localeCompare: false },
             { key: "lexical_name", desc: false, localeCompare: true },
@@ -339,4 +341,56 @@ describe("use/useListSort", () => {
             expect(listSort.state.objectsInOrder).toEqual(testOrder4.map((id) => listInstance.state.objects[id]));
         });
     });
+    it("pass through correctly when parentState changes their order", async () => {
+        const listInstance = useListInstance({
+            props: reactive({}),
+        });
+        const allowedFilter = ref((obj) => obj.name !== "two");
+        const listFilter = useListFilter({
+            parentState: listInstance.state,
+            allowedFilter,
+        });
+        const orderByRules = ref([]);
+        const listSort = useListSort({
+            parentState: listFilter.state,
+            orderByRules,
+        });
+        await doAwaitNot({
+            obj: listFilter.state,
+            prop: "running",
+        });
+        await waitForListSort(listSort);
+        expect(listFilter.state.order).toEqual([]);
+        expect(listFilter.state.objectsInOrder.map((obj) => obj.id)).toEqual([]);
+        expect(listSort.state.order).toEqual([]);
+        expect(listSort.state.objectsInOrder.map((obj) => obj.id)).toEqual([]);
+        listInstance.addListObject({ id: 1, name: "one" });
+        listInstance.addListObject({ id: 2, name: "two" });
+        listInstance.addListObject({ id: 3, name: "three" });
+        await doAwaitNot({
+            obj: listFilter.state,
+            prop: "running",
+        });
+        await waitForListSort(listSort);
+        expect(listFilter.state.order).toEqual(["1", "3"]);
+        expect(listFilter.state.objectsInOrder.map((obj) => obj.id)).toEqual([1, 3]);
+        expect(listSort.state.order).toEqual(["1", "3"]);
+        expect(listSort.state.objectsInOrder.map((obj) => obj.id)).toEqual([1, 3]);
+        listInstance.updateListObject({ id: 2, name: "twotwo" });
+        await doAwaitNot({
+            obj: listFilter.state,
+            prop: "running",
+        });
+        await waitForListSort(listSort);
+        expect(listSort.state.order).toEqual(["1", "2", "3"]);
+        expect(listSort.state.objectsInOrder.map((obj) => obj.id)).toEqual([1, 2, 3]);
+        listInstance.updateListObject({ id: 2, name: "two" });
+        await doAwaitNot({
+            obj: listFilter.state,
+            prop: "running",
+        });
+        await waitForListSort(listSort);
+        expect(listSort.state.order).toEqual(["1", "3"]);
+        expect(listSort.state.objectsInOrder.map((obj) => obj.id)).toEqual([1, 3]);
+    });
 });

package/use/listSort.js

@@ -18,7 +18,6 @@ import isUndefined from "lodash-es/isUndefined.js";
 import throttle from "lodash-es/throttle.js";
 import zip from "lodash-es/zip.js";
 import { effectScope, reactive, toRef, unref, watch, computed } from "vue";
-import { deepUnref } from "vue-deepunref";
 
 const collator = new Intl.Collator(undefined, { numeric: true });
 
@@ -132,14 +131,17 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
 
     function sortCriteriaWatch() {
         try {
-            if (!state.orderByRules || !state.orderByRules.filter(identity).length) {
+            if (!state.orderByRules?.length || !state.orderByRules.filter(identity).length) {
                 if (!isEmpty(state.sortCriteria)) {
                     for (const removedKey of Object.keys(state.sortCriteria)) {
                         removeSortCriteria(removedKey);
                     }
                 }
-                assignReactiveObject(state.order, deepUnref(parentState.order));
-                assignReactiveObject(state.objectsInOrder, deepUnref(parentState.objectsInOrder));
+                state.order = [...parentState.order];
+                assignReactiveObject(
+                    state.objectsInOrderRefs,
+                    state.order.map((e) => toRef(parentState.objects, e))
+                );
                 return;
             }
             const { removedKeys, addedKeys } = keyDiff(
@@ -152,9 +154,9 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
 
             es.run(() => {
                 for (const addedKey of addedKeys) {
-                    const object = toRef(() => parentState.objects[addedKey]);
-                    const relatedObj = toRef(() => parentState.relatedObjects?.[addedKey]);
-                    const calculatedObj = toRef(() => parentState.calculatedObjects?.[addedKey]);
+                    const object = toRef(parentState.objects, addedKey);
+                    const relatedObj = toRef(parentState.relatedObjects, addedKey);
+                    const calculatedObj = toRef(parentState.calculatedObjects, addedKey);
                     addSortCriteria(object, relatedObj, calculatedObj, addedKey);
                 }
             });
@@ -169,17 +171,15 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
 
     function sortWatch() {
         try {
-            if (!state.orderByRules || !state.orderByRules.length) {
+            if (!state.orderByRules?.length) {
                 state.order = [...parentState.order];
                 assignReactiveObject(
                     state.objectsInOrderRefs,
                     state.order.map((e) => toRef(parentState.objects, e))
                 );
-                3;
                 return;
             }
-
-            let idList = Object.keys(parentState.objects);
+            let idList = [...parentState.order];
             idList.sort((xKey, yKey) => {
                 const xCriteria = state.sortCriteria[xKey];
                 const yCriteria = state.sortCriteria[yKey];
@@ -238,9 +238,7 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
         watch([toRef(state, "orderByDesc"), toRef(state, "sortCriteria")], throttledSortWatch, {
             deep: true,
         });
-        // we do not need two immediate watches to the same function.
-        watch(() => Object.keys(parentState.objects), sortCriteriaWatch);
-        watch(toRef(state, "orderByRules"), sortCriteriaWatch, {
+        watch([toRef(state, "orderByRules"), toRef(parentState, "order")], sortCriteriaWatch, {
             deep: true,
             immediate: true,
         });