[ACS-7979] Fixed UI for create tags dialog (#9793)

* [ACS-7979] Fixed UI for create tags dialog. Minor UI fixes of create categories dialog as well * [ACS-7979] Fixed unit tests * [ACS-7979] Replaced dependency of CoreModule from tag.module.ts with TranslateModule and DynamicChipListModule
2025-07-24 17:32:15 +00:00 · 2024-06-13 16:00:34 +05:30
parent d67f6c3f2a
commit ff085f94cb
8 changed files with 76 additions and 85 deletions
--- 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
@@ -8,7 +8,7 @@
            />
        <mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
    </div>
-    <div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
+    <div class="adf-categories-list" *ngIf="categories?.length > 0" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
        <span
            *ngFor="let category of categories"
            [class.adf-categories-padded]="!isCRUDMode"
@@ -50,7 +50,7 @@
                <mat-list-item
                    *ngFor="let category of existingCategories"
                    class="adf-category"
-                    (click)='addCategoryToAssign(category, isCRUDMode || !multiSelect && categories.length > 0)'>
+                    (click)='addCategoryToAssign(category)'>
                        {{ category.name }}
                </mat-list-item>
                <p *ngIf="!existingCategories?.length && !existingCategoriesLoading"
--- 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
@@ -2,20 +2,22 @@

 .adf-categories-management {
    .adf-category-name-field {
-        justify-content: space-between;
-        padding: 0 10px;
-        background: var(--adf-metadata-buttons-background-color);
-        height: 32px;
-        border-radius: 12px;
-        align-items: center;
+        display: flex;
+        flex-direction: column;
+        margin-right: 12px;

        input {
-            background-color: transparent;
-            color: var(--adf-metadata-property-panel-text-color);
-            padding: 7px 0;
-            width: 100%;
+            background: var(--adf-metadata-buttons-background-color);
+            border-radius: 12px;
+            padding: 7px 8px;
            border: none;
            outline: none;
+            font: inherit;
+            color: currentcolor;
+            margin: 0;
+            vertical-align: bottom;
+            text-align: inherit;
+            box-sizing: content-box;
        }

        #{$mat-form-field-error} {
@@ -76,6 +78,8 @@
 }

 .adf-existing-categories-panel {
+    min-height: 22vh;
+
    .adf-create-category-label {
        color: var(--theme-primary-color);
        cursor: pointer;
--- 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
@@ -227,10 +227,9 @@ 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, disableAddCategory: boolean) {
-        if (!disableAddCategory) {
+    addCategoryToAssign(category: Category) {
+        if (!(this.isCRUDMode || (!this.multiSelect && this.categories.length > 0))) {
            const selectedCategory: Category = category;
            this.categories.push(selectedCategory);
            this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1);
--- a/lib/content-services/src/lib/tag/tag.module.ts
+++ b/lib/content-services/src/lib/tag/tag.module.ts
@@ -15,17 +15,19 @@
 * limitations under the License.
 */

-import { CommonModule } from '@angular/common';
+import { CommonModule, NgForOf } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
 import { MaterialModule } from '../material.module';
 import { TagActionsComponent } from './tag-actions.component';
 import { TagListComponent } from './tag-list.component';
 import { TagNodeListComponent } from './tag-node-list.component';
-import { CoreModule } from '@alfresco/adf-core';
 import { TagsCreatorComponent } from './tags-creator/tags-creator.component';
 import { ContentDirectiveModule } from '../directives/content-directive.module';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { DynamicChipListModule } from '@alfresco/adf-core';

@NgModule({
    imports: [
@@ -34,19 +36,13 @@ import { ContentDirectiveModule } from '../directives/content-directive.module';
        MaterialModule,
        FormsModule,
        ReactiveFormsModule,
-        CoreModule
+        TranslateModule,
+        DynamicChipListModule,
+        MatChipsModule,
+        MatIconModule,
+        NgForOf
    ],
-    exports: [
-        TagActionsComponent,
-        TagListComponent,
-        TagNodeListComponent,
-        TagsCreatorComponent
-    ],
-    declarations: [
-        TagActionsComponent,
-        TagListComponent,
-        TagNodeListComponent,
-        TagsCreatorComponent
-    ]
+    exports: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent],
+    declarations: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent]
 })
 export class TagModule {}
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
@@ -16,19 +16,20 @@
        {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
    </p>
    <div class="adf-tags-list" [class.adf-tags-list-fixed]="!tagNameControlVisible" #tagsList>
-        <span *ngFor="let tag of tags" class="adf-tag adf-label-with-icon-button">
-            {{ tag }}
-            <button
-                data-automation-id="remove-tag-button"
-                mat-icon-button
-                (click)="removeTag(tag)"
-                [attr.title]="'TAG.TAGS_CREATOR.TOOLTIPS.DELETE_TAG' | translate"
-                [disabled]="disabledTagsRemoving"
-                class="adf-remove-tag"
-            >
-                <mat-icon>close</mat-icon>
-            </button>
-        </span>
+        <mat-chip-listbox *ngIf="tags.length > 0" class="adf-tags-chips-container">
+            <mat-chip-option *ngFor="let tag of tags" [disableRipple]="true" [title]="tag" class="adf-tags-chip">
+                {{ tag }}
+                <button
+                    data-automation-id="remove-tag-button"
+                    mat-icon-button
+                    (click)="removeTag(tag)"
+                    [attr.title]="'TAG.TAGS_CREATOR.TOOLTIPS.DELETE_TAG' | translate"
+                    [disabled]="disabledTagsRemoving"
+                    matChipRemove>
+                    <mat-icon>close</mat-icon>
+                </button>
+            </mat-chip-option>
+        </mat-chip-listbox>
    </div>
 </div>
 <div class="adf-existing-tags-panel" *ngIf="existingTagsPanelVisible">
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
@@ -1,24 +1,8 @@
+@import 'styles/mat-selectors';
+
 adf-tags-creator {
    display: block;

-    .adf-label-with-icon-button {
-        background: var(--adf-metadata-buttons-background-color);
-        width: fit-content;
-        min-height: 32px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 16px;
-        padding: 6px 0;
-        padding-left: 12px;
-
-        .adf-remove-tag {
-            line-height: 24px;
-            height: 24px;
-            transform: scale(0.7);
-        }
-    }
-
    .adf-no-tags-message {
        margin-top: 28.5px;
        margin-bottom: 0;
@@ -27,15 +11,23 @@ adf-tags-creator {

    .adf-tag-name-field,
    .adf-tag-name-field[hidden] {
-        padding-top: 10px;
+        display: flex;
+        flex-direction: column;
        margin-right: 12px;
    }

    .adf-tag-search-field {
        background: var(--adf-metadata-buttons-background-color);
-        height: 32px;
        border-radius: 12px;
-        padding: 0 6px;
+        padding: 5px 6px;
+        border: none;
+        outline: none;
+        font: inherit;
+        color: currentcolor;
+        margin: 0;
+        vertical-align: bottom;
+        text-align: inherit;
+        box-sizing: content-box;
    }

    .adf-create-tag-label {
@@ -47,7 +39,6 @@ adf-tags-creator {
        display: inline-block;
        padding-right: 12px;
        overflow: auto;
-        max-height: 7vh;
    }

    .adf-tags-list {
@@ -57,19 +48,18 @@ adf-tags-creator {
        gap: 8px;
    }

-    .adf-tag {
+    .adf-tags-chips-container {
        margin-top: 8px;
-        overflow-wrap: anywhere;

-        & + .adf-tag {
-            margin-top: 8px;
+        .adf-tags-chip {
+            background: var(--adf-metadata-buttons-background-color);
+            height: unset;
        }
    }

    .adf-existing-tags-panel {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
-        padding-top: 12px;
        width: 100%;

        .adf-existing-tags-label {
@@ -87,16 +77,15 @@ adf-tags-creator {
            flex-direction: column;

            .adf-tag {
-                margin-bottom: 18px;
-                margin-top: 0;
-                padding-right: 12px;
+                margin: 0;
+                padding: 4px;
                font-size: 14px;
                height: auto;
                width: unset;
                background-color: inherit;
                color: inherit;

-                &:hover {
+                &:not(#{$mat-list-item-disabled}):hover {
                    cursor: pointer;
                    background: var(--adf-theme-mat-grey-color-a200);
                }
@@ -104,10 +93,6 @@ adf-tags-creator {
                & span {
                    padding: 0;
                }
-
-                & + .adf-tag {
-                    margin-top: -10px;
-                }
            }

            .adf-tags-creator-spinner {
@@ -115,6 +100,10 @@ adf-tags-creator {
                overflow: unset;
                min-height: 62px;
            }
+
+            #{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
+                opacity: 1;
+            }
        }
    }

--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts
@@ -122,7 +122,7 @@ describe('TagsCreatorComponent', () => {
     * @returns list of tags
     */
    function getAddedTags(): string[] {
-        const tagElements = fixture.debugElement.queryAll(By.css(`.adf-tags-creation .adf-tag`));
+        const tagElements = fixture.debugElement.queryAll(By.css(`.adf-tags-creation .adf-tags-chip`));
        return tagElements.map((el) => el.nativeElement.firstChild.nodeValue.trim());
    }

--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts
@@ -260,11 +260,13 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
     * @param selectedTag changes
     */
    addExistingTagToTagsToAssign(selectedTag: TagEntry): void {
-        this.tags.push(selectedTag.entry.tag);
-        this.removeTagFromArray(this.existingTags, selectedTag);
-        this.tagNameControl.updateValueAndValidity();
-        this.exactTagSet$.next();
-        this.tagsChange.emit(this.tags);
+        if (!this.isOnlyCreateMode()) {
+            this.tags.push(selectedTag.entry.tag);
+            this.removeTagFromArray(this.existingTags, selectedTag);
+            this.tagNameControl.updateValueAndValidity();
+            this.exactTagSet$.next();
+            this.tagsChange.emit(this.tags);
+        }
    }

    /**