Add "reset all filters" button to filter dialog

src/components/filterdialog/filterIndicator.js

@@ -1,28 +1,10 @@
 import './filterIndicator.scss';
+import { FILTER_SETTINGS } from '../../constants/filterSettings';
 
-function getFilterStatus(query) {
-    return Boolean(
-        query.Filters
-            || query.IsFavorite
-            || query.VideoTypes
-            || query.SeriesStatus
-            || query.Is4K
-            || (query.IsHD !== undefined && query.IsHD !== null)
-            || query.IsSD
-            || query.Is3D
-            || query.HasSubtitles
-            || query.HasTrailer
-            || query.HasSpecialFeature
-            || query.HasThemeSong
-            || query.HasThemeVideo
-            || query.IsMissing
-            || query.ParentIndexNumber
-            || query.Genres
-            || query.Tags
-            || query.Years
-            || query.OfficialRatings
-            || query.IsUnaired
-    );
+export function getFilterStatus(query) {
+    return FILTER_SETTINGS.some(setting => {
+        return query[setting] !== undefined && query[setting] !== null;
+    });
 }
 
 export function setFilterStatus(page, query) {

src/components/filterdialog/filterdialog.js

@@ -1,5 +1,6 @@
 import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
+import { getFilterStatus } from './filterIndicator';
 import globalize from '../../lib/globalize';
 import union from 'lodash-es/union';
 import Events from '../../utils/events.ts';
@@ -9,6 +10,7 @@ import './style.scss';
 import ServerConnections from '../ServerConnections';
 import template from './filterdialog.template.html';
 import { stopMultiSelect } from '../../components/multiSelect/multiSelect';
+import { FILTER_SETTINGS } from '../../constants/filterSettings';
 
 function merge(resultItems, queryItems, delimiter) {
     if (!queryItems) {
@@ -58,13 +60,19 @@ function renderFilters(context, result, query) {
     });
 }
 
+function renderResetButton(context, query) {
+    const elem = context.querySelector('.btnResetAllFilters');
+    elem.classList.toggle('hide', !getFilterStatus(query));
+}
+
 function loadDynamicFilters(context, apiClient, userId, itemQuery) {
     return apiClient.getJSON(apiClient.getUrl('Items/Filters', {
         UserId: userId,
         ParentId: itemQuery.ParentId,
         IncludeItemTypes: itemQuery.IncludeItemTypes
     })).then(function (result) {
         renderFilters(context, result, itemQuery);
+        renderResetButton(context, itemQuery);
     });
 }
 
@@ -115,6 +123,8 @@ function updateFilterControls(context, options) {
 function triggerChange(instance) {
     stopMultiSelect();
     Events.trigger(instance, 'filterchange');
+    // show or hide reset filter button on any filter change
+    renderResetButton(document.querySelector('.filterDialog'), instance.options.query);
 }
 
 function setVisibility(context, options) {
@@ -234,6 +244,21 @@ class FilterDialog {
         triggerChange(this);
     }
 
+    /**
+         * @private
+         */
+    onResetAllFilters(context) {
+        const query = this.options.query;
+        FILTER_SETTINGS.forEach(setting => {
+            query[setting] = null;
+        });
+        query.StartIndex = 0;
+        for (const elem of context.querySelectorAll('input[type=checkbox]')) {
+            elem.checked = false;
+        }
+        triggerChange(this);
+    }
+
     /**
          * @param context {HTMLDivElement} The dialog
          */
@@ -401,6 +426,8 @@ class FilterDialog {
                 triggerChange(this);
             }
         });
+        const btnResetAllFilters = context.querySelector('.btnResetAllFilters');
+        btnResetAllFilters.addEventListener('click', () => this.onResetAllFilters(context));
     }
 
     show() {

src/components/filterdialog/filterdialog.template.html

@@ -140,4 +140,9 @@
         <div class="collapseContent filterOptions">
         </div>
     </div>
+
+    <button is="emby-button" type="button" class="btnResetAllFilters hide raised block">
+        <span class="listItemIcon listItemIcon-transparent material-icons delete" aria-hidden="true"></span>
+        <span>${ResetAllFilters}</span>
+    </button>
 </div>

src/constants/filterSettings.ts

@@ -0,0 +1,8 @@
+/** The allowed filter settings */
+export const FILTER_SETTINGS = [
+    'Filters', 'HasSubtitles', 'HasTrailer', 'HasSpecialFeature',
+    'HasThemeSong', 'HasThemeVideo', 'Genres', 'OfficialRatings',
+    'Tags', 'VideoTypes', 'IsSD', 'IsHD', 'Is4K', 'Is3D',
+    'IsFavorite', 'IsMissing', 'IsUnaired', 'ParentIndexNumber',
+    'SeriesStatus', 'Years'
+];

src/scripts/settings/userSettings.js

@@ -2,6 +2,7 @@ import Events from '../../utils/events.ts';
 import { toBoolean } from '../../utils/string.ts';
 import browser from '../browser';
 import appSettings from './appSettings';
+import { FILTER_SETTINGS } from '../../constants/filterSettings';
 
 function onSaveTimeout() {
     const self = this;
@@ -20,13 +21,6 @@ function saveServerPreferences(instance) {
 const allowedSortSettings = ['SortBy', 'SortOrder'];
 
 const filterSettingsPostfix = '-filter';
-const allowedFilterSettings = [
-    'Filters', 'HasSubtitles', 'HasTrailer', 'HasSpecialFeature',
-    'HasThemeSong', 'HasThemeVideo', 'Genres', 'OfficialRatings',
-    'Tags', 'VideoTypes', 'IsSD', 'IsHD', 'Is4K', 'Is3D',
-    'IsFavorite', 'IsMissing', 'IsUnaired', 'ParentIndexNumber',
-    'SeriesStatus', 'Years'
-];
 
 function filterQuerySettings(query, allowedItems) {
     return Object.keys(query)
@@ -548,7 +542,7 @@ export class UserSettings {
             sortSettings = filterQuerySettings(JSON.parse(sortSettings), allowedSortSettings);
         }
         if (filterSettings) {
-            filterSettings = filterQuerySettings(JSON.parse(filterSettings), allowedFilterSettings);
+            filterSettings = filterQuerySettings(JSON.parse(filterSettings), FILTER_SETTINGS);
         }
 
         return Object.assign(query, sortSettings, filterSettings);
@@ -561,7 +555,7 @@ export class UserSettings {
      */
     saveQuerySettings(key, query) {
         const sortSettings = filterQuerySettings(query, allowedSortSettings);
-        const filterSettings = filterQuerySettings(query, allowedFilterSettings);
+        const filterSettings = filterQuerySettings(query, FILTER_SETTINGS);
 
         this.set(key, JSON.stringify(sortSettings));
         this.set(key + filterSettingsPostfix, JSON.stringify(filterSettings), false);

src/strings/en-us.json

@@ -1435,6 +1435,7 @@
     "ReplaceExistingImages": "Replace existing images",
     "ReplaceTrickplayImages": "Replace existing trickplay images",
     "Reset": "Reset",
+    "ResetAllFilters": "Reset all filters",
     "ResetPassword": "Reset Password",
     "ResolutionMatchSource": "Match Source",
     "Restart": "Restart",