inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-5213] Metadata - select list filter (#5961)

Browse Source 
* select filter input component

* include theme

* add filter input

* show input conditionally

* convert value to string for d:int type values

* filter list options pipe

* add components to module

* convert int value to string

* i18n

* update tests

* tests

* update config

* remove unneeded decorator

* fix lint

* update schema

* remove filter pipe

* provide a filtered list
This commit is contained in:
Cilibiu Bogdan
2020-08-10 01:35:46 +03:00
committed by GitHub
parent 7b7c996fab
commit 9b0db0a82e
15 changed files with 392 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.ts
View File

@@ -15,20 +15,23 @@
* limitations under the License.
*/
import { Component, Input, OnChanges } from '@angular/core';
import { Component, Input, OnChanges, OnDestroy } from '@angular/core';
import { CardViewSelectItemModel } from '../../models/card-view-selectitem.model';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { Observable } from 'rxjs';
import { Observable, Subject } from 'rxjs';
import { CardViewSelectItemOption } from '../../interfaces/card-view.interfaces';
import { MatSelectChange } from '@angular/material/select';
import { BaseCardView } from '../base-card-view';
import { AppConfigService } from '../../../app-config/app-config.service';
import { takeUntil, map } from 'rxjs/operators';
@Component({
selector: 'adf-card-view-selectitem',
templateUrl: './card-view-selectitem.component.html',
styleUrls: ['./card-view-selectitem.component.scss']
})
export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItemModel<string>> implements OnChanges {
export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItemModel<string>> implements OnChanges, OnDestroy {
static HIDE_FILTER_LIMIT = 5;
@Input() editable: boolean = false;
@@ -41,13 +44,29 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
displayEmpty: boolean = true;
value: string;
filter: string = '';
showInputFilter: boolean = false;
constructor(cardViewUpdateService: CardViewUpdateService) {
private onDestroy$ = new Subject<void>();
constructor(cardViewUpdateService: CardViewUpdateService, private appConfig: AppConfigService) {
super(cardViewUpdateService);
}
ngOnChanges(): void {
this.value = this.property.value;
this.value = this.property.value?.toString();
}
ngOnInit() {
this.getOptions()
.pipe(takeUntil(this.onDestroy$))
.subscribe((options: CardViewSelectItemOption<string>[]) => {
this.showInputFilter = options.length > this.optionsLimit;
});
}
onFilterInputChange(value: string) {
this.filter = value;
}
isEditable(): boolean {
@@ -58,6 +77,16 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
return this.options$ || this.property.options$;
}
getList(): Observable<CardViewSelectItemOption<string>[]> {
return this.getOptions()
.pipe(
map((items: CardViewSelectItemOption<string>[]) => items.filter(
(item: CardViewSelectItemOption<string>) =>
item.label.toLowerCase().includes(this.filter.toLowerCase()))),
takeUntil(this.onDestroy$)
);
}
onChange(event: MatSelectChange): void {
const selectedOption = event.value !== undefined ? event.value : null;
this.cardViewUpdateService.update(<CardViewSelectItemModel<string>> { ...this.property }, selectedOption);
@@ -71,4 +100,13 @@ export class CardViewSelectItemComponent extends BaseCardView<CardViewSelectItem
get showProperty(): boolean {
return this.displayEmpty || !this.property.isEmpty();
}
ngOnDestroy() {
this.onDestroy$.next();
this.onDestroy$.complete();
}
private get optionsLimit(): number {
return this.appConfig.get<number>('content-metadata.selectFilterLimit', CardViewSelectItemComponent.HIDE_FILTER_LIMIT);
}
}