New: Queue custom filters

(cherry picked from commit e357d17b187378b92377f8acb077b12c1e7ea527)

Closes #4212
Closes #4234

frontend/src/Store/Actions/Creators/createFetchServerSideCollectionHandler.js

@@ -6,6 +6,8 @@ import getSectionState from 'Utilities/State/getSectionState';
 import { set, updateServerSideCollection } from '../baseActions';
 
 function createFetchServerSideCollectionHandler(section, url, fetchDataAugmenter) {
+  const [baseSection] = section.split('.');
+
   return function(getState, payload, dispatch) {
     dispatch(set({ section, isFetching: true }));
 
@@ -25,10 +27,13 @@ function createFetchServerSideCollectionHandler(section, url, fetchDataAugmenter
 
     const {
       selectedFilterKey,
-      filters,
-      customFilters
+      filters
     } = sectionState;
 
+    const customFilters = getState().customFilters.items.filter((customFilter) => {
+      return customFilter.type === section || customFilter.type === baseSection;
+    });
+
     const selectedFilters = findSelectedFilters(selectedFilterKey, filters, customFilters);
 
     selectedFilters.forEach((filter) => {
@@ -37,7 +42,8 @@ function createFetchServerSideCollectionHandler(section, url, fetchDataAugmenter
 
     const promise = createAjaxRequest({
       url,
-      data
+      data,
+      traditional: true
     }).request;
 
     promise.done((response) => {

frontend/src/Store/Actions/queueActions.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
 import Icon from 'Components/Icon';
-import { icons, sortDirections } from 'Helpers/Props';
+import { filterBuilderTypes, filterBuilderValueTypes, icons, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 import serverSideCollectionHandlers from 'Utilities/serverSideCollectionHandlers';
@@ -158,6 +158,37 @@ export const defaultState = {
         isVisible: true,
         isModifiable: false
       }
+    ],
+
+    selectedFilterKey: 'all',
+
+    filters: [
+      {
+        key: 'all',
+        label: 'All',
+        filters: []
+      }
+    ],
+
+    filterBuilderProps: [
+      {
+        name: 'artistIds',
+        label: () => translate('Artist'),
+        type: filterBuilderTypes.EQUAL,
+        valueType: filterBuilderValueTypes.ARTIST
+      },
+      {
+        name: 'quality',
+        label: () => translate('Quality'),
+        type: filterBuilderTypes.EQUAL,
+        valueType: filterBuilderValueTypes.QUALITY
+      },
+      {
+        name: 'protocol',
+        label: () => translate('Protocol'),
+        type: filterBuilderTypes.EQUAL,
+        valueType: filterBuilderValueTypes.PROTOCOL
+      }
     ]
   }
 };
@@ -167,7 +198,8 @@ export const persistState = [
   'queue.paged.pageSize',
   'queue.paged.sortKey',
   'queue.paged.sortDirection',
-  'queue.paged.columns'
+  'queue.paged.columns',
+  'queue.paged.selectedFilterKey'
 ];
 
 //
@@ -192,6 +224,7 @@ export const GOTO_NEXT_QUEUE_PAGE = 'queue/gotoQueueNextPage';
 export const GOTO_LAST_QUEUE_PAGE = 'queue/gotoQueueLastPage';
 export const GOTO_QUEUE_PAGE = 'queue/gotoQueuePage';
 export const SET_QUEUE_SORT = 'queue/setQueueSort';
+export const SET_QUEUE_FILTER = 'queue/setQueueFilter';
 export const SET_QUEUE_TABLE_OPTION = 'queue/setQueueTableOption';
 export const SET_QUEUE_OPTION = 'queue/setQueueOption';
 export const CLEAR_QUEUE = 'queue/clearQueue';
@@ -216,6 +249,7 @@ export const gotoQueueNextPage = createThunk(GOTO_NEXT_QUEUE_PAGE);
 export const gotoQueueLastPage = createThunk(GOTO_LAST_QUEUE_PAGE);
 export const gotoQueuePage = createThunk(GOTO_QUEUE_PAGE);
 export const setQueueSort = createThunk(SET_QUEUE_SORT);
+export const setQueueFilter = createThunk(SET_QUEUE_FILTER);
 export const setQueueTableOption = createAction(SET_QUEUE_TABLE_OPTION);
 export const setQueueOption = createAction(SET_QUEUE_OPTION);
 export const clearQueue = createAction(CLEAR_QUEUE);
@@ -267,7 +301,8 @@ export const actionHandlers = handleThunks({
       [serverSideCollectionHandlers.NEXT_PAGE]: GOTO_NEXT_QUEUE_PAGE,
       [serverSideCollectionHandlers.LAST_PAGE]: GOTO_LAST_QUEUE_PAGE,
       [serverSideCollectionHandlers.EXACT_PAGE]: GOTO_QUEUE_PAGE,
-      [serverSideCollectionHandlers.SORT]: SET_QUEUE_SORT
+      [serverSideCollectionHandlers.SORT]: SET_QUEUE_SORT,
+      [serverSideCollectionHandlers.FILTER]: SET_QUEUE_FILTER
     },
     fetchDataAugmenter
   ),

frontend/src/Store/Selectors/createClientSideCollectionSelector.js

@@ -108,7 +108,7 @@ function sort(items, state) {
   return _.orderBy(items, clauses, orders);
 }
 
-function createCustomFiltersSelector(type, alternateType) {
+export function createCustomFiltersSelector(type, alternateType) {
   return createSelector(
     (state) => state.customFilters.items,
     (customFilters) => {