From 91a7b90639ba2bd123642a21aad412c0b2c9400f Mon Sep 17 00:00:00 2001
From: engine <engine@pentagon.usa.gov>
Date: Mon, 25 Nov 2024 20:57:40 +0100
Subject: [PATCH] add "reset all filters" button filter dialog

---
 .../filterdialog/filterIndicator.js           |  2 +-
 src/components/filterdialog/filterdialog.js   | 53 +++++++++++++++++++
 .../filterdialog/filterdialog.template.html   |  5 ++
 src/strings/en-us.json                        |  1 +
 4 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/components/filterdialog/filterIndicator.js b/src/components/filterdialog/filterIndicator.js
index 5686aef579..90b13cd0d9 100644
--- a/src/components/filterdialog/filterIndicator.js
+++ b/src/components/filterdialog/filterIndicator.js
@@ -1,6 +1,6 @@
 import './filterIndicator.scss';
 
-function getFilterStatus(query) {
+export function getFilterStatus(query) {
     return Boolean(
         query.Filters
             || query.IsFavorite
diff --git a/src/components/filterdialog/filterdialog.js b/src/components/filterdialog/filterdialog.js
index 3eacd7db82..5c0e656c15 100644
--- a/src/components/filterdialog/filterdialog.js
+++ b/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';
@@ -58,6 +59,15 @@ function renderFilters(context, result, query) {
     });
 }
 
+function renderResetButton(context, query) {
+    const elem = context.querySelector('.btnResetAllFilters');
+    if (getFilterStatus(query) === true) {
+        elem.classList.remove('hide');
+        return;
+    }
+    elem.classList.add('hide');
+}
+
 function loadDynamicFilters(context, apiClient, userId, itemQuery) {
     return apiClient.getJSON(apiClient.getUrl('Items/Filters', {
         UserId: userId,
@@ -65,6 +75,7 @@ function loadDynamicFilters(context, apiClient, userId, itemQuery) {
         IncludeItemTypes: itemQuery.IncludeItemTypes
     })).then(function (result) {
         renderFilters(context, result, itemQuery);
+        renderResetButton(context, itemQuery);
     });
 }
 
@@ -115,6 +126,13 @@ function updateFilterControls(context, options) {
 function triggerChange(instance) {
     stopMultiSelect();
     Events.trigger(instance, 'filterchange');
+    // show or hide reset filter button on any filter change
+    const elem = document.querySelector('.btnResetAllFilters');
+    if (getFilterStatus(instance.options.query) === true) {
+        elem.classList.remove('hide');
+        return;
+    }
+    elem.classList.add('hide');
 }
 
 function setVisibility(context, options) {
@@ -234,6 +252,39 @@ class FilterDialog {
         triggerChange(this);
     }
 
+    /**
+         * @private
+         */
+    onResetAllFilters(context) {
+        const query = this.options.query;
+        query.Filters = null;
+        query.IsFavorite = null;
+        query.VideoTypes = null;
+        query.SeriesStatus = null;
+        query.Is4K = null;
+        query.IsHD = null;
+        query.IsSD = null;
+        query.Is3D = null;
+        query.HasSubtitles = null;
+        query.HasTrailer = null;
+        query.HasSpecialFeature = null;
+        query.HasThemeSong = null;
+        query.HasThemeVideo = null;
+        query.IsMissing = null;
+        query.ParentIndexNumber = null;
+        query.Genres = null;
+        query.Tags = null;
+        query.Years = null;
+        query.OfficialRatings = null;
+        query.IsUnaired = null;
+        query.SeriesStatus = 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 +452,8 @@ class FilterDialog {
                 triggerChange(this);
             }
         });
+        const btnResetAllFilters = context.querySelector('.btnResetAllFilters');
+        btnResetAllFilters.addEventListener('click', () => this.onResetAllFilters(context));
     }
 
     show() {
diff --git a/src/components/filterdialog/filterdialog.template.html b/src/components/filterdialog/filterdialog.template.html
index 0979d01128..004f444956 100644
--- a/src/components/filterdialog/filterdialog.template.html
+++ b/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 emby-button raised">
+        <span class="listItemIcon listItemIcon-transparent material-icons delete" aria-hidden="true"></span>
+        <span>${ResetAllFilters}</span>
+    </button>
 </div>
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index 9c69f90285..84ae14521a 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -1441,6 +1441,7 @@
     "ReplaceExistingImages": "Replace existing images",
     "ReplaceTrickplayImages": "Replace existing trickplay images",
     "Reset": "Reset",
+    "ResetAllFilters": "Reset all filters",
     "ResetPassword": "Reset Password",
     "ResolutionMatchSource": "Match Source",
     "Restart": "Restart",