Merge pull request #123 from netceteragroup/feat/update-selected-rows…

…-on-filter-apply

(feat:grid) update selected rows when filters are applied

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

@@ -26,7 +26,7 @@ export enum GridActionTypes {
   ChangePageSize = 'ngrx-data-grid/ChangePageSize',
   ChangePageNumber = 'ngrx-data-grid/ChangePageNumber',
   ToggleRowSelection = 'ngrx-data-grid/ToggleRowSelection',
-  ToggleAllRowsOnCurentPageSelection = 'ngrx-data-grid/ToggleAllRowsOnCurrentPageSelection',
+  ToggleAllRowsOnCurrentPageSelection = 'ngrx-data-grid/ToggleAllRowsOnCurrentPageSelection',
   ToggleColumnVisibility = 'ngrx-data-grid/ToggleColumnVisibility',
   UpdateGridData = 'ngrx-data-grid/UpdateGridData',
   ResetGridState = 'ngrx-data-grid/ResetGridState',
@@ -73,7 +73,7 @@ export const toggleRowSelection = createAction(
 );
 
 export const toggleAllRowsOnCurrentPageSelection = createAction(
-  GridActionTypes.ToggleAllRowsOnCurentPageSelection,
+  GridActionTypes.ToggleAllRowsOnCurrentPageSelection,
   props<ToggleAllRowsOnCurrentPageSelectionPayload>()
 );
 

projects/data-grid/src/lib/components/grid-header/dynamic-grid-header-item.component.spec.ts

@@ -68,4 +68,16 @@ describe('DynamicGridHeaderItemComponent', () => {
     expect(component.filterExpanded).toEqual(false);
   });
 
+  it('should return filter visible = true when filter is available and expanded', () => {
+    // given
+    component.filterExpanded = true;
+    const condition: any = {option: FilteringOptions.Contains, value: 'test'};
+
+    // when
+    component.onApplyFilter(condition);
+
+    // then
+    expect(component.isFilterVisible()).toEqual(true);
+  });
+
 });

projects/data-grid/src/lib/components/grid-header/grid-header.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { GridHeaderComponent } from './grid-header.component';
+import { GridConfigBuilder } from "../../config";
 
 describe('GridHeaderComponent', () => {
   let component: GridHeaderComponent;
@@ -22,4 +23,17 @@ describe('GridHeaderComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should set drag disabled to true', () => {
+    component.config = GridConfigBuilder.gridConfig()
+      .withColumnReorder(false);
+
+    expect(component.dragDisabled).toEqual(true);
+  });
+
+  it('should set drag disabled to false', () => {
+    component.config = GridConfigBuilder.gridConfig()
+      .withColumnReorder(true);
+
+    expect(component.dragDisabled).toEqual(false);
+  });
 });

projects/data-grid/src/lib/store/data-grid-update-selected-rows.spec.ts

@@ -0,0 +1,111 @@
+import {
+  addRow,
+  changePageNumber, changePageSize,
+  initGrid, selectAllPages,
+  selectCurrentPage,
+  toggleAllRowsOnCurrentPageSelection, toggleRowSelection, updateFilters
+} from "../actions/data-grid-actions";
+import {gridReducer, initialState} from "./data-grid";
+import {columns, data} from "./data-grid.spec";
+import {FilteringOptions} from "../models";
+import {SelectionType} from "../config";
+import * as R from 'ramda';
+
+describe('Data grid recalculate selected rows indexes', () => {
+  let state: any;
+
+  beforeEach(() => {
+    const action = initGrid({name: 'grid-1', data, columns, paginationPageSize: 5});
+    state = gridReducer(initialState, action);
+  });
+
+  it('should recalculate selected rows indexes when filter is cleared and all rows from current page are selected', () => {
+    // given
+    const columnId = 'name-1';
+    const updateFilterAction = updateFilters({name: 'grid-1', columnId, option: FilteringOptions.Contains, value: 'test 1'});
+    const selectCurrentPage = toggleAllRowsOnCurrentPageSelection({name: 'grid-1', selectionStatus: true});
+    let currentState = gridReducer(state, updateFilterAction);
+    currentState = gridReducer(currentState, selectCurrentPage);
+    currentState = gridReducer(currentState, changePageNumber({name: 'grid-1', pageNumber: 0}));
+
+    // when
+    const resultState = gridReducer(currentState, updateFilters({name: 'grid-1', columnId, option:FilteringOptions.None, value:null}));
+
+    // then
+    const result = R.prop('grid-1')(resultState);
+    expect(result.selectedRowsIndexes).toEqual([0, 1, 2 ,3, 4]);
+    expect(result.currentPageSelected).toEqual(true);
+    expect(result.allSelected).toEqual(true);
+  });
+
+
+  it('should recalculate selected rows indexes when filter is applied and all pages are selected', () => {
+    // given
+    const currentState = gridReducer(state, selectAllPages({name: 'grid-1'}));
+    const columnId = 'name-1';
+    const updateFilterAction = updateFilters({name: 'grid-1', columnId, option: FilteringOptions.Contains, value: 'test 1'});
+
+    // when
+    const resultState = gridReducer(currentState, updateFilterAction);
+
+    // then
+    const result = R.prop('grid-1')(resultState);
+    expect(result.selectedRowsIndexes).toEqual([1, 2, 5, 6])
+    expect(result.currentPageSelected).toEqual(false);
+    expect(result.allPagesSelected).toEqual(true);
+  });
+
+  it('should recalculate selected rows indexes when update filter is applied and all rows from current page are selected', () => {
+    // given
+    const initAction = toggleAllRowsOnCurrentPageSelection({name: 'grid-1', selectionStatus: true});
+    const currentState = gridReducer(state, initAction);
+    const columnId = 'name-1';
+    const updateFilterAction = updateFilters({name: 'grid-1', columnId, option: FilteringOptions.Contains, value: 'test 1'});
+
+    // when
+    const resultState = gridReducer(currentState, updateFilterAction);
+
+    // then
+    const result = R.prop('grid-1')(resultState);
+    expect(result.selectedRowsIndexes).toEqual([1, 2, 5, 6])
+    expect(result.currentPageSelected).toEqual(true);
+    expect(result.allSelected).toEqual(true);
+  });
+
+  it(`should recalculate selected rows indexes when current page is selected,
+   filter is applied and selection is made from second page`, () => {
+    // given
+    const initAction = toggleAllRowsOnCurrentPageSelection({name: 'grid-1', selectionStatus: true});
+    let currentState = gridReducer(state, initAction);
+    const columnId = 'name-1';
+    const updateFilterAction = updateFilters({name: 'grid-1', columnId, option: FilteringOptions.Contains, value: 'test'});
+    currentState = gridReducer(currentState, updateFilterAction);
+    const changePageNumberAction = changePageNumber({name: 'grid-1', pageNumber: 1})
+    currentState = gridReducer(currentState, changePageNumberAction);
+    const selectRow = toggleRowSelection({name: 'grid-1', dataItem: data[5], selectionType: SelectionType.Checkbox})
+
+    // when
+    const resultState = gridReducer(currentState, selectRow);
+
+    // then
+    const result = R.prop('grid-1')(resultState);
+    expect(result.selectedRowsIndexes).toEqual([0, 1, 2, 3, 4, 5]);
+    expect(result.currentPageSelected).toEqual(false);
+    expect(result.allSelected).toEqual(false);
+  });
+
+  it('should select newly added row when all rows from current page are selected', () => {
+    //given
+    let changePageSizeAction = changePageSize({name: 'grid-1', pageSize: 8});
+    let currentState = gridReducer(state, changePageSizeAction);
+    currentState = gridReducer(currentState, selectCurrentPage({name: 'grid-1'}));
+    let addRowAction = addRow( {name: 'grid-1', row: {id: 8, name: 'test 15', value: 40}, index: 7});
+
+    //when
+    const resultState = gridReducer(currentState, addRowAction);
+
+    //then
+    const result = R.prop('grid-1')(resultState);
+    expect(result.selectedRowsIndexes).toEqual([0, 1, 2, 3, 4, 5, 6, 7]);
+  });
+})

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

@@ -22,29 +22,31 @@ import { gridReducer, initialGridState, initialState } from './data-grid';
 import { assignIdsToColumns, COLUMN_ID, columnFilterDefined, columnSortType, filterApplied, FilteringOptions, FilterType, SortType } from '../models';
 import { SelectionType } from '../config';
 import { getAppliedFilters } from './filters-util';
+import {createAction, props} from "@ngrx/store";
+import {ChangePageSizePayload} from "../actions/data-grid-payload";
 
 const findByProp = (props) => R.path(props);
 const getColumn: any = (id) => R.compose(R.find(R.propEq(id, COLUMN_ID)), findByProp(['columns']));
 
-describe('Data Grid reducer', () => {
+export const data = [
+  {id: 1, name: 'test', value: 20, nested: {name: 'test 0', value: 0}},
+  {id: 2, name: 'test 12', value: 40, nested: {name: 'test 12.1', value: 20}},
+  {id: 3, name: 'test 1', value: 10, nested: {name: 'test 1.1', value: 5}},
+  {id: 4, name: 'test 4', value: 20, nested: {name: 'test 4.1', value: 10}},
+  {id: 5, name: 'test 2', value: 50, nested: {name: 'test 2.1', value: 25}},
+  {id: 6, name: 'test 11', value: 60, nested: { value: 30}},
+  {id: 7, name: 'test 14', value: 40}
+];
+
+export const columns = [
+  {field: 'id', headerName: 'id', visible: true, sortAvailable: true, filterAvailable: true},
+  {field: 'name', headerName: 'name', visible: true, sortAvailable: true, filterAvailable: true, filter: {filterType: FilterType.Text}, width: 200},
+  {field: 'value', headerName: 'value', visible: true, sortAvailable: true, filterAvailable: true},
+  {field: ['nested', 'name'], headerName: 'nested property name', visible: true, sortAvailable: true, filterAvailable: true,
+    filter: {filterType: FilterType.Text}, width: 60}
+];
 
-  const data = [
-    {id: 1, name: 'test', value: 20, nested: {name: 'test 0', value: 0}},
-    {id: 2, name: 'test 12', value: 40, nested: {name: 'test 12.1', value: 20}},
-    {id: 3, name: 'test 1', value: 10, nested: {name: 'test 1.1', value: 5}},
-    {id: 4, name: 'test 4', value: 20, nested: {name: 'test 4.1', value: 10}},
-    {id: 5, name: 'test 2', value: 50, nested: {name: 'test 2.1', value: 25}},
-    {id: 6, name: 'test 11', value: 60, nested: { value: 30}},
-    {id: 7, name: 'test 14', value: 40}
-  ];
-
-  const columns = [
-    {field: 'id', headerName: 'id', visible: true, sortAvailable: true, filterAvailable: true},
-    {field: 'name', headerName: 'name', visible: true, sortAvailable: true, filterAvailable: true, filter: {filterType: FilterType.Text}, width: 200},
-    {field: 'value', headerName: 'value', visible: true, sortAvailable: true, filterAvailable: true},
-    {field: ['nested', 'name'], headerName: 'nested property name', visible: true, sortAvailable: true, filterAvailable: true,
-      filter: {filterType: FilterType.Text}, width: 60}
-  ];
+describe('Data Grid reducer', () => {
 
   let state: any;
 
@@ -646,4 +648,36 @@ describe('Data Grid reducer', () => {
     expect(result.data[7].id).toEqual(45);
   });
 
+  it('should return previous state if empty row was added', () => {
+    //given
+    let initAction = changePageSize({name: 'grid-1', pageSize: 10});
+    let currentState = gridReducer(state, initAction);
+    let selectCurrentPageAction = selectCurrentPage({name: 'grid-1'});
+    let previousState = gridReducer(currentState, selectCurrentPageAction);
+    let addRowAction = addRow( {name: 'grid-1', row: {}, index: 7});
+
+    //when
+    const resultState = gridReducer(previousState, addRowAction);
+
+    //then
+    const result = R.prop('grid-1')(resultState);
+    expect(resultState).toEqual(previousState);
+    expect(result.selectedRowsIndexes).toEqual([0, 1, 2, 3, 4, 5, 6]);
+  });
+
+  it('should return previous state if invalid action was provided', () => {
+    // given
+    const changePageSizeAction = createAction(
+      'invalidAction',
+      props<ChangePageSizePayload>()
+    );
+    const initAction = changePageSizeAction({name: 'grid-1', pageSize: 10});
+    const previousState = state;
+
+    // when
+    const resultState = gridReducer(previousState, initAction);
+
+    // then
+    expect(resultState).toEqual(previousState);
+  });
 });