New: Import list exclusion pagination and bulk removal

(cherry picked from commit 428569106499b5e3a463f1990ae2996d1ae4ab49)

Persist page size for Import List Exclusions

(cherry picked from commit e81bb3b993adac705fd61dc9e281b040ca2338f5)

Clear pending changes for edit import list exclusions on modal close

(cherry picked from commit 7b87de2e93c2aa499cff224f84253ba944bb58d4)

Fixed actions column width for import list exclusions

(cherry picked from commit d691ad8e12ea4f2bc77f0b551c17d22d91c4ba22)

frontend/src/Store/Actions/Settings/importListExclusions.js

@@ -1,9 +1,13 @@
 import { createAction } from 'redux-actions';
-import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
+import createBulkRemoveItemHandler from 'Store/Actions/Creators/createBulkRemoveItemHandler';
 import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHandler';
 import createSaveProviderHandler from 'Store/Actions/Creators/createSaveProviderHandler';
+import createServerSideCollectionHandlers from 'Store/Actions/Creators/createServerSideCollectionHandlers';
+import createClearReducer from 'Store/Actions/Creators/Reducers/createClearReducer';
 import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
-import { createThunk } from 'Store/thunks';
+import createSetTableOptionReducer from 'Store/Actions/Creators/Reducers/createSetTableOptionReducer';
+import { createThunk, handleThunks } from 'Store/thunks';
+import serverSideCollectionHandlers from 'Utilities/serverSideCollectionHandlers';
 
 //
 // Variables
@@ -14,18 +18,28 @@ const section = 'settings.importListExclusions';
 // Actions Types
 
 export const FETCH_IMPORT_LIST_EXCLUSIONS = 'settings/importListExclusions/fetchImportListExclusions';
+export const GOTO_IMPORT_LIST_EXCLUSION_PAGE = 'settings/importListExclusions/gotoImportListExclusionPage';
+export const SET_IMPORT_LIST_EXCLUSION_SORT = 'settings/importListExclusions/setImportListExclusionSort';
 export const SAVE_IMPORT_LIST_EXCLUSION = 'settings/importListExclusions/saveImportListExclusion';
 export const DELETE_IMPORT_LIST_EXCLUSION = 'settings/importListExclusions/deleteImportListExclusion';
+export const BULK_DELETE_IMPORT_LIST_EXCLUSIONS = 'settings/importListExclusions/bulkDeleteImportListExclusions';
+export const CLEAR_IMPORT_LIST_EXCLUSIONS = 'settings/importListExclusions/clearImportListExclusions';
+
+export const SET_IMPORT_LIST_EXCLUSION_TABLE_OPTION = 'settings/importListExclusions/setImportListExclusionTableOption';
 export const SET_IMPORT_LIST_EXCLUSION_VALUE = 'settings/importListExclusions/setImportListExclusionValue';
 
 //
 // Action Creators
 
 export const fetchImportListExclusions = createThunk(FETCH_IMPORT_LIST_EXCLUSIONS);
-
+export const gotoImportListExclusionPage = createThunk(GOTO_IMPORT_LIST_EXCLUSION_PAGE);
+export const setImportListExclusionSort = createThunk(SET_IMPORT_LIST_EXCLUSION_SORT);
 export const saveImportListExclusion = createThunk(SAVE_IMPORT_LIST_EXCLUSION);
 export const deleteImportListExclusion = createThunk(DELETE_IMPORT_LIST_EXCLUSION);
+export const bulkDeleteImportListExclusions = createThunk(BULK_DELETE_IMPORT_LIST_EXCLUSIONS);
+export const clearImportListExclusions = createAction(CLEAR_IMPORT_LIST_EXCLUSIONS);
 
+export const setImportListExclusionTableOption = createAction(SET_IMPORT_LIST_EXCLUSION_TABLE_OPTION);
 export const setImportListExclusionValue = createAction(SET_IMPORT_LIST_EXCLUSION_VALUE, (payload) => {
   return {
     section,
@@ -45,27 +59,52 @@ export default {
     isFetching: false,
     isPopulated: false,
     error: null,
+    pageSize: 20,
     items: [],
     isSaving: false,
     saveError: null,
+    isDeleting: false,
+    deleteError: null,
     pendingChanges: {}
   },
 
   //
   // Action Handlers
 
-  actionHandlers: {
-    [FETCH_IMPORT_LIST_EXCLUSIONS]: createFetchHandler(section, '/exclusions'),
-
+  actionHandlers: handleThunks({
+    ...createServerSideCollectionHandlers(
+      section,
+      '/exclusions/paged',
+      fetchImportListExclusions,
+      {
+        [serverSideCollectionHandlers.FETCH]: FETCH_IMPORT_LIST_EXCLUSIONS,
+        [serverSideCollectionHandlers.EXACT_PAGE]: GOTO_IMPORT_LIST_EXCLUSION_PAGE,
+        [serverSideCollectionHandlers.SORT]: SET_IMPORT_LIST_EXCLUSION_SORT
+      }
+    ),
     [SAVE_IMPORT_LIST_EXCLUSION]: createSaveProviderHandler(section, '/exclusions'),
-    [DELETE_IMPORT_LIST_EXCLUSION]: createRemoveItemHandler(section, '/exclusions')
-  },
+    [DELETE_IMPORT_LIST_EXCLUSION]: createRemoveItemHandler(section, '/exclusions'),
+    [BULK_DELETE_IMPORT_LIST_EXCLUSIONS]: createBulkRemoveItemHandler(section, '/exclusions/bulk')
+  }),
 
   //
   // Reducers
 
   reducers: {
-    [SET_IMPORT_LIST_EXCLUSION_VALUE]: createSetSettingValueReducer(section)
+    [SET_IMPORT_LIST_EXCLUSION_VALUE]: createSetSettingValueReducer(section),
+    [SET_IMPORT_LIST_EXCLUSION_TABLE_OPTION]: createSetTableOptionReducer(section),
+
+    [CLEAR_IMPORT_LIST_EXCLUSIONS]: createClearReducer(section, {
+      isFetching: false,
+      isPopulated: false,
+      error: null,
+      items: [],
+      isDeleting: false,
+      deleteError: null,
+      pendingChanges: {},
+      totalPages: 0,
+      totalRecords: 0
+    })
   }
 
 };

frontend/src/Store/Actions/settingsActions.js

@@ -94,7 +94,8 @@ export const defaultState = {
 };
 
 export const persistState = [
-  'settings.advancedSettings'
+  'settings.advancedSettings',
+  'settings.importListExclusions.pageSize'
 ];
 
 //

frontend/src/Store/Selectors/createSettingsSectionSelector.ts

@@ -1,45 +1,44 @@
 import { createSelector } from 'reselect';
-import AppSectionState, {
-  AppSectionItemState,
-} from 'App/State/AppSectionState';
+import { AppSectionItemState } from 'App/State/AppSectionState';
 import AppState from 'App/State/AppState';
+import SettingsAppState from 'App/State/SettingsAppState';
 import selectSettings from 'Store/Selectors/selectSettings';
 import { PendingSection } from 'typings/pending';
 
-type SettingNames = keyof Omit<AppState['settings'], 'advancedSettings'>;
-type GetSectionState<Name extends SettingNames> = AppState['settings'][Name];
-type GetSettingsSectionItemType<Name extends SettingNames> =
-  GetSectionState<Name> extends AppSectionItemState<infer R>
-    ? R
-    : GetSectionState<Name> extends AppSectionState<infer R>
-    ? R
+type SectionsWithItemNames = {
+  [K in keyof SettingsAppState]: SettingsAppState[K] extends AppSectionItemState<unknown>
+    ? K
     : never;
+}[keyof SettingsAppState];
 
-type AppStateWithPending<Name extends SettingNames> = {
-  item?: GetSettingsSectionItemType<Name>;
-  pendingChanges?: Partial<GetSettingsSectionItemType<Name>>;
-  saveError?: Error;
-} & GetSectionState<Name>;
+type GetSectionState<Name extends SectionsWithItemNames> =
+  SettingsAppState[Name];
+type GetSettingsSectionItemType<Name extends SectionsWithItemNames> =
+  GetSectionState<Name> extends AppSectionItemState<infer R> ? R : never;
 
-function createSettingsSectionSelector<Name extends SettingNames>(
-  section: Name
-) {
+function createSettingsSectionSelector<
+  Name extends SectionsWithItemNames,
+  T extends GetSettingsSectionItemType<Name>
+>(section: Name) {
   return createSelector(
     (state: AppState) => state.settings[section],
     (sectionSettings) => {
-      const { item, pendingChanges, saveError, ...other } =
-        sectionSettings as AppStateWithPending<Name>;
+      const { item, pendingChanges, ...other } = sectionSettings;
 
-      const { settings, ...rest } = selectSettings(
-        item,
-        pendingChanges,
-        saveError
-      );
+      const saveError =
+        'saveError' in sectionSettings ? sectionSettings.saveError : undefined;
+
+      const {
+        settings,
+        pendingChanges: selectedPendingChanges,
+        ...rest
+      } = selectSettings(item, pendingChanges, saveError);
 
       return {
         ...other,
         saveError,
-        settings: settings as PendingSection<GetSettingsSectionItemType<Name>>,
+        settings: settings as PendingSection<T>,
+        pendingChanges: selectedPendingChanges as Partial<T>,
         ...rest,
       };
     }