Toggling of items

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

@@ -77,7 +77,10 @@
         <div class="list-group list-group-flush">
           <input class="list-group-item form-control" type="text" [(ngModel)]="searchText" placeholder="Filter tags">
           <ng-container *ngIf="(tags | filter: searchText).length > 0">
-            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let tag of tags | filter: searchText; let i = index" (click)="filterByTag(tag.id, true)">
+            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let tag of tags | filter: searchText; let i = index" (click)="toggleFilterByTag(tag.id)">
+              <svg *ngIf="currentViewIncludesTag(tag.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
+              </svg>
               {{tag.name}}
               <span class="badge bg-primary text-light rounded-pill">{{tag.document_count}}</span>
             </button>
@@ -92,7 +95,10 @@
         <div class="list-group list-group-flush">
           <input class="list-group-item form-control" type="text" [(ngModel)]="searchText" placeholder="Filter correspondents">
           <ng-container *ngIf="(correspondents | filter: searchText).length > 0">
-            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let correspondent of correspondents | filter: searchText; let i = index" (click)="filterByCorrespondent(correspondent.id, true)">
+            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let correspondent of correspondents | filter: searchText; let i = index" (click)="toggleFilterByCorrespondent(correspondent.id)">
+              <svg *ngIf="currentViewIncludesCorrespondent(correspondent.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
+              </svg>
               {{correspondent.name}}
               <span class="badge bg-primary text-light rounded-pill">{{correspondent.document_count}}</span>
             </button>
@@ -107,7 +113,10 @@
         <div class="list-group list-group-flush">
           <input class="list-group-item form-control" type="text" [(ngModel)]="searchText" placeholder="Filter tags">
           <ng-container *ngIf="(documentTypes | filter: searchText).length > 0">
-            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let documentType of documentTypes | filter: searchText; let i = index" (click)="filterByDocumentType(documentType.id, true)">
+            <button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let documentType of documentTypes | filter: searchText; let i = index" (click)="toggleFilterByDocumentType(documentType.id)">
+              <svg *ngIf="currentViewIncludesDocumentType(documentType.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
+              </svg>
               {{documentType.name}}
               <span class="badge bg-primary text-light rounded-pill">{{documentType.document_count}}</span>
             </button>

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

@@ -119,8 +119,8 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
-  filterByTag(tag_id: number, singleton: boolean = false) {
+  filterByTag(tag_id: number) {
-    let filterRules = singleton ? [] : this.list.filterRules
+    let filterRules = this.list.filterRules
     if (filterRules.find(rule => rule.type.id == FILTER_HAS_TAG && rule.value == tag_id)) {
       return
     }
@@ -130,8 +130,8 @@ export class DocumentListComponent implements OnInit {
     this.applyFilterRules()
   }
 
-  filterByCorrespondent(correspondent_id: number, singleton: boolean = false) {
+  filterByCorrespondent(correspondent_id: number) {
-    let filterRules = singleton ? [] : this.list.filterRules
+    let filterRules = this.list.filterRules
     let existing_rule = filterRules.find(rule => rule.type.id == FILTER_CORRESPONDENT)
     if (existing_rule && existing_rule.value == correspondent_id) {
       return
@@ -144,8 +144,8 @@ export class DocumentListComponent implements OnInit {
     this.applyFilterRules()
   }
 
-  filterByDocumentType(document_type_id: number, singleton: boolean = false) {
+  filterByDocumentType(document_type_id: number) {
-    let filterRules = singleton ? [] : this.list.filterRules
+    let filterRules = this.list.filterRules
     let existing_rule = filterRules.find(rule => rule.type.id == FILTER_DOCUMENT_TYPE)
     if (existing_rule && existing_rule.value == document_type_id) {
       return
@@ -158,4 +158,56 @@ export class DocumentListComponent implements OnInit {
     this.applyFilterRules()
   }
 
+  findRuleIndex(type_id: number, value: any) {
+    return this.list.filterRules.findIndex(rule => rule.type.id == type_id && rule.value == value)
+  }
+
+  toggleFilterByTag(tag_id: number) {
+    let existingRuleIndex = this.findRuleIndex(FILTER_HAS_TAG, tag_id)
+    if (existingRuleIndex !== -1) {
+      let filterRules = this.list.filterRules
+      filterRules.splice(existingRuleIndex, 1)
+      this.filterRules = filterRules
+      this.applyFilterRules()
+    } else {
+      this.filterByTag(tag_id)
+    }
+  }
+
+  toggleFilterByCorrespondent(correspondent_id: number) {
+    let existingRuleIndex = this.findRuleIndex(FILTER_CORRESPONDENT, correspondent_id)
+    if (existingRuleIndex !== -1) {
+      let filterRules = this.list.filterRules
+      filterRules.splice(existingRuleIndex, 1)
+      this.filterRules = filterRules
+      this.applyFilterRules()
+    } else {
+      this.filterByCorrespondent(correspondent_id)
+    }
+  }
+
+  toggleFilterByDocumentType(document_type_id: number) {
+    let existingRuleIndex = this.findRuleIndex(FILTER_DOCUMENT_TYPE, document_type_id)
+    if (existingRuleIndex !== -1) {
+      let filterRules = this.list.filterRules
+      filterRules.splice(existingRuleIndex, 1)
+      this.filterRules = filterRules
+      this.applyFilterRules()
+    } else {
+      this.filterByDocumentType(document_type_id)
+    }
+  }
+
+  currentViewIncludesTag(tag_id: number) {
+    return this.findRuleIndex(FILTER_HAS_TAG, tag_id) !== -1
+  }
+
+  currentViewIncludesCorrespondent(correspondent_id: number) {
+    return this.findRuleIndex(FILTER_CORRESPONDENT, correspondent_id) !== -1
+  }
+
+  currentViewIncludesDocumentType(document_type_id: number) {
+    return this.findRuleIndex(FILTER_DOCUMENT_TYPE, document_type_id) !== -1
+  }
+
 }