inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5645] Modified the changes

Browse Source
This commit is contained in:
Yasa-Nataliya
2023-10-09 20:22:06 +05:30
parent fe172be0c8
commit 53a3b7fd2a
9 changed files with 190 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/category/categories-management/categories-management.component.html
+3 -3
View File
@@ -1,5 +1,5 @@
<div class="adf-categories-management">
<div *ngIf="((!categoryNameControlVisible && categories.length)) || categoryNameControlVisible"
<div *ngIf="isNameCategoryVisible"
class="adf-category-name-field">
<mat-form-field appearance="fill">
<input #categoryNameInput
@@ -10,7 +10,7 @@
placeholder="{{'CATEGORIES_MANAGEMENT.INPUT_PLACEHOLDER' | translate }}"
adf-auto-focus
/>
<mat-error [hidden]="!categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
<mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
</mat-form-field>
</div>
<div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
@@ -30,7 +30,7 @@
</button>
</span>
</div>
<p *ngIf="!categories.length" class="adf-no-categories-message">
<p *ngIf="!isEmpty" class="adf-no-categories-message">
{{ noCategoriesMsg | translate }}
</p>
</div>
lib/content-services/src/lib/category/categories-management/categories-management.component.scss
-4
View File
@@ -22,10 +22,6 @@
display: none;
}
.mat-form-field-wrapper {
width: 100%;
}
.mat-form-field-appearance-fill {
.mat-form-field-flex {
background: none;
lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts
+28 -10
View File
@@ -220,17 +220,38 @@ describe('CategoriesManagementComponent', () => {
component.categoryNameControlVisible = true;
fixture.detectChanges();
});
it('should not hide category name control when categoryNameControlVisible is false', () => {
component.categoryNameControlVisible = false;
fixture.detectChanges();
const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement;
expect(categoryControl.hidden).toBeFalse();
});
it('should be visible when categoryNameControlVisible is true', () => {
const categoryControl = fixture.debugElement.query(By.css('.adf-category-name-field'));
expect(categoryControl).toBeTruthy();
});
it('should return true when categoryNameControlVisible is true', () => {
component.categoryNameControlVisible = true;
const result = component.isNameCategoryVisible;
expect(result).toBeTrue();
});
it('should return false when categoryNameControlVisible is false and categories length is 0', () => {
component.categoryNameControlVisible = false;
component.categories = [];
const result = component.isNameCategoryVisible;
expect(result).toBeFalse();
});
});
describe('isEmpty', () => {
it('should return true when categories is not empty', () => {
component.categories = [category3, category4];
const result = component.isEmpty;
expect(result).toBeTrue();
});
it('should return false when categories is empty', () => {
component.categories = [];
const result = component.isEmpty;
expect(result).toBeFalse();
});
});
describe('Spinner', () => {
@@ -449,11 +470,8 @@ describe('CategoriesManagementComponent', () => {
expect(categoriesChangeSpy).toHaveBeenCalledOnceWith(component.categories);
}));
it('should clear and not hide input after category is created', fakeAsync(() => {
it('should clear input after category is created', fakeAsync(() => {
createCategory('test');
const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement;
expect(categoryControl.hidden).toBeFalse();
expect(getExistingCategoriesList()).toEqual([]);
expect(component.categoryNameControl.value).toBe('');
expect(component.categoryNameControl.untouched).toBeTrue();
lib/content-services/src/lib/category/categories-management/categories-management.component.ts
+8
View File
@@ -177,10 +177,18 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
this.cancelExistingCategoriesLoading$.complete();
}
get isNameCategoryVisible(): boolean {
return (!this.categoryNameControlVisible && this.categories.length > 0) || this.categoryNameControlVisible;
}
get categoryNameControl(): FormControl<string> {
return this._categoryNameControl;
}
get isEmpty(): boolean {
return this.categories?.length > 0;
}
get existingCategories(): Category[] {
return this._existingCategories;
}
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
+16 -16
View File
@@ -5,18 +5,18 @@
[expanded]="canExpandProperties()"
[attr.data-automation-id]="'adf-metadata-group-properties'"
hideToggle
(opened)="handleGeneralInfoPanelState()"
(closed)="handleGeneralInfoPanelState()">
(opened)="toggleGeneralInfoPanel()"
(closed)="toggleGeneralInfoPanel()">
<mat-expansion-panel-header>
<div class="adf-metadata-properties-panel-content">
<mat-icon>
{{ generalInfoPanelState ? 'expand_more' : 'chevron_right'}}
{{ isGeneralInfoPanelVisible ? 'expand_more' : 'chevron_right'}}
</mat-icon>
<mat-panel-title class="adf-metadata-properties-title">
{{ 'CORE.METADATA.BASIC.HEADER' | translate }}
</mat-panel-title>
</div>
<button *ngIf="!editable && !readOnly && hasAllowableOperations"
<button *ngIf="canToggleEdit"
mat-icon-button
(click)="toggleEdit($event, group, buttonType.GeneralInfo)"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
@@ -56,21 +56,21 @@
</mat-expansion-panel>
<ng-container *ngIf="displayTags">
<mat-expansion-panel
(opened)="handleTagsPanelState(true)"
(closed)="handleTagsPanelState(false)"
(opened)="toggleTagsPanel(true)"
(closed)="toggleTagsPanel(false)"
hideToggle
[expanded]="tagsPanelState">
[expanded]="isTagPanelVisible">
<mat-expansion-panel-header>
<div class="adf-metadata-properties-panel-content">
<mat-icon>
{{ tagsPanelState ? 'expand_more' : 'chevron_right'}}
{{ isTagPanelVisible ? 'expand_more' : 'chevron_right'}}
</mat-icon>
<mat-panel-title class="adf-metadata-properties-title">
{{ 'METADATA.BASIC.TAGS' | translate }}
</mat-panel-title>
</div>
<div class="adf-tags-buttons">
<button *ngIf="!editableTags && !readOnly && hasAllowableOperations"
<button *ngIf="canTagsToggleEdit"
mat-icon-button
(click)="toggleEdit($event, group, buttonType.Tags)"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
@@ -103,7 +103,7 @@
class="adf-metadata-properties-tags">
<span *ngFor="let tag of tags" class="adf-metadata-properties-tag">{{ tag }}</span>
</div>
<div *ngIf="!tags.length && !editableTags" class="adf-metadata-no-item-added">
<div *ngIf="hasTags()" class="adf-metadata-no-item-added">
{{ 'METADATA.BASIC.NO_TAGS_ADDED' | translate }}
</div>
<div *ngIf="editableTags" class="adf-metadata-properties-tags">
@@ -122,22 +122,22 @@
(opened)="handleCategoriesPanelState(true)"
(closed)="handleCategoriesPanelState(false)"
hideToggle
[expanded]="categoriesPanelState">
[expanded]="isCategoriesPanelVisible">
<mat-expansion-panel-header>
<div class="adf-metadata-properties-panel-content">
<mat-icon>
{{ categoriesPanelState ? 'expand_more' : 'chevron_right'}}</mat-icon>
{{ isCategoriesPanelVisible ? 'expand_more' : 'chevron_right'}}</mat-icon>
<mat-panel-title class="adf-metadata-properties-title">
{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_TITLE' | translate }}
</mat-panel-title>
</div>
<div class="adf-metadata-categories-title">
<button *ngIf="!editableCategories && !readOnly && hasAllowableOperations"
<button *ngIf="canCategoriesToggleEdit"
mat-icon-button
(click)="toggleEdit($event, group, buttonType.Categories)"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
data-automation-id="meta-data-card-toggle-categories-edit"
data-automation-id="meta-data-categories-edit"
class="adf-edit-icon-buttons">
<mat-icon>mode_edit</mat-icon>
</button>
@@ -163,7 +163,7 @@
<div *ngIf="!editableCategories">
<p *ngFor="let category of categories" class="adf-metadata-categories">{{ category.name }}</p>
</div>
<div *ngIf="!categories.length && !editableCategories" class="adf-metadata-no-item-added">
<div *ngIf="hasCategories()" class="adf-metadata-no-item-added">
{{ 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ADDED' | translate }}
</div>
<div *ngIf="editableCategories" class="adf-metadata-categories-header">
@@ -203,7 +203,7 @@
{{ group.title | translate }}
</mat-panel-title>
</div>
<button *ngIf="!group.editable && !readOnly && hasAllowableOperations"
<button *ngIf="canGroupToggleEdit(group)"
mat-icon-button
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts
+94 -4
View File
@@ -104,6 +104,10 @@ describe('ContentMetadataComponent', () => {
const findTagsCreator = (): TagsCreatorComponent => fixture.debugElement.query(By.directive(TagsCreatorComponent))?.componentInstance;
const findShowingTagInputButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('.adf-tags-buttons')).nativeElement;
const getToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-general-info-edit"]'));
const getTagsToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="showing-tag-input-button"]'));
const getCategoriesToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-categories-edit"]'));
const getGroupToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]'));
/**
* Get metadata categories
@@ -459,7 +463,7 @@ describe('ContentMetadataComponent', () => {
it('should toggle Tags editing mode', () => {
component.editableTags = false;
component.toggleEdit(mockEvent, mockGroup, ButtonType.Tags);
expect(component.tagsPanelState).toBe(component.editableTags);
expect(component.isTagPanelVisible).toBe(component.editableTags);
expect(component.tagNameControlVisible).toBe(true);
expect(component.editableCategories).toBe(false);
expect(component.editableGroup.editable).toBe(false);
@@ -468,7 +472,7 @@ describe('ContentMetadataComponent', () => {
it('should toggle Categories editing mode', () => {
component.editableCategories = false;
component.toggleEdit(mockEvent, mockGroup, ButtonType.Categories);
expect(component.categoriesPanelState).toBe(component.editableCategories);
expect(component.isCategoriesPanelVisible).toBe(component.editableCategories);
expect(component.categoryControlVisible).toBe(true);
expect(component.editableTags).toBe(false);
expect(component.editableGroup.editable).toBe(false);
@@ -485,10 +489,10 @@ describe('ContentMetadataComponent', () => {
it('should show Snackbar when Editing Panel is Active', () => {
spyOn(component, 'isEditingPanel').and.returnValue(true);
spyOn(component, 'showSnackbar');
spyOn(component, 'showSnackbarError');
component.toggleEdit(mockEvent, mockGroup, ButtonType.GeneralInfo);
expect(component.isEditingPanel).toHaveBeenCalled();
expect(component.showSnackbar).toHaveBeenCalledWith('METADATA.BASIC.SNACKBAR_MESSAGE');
expect(component.showSnackbarError).toHaveBeenCalledWith('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
});
});
@@ -523,6 +527,92 @@ describe('ContentMetadataComponent', () => {
expect(group.editable).toBe(true);
});
});
;
describe('Permission', () => {
it('should hide the general info edit button if node does not have `update` permissions', () => {
component.readOnly = false;
component.node.allowableOperations = null;
fixture.detectChanges();
expect(getToggleEditButton()).toBeNull();
});
it('should hide the tags edit button if node does not have `update` permissions', () => {
component.readOnly = false;
component.node.allowableOperations = null;
fixture.detectChanges();
expect(getTagsToggleEditButton()).toBeNull();
});
it('should hide the categories edit button if node does not have `update` permissions', () => {
component.readOnly = false;
component.node.allowableOperations = null;
fixture.detectChanges();
expect(getCategoriesToggleEditButton()).toBeNull();
});
it('should hide the groups edit button if node does not have `update` permissions', () => {
component.readOnly = false;
component.node.allowableOperations = null;
fixture.detectChanges();
expect(getGroupToggleEditButton()).toBeNull();
});
});
describe('canToggleEdit', () => {
it('should return true when editable is false, readOnly is false, and hasAllowableOperations is true', () => {
component.editable = false;
component.readOnly = false;
component.hasAllowableOperations = true;
const result = component.canToggleEdit;
expect(result).toBe(true);
});
it('should return false when editable is true', () => {
component.editable = true;
component.readOnly = false;
component.hasAllowableOperations = true;
const result = component.canToggleEdit;
expect(result).toBe(false);
});
});
describe('canTagsToggleEdit', () => {
it('should have canTagsToggleEdit property as expected', () => {
component.editableTags = false;
component.readOnly = false;
component.hasAllowableOperations = true;
fixture.detectChanges();
expect(component.canTagsToggleEdit).toBe(true);
});
});
describe('canGroupToggleEdit', () => {
it('should return true when group is not editable, not read-only, and has allowable operations', () => {
component.readOnly = false;
component.hasAllowableOperations = true;
const group: CardViewGroup = {
title: 'Group Title',
properties: [],
expanded: true,
editable: false
};
const result = component.canGroupToggleEdit(group);
expect(result).toBe(true);
});
});
describe('canCategoriesToggleEdit', () => {
it('should have canCategoriesToggleEdit property as expected', () => {
component.editableCategories = false;
component.readOnly = false;
component.hasAllowableOperations = true;
expect(component.canCategoriesToggleEdit).toBe(true);
});
});
describe('Reseting', () => {
it('should reset properties on reset click', async () => {
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
+39 -23
View File
@@ -147,19 +147,12 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
@Output()
editableCategoriesChange = new EventEmitter<boolean>();
/** Emitted when content's group state is changed. **/
@Output()
groupChange = new EventEmitter<CardViewGroup>();
@Input()
editableCategories = false;
@Input()
editableTags = false;
@Input()
group: CardViewGroup;
private _assignedTags: string[] = [];
private assignedTagsEntries: TagEntry[] = [];
private _editable = false;
@@ -181,12 +174,13 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
categoriesManagementMode = CategoriesManagementMode.ASSIGN;
categoryControlVisible = false;
classifiableChanged = this.classifiableChangedSubject.asObservable();
generalInfoPanelState: boolean;
tagsPanelState: boolean;
categoriesPanelState: boolean;
isGeneralInfoPanelVisible: boolean;
isTagPanelVisible: boolean;
isCategoriesPanelVisible: boolean;
hasAllowableOperations = false;
editableGroup: CardViewGroup;
buttonType = ButtonType;
group: CardViewGroup;
constructor(
private contentMetadataService: ContentMetadataService,
@@ -369,13 +363,14 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
);
}
showSnackbar(message: string): void {
showSnackbarError(message: string): void {
this.notificationService.showError(message);
}
toggleEdit(event: MouseEvent, group: CardViewGroup, buttonType: ButtonType): void {
event.stopPropagation();
if (this.isEditingPanel()) {
this.showSnackbar('METADATA.BASIC.SNACKBAR_MESSAGE');
this.showSnackbarError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
return;
}
@@ -383,8 +378,6 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
this.editableGroup.editable = false;
}
event.stopPropagation();
switch (buttonType) {
case ButtonType.GeneralInfo:
this.editable = !this.editable;
@@ -397,20 +390,19 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
case ButtonType.Tags:
this.editableTags = !this.editableTags;
this.editableTagsChange.emit(this.editableTags);
this.tagsPanelState = this.editableTags;
this.isTagPanelVisible = this.editableTags;
this.tagNameControlVisible = true;
break;
case ButtonType.Categories:
this.editableCategories = !this.editableCategories;
this.editableCategoriesChange.emit(this.editableCategories);
this.categoriesPanelState = this.editableCategories;
this.isCategoriesPanelVisible = this.editableCategories;
this.categoryControlVisible = true;
break;
case ButtonType.Group:
group.editable = !group.editable;
this.groupChange.emit(group);
this.editableGroup = group.editable ? group : null;
if (group.editable) {
group.expanded = true;
@@ -434,21 +426,45 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
}
}
handleGeneralInfoPanelState() {
this.generalInfoPanelState = !this.generalInfoPanelState;
toggleGeneralInfoPanel() {
this.isGeneralInfoPanelVisible = !this.isGeneralInfoPanelVisible;
this.cdr.detectChanges();
}
handleTagsPanelState(tagPanelState: boolean) {
this.tagsPanelState = tagPanelState;
toggleTagsPanel(tagPanelState: boolean) {
this.isTagPanelVisible = tagPanelState;
this.cdr.detectChanges();
}
handleCategoriesPanelState(categoriesPanelState: boolean) {
this.categoriesPanelState = categoriesPanelState;
handleCategoriesPanelState(isCategoriesPanelVisible: boolean) {
this.isCategoriesPanelVisible = isCategoriesPanelVisible;
this.cdr.detectChanges();
}
hasTags(): boolean {
return !(this.tags.length > 0) && !this.editableTags;
}
hasCategories(): boolean {
return !(this.categories.length > 0) && !this.editableCategories;
}
get canToggleEdit(): boolean {
return !this.editable && !this.readOnly && this.hasAllowableOperations;
}
get canTagsToggleEdit(): boolean {
return !this.editableTags && !this.readOnly && this.hasAllowableOperations;
}
get canCategoriesToggleEdit(): boolean {
return !this.editableCategories && !this.readOnly && this.hasAllowableOperations;
}
canGroupToggleEdit(group: CardViewGroup): boolean {
return !group.editable && !this.readOnly && this.hasAllowableOperations;
}
showGroup(group: CardViewGroup): boolean {
const properties = group.properties.filter((property) => !this.isEmpty(property.displayValue));
lib/content-services/src/lib/i18n/en.json
+1 -1
View File
@@ -492,7 +492,7 @@
"HEADER_TITLE": "General info",
"NO_TAGS_ADDED": "There are currently no tags added",
"NO_ITEMS_MESSAGE": "There are currently no {{ groupTitle }} added",
"SNACKBAR_MESSAGE": "Save or discard changes to continue"
"SAVE_OR_DISCARD_CHANGES": "Save or discard changes to continue"
},
"CONTENT_TYPE": {
"DIALOG" :{
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
+1 -1
View File
@@ -9,7 +9,7 @@
adf-auto-focus
placeholder="{{'TAG.TAGS_CREATOR.INPUT_PLACEHOLDER' | translate}}"
/>
<mat-error [hidden]="!tagNameControl.invalid">{{ tagNameErrorMessageKey | translate }}</mat-error>
<mat-error *ngIf="tagNameControl.invalid">{{ tagNameErrorMessageKey | translate }}</mat-error>
</mat-form-field >
</div>
<p