New: Calendar filtering by tags

Closes #8502

(cherry picked from commit 62b948b24c4b9c572db225cb19985444d3d80c0f)

frontend/src/Store/Actions/calendarActions.js

@@ -4,9 +4,10 @@ import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
 import * as calendarViews from 'Calendar/calendarViews';
 import * as commandNames from 'Commands/commandNames';
-import { filterTypes } from 'Helpers/Props';
+import { filterBuilderTypes, filterBuilderValueTypes, filterTypes } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
+import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
 import translate from 'Utilities/String/translate';
 import { set, update } from './baseActions';
 import { executeCommandHelper } from './commandActions';
@@ -47,14 +48,16 @@ export const defaultState = {
 
   selectedFilterKey: 'monitored',
 
+  customFilters: [],
+
   filters: [
     {
       key: 'all',
       label: () => translate('All'),
       filters: [
         {
-          key: 'monitored',
-          value: false,
+          key: 'unmonitored',
+          value: [true],
           type: filterTypes.EQUAL
         }
       ]
@@ -64,20 +67,35 @@ export const defaultState = {
       label: () => translate('MonitoredOnly'),
       filters: [
         {
-          key: 'monitored',
-          value: true,
+          key: 'unmonitored',
+          value: [false],
           type: filterTypes.EQUAL
         }
       ]
     }
+  ],
 
+  filterBuilderProps: [
+    {
+      name: 'unmonitored',
+      label: () => translate('IncludeUnmonitored'),
+      type: filterBuilderTypes.EQUAL,
+      valueType: filterBuilderValueTypes.BOOL
+    },
+    {
+      name: 'tags',
+      label: () => translate('Tags'),
+      type: filterBuilderTypes.CONTAINS,
+      valueType: filterBuilderValueTypes.TAG
+    }
   ]
 };
 
 export const persistState = [
   'calendar.view',
   'calendar.selectedFilterKey',
-  'calendar.options'
+  'calendar.options',
+  'movieIndex.customFilters'
 ];
 
 //
@@ -189,6 +207,10 @@ function isRangePopulated(start, end, state) {
   return false;
 }
 
+function getCustomFilters(state, type) {
+  return state.customFilters.items.filter((customFilter) => customFilter.type === type);
+}
+
 //
 // Action Creators
 
@@ -210,7 +232,8 @@ export const actionHandlers = handleThunks({
   [FETCH_CALENDAR]: function(getState, payload, dispatch) {
     const state = getState();
     const calendar = state.calendar;
-    const unmonitored = calendar.selectedFilterKey === 'all';
+    const customFilters = getCustomFilters(state, section);
+    const selectedFilters = findSelectedFilters(calendar.selectedFilterKey, calendar.filters, customFilters);
 
     const {
       time = calendar.time,
@@ -237,13 +260,26 @@ export const actionHandlers = handleThunks({
 
     dispatch(set(attrs));
 
+    const requestParams = {
+      start,
+      end
+    };
+
+    selectedFilters.forEach((selectedFilter) => {
+      if (selectedFilter.key === 'unmonitored') {
+        requestParams.unmonitored = selectedFilter.value.includes(true);
+      }
+
+      if (selectedFilter.key === 'tags') {
+        requestParams.tags = selectedFilter.value.join(',');
+      }
+    });
+
+    requestParams.unmonitored = requestParams.unmonitored ?? false;
+
     const promise = createAjaxRequest({
       url: '/calendar',
-      data: {
-        unmonitored,
-        start,
-        end
-      }
+      data: requestParams
     }).request;
 
     promise.done((data) => {

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) => {

frontend/src/Store/thunks.js

@@ -1,28 +0,0 @@
-const thunks = {};
-
-function identity(payload) {
-  return payload;
-}
-
-export function createThunk(type, identityFunction = identity) {
-  return function(payload = {}) {
-    return function(dispatch, getState) {
-      const thunk = thunks[type];
-
-      if (thunk) {
-        return thunk(getState, identityFunction(payload), dispatch);
-      }
-
-      throw Error(`Thunk handler has not been registered for ${type}`);
-    };
-  };
-}
-
-export function handleThunks(handlers) {
-  const types = Object.keys(handlers);
-
-  types.forEach((type) => {
-    thunks[type] = handlers[type];
-  });
-}
-