Toggling of items

This commit is contained in:
Michael Shamoon 2020-12-08 23:39:38 -08:00
parent f3fd0fcf72
commit 23ba3be68f
2 changed files with 70 additions and 9 deletions

View File

@ -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>

View File

@ -119,8 +119,8 @@ export class DocumentListComponent implements OnInit {
})
}
filterByTag(tag_id: number, singleton: boolean = false) {
let filterRules = singleton ? [] : this.list.filterRules
filterByTag(tag_id: number) {
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) {
let filterRules = singleton ? [] : this.list.filterRules
filterByCorrespondent(correspondent_id: number) {
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) {
let filterRules = singleton ? [] : this.list.filterRules
filterByDocumentType(document_type_id: number) {
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
}
}