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-7981] UI fixes for create categories dialog (#9754)

Browse Source 
* [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
This commit is contained in:
swapnil-verma-gl
2024-06-03 17:19:26 +05:30
committed by VitoAlbano
parent f37564c799
commit 180acfba85
5 changed files with 67 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,6 @@
<div class="adf-categories-management"> <div class="adf-categories-management">
<div *ngIf="categoryNameControlVisible" class="adf-category-name-field"> <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
<input #categoryNameInput <input #categoryNameInput
matInput
autocomplete="off"
[formControl]="categoryNameControl" [formControl]="categoryNameControl"
(keyup.enter)="addCategory()" (keyup.enter)="addCategory()"
placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}" placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
@@ -52,8 +50,8 @@
<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)'> (click)='addCategoryToAssign(category, isCRUDMode || !multiSelect && categories.length > 0)'>
{{ category.name }} {{ category.name }}
</mat-list-item> </mat-list-item>
<p *ngIf="!existingCategories?.length && !existingCategoriesLoading" <p *ngIf="!existingCategories?.length && !existingCategoriesLoading"
data-automation-id="no-categories-message"> data-automation-id="no-categories-message">

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

@@ -1,8 +1,9 @@
@import 'styles/mat-selectors';
.adf-categories-management { .adf-categories-management {
.adf-category-name-field { .adf-category-name-field {
justify-content: space-between; justify-content: space-between;
width: 100%; padding: 0 10px;
color: var(--adf-metadata-property-panel-text-color);
background: var(--adf-metadata-buttons-background-color); background: var(--adf-metadata-buttons-background-color);
height: 32px; height: 32px;
border-radius: 12px; border-radius: 12px;
@@ -10,8 +11,15 @@
input { input {
background-color: transparent; background-color: transparent;
padding: 7px 8px 8px; color: var(--adf-metadata-property-panel-text-color);
padding: 7px 0;
width: 100%; width: 100%;
border: none;
outline: none;
}
#{$mat-form-field-error} {
padding-top: 5px;
} }
} }
@@ -46,7 +54,7 @@
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);
} }
@@ -73,4 +81,8 @@
cursor: pointer; cursor: pointer;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
#{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
opacity: 1;
}
} }

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

@@ -31,10 +31,10 @@ interface CategoryNameControlErrors {
} }
@Component({ @Component({
selector: 'adf-categories-management', selector: 'adf-categories-management',
templateUrl: './categories-management.component.html', templateUrl: './categories-management.component.html',
styleUrls: ['./categories-management.component.scss'], styleUrls: ['./categories-management.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class CategoriesManagementComponent implements OnInit, OnDestroy { export class CategoriesManagementComponent implements OnInit, OnDestroy {
readonly nameErrorMessagesByErrors = new Map<keyof CategoryNameControlErrors, string>([ readonly nameErrorMessagesByErrors = new Map<keyof CategoryNameControlErrors, string>([
@@ -49,11 +49,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
private onDestroy$ = new Subject<void>(); private onDestroy$ = new Subject<void>();
private _categoryNameControl = new FormControl<string>( 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) this.validateIfNotAlreadyCreated.bind(this)
); );
private _existingCategories: Category[]; private _existingCategories: Category[];
@@ -78,23 +74,23 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
* *
* @param categoryNameControlVisible control visibility. * @param categoryNameControlVisible control visibility.
*/ */
@Input() @Input()
set categoryNameControlVisible(categoryNameControlVisible: boolean) { set categoryNameControlVisible(categoryNameControlVisible: boolean) {
this._categoryNameControlVisible = categoryNameControlVisible; this._categoryNameControlVisible = categoryNameControlVisible;
if (categoryNameControlVisible) { if (categoryNameControlVisible) {
setTimeout(() => { setTimeout(() => {
this.categoryNameInputElement.nativeElement.scrollIntoView(); this.categoryNameInputElement.nativeElement.scrollIntoView();
}); });
this._existingCategoriesPanelVisible = true; this._existingCategoriesPanelVisible = true;
} else { } else {
this._existingCategoriesPanelVisible = false; this._existingCategoriesPanelVisible = false;
this.clearCategoryNameInput(); this.clearCategoryNameInput();
} }
} }
get categoryNameControlVisible(): boolean { get categoryNameControlVisible(): boolean {
return this._categoryNameControlVisible; return this._categoryNameControlVisible;
} }
/** Emits when classifiable aspect changes */ /** Emits when classifiable aspect changes */
@Input() @Input()
@@ -150,9 +146,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
) )
.subscribe((name: string) => this.onNameControlValueChange(name)); .subscribe((name: string) => this.onNameControlValueChange(name));
this.categoryNameControl.statusChanges this.categoryNameControl.statusChanges.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.setCategoryNameControlErrorMessageKey());
.pipe(takeUntil(this.onDestroy$))
.subscribe(() => this.setCategoryNameControlErrorMessageKey());
this.setCategoryNameControlErrorMessageKey(); this.setCategoryNameControlErrorMessageKey();
@@ -164,13 +158,11 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
this._categoryNameControl.removeValidators(Validators.required); this._categoryNameControl.removeValidators(Validators.required);
this.categories.forEach((category) => this.initialCategories.push(category)); this.categories.forEach((category) => this.initialCategories.push(category));
if (this.classifiableChanged) { if (this.classifiableChanged) {
this.classifiableChanged this.classifiableChanged.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
.pipe(takeUntil(this.onDestroy$)) this.categories = [];
.subscribe(() => { this.categoryNameControlVisible = false;
this.categories = []; this.categoryNameControlVisibleChange.emit(false);
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` * Returns `true` if categories empty and category panel non editable state, otherwise `false`
*/ */
get showEmptyCategoryMessage(): boolean { get showEmptyCategoryMessage(): boolean {
return this.categories.length === 0 && !this.categoryNameControlVisible; 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. * 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) { addCategoryToAssign(category: Category, disableAddCategory: boolean) {
const selectedCategory: Category = category; if (!disableAddCategory) {
this.categories.push(selectedCategory); const selectedCategory: Category = category;
this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1); this.categories.push(selectedCategory);
this.categoryNameControl.updateValueAndValidity(); this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1);
this.categoriesChange.emit(this.categories); this.categoryNameControl.updateValueAndValidity();
this.categoriesChange.emit(this.categories);
}
} }
/** /**
@@ -275,7 +270,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
} }
private searchForExistingCategories(searchTerm: string) { 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) => { this._existingCategories = existingCategoriesResult.list.entries.map((rowEntry) => {
const existingCat = new Category(); const existingCat = new Category();
existingCat.id = rowEntry.entry.id; 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; existingCat.name = path ? `${path}/${rowEntry.entry.name}` : rowEntry.entry.name;
return existingCat; 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.sortCategoriesList(this._existingCategories);
this._existingCategoriesLoading = false; this._existingCategoriesLoading = false;
this._typing = false; this._typing = false;
@@ -294,7 +291,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
private getChildrenCategories(searchTerm: string) { private getChildrenCategories(searchTerm: string) {
this.categoryService.getSubcategories(this.parentId).subscribe((childrenCategories) => { this.categoryService.getSubcategories(this.parentId).subscribe((childrenCategories) => {
this._existingCategories = childrenCategories.list.entries.map((categoryEntry) => categoryEntry.entry); 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.sortCategoriesList(this._existingCategories);
this._existingCategoriesLoading = false; this._existingCategoriesLoading = false;
this._typing = false; this._typing = false;
@@ -308,11 +307,13 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
: null; : null;
} }
private validateIfNotAlreadyCreated(nameControl: FormControl<string>): Observable<CategoryNameControlErrors | null> { private validateIfNotAlreadyCreated(nameControl: FormControl<string>): Observable<CategoryNameControlErrors | null> {
return this.existingCategoryLoaded$.pipe( 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 } ? { duplicatedExistingCategory: true }
: null), : null
),
first() first()
); );
} }
@@ -322,9 +323,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
} }
private validateEmptyCategory(categoryNameControl: FormControl<string>): CategoryNameControlErrors | null { private validateEmptyCategory(categoryNameControl: FormControl<string>): CategoryNameControlErrors | null {
return categoryNameControl.value.length && !categoryNameControl.value.trim() return categoryNameControl.value.length && !categoryNameControl.value.trim() ? { emptyCategory: true } : null;
? { emptyCategory: true }
: null;
} }
private setCategoryNameControlErrorMessageKey() { private setCategoryNameControlErrorMessageKey() {

4
lib/content-services/src/lib/dialogs/confirm.dialog.scss
View File

@@ -9,9 +9,5 @@
& .adf-confirm-dialog-content { & .adf-confirm-dialog-content {
margin: 0 -24px; margin: 0 -24px;
p {
margin-bottom: 0;
}
} }
} }

1
lib/core/src/lib/styles/_mat-selectors.scss
View File

@@ -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-focus-overlay: '.mat-mdc-form-field-focus-overlay';
$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper'; $mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
$mat-text-field-textarea: '.mdc-text-field--textarea'; $mat-text-field-textarea: '.mdc-text-field--textarea';
$mat-list-item-disabled: '.mdc-list-item--disabled';