@arrai-innovations/reactive-helpers 11.0.2 → 11.0.4

package/package.json

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

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

@@ -3,7 +3,7 @@ import { nextTick, reactive, ref, unref } from "vue";
 import { deepUnref } from "vue-deepunref";
 
 describe("use/listSearch", () => {
-    let useListInstance, useListSearch, useListSearches, useListSort, useListRelated, useListCalculated;
+    let useListInstance, useListSearch, useListSearches, useListSort, useListRelated, useListCalculated, useListFilter;
     beforeEach(async () => {
         const listInstanceModule = await import("../../../use/listInstance");
         useListInstance = listInstanceModule.useListInstance;
@@ -16,6 +16,8 @@ describe("use/listSearch", () => {
         useListRelated = listRelatedModule.useListRelated;
         const listCalculatedModule = await import("../../../use/listCalculated");
         useListCalculated = listCalculatedModule.useListCalculated;
+        const listFilterModule = await import("../../../use/listFilter");
+        useListFilter = listFilterModule.useListFilter;
     });
     it("should match by search term", async () => {
         const textSearchValue = ref("one");
@@ -502,4 +504,76 @@ describe("use/listSearch", () => {
             prop: "running",
         });
     });
+    it("should update when parentState is filtered in pass through mode.", async () => {
+        const listInstance = useListInstance({
+            props: {},
+        });
+        const allowedFilter = ref((obj) => !obj.filtered);
+        const listFilter = useListFilter({
+            parentState: listInstance.state,
+            allowedFilter,
+        });
+        const textSearchValue = ref("");
+        const listSearch = useListSearch({
+            parentState: listFilter.state,
+            props: reactive({
+                textSearchRules: ["name"],
+                textSearchValue,
+            }),
+            throttle: 20,
+        });
+        await doAwaitNot({
+            obj: listSearch.state,
+            prop: "running",
+        });
+        expect(listSearch.state.objects).toEqual({});
+        expect(listSearch.state.order).toEqual([]);
+        expect(listSearch.state.objectsInOrder).toEqual([]);
+        listInstance.addListObject({
+            id: 1,
+            filtered: false,
+        });
+        listInstance.addListObject({
+            id: 2,
+            filtered: true,
+        });
+        listInstance.addListObject({
+            id: 3,
+            filtered: false,
+        });
+        await doAwaitNot({
+            obj: listSearch.state,
+            prop: "running",
+        });
+        expect(listSearch.state.objects).toEqual({
+            1: {
+                id: 1,
+                filtered: false,
+            },
+            3: {
+                id: 3,
+                filtered: false,
+            },
+        });
+        expect(listSearch.state.order).toEqual(["1", "3"]);
+        expect(listSearch.state.objectsInOrder.map((e) => e.id)).toEqual([1, 3]);
+        listInstance.state.objects[2].filtered = false;
+        listInstance.state.objects[1].filtered = true;
+        await doAwaitNot({
+            obj: listSearch.state,
+            prop: "running",
+        });
+        expect(listSearch.state.objects).toEqual({
+            2: {
+                id: 2,
+                filtered: false,
+            },
+            3: {
+                id: 3,
+                filtered: false,
+            },
+        });
+        expect(listSearch.state.order).toEqual(["2", "3"]);
+        expect(listSearch.state.objectsInOrder.map((e) => e.id)).toEqual([2, 3]);
+    });
 });

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/listSearch.js

@@ -274,7 +274,7 @@ export function useListSearch({ parentState, props, throttle = 500, showAllWhenE
         state.order = parentState.order.filter((id) => !!state.objects[id]);
         assignReactiveObject(
             state.objectsInOrderRefs,
-            parentState.order.filter((id) => !!state.objects[id]).map((id) => toRef(state.objects, id))
+            state.order.map((id) => toRef(state.objects, id))
         );
     };
 
@@ -336,7 +336,7 @@ export function useListSearch({ parentState, props, throttle = 500, showAllWhenE
             }
         );
 
-        watch(toRef(parentState, "order"), updateOrder, {
+        watch([() => Object.keys(state.objects), toRef(parentState, "order")], updateOrder, {
             immediate: true,
             deep: true,
         });

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,
         });