Clearing filters on saved views should reset them to initial rules

src-ui/src/app/components/document-list/document-list.component.html

@@ -78,7 +78,7 @@
 </app-page-header>
 
 <div class="w-100 mb-2 mb-sm-4">
-  <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
+  <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [rulesModified]="filterRulesModified" (reset)="resetFilters()" #filterEditor></app-filter-editor>
   <app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
 </div>
 

src-ui/src/app/components/document-list/document-list.component.ts

@@ -30,10 +30,6 @@ export class DocumentListComponent implements OnInit {
 
   displayMode = 'smallCards' // largeCards, smallCards, details
 
-  get isFiltered() {
-    return this.list.filterRules?.length > 0
-  }
-
   getTitle() {
     return this.list.savedViewTitle || $localize`Documents`
   }
@@ -62,18 +58,16 @@ export class DocumentListComponent implements OnInit {
             this.router.navigate(["404"])
             return
           }
-
           this.list.savedView = view
-          this.list.reload()
         })
       } else {
         this.list.savedView = null
-        this.list.reload()
       }
+
+      this.list.reload()
     })
   }
 
-
   loadViewConfig(view: PaperlessSavedView) {
     this.list.load(view)
     this.list.reload()
@@ -99,6 +93,7 @@ export class DocumentListComponent implements OnInit {
         sort_reverse: this.list.sortReverse,
         sort_field: this.list.sortField
       }
+
       this.savedViewService.create(savedView).subscribe(() => {
         modal.close()
         this.toastService.showInfo($localize`View "${savedView.name}" created successfully.`)
@@ -109,6 +104,40 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
+  resetFilters(): void {
+    if (this.list.savedViewId) {
+      this.savedViewService.getCached(this.list.savedViewId).subscribe(viewUntouched => {
+        this.list.filterRules = viewUntouched.filter_rules
+      })
+    } else {
+      this.list.filterRules = []
+    }
+    this.list.reload()
+  }
+
+  get filterRulesModified(): boolean {
+    if (this.list.savedView == null) {
+      return this.list.filterRules.length > 0 // documents list is modified if it has any filters
+    } else {
+      // compare savedView current filters vs original
+      let modified = false
+      this.savedViewService.getCached(this.list.savedViewId).subscribe(view => {
+        let filterRulesInitial = view.filter_rules
+
+        if (this.list.filterRules.length !== filterRulesInitial.length) modified = true
+        else {
+          this.list.filterRules.forEach(rule => {
+            if (filterRulesInitial.find(fri => fri.rule_type == rule.rule_type && fri.value == rule.value) == undefined) modified = true
+          })
+          filterRulesInitial.forEach(rule => {
+            if (this.list.filterRules.find(fr => fr.rule_type == rule.rule_type && fr.value == rule.value) == undefined) modified = true
+          })
+        }
+      })
+      return modified
+    }
+  }
+
   clickTag(tagID: number) {
     this.list.selectNone()
     setTimeout(() => {

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html

@@ -41,10 +41,10 @@
    </div>
    <div class="w-100 d-xl-none"></div>
    <div class="col col-xl-auto mb-2 mb-xl-0">
-     <button class="btn btn-link btn-sm px-0 mx-0 ml-xl-n4" [disabled]="!hasFilters()" (click)="clearSelected()">
+     <button class="btn btn-link btn-sm px-0 mx-0 ml-xl-n4" [disabled]="!rulesModified" (click)="resetSelected()">
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
-       </svg>&nbsp;<ng-container i18n>Clear all filters</ng-container>
+       </svg>&nbsp;<ng-container i18n>Reset filters</ng-container>
 
      </button>
    </div>

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts

@@ -153,16 +153,16 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
   @Output()
   filterRulesChange = new EventEmitter<FilterRule[]>()
 
+  @Output()
+  reset = new EventEmitter()
+
+  @Input()
+  rulesModified: boolean = false
+
   updateRules() {
     this.filterRulesChange.next(this.filterRules)
   }
 
-  hasFilters() {
-    return this._titleFilter || 
-      this.dateAddedAfter || this.dateAddedBefore || this.dateCreatedAfter || this.dateCreatedBefore ||
-      this.tagSelectionModel.selectionSize() || this.correspondentSelectionModel.selectionSize() || this.documentTypeSelectionModel.selectionSize()
-  }
-
   get titleFilter() {
     return this._titleFilter
   }
@@ -194,16 +194,8 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
     this.titleFilterDebounce.complete()
   }
 
-  clearSelected() {
-    this._titleFilter = ""
-    this.tagSelectionModel.clear(false)
-    this.documentTypeSelectionModel.clear(false)
-    this.correspondentSelectionModel.clear(false)
-    this.dateAddedBefore = null
-    this.dateAddedAfter = null
-    this.dateCreatedBefore = null
-    this.dateCreatedAfter = null
-    this.updateRules()
+  resetSelected() {
+    this.reset.next()
   }
 
   toggleTag(tagId: number) {