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 0303e71a7bdc9542b1846385826947d5e7f2134c Author: Hennadii_Shpak <[email protected]> AuthorDate: Wed Aug 3 15:37:38 2022 +0300 fixed some bugs --- .../page-filter/page-filter.component.html | 13 +++++++----- .../page-filter/page-filter.component.ts | 16 ++++++++++----- .../src/app/resources/images/images.component.html | 5 +---- .../src/app/resources/images/images.component.scss | 10 ++++++++- .../src/app/resources/images/images.component.ts | 12 ++++++++--- .../src/app/resources/images/images.config.ts | 2 ++ .../src/app/resources/images/images.service.ts | 24 ++++++++++++++++++++-- 7 files changed, 62 insertions(+), 20 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 32a6d81b8..dc6a688a8 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 @@ -18,10 +18,13 @@ --> <div class="dialog-content selection"> + + <ng-container *ngIf="$setFilterValueObservable | async"></ng-container> + <div id="scrolling" class="mat-reset scrolling-content"> <form class="filter-table__wrapper" [formGroup]="filterForm"> <div class="form-control__wrapper control-group"> - <label class="label">Custom tag</label> + <label class="label">Image name</label> <input type="text" class="form-control" @@ -59,7 +62,7 @@ [value]="selectAllValue" (click)="onClickAll(statuses, allStatusesSelected, dropdownFieldNames.statuses)" > - Select all found + Select all </mat-option> <mat-option *ngFor="let status of ($filterDropdownData | async).statuses" @@ -98,7 +101,7 @@ [value]="selectAllValue" (click)="onClickAll(endpoints, allEndpointsSelected, dropdownFieldNames.endpoints)" > - Select all found + Select all </mat-option> <mat-option *ngFor="let endpoint of ($filterDropdownData | async).endpoints" @@ -137,7 +140,7 @@ [value]="selectAllValue" (click)="onClickAll(templateNames, allTemplatesSelected, dropdownFieldNames.templateNames)" > - Select all found + Select all </mat-option> <mat-option *ngFor="let template of ($filterDropdownData | async).templateNames" @@ -176,7 +179,7 @@ [value]="selectAllValue" (click)="onClickAll(sharingStatuses, allSharingStatusesSelected, dropdownFieldNames.sharingStatuses)" > - Select all found + Select all </mat-option> <mat-option *ngFor="let status of ($filterDropdownData | async).sharingStatuses" 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 b02360964..577bd8f38 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 @@ -23,7 +23,12 @@ import { Observable } from 'rxjs'; import { take, tap } from 'rxjs/operators'; import { FilterFormPlaceholders } from './page-filter.config'; -import { DropdownFieldNames, ImageFilterFormDropdownData, ImageFilterFormValue } from '../../images'; +import { + DropdownFieldNames, + DropdownSelectAllValue, + ImageFilterFormDropdownData, + ImageFilterFormValue +} from '../../images'; import { MatOption } from '@angular/material/core'; @Component({ @@ -42,9 +47,10 @@ export class PageFilterComponent implements OnInit { readonly placeholders: typeof FilterFormPlaceholders = FilterFormPlaceholders; readonly dropdownFieldNames: typeof DropdownFieldNames = DropdownFieldNames; - readonly selectAllValue = 'selectAllFound'; + readonly selectAllValue = DropdownSelectAllValue; filterForm: FormGroup; + $setFilterValueObservable: Observable<ImageFilterFormValue>; constructor( private fb: FormBuilder @@ -70,7 +76,7 @@ export class PageFilterComponent implements OnInit { } onControlChange(fieldName: keyof ImageFilterFormDropdownData): void { - this.filterForm.get(fieldName)?.valueChanges.pipe( + this.filterForm.get(fieldName)?.valueChanges.pipe( tap((inputValue: string) => this.onValueChanges.emit(inputValue)) ).subscribe(); } @@ -82,7 +88,7 @@ export class PageFilterComponent implements OnInit { take(1) ).subscribe(); } else { - this.statuses.patchValue([]); + control.patchValue([]); } } @@ -97,7 +103,7 @@ export class PageFilterComponent implements OnInit { } private setFilterValue(): void { - this.$filterFormStartValue.subscribe(value => this.filterForm.patchValue(value)); + this.$setFilterValueObservable = this.$filterFormStartValue.pipe(tap(value => this.filterForm.patchValue(value))); } get statuses() { diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html index 45d434241..c06456575 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html @@ -95,7 +95,7 @@ </span> <button mat-raised-button [disabled]="!(dataSource | async)?.length" class="butt filter__btn" (click)="onFilterClick()"> - <i class="material-icons">filter_list</i> + <i class="material-icons" [ngClass]="{'filtered-icon': isFiltered}">filter_list</i> <span class="filter__btn--name">Filter</span> <button *ngIf="isFiltered" type="button" (click)="onResetFilterClick($event)" class="close__btn">×</button> </button> @@ -241,9 +241,6 @@ <td class="cost-col image-table-cell"> <div class="shared-status--wrapper"> <span class="shared-status"> {{element.sharingStatus | titlecase}} </span> - <span *ngIf="element.sharingStatus !== sharedStatus.private" class="currency_details"> - <i class="material-icons">help_outline</i> - </span> </div> </td> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss index df8580fb6..5d9760898 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss @@ -214,7 +214,7 @@ table.resources { } & .resources-col.label-header { - width: 21.6%; + width: 21.3%; } & .settings.actions-col, @@ -243,3 +243,11 @@ table.resources { table.resources .label-header.settings { padding-right: 15px !important; } + +td.mat-cell.image-page__project { + padding-left: 49px; +} + +.filtered-icon { + color: #35afd5; +} 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 0a9b1c695..f1066cd31 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 @@ -34,7 +34,11 @@ import { ImageStatuses, Localstorage_Key, Placeholders, - Shared_Status, DropdownFieldNames, FilterFormInitialValue, ImageModelKeysForFilter, + Shared_Status, + DropdownFieldNames, + FilterFormInitialValue, + ImageModelKeysForFilter, + DropdownSelectAllValue, } from './images.config'; import { ShareImageDialogComponent } from '../exploratory/share-image/share-image-dialog.component'; import { ImagesService } from './images.service'; @@ -153,7 +157,8 @@ export class ImagesComponent implements OnInit, OnDestroy { } onFilterApplyClick(filterFormValue: ImageFilterFormValue): void { - this.imagesService.filterImagePageInfo(filterFormValue).subscribe(); + const normalizeFilterFormValue = this.imagesService.normalizeFilterFormValue(filterFormValue, DropdownSelectAllValue); + this.imagesService.filterImagePageInfo(normalizeFilterFormValue).subscribe(); this.imagesService.setFilterFormValue(filterFormValue); this.isFiltered = true; this.imagesService.closeFilter(); @@ -164,7 +169,8 @@ export class ImagesComponent implements OnInit, OnDestroy { } onControlChanges(controlName: keyof ImageFilterFormDropdownData, inputValue: string): void { - this.imagesService.filterDropdownField(DropdownFieldNames.imageName, inputValue); + const normalizedInputValue = inputValue.toLowerCase(); + this.imagesService.filterDropdownField(DropdownFieldNames.imageName, normalizedInputValue); } toggleShowActive(): void { diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts index b09c61731..0fa0c8232 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts @@ -106,3 +106,5 @@ export enum ImageModelKeysForFilter { templateName = 'templateName', shared = 'shared' } + +export const DropdownSelectAllValue = 'selectAllFound'; 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 f60ac898f..e8715ff8b 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 @@ -72,11 +72,13 @@ export class ImagesService { } getActiveProject(projectName: string): void { + const projectList = this.$$cashedProjectList.getValue(); if (!projectName) { - this.updateProjectList(this.$$cashedProjectList.getValue()); + this.updateProjectList(projectList); } else { - const currentProject = this.$$cashedProjectList.getValue().find(({project}) => project === projectName); + const currentProject = projectList.find(({project}) => project === projectName); this.updateProjectList([currentProject]); + this.$$isProjectListEmpty.next(this.isProjectListEmpty([currentProject])); } } @@ -131,6 +133,24 @@ export class ImagesService { } } + normalizeFilterFormValue(filterFormValue: ImageFilterFormValue, exceptionValue: string = '') { + if (!exceptionValue) { + return filterFormValue; + } + return (<any>Object).entries(filterFormValue) + .reduce((acc, fieldItem) => { + const [ fieldName, fieldValue ] = fieldItem; + let value; + + if (typeof fieldValue === 'string') { + value = fieldValue; + } else { + value = fieldValue.filter(item => item !== exceptionValue); + } + return {...acc, [fieldName]: value}; + }, <ImageFilterFormValue>{}); + } + private filterByCondition(arr: ProjectModel[], field: keyof ImageModel, comparedValue: string) { return arr.map(item => { const filteredImageList = item.images.filter(image => image[field] === comparedValue); --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
