@arrai-innovations/reactive-helpers 1.0.4 → 1.1.0

package/package.json

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

package/use/listFilter.js

@@ -44,20 +44,8 @@ export function useListFilter({
             state.searching = toRef(textSearchIndex.state, "searching");
         }
 
-        state.order = computed(() => {
-            if (!parentState.order) {
-                return parentState.order;
-            }
-            return parentState.order.filter((id) => state.objects[id]);
-        });
-        state.objectsInOrder = computed(() => {
-            if (!parentState.order) {
-                return [];
-            }
-            const order = state.order;
-            const objects = state.objects;
-            return order.map((key) => objects[key]).filter(identity);
-        });
+        state.objectsInOrder = computed(() => parentState.order.map((id) => state.objects[id]).filter(identity));
+        state.order = computed(() => state.objectsInOrder.map((object) => `${object.id}`));
 
         watchEffect(() => {
             const allowedValuesEmpty = !state.allowedValues || isEmpty(state.allowedValues);

package/use/listInstance.js

@@ -41,7 +41,7 @@ export function useListInstance({ crudArgs, defaultListArgs = {}, defaultRetriev
         loading: undefined,
         errored: false,
         error: null,
-        addedOrder: [],
+        order: [],
     });
     assignReactiveObject(state.listInstanceCrud, defaultCrud);
     if (crudArgs) {
@@ -99,7 +99,8 @@ export function useListInstance({ crudArgs, defaultListArgs = {}, defaultRetriev
             throw new ListError(`addListObject: list already has object for id: ${inspect(object.id)}`, "duplicate-id");
         }
         state.objects[object.id] = {};
-        state.addedOrder.push(object.id);
+        // objects keys are always strings.
+        state.order.push(`${object.id}`);
         assignReactiveObject(state.objects[object.id], object);
     }
 
@@ -123,12 +124,13 @@ export function useListInstance({ crudArgs, defaultListArgs = {}, defaultRetriev
                 "missing-object"
             );
         }
-        state.addedOrder.splice(state.addedOrder.indexOf(objectId), 1);
+        // objects keys are always strings.
+        state.order.splice(state.order.indexOf(`${objectId}`), 1);
         delete state.objects[objectId];
     }
 
     function clearList() {
-        state.addedOrder.splice(0);
+        state.order.splice(0);
         for (const item in state.objects) {
             delete state.objects[item];
         }
@@ -145,7 +147,7 @@ export function useListInstance({ crudArgs, defaultListArgs = {}, defaultRetriev
     const es = effectScope();
 
     es.run(() => {
-        state.objectsInOrder = computed(() => state.addedOrder.map((id) => state.objects[id]));
+        state.objectsInOrder = computed(() => state.order.map((id) => state.objects[id]));
     });
 
     const returnedObject = {

package/use/listRelated.js

@@ -1,4 +1,4 @@
-import { computed, effectScope, onScopeDispose, reactive, toRefs, watch } from "vue";
+import { computed, effectScope, onScopeDispose, reactive, toRef, toRefs, watch } from "vue";
 import { get, isArray, isEmpty, isUndefined } from "lodash";
 import { keyDiff } from "../utils/keyDiff";
 
@@ -108,6 +108,9 @@ export function useListRelated({
     const es = effectScope();
 
     es.run(() => {
+        state.order = toRef(parentState, "order");
+        state.objectsInOrder = computed(() => state.order.map((id) => state.objects[id]));
+
         watch(() => Object.keys(parentState.objects), parentStateObjectsWatch, { immediate: true });
         watch(
             [

package/use/listSort.js

@@ -105,9 +105,7 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
 
     function sortWatch() {
         if (!state.orderByRules || !state.orderByRules.length) {
-            const serverOrderObjectsInOrder = parentState.addedOrder
-                .map((e) => parentState.objects[e])
-                .filter(identity);
+            const serverOrderObjectsInOrder = parentState.order.map((e) => parentState.objects[e]).filter(identity);
             assignReactiveObject(
                 state.order,
                 serverOrderObjectsInOrder.map((e) => String(e.id))
@@ -168,13 +166,9 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
             immediate: true,
         });
 
-        watch(
-            [toRef(state, "orderByDesc"), () => state.sortCriteria, () => parentState.addedOrder],
-            throttledSortWatch,
-            {
-                deep: true,
-            }
-        );
+        watch([toRef(state, "orderByDesc"), () => state.sortCriteria, () => parentState.order], throttledSortWatch, {
+            deep: true,
+        });
         onScopeDispose(() => {
             Object.keys(state.sortCriteriaWatches).forEach((key) => {
                 removeSortCriteria(key);

package/use/listSubscription.js

@@ -1,4 +1,4 @@
-import { effectScope, onScopeDispose, reactive } from "vue";
+import { effectScope, onScopeDispose, reactive, toRef } from "vue";
 import { useListInstance } from "./listInstance";
 import { cloneDeep, isEmpty, isObject } from "lodash";
 import { assignReactiveObject } from "../utils/assignReactiveObject";
@@ -128,6 +128,9 @@ export function useListSubscription({ listInstance, crudArgs, defaultListArgs, d
     const es = effectScope();
 
     es.run(() => {
+        state.objects = toRef(listInstance.state, "objects");
+        state.order = toRef(listInstance.state, "order");
+        state.objectsInOrder = toRef(listInstance.state, "objectsInOrder");
         onScopeDispose(async () => {
             await unsubscribe();
         });

package/use/paginatedListInstance.js

@@ -3,27 +3,23 @@ import { useListInstance } from "./listInstance";
 export function usePagedListInstance({ crudArgs, defaultListArgs = {}, defaultRetrieveArgs = {} }) {
     const listInstance = useListInstance({ crudArgs, defaultListArgs, defaultRetrieveArgs });
 
-    listInstance.state.total_records = 0;
-    listInstance.state.total_pages = 0;
-    listInstance.state.page = 0;
-    listInstance.state.per_page = 0;
+    listInstance.state.totalRecords = 0;
+    listInstance.state.totalPages = 0;
+    listInstance.state.perPage = 0;
 
-    listInstance.pageCallback = (newObjects, { total_records, total_pages, page, per_page }) => {
+    listInstance.pageCallback = (newObjects, { totalRecords, totalPages, perPage }) => {
         // display one page at a time, clear the list
         listInstance.clearList();
 
         listInstance.defaultPageCallback(newObjects);
-        if (total_records !== undefined) {
-            listInstance.state.total_records = total_records;
+        if (totalRecords !== undefined) {
+            listInstance.state.totalRecords = totalRecords;
         }
-        if (total_pages !== undefined) {
-            listInstance.state.total_pages = total_pages;
+        if (totalPages !== undefined) {
+            listInstance.state.totalPages = totalPages;
         }
-        if (page !== undefined) {
-            listInstance.state.page = page;
-        }
-        if (per_page !== undefined) {
-            listInstance.state.per_page = per_page;
+        if (perPage !== undefined) {
+            listInstance.state.perPage = perPage;
         }
     };