Merge pull request #76 from netceteragroup/feat/add-row

feat(grid): add action for adding new row in the grid

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

@@ -24,3 +24,5 @@
 <button (click)="initializeWithColumnResizing()">Column Resizing</button>
 <br/>
 <button (click)="onDeleteRow(rowIndex.value)">Delete Row</button>
+<br/>
+<button (click)="onAddRow(rowIndex.value)">Add Row</button>

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

@@ -10,7 +10,7 @@ import { getGridState } from './reducers';
 import { BadgesColumnComponent } from './components/badge/badges-column.component';
 import { DateFilterComponent } from './components/date-filter.component';
 import { ExperienceFilterComponent } from './components/experience-filter.component';
-import { resetGridState } from '../../../data-grid/src/lib/actions/data-grid-actions';
+import { addRow, resetGridState } from '../../../data-grid/src/lib/actions/data-grid-actions';
 import { take } from 'rxjs/operators';
 
 const dateFormat = 'MM-dd-yyyy';
@@ -311,4 +311,20 @@ export class AppComponent implements OnInit {
       }));
     }
   }
+
+  onAddRow(rowIndex: string) {
+    const index = Number(rowIndex);
+    if (!Number.isNaN(index)) {
+      this.store.dispatch(addRow({
+        name: this.gridName,
+        index: index,
+        row: {
+          userId: `New-Row-Id-${index}`,
+          skills: [],
+          experience: [],
+          fromDate: Date.now()
+        }
+      }));
+    }
+  }
 }

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

@@ -1,5 +1,6 @@
 import { createAction, props } from '@ngrx/store';
 import {
+  AddRowPayload,
   BaseGridPayload,
   ChangePageNumberPayload,
   ChangePageSizePayload,
@@ -34,7 +35,8 @@ export enum GridActionTypes {
   ToggleDetailGrid = 'ngrx-data-grid/ToggleDetailGrid',
   ReorderColumn = 'ngrx-data-grid/ReorderColumn',
   ResizeColumn = 'ngrx-data-grid/ResizeColumn',
-  DeleteRow = 'ngrx-data-grid/DeleteRow'
+  DeleteRow = 'ngrx-data-grid/DeleteRow',
+  AddRow = 'ngrx-data-grid/AddRow'
 }
 
 export const initGrid = createAction(
@@ -120,3 +122,8 @@ export const deleteRow = createAction(
   GridActionTypes.DeleteRow,
   props<DeleteRowByIndexPayload | DeleteRowWherePayload<any>>()
 );
+
+export const addRow = createAction(
+  GridActionTypes.AddRow,
+  props<AddRowPayload<any>>()
+);

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

@@ -74,3 +74,8 @@ export interface DeleteRowByIndexPayload extends BaseGridPayload {
 export interface DeleteRowWherePayload<T> extends BaseGridPayload {
   where: (dataItem: T) => boolean;
 }
+
+export interface AddRowPayload<T> extends BaseGridPayload {
+  row: T;
+  index?: number;
+}

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

@@ -1,5 +1,6 @@
 import * as R from 'ramda';
 import {
+  addRow,
   changePageNumber,
   changePageSize,
   deleteRow,
@@ -564,4 +565,44 @@ describe('Data Grid reducer', () => {
     expect(result.length).toEqual(7);
   });
 
+  it('should add new row at the given position', () => {
+    // given
+    const action = addRow({name: 'grid-1', index: 1, row: {id: 50, name: 'new', value: 100}});
+
+    // when
+    const resultState = gridReducer(state, action);
+
+    // then
+    const result = R.path(['grid-1'])(resultState);
+    expect(result.data.length).toEqual(8);
+    expect(result.data[1].id).toEqual(50);
+  });
+
+  it('should add new row at the end', () => {
+    // given
+    const action = addRow({name: 'grid-1', row: {id: 45}});
+
+    // when
+    const resultState = gridReducer(state, action);
+
+    // then
+    const result = R.path(['grid-1'])(resultState);
+    expect(result.data.length).toEqual(8);
+    expect(result.data[7].id).toEqual(45);
+    expect(result.rowDataIndexes[7]).toEqual(7);
+  });
+
+  it('should add the new row at the end if the new row index is bigger than the length of the data in the grid', () => {
+    // given
+    const action = addRow({name: 'grid-1', index: 9, row: {id: 45}});
+
+    // when
+    const resultState = gridReducer(state, action);
+
+    // then
+    const result = R.path(['grid-1'])(resultState);
+    expect(result.data.length).toEqual(8);
+    expect(result.data[7].id).toEqual(45);
+  });
+
 });

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

@@ -6,6 +6,7 @@ import { calculateNumberOfPages, getPagedData } from './pagination-util';
 import { applySorting } from './sorting-util';
 import { hasNoValue, hasValue, isNotEqual, isTrue } from '../util/type';
 import {
+  AddRowPayload,
   DeleteRowByIndexPayload,
   DeleteRowWherePayload,
   FilterGridPayload,
@@ -257,17 +258,34 @@ const resolveDataItemIndex = (state: GridState, action: DeleteRowByIndexPayload
   return -1;
 };
 
+const validIndex = (state: GridState, index: number): boolean =>
+  hasValue(index) && index > -1 && index < state.rowDataIndexes.length;
+
 const deleteRow = (state: GridState, action: DeleteRowByIndexPayload | DeleteRowWherePayload<any>): GridState => {
   const dataItemIndex = resolveDataItemIndex(state, action);
-  if (dataItemIndex > -1 && dataItemIndex < state.data.length) {
-      return R.evolve({
-        rowDataIndexes: R.remove(dataItemIndex, 1),
-        data: R.remove(state.rowDataIndexes[dataItemIndex], 1)
-      }, state);
+  if (validIndex(state, dataItemIndex)) {
+    return R.evolve({
+      rowDataIndexes: R.remove(dataItemIndex, 1),
+      data: R.remove(state.rowDataIndexes[dataItemIndex], 1)
+    }, state);
   }
   return state;
 };
 
+const addRow = (state: GridState, action: AddRowPayload<any>): GridState => {
+  if (!hasValue(action.row)) {
+    return state;
+  }
+
+  return validIndex(state, action.index)
+    ? R.evolve({
+      data: R.insert(state.rowDataIndexes[action.index], action.row)
+    }, state)
+    : R.evolve({
+      data: R.append(action.row)
+    }, state);
+};
+
 const recalculateRowIndexesAndPagination = (state: GridState): any => {
   const newRowDataIndexes = calculateRowDataIndexes(state);
   const prevPagination = state.pagination;
@@ -349,7 +367,8 @@ const reducer = createReducer(
   on(GridActions.toggleDetailGrid, toggleDetailGrid),
   on(GridActions.reorderColumn, reorderColumn),
   on(GridActions.resizeColumn, resizeColumn),
-  on(GridActions.deleteRow, deleteRow)
+  on(GridActions.deleteRow, deleteRow),
+  on(GridActions.addRow, addRow)
 );
 
 const rowIndexesAndPaginationReducer = createReducer(initialGridState, on(
@@ -359,6 +378,7 @@ const rowIndexesAndPaginationReducer = createReducer(initialGridState, on(
   GridActions.changePageSize,
   GridActions.changePageNumber,
   GridActions.deleteRow,
+  GridActions.addRow,
   recalculateRowIndexesAndPagination
 ));