From ee136e8a80bb262539228a530bb9e1a589d83d98 Mon Sep 17 00:00:00 2001 From: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com> Date: Mon, 3 Jun 2024 17:19:26 +0530 Subject: [PATCH] [ACS-7981] UI fixes for create categories dialog (#9754) * [ACS-7981] Fixed UI for create categories dialog * [ACS-7981] Adding mat selectors for create categories dialog * [ACS-7981] Create category dialog no longer allows ability to add existing categories --- .../categories-management.component.html | 6 +- .../categories-management.component.scss | 20 +++- .../categories-management.component.ts | 97 +++++++++---------- .../src/lib/dialogs/confirm.dialog.scss | 4 - lib/core/src/lib/styles/_mat-selectors.scss | 1 + 5 files changed, 67 insertions(+), 61 deletions(-) diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html index 1f67b7bccc8..80195fd17d7 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html @@ -1,8 +1,6 @@
- {{ category.name }} + (click)='addCategoryToAssign(category, isCRUDMode || !multiSelect && categories.length > 0)'> + {{ category.name }}

diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss index eaf93e97a2c..a4d8060641a 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss @@ -1,8 +1,9 @@ +@import 'styles/mat-selectors'; + .adf-categories-management { .adf-category-name-field { justify-content: space-between; - width: 100%; - color: var(--adf-metadata-property-panel-text-color); + padding: 0 10px; background: var(--adf-metadata-buttons-background-color); height: 32px; border-radius: 12px; @@ -10,8 +11,15 @@ input { background-color: transparent; - padding: 7px 8px 8px; + color: var(--adf-metadata-property-panel-text-color); + padding: 7px 0; width: 100%; + border: none; + outline: none; + } + + #{$mat-form-field-error} { + padding-top: 5px; } } @@ -46,7 +54,7 @@ background-color: inherit; color: inherit; - &:hover { + &:not(#{$mat-list-item-disabled}):hover { cursor: pointer; background: var(--adf-theme-mat-grey-color-a200); } @@ -73,4 +81,8 @@ cursor: pointer; overflow-wrap: anywhere; } + + #{$mat-list-item-disabled} #{$mat-list-item-primary-text} { + opacity: 1; + } } diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts index 4b5cd191e8e..70348de3ad0 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts @@ -31,10 +31,10 @@ interface CategoryNameControlErrors { } @Component({ - selector: 'adf-categories-management', - templateUrl: './categories-management.component.html', - styleUrls: ['./categories-management.component.scss'], - encapsulation: ViewEncapsulation.None + selector: 'adf-categories-management', + templateUrl: './categories-management.component.html', + styleUrls: ['./categories-management.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CategoriesManagementComponent implements OnInit, OnDestroy { readonly nameErrorMessagesByErrors = new Map([ @@ -49,11 +49,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { private onDestroy$ = new Subject(); private _categoryNameControl = new FormControl( '', - [ - this.validateIfNotAlreadyAdded.bind(this), - this.validateEmptyCategory, - Validators.required - ], + [this.validateIfNotAlreadyAdded.bind(this), this.validateEmptyCategory, Validators.required], this.validateIfNotAlreadyCreated.bind(this) ); private _existingCategories: Category[]; @@ -78,23 +74,23 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { * * @param categoryNameControlVisible control visibility. */ - @Input() - set categoryNameControlVisible(categoryNameControlVisible: boolean) { - this._categoryNameControlVisible = categoryNameControlVisible; - if (categoryNameControlVisible) { - setTimeout(() => { - this.categoryNameInputElement.nativeElement.scrollIntoView(); - }); - this._existingCategoriesPanelVisible = true; - } else { + @Input() + set categoryNameControlVisible(categoryNameControlVisible: boolean) { + this._categoryNameControlVisible = categoryNameControlVisible; + if (categoryNameControlVisible) { + setTimeout(() => { + this.categoryNameInputElement.nativeElement.scrollIntoView(); + }); + this._existingCategoriesPanelVisible = true; + } else { this._existingCategoriesPanelVisible = false; this.clearCategoryNameInput(); - } - } + } + } - get categoryNameControlVisible(): boolean { - return this._categoryNameControlVisible; - } + get categoryNameControlVisible(): boolean { + return this._categoryNameControlVisible; + } /** Emits when classifiable aspect changes */ @Input() @@ -150,9 +146,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { ) .subscribe((name: string) => this.onNameControlValueChange(name)); - this.categoryNameControl.statusChanges - .pipe(takeUntil(this.onDestroy$)) - .subscribe(() => this.setCategoryNameControlErrorMessageKey()); + this.categoryNameControl.statusChanges.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.setCategoryNameControlErrorMessageKey()); this.setCategoryNameControlErrorMessageKey(); @@ -164,13 +158,11 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { this._categoryNameControl.removeValidators(Validators.required); this.categories.forEach((category) => this.initialCategories.push(category)); if (this.classifiableChanged) { - this.classifiableChanged - .pipe(takeUntil(this.onDestroy$)) - .subscribe(() => { - this.categories = []; - this.categoryNameControlVisible = false; - this.categoryNameControlVisibleChange.emit(false); - }); + this.classifiableChanged.pipe(takeUntil(this.onDestroy$)).subscribe(() => { + this.categories = []; + this.categoryNameControlVisible = false; + this.categoryNameControlVisibleChange.emit(false); + }); } } } @@ -188,7 +180,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { /* * Returns `true` if categories empty and category panel non editable state, otherwise `false` - */ + */ get showEmptyCategoryMessage(): boolean { return this.categories.length === 0 && !this.categoryNameControlVisible; } @@ -235,13 +227,16 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { * Adds existing category to categories list and removes it from existing categories list. * * @param category - selection list change containing selected category + * @param disableAddCategory - allow or disallow the ability to add a new category for assigning */ - addCategoryToAssign(category: Category) { - const selectedCategory: Category = category; - this.categories.push(selectedCategory); - this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1); - this.categoryNameControl.updateValueAndValidity(); - this.categoriesChange.emit(this.categories); + addCategoryToAssign(category: Category, disableAddCategory: boolean) { + if (!disableAddCategory) { + const selectedCategory: Category = category; + this.categories.push(selectedCategory); + this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1); + this.categoryNameControl.updateValueAndValidity(); + this.categoriesChange.emit(this.categories); + } } /** @@ -275,7 +270,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { } private searchForExistingCategories(searchTerm: string) { - this.categoryService.searchCategories(searchTerm, 0 , this.existingCategoriesListLimit).subscribe((existingCategoriesResult) => { + this.categoryService.searchCategories(searchTerm, 0, this.existingCategoriesListLimit).subscribe((existingCategoriesResult) => { this._existingCategories = existingCategoriesResult.list.entries.map((rowEntry) => { const existingCat = new Category(); existingCat.id = rowEntry.entry.id; @@ -283,7 +278,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { existingCat.name = path ? `${path}/${rowEntry.entry.name}` : rowEntry.entry.name; return existingCat; }); - this._existingCategories = this._existingCategories.filter((existingCat) => this.categories.find((category) => existingCat.id === category.id) === undefined); + this._existingCategories = this._existingCategories.filter( + (existingCat) => this.categories.find((category) => existingCat.id === category.id) === undefined + ); this.sortCategoriesList(this._existingCategories); this._existingCategoriesLoading = false; this._typing = false; @@ -294,7 +291,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { private getChildrenCategories(searchTerm: string) { this.categoryService.getSubcategories(this.parentId).subscribe((childrenCategories) => { this._existingCategories = childrenCategories.list.entries.map((categoryEntry) => categoryEntry.entry); - this._existingCategories = this._existingCategories.filter((existingCat) => existingCat.name.toLowerCase().includes(searchTerm.toLowerCase())); + this._existingCategories = this._existingCategories.filter((existingCat) => + existingCat.name.toLowerCase().includes(searchTerm.toLowerCase()) + ); this.sortCategoriesList(this._existingCategories); this._existingCategoriesLoading = false; this._typing = false; @@ -308,11 +307,13 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { : null; } - private validateIfNotAlreadyCreated(nameControl: FormControl): Observable { + private validateIfNotAlreadyCreated(nameControl: FormControl): Observable { return this.existingCategoryLoaded$.pipe( - map(() => this.existingCategories.some((category) => this.compareCategories(category, nameControl.value)) && this.isCRUDMode + map(() => + this.existingCategories.some((category) => this.compareCategories(category, nameControl.value)) && this.isCRUDMode ? { duplicatedExistingCategory: true } - : null), + : null + ), first() ); } @@ -322,9 +323,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { } private validateEmptyCategory(categoryNameControl: FormControl): CategoryNameControlErrors | null { - return categoryNameControl.value.length && !categoryNameControl.value.trim() - ? { emptyCategory: true } - : null; + return categoryNameControl.value.length && !categoryNameControl.value.trim() ? { emptyCategory: true } : null; } private setCategoryNameControlErrorMessageKey() { diff --git a/lib/content-services/src/lib/dialogs/confirm.dialog.scss b/lib/content-services/src/lib/dialogs/confirm.dialog.scss index 0f6b7d97889..cda5494e08b 100644 --- a/lib/content-services/src/lib/dialogs/confirm.dialog.scss +++ b/lib/content-services/src/lib/dialogs/confirm.dialog.scss @@ -9,9 +9,5 @@ & .adf-confirm-dialog-content { margin: 0 -24px; - - p { - margin-bottom: 0; - } } } diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss index 8b9c3e7c567..04b877923a2 100644 --- a/lib/core/src/lib/styles/_mat-selectors.scss +++ b/lib/core/src/lib/styles/_mat-selectors.scss @@ -140,3 +140,4 @@ $mat-text-field-disabled: '.mdc-text-field--disabled'; $mat-form-field-focus-overlay: '.mat-mdc-form-field-focus-overlay'; $mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper'; $mat-text-field-textarea: '.mdc-text-field--textarea'; +$mat-list-item-disabled: '.mdc-list-item--disabled';