This is an automated email from the ASF dual-hosted git repository. oleewere pushed a commit to branch cloudbreak in repository https://gitbox.apache.org/repos/asf/ambari-logsearch.git
commit 94c71ebda3f9929221405e94c33f9d3c8e4dca14 Author: Istvan Tobias <[email protected]> AuthorDate: Fri Nov 16 10:36:47 2018 +0100 [AMBARI-24891] [Log Serach UI] The Log Index Filter panel does not work (#23) * [AMBARI-24891] [Log Serach UI] The Log Index Filter panel does not work - dropdown selection fixes * [AMBARI-24891] [Log Serach UI] The Log Index Filter panel does not work - auto selection fix --- .../action-menu/action-menu.component.ts | 3 +++ .../filter-button/filter-button.component.ts | 2 +- .../menu-button/menu-button.component.html | 2 +- .../menu-button/menu-button.component.ts | 8 ++++++++ .../dropdown-button/dropdown-button.component.html | 8 +++++--- .../dropdown-button/dropdown-button.component.ts | 23 +++++++++++++++++++--- .../dropdown-list/dropdown-list.component.ts | 5 ++--- .../filter-dropdown/filter-dropdown.component.ts | 16 +-------------- 8 files changed, 41 insertions(+), 26 deletions(-) diff --git a/ambari-logsearch-web/src/app/components/action-menu/action-menu.component.ts b/ambari-logsearch-web/src/app/components/action-menu/action-menu.component.ts index 721ae93..a5d9ae2 100644 --- a/ambari-logsearch-web/src/app/components/action-menu/action-menu.component.ts +++ b/ambari-logsearch-web/src/app/components/action-menu/action-menu.component.ts @@ -75,6 +75,9 @@ export class ActionMenuComponent implements OnInit, OnDestroy { this.selectedClusterName$.takeUntil(this.destroyed$).subscribe( (clusterName: string) => this.setModalSubmitDisabled(!clusterName) ); + this.clustersListItems$.filter((items: ListItem[]) => items.some((item: ListItem) => item.isChecked)).first() + .map((items: ListItem[]) => items.find((item: ListItem) => item.isChecked)) + .subscribe((item) => this.selectedClusterName$.next(item.value)); } ngOnDestroy() { diff --git a/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.ts b/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.ts index d6f24e5..21cc151 100644 --- a/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.ts +++ b/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.ts @@ -51,7 +51,7 @@ export class FilterButtonComponent extends MenuButtonComponent implements Contro } writeValue(items: ListItem[]) { - this.selection = items; + this.selection = items ? (Array.isArray(items) ? items : [items] ) : []; } registerOnChange(callback: any): void { diff --git a/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html b/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html index 7061def..28cde2b 100644 --- a/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html +++ b/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html @@ -15,7 +15,7 @@ limitations under the License. --> -<div #dropdown [ngClass]="{'dropdown': hasSubItems, 'text-center': true, 'open': dropdownIsOpen, 'disabled': isDisabled}"> +<div #dropdown [ngClass]="{'dropdown': hasSubItems, 'text-center': true, 'open': dropdownIsOpen, 'disabled': isDisabled, 'has-selection': hasSelection}"> <a class="dropdown-toggle" [ngClass]="(labelClass || '') + (hasCaret ? ' has-caret' : '')" (click)="onMouseClick($event)" (mousedown)="onMouseDown($event)"> diff --git a/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts b/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts index faf2165..3174991 100644 --- a/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts +++ b/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts @@ -127,6 +127,14 @@ export class MenuButtonComponent { return this.subItems && this.subItems.filter((option: ListItem): boolean => option.isChecked); } + get hasSelection(): boolean { + return this.subItems && this.subItems.filter((option: ListItem): boolean => option.isChecked).length > 0; + } + + get totalSelection(): number { + return this.subItems ? this.subItems.filter((option: ListItem): boolean => option.isChecked).length : 0; + } + constructor(private utils: UtilsService) {} findItemIndexInList(item: ListItem, itemList: ListItem[] = this.subItems): number { diff --git a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html index 7140028..f4fdf4f 100644 --- a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html +++ b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html @@ -15,17 +15,19 @@ limitations under the License. --> -<div [ngClass]="{'dropup': isDropup}"> +<div [ngClass]="{'dropup': isDropup, 'has-selection': hasSelection}"> <button [ngClass]="['btn', 'dropdown-toggle', buttonClass]" data-toggle="dropdown"> <span class="filter-label"> <span *ngIf="iconClass || label" [class.plain]="!isMultipleChoice && !hideCaret && showSelectedValue"> <span *ngIf="iconClass" [ngClass]="iconClass"></span> - <span *ngIf="label && (!selection.length || isMultipleChoice || showCommonLabelWithSelection)" + <span *ngIf="label && (!hasSelection || isMultipleChoice || showCommonLabelWithSelection)" [class.label-before-selection]="isSelectionDisplayable"> {{label}} </span> </span> - <span *ngIf="isSelectionDisplayable">{{selection[0].label | translate}}</span> + <span *ngIf="isSelectionDisplayable"> + <span class="selected-item-label" *ngFor="let item of selectedItems">{{ item.label | translate }}</span> + </span> <span *ngIf="!hideCaret" class="caret"></span> </span> </button> diff --git a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts index 74341ae..2d04f21 100644 --- a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts +++ b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts @@ -67,14 +67,31 @@ export class DropdownButtonComponent { @Input() useClearToDefaultSelection = false; - protected selectedItems?: ListItem[] = []; + protected selectedItems: ListItem[] = []; get selection(): ListItem[] { return this.selectedItems; } set selection(items: ListItem[]) { - this.selectedItems = items; + this.selectedItems = <ListItem[]>(Array.isArray(items) ? items : (items || [])); + if (this.selectedItems.length > 1 && !this.isMultipleChoice) { + this.selectedItems = this.selectedItems.slice(0, 1); + } + if (this.isMultipleChoice && this.options) { + this.options.forEach((option: ListItem): void => { + const selectionItem = this.selectedItems.find((item: ListItem): boolean => this.utils.isEqual(item.value, option.value)); + option.isChecked = !!selectionItem; + }); + } + } + + get hasSelection(): boolean { + return this.selectedItems.length > 0; + } + + get totalSelection(): number { + return this.selectedItems.length; } // TODO handle case of selections with multiple items @@ -84,7 +101,7 @@ export class DropdownButtonComponent { * @returns {boolean} */ get isSelectionDisplayable(): boolean { - return this.showSelectedValue && !this.isMultipleChoice && this.selection.length > 0; + return this.showSelectedValue && !this.isMultipleChoice && this.hasSelection; } constructor( diff --git a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.ts b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.ts index 9967c80..14537b6 100644 --- a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.ts +++ b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.ts @@ -20,9 +20,8 @@ import { Component, OnChanges, AfterViewChecked, OnDestroy, SimpleChanges, Input, Output, EventEmitter, ViewChildren, ViewContainerRef, QueryList, ChangeDetectorRef, ElementRef, ViewChild, OnInit } from '@angular/core'; -import {Subscription} from 'rxjs/Subscription'; -import {ListItem} from '@app/classes/list-item'; -import {ComponentGeneratorService} from '@app/services/component-generator.service'; +import { ListItem } from '@app/classes/list-item'; +import { ComponentGeneratorService } from '@app/services/component-generator.service'; import { Subject } from 'rxjs/Subject'; @Component({ diff --git a/ambari-logsearch-web/src/app/modules/shared/components/filter-dropdown/filter-dropdown.component.ts b/ambari-logsearch-web/src/app/modules/shared/components/filter-dropdown/filter-dropdown.component.ts index 669fcc9..b0c766e 100644 --- a/ambari-logsearch-web/src/app/modules/shared/components/filter-dropdown/filter-dropdown.component.ts +++ b/ambari-logsearch-web/src/app/modules/shared/components/filter-dropdown/filter-dropdown.component.ts @@ -36,20 +36,6 @@ export class FilterDropdownComponent extends DropdownButtonComponent implements private onChange; - get selection(): ListItem[] { - return this.selectedItems; - } - - set selection(items: ListItem[]) { - this.selectedItems = items; - if (this.isMultipleChoice && this.options) { - this.options.forEach((option: ListItem): void => { - const selectionItem = items.find((item: ListItem): boolean => this.utils.isEqual(item.value, option.value)); - option.isChecked = Boolean(selectionItem); - }); - } - } - private _onChange(value) { if (this.onChange) { this.onChange(value); @@ -65,7 +51,7 @@ export class FilterDropdownComponent extends DropdownButtonComponent implements } writeValue(items: ListItem[]) { - this.selection = items || []; + this.selection = items ? (Array.isArray(items) ? items : [items] ) : []; } registerOnChange(callback: any): void {
