studiokit-scaffolding-js 5.0.0 → 5.1.0

package/lib/components/HOC/CollectionComponent.d.ts

@@ -1,14 +1,14 @@
 import React, { ComponentClass, ComponentType } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { MODEL_STATUS } from '../../constants/modelStatus';
-import { BaseReduxState, Model } from '../../types';
-import { CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionDeleteParams, CollectionLoadParams, CollectionMethodConfiguration, CollectionMethods, CollectionReduxResponse, CollectionUpdateParams } from '../../types/Collection';
+import { BaseReduxState, Model, ModelCollection } from '../../types';
+import { CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionDeleteParams, CollectionDerivedProps, CollectionLoadParams, CollectionMethodConfiguration, CollectionMethods, CollectionReduxResponse, CollectionUpdateParams } from '../../types/Collection';
 import { GuidComponentWrappedProps } from './GuidComponent';
 /** The props passed into `CollectionComponent` from the user and other HOCs. */
 export interface CollectionComponentProps<TModel extends Model> extends CollectionCommonProps, GuidComponentWrappedProps, RouteComponentProps, CollectionReduxResponse<TModel> {
 }
 /** The props passed down to the `WrappedComponent`. */
-export interface CollectionComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentProps<TModel>, keyof RouteComponentProps>, CollectionMethods, CollectionCommonState {
+export interface CollectionComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentProps<TModel>, keyof RouteComponentProps>, CollectionDerivedProps<TModel>, CollectionMethods, CollectionCommonState {
 }
 export declare function configureCollectionComponent<TModel extends Model, TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & CollectionComponentWrappedProps<TModel>>, LoaderComponent?: ComponentType): {
     new (props: TOwnProps & CollectionComponentProps<TModel>): {
@@ -22,6 +22,7 @@ export declare function configureCollectionComponent<TModel extends Model, TOwnP
         create: (params: CollectionCreateParams) => void;
         update: (params: CollectionUpdateParams) => void;
         delete: (params: CollectionDeleteParams) => void;
+        getModelArray: import("memoize-one").MemoizedFn<(model: ModelCollection<TModel>, guid?: string | undefined) => TModel[]>;
         render(): JSX.Element;
         context: any;
         setState<K extends "modelStatus" | "previousModelStatus" | "fetchingId">(state: CollectionCommonState | ((prevState: Readonly<CollectionCommonState>, props: Readonly<TOwnProps & CollectionComponentProps<TModel>>) => CollectionCommonState | Pick<CollectionCommonState, K> | null) | Pick<CollectionCommonState, K> | null, callback?: (() => void) | undefined): void;

package/lib/components/HOC/CollectionComponent.js

@@ -58,6 +58,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureMapStateToProps = exports.configureCollectionComponent = void 0;
+var memoize_one_1 = __importDefault(require("memoize-one"));
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var react_router_1 = require("react-router");
@@ -110,6 +111,7 @@ function configureCollectionComponent(WrappedComponent, LoaderComponent) {
             _this.delete = function (params) {
                 collection_1.deleteItemFromCollection(_this.getCollectionMethodConfig(), params);
             };
+            _this.getModelArray = memoize_one_1.default(function (model, guid) { return model_1.getModelArray(model, guid); });
             _this.state = {
                 // initializing until model is loaded
                 modelStatus: modelStatus_1.MODEL_STATUS.UNINITIALIZED,
@@ -139,7 +141,7 @@ function configureCollectionComponent(WrappedComponent, LoaderComponent) {
             if (modelStatus === modelStatus_1.MODEL_STATUS.UNINITIALIZED) {
                 return react_1.default.createElement(LoaderComponent, null);
             }
-            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { modelStatus: modelStatus, previousModelStatus: previousModelStatus, fetchingId: fetchingId, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
+            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { modelArray: this.getModelArray(this.props.model, this.props.guid), modelStatus: modelStatus, previousModelStatus: previousModelStatus, fetchingId: fetchingId, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
         };
         return CollectionComponent;
     }(react_1.Component));

package/lib/components/HOC/CollectionFirstItemComponent.d.ts

@@ -1,8 +1,8 @@
 import React, { ComponentClass, ComponentType } from 'react';
-import { CollectionItemReduxResponse, Model } from '../../types';
+import { CollectionItemDerivedProps, CollectionItemReduxResponse, Model, ModelCollection } from '../../types';
 import { CollectionComponentWrappedProps } from './CollectionComponent';
 /** The props passed into `WrappedComponent`. */
-export interface CollectionFirstItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentWrappedProps<TModel>, 'model'>, CollectionItemReduxResponse<TModel> {
+export interface CollectionFirstItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentWrappedProps<TModel>, 'model'>, CollectionItemReduxResponse<TModel>, CollectionItemDerivedProps<TModel> {
 }
 /**
  * HOC meant to pass the first collection item to the wrapped component as its model.
@@ -10,6 +10,8 @@ export interface CollectionFirstItemComponentWrappedProps<TModel extends Model>
  */
 export declare function configureCollectionFirstItemComponent<TModel extends Model, TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & CollectionFirstItemComponentWrappedProps<TModel>>): {
     new (props: (TOwnProps & CollectionComponentWrappedProps<TModel>) | Readonly<TOwnProps & CollectionComponentWrappedProps<TModel>>): {
+        getModelArray: import("memoize-one").MemoizedFn<(model: ModelCollection<TModel>, guid?: string | undefined) => TModel[]>;
+        getModelMinusRelations: import("memoize-one").MemoizedFn<(model: TModel) => Partial<TModel>>;
         getFirstItem: () => TModel;
         render(): JSX.Element;
         context: any;
@@ -36,6 +38,8 @@ export declare function configureCollectionFirstItemComponent<TModel extends Mod
         UNSAFE_componentWillUpdate?(nextProps: Readonly<TOwnProps & CollectionComponentWrappedProps<TModel>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: TOwnProps & CollectionComponentWrappedProps<TModel>, context: any): {
+        getModelArray: import("memoize-one").MemoizedFn<(model: ModelCollection<TModel>, guid?: string | undefined) => TModel[]>;
+        getModelMinusRelations: import("memoize-one").MemoizedFn<(model: TModel) => Partial<TModel>>;
         getFirstItem: () => TModel;
         render(): JSX.Element;
         context: any;

package/lib/components/HOC/CollectionFirstItemComponent.js

@@ -49,8 +49,12 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
             r[k] = a[j];
     return r;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureCollectionFirstItemComponent = void 0;
+var memoize_one_1 = __importDefault(require("memoize-one"));
 var react_1 = __importStar(require("react"));
 var model_1 = require("../../utils/model");
 /**
@@ -62,8 +66,11 @@ function configureCollectionFirstItemComponent(WrappedComponent) {
         __extends(CollectionFirstItemComponent, _super);
         function CollectionFirstItemComponent() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.getModelArray = memoize_one_1.default(function (model, guid) { return model_1.getModelArray(model, guid); });
+            _this.getModelMinusRelations = memoize_one_1.default(function (model) { return model_1.getModelMinusRelations(model); });
             _this.getFirstItem = function () {
-                var _a = _this.props, model = _a.model, modelArray = _a.modelArray, guid = _a.guid;
+                var _a = _this.props, model = _a.model, guid = _a.guid;
+                var modelArray = _this.getModelArray(model, guid);
                 var singleItem = modelArray.length > 0
                     ? modelArray[0]
                     : model[guid]
@@ -76,7 +83,7 @@ function configureCollectionFirstItemComponent(WrappedComponent) {
         CollectionFirstItemComponent.prototype.render = function () {
             var pathParams = this.props.pathParams;
             var firstItem = this.getFirstItem();
-            var modelMinusRelations = model_1.getModelMinusRelations(firstItem);
+            var modelMinusRelations = this.getModelMinusRelations(firstItem);
             var p = __spreadArrays(pathParams);
             if (firstItem.id) {
                 p.push(firstItem.id.toString());

package/lib/components/HOC/CollectionItemComponent.d.ts

@@ -1,13 +1,13 @@
 import React, { ComponentClass, ComponentType } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { MODEL_STATUS } from '../../constants/modelStatus';
-import { BaseReduxState, CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionItemDeleteParams, CollectionItemLoadParams, CollectionItemMethods, CollectionItemReduxResponse, CollectionItemUpdateParams, CollectionMethodConfiguration, Model } from '../../types';
+import { BaseReduxState, CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionItemDeleteParams, CollectionItemDerivedProps, CollectionItemLoadParams, CollectionItemMethods, CollectionItemReduxResponse, CollectionItemUpdateParams, CollectionMethodConfiguration, Model } from '../../types';
 import { GuidComponentWrappedProps } from './GuidComponent';
 /** The props passed into `CollectionItemComponent` from the user and other HOCs. */
 export interface CollectionItemComponentProps<TModel extends Model> extends CollectionCommonProps, GuidComponentWrappedProps, RouteComponentProps, CollectionItemReduxResponse<TModel> {
 }
 /** The props passed down to the `WrappedComponent`. */
-export interface CollectionItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionItemComponentProps<TModel>, keyof RouteComponentProps>, CollectionItemMethods, CollectionCommonState {
+export interface CollectionItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionItemComponentProps<TModel>, keyof RouteComponentProps>, CollectionItemDerivedProps<TModel>, CollectionItemMethods, CollectionCommonState {
 }
 export declare function configureCollectionItemComponent<TModel extends Model, TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & CollectionItemComponentWrappedProps<TModel>>, LoaderComponent?: ComponentType): {
     new (props: TOwnProps & CollectionItemComponentProps<TModel>): {
@@ -20,6 +20,7 @@ export declare function configureCollectionItemComponent<TModel extends Model, T
         create: (params: CollectionCreateParams) => void;
         update: (params: CollectionItemUpdateParams) => void;
         delete: (params?: CollectionItemDeleteParams) => void;
+        getModelMinusRelations: import("memoize-one").MemoizedFn<(model: TModel) => Partial<TModel>>;
         render(): JSX.Element;
         context: any;
         setState<K extends "modelStatus" | "previousModelStatus" | "fetchingId">(state: CollectionCommonState | ((prevState: Readonly<CollectionCommonState>, props: Readonly<TOwnProps & CollectionItemComponentProps<TModel>>) => CollectionCommonState | Pick<CollectionCommonState, K> | null) | Pick<CollectionCommonState, K> | null, callback?: (() => void) | undefined): void;

package/lib/components/HOC/CollectionItemComponent.js

@@ -58,6 +58,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureMapStateToProps = exports.configureCollectionItemComponent = void 0;
+var memoize_one_1 = __importDefault(require("memoize-one"));
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var react_router_1 = require("react-router");
@@ -113,6 +114,7 @@ function configureCollectionItemComponent(WrappedComponent, LoaderComponent) {
                 var model = _this.props.model;
                 collection_1.deleteCollectionItem(model, _this.getCollectionMethodConfig(), params);
             };
+            _this.getModelMinusRelations = memoize_one_1.default(function (model) { return model_1.getModelMinusRelations(model); });
             _this.state = {
                 // initializing until model is loaded, or if no model
                 modelStatus: modelStatus_1.MODEL_STATUS.UNINITIALIZED,
@@ -136,7 +138,7 @@ function configureCollectionItemComponent(WrappedComponent, LoaderComponent) {
             if (modelStatus === modelStatus_1.MODEL_STATUS.UNINITIALIZED) {
                 return react_1.default.createElement(LoaderComponent, null);
             }
-            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { model: this.props.model, modelMinusRelations: this.props.modelMinusRelations, modelStatus: modelStatus, previousModelStatus: previousModelStatus, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
+            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { model: this.props.model, modelMinusRelations: this.getModelMinusRelations(this.props.model), modelStatus: modelStatus, previousModelStatus: previousModelStatus, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
         };
         return CollectionItemComponent;
     }(react_1.Component));

package/lib/components/HOC/SearchPersistorComponent.d.ts

@@ -1,4 +1,5 @@
 import { ComponentClass, ComponentType } from 'react';
+import { SortingRule } from 'react-table';
 import { Dispatch } from 'redux';
 import { BaseReduxState, Search } from '../../types';
 export interface SearchPersistorProps<T extends Search = Search> {
@@ -7,13 +8,16 @@ export interface SearchPersistorProps<T extends Search = Search> {
 }
 export interface SearchPersistorMethods<T extends Search = Search> {
     setSearchDefaults: (doSearch: () => void, search: T) => void;
-    updateAndPersistSearch: (search?: Search | T, callback?: () => void) => void;
+    updateAndPersistSearch: (search?: T, callback?: () => void) => void;
+    resetSearch: () => void;
     handleSearchClick: () => void;
-    handleChangeTab: (selectedTab: number) => void;
-    handleKeywordsChange: (event: any) => void;
+    setKeywords: (event: any) => void;
     handleKeywordsKeyDown: (event: any) => void;
-    handleQueryAllChange: (event: any) => void;
-    resetSearch: () => void;
+    setQueryAll: (event: any) => void;
+    setSelectedTab: (selectedTab: number) => void;
+    setSortingRules: (newSortingRules: SortingRule[]) => void;
+    setPageSize: (newPageSize: number, newPage: number) => void;
+    setPage: (newPage: number) => void;
 }
 export interface SearchPersistorWrappedProps<T extends Search = Search> extends SearchPersistorProps<T>, SearchPersistorMethods<T> {
     search?: T;

package/lib/components/HOC/SearchPersistorComponent.js

@@ -44,6 +44,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureMapDispatchToProps = exports.configureMapStateToProps = exports.configureSearchPersistorComponent = void 0;
+var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var actions_1 = require("../../redux/actions");
@@ -93,28 +94,72 @@ function configureSearchPersistorComponent(WrappedComponent) {
                     invalidKeywords: false
                 }, _this.doSearch);
             };
-            _this.handleChangeTab = function (selectedTab) {
-                _this.updateAndPersistSearch({ selectedTab: selectedTab });
+            _this.resetSearch = function () {
+                var _a;
+                var search = (_a = _this.state.search) !== null && _a !== void 0 ? _a : {};
+                _this.updateAndPersistSearch(
+                // preserve items related to filtering results
+                lodash_1.merge({}, _this.state.defaultSearch, {
+                    selectedTab: search.selectedTab,
+                    sortingRules: search.sortingRules,
+                    pageSize: search.pageSize,
+                    pageByTab: search.pageByTab
+                }), 
+                // do not trigger a re-load unless queryAll is true
+                search.queryAll ? _this.doSearch : undefined);
+            };
+            _this.setSelectedTab = function (selectedTab) {
+                var _a, _b;
+                var pageByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pageByTab) !== null && _b !== void 0 ? _b : {}));
+                // if not set, default page to zero when switching tabs
+                if (!pageByTab[selectedTab])
+                    pageByTab[selectedTab] = 0;
+                _this.updateAndPersistSearch({
+                    selectedTab: selectedTab,
+                    pageByTab: pageByTab
+                });
             };
-            _this.handleKeywordsChange = function (event) {
+            _this.setKeywords = function (event) {
                 _this.updateAndPersistSearch({
                     keywords: event.target.value
                 });
             };
             _this.handleKeywordsKeyDown = function (event) {
-                if (event.key === 'Enter') {
+                var _a;
+                if (event.key === 'Enter' && ((_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.queryAll)) {
                     _this.handleSearchClick();
                 }
             };
-            _this.handleQueryAllChange = function (event) {
+            _this.setQueryAll = function (event) {
                 var queryAll = event.target.checked;
                 _this.updateAndPersistSearch({
                     queryAll: queryAll,
                     requiredMessage: !queryAll ? null : _this.state.search ? _this.state.search.requiredMessage : null
+                }, _this.doSearch);
+            };
+            _this.setSortingRules = function (newSortingRules) {
+                _this.updateAndPersistSearch({
+                    sortingRules: newSortingRules
                 });
             };
-            _this.resetSearch = function () {
-                _this.updateAndPersistSearch(_this.state.defaultSearch, _this.doSearch);
+            _this.setPageSize = function (newPageSize, newPage) {
+                var _a, _b, _c, _d;
+                var pageByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pageByTab) !== null && _b !== void 0 ? _b : {}));
+                var selectedTab = (_d = (_c = _this.state.search) === null || _c === void 0 ? void 0 : _c.selectedTab) !== null && _d !== void 0 ? _d : 1;
+                pageByTab[selectedTab] = newPage;
+                _this.updateAndPersistSearch({
+                    pageSize: newPageSize,
+                    pageByTab: pageByTab
+                });
+            };
+            _this.setPage = function (newPage) {
+                var _a, _b, _c, _d;
+                var pageByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pageByTab) !== null && _b !== void 0 ? _b : {}));
+                var selectedTab = (_d = (_c = _this.state.search) === null || _c === void 0 ? void 0 : _c.selectedTab) !== null && _d !== void 0 ? _d : 1;
+                pageByTab[selectedTab] = newPage;
+                _this.updateAndPersistSearch({
+                    pageByTab: pageByTab
+                });
             };
             _this.state = {
                 search: undefined,
@@ -130,7 +175,7 @@ function configureSearchPersistorComponent(WrappedComponent) {
         };
         //#endregion handlers
         SearchPersistorComponent.prototype.render = function () {
-            return (react_1.default.createElement(WrappedComponent, __assign({ updateAndPersistSearch: this.updateAndPersistSearch, setSearchDefaults: this.setSearchDefaults, search: this.state.search, handleSearchClick: this.handleSearchClick, handleChangeTab: this.handleChangeTab, handleKeywordsChange: this.handleKeywordsChange, handleKeywordsKeyDown: this.handleKeywordsKeyDown, handleQueryAllChange: this.handleQueryAllChange, resetSearch: this.resetSearch }, this.props)));
+            return (react_1.default.createElement(WrappedComponent, __assign({ search: this.state.search, setSearchDefaults: this.setSearchDefaults, updateAndPersistSearch: this.updateAndPersistSearch, resetSearch: this.resetSearch, handleSearchClick: this.handleSearchClick, setKeywords: this.setKeywords, handleKeywordsKeyDown: this.handleKeywordsKeyDown, setQueryAll: this.setQueryAll, setSelectedTab: this.setSelectedTab, setSortingRules: this.setSortingRules, setPageSize: this.setPageSize, setPage: this.setPage }, this.props)));
         };
         return SearchPersistorComponent;
     }(react_1.Component));

package/lib/components/ManageTable.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { Column, SortingRule } from 'react-table';
+import { Model, Search } from '../types';
+export interface ManageTableProps<TModel, TSearchDataParams> {
+    search: Search;
+    isFiltered: boolean;
+    setSelectedTab: (selectedTab: number) => void;
+    setSortingRules: (newSortingRules: SortingRule[]) => void;
+    setPageSize: (newPageSize: number, newPage: number) => void;
+    setPage: (newPage: number) => void;
+    tabs: number[];
+    getTabName: (tab?: number) => string;
+    searchData: (params: TSearchDataParams) => Record<number, TModel[]>;
+    searchDataParams: TSearchDataParams;
+    columns: Column<TModel>[];
+    entityName: string;
+    canQueryAll?: boolean;
+}
+export declare const ManageTable: <TModel extends Model, TSearchDataParams extends {}>({ search: { hasSearched, queryAll, selectedTab, sortingRules, pageSize, pageByTab }, isFiltered, setSelectedTab, setSortingRules, setPageSize, setPage, tabs, getTabName, searchData, searchDataParams, columns, entityName, canQueryAll }: ManageTableProps<TModel, TSearchDataParams>) => JSX.Element;

package/lib/components/ManageTable.js

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ManageTable = void 0;
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_2 = __importDefault(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var react_table_1 = __importDefault(require("react-table"));
+var table_1 = require("../constants/table");
+var RefreshIndicator_1 = require("./RefreshIndicator");
+var ManageTable = function (_a) {
+    //#region Data
+    var _b = _a.search, hasSearched = _b.hasSearched, queryAll = _b.queryAll, selectedTab = _b.selectedTab, sortingRules = _b.sortingRules, pageSize = _b.pageSize, pageByTab = _b.pageByTab, isFiltered = _a.isFiltered, setSelectedTab = _a.setSelectedTab, setSortingRules = _a.setSortingRules, setPageSize = _a.setPageSize, setPage = _a.setPage, tabs = _a.tabs, getTabName = _a.getTabName, searchData = _a.searchData, searchDataParams = _a.searchDataParams, columns = _a.columns, entityName = _a.entityName, canQueryAll = _a.canQueryAll;
+    var _c = react_1.useState(), dataByTab = _c[0], setDataByTab = _c[1];
+    var isInitialized = dataByTab !== undefined;
+    // search and set state, which can be debounced as a single unit of work
+    var searchAndSetData = react_1.useCallback(function (params, setDataByTab) {
+        setDataByTab(searchData(params));
+    }, [searchData]);
+    // search is debounced to prevent it being rapidly called
+    // useMemo with no dependencies ensures we keep the same debounced function between renders
+    var debouncedSearchAndSetData = react_1.useMemo(function () { return lodash_1.debounce(searchAndSetData); }, [searchAndSetData]);
+    // search once without debounce to initialize dataByTab state
+    react_1.useEffect(function () {
+        if (!isInitialized) {
+            setDataByTab(searchData(searchDataParams));
+        }
+    }, [isInitialized, searchData, searchDataParams]);
+    // search using debounced method when searchDataParams changes, after initialization
+    // use `isMounted` to not call the callback unless the component is mounted
+    react_1.useEffect(function () {
+        var isMounted = true;
+        if (isInitialized) {
+            debouncedSearchAndSetData(searchDataParams, function (dataByTab) {
+                if (isMounted)
+                    setDataByTab(dataByTab);
+            });
+        }
+        return function () {
+            isMounted = false;
+        };
+    }, [debouncedSearchAndSetData, isInitialized, searchDataParams]);
+    //#endregion Data
+    var noResultsFound = isFiltered && !!dataByTab && Object.values(dataByTab).every(function (d) { return d.length === 0; });
+    var currentTab = selectedTab !== null && selectedTab !== void 0 ? selectedTab : 1;
+    var data = dataByTab === null || dataByTab === void 0 ? void 0 : dataByTab[currentTab];
+    //#region Tabs
+    var onTabSelect = react_1.useCallback(function (eventKey) {
+        setSelectedTab(Number(eventKey));
+    }, [setSelectedTab]);
+    var dataLengthByTab = react_1.useMemo(function () {
+        var value = {};
+        tabs.forEach(function (tab) {
+            var _a;
+            value[tab] = (_a = dataByTab === null || dataByTab === void 0 ? void 0 : dataByTab[tab].length) !== null && _a !== void 0 ? _a : 0;
+        });
+        return value;
+    }, [dataByTab, tabs]);
+    var SearchTabs = react_1.useMemo(function () { return (react_2.default.createElement(react_bootstrap_1.Tabs, { activeKey: selectedTab, id: "search-tabs", onSelect: onTabSelect }, tabs.map(function (tab) { return (react_2.default.createElement(react_bootstrap_1.Tab, { key: tab, eventKey: tab.toString(), title: getTabName(tab) + " (" + dataLengthByTab[tab] + ")", disabled: noResultsFound })); }))); }, [dataLengthByTab, getTabName, noResultsFound, onTabSelect, selectedTab, tabs]);
+    //#endregion Tabs
+    //#region Table
+    var NoDataComponent = react_1.useMemo(function () {
+        return hasSearched ? (react_2.default.createElement("p", { className: "pt4 tc" },
+            "No ",
+            entityName.toLocaleLowerCase(),
+            " matched your search.",
+            canQueryAll && !queryAll && (react_2.default.createElement(react_2.default.Fragment, null,
+                " You might want to try again with \"Search All ",
+                entityName,
+                "\" checked.")))) : (react_2.default.createElement("p", { className: "pt4 tc" },
+            "No ",
+            getTabName(selectedTab).toLowerCase(),
+            " ",
+            entityName.toLocaleLowerCase(),
+            ' ',
+            isFiltered ? 'matched your search' : 'found',
+            "."));
+    }, [canQueryAll, entityName, getTabName, hasSearched, isFiltered, queryAll, selectedTab]);
+    var NoDataComponentCallback = react_1.useCallback(function () { return NoDataComponent; }, [NoDataComponent]);
+    var Table = react_1.useMemo(function () {
+        var _a;
+        var showPagination = !!data && data.length > table_1.TABLE_DEFAULT_PAGE_SIZE;
+        // if pagination is not enabled, or page is not set, ensure page is 0, the first page
+        var pageForTab = showPagination && pageByTab && selectedTab ? pageByTab[selectedTab] : 0;
+        // if there are less items to display than the page size, shrink the page size so there are not empty rows
+        var currentPageSize = Math.min((_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : table_1.TABLE_DEFAULT_PAGE_SIZE, pageSize !== null && pageSize !== void 0 ? pageSize : table_1.TABLE_DEFAULT_PAGE_SIZE);
+        var pageSizeOptions = table_1.TABLE_PAGE_SIZE_OPTIONS.filter(function (s) { return !(data === null || data === void 0 ? void 0 : data.length) || s <= (data === null || data === void 0 ? void 0 : data.length); });
+        return (react_2.default.createElement(react_table_1.default, { "aria-describedby": "search-results-label", className: "manage-table -striped cb" + ((data === null || data === void 0 ? void 0 : data.length) === 1 ? ' single-row-action-button' : ''), data: data, showPagination: showPagination, showPaginationTop: true, sorted: sortingRules, pageSize: currentPageSize, page: pageForTab, pageSizeOptions: pageSizeOptions, columns: columns, onSortedChange: setSortingRules, onPageSizeChange: setPageSize, onPageChange: setPage, NoDataComponent: NoDataComponentCallback }));
+    }, [
+        NoDataComponentCallback,
+        columns,
+        data,
+        pageByTab,
+        pageSize,
+        selectedTab,
+        setPage,
+        setPageSize,
+        setSortingRules,
+        sortingRules
+    ]);
+    //#endregion Table
+    if (!dataByTab)
+        return react_2.default.createElement(RefreshIndicator_1.RefreshIndicator, { label: "Loading...", labelClassName: "color-white" });
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement("h3", { id: "search-results-label", className: "visually-hidden" }, "Search Results"),
+        SearchTabs,
+        Table));
+};
+exports.ManageTable = ManageTable;

package/lib/components/SearchControls.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { Search } from '../types';
 import { SearchPersistorMethods } from './HOC/SearchPersistorComponent';
-interface SearchControlsMethods extends Pick<SearchPersistorMethods, 'handleSearchClick' | 'handleKeywordsChange' | 'handleKeywordsKeyDown' | 'resetSearch'>, Partial<Pick<SearchPersistorMethods, 'handleQueryAllChange'>> {
+interface SearchControlsMethods extends Pick<SearchPersistorMethods, 'handleSearchClick' | 'setKeywords' | 'handleKeywordsKeyDown' | 'resetSearch'>, Partial<Pick<SearchPersistorMethods, 'setQueryAll'>> {
 }
 export interface SearchControlsProps extends Search, SearchControlsMethods {
     keywordPlaceholder: string;

package/lib/components/SearchControls.js

@@ -12,24 +12,24 @@ var react_bootstrap_1 = require("react-bootstrap");
 var AlertWithIcon_1 = require("./AlertWithIcon");
 var DateField_1 = require("./Forms/DateField");
 var SearchControls = function (_a) {
-    var keywords = _a.keywords, invalidKeywords = _a.invalidKeywords, dateString = _a.dateString, queryAll = _a.queryAll, requiredMessage = _a.requiredMessage, handleKeywordsChange = _a.handleKeywordsChange, handleKeywordsKeyDown = _a.handleKeywordsKeyDown, handleSearchClick = _a.handleSearchClick, resetSearch = _a.resetSearch, handleQueryAllChange = _a.handleQueryAllChange, keywordPlaceholder = _a.keywordPlaceholder, handleDateChange = _a.handleDateChange, queryAllText = _a.queryAllText, canReadAnyGlobally = _a.canReadAnyGlobally, canReadSome = _a.canReadSome;
+    var keywords = _a.keywords, invalidKeywords = _a.invalidKeywords, dateString = _a.dateString, queryAll = _a.queryAll, requiredMessage = _a.requiredMessage, setKeywords = _a.setKeywords, handleKeywordsKeyDown = _a.handleKeywordsKeyDown, handleSearchClick = _a.handleSearchClick, resetSearch = _a.resetSearch, setQueryAll = _a.setQueryAll, keywordPlaceholder = _a.keywordPlaceholder, handleDateChange = _a.handleDateChange, queryAllText = _a.queryAllText, canReadAnyGlobally = _a.canReadAnyGlobally, canReadSome = _a.canReadSome;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         !!requiredMessage && (react_1.default.createElement(AlertWithIcon_1.AlertWithIcon, { variant: "danger", className: "mb0", id: "requiredMessageAlert" },
             react_1.default.createElement("p", null, requiredMessage))),
         react_1.default.createElement(react_bootstrap_1.FormGroup, { controlId: "keywords", className: "fl-ns mw5-ns mr3-ns mb3 mb0-ns w-100-lt-xs" },
             react_1.default.createElement(react_bootstrap_1.FormLabel, { className: "f7 b" }, "Keywords"),
-            react_1.default.createElement(react_bootstrap_1.FormControl, { type: "text", placeholder: keywordPlaceholder, name: "keywords", onChange: handleKeywordsChange, onKeyDown: handleKeywordsKeyDown, value: keywords, isInvalid: invalidKeywords }),
+            react_1.default.createElement(react_bootstrap_1.FormControl, { type: "text", placeholder: keywordPlaceholder, name: "keywords", onChange: setKeywords, onKeyDown: handleKeywordsKeyDown, value: keywords, isInvalid: invalidKeywords }),
             invalidKeywords && (react_1.default.createElement(react_bootstrap_1.FormText, { className: "i f6", id: "invalidKeywords", muted: true }, "Please enter at least 3 characters."))),
         !!handleDateChange && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("span", { id: "and-or-label", className: "i mw3-ns mr3-ns mt3-ns pv3-ns fl-ns tc w-100-lt-xs date-align" }, "and / or"),
             react_1.default.createElement(DateField_1.DateField, { id: "date", onChange: handleDateChange, label: "Date", "aria-label": "Active date", className: "fl-ns mw5-ns mr3-ns mb3 mb0-ns w-100-lt-xs date-align", value: dateString }))),
         react_1.default.createElement("div", { className: "fl-ns mt3-ns pt3-ns w-100-lt-xs" },
-            canReadAnyGlobally && !!handleQueryAllChange && (react_1.default.createElement(react_bootstrap_1.FormCheck, { name: "queryAll", id: "queryAll", checked: queryAll, disabled: canReadAnyGlobally && !canReadSome, onChange: handleQueryAllChange, className: "fl-ns f6 mr2-ns mb3 mt2 w-100-lt-xs", label: react_1.default.createElement("span", { className: "b black" }, queryAllText || 'Search All') })),
-            react_1.default.createElement(Button_1.default, { className: "btn-primary fr-ns ml2-ns mb3 w-100-lt-xs", onClick: handleSearchClick, color: "primary" },
-                react_1.default.createElement(Search_1.default, { className: "fill-white v-mid" }),
-                "Search"),
+            canReadAnyGlobally && !!setQueryAll && (react_1.default.createElement(react_bootstrap_1.FormCheck, { name: "queryAll", id: "queryAll", checked: queryAll, disabled: canReadAnyGlobally && !canReadSome, onChange: setQueryAll, className: "fl-ns f6 mr2-ns mb3 mt2 w-100-lt-xs", label: react_1.default.createElement("span", { className: "b black" }, queryAllText || 'Search All') })),
+            canReadAnyGlobally && queryAll && (react_1.default.createElement(Button_1.default, { className: "btn-primary fr-ns ml2-ns mb3 w-100-lt-xs search-button", onClick: handleSearchClick, color: "primary", disabled: !keywords || keywords.length < 3 || !!invalidKeywords },
+                react_1.default.createElement(Search_1.default, null),
+                "Search")),
             react_1.default.createElement(Button_1.default, { className: "btn-text color-pink fr-ns mb3 w-100-lt-xs", onClick: resetSearch },
-                react_1.default.createElement(Autorenew_1.default, { className: "fill-pink v-mid" }),
+                react_1.default.createElement(Autorenew_1.default, null),
                 "Reset"))));
 };
 exports.SearchControls = SearchControls;

package/lib/components/UserRoles/index.d.ts

@@ -107,5 +107,5 @@ export declare class UserRoles extends Component<UserRolesProps, UserRolesState>
     render(): JSX.Element;
 }
 export declare const mapStateToProps: (state: BaseReduxState, ownProps: UserRolesOwnProps) => UserRolesReduxProps;
-declare const _default: import("react-redux").ConnectedComponent<typeof UserRoles, Pick<React.ClassAttributes<UserRoles> & UserRolesProps, "ref" | "queryParams" | "modelName" | "externalProviders" | "model" | "key" | "readOnly" | "guid" | "load" | "pathParams" | "modelStatus" | "disableAutoLoad" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "previousModelStatus" | "fetchingId" | "textForRole" | "entityName" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "lowercaseTextForRole" | "singularArticleForRole"> & UserRolesOwnProps>;
+declare const _default: import("react-redux").ConnectedComponent<typeof UserRoles, Pick<React.ClassAttributes<UserRoles> & UserRolesProps, "ref" | "queryParams" | "modelName" | "externalProviders" | "model" | "key" | "readOnly" | "guid" | "entityName" | "load" | "pathParams" | "modelStatus" | "disableAutoLoad" | "modelArray" | "stopPeriodicLoad" | "create" | "update" | "delete" | "previousModelStatus" | "fetchingId" | "textForRole" | "defaultRole" | "roleDescriptions" | "renderAddDescription" | "isUpdateDisabled" | "isDeleteDisabled" | "allowMultipleRoles" | "requiredRole" | "isAddDisabled" | "modifyUserRoleActivityName" | "deleteOwnUserRoleActivityName" | "addRoleExcludeList" | "entity" | "filterUsers" | "onAdd" | "onUpdate" | "onRemove" | "renderTableDescription" | "lowercaseTextForRole" | "singularArticleForRole"> & UserRolesOwnProps>;
 export default _default;

package/lib/constants/index.d.ts

@@ -7,5 +7,6 @@ export * from './modelStatus';
 export * from './notificationType';
 export * from './operatingSystem';
 export * from './shard';
+export * from './table';
 export * from './tier';
 export * from './userRole';

package/lib/constants/index.js

@@ -19,5 +19,6 @@ __exportStar(require("./modelStatus"), exports);
 __exportStar(require("./notificationType"), exports);
 __exportStar(require("./operatingSystem"), exports);
 __exportStar(require("./shard"), exports);
+__exportStar(require("./table"), exports);
 __exportStar(require("./tier"), exports);
 __exportStar(require("./userRole"), exports);

package/lib/constants/table.d.ts

@@ -0,0 +1,15 @@
+export declare const TABLE_DEFAULT_PAGE_SIZE = 25;
+export declare const TABLE_PAGE_SIZE_OPTIONS: number[];
+export declare enum MANAGE_TABLE_TAB {
+    AVAILABLE = 1,
+    DELETED = 2
+}
+/** Iterable array of tabs */
+export declare const MANAGE_TABLE_TABS: MANAGE_TABLE_TAB[];
+export declare enum GROUP_MANAGE_TABLE_TAB {
+    CURRENT = 1,
+    PAST = 2,
+    DELETED = 3
+}
+/** Iterable array of tabs */
+export declare const GROUP_MANAGE_TABLE_TABS: GROUP_MANAGE_TABLE_TAB[];

package/lib/constants/table.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GROUP_MANAGE_TABLE_TABS = exports.GROUP_MANAGE_TABLE_TAB = exports.MANAGE_TABLE_TABS = exports.MANAGE_TABLE_TAB = exports.TABLE_PAGE_SIZE_OPTIONS = exports.TABLE_DEFAULT_PAGE_SIZE = void 0;
+exports.TABLE_DEFAULT_PAGE_SIZE = 25;
+exports.TABLE_PAGE_SIZE_OPTIONS = [25, 50, 100, 150, 200];
+var MANAGE_TABLE_TAB;
+(function (MANAGE_TABLE_TAB) {
+    MANAGE_TABLE_TAB[MANAGE_TABLE_TAB["AVAILABLE"] = 1] = "AVAILABLE";
+    MANAGE_TABLE_TAB[MANAGE_TABLE_TAB["DELETED"] = 2] = "DELETED";
+})(MANAGE_TABLE_TAB = exports.MANAGE_TABLE_TAB || (exports.MANAGE_TABLE_TAB = {}));
+/** Iterable array of tabs */
+exports.MANAGE_TABLE_TABS = [MANAGE_TABLE_TAB.AVAILABLE, MANAGE_TABLE_TAB.DELETED];
+var GROUP_MANAGE_TABLE_TAB;
+(function (GROUP_MANAGE_TABLE_TAB) {
+    GROUP_MANAGE_TABLE_TAB[GROUP_MANAGE_TABLE_TAB["CURRENT"] = 1] = "CURRENT";
+    GROUP_MANAGE_TABLE_TAB[GROUP_MANAGE_TABLE_TAB["PAST"] = 2] = "PAST";
+    GROUP_MANAGE_TABLE_TAB[GROUP_MANAGE_TABLE_TAB["DELETED"] = 3] = "DELETED";
+})(GROUP_MANAGE_TABLE_TAB = exports.GROUP_MANAGE_TABLE_TAB || (exports.GROUP_MANAGE_TABLE_TAB = {}));
+/** Iterable array of tabs */
+exports.GROUP_MANAGE_TABLE_TABS = [
+    GROUP_MANAGE_TABLE_TAB.CURRENT,
+    GROUP_MANAGE_TABLE_TAB.PAST,
+    GROUP_MANAGE_TABLE_TAB.DELETED
+];

package/lib/hooks/useCollection.d.ts

@@ -1,5 +1,5 @@
-import { CollectionCommonProps, CollectionCommonState, CollectionMethods, CollectionReduxResponse, Model } from '../types';
-export interface UseCollectionResponse<TModel extends Model> extends CollectionCommonState, CollectionReduxResponse<TModel>, CollectionMethods {
+import { CollectionCommonProps, CollectionCommonState, CollectionDerivedProps, CollectionMethods, CollectionReduxResponse, Model } from '../types';
+export interface UseCollectionResponse<TModel extends Model> extends CollectionCommonState, CollectionReduxResponse<TModel>, CollectionDerivedProps<TModel>, CollectionMethods {
     guid: string;
 }
 export declare function useCollection<TModel extends Model>(props: CollectionCommonProps): UseCollectionResponse<TModel>;

package/lib/hooks/useCollectionConfiguration.js

@@ -6,6 +6,7 @@ var react_redux_1 = require("react-redux");
 var react_router_1 = require("react-router");
 var modelStatus_1 = require("../constants/modelStatus");
 var model_1 = require("../utils/model");
+var route_1 = require("../utils/route");
 var useGuid_1 = require("./useGuid");
 var usePrevious_1 = require("./usePrevious");
 /**
@@ -23,13 +24,20 @@ function useCollectionConfiguration(props, selectorFunction) {
     var _b = react_1.useState(modelStatus_1.MODEL_STATUS.UNINITIALIZED), modelStatus = _b[0], setModelStatus = _b[1];
     var previousModelStatus = usePrevious_1.usePrevious(modelStatus);
     var _c = react_1.useState(), fetchingId = _c[0], setFetchingId = _c[1];
+    var pathParams = react_1.useMemo(function () { return propPathParams || route_1.getPathParamsFromRouteMatchParams(routeMatchParams, modelName); }, [
+        modelName,
+        propPathParams,
+        routeMatchParams
+    ]);
     var _d = react_redux_1.useSelector(function (state) {
-        return selectorFunction({ guid: guid, modelName: modelName, pathParams: propPathParams, routeMatchParams: routeMatchParams, state: state });
-    }), pathParams = _d.pathParams, model = _d.model, modelArray = _d.modelArray, modelMinusRelations = _d.modelMinusRelations;
+        return selectorFunction({ guid: guid, modelName: modelName, pathParams: pathParams, routeMatchParams: routeMatchParams, state: state });
+    }), model = _d.model, isCollectionItem = _d.isCollectionItem;
     var previousModelName = usePrevious_1.usePrevious(modelName);
     var previousModel = usePrevious_1.usePrevious(model);
     var previousPathParams = usePrevious_1.usePrevious(pathParams);
     var previousQueryParams = usePrevious_1.usePrevious(queryParams);
+    var modelArray = react_1.useMemo(function () { return (!isCollectionItem ? model_1.getModelArray(model, guid) : undefined); }, [guid, isCollectionItem, model]);
+    var modelMinusRelations = react_1.useMemo(function () { return (isCollectionItem ? model_1.getModelMinusRelations(model) : undefined); }, [isCollectionItem, model]);
     var changeModelStatus = function (newModelStatus, newFetchingId) {
         setFetchingId(newFetchingId);
         setModelStatus(newModelStatus);

package/lib/hooks/useCollectionItem.d.ts

@@ -1,5 +1,5 @@
-import { CollectionCommonProps, CollectionCommonState, CollectionItemMethods, CollectionItemReduxResponse, Model } from '../types';
-export interface UseCollectionItemResponse<TModel extends Model> extends CollectionCommonState, CollectionItemReduxResponse<TModel>, CollectionItemMethods {
+import { CollectionCommonProps, CollectionCommonState, CollectionItemDerivedProps, CollectionItemMethods, CollectionItemReduxResponse, Model } from '../types';
+export interface UseCollectionItemResponse<TModel extends Model> extends CollectionCommonState, CollectionItemReduxResponse<TModel>, CollectionItemDerivedProps<TModel>, CollectionItemMethods {
     guid: string;
 }
 export declare function useCollectionItem<TModel extends Model>(props: CollectionCommonProps): UseCollectionItemResponse<TModel>;

package/lib/redux/reducers/fetchReducer.js

@@ -109,9 +109,10 @@ exports.merge = merge;
  * @param metadata
  */
 function updateMetadataForChildCollections(data, metadata) {
+    var isDataCollection = isCollection(data);
     Object.keys(data).forEach(function (key) {
         var value = data[key];
-        if ((isCollection(data) && key !== '_metadata' && lodash_1.default.isPlainObject(value)) || isCollection(value)) {
+        if ((isDataCollection && key !== '_metadata' && lodash_1.default.isPlainObject(value)) || isCollection(value)) {
             value._metadata = metadata;
             updateMetadataForChildCollections(value, metadata);
         }
@@ -164,9 +165,17 @@ function fetchReducer(state, action) {
             };
             var incoming = !lodash_1.default.isPlainObject(action.data) && !lodash_1.default.isArray(action.data) ? { response: action.data } : action.data;
             updateMetadataForChildCollections(incoming, metadataUpdate);
-            valueAtPath = merge(valueAtPath, incoming);
+            // merging the incoming with existing
+            // otherwise completely replace the existing value in redux
+            if (!action.replaceValue) {
+                valueAtPath = merge(valueAtPath, incoming);
+            }
+            else {
+                valueAtPath = lodash_1.default.merge({}, incoming);
+            }
             valueAtPath._metadata = lodash_1.default.merge({}, metadata, metadataUpdate);
-            return fp_1.default.setWith(Object, path, valueAtPath, state);
+            var result = fp_1.default.setWith(Object, path, valueAtPath, state);
+            return result;
         }
         case actions_1.NET_ACTION.FETCH_FAILED:
             // Retain the object, update the metadata to reflect the fact

package/lib/redux/sagas/fetchSaga.js

@@ -410,6 +410,7 @@ function fetchData(action) {
                 resultAction = actionCreator_1.createAction(storeAction, {
                     modelName: modelNameLevels.join('.') + "." + data.id,
                     guid: action.guid,
+                    replaceValue: action.replaceValue,
                     data: data
                 });
                 return [4 /*yield*/, effects_1.put(resultAction)
@@ -427,6 +428,7 @@ function fetchData(action) {
                 resultReceivedAction = actionCreator_1.createAction(storeAction, {
                     modelName: modelName,
                     guid: action.guid,
+                    replaceValue: action.replaceValue,
                     data: data
                 });
                 return [4 /*yield*/, effects_1.put(resultReceivedAction)];

package/lib/types/Collection.d.ts

@@ -30,8 +30,7 @@ export interface CollectionSelectorMethodResponse<TModel extends Model> {
     modelName: string;
     pathParams: string[];
     model: TModel | ModelCollection<TModel>;
-    modelArray?: TModel[];
-    modelMinusRelations?: Partial<TModel>;
+    isCollectionItem: boolean;
 }
 /** A method used to select a collection or collection item model from redux. */
 export declare type CollectionSelectorMethod = <TModel extends Model>(params: CollectionSelectorMethodParams) => CollectionSelectorMethodResponse<TModel>;
@@ -51,6 +50,8 @@ export interface CollectionItemLoadParams {
     period?: number;
     /** The taskId to set for later cancellation. */
     taskId?: string;
+    /** If true, the fetchReducer will replace the existing value in redux, instead of merging the incoming with existing. */
+    replaceValue?: boolean;
 }
 export interface CollectionLoadParams {
     /** Id of an item in the collection to load. Otherwise entire collection is loaded. */
@@ -63,6 +64,8 @@ export interface CollectionLoadParams {
     period?: number;
     /** The taskId to set for later cancellation. */
     taskId?: string;
+    /** If true, the fetchReducer will replace the existing value in redux, instead of merging the incoming with existing. */
+    replaceValue?: boolean;
 }
 export interface CollectionCreateParams {
     /** The body to send in the request. */
@@ -154,6 +157,8 @@ export interface CollectionMethods {
 export interface CollectionItemReduxResponse<TModel extends Model> {
     /** The collection item model loaded from redux, or loaded into redux using `load()`. */
     model: TModel;
+}
+export interface CollectionItemDerivedProps<TModel extends Model> {
     /** The collection item model, without any of its nested relations. */
     modelMinusRelations: Partial<TModel>;
 }
@@ -161,6 +166,8 @@ export interface CollectionItemReduxResponse<TModel extends Model> {
 export interface CollectionReduxResponse<TModel extends Model> {
     /** The collection model loaded from redux if available, or loaded into redux using `load()`. */
     model: ModelCollection<TModel>;
+}
+export interface CollectionDerivedProps<TModel extends Model> {
     /** The collection model converted to an array of all collection items. */
     modelArray: TModel[];
 }

package/lib/types/Search.d.ts

@@ -1,3 +1,4 @@
+import { SortingRule } from 'react-table';
 export interface Search {
     keywords?: string;
     invalidKeywords?: boolean;
@@ -5,7 +6,13 @@ export interface Search {
     dateString?: string;
     date?: Date | null;
     queryAll?: boolean;
+    includeIfSoftDeleted?: boolean;
     requiredMessage?: string | null;
     selectedTab?: number;
-    includeIfSoftDeleted?: boolean;
+    /** react-table sorting rules */
+    sortingRules?: SortingRule[];
+    /** react-table page size, for pagination */
+    pageSize?: number;
+    /** react-table currently selected page for a given tab, for pagination */
+    pageByTab?: Record<string, number | undefined>;
 }

package/lib/types/net/FetchAction.d.ts

@@ -32,6 +32,8 @@ export interface FetchAction extends Action<NET_ACTION> {
     noRetry?: boolean;
     /** The contentType to be set in the headers. Defaults to `application/json` */
     contentType?: string;
+    /** If true, the fetchReducer will replace the existing value in redux, instead of merging the incoming with existing. */
+    replaceValue?: boolean;
     /** The data returned from a request. */
     data?: any;
     /** The error data returned from a failed request. */

package/lib/utils/collection.js

@@ -1,17 +1,23 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cleanupCollectionGuidKey = exports.handleCollectionParamsChange = exports.handleCollectionItemParamsChange = exports.initializeCollection = exports.initializeCollectionItem = exports.deleteCollectionItem = exports.deleteItemFromCollection = exports.updateCollectionItem = exports.updateItemInCollection = exports.createCollectionItem = exports.createItemInCollection = exports.loadCollectionItem = exports.loadCollection = exports.stopCollectionPeriodicLoad = exports.selectCollectionFromState = exports.selectCollectionItemFromState = void 0;
 var lodash_1 = require("lodash");
+var memoize_one_1 = __importDefault(require("memoize-one"));
 var constants_1 = require("../constants");
 var actionCreator_1 = require("../redux/actionCreator");
 var actions_1 = require("../redux/actions");
-var model_1 = require("./model");
 var route_1 = require("./route");
 //#region Redux Methods
+var getPathParams = memoize_one_1.default(function (pathParams, routeMatchParams, modelName) {
+    return pathParams || route_1.getPathParamsFromRouteMatchParams(routeMatchParams, modelName);
+});
 function selectCollectionItemFromState(params) {
     var guid = params.guid, modelName = params.modelName, pathParams = params.pathParams, routeMatchParams = params.routeMatchParams, state = params.state;
     var modelNameLevelCount = route_1.getMinRequiredPathParamsCount(modelName);
-    var p = pathParams || route_1.getPathParamsFromRouteMatchParams(routeMatchParams, modelName);
+    var p = getPathParams(pathParams, routeMatchParams, modelName);
     var reduxModelName = route_1.getReduxModelName(p, modelName);
     var model = {};
     // find `model` using `guid` as its key, to match new item created in `create()`
@@ -28,31 +34,27 @@ function selectCollectionItemFromState(params) {
     else {
         // find `model` using pathParams
         var reduxModel = (lodash_1.get(state.models, reduxModelName) || {});
-        model = (Object.keys(reduxModel).length > 0 ? lodash_1.merge({}, reduxModel) : {});
+        model = (Object.keys(reduxModel).length > 0 ? reduxModel : {});
     }
-    // convenient way to access model without relations, for use in PUT requests
-    var modelMinusRelations = model_1.getModelMinusRelations(model);
     return {
         modelName: modelName,
         pathParams: p,
         model: model,
-        modelMinusRelations: modelMinusRelations
+        isCollectionItem: true
     };
 }
 exports.selectCollectionItemFromState = selectCollectionItemFromState;
 function selectCollectionFromState(params) {
-    var guid = params.guid, modelName = params.modelName, pathParams = params.pathParams, routeMatchParams = params.routeMatchParams, state = params.state;
-    var p = pathParams || route_1.getPathParamsFromRouteMatchParams(routeMatchParams, modelName);
+    var modelName = params.modelName, pathParams = params.pathParams, routeMatchParams = params.routeMatchParams, state = params.state;
+    var p = getPathParams(pathParams, routeMatchParams, modelName);
     var reduxModelName = route_1.getReduxModelName(p, modelName);
     var model = lodash_1.get(state.models, reduxModelName);
-    model = model && Object.keys(model).length > 0 ? lodash_1.merge({}, model) : {};
-    // convenient way to access collection as an array
-    var modelArray = model_1.getModelArray(model, guid);
+    model = model && Object.keys(model).length > 0 ? model : {};
     return {
         modelName: modelName,
         pathParams: p,
         model: model,
-        modelArray: modelArray
+        isCollectionItem: false
     };
 }
 exports.selectCollectionFromState = selectCollectionFromState;
@@ -69,7 +71,7 @@ exports.stopCollectionPeriodicLoad = stopCollectionPeriodicLoad;
 function loadCollection(config, params) {
     if (params === void 0) { params = {}; }
     var modelName = config.modelName, modelStatus = config.modelStatus, configPathParams = config.pathParams, configQueryParams = config.queryParams, changeModelStatus = config.changeModelStatus;
-    var id = params.id, pathParams = params.pathParams, queryParams = params.queryParams, period = params.period, taskId = params.taskId;
+    var id = params.id, pathParams = params.pathParams, queryParams = params.queryParams, period = params.period, taskId = params.taskId, replaceValue = params.replaceValue;
     var p = lodash_1.concat([], pathParams || configPathParams, id ? [id] : []);
     if (p.length !== route_1.getMinRequiredPathParamsCount(modelName) + (id ? 1 : 0)) {
         throw new Error('pathParams length does not match length of path components');
@@ -82,7 +84,8 @@ function loadCollection(config, params) {
             modelName: modelName,
             method: 'GET',
             pathParams: p,
-            queryParams: queryParams || configQueryParams
+            queryParams: queryParams || configQueryParams,
+            replaceValue: replaceValue
         });
     }
     else {
@@ -92,7 +95,8 @@ function loadCollection(config, params) {
             pathParams: p,
             queryParams: queryParams || configQueryParams,
             period: period,
-            taskId: taskId
+            taskId: taskId,
+            replaceValue: replaceValue
         });
     }
 }
@@ -100,7 +104,7 @@ exports.loadCollection = loadCollection;
 function loadCollectionItem(config, params) {
     if (params === void 0) { params = {}; }
     var modelName = config.modelName, modelStatus = config.modelStatus, configPathParams = config.pathParams, configQueryParams = config.queryParams, changeModelStatus = config.changeModelStatus;
-    var pathParams = params.pathParams, queryParams = params.queryParams, period = params.period, taskId = params.taskId;
+    var pathParams = params.pathParams, queryParams = params.queryParams, period = params.period, taskId = params.taskId, replaceValue = params.replaceValue;
     var p = pathParams || configPathParams;
     if (p && p.length < route_1.getMinRequiredPathParamsCount(modelName) + 1) {
         throw new Error('pathParams length does not match length of path components');
@@ -113,7 +117,8 @@ function loadCollectionItem(config, params) {
             modelName: modelName,
             method: 'GET',
             pathParams: p,
-            queryParams: queryParams || configQueryParams
+            queryParams: queryParams || configQueryParams,
+            replaceValue: replaceValue
         });
     }
     else {
@@ -123,7 +128,8 @@ function loadCollectionItem(config, params) {
             pathParams: p,
             queryParams: queryParams || configQueryParams,
             period: period,
-            taskId: taskId
+            taskId: taskId,
+            replaceValue: replaceValue
         });
     }
 }

package/lib/utils/manageTable.d.ts

@@ -0,0 +1,2 @@
+export declare const getManageTableTabName: (selectedTab?: number | undefined) => "" | "Available" | "Deleted";
+export declare const getGroupManageTableTabName: (selectedTab?: number | undefined) => "" | "Deleted" | "Current" | "Past";

package/lib/utils/manageTable.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGroupManageTableTabName = exports.getManageTableTabName = void 0;
+var table_1 = require("../constants/table");
+var getManageTableTabName = function (selectedTab) {
+    switch (selectedTab) {
+        case table_1.MANAGE_TABLE_TAB.AVAILABLE:
+            return 'Available';
+        case table_1.MANAGE_TABLE_TAB.DELETED:
+            return 'Deleted';
+        default:
+            return '';
+    }
+};
+exports.getManageTableTabName = getManageTableTabName;
+var getGroupManageTableTabName = function (selectedTab) {
+    switch (selectedTab) {
+        case table_1.GROUP_MANAGE_TABLE_TAB.CURRENT:
+            return 'Current';
+        case table_1.GROUP_MANAGE_TABLE_TAB.DELETED:
+            return 'Deleted';
+        case table_1.GROUP_MANAGE_TABLE_TAB.PAST:
+            return 'Past';
+        default:
+            return '';
+    }
+};
+exports.getGroupManageTableTabName = getGroupManageTableTabName;

package/lib/utils/search.d.ts

@@ -0,0 +1,28 @@
+import { EntityUser, ExternalTerm, Group, ModelCollection } from '../types';
+export declare const getKeywordsList: (keywords: string | undefined) => string[];
+export declare const isEntityUserMatchedByKeyword: (owner: EntityUser, keyword: string) => boolean;
+export declare const isEntityMatchedByKeyword: (entity: {
+    id: number;
+    name: string;
+    owners: EntityUser[];
+}, keyword: string) => boolean;
+export declare const isEntityMatchedByKeywords: (entity: {
+    id: number;
+    name: string;
+    owners: EntityUser[];
+}, keywordsList: string[]) => boolean;
+export declare const searchEntities: <T extends {
+    isDeleted: boolean;
+    activities: string[];
+}>(entityArray: T[], entityMatchFunction: (entity: T, keywordsList: string[]) => boolean, readActivity: string, canReadAnyGlobally?: boolean | undefined, keywords?: string | undefined) => Record<number, T[]>;
+export interface SearchModelArrayParams<TModel> {
+    modelArray: TModel[];
+    canReadyAnyGlobally?: boolean;
+    keywords?: string;
+}
+export interface SearchGroupsParams extends SearchModelArrayParams<Group> {
+    groups: ModelCollection<Group>;
+    externalTerms: ModelCollection<ExternalTerm>;
+    dateString?: string;
+}
+export declare const searchGroups: ({ groups, modelArray: groupsArray, externalTerms, canReadyAnyGlobally, keywords, dateString }: SearchGroupsParams) => Record<number, Group[]>;

package/lib/utils/search.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchGroups = exports.searchEntities = exports.isEntityMatchedByKeywords = exports.isEntityMatchedByKeyword = exports.isEntityUserMatchedByKeyword = exports.getKeywordsList = void 0;
+var table_1 = require("../constants/table");
+var date_1 = require("./date");
+var groupDates_1 = require("./groupDates");
+var groupRoles_1 = require("./groupRoles");
+var getKeywordsList = function (keywords) {
+    if (!keywords)
+        return [];
+    return keywords
+        .trim()
+        .toLowerCase()
+        .split(' ')
+        .filter(function (k) { return !!k; });
+};
+exports.getKeywordsList = getKeywordsList;
+var isEntityUserMatchedByKeyword = function (owner, keyword) {
+    var _a, _b, _c, _d;
+    return owner.id.toString().toLowerCase().includes(keyword) ||
+        !!((_a = owner.firstName) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(keyword)) ||
+        !!((_b = owner.lastName) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase().includes(keyword)) ||
+        !!((_c = owner.email) === null || _c === void 0 ? void 0 : _c.toString().toLowerCase().includes(keyword)) ||
+        !!((_d = owner.uid) === null || _d === void 0 ? void 0 : _d.toString().toLowerCase().includes(keyword));
+};
+exports.isEntityUserMatchedByKeyword = isEntityUserMatchedByKeyword;
+var isEntityMatchedByKeyword = function (entity, keyword) {
+    return entity.id.toString().toLowerCase().includes(keyword) ||
+        entity.name.toLowerCase().includes(keyword) ||
+        entity.owners.some(function (owner) { return exports.isEntityUserMatchedByKeyword(owner, keyword); });
+};
+exports.isEntityMatchedByKeyword = isEntityMatchedByKeyword;
+var isEntityMatchedByKeywords = function (entity, keywordsList) { return !keywordsList || keywordsList.length === 0 || keywordsList.every(function (k) { return exports.isEntityMatchedByKeyword(entity, k); }); };
+exports.isEntityMatchedByKeywords = isEntityMatchedByKeywords;
+var searchEntities = function (entityArray, entityMatchFunction, readActivity, canReadAnyGlobally, keywords) {
+    var _a;
+    var keywordsList = exports.getKeywordsList(keywords);
+    var filteredEntities = entityArray.reduce(function (acc, e) {
+        var _a;
+        // exclude if cannot read any entity and does not have the read activity
+        if (!canReadAnyGlobally && !e.activities.includes(readActivity))
+            return acc;
+        // exclude if does not match, if any
+        if (!entityMatchFunction(e, keywordsList))
+            return acc;
+        // add entity to the corresponding tab filtered array
+        var tab = e.isDeleted ? table_1.MANAGE_TABLE_TAB.DELETED : table_1.MANAGE_TABLE_TAB.AVAILABLE;
+        var tabArray = (_a = acc[tab]) !== null && _a !== void 0 ? _a : [];
+        tabArray.push(e);
+        acc[tab] = tabArray;
+        return acc;
+    }, (_a = {}, _a[table_1.MANAGE_TABLE_TAB.AVAILABLE] = [], _a[table_1.MANAGE_TABLE_TAB.DELETED] = [], _a));
+    return filteredEntities;
+};
+exports.searchEntities = searchEntities;
+var getGroupTab = function (group, endDate) {
+    if (group.isDeleted) {
+        return table_1.GROUP_MANAGE_TABLE_TAB.DELETED;
+    }
+    else if (!!group.id && date_1.isNowBeforeDate(endDate)) {
+        return table_1.GROUP_MANAGE_TABLE_TAB.CURRENT;
+    }
+    return table_1.GROUP_MANAGE_TABLE_TAB.PAST;
+};
+var searchGroups = function (_a) {
+    var _b;
+    var groups = _a.groups, groupsArray = _a.modelArray, externalTerms = _a.externalTerms, canReadyAnyGlobally = _a.canReadyAnyGlobally, keywords = _a.keywords, dateString = _a.dateString;
+    var keywordsList = exports.getKeywordsList(keywords);
+    var visibleGroups = canReadyAnyGlobally ? groupsArray : groupRoles_1.groupsAsAnythingButLearner(groups);
+    var filteredGroups = visibleGroups.reduce(function (acc, g) {
+        var _a;
+        // exclude if does not match keywords, if any
+        if (!exports.isEntityMatchedByKeywords(g, keywordsList))
+            return acc;
+        var startDate = groupDates_1.getStartDate(externalTerms, g);
+        var endDate = groupDates_1.getEndDate(externalTerms, g);
+        // exclude if search dateString is not between group start and end dates
+        if (!!dateString &&
+            (date_1.getLocalMomentFromUtc(dateString) < date_1.getLocalMomentFromUtc(startDate) ||
+                date_1.getLocalMomentFromUtc(dateString) > date_1.getLocalMomentFromUtc(endDate))) {
+            return acc;
+        }
+        var tab = getGroupTab(g, endDate);
+        var tabArray = (_a = acc[tab]) !== null && _a !== void 0 ? _a : [];
+        tabArray.push(g);
+        acc[tab] = tabArray;
+        return acc;
+    }, (_b = {},
+        _b[table_1.GROUP_MANAGE_TABLE_TAB.CURRENT] = [],
+        _b[table_1.GROUP_MANAGE_TABLE_TAB.PAST] = [],
+        _b[table_1.GROUP_MANAGE_TABLE_TAB.DELETED] = [],
+        _b));
+    return filteredGroups;
+};
+exports.searchGroups = searchGroups;
+//#endregion Groups

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "5.0.0",
+	"version": "5.1.0",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",
@@ -126,6 +126,7 @@
 		"history": "^4.10.1",
 		"local-storage-fallback": "^4.1.1",
 		"lodash": "^4.17.20",
+		"memoize-one": "^6.0.0",
 		"moment-timezone": "^0.5.32",
 		"parchment": "^1.1.4",
 		"pluralize": "^8.0.0",