feat(webui): reset filter button

komga-webui/src/components/FilterDrawer.vue

@@ -7,6 +7,22 @@
     disable-route-watcher
     class="fill-height"
   >
+    <v-fab-transition>
+      <v-btn
+        v-if="clearButton"
+        absolute
+        top
+        right
+        icon
+        :style="'z-index: 10; background: ' + $vuetify.theme.currentTheme.base"
+        elevation="2"
+        @click="clear"
+        color="primary"
+      >
+        <v-icon>mdi-filter-variant-remove</v-icon>
+      </v-btn>
+    </v-fab-transition>
+
     <slot></slot>
 
     <template v-if="$slots.filter">
@@ -36,15 +52,24 @@ export default Vue.extend({
   },
   props: {
     value: Boolean,
+    clearButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   watch: {
-    value (val) {
+    value(val) {
       this.display = val
     },
-    display (val) {
+    display(val) {
       !val && this.$emit('input', false)
     },
   },
+  methods: {
+    clear() {
+      this.$emit('clear')
+    },
+  },
 })
 </script>
 

komga-webui/src/locales/en.json

@@ -181,7 +181,8 @@
     "series": "Series",
     "tags": "Tags",
     "use_filter_panel_to_change_filter": "Use the filter panel to change the active filter",
-    "year": "year"
+    "year": "year",
+    "reset_filters": "Reset filters"
   },
   "dashboard": {
     "keep_reading": "Keep Reading",

komga-webui/src/views/BrowseCollection.vue

@@ -65,7 +65,11 @@
       </toolbar-sticky>
     </v-scroll-y-transition>
 
-    <filter-drawer v-model="drawer">
+    <filter-drawer
+      v-model="drawer"
+      :clear-button="filterActive"
+      @clear="resetFilters"
+    >
       <template v-slot:default>
         <filter-list
           :filters-options="filterOptionsList"
@@ -89,6 +93,7 @@
         icon="mdi-book-multiple"
         icon-color="secondary"
       >
+        <v-btn @click="resetFilters">{{ $t('common.reset_filters') }}</v-btn>
       </empty-state>
 
       <item-browser
@@ -251,6 +256,14 @@ export default Vue.extend({
     },
   },
   methods: {
+    resetFilters() {
+      this.drawer = false
+      for (const prop in this.filters) {
+        this.$set(this.filters, prop, [])
+      }
+      this.$store.commit('setCollectionFilter', {id: this.collectionId, filter: this.filters})
+      this.updateRouteAndReload()
+    },
     async resetParams(route: any, collectionId: string) {
       // load dynamic filters
       this.$set(this.filterOptions, 'library', this.$store.state.komgaLibraries.libraries.map((x: LibraryDto) => ({

komga-webui/src/views/BrowseLibraries.vue

@@ -36,7 +36,11 @@
 
     <library-navigation v-if="$vuetify.breakpoint.name === 'xs'" :libraryId="libraryId" bottom-navigation/>
 
-    <filter-drawer v-model="drawer">
+    <filter-drawer
+      v-model="drawer"
+      :clear-button="sortOrFilterActive"
+      @clear="resetSortAndFilters"
+    >
       <template v-slot:default>
         <filter-list
           :filters-options="filterOptionsList"
@@ -68,6 +72,7 @@
         icon="mdi-book-multiple"
         icon-color="secondary"
       >
+        <v-btn @click="resetSortAndFilters">{{ $t('common.reset_filters') }}</v-btn>
       </empty-state>
 
       <template v-else>
@@ -283,6 +288,16 @@ export default Vue.extend({
     },
   },
   methods: {
+    resetSortAndFilters() {
+      this.drawer = false
+      for (const prop in this.filters) {
+        this.$set(this.filters, prop, [])
+      }
+      this.sortActive = this.sortDefault
+      this.$store.commit('setLibraryFilter', {id: this.libraryId, filter: this.filters})
+      this.$store.commit('setLibrarySort', {id: this.libraryId, sort: this.sortActive})
+      this.updateRouteAndReload()
+    },
     async resetParams(route: any, libraryId: string) {
       this.sortActive = parseQuerySort(route.query.sort, this.sortOptions) ||
         this.$store.getters.getLibrarySort(route.params.libraryId) ||

komga-webui/src/views/BrowseSeries.vue

@@ -47,7 +47,11 @@
       @edit="editMultipleBooks"
     />
 
-    <filter-drawer v-model="drawer">
+    <filter-drawer
+      v-model="drawer"
+      :clear-button="sortOrFilterActive"
+      @clear="resetSortAndFilters"
+    >
       <template v-slot:default>
         <filter-list
           :filters-options="filterOptionsList"
@@ -569,6 +573,14 @@ export default Vue.extend({
     next()
   },
   methods: {
+    resetSortAndFilters() {
+      this.drawer = false
+      for (const prop in this.filters) {
+        this.$set(this.filters, prop, [])
+      }
+      this.sortActive = this.sortDefault
+      this.updateRouteAndReload()
+    },
     async resetParams(route: any, seriesId: string) {
       this.sortActive = this.parseQuerySortOrDefault(route.query.sort)