Skip to content

Commit

Permalink
[ACS-7979] Fixed UI for create tags dialog (#9793)
Browse files Browse the repository at this point in the history
* [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
  • Loading branch information
swapnil-verma-gl authored and VitoAlbano committed Jul 1, 2024
1 parent c435093 commit 8c1333d
Show file tree
Hide file tree
Showing 8 changed files with 76 additions and 85 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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} {
Expand Down Expand Up @@ -76,6 +78,8 @@
}

.adf-existing-categories-panel {
min-height: 22vh;

.adf-create-category-label {
color: var(--theme-primary-color);
cursor: pointer;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
28 changes: 12 additions & 16 deletions lib/content-services/src/lib/tag/tag.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -34,19 +36,13 @@ import { ContentDirectiveModule } from '../directives/content-directive.module';
MaterialModule,
FormsModule,
ReactiveFormsModule,
CoreModule
],
exports: [
TagActionsComponent,
TagListComponent,
TagNodeListComponent,
TagsCreatorComponent
TranslateModule,
DynamicChipListModule,
MatChipsModule,
MatIconModule,
NgForOf
],
declarations: [
TagActionsComponent,
TagListComponent,
TagNodeListComponent,
TagsCreatorComponent
]
exports: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent],
declarations: [TagActionsComponent, TagListComponent, TagNodeListComponent, TagsCreatorComponent]
})
export class TagModule {}
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 {
Expand All @@ -47,7 +39,6 @@ adf-tags-creator {
display: inline-block;
padding-right: 12px;
overflow: auto;
max-height: 7vh;
}

.adf-tags-list {
Expand All @@ -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 {
Expand All @@ -87,34 +77,33 @@ 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);
}

& span {
padding: 0;
}

& + .adf-tag {
margin-top: -10px;
}
}

.adf-tags-creator-spinner {
margin: auto;
overflow: unset;
min-height: 62px;
}

#{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
opacity: 1;
}
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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());
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -263,11 +263,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);
}
}

/**
Expand Down

0 comments on commit 8c1333d

Please sign in to comment.