Add apply button to dropdowns

This commit is contained in:
Michael Shamoon 2020-12-20 01:04:54 -08:00
parent 37c2051e01
commit fa7b90a584
2 changed files with 10 additions and 0 deletions

View File

@ -24,6 +24,12 @@
<app-toggleable-dropdown-button [toggleableItem]="toggleableItem" [showCounts]="showCounts" (toggle)="toggleItem($event)"></app-toggleable-dropdown-button>
</ng-container>
</div>
<button *ngIf="type == types.Editing" class="list-group-item list-group-item-action bg-light" (click)="dropdown.close()" [disabled]="!hasBeenToggled || (toggleableItems | filter: filterText).length == 0">
<small class="ml-1" [ngClass]="{'font-weight-bold': hasBeenToggled && (toggleableItems | filter: filterText).length > 0}">Apply</small>
<svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
</svg>
</button>
</div>
</div>
</div>

View File

@ -89,12 +89,15 @@ export class FilterableDropdownComponent {
return this._showCounts && (this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected.length == 0))
}
hasBeenToggled:boolean = false
constructor(private filterPipe: FilterPipe) { }
toggleItem(toggleableItem: ToggleableItem): void {
if (this.singular && toggleableItem.state == ToggleableItemState.Selected) {
this._toggleableItems.filter(ti => ti.item.id !== toggleableItem.item.id).forEach(ti => ti.state = ToggleableItemState.NotSelected)
}
this.hasBeenToggled = true
this.toggle.emit(toggleableItem.item)
}
@ -103,6 +106,7 @@ export class FilterableDropdownComponent {
setTimeout(() => {
this.listFilterTextInput.nativeElement.focus();
}, 0)
this.hasBeenToggled = false
this.open.next()
} else {
this.filterText = ''