You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by hs...@apache.org on 2022/08/08 10:26:57 UTC
[incubator-datalab] 01/01: added disable apply btn if filter was not changed
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 <bo...@gmail.com>
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: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org