[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
Alfresco · Jun 10, 2024 · ee136e8 · ee136e8
1 parent 0339f70
commit ee136e8
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 61 deletions.
diff --git a/...tent-services/src/lib/category/categories-management/categories-management.component.html b/...tent-services/src/lib/category/categories-management/categories-management.component.html
@@ -1,8 +1,6 @@
 <div class="adf-categories-management">
     <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
         <input #categoryNameInput
-            matInput
-            autocomplete="off"
             [formControl]="categoryNameControl"
             (keyup.enter)="addCategory()"
             placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
@@ -52,8 +50,8 @@
                 <mat-list-item
                     *ngFor="let category of existingCategories"
                     class="adf-category"
-                    (click)='addCategoryToAssign(category)'>
-                    {{ category.name }}
+                    (click)='addCategoryToAssign(category, isCRUDMode || !multiSelect && categories.length > 0)'>
+                        {{ category.name }}
                 </mat-list-item>
                 <p *ngIf="!existingCategories?.length && !existingCategoriesLoading"
                    data-automation-id="no-categories-message">

diff --git a/...tent-services/src/lib/category/categories-management/categories-management.component.scss b/...tent-services/src/lib/category/categories-management/categories-management.component.scss
@@ -1,17 +1,25 @@
+@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;
         align-items: center;
 
         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/...ontent-services/src/lib/category/categories-management/categories-management.component.ts b/...ontent-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<keyof CategoryNameControlErrors, string>([
@@ -49,11 +49,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
     private onDestroy$ = new Subject<void>();
     private _categoryNameControl = new FormControl<string>(
         '',
-        [
-            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,15 +270,17 @@ 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;
                 const path = rowEntry.entry.path.name.split('/').splice(3).join('/');
                 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<string>): Observable<CategoryNameControlErrors | null>  {
+    private validateIfNotAlreadyCreated(nameControl: FormControl<string>): Observable<CategoryNameControlErrors | null> {
         return this.existingCategoryLoaded$.pipe(
-            map<void, CategoryNameControlErrors | null>(() => this.existingCategories.some((category) => this.compareCategories(category, nameControl.value)) && this.isCRUDMode
+            map<void, CategoryNameControlErrors | null>(() =>
+                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<string>): 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
@@ -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
@@ -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';