@ngrx-traits/common 14.0.1 → 14.1.0

package/fesm2020/ngrx-traits-common.mjs

@@ -2,10 +2,11 @@ import { createReducer, on, createAction, props, createSelector } from '@ngrx/st
 import { insertIf, createTraitFactory, TraitEffect, toMap, camelCaseToSentence, capitalize } from '@ngrx-traits/core';
 import { createEntityAdapter } from '@ngrx/entity';
 import * as i0 from '@angular/core';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { EMPTY, timer, of, pipe, asyncScheduler } from 'rxjs';
-import { debounce, concatMap, first, map, distinctUntilChanged, startWith, pairwise, concatMapTo, tap, filter } from 'rxjs/operators';
+import { debounce, concatMap, first, map, distinctUntilChanged, startWith, pairwise, concatMapTo, filter, mapTo, tap, delay } from 'rxjs/operators';
 import { createEffect, ofType, concatLatestFrom } from '@ngrx/effects';
+import { ActivatedRoute, Router } from '@angular/router';
 
 const loadEntitiesTraitKey = 'loadEntities';
 
@@ -274,6 +275,7 @@ function createFilterTraitActions(actionsGroupKey, entitiesName) {
  * extends LoadEntitiesState<Todo>, FilterEntitiesState<TodoFilter>{}
  *
  *    const traits = createEntityFeatureFactory(
+ *      {entityName: 'Todo'},
  *      addLoadEntitiesTrait<Todo>(),
  *      //addFilterEntitiesTrait<Todo,TodoFilter>() // no params uses remote filtering
  *      addFilterEntitiesTrait<Todo,TodoFilter>({filterFn: (filter, entity) => // local filtering
@@ -475,15 +477,7 @@ function createPaginationTraitReducer(initialState, allActions, allSelectors, al
         };
     }
     const filterRemote = !allConfigs?.filter?.filterFn;
-    return createReducer(initialState, on(allActions.loadEntitiesPage, (state, { index }) => ({
-        ...state,
-        pagination: {
-            ...state.pagination,
-            currentPage: index,
-            requestPage: index,
-        },
-        status: 'loading',
-    })), on(allActions.setEntitiesRequestPage, (state, { index }) => ({
+    return createReducer(initialState, on(allActions.loadEntitiesPage, (state, { index }) => allMutators.setEntitiesPage(state, index)), on(allActions.setEntitiesRequestPage, (state, { index }) => ({
         ...state,
         pagination: {
             ...state.pagination,
@@ -515,12 +509,12 @@ function createPaginationTraitEffects(allActions, allSelectors) {
             this.preloadNextPage$ = createEffect(() => {
                 return this.actions$.pipe(ofType(allActions.loadEntitiesPageSuccess), concatMapTo(this.store
                     .select(allSelectors.selectEntitiesCurrentPageInfo)
-                    .pipe(first())), tap(console.log), filter((pageInfo) => !!pageInfo.total &&
+                    .pipe(first())), filter((pageInfo) => !!pageInfo.total &&
                     pageInfo.hasNext &&
                     pageInfo.cacheType !== 'full'), concatMap((pageInfo) => this.store
                     .select(allSelectors
                     .isEntitiesNextPageInCache)
-                    .pipe(first(), map((isInCache) => (!isInCache && pageInfo) || undefined))), tap(console.log), filter((pageInfo) => !!pageInfo), concatMap((pageInfo) => [
+                    .pipe(first(), map((isInCache) => (!isInCache && pageInfo) || undefined))), filter((pageInfo) => !!pageInfo), concatMap((pageInfo) => [
                     allActions.setEntitiesRequestPage({ index: pageInfo.pageIndex + 1 }),
                     allActions.loadEntities(),
                 ]));
@@ -611,11 +605,22 @@ function createPaginationTraitMutators(allSelectors, allConfigs) {
         }
         return state;
     }
-    return { mergePaginatedEntities };
+    function setEntitiesPage(state, index) {
+        return {
+            ...state,
+            pagination: {
+                ...state.pagination,
+                currentPage: index,
+                requestPage: index,
+            },
+            status: 'loading',
+        };
+    }
+    return { mergePaginatedEntities, setEntitiesPage };
 }
 
 /**
- * Generates ngrx code to paginate an list of entities, this has 3 cache `cacheType`
+ * Generates ngrx code to paginate a list of entities, this has 3 cache `cacheType`
  * - 'full': The full result is cache in memory and split in pages to render, useful
  * for small result but not so small that requires been render in pages
  * - 'partial': Backend returns partial results because is are to big, this has a cache a few pages forward
@@ -636,9 +641,10 @@ function createPaginationTraitMutators(allSelectors, allConfigs) {
  * // The following trait config
  *
  * export interface TestState
- * extends EntityAndStatusState<Todo>,SingleSelectionState{}
+ * extends EntityAndStatusState<Todo>,EntitiesPaginationState{}
  *
  *    const traits = createEntityFeatureFactory(
+ *      {entityName: 'Todo'},
  *      addLoadEntitiesTrait<Todo>(),
  *      addEntitiesPaginationTrait<Todo>()
  *    )({
@@ -840,6 +846,7 @@ function createSelectEntitiesTraitMutators({ isAllEntitiesSelected, }) {
  * extends EntityAndStatusState<Todo>,MultipleSelectionState{}
  *
  *    const traits = createEntityFeatureFactory(
+ *      {entityName: 'Todo'},
  *      addLoadEntitiesTrait<Todo>(),
  *      addSelectEntitiesTrait<Todo>()
  *    )({
@@ -970,6 +977,7 @@ function createSelectEntityTraitMutators() {
  * extends EntityAndStatusState<Todo>,SelectEntityState{}
  *
  *    const traits = createEntityFeatureFactory(
+ *      {entityName: 'Todo'},
  *      addLoadEntitiesTrait<Todo>(),
  *      addSelectEntityTrait<Todo>()
  *    )({
@@ -1233,6 +1241,7 @@ function createCrudTraitMutators(allConfigs) {
  * extends EntityAndStatusState<Todo>, CrudState<Todo>{}
  *
  *    const traits = createEntityFeatureFactory(
+ *      {entityName: 'Todo'},
  *      addLoadEntitiesTrait<Todo>(),
  *      addCrudEntitiesTrait<Todo>()
  *    )({
@@ -1335,7 +1344,14 @@ function sortData(data, sort) {
 }
 
 function createSortTraitMutators({ selectEntitiesList }, allConfigs) {
+    const { remote } = allConfigs.sort;
     function sortEntities({ active, direction }, state) {
+        if (remote) {
+            return {
+                ...state,
+                sort: { ...state.sort, current: { active, direction } },
+            };
+        }
         const { adapter } = allConfigs.loadEntities;
         const entities = selectEntitiesList(state);
         const sortedIds = sortData(entities, { active, direction }).map((v) => adapter.selectId(v));
@@ -1361,20 +1377,7 @@ function createSortInitialState(previousInitialState, allConfigs) {
     };
 }
 function createSortTraitReducer(initialState, allActions, allMutators, allConfigs) {
-    const { remote } = allConfigs.sort;
-    return createReducer(initialState, on(allActions.sortEntities, (state, { active, direction }) => !remote
-        ? allMutators.sortEntities({ active, direction }, state)
-        : {
-            ...state,
-            sort: { ...state.sort, current: { active, direction } },
-        }), on(allActions.resetEntitiesSort, (state) => state.sort?.default
-        ? !remote
-            ? allMutators.sortEntities(state.sort?.default, state)
-            : {
-                ...state,
-                sort: { ...state.sort, current: state.sort?.default },
-            }
-        : state));
+    return createReducer(initialState, on(allActions.sortEntities, (state, { active, direction }) => allMutators.sortEntities({ active, direction }, state)), on(allActions.resetEntitiesSort, (state) => allMutators.sortEntities(state.sort?.default, state)));
 }
 
 function createSortTraitSelectors() {
@@ -1431,8 +1434,10 @@ function createSortTraitActions(actionsGroupKey, entitiesName) {
  * extends EntityAndStatusState<Todo>, SortState<Todo>{}
  *
  *    const traits = createEntityFeatureFactory(
+ *      {entityName: 'Todo'},
  *      addLoadEntitiesTrait<Todo>(),
  *      addSortEntitiesTrait<Todo>({
+ *        remote: true,
  *        defaultSort: {active:'id', direction:'asc'}
  *      })
  *    )({
@@ -1476,10 +1481,8 @@ function addSortEntitiesTrait({ remote, defaultSort, }) {
  * @example
  * // The following trait config
  *
- * export interface TestState
- * extends EntityAndStatusState<Todo>,FilterState<TodoFilter>{}
- *
  *    const traits = createEntityFeatureFactory(
+ *      {entityName: 'Todo'},
  *      addLoadEntitiesTrait<Todo>(),
  *      addResetEntitiesStateTrait()
  *    )({
@@ -1521,10 +1524,14 @@ function addResetEntitiesStateTrait(traitConfig = {}) {
  * @returns the trait factory
  *
  * @example
+ *
+ * export interface TestState
+ * extends AsyncActionState<'createClient'>{}
+ *
  * // The following trait config
  * const traits = createEntityFeatureFactory(
- * {entityName: 'Todo'},
- * addAsyncActionTrait({
+ *      {entityName: 'Todo'},
+ *      addAsyncActionTrait({
  *        name: 'createClient',
  *        actionProps: props<{ name: string }>(),
  *        actionSuccessProps: props<{ id: string }>(),
@@ -1625,6 +1632,10 @@ function addAsyncActionTrait({ name, actionProps, actionSuccessProps, actionFail
  * @returns the trait factory
  *
  * @example
+ *
+ * export interface TestState
+ * extends LoadEntityState<Client,'client'>{}
+ *
  * const traits = createEntityFeatureFactory(
  * ...addLoadEntityTraits({
  *        entityName: 'client',
@@ -1691,6 +1702,10 @@ function addLoadEntityTraits({ entityName, actionProps, actionSuccessProps, acti
  * @returns the trait factory
  *
  * @example
+ *
+ * export interface TestState
+ * extends SetEntityState<Client,'client'>{}
+ *
  * const traits = createEntityFeatureFactory(
  * addSetEntityTraits({
  *        entityName: 'client',
@@ -1739,9 +1754,125 @@ function addSetEntityTrait({ entityName, actionProps, }) {
     });
 }
 
+/**
+ * Generates ngrx code necessary to load and set to the current route query params for the filter, sort and paging traits
+ *
+ * @example
+ *
+ *    const traits = createEntityFeatureFactory(
+ *      {entityName: 'Todo'},
+ *      addLoadEntitiesTrait<Todo>(),
+ *      addFilterEntitiesTrait(),
+ *      addSortEntitiesTrait<Todo>({
+ *        remote: true,
+ *        defaultSort: {active:'id', direction:'asc'}
+ *      })
+ *      addEntitiesPaginationTrait<Todo>(),
+ *      addEntitiesSyncToRouteQueryParams()
+ *    )({
+ *      actionsGroupKey: '[Todos]',
+ *      featureSelector: createFeatureSelector<TestState>>(
+ *        'todos',
+ *      ),
+ *    });
+ *
+ *
+ * // generated actions
+ * traits.actions.loadTodosUsingRouteQueryParams()
+ */
+function addEntitiesSyncToRouteQueryParams() {
+    let setEntitiesRouteQueryParams;
+    return createTraitFactory({
+        key: 'entitiesSyncToRouteQueryParams',
+        depends: [entitiesPaginationTraitKey, sortTraitKey, filterEntitiesTraitKey],
+        actions({ actionsGroupKey, entitiesName }) {
+            const actions = {
+                loadEntitiesUsingRouteQueryParams: createAction(`${actionsGroupKey} Load ${entitiesName} Using Route Query Params`),
+            };
+            setEntitiesRouteQueryParams = createAction(`${actionsGroupKey} Set ${entitiesName} Route Query Params`, props());
+            return { ...actions, setEntitiesRouteQueryParams };
+        },
+        reducer({ initialState, allMutators: m }) {
+            const allMutators = m;
+            return createReducer(initialState, on(setEntitiesRouteQueryParams, (state, { params: p }) => {
+                const params = { ...p };
+                let newState = state;
+                if (params.page) {
+                    newState = allMutators.setEntitiesPage(newState, +params.page);
+                    delete params.page;
+                }
+                if (params.sortActive) {
+                    newState = allMutators.sortEntities({
+                        active: params.sortActive,
+                        direction: params.sortDirection,
+                    }, newState);
+                    delete params.sortActive;
+                    delete params.sortDirection;
+                }
+                if (Object.keys(params).length) {
+                    newState = allMutators.setEntitiesFilters(params, newState);
+                }
+                return newState;
+            }));
+        },
+        effects({ allActions: a }) {
+            const allActions = a;
+            class SyncEntitiesStateToUrlEffect extends TraitEffect {
+                constructor() {
+                    super(...arguments);
+                    this.activatedRoute = inject(ActivatedRoute);
+                    this.router = inject(Router);
+                    this.loadUrlParams$ = createEffect(() => {
+                        return this.actions$.pipe(ofType(allActions.loadEntitiesUsingRouteQueryParams), concatLatestFrom(() => this.activatedRoute.queryParams), map(([_, params]) => setEntitiesRouteQueryParams({ params })));
+                    });
+                    this.setUrlParams$ = createEffect(() => {
+                        return this.actions$.pipe(ofType(setEntitiesRouteQueryParams), mapTo(allActions.loadEntities()));
+                    });
+                    this.onFilter$ = !!allActions.filterEntities &&
+                        createEffect(() => {
+                            return this.actions$.pipe(ofType(allActions.filterEntities), tap(({ filters }) => {
+                                this.updateUrl(filters);
+                            }));
+                        }, { dispatch: false });
+                    this.onSort$ = !!allActions.sortEntities &&
+                        createEffect(() => {
+                            return this.actions$.pipe(ofType(allActions.sortEntities), delay(0), tap(({ active, direction }) => {
+                                this.updateUrl({
+                                    sortActive: active,
+                                    sortDirection: direction,
+                                });
+                            }));
+                        }, { dispatch: false });
+                    this.onPaginate$ = !!allActions.loadEntitiesPage &&
+                        createEffect(() => {
+                            return this.actions$.pipe(ofType(allActions.loadEntitiesPage), tap(({ index }) => {
+                                this.updateUrl({
+                                    page: index,
+                                });
+                            }));
+                        }, { dispatch: false });
+                }
+                updateUrl(queryParams) {
+                    this.router.navigate([], {
+                        relativeTo: this.activatedRoute,
+                        queryParams,
+                        queryParamsHandling: 'merge', // remove to replace all query params by provided
+                    });
+                }
+            }
+            SyncEntitiesStateToUrlEffect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: SyncEntitiesStateToUrlEffect, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+            SyncEntitiesStateToUrlEffect.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: SyncEntitiesStateToUrlEffect });
+            i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: SyncEntitiesStateToUrlEffect, decorators: [{
+                        type: Injectable
+                    }] });
+            return [SyncEntitiesStateToUrlEffect];
+        },
+    });
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ChangeType, _isNumberValue, addAsyncActionTrait, addCrudEntitiesTrait, addEntitiesPaginationTrait, addFilterEntitiesTrait, addLoadEntitiesTrait, addLoadEntityTraits, addResetEntitiesStateTrait, addSelectEntitiesTrait, addSelectEntityTrait, addSetEntityTrait, addSortEntitiesTrait, clearEntitiesSelection, crudEntitiesTraitKey, deselectEntities, entitiesPaginationTraitKey, filterEntitiesTraitKey, loadEntitiesTraitKey, selectEntities, selectEntityTraitKey, selectTotalSelectedEntities, sortData, sortTraitKey, toggleSelectEntities };
+export { ChangeType, _isNumberValue, addAsyncActionTrait, addCrudEntitiesTrait, addEntitiesPaginationTrait, addEntitiesSyncToRouteQueryParams, addFilterEntitiesTrait, addLoadEntitiesTrait, addLoadEntityTraits, addResetEntitiesStateTrait, addSelectEntitiesTrait, addSelectEntityTrait, addSetEntityTrait, addSortEntitiesTrait, clearEntitiesSelection, crudEntitiesTraitKey, deselectEntities, entitiesPaginationTraitKey, filterEntitiesTraitKey, loadEntitiesTraitKey, selectEntities, selectEntityTraitKey, selectTotalSelectedEntities, sortData, sortTraitKey, toggleSelectEntities };
 //# sourceMappingURL=ngrx-traits-common.mjs.map