feat(grid): update grid data functionality

projects/data-grid-demo/src/app/app.component.html

@@ -2,3 +2,6 @@
   [gridName]="gridName"
   [config]="config">
 </ngrx-data-grid>
+<label for="updateMail">New mail:</label>
+<input id="updateMail" type="text" #updatedMail/>
+<button (click)="onUpdateMailOfFirstElement(updatedMail.value)">Update mail of first element</button>

projects/data-grid-demo/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { DataGridColumn, FilterType, GridConfig, GridConfigBuilder, hasData, initGrid } from 'ngrx-data-grid';
+import { DataGridColumn, FilterType, GridConfig, GridConfigBuilder, hasData, initGrid, updateGridData } from 'ngrx-data-grid';
 import * as R from 'ramda';
 import { NumberComponent } from './components/number.component';
 import { MockService } from './mock/mock.service';
@@ -146,4 +146,15 @@ export class AppComponent implements OnInit {
     }];
   }
 
+  onUpdateMailOfFirstElement(newMailValue) {
+    const firstElementId = 'd66f8066-547f-41ff-b9b8-ae3a0e10705d';
+    this.store.dispatch(updateGridData({
+      name: 'gridTest',
+      shouldUpdate: (gridElement) => gridElement.userId === firstElementId,
+      update: (gridElement) => R.mergeRight(gridElement, {
+        mail: newMailValue
+      })
+    }));
+  }
+
 }

projects/data-grid/src/lib/actions/data-grid-actions.ts

@@ -1,4 +1,4 @@
-import {createAction, props} from '@ngrx/store';
+import { createAction, props } from '@ngrx/store';
 import {
   ChangePageNumberPayload,
   ChangePageSizePayload,
@@ -7,7 +7,8 @@ import {
   SortGridPayload,
   ToggleAllRowsSelectionPayload,
   ToggleColumnVisibilityPayload,
-  ToggleRowSelectionPayload
+  ToggleRowSelectionPayload,
+  UpdateGridDataPayload
 } from './data-grid-payload';
 
 export enum GridActionTypes {
@@ -18,7 +19,8 @@ export enum GridActionTypes {
   ChangePageNumber = 'ngrx-data-grid/ChangePageNumber',
   ToggleRowSelection = 'ngrx-data-grid/ToggleRowSelection',
   ToggleAllRowsSelection = 'ngrx-data-grid/ToggleAllRowsSelection',
-  ToggleColumnVisibility = 'ngrx-data-grid/ToggleColumnVisibility'
+  ToggleColumnVisibility = 'ngrx-data-grid/ToggleColumnVisibility',
+  UpdateGridData = 'ngrx-data-grid/UpdateGridData'
 }
 
 export const initGrid = createAction(
@@ -62,3 +64,7 @@ export const toggleColumnVisibility = createAction(
   props<ToggleColumnVisibilityPayload>()
 );
 
+export const updateGridData = createAction(
+  GridActionTypes.UpdateGridData,
+  props<UpdateGridDataPayload>()
+);

projects/data-grid/src/lib/actions/data-grid-payload.ts

@@ -39,3 +39,11 @@ export interface ToggleAllRowsSelectionPayload extends BaseGridPayload {
 export interface ToggleColumnVisibilityPayload extends BaseGridPayload {
   columnId: string;
 }
+
+type ShouldUpdateGridElement = <T extends object = object>(T) => boolean;
+type UpdateGridElement = <T extends object = object>(T) => T;
+
+export interface UpdateGridDataPayload extends BaseGridPayload {
+  shouldUpdate: ShouldUpdateGridElement;
+  update: UpdateGridElement;
+}

projects/data-grid/src/lib/store/data-grid.spec.ts

@@ -1,14 +1,17 @@
 import * as R from 'ramda';
-import { changePageNumber, changePageSize, initGrid, toggleAllRowsSelection, toggleColumnVisibility, toggleRowSelection, updateFilters, updateSort } from '../actions/data-grid-actions';
-import { gridReducer, initialState } from './data-grid';
 import {
-  assignIdsToColumns,
-  columnFilterDefined,
-  columnSortType,
-  filterApplied,
-  FilteringOptions,
-  SortType
-} from '../models';
+  changePageNumber,
+  changePageSize,
+  initGrid,
+  toggleAllRowsSelection,
+  toggleColumnVisibility,
+  toggleRowSelection,
+  updateFilters,
+  updateGridData,
+  updateSort
+} from '../actions/data-grid-actions';
+import { gridReducer, initialState } from './data-grid';
+import { assignIdsToColumns, columnFilterDefined, columnSortType, filterApplied, FilteringOptions, SortType } from '../models';
 
 const findByProp = (props) => R.path(props);
 const getColumn: any = (id) => R.compose(R.find(R.propEq('columnId', id)), findByProp(['columns']));
@@ -230,4 +233,30 @@ describe('Data Grid reducer', () => {
     expect(column).toBeDefined();
     expect(findByProp(['visible'])(column)).toBeTruthy();
   });
+
+  it('should update one element of the grid data', () => {
+    const shouldUpdateFn = R.curry((gridId, gridElement) => gridElement.id === gridId);
+    const updateFn = (gridElement) => ({...gridElement, name: 'updated test'});
+    const action = updateGridData({name: 'grid-1', shouldUpdate: shouldUpdateFn(1), update: updateFn});
+    const expectedData = R.update(0, {id: 1, name: 'updated test', value: 20}, data);
+
+    const result = R.prop('grid-1')(gridReducer(state, action));
+
+    expect(result.data).toEqual(expectedData);
+  });
+
+  it('should update more elements of the grid data', () => {
+    const shouldUpdateFn = R.curry((gridId, gridElement) => gridElement.id === gridId || gridElement.id === gridId + 1);
+    const updateFn = (gridElement) => ({...gridElement, name: 'updated test'});
+    const action = updateGridData({name: 'grid-1', shouldUpdate: shouldUpdateFn(1), update: updateFn});
+    const expectedData = R.compose(
+      R.update(0, {id: 1, name: 'updated test', value: 20}),
+      R.update(1, {id: 2, name: 'updated test', value: 40})
+    )(data);
+
+    const result = R.prop('grid-1')(gridReducer(state, action));
+
+    expect(result.data).toEqual(expectedData);
+  });
+
 });

projects/data-grid/src/lib/store/data-grid.ts

@@ -6,7 +6,7 @@ import { calculateNumberOfPages } from './pagination-util';
 import { applySorting } from './sorting-util';
 import { hasValue, isNotEqual, isTrue, mapIndexed } from '../util/type';
 import { applyFilters } from './filters-util';
-import { FilterGridPayload, InitGridPayload, SortGridPayload } from '../actions/data-grid-payload';
+import { FilterGridPayload, InitGridPayload, SortGridPayload, UpdateGridDataPayload } from '../actions/data-grid-payload';
 import {
   assignIdsToColumns,
   columnFilter,
@@ -184,6 +184,12 @@ const recalculateRowIndexesAndPagination = (state: GridState): any => {
   });
 };
 
+const updateGridData = (state: GridState, {shouldUpdate, update}: UpdateGridDataPayload): GridState =>
+  R.evolve({
+    data: R.map(R.ifElse(shouldUpdate, update, R.identity))
+  }, state);
+
+
 // create reducer
 const reducer = createReducer(
   initialGridState,
@@ -194,7 +200,8 @@ const reducer = createReducer(
   on(GridActions.changePageNumber, changePageNumberHandler),
   on(GridActions.toggleRowSelection, toggleRowSelectionHandler),
   on(GridActions.toggleAllRowsSelection, toggleAllRowsSelectionHandler),
-  on(GridActions.toggleColumnVisibility, toggleColumnVisibilityHandler)
+  on(GridActions.toggleColumnVisibility, toggleColumnVisibilityHandler),
+  on(GridActions.updateGridData, updateGridData)
 );
 
 const rowIndexesAndPaginationReducer = createReducer(initialGridState, on(
@@ -208,7 +215,7 @@ const rowIndexesAndPaginationReducer = createReducer(initialGridState, on(
 
 const isNgRxGridAction = R.startsWith('ngrx-data-grid');
 
-export function gridReducer (state = initialState, action) {
+export function gridReducer(state = initialState, action) {
   if (!isNgRxGridAction(action.type)) {
     return state;
   }