Refactored dropdowns allow clearing, active checkmarks

This commit is contained in:
Michael Shamoon 2020-12-10 15:36:17 -08:00
parent db02d68a5a
commit f83185bfe4
3 changed files with 22 additions and 6 deletions

View File

@ -1,6 +1,6 @@
<div class="btn-group" ngbDropdown role="group">
<button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>{{title}}</button>
<div class="dropdown-menu quick-filter" ngbDropdownMenu aria-labelledby="dropdown{{title}}">
<div class="dropdown-menu quick-filter" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
<div class="list-group list-group-flush">
<input class="list-group-item form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}">
<ng-container *ngIf="(items | filter: filterText).length > 0">

View File

@ -1,7 +1,6 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FilterRuleType, FILTER_CORRESPONDENT, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_TITLE, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
import { ObjectWithId } from 'src/app/data/object-with-id';
import { MatchingModel } from 'src/app/data/matching-model';
@Component({
selector: 'app-filter-dropdown',
@ -18,8 +17,8 @@ export class FilterDropdownComponent implements OnInit {
@Output()
toggle = new EventEmitter()
items: MatchingModel[] = []
itemsActive: MatchingModel[] = []
items: ObjectWithId[] = []
itemsActive: ObjectWithId[] = []
title: string
filterText: string
@ -29,6 +28,6 @@ export class FilterDropdownComponent implements OnInit {
}
toggleItem(item: ObjectWithId) {
this.toggle.emit(item, this.filterRuleTypeID)
this.toggle.emit(item)
}
}

View File

@ -65,11 +65,21 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
});
}
setDropdownItems(items: ObjectWithId[], filterRuleTypeID: number) {
setDropdownItems(items: ObjectWithId[], filterRuleTypeID: number): void {
let dropdown: FilterDropdownComponent = this.getDropdownByFilterRuleTypeID(filterRuleTypeID)
if (dropdown) {
dropdown.items = items
}
this.updateDropdownActiveItems(dropdown)
}
updateDropdownActiveItems(dropdown: FilterDropdownComponent): void {
let activeRulesValues = this.filterRules.filter(r => r.type.id == dropdown.filterRuleTypeID).map(r => r.value)
let activeItems = []
if (activeRulesValues.length > 0) {
activeItems = dropdown.items.filter(i => activeRulesValues.includes(i.id))
}
dropdown.itemsActive = activeItems
}
getDropdownByFilterRuleTypeID(filterRuleTypeID: number): FilterDropdownComponent {
@ -83,6 +93,7 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
clearSelected() {
this.filterRules.splice(0,this.filterRules.length)
this.updateTextFilterInput()
this.quickFilterDropdowns.forEach(d => this.updateDropdownActiveItems(d))
this.clear.next()
}
@ -118,6 +129,8 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
if (existingRule && existingRule.value == item.id && filterRuleType.id == FILTER_HAS_TAG) {
filterRules.splice(filterRules.indexOf(existingRule), 1)
} else if (existingRule && filterRuleType.id == FILTER_HAS_TAG) {
filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == filterRuleType.id), value: item.id})
} else if (existingRule && existingRule.value == item.id) {
return
} else if (existingRule) {
@ -125,6 +138,10 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
} else {
filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == filterRuleType.id), value: item.id})
}
let dropdown = this.getDropdownByFilterRuleTypeID(filterRuleTypeID)
this.updateDropdownActiveItems(dropdown)
this.filterRules = filterRules
this.applySelected()
}