This is an automated email from the ASF dual-hosted git repository. hshpak pushed a commit to branch feat/DATALAB-2881/filter-function-to-Images-page in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit dc47b2160a096eb57a307b5b3dba416157969562 Author: Hennadii_Shpak <[email protected]> AuthorDate: Mon Aug 1 20:50:54 2022 +0300 added select all to dropdown value --- .../page-filter/page-filter.component.html | 42 +++++++++++++++++++--- .../page-filter/page-filter.component.scss | 2 +- .../page-filter/page-filter.component.ts | 15 +++++++- .../src/app/resources/images/images.component.ts | 4 --- .../src/app/resources/images/images.model.ts | 2 +- .../src/app/resources/images/images.service.ts | 15 ++++---- 6 files changed, 62 insertions(+), 18 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.html index 9de59de67..246335a68 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.html @@ -51,10 +51,18 @@ (click)="onSelectClick()" > <mat-select-trigger class="select__value"> - {{statuses.value | normalizeDropdownMultiValue | titlecase}} + {{($filterDropdownData | async).statuses | normalizeDropdownMultiValue | titlecase}} </mat-select-trigger> <mat-option - *ngFor="let status of ($filterDropdownData | async).imageStatuses" + *ngIf="($filterDropdownData | async).statuses.length > 1" + #allStatusesSelected + [value]="selectAllValue" + (click)="onClickAll(statuses, allStatusesSelected, dropdownFieldNames.statuses)" + > + Select all found + </mat-option> + <mat-option + *ngFor="let status of ($filterDropdownData | async).statuses" [value]="status" > {{ status | titlecase }} @@ -82,8 +90,16 @@ (click)="onSelectClick()" > <mat-select-trigger class="select__value"> - {{endpoints.value | normalizeDropdownMultiValue}} + {{($filterDropdownData | async).endpoints | normalizeDropdownMultiValue}} </mat-select-trigger> + <mat-option + *ngIf="($filterDropdownData | async).endpoints.length > 1" + #allEndpointsSelected + [value]="selectAllValue" + (click)="onClickAll(endpoints, allEndpointsSelected, dropdownFieldNames.endpoints)" + > + Select all found + </mat-option> <mat-option *ngFor="let endpoint of ($filterDropdownData | async).endpoints" [value]="endpoint" @@ -113,8 +129,16 @@ (click)="onSelectClick()" > <mat-select-trigger class="select__value"> - {{templateNames.value | normalizeDropdownMultiValue}} + {{($filterDropdownData | async).templateNames | normalizeDropdownMultiValue}} </mat-select-trigger> + <mat-option + *ngIf="($filterDropdownData | async).templateNames.length > 1" + #allTemplatesSelected + [value]="selectAllValue" + (click)="onClickAll(templateNames, allTemplatesSelected, dropdownFieldNames.templateNames)" + > + Select all found + </mat-option> <mat-option *ngFor="let template of ($filterDropdownData | async).templateNames" [value]="template" @@ -144,8 +168,16 @@ (click)="onSelectClick()" > <mat-select-trigger class="select__value"> - {{sharingStatuses.value | normalizeDropdownMultiValue | titlecase}} + {{($filterDropdownData | async).sharingStatuses | normalizeDropdownMultiValue | titlecase}} </mat-select-trigger> + <mat-option + *ngIf="($filterDropdownData | async).sharingStatuses.length > 1" + #allSharingStatusesSelected + [value]="selectAllValue" + (click)="onClickAll(sharingStatuses, allSharingStatusesSelected, dropdownFieldNames.sharingStatuses)" + > + Select all found + </mat-option> <mat-option *ngFor="let status of ($filterDropdownData | async).sharingStatuses" [value]="status" diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.scss index bd6e13870..29084d57c 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.scss @@ -19,7 +19,7 @@ .filter-table__wrapper { width: 450px; - padding: 20px; + padding: 20px 20px 30px; background-color: white; } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.ts index fdd5fcbcb..b02360964 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/page-filter/page-filter.component.ts @@ -20,10 +20,11 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { Observable } from 'rxjs'; -import { tap } from 'rxjs/operators'; +import { take, tap } from 'rxjs/operators'; import { FilterFormPlaceholders } from './page-filter.config'; import { DropdownFieldNames, ImageFilterFormDropdownData, ImageFilterFormValue } from '../../images'; +import { MatOption } from '@angular/material/core'; @Component({ selector: 'datalab-page-filter', @@ -41,6 +42,7 @@ export class PageFilterComponent implements OnInit { readonly placeholders: typeof FilterFormPlaceholders = FilterFormPlaceholders; readonly dropdownFieldNames: typeof DropdownFieldNames = DropdownFieldNames; + readonly selectAllValue = 'selectAllFound'; filterForm: FormGroup; @@ -73,6 +75,17 @@ export class PageFilterComponent implements OnInit { ).subscribe(); } + onClickAll(control: FormControl, allSelected: MatOption, key: DropdownFieldNames ): void { + if (allSelected.selected) { + this.$filterDropdownData.pipe( + tap(value => control.patchValue([...value[key], this.selectAllValue])), + take(1) + ).subscribe(); + } else { + this.statuses.patchValue([]); + } + } + private createFilterForm(): void { this.filterForm = this.fb.group({ imageName: '', diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts index 139661a44..db322c789 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts @@ -100,10 +100,6 @@ export class ImagesComponent implements OnInit, OnDestroy { this.imagesService.setFilterFormValue(FilterFormInitialValue); } - public trackBy(index, item) { - return null; - } - onCheckboxClick(element: ImageModel): void { element.isSelected = !element.isSelected; } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts index f3cf38f11..b3a66902f 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts @@ -51,7 +51,7 @@ export interface ClusterConfig { export interface ImageFilterFormDropdownData { imageName: string[]; - imageStatuses: string[]; + statuses: string[]; endpoints: string[]; templateNames: string[]; sharingStatuses: string[]; diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.service.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.service.ts index 15e79b0f9..258045c50 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.service.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { tap } from 'rxjs/operators'; +import { take, tap } from 'rxjs/operators'; import { BehaviorSubject, Observable } from 'rxjs'; import { @@ -42,14 +42,16 @@ export class ImagesService { getImagePageInfo(): Observable<ProjectModel[]> { return this.userImagesPageService.getFilterImagePage() .pipe( - tap(value => this.getImagePageData(value)) + tap(value => this.getImagePageData(value)), + take(1) ); } filterImagePageInfo(params: ImageFilterFormValue): Observable<ProjectModel[]> { return this.userImagesPageService.filterImagePage(params) .pipe( - tap(value => this.getImagePageData(value)) + tap(value => this.getImagePageData(value)), + take(1) ); } @@ -62,7 +64,8 @@ export class ImagesService { return this.userImagesPageService.shareImagesAllUser(shareParams) .pipe( - tap(value => this.getImagePageData(value)) + tap(value => this.getImagePageData(value)), + take(1) ); } @@ -112,7 +115,7 @@ export class ImagesService { this.$$filterFormValue.next(value); } - showImage(flag: boolean, field: keyof ImageModel, comparedValue: string) { + showImage(flag: boolean, field: keyof ImageModel, comparedValue: string): void { const projectList = this.$$cashedProjectList.getValue(); if (flag) { this.updateProjectList(projectList); @@ -136,7 +139,7 @@ export class ImagesService { private getDropdownDataList(): void { const dropdownList = { imageName: this.getDropdownDataItem(ImageModelNames.name), - imageStatuses: this.getDropdownDataItem(ImageModelNames.status), + statuses: this.getDropdownDataItem(ImageModelNames.status), endpoints: this.getDropdownDataItem(ImageModelNames.endpoint), templateNames: this.getDropdownDataItem(ImageModelNames.templateName), sharingStatuses: this.getDropdownDataItem(ImageModelNames.sharingStatus), --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
