This is an automated email from the ASF dual-hosted git repository. hshpak pushed a commit to branch fix/DATALAB-2955/scope-of-bugs-for-view-list-of-filtered-images in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 53fcadb99b82bc83577ce51802b81e9e3d94bb9a Author: Hennadii_Shpak <[email protected]> AuthorDate: Mon Aug 8 13:26:43 2022 +0300 added disable apply btn if filter was not changed --- .../src/main/resources/webapp/package-lock.json | 11 +++++++++++ .../src/main/resources/webapp/package.json | 3 ++- .../page-filter/page-filter.component.html | 11 ++++++++++- .../page-filter/page-filter.component.ts | 21 +++++++++++++++++++-- .../src/app/resources/images/images.component.ts | 4 ---- 5 files changed, 42 insertions(+), 8 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/package-lock.json b/services/self-service/src/main/resources/webapp/package-lock.json index 305e75aaf..18aabf796 100644 --- a/services/self-service/src/main/resources/webapp/package-lock.json +++ b/services/self-service/src/main/resources/webapp/package-lock.json @@ -24,6 +24,7 @@ "@angular/router": "^11.2.14", "core-js": "^3.6.5", "guacamole-common-js": "^1.2.0", + "lodash.isequal": "^4.5.0", "moment": "^2.24.0", "moment-timezone": "^0.5.31", "ng-daterangepicker": "^1.1.0", @@ -8585,6 +8586,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz";, "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz";, + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz";, @@ -22326,6 +22332,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz";, "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz";, + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz";, diff --git a/services/self-service/src/main/resources/webapp/package.json b/services/self-service/src/main/resources/webapp/package.json index 1771ae73f..631d8a607 100644 --- a/services/self-service/src/main/resources/webapp/package.json +++ b/services/self-service/src/main/resources/webapp/package.json @@ -30,6 +30,7 @@ "@angular/router": "^11.2.14", "core-js": "^3.6.5", "guacamole-common-js": "^1.2.0", + "lodash.isequal": "^4.5.0", "moment": "^2.24.0", "moment-timezone": "^0.5.31", "ng-daterangepicker": "^1.1.0", @@ -57,4 +58,4 @@ "resolutions": { "webpack": "^5.0.0" } -} \ No newline at end of file +} 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 81449bbc8..dd527e809 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 @@ -20,6 +20,7 @@ <div class="dialog-content selection"> <ng-container *ngIf="$setFilterValueObservable | async"></ng-container> + <ng-container *ngIf="$changeIsApplyBtnDisabledObservable | async"></ng-container> <div id="scrolling" class="mat-reset"> <form class="filter-table__wrapper" [formGroup]="filterForm"> @@ -194,7 +195,15 @@ <div class="text-center m-top-20"> <button type="button" class="butt" mat-raised-button (click)="cancelFilter()" >Cancel</button> - <button type="button" class="butt butt-success" mat-raised-button (click)="confirmFilter()" >Apply</button> + <button + type="button" + [disabled]="($isApplyBtnDisabled | async)" + class="butt butt-success" + mat-raised-button + (click)="confirmFilter()" + > + Apply + </button> </div> </form> </div> 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 577bd8f38..61a614fd7 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 @@ -19,9 +19,11 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; -import { Observable } from 'rxjs'; +import { BehaviorSubject, Observable } from 'rxjs'; import { take, tap } from 'rxjs/operators'; +import isEqual from 'lodash.isequal'; + import { FilterFormPlaceholders } from './page-filter.config'; import { DropdownFieldNames, @@ -49,8 +51,13 @@ export class PageFilterComponent implements OnInit { readonly dropdownFieldNames: typeof DropdownFieldNames = DropdownFieldNames; readonly selectAllValue = DropdownSelectAllValue; + private $$isApplyBtnDisabled: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true); + private filterFormStartValue: ImageFilterFormValue; + filterForm: FormGroup; $setFilterValueObservable: Observable<ImageFilterFormValue>; + $changeIsApplyBtnDisabledObservable: Observable<ImageFilterFormValue>; + $isApplyBtnDisabled: Observable<boolean> = this.$$isApplyBtnDisabled.asObservable(); constructor( private fb: FormBuilder @@ -60,6 +67,7 @@ export class PageFilterComponent implements OnInit { this.createFilterForm(); this.onControlChange(DropdownFieldNames.imageName); this.setFilterValue(); + this.isFilterFormChanged(); } onSelectClick(): void { @@ -103,7 +111,16 @@ export class PageFilterComponent implements OnInit { } private setFilterValue(): void { - this.$setFilterValueObservable = this.$filterFormStartValue.pipe(tap(value => this.filterForm.patchValue(value))); + this.$setFilterValueObservable = this.$filterFormStartValue.pipe( + tap(value => this.filterFormStartValue = value), + tap(value => this.filterForm.patchValue(value) + )); + } + + private isFilterFormChanged(): void { + this.$changeIsApplyBtnDisabledObservable = this.filterForm.valueChanges.pipe( + tap(formValue => this.$$isApplyBtnDisabled.next(isEqual(formValue, this.filterFormStartValue))) + ); } get statuses() { 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 7d9a7ee12..82e173181 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 @@ -255,8 +255,4 @@ export class ImagesComponent implements OnInit, OnDestroy { private initIsImageListFiltered(): void { this.$isFiltered = this.imagesService.$isImageListFiltered; } - - get isImageSelected(): boolean { - return this.imagesService.isImageSelected(); - } } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
