inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [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
This commit is contained in:
swapnil-verma-gl
2024-06-13 16:00:34 +05:30
committed by VitoAlbano
parent d67f6c3f2a
commit ff085f94cb
8 changed files with 76 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/content-services/src/lib/category/categories-management/categories-management.component.html
View File

@@ -8,7 +8,7 @@
/> />
<mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error> <mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
</div> </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 <span
*ngFor="let category of categories" *ngFor="let category of categories"
[class.adf-categories-padded]="!isCRUDMode" [class.adf-categories-padded]="!isCRUDMode"
@@ -50,7 +50,7 @@
<mat-list-item <mat-list-item
*ngFor="let category of existingCategories" *ngFor="let category of existingCategories"
class="adf-category" class="adf-category"
(click)='addCategoryToAssign(category, isCRUDMode || !multiSelect && categories.length > 0)'> (click)='addCategoryToAssign(category)'>
{{ category.name }} {{ category.name }}
</mat-list-item> </mat-list-item>
<p *ngIf="!existingCategories?.length && !existingCategoriesLoading" <p *ngIf="!existingCategories?.length && !existingCategoriesLoading"

24
lib/content-services/src/lib/category/categories-management/categories-management.component.scss
View File

@@ -2,20 +2,22 @@
.adf-categories-management { .adf-categories-management {
.adf-category-name-field { .adf-category-name-field {
justify-content: space-between; display: flex;
padding: 0 10px; flex-direction: column;
background: var(--adf-metadata-buttons-background-color); margin-right: 12px;
height: 32px;
border-radius: 12px;
align-items: center;
input { input {
background-color: transparent; background: var(--adf-metadata-buttons-background-color);
color: var(--adf-metadata-property-panel-text-color); border-radius: 12px;
padding: 7px 0; padding: 7px 8px;
width: 100%;
border: none; border: none;
outline: none; outline: none;
font: inherit;
color: currentcolor;
margin: 0;
vertical-align: bottom;
text-align: inherit;
box-sizing: content-box;
} }
#{$mat-form-field-error} { #{$mat-form-field-error} {
@@ -76,6 +78,8 @@
} }
.adf-existing-categories-panel { .adf-existing-categories-panel {
min-height: 22vh;
.adf-create-category-label { .adf-create-category-label {
color: var(--theme-primary-color); color: var(--theme-primary-color);
cursor: pointer; cursor: pointer;

5
lib/content-services/src/lib/category/categories-management/categories-management.component.ts
View File

@@ -227,10 +227,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
* Adds existing category to categories list and removes it from existing categories list. * Adds existing category to categories list and removes it from existing categories list.
* *
* @param category - selection list change containing selected category * @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) { addCategoryToAssign(category: Category) {
if (!disableAddCategory) { if (!(this.isCRUDMode || (!this.multiSelect && this.categories.length > 0))) {
const selectedCategory: Category = category; const selectedCategory: Category = category;
this.categories.push(selectedCategory); this.categories.push(selectedCategory);
this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1); this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1);

28
lib/content-services/src/lib/tag/tag.module.ts
View File

@@ -15,17 +15,19 @@
* limitations under the License. * limitations under the License.
*/ */
import { CommonModule } from '@angular/common'; import { CommonModule, NgForOf } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module'; import { MaterialModule } from '../material.module';
import { TagActionsComponent } from './tag-actions.component'; import { TagActionsComponent } from './tag-actions.component';
import { TagListComponent } from './tag-list.component'; import { TagListComponent } from './tag-list.component';
import { TagNodeListComponent } from './tag-node-list.component'; import { TagNodeListComponent } from './tag-node-list.component';
import { CoreModule } from '@alfresco/adf-core';
import { TagsCreatorComponent } from './tags-creator/tags-creator.component'; import { TagsCreatorComponent } from './tags-creator/tags-creator.component';
import { ContentDirectiveModule } from '../directives/content-directive.module'; 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({ @NgModule({
imports: [ imports: [
@@ -34,19 +36,13 @@ import { ContentDirectiveModule } from '../directives/content-directive.module';
MaterialModule, MaterialModule,
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
CoreModule TranslateModule,
DynamicChipListModule,
MatChipsModule,
MatIconModule,
NgForOf
], ],
exports: [ exports: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent],
TagActionsComponent, declarations: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent]
TagListComponent,
TagNodeListComponent,
TagsCreatorComponent
],
declarations: [
TagActionsComponent,
TagListComponent,
TagNodeListComponent,
TagsCreatorComponent
]
}) })
export class TagModule {} export class TagModule {}

27
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
View File

@@ -16,19 +16,20 @@
{{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }} {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
</p> </p>
<div class="adf-tags-list" [class.adf-tags-list-fixed]="!tagNameControlVisible" #tagsList> <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"> <mat-chip-listbox *ngIf="tags.length > 0" class="adf-tags-chips-container">
{{ tag }} <mat-chip-option *ngFor="let tag of tags" [disableRipple]="true" [title]="tag" class="adf-tags-chip">
<button {{ tag }}
data-automation-id="remove-tag-button" <button
mat-icon-button data-automation-id="remove-tag-button"
(click)="removeTag(tag)" mat-icon-button
[attr.title]="'TAG.TAGS_CREATOR.TOOLTIPS.DELETE_TAG' | translate" (click)="removeTag(tag)"
[disabled]="disabledTagsRemoving" [attr.title]="'TAG.TAGS_CREATOR.TOOLTIPS.DELETE_TAG' | translate"
class="adf-remove-tag" [disabled]="disabledTagsRemoving"
> matChipRemove>
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</span> </mat-chip-option>
</mat-chip-listbox>
</div> </div>
</div> </div>
<div class="adf-existing-tags-panel" *ngIf="existingTagsPanelVisible"> <div class="adf-existing-tags-panel" *ngIf="existingTagsPanelVisible">

59
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
View File

@@ -1,24 +1,8 @@
@import 'styles/mat-selectors';
adf-tags-creator { adf-tags-creator {
display: block; 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 { .adf-no-tags-message {
margin-top: 28.5px; margin-top: 28.5px;
margin-bottom: 0; margin-bottom: 0;
@@ -27,15 +11,23 @@ adf-tags-creator {
.adf-tag-name-field, .adf-tag-name-field,
.adf-tag-name-field[hidden] { .adf-tag-name-field[hidden] {
padding-top: 10px; display: flex;
flex-direction: column;
margin-right: 12px; margin-right: 12px;
} }
.adf-tag-search-field { .adf-tag-search-field {
background: var(--adf-metadata-buttons-background-color); background: var(--adf-metadata-buttons-background-color);
height: 32px;
border-radius: 12px; 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 { .adf-create-tag-label {
@@ -47,7 +39,6 @@ adf-tags-creator {
display: inline-block; display: inline-block;
padding-right: 12px; padding-right: 12px;
overflow: auto; overflow: auto;
max-height: 7vh;
} }
.adf-tags-list { .adf-tags-list {
@@ -57,19 +48,18 @@ adf-tags-creator {
gap: 8px; gap: 8px;
} }
.adf-tag { .adf-tags-chips-container {
margin-top: 8px; margin-top: 8px;
overflow-wrap: anywhere;
& + .adf-tag { .adf-tags-chip {
margin-top: 8px; background: var(--adf-metadata-buttons-background-color);
height: unset;
} }
} }
.adf-existing-tags-panel { .adf-existing-tags-panel {
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px; border-top-right-radius: 6px;
padding-top: 12px;
width: 100%; width: 100%;
.adf-existing-tags-label { .adf-existing-tags-label {
@@ -87,16 +77,15 @@ adf-tags-creator {
flex-direction: column; flex-direction: column;
.adf-tag { .adf-tag {
margin-bottom: 18px; margin: 0;
margin-top: 0; padding: 4px;
padding-right: 12px;
font-size: 14px; font-size: 14px;
height: auto; height: auto;
width: unset; width: unset;
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
&:hover { &:not(#{$mat-list-item-disabled}):hover {
cursor: pointer; cursor: pointer;
background: var(--adf-theme-mat-grey-color-a200); background: var(--adf-theme-mat-grey-color-a200);
} }
@@ -104,10 +93,6 @@ adf-tags-creator {
& span { & span {
padding: 0; padding: 0;
} }
& + .adf-tag {
margin-top: -10px;
}
} }
.adf-tags-creator-spinner { .adf-tags-creator-spinner {
@@ -115,6 +100,10 @@ adf-tags-creator {
overflow: unset; overflow: unset;
min-height: 62px; min-height: 62px;
} }
#{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
opacity: 1;
}
} }
} }

2
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts
View File

@@ -122,7 +122,7 @@ describe('TagsCreatorComponent', () => {
* @returns list of tags * @returns list of tags
*/ */
function getAddedTags(): string[] { 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()); return tagElements.map((el) => el.nativeElement.firstChild.nodeValue.trim());
} }

12
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts
View File

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