New: Blocklist Custom Filters

Closes #6763

frontend/src/Activity/Blocklist/Blocklist.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FilterMenu from 'Components/Menu/FilterMenu';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -20,6 +21,7 @@ import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
+import BlocklistFilterModal from './BlocklistFilterModal';
 import BlocklistRowConnector from './BlocklistRowConnector';
 
 class Blocklist extends Component {
@@ -114,9 +116,13 @@ class Blocklist extends Component {
       error,
       items,
       columns,
+      selectedFilterKey,
+      filters,
+      customFilters,
       totalRecords,
       isRemoving,
       isClearingBlocklistExecuting,
+      onFilterSelect,
       ...otherProps
     } = this.props;
 
@@ -161,6 +167,15 @@ class Blocklist extends Component {
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>
+
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              filterModalConnectorComponent={BlocklistFilterModal}
+              onFilterSelect={onFilterSelect}
+            />
           </PageToolbarSection>
         </PageToolbar>
 
@@ -180,7 +195,11 @@ class Blocklist extends Component {
           {
             isPopulated && !error && !items.length &&
               <Alert kind={kinds.INFO}>
-                {translate('NoHistoryBlocklist')}
+                {
+                  selectedFilterKey === 'all' ?
+                    translate('NoHistoryBlocklist') :
+                    translate('BlocklistFilterHasNoItems')
+                }
               </Alert>
           }
 
@@ -251,11 +270,15 @@ Blocklist.propTypes = {
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
   totalRecords: PropTypes.number,
   isRemoving: PropTypes.bool.isRequired,
   isClearingBlocklistExecuting: PropTypes.bool.isRequired,
   onRemoveSelected: PropTypes.func.isRequired,
-  onClearBlocklistPress: PropTypes.func.isRequired
+  onClearBlocklistPress: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired
 };
 
 export default Blocklist;

frontend/src/Activity/Blocklist/BlocklistConnector.js

@@ -6,6 +6,7 @@ import * as commandNames from 'Commands/commandNames';
 import withCurrentPage from 'Components/withCurrentPage';
 import * as blocklistActions from 'Store/Actions/blocklistActions';
 import { executeCommand } from 'Store/Actions/commandActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import Blocklist from './Blocklist';
@@ -13,10 +14,12 @@ import Blocklist from './Blocklist';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.blocklist,
+    createCustomFiltersSelector('blocklist'),
     createCommandExecutingSelector(commandNames.CLEAR_BLOCKLIST),
-    (blocklist, isClearingBlocklistExecuting) => {
+    (blocklist, customFilters, isClearingBlocklistExecuting) => {
       return {
         isClearingBlocklistExecuting,
+        customFilters,
         ...blocklist
       };
     }
@@ -97,6 +100,10 @@ class BlocklistConnector extends Component {
     this.props.setBlocklistSort({ sortKey });
   };
 
+  onFilterSelect = (selectedFilterKey) => {
+    this.props.setBlocklistFilter({ selectedFilterKey });
+  };
+
   onClearBlocklistPress = () => {
     this.props.executeCommand({ name: commandNames.CLEAR_BLOCKLIST });
   };
@@ -122,6 +129,7 @@ class BlocklistConnector extends Component {
         onPageSelect={this.onPageSelect}
         onRemoveSelected={this.onRemoveSelected}
         onSortPress={this.onSortPress}
+        onFilterSelect={this.onFilterSelect}
         onTableOptionChange={this.onTableOptionChange}
         onClearBlocklistPress={this.onClearBlocklistPress}
         {...this.props}
@@ -142,6 +150,7 @@ BlocklistConnector.propTypes = {
   gotoBlocklistPage: PropTypes.func.isRequired,
   removeBlocklistItems: PropTypes.func.isRequired,
   setBlocklistSort: PropTypes.func.isRequired,
+  setBlocklistFilter: PropTypes.func.isRequired,
   setBlocklistTableOption: PropTypes.func.isRequired,
   clearBlocklist: PropTypes.func.isRequired,
   executeCommand: PropTypes.func.isRequired

frontend/src/Activity/Blocklist/BlocklistFilterModal.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterModal from 'Components/Filter/FilterModal';
+import { setBlocklistFilter } from 'Store/Actions/blocklistActions';
+
+function createBlocklistSelector() {
+  return createSelector(
+    (state: AppState) => state.blocklist.items,
+    (blocklistItems) => {
+      return blocklistItems;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.blocklist.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
+
+interface BlocklistFilterModalProps {
+  isOpen: boolean;
+}
+
+export default function BlocklistFilterModal(props: BlocklistFilterModalProps) {
+  const sectionItems = useSelector(createBlocklistSelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+  const customFilterType = 'blocklist';
+
+  const dispatch = useDispatch();
+
+  const dispatchSetFilter = useCallback(
+    (payload: unknown) => {
+      dispatch(setBlocklistFilter(payload));
+    },
+    [dispatch]
+  );
+
+  return (
+    <FilterModal
+      // TODO: Don't spread all the props
+      {...props}
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
+      customFilterType={customFilterType}
+      dispatchSetFilter={dispatchSetFilter}
+    />
+  );
+}

frontend/src/App/State/AppState.ts

@@ -1,4 +1,5 @@
 import InteractiveImportAppState from 'App/State/InteractiveImportAppState';
+import BlocklistAppState from './BlocklistAppState';
 import CalendarAppState from './CalendarAppState';
 import CommandAppState from './CommandAppState';
 import EpisodeFilesAppState from './EpisodeFilesAppState';
@@ -54,6 +55,7 @@ export interface AppSectionState {
 
 interface AppState {
   app: AppSectionState;
+  blocklist: BlocklistAppState;
   calendar: CalendarAppState;
   commands: CommandAppState;
   episodeFiles: EpisodeFilesAppState;

frontend/src/App/State/BlocklistAppState.ts

@@ -0,0 +1,8 @@
+import Blocklist from 'typings/Blocklist';
+import AppSectionState, { AppSectionFilterState } from './AppSectionState';
+
+interface BlocklistAppState
+  extends AppSectionState<Blocklist>,
+    AppSectionFilterState<Blocklist> {}
+
+export default BlocklistAppState;

frontend/src/Store/Actions/blocklistActions.js

@@ -1,6 +1,6 @@
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
-import { sortDirections } from 'Helpers/Props';
+import { filterBuilderTypes, filterBuilderValueTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 import serverSideCollectionHandlers from 'Utilities/serverSideCollectionHandlers';
@@ -77,6 +77,31 @@ export const defaultState = {
       isVisible: true,
       isModifiable: false
     }
+  ],
+
+  selectedFilterKey: 'all',
+
+  filters: [
+    {
+      key: 'all',
+      label: () => translate('All'),
+      filters: []
+    }
+  ],
+
+  filterBuilderProps: [
+    {
+      name: 'seriesIds',
+      label: () => translate('Series'),
+      type: filterBuilderTypes.EQUAL,
+      valueType: filterBuilderValueTypes.SERIES
+    },
+    {
+      name: 'protocols',
+      label: () => translate('Protocol'),
+      type: filterBuilderTypes.EQUAL,
+      valueType: filterBuilderValueTypes.PROTOCOL
+    }
   ]
 };
 
@@ -84,6 +109,7 @@ export const persistState = [
   'blocklist.pageSize',
   'blocklist.sortKey',
   'blocklist.sortDirection',
+  'blocklist.selectedFilterKey',
   'blocklist.columns'
 ];
 
@@ -97,6 +123,7 @@ export const GOTO_NEXT_BLOCKLIST_PAGE = 'blocklist/gotoBlocklistNextPage';
 export const GOTO_LAST_BLOCKLIST_PAGE = 'blocklist/gotoBlocklistLastPage';
 export const GOTO_BLOCKLIST_PAGE = 'blocklist/gotoBlocklistPage';
 export const SET_BLOCKLIST_SORT = 'blocklist/setBlocklistSort';
+export const SET_BLOCKLIST_FILTER = 'blocklist/setBlocklistFilter';
 export const SET_BLOCKLIST_TABLE_OPTION = 'blocklist/setBlocklistTableOption';
 export const REMOVE_BLOCKLIST_ITEM = 'blocklist/removeBlocklistItem';
 export const REMOVE_BLOCKLIST_ITEMS = 'blocklist/removeBlocklistItems';
@@ -112,6 +139,7 @@ export const gotoBlocklistNextPage = createThunk(GOTO_NEXT_BLOCKLIST_PAGE);
 export const gotoBlocklistLastPage = createThunk(GOTO_LAST_BLOCKLIST_PAGE);
 export const gotoBlocklistPage = createThunk(GOTO_BLOCKLIST_PAGE);
 export const setBlocklistSort = createThunk(SET_BLOCKLIST_SORT);
+export const setBlocklistFilter = createThunk(SET_BLOCKLIST_FILTER);
 export const setBlocklistTableOption = createAction(SET_BLOCKLIST_TABLE_OPTION);
 export const removeBlocklistItem = createThunk(REMOVE_BLOCKLIST_ITEM);
 export const removeBlocklistItems = createThunk(REMOVE_BLOCKLIST_ITEMS);
@@ -132,7 +160,8 @@ export const actionHandlers = handleThunks({
       [serverSideCollectionHandlers.NEXT_PAGE]: GOTO_NEXT_BLOCKLIST_PAGE,
       [serverSideCollectionHandlers.LAST_PAGE]: GOTO_LAST_BLOCKLIST_PAGE,
       [serverSideCollectionHandlers.EXACT_PAGE]: GOTO_BLOCKLIST_PAGE,
-      [serverSideCollectionHandlers.SORT]: SET_BLOCKLIST_SORT
+      [serverSideCollectionHandlers.SORT]: SET_BLOCKLIST_SORT,
+      [serverSideCollectionHandlers.FILTER]: SET_BLOCKLIST_FILTER
     }),
 
   [REMOVE_BLOCKLIST_ITEM]: createRemoveItemHandler(section, '/blocklist'),

frontend/src/typings/Blocklist.ts

@@ -0,0 +1,16 @@
+import ModelBase from 'App/ModelBase';
+import Language from 'Language/Language';
+import { QualityModel } from 'Quality/Quality';
+import CustomFormat from 'typings/CustomFormat';
+
+interface Blocklist extends ModelBase {
+  languages: Language[];
+  quality: QualityModel;
+  customFormats: CustomFormat[];
+  title: string;
+  date?: string;
+  protocol: string;
+  seriesId?: number;
+}
+
+export default Blocklist;