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] Implemented the review comments

Browse Source
This commit is contained in:
Yasa-Nataliya
2023-10-09 20:23:58 +05:30
parent a70e1873e8
commit 2d1764cbc4
12 changed files with 66 additions and 61 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
+1 -1
View File
@@ -30,7 +30,7 @@
</button>
</span>
</div>
<p *ngIf="!hasCategory" class="adf-no-categories-message">
<p *ngIf="isCategoryEmpty" class="adf-no-categories-message">
{{ noCategoriesMsg | translate }}
</p>
</div>
lib/content-services/src/lib/category/categories-management/categories-management.component.scss
-1
View File
@@ -53,7 +53,6 @@
}
.adf-no-categories-message {
margin-left: 9px;
margin-top: 28.5px;
margin-bottom: 0;
height: 30px;
lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts
+5 -10
View File
@@ -240,17 +240,12 @@ describe('CategoriesManagementComponent', () => {
});
});
describe('hasCategory', () => {
it('should return true when has categories', () => {
component.categories = [category3, category4];
const result = component.hasCategory;
expect(result).toBeTrue();
});
it('should return false when does not have categories', () => {
describe('isCategoryEmpty', () => {
it('should return true when categories empty', () => {
component.categories = [];
const result = component.hasCategory;
expect(result).toBeFalse();
component.categoryNameControlVisible = false;
const result = component.isCategoryEmpty;
expect(result).toBeTrue();
});
});
lib/content-services/src/lib/category/categories-management/categories-management.component.ts
+3 -3
View File
@@ -189,10 +189,10 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
}
/*
* Returns `true` if has categories, otherwise `false`
* Returns `true` if categories empty, otherwise `false`
*/
get hasCategory(): boolean {
return this.categories?.length > 0;
get isCategoryEmpty(): boolean {
return this.categories?.length === 0 && !this.categoryNameControlVisible;
}
get existingCategories(): Category[] {
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
+4 -2
View File
@@ -202,8 +202,10 @@
<mat-icon>
{{ group.expanded ? 'expand_more' : 'chevron_right'}}
</mat-icon>
<mat-panel-title class="adf-metadata-properties-title">
{{ group.title | translate }}
<mat-panel-title class="adf-metadata-properties-title" matTooltip="{{ group.title | translate }}">
<p class="adf-metadata-properties-group-title">
{{ group.title | translate }}
</p>
</mat-panel-title>
</div>
<button *ngIf="hasGroupToggleEdit(group)"
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
+28 -8
View File
@@ -1,14 +1,22 @@
.adf {
&-metadata-properties {
mat-expansion-panel-header {
height: 56px;
.adf-metadata-properties-title {
font-weight: 700;
font-size: 15px;
padding-left: 12px;
height: 56px;
padding: 0 12px;
.adf-metadata-properties-title {
font-weight: 700;
font-size: 15px;
padding-left: 12px;
}
.adf-metadata-properties-group-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 80px;
}
}
}
.mat-expansion-panel:not([class*='mat-elevation-z']) {
box-shadow: none;
@@ -47,7 +55,7 @@
align-items: center;
justify-content: center;
font-size: 15px;
padding: 24px;
padding-top: 16px;
}
&-tags {
@@ -118,3 +126,15 @@
box-shadow: none;
}
}
.adf-metadata-grouped-properties-container .mat-content.mat-content-hide-toggle {
align-items: center;
}
.adf-metadata-grouped-properties-container {
.mat-expansion-panel {
.mat-expansion-panel-body {
padding: 0 24px 0px;
}
}
}
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts
+7 -3
View File
@@ -21,7 +21,7 @@ import { By } from '@angular/platform-browser';
import { Category, CategoryPaging, ClassesApi, Node, Tag, TagBody, TagEntry, TagPaging, TagPagingList } from '@alfresco/js-api';
import { ContentMetadataComponent } from './content-metadata.component';
import { ContentMetadataService } from '../../services/content-metadata.service';
import { AppConfigService, CardViewBaseItemModel, CardViewComponent, LogService, UpdateNotification } from '@alfresco/adf-core';
import { AppConfigService, CardViewBaseItemModel, CardViewComponent, LogService, NotificationService, UpdateNotification } from '@alfresco/adf-core';
import { NodesApiService } from '../../../common/services/nodes-api.service';
import { EMPTY, of, throwError } from 'rxjs';
import { ContentTestingModule } from '../../../testing/content.testing.module';
@@ -52,6 +52,7 @@ describe('ContentMetadataComponent', () => {
let tagService: TagService;
let categoryService: CategoryService;
let getClassSpy: jasmine.Spy;
let notificationService: NotificationService;
const preset = 'custom-preset';
@@ -192,6 +193,7 @@ describe('ContentMetadataComponent', () => {
nodesApiService = TestBed.inject(NodesApiService);
tagService = TestBed.inject(TagService);
categoryService = TestBed.inject(CategoryService);
notificationService = TestBed.inject(NotificationService);
const propertyDescriptorsService = TestBed.inject(PropertyDescriptorsService);
const classesApi = propertyDescriptorsService['classesApi'];
@@ -441,6 +443,7 @@ describe('ContentMetadataComponent', () => {
describe('toggleEdit', () => {
let mockEvent: MouseEvent;
let showErrorSpy: jasmine.Spy;
const mockGroup: CardViewGroup = {
editable: false,
expanded: false,
@@ -450,6 +453,7 @@ describe('ContentMetadataComponent', () => {
beforeEach(() => {
mockEvent = new MouseEvent('click');
component.editableGroup = mockGroup;
showErrorSpy = spyOn(notificationService, 'showError').and.stub();
});
it('should toggle General Info editing mode', () => {
@@ -489,10 +493,10 @@ describe('ContentMetadataComponent', () => {
it('should show Snackbar when Editing Panel is Active', () => {
spyOn(component, 'isEditingPanel').and.returnValue(true);
spyOn(component, 'showSnackbarError');
component.toggleEdit(mockEvent, mockGroup, ButtonType.GeneralInfo);
expect(component.isEditingPanel).toHaveBeenCalled();
expect(component.showSnackbarError).toHaveBeenCalledWith('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
expect(showErrorSpy).toHaveBeenCalledWith('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
});
});
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
+1 -9
View File
@@ -374,14 +374,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
);
}
showSnackbarError(message: string): void {
this.notificationService.showError(message);
}
toggleEdit(event: MouseEvent, group: CardViewGroup, buttonType: ButtonType): void {
event.stopPropagation();
if (this.isEditingPanel()) {
this.showSnackbarError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
return;
}
@@ -397,21 +393,18 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
this.editableTags = false;
this.editableCategories = false;
break;
case ButtonType.Tags:
this.editableTags = !this.editableTags;
this.editableTagsChange.emit(this.editableTags);
this.isTagPanelVisible = this.editableTags;
this.tagNameControlVisible = true;
break;
case ButtonType.Categories:
this.editableCategories = !this.editableCategories;
this.editableCategoriesChange.emit(this.editableCategories);
this.isCategoriesPanelVisible = this.editableCategories;
this.categoryControlVisible = true;
break;
case ButtonType.Group:
group.editable = !group.editable;
this.groupChange.emit(group);
@@ -420,7 +413,6 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
group.expanded = true;
}
break;
default:
break;
}
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
+2 -4
View File
@@ -14,16 +14,14 @@
</div>
<p
class="adf-no-tags-message"
*ngIf="!hasTags">
*ngIf="isTagsEmpty">
{{ '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">
<span *ngFor="let tag of tags" class="adf-tag adf-label-with-icon-button">
{{ tag }}
<button
data-automation-id="remove-tag-button"
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
+7 -7
View File
@@ -11,7 +11,6 @@ adf-tags-creator {
border-radius: 16px;
padding: 6px 0;
padding-left: 12px;
margin-left: 8px;
.adf-remove-tag {
line-height: 24px;
@@ -21,7 +20,6 @@ adf-tags-creator {
}
.adf-no-tags-message {
margin-left: 9px;
margin-top: 28.5px;
margin-bottom: 0;
height: 30px;
@@ -55,7 +53,6 @@ adf-tags-creator {
border-radius: 12px;
align-items: center;
display: flex;
padding: 0 12px;
.mat-form-field-underline {
display: none;
@@ -70,7 +67,7 @@ adf-tags-creator {
color: var(--theme-primary-color);
cursor: pointer;
margin-top: -1px;
padding-left: 27px;
padding-left: 12px;
overflow-wrap: anywhere;
display: inline-block;
padding-right: 12px;
@@ -79,10 +76,13 @@ adf-tags-creator {
.adf-tags-list {
padding-right: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.adf-tag {
margin-top: 0;
margin-top: 8px;
overflow-wrap: anywhere;
& + .adf-tag {
@@ -104,7 +104,7 @@ adf-tags-creator {
}
.adf-tags-list {
padding-left: 18px;
padding-left: 12px;
margin-top: -2px;
padding-right: 0;
display: flex;
@@ -123,7 +123,7 @@ adf-tags-creator {
}
.mat-list-item-content-reverse {
padding: 0 6px;
padding: 0;
.mat-pseudo-checkbox {
display: none;
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts
+5 -10
View File
@@ -337,17 +337,12 @@ describe('TagsCreatorComponent', () => {
});
});
describe('hasTags', () => {
it('should return true when has tags', () => {
component.tags = ['new tag 1', 'new tag 2'];
const result = component.hasTags;
expect(result).toBeTrue();
});
it('should return false when does not have tags', () => {
describe('isTagsEmpty', () => {
it('should return true when tags empty', () => {
component.tags = [];
const result = component.hasTags;
expect(result).toBeFalse();
component.tagNameControlVisible = false;
const result = component.isTagsEmpty;
expect(result).toBeTrue();
});
});
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts
+3 -3
View File
@@ -227,10 +227,10 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
}
/*
* Returns `true` if has tags, otherwise `false`
* Returns `true` if tags empty, otherwise `false`
*/
get hasTags(): boolean {
return this.tags?.length > 0;
get isTagsEmpty(): boolean {
return this.tags.length === 0 && !this.tagNameControlVisible;
}
get existingTags(): TagEntry[] {