From f7dcab7adbccc3784c15ac004ab72fbc7d7113cf Mon Sep 17 00:00:00 2001 From: MichalKinas <113341662+MichalKinas@users.noreply.github.com> Date: Mon, 26 Feb 2024 08:47:56 +0100 Subject: [PATCH] [ACS-6831] Property panel refactoring (#9372) * [ACS-6831] Refactor property panel feature to mitigate bugs and increase code quality * [ACS-6831] Introduce new interace for metadata panel * ACS-6831 Corrected tests * ACS-6831 Fixed unit tests * ACS-6831 Fixed unit tests * ACS-6831 Cleaning code * ACS-6831 Added tests * ACS-6831 Replaced fdescribe with describe * [ACS-6831] Use default properties enum, fix editing state * [ACS-6831] Expand correct section based on displayAspect property * [ACS-6831] Lint fix --------- Co-authored-by: Aleksander Sklorz --- ...content-metadata-custom-panel.interface.md | 5 +- .../content-metadata-panel.interface.md | 32 + .../content-metadata-header.component.ts | 7 +- .../content-metadata.component.html | 264 +++++---- .../content-metadata.component.spec.ts | 550 +++++++++--------- .../content-metadata.component.ts | 275 +++------ .../interfaces/card-view-group.interface.ts | 2 +- ...content-metadata-custom-panel.interface.ts | 6 +- .../content-metadata-panel.interface.ts | 21 + .../interfaces/content-metadata.interfaces.ts | 1 + ...property-groups-translator.service.spec.ts | 28 +- .../property-groups-translator.service.ts | 1 + 12 files changed, 588 insertions(+), 604 deletions(-) create mode 100644 docs/content-services/interfaces/content-metadata-panel.interface.md create mode 100644 lib/content-services/src/lib/content-metadata/interfaces/content-metadata-panel.interface.ts diff --git a/docs/content-services/interfaces/content-metadata-custom-panel.interface.md b/docs/content-services/interfaces/content-metadata-custom-panel.interface.md index 782b0cfdd2..2cb47fac2f 100644 --- a/docs/content-services/interfaces/content-metadata-custom-panel.interface.md +++ b/docs/content-services/interfaces/content-metadata-custom-panel.interface.md @@ -12,8 +12,7 @@ Specifies required properties for custom metadata panel to be displayed in [Cont ## Basic usage ```ts -export interface ContentMetadataCustomPanel { - panelTitle: string; +export interface ContentMetadataCustomPanel extends ContentMetadataPanel { component: string; } ``` @@ -22,10 +21,10 @@ export interface ContentMetadataCustomPanel { | Name | Type | Default value | Description | | ---- | ---- | ------------- | ----------- | -| panelTitle | `string` | | Title for the panel the will be displayed in expansion panel header. | | component | `string` | | Id of the registered [Dynamic component](../../extensions/components/dynamic.component.md) to be displayed inside expansion panel. | ## See also - [ContentMetadataCardComponent](../components/content-metadata-card.component.md) - [Dynamic Component](../../extensions/components/dynamic.component.md) +- [Content Metadata Panel intergace](./content-metadata-panel.interface.md) diff --git a/docs/content-services/interfaces/content-metadata-panel.interface.md b/docs/content-services/interfaces/content-metadata-panel.interface.md new file mode 100644 index 0000000000..3f9632283c --- /dev/null +++ b/docs/content-services/interfaces/content-metadata-panel.interface.md @@ -0,0 +1,32 @@ +--- +Title: Content Metadata Panel interface +Added: v6.7.0 +Status: Active +Last reviewed: 2024-02-22 +--- + +# [Content Metadata Panel interface](../../../lib/content-services/src/lib/content-metadata/interfaces/content-metadata-panel.interface.ts "Defined in content-metadata-panel.interface.ts") + +Specifies required properties for metadata panel to be displayed in [ContentMetadataCardComponent](../components/content-metadata-card.component.md). + +## Basic usage + +```ts +export interface ContentMetadataPanel { + panelTitle: string; + expanded?: boolean; +} +``` + +### Properties + +| Name | Type | Default value | Description | +| ---- | ---- | ------------- | ----------- | +| panelTitle | `string` | | Title for the panel the will be displayed in expansion panel header. | +| expanded | `boolean` | | Specifies if given panel is expanded. | + +## See also + +- [ContentMetadataCardComponent](../components/content-metadata-card.component.md) +- [Dynamic Component](../../extensions/components/dynamic.component.md) +- [Content Metadata Custom panel interface](./content-metadata-custom-panel.interface.md) diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata-header.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata-header.component.ts index 8c857e2a11..dadc58d755 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata-header.component.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata-header.component.ts @@ -31,10 +31,13 @@ import { TranslateModule } from '@ngx-translate/core'; adf-content-metadata-header { display: flex; align-items: center; - flex: 1; + width: 100%; } .adf-metadata-properties-title { + display: block; + overflow: hidden; + text-overflow: ellipsis; font-weight: 700; font-size: 15px; padding-left: 12px; @@ -44,7 +47,7 @@ import { TranslateModule } from '@ngx-translate/core'; template: ` {{ expanded ? 'expand_more' : 'chevron_right' }} - {{ title | translate }} + {{ title | translate }} ` diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html index 322623e271..13601ad724 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html @@ -2,35 +2,43 @@ - - - -
- -
@@ -40,7 +48,7 @@ class="adf-metadata-properties-expansion-panel" (keydown)="keyDown($event)" [properties]="basicProperties$ | async" - [editable]="isEditingModeGeneralInfo" + [editable]="!readOnly && isPanelEditing(DefaultPanels.PROPERTIES)" [displayEmpty]="displayEmpty" [copyToClipboardAction]="copyToClipboardAction" [useChipsForMultiValueProperty]="useChipsForMultiValueProperty" @@ -49,48 +57,58 @@ - - - - -
- -
- + -
+
{{ tag }}
{{ 'METADATA.BASIC.NO_TAGS_ADDED' | translate }}
- - - - -
- -
-
+

{{ category.name }}

{{ 'CATEGORIES_MANAGEMENT.NO_CATEGORIES_ADDED' | translate }}
- - + + -
+
- - - -
- -
- {{ 'METADATA.BASIC.NO_ITEMS_MESSAGE' | translate: { groupTitle: group.title | translate } }} + {{ 'METADATA.BASIC.NO_ITEMS_MESSAGE' | translate : { groupTitle: group.title | translate } }}
- - + diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts index f0bf225e8d..240754c7ea 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts @@ -30,7 +30,6 @@ import { CardViewContentUpdateService } from '../../../common/services/card-view import { PropertyGroup } from '../../interfaces/property-group.interface'; import { PropertyDescriptorsService } from '../../services/property-descriptors.service'; import { - CardViewGroup, CategoriesManagementComponent, CategoriesManagementMode, CategoryService, @@ -38,6 +37,7 @@ import { TagsCreatorMode, TagService } from '@alfresco/adf-content-services'; +import { MatExpansionPanel } from '@angular/material/expansion'; describe('ContentMetadataComponent', () => { let component: ContentMetadataComponent; @@ -100,12 +100,50 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); }; + const clickOnGroupSave = () => fixture.debugElement.query(By.css('[data-automation-id="save-metadata"]')) + .nativeElement.click(); + const findTagsCreator = (): TagsCreatorComponent => fixture.debugElement.query(By.directive(TagsCreatorComponent))?.componentInstance; 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"]')); + const toggleEditModeForTags = (): void => { + getTagsToggleEditButton().nativeElement.click(); + fixture.detectChanges(); + }; + + const toggleEditModeForGeneralInfo = (): void => { + getToggleEditButton().nativeElement.click(); + fixture.detectChanges(); + }; + + const toggleEditModeForCategories = (): void => { + getCategoriesToggleEditButton().nativeElement.click(); + fixture.detectChanges(); + }; + + const toggleEditModeForGroup = (): void => { + getGroupToggleEditButton().nativeElement.click(); + fixture.detectChanges(); + }; + + const getGeneralInfoPanelContent = (): CardViewComponent => fixture.debugElement.query(By.css( + '.adf-metadata-properties-expansion-panel' + )).componentInstance; + + const getGroupPanelContent = (): CardViewComponent => fixture.debugElement.query(By.css( + '.adf-metadata-grouped-properties-container adf-card-view' + )).componentInstance; + + const getGeneralInfoPanel = (): MatExpansionPanel => fixture.debugElement.query(By.css( + '[data-automation-id="adf-metadata-group-properties"]' + ))?.componentInstance; + + const queryDom = (properties = 'properties') => + fixture.debugElement.query(By.css(`[data-automation-id="adf-metadata-group-${properties}"]`)); + /** * Get metadata categories * @@ -124,25 +162,6 @@ describe('ContentMetadataComponent', () => { return fixture.debugElement.query(By.directive(CategoriesManagementComponent))?.componentInstance; } - /** - * Update aspect property - * - * @param newValue value to set - */ - async function updateAspectProperty(newValue: string): Promise { - const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; - const expectedNode = { ...node, name: 'some-modified-value' }; - spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode)); - - updateService.update(property, newValue); - tick(600); - - fixture.detectChanges(); - await fixture.whenStable(); - component.onSaveGroupChanges({} as any); - await fixture.whenStable(); - } - beforeEach(() => { TestBed.configureTestingModule({ imports: [TranslateModule.forRoot(), ContentTestingModule], @@ -206,16 +225,12 @@ describe('ContentMetadataComponent', () => { }); describe('Default input param values', () => { - it('should have editable input param as false by default', () => { - expect(component.isEditingModeGeneralInfo).toBe(false); - }); - it('should have displayEmpty input param as false by default', () => { - expect(component.displayEmpty).toBe(false); + expect(component.displayEmpty).toBeFalse(); }); it('should have expanded input param as false by default', () => { - expect(component.expanded).toBe(false); + expect(component.expanded).toBeFalse(); }); }); @@ -258,22 +273,29 @@ describe('ContentMetadataComponent', () => { expect(contentMetadataService.getGroupedProperties).toHaveBeenCalled(); })); - it('should save changedProperties on save click', fakeAsync(async () => { - const expectedNode = { ...node, name: 'some-modified-value' }; - await updateAspectProperty('updated-value'); - expect(component.node).toEqual(expectedNode); - expect(nodesApiService.updateNode).toHaveBeenCalled(); - })); + it('should save changedProperties on save click', fakeAsync(() => { + spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([{ + editable: true, + title: 'test', + properties: [] + }])); + updateService.itemUpdated$.next({ + changed: {} + } as UpdateNotification); + component.ngOnInit(); + tick(500); + component.readOnly = false; + fixture.detectChanges(); + const expectedNode: Node = { ...node, name: 'some-modified-value' }; + spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode)); + toggleEditModeForGroup(); - it('should save changedProperties which delete property and update node on save click', fakeAsync(async () => { - const expectedNode = { ...node, name: 'some-modified-value' }; - await updateAspectProperty(''); - expect(component.node).toEqual({ ...expectedNode, properties: {} }); + clickOnGroupSave(); expect(nodesApiService.updateNode).toHaveBeenCalled(); + expect(component.node).toEqual(expectedNode); })); it('should call removeTag and assignTagsToNode on TagService on save click', fakeAsync(() => { - component.isEditingModeTags = true; component.displayTags = true; const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; @@ -285,10 +307,10 @@ describe('ContentMetadataComponent', () => { spyOn(tagService, 'assignTagsToNode').and.returnValue(EMPTY); const tagName1 = tagPaging.list.entries[0].entry.tag; const tagName2 = 'New tag 3'; - component.isEditingModeTags = true; component.readOnly = false; updateService.update(property, 'updated-value'); fixture.detectChanges(); + toggleEditModeForTags(); findTagsCreator().tagsChange.emit([tagName1, tagName2]); fixture.detectChanges(); tick(600); @@ -304,7 +326,6 @@ describe('ContentMetadataComponent', () => { })); it('should call getTagsByNodeId on TagService on save click', () => { - component.isEditingModeTags = true; component.displayTags = true; const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; const expectedNode = { ...node, name: 'some-modified-value' }; @@ -312,21 +333,23 @@ describe('ContentMetadataComponent', () => { const tagPaging = mockTagPaging(); const getTagsByNodeIdSpy = spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); component.ngOnInit(); + component.readOnly = false; spyOn(tagService, 'removeTag').and.returnValue(of(undefined)); spyOn(tagService, 'assignTagsToNode').and.returnValue(of({})); updateService.update(property, 'updated-value'); fixture.detectChanges(); + toggleEditModeForTags(); findTagsCreator().tagsChange.emit([tagPaging.list.entries[0].entry.tag, 'New tag 3']); + fixture.detectChanges(); getTagsByNodeIdSpy.calls.reset(); - component.onSaveTagsChanges(); + clickOnTagsSave(); expect(tagService.getTagsByNodeId).toHaveBeenCalledWith(node.id); }); it('should throw error on unsuccessful save', fakeAsync(() => { - component.isEditingModeGeneralInfo = true; component.readOnly = false; const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel; updateService.update(property, 'updated-value'); @@ -341,13 +364,13 @@ describe('ContentMetadataComponent', () => { spyOn(nodesApiService, 'updateNode').and.returnValue(throwError(new Error('My bad'))); fixture.detectChanges(); + toggleEditModeForGeneralInfo(); fixture.whenStable().then(() => clickOnGeneralInfoSave()); discardPeriodicTasks(); flush(); })); it('should open the confirm dialog when content type is changed', fakeAsync(() => { - component.isEditingModeGeneralInfo = true; component.readOnly = false; const property = { key: 'nodeType', value: 'ft:sbiruli' } as CardViewBaseItemModel; const expectedNode = { ...node, nodeType: 'ft:sbiruli' }; @@ -358,6 +381,7 @@ describe('ContentMetadataComponent', () => { tick(600); fixture.detectChanges(); + toggleEditModeForGeneralInfo(); tick(100); clickOnGeneralInfoSave(); @@ -382,12 +406,12 @@ describe('ContentMetadataComponent', () => { spyOn(tagService, 'assignTagsToNode').and.returnValue(EMPTY); const tagName1 = tagPaging.list.entries[0].entry.tag; const tagName2 = 'New tag 3'; - component.isEditingModeTags = true; component.readOnly = false; updateService.update(property, 'ft:poppoli'); tick(600); fixture.detectChanges(); + toggleEditModeForTags(); findTagsCreator().tagsChange.emit([tagName1, tagName2]); tick(100); fixture.detectChanges(); @@ -405,7 +429,6 @@ describe('ContentMetadataComponent', () => { })); it('should retrigger the load of the properties when the content type has changed', fakeAsync(() => { - component.isEditingModeGeneralInfo = true; component.readOnly = false; const property = { key: 'nodeType', value: 'ft:sbiruli' } as CardViewBaseItemModel; const expectedNode = Object.assign({}, node, { nodeType: 'ft:sbiruli' }); @@ -417,6 +440,7 @@ describe('ContentMetadataComponent', () => { tick(600); fixture.detectChanges(); + toggleEditModeForGeneralInfo(); tick(100); clickOnGeneralInfoSave(); @@ -431,90 +455,78 @@ describe('ContentMetadataComponent', () => { describe('toggleEdit', () => { let showErrorSpy: jasmine.Spy; - const mockGroup: CardViewGroup = { - editable: false, - expanded: false, - title: '', - properties: [] - }; beforeEach(() => { - component.currentGroup = mockGroup; showErrorSpy = spyOn(notificationService, 'showError').and.stub(); + spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([{ + editable: true, + title: 'test', + properties: [] + }])); + component.displayCategories = true; + component.displayTags = true; + component.ngOnInit(); + component.readOnly = false; + fixture.detectChanges(); }); it('should toggle General Info editing mode', () => { - component.isEditingModeGeneralInfo = false; - component.onToggleGeneralInfoEdit(); - expect(component.isEditingModeTags).toBe(false); - expect(component.isEditingModeCategories).toBe(false); - expect(component.currentGroup.editable).toBe(false); + toggleEditModeForGeneralInfo(); + expect(getToggleEditButton()).toBeNull(); + expect(getGeneralInfoPanelContent().editable).toBeTrue(); + expect(getTagsToggleEditButton()).toBeDefined(); + expect(findTagsCreator()).toBeUndefined(); + expect(getCategoriesToggleEditButton()).toBeDefined(); + expect(getCategoriesManagementComponent()).toBeUndefined(); + expect(getGroupToggleEditButton()).toBeDefined(); + expect(getGroupPanelContent().editable).toBeFalse(); }); it('should toggle Tags editing mode', () => { - component.isEditingModeTags = false; - component.onToggleTagsEdit(); - expect(component.isTagPanelExpanded).toBe(component.isEditingModeTags); - expect(component.tagNameControlVisible).toBe(true); - expect(component.isEditingModeCategories).toBe(false); - expect(component.currentGroup.editable).toBe(false); + toggleEditModeForTags(); + expect(getTagsToggleEditButton()).toBeNull(); + expect(findTagsCreator()).toBeDefined(); + expect(getToggleEditButton()).toBeDefined(); + expect(getGeneralInfoPanelContent().editable).toBeFalse(); + expect(getCategoriesToggleEditButton()).toBeDefined(); + expect(getCategoriesManagementComponent()).toBeUndefined(); + expect(getGroupToggleEditButton()).toBeDefined(); + expect(getGroupPanelContent().editable).toBeFalse(); }); it('should toggle Categories editing mode', () => { - component.isEditingModeCategories = false; - component.onToggleCategoriesEdit(); - expect(component.isCategoriesPanelExpanded).toBe(component.isEditingModeCategories); - expect(component.categoryControlVisible).toBe(true); - expect(component.isEditingModeTags).toBe(false); - expect(component.currentGroup.editable).toBe(false); + toggleEditModeForCategories(); + expect(getCategoriesToggleEditButton()).toBeNull(); + expect(getCategoriesManagementComponent()).toBeDefined(); + expect(getTagsToggleEditButton()).toBeDefined(); + expect(findTagsCreator()).toBeUndefined(); + expect(getToggleEditButton()).toBeDefined(); + expect(getGeneralInfoPanelContent().editable).toBeFalse(); + expect(getGroupToggleEditButton()).toBeDefined(); + expect(getGroupPanelContent().editable).toBeFalse(); }); it('should toggle Group editing mode', () => { - component.onToggleGroupEdit(mockGroup); - expect(component.isEditingModeGeneralInfo).toBe(false); - expect(component.currentGroup).toBe(mockGroup); + toggleEditModeForGroup(); + expect(getGroupToggleEditButton()).toBeNull(); + expect(getGroupPanelContent().editable).toBeTrue(); + expect(getCategoriesToggleEditButton()).toBeDefined(); + expect(getCategoriesManagementComponent()).toBeUndefined(); + expect(getTagsToggleEditButton()).toBeDefined(); + expect(findTagsCreator()).toBeUndefined(); + expect(getToggleEditButton()).toBeDefined(); + expect(getGeneralInfoPanelContent().editable).toBeFalse(); }); - it('should show Snackbar when Editing Panel is Active', () => { - spyOn(component, 'isEditingPanel').and.returnValue(true); - component.onToggleGeneralInfoEdit(); - expect(component.isEditingPanel).toHaveBeenCalled(); + it('should show Snackbar if trying to edit different panel when other panel has some changes', () => { + toggleEditModeForTags(); + findTagsCreator().tagsChange.emit(['test']); + + toggleEditModeForGeneralInfo(); expect(showErrorSpy).toHaveBeenCalledWith('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); }); }); - describe('toggleEditMode', () => { - it('should toggle general editable', () => { - component.isEditingModeGeneralInfo = false; - component.onToggleGeneralInfoEdit(); - expect(component.isEditingModeGeneralInfo).toBe(true); - }); - - it('should toggle tags editable', () => { - component.isEditingModeTags = false; - component.onToggleTagsEdit(); - expect(component.isEditingModeTags).toBe(true); - }); - - it('should toggle categories editable', () => { - component.isEditingModeCategories = false; - component.onToggleCategoriesEdit(); - expect(component.isEditingModeCategories).toBe(true); - }); - - it('should toggle group editable', () => { - const group: CardViewGroup = { - editable: false, - expanded: false, - title: '', - properties: [] - }; - component.currentGroup = null; - component.onToggleGroupEdit(group); - expect(group.editable).toBe(true); - }); - }); - describe('Permission', () => { beforeEach(() => { component.readOnly = false; @@ -556,103 +568,63 @@ describe('ContentMetadataComponent', () => { }); }); - describe('hasToggleEdit', () => { - it('should return true when editable is false, readOnly is false, and hasAllowableOperations is true', () => { - component.isEditingModeGeneralInfo = false; + describe('Resetting', () => { + beforeEach(() => { + spyOn(nodesApiService, 'updateNode').and.returnValue(EMPTY); component.readOnly = false; - expect(component.canEditGeneralInfo).toBe(true); }); - it('should return false when editable is true', () => { - component.isEditingModeGeneralInfo = true; - component.readOnly = false; + it('should reset general info edit ability on reset click', () => { fixture.detectChanges(); - expect(component.canEditGeneralInfo).toBe(false); - expect(component.isEditingGeneralInfo).toBe(true); - }); - }); + toggleEditModeForGeneralInfo(); - describe('hasTagsToggleEdit', () => { - it('should have hasTagsToggleEdit property as expected', () => { - component.isEditingModeTags = false; - component.readOnly = false; + findCancelButton().click(); fixture.detectChanges(); - expect(component.canEditTags).toBe(true); - }); - - it('should return false when editable is true', () => { - component.isEditingModeTags = true; - component.readOnly = false; - fixture.detectChanges(); - expect(component.canEditTags).toBe(false); - expect(component.isEditingTags).toBe(true); - }); - }); - - describe('hasGroupToggleEdit', () => { - it('should return true when group is not editable, not read-only', () => { - component.readOnly = false; - const group: CardViewGroup = { - title: 'Group Title', - properties: [], - expanded: true, - editable: false - }; - const result = component.hasGroupToggleEdit(group); - expect(result).toBe(true); - }); - - it('should return true when group is editable, not read-only', () => { - component.readOnly = false; - const group: CardViewGroup = { - title: 'Group Title', - properties: [], - expanded: true, - editable: true - }; - const result = component.isGroupToggleEditing(group); - expect(result).toBe(true); - }); - }); - - describe('hasCategoriesToggleEdit', () => { - it('should have hasCategoriesToggleEdit property as expected', () => { - component.isEditingModeCategories = false; - component.readOnly = false; - expect(component.canEditCategories).toBe(true); - }); - - it('should return false when editable is true', () => { - component.isEditingModeCategories = true; - component.readOnly = false; - fixture.detectChanges(); - expect(component.canEditCategories).toBe(false); - expect(component.isEditingCategories).toBe(true); - }); - }); - - describe('Reseting', () => { - it('should reset properties on reset click', async () => { - component.changedProperties = { properties: { 'property-key': 'updated-value' } }; - component.hasMetadataChanged = true; - component.tagNameControlVisible = true; - component.categoryControlVisible = true; - component.isEditingModeGeneralInfo = true; - component.readOnly = false; - const expectedNode = Object.assign({}, node, { name: 'some-modified-value' }); - spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode)); - - fixture.detectChanges(); - await fixture.whenStable(); - const resetButton = fixture.debugElement.query(By.css('[data-automation-id="reset-metadata"]')); - resetButton.nativeElement.click(); - - fixture.detectChanges(); - expect(component.changedProperties).toEqual({}); expect(nodesApiService.updateNode).not.toHaveBeenCalled(); - expect(component.hasMetadataChanged).toBeFalse(); - expect(component.tagNameControlVisible).toBeFalse(); - expect(component.categoryControlVisible).toBeFalse(); + expect(getToggleEditButton()).toBeDefined(); + expect(getGeneralInfoPanelContent().editable).toBeFalse(); + }); + + it('should reset tags edit ability on reset click', () => { + component.displayTags = true; + fixture.detectChanges(); + toggleEditModeForTags(); + + findCancelTagsButton().click(); + fixture.detectChanges(); + expect(nodesApiService.updateNode).not.toHaveBeenCalled(); + expect(getTagsToggleEditButton()).toBeDefined(); + expect(findTagsCreator()).toBeUndefined(); + }); + + it('should reset categories edit ability on reset click', () => { + component.displayCategories = true; + fixture.detectChanges(); + toggleEditModeForCategories(); + + findCancelButton().click(); + fixture.detectChanges(); + expect(nodesApiService.updateNode).not.toHaveBeenCalled(); + expect(getCategoriesToggleEditButton()).toBeDefined(); + expect(getCategoriesManagementComponent()).toBeUndefined(); + }); + + it('should reset group edit ability on reset click', () => { + spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([{ + editable: true, + title: 'test', + properties: [] + }])); + component.ngOnInit(); + component.readOnly = false; + fixture.detectChanges(); + toggleEditModeForGroup(); + + findCancelButton().click(); + fixture.detectChanges(); + expect(nodesApiService.updateNode).not.toHaveBeenCalled(); + expect(getGroupToggleEditButton()).toBeDefined(); + expect(getGroupPanelContent().editable).toBeFalse(); }); }); @@ -748,11 +720,7 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - - const firstGroupedPropertiesComponent = fixture.debugElement.query( - By.css('.adf-metadata-grouped-properties-container adf-card-view') - ).componentInstance; - expect(firstGroupedPropertiesComponent.properties).toBe(expectedProperties); + expect(getGroupPanelContent().properties).toBe(expectedProperties); }); it('should pass through the displayEmpty to the card view of grouped properties', async () => { @@ -766,11 +734,7 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - - const basicPropertiesComponent = fixture.debugElement.query( - By.css('.adf-metadata-grouped-properties-container adf-card-view') - ).componentInstance; - expect(basicPropertiesComponent.displayEmpty).toBe(false); + expect(getGroupPanelContent().displayEmpty).toBe(false); }); it('should hide card views group when the grouped properties are empty', async () => { @@ -798,31 +762,52 @@ describe('ContentMetadataComponent', () => { expect(basicPropertiesGroup).toBeDefined(); }); - it('should revert changes for general info panel on cancel', () => { - const spy = spyOn(contentMetadataService, 'getBasicProperties'); - component.onCancelGeneralInfoEdit(); - expect(spy).toHaveBeenCalled(); + it('should revert reload properties for general info panel on cancel', () => { + component.readOnly = false; + fixture.detectChanges(); + spyOn(contentMetadataService, 'getBasicProperties'); + toggleEditModeForGeneralInfo(); + + findCancelButton().click(); + expect(contentMetadataService.getBasicProperties).toHaveBeenCalled(); }); - it('should revert changes for getGroupedProperties panel on cancel', () => { - spyOn(contentMetadataService, 'getGroupedProperties'); + it('should reload properties for group panel on cancel', () => { + const getGroupedPropertiesSpy = spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([{ + editable: true, + title: 'test', + properties: [] + }])); component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) }); - component.onCancelGroupEdit({} as CardViewGroup); - expect(contentMetadataService.getGroupedProperties).toHaveBeenCalledWith(expectedNode, 'custom-preset'); + component.readOnly = false; + fixture.detectChanges(); + toggleEditModeForGroup(); + getGroupedPropertiesSpy.calls.reset(); + + findCancelButton().click(); + expect(getGroupedPropertiesSpy).toHaveBeenCalledWith(node, 'custom-preset'); }); - it('should revert changes for categories panel on cancel', () => { - const spy = spyOn(categoryService, 'getCategoryLinksForNode').and.returnValue(of(categoryPagingResponse)); + it('should reload categories for categories panel on cancel', () => { + spyOn(categoryService, 'getCategoryLinksForNode').and.returnValue(of(categoryPagingResponse)); component.displayCategories = true; - component.onCancelCategoriesEdit(); - expect(spy).toHaveBeenCalledWith(expectedNode.id); + component.readOnly = false; + fixture.detectChanges(); + toggleEditModeForCategories(); + + findCancelButton().click(); + expect(categoryService.getCategoryLinksForNode).toHaveBeenCalledWith(expectedNode.id); }); - it('should revert changes for tags panel on cancel', () => { - const spy = spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(mockTagPaging())); + it('should reload tags for tags panel on cancel', () => { + spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(mockTagPaging())); component.displayTags = true; - component.onCancelTagsEdit(); - expect(spy).toHaveBeenCalledWith(expectedNode.id); + component.readOnly = false; + fixture.detectChanges(); + toggleEditModeForTags(); + + findCancelTagsButton().click(); + expect(tagService.getTagsByNodeId).toHaveBeenCalledWith(expectedNode.id); }); }); @@ -830,15 +815,15 @@ describe('ContentMetadataComponent', () => { it('should hide metadata fields if displayDefaultProperties is set to false', () => { component.displayDefaultProperties = false; fixture.detectChanges(); - const metadataContainer = fixture.debugElement.query(By.css('[data-automation-id="adf-metadata-group-properties"]')); + const metadataContainer = getGeneralInfoPanel(); fixture.detectChanges(); - expect(metadataContainer).toBeNull(); + expect(metadataContainer).toBeUndefined(); }); it('should display metadata fields if displayDefaultProperties is set to true', () => { component.displayDefaultProperties = true; fixture.detectChanges(); - const metadataContainer = fixture.debugElement.query(By.css('[data-automation-id="adf-metadata-group-properties"]')); + const metadataContainer = getGeneralInfoPanel(); fixture.detectChanges(); expect(metadataContainer).toBeDefined(); }); @@ -956,7 +941,7 @@ describe('ContentMetadataComponent', () => { await component.groupedProperties$.toPromise(); fixture.detectChanges(); - const verProp = queryDom(fixture, 'Versionable'); + const verProp = queryDom('Versionable'); expect(verProp).toBeTruthy(); expect(classesApi.getClass).toHaveBeenCalledWith('cm_versionable'); @@ -996,7 +981,7 @@ describe('ContentMetadataComponent', () => { await component.groupedProperties$.toPromise(); fixture.detectChanges(); - const verProp = queryDom(fixture, 'Versionable'); + const verProp = queryDom('Versionable'); expect(verProp).toBeNull(); expect(classesApi.getClass).toHaveBeenCalledWith('cm_versionable'); @@ -1017,7 +1002,7 @@ describe('ContentMetadataComponent', () => { await component.groupedProperties$.toPromise(); fixture.detectChanges(); - const verProp = queryDom(fixture, 'Versionable'); + const verProp = queryDom('Versionable'); expect(verProp).toBeTruthy(); expect(classesApi.getClass).toHaveBeenCalledWith('cm_versionable'); @@ -1037,10 +1022,10 @@ describe('ContentMetadataComponent', () => { await component.groupedProperties$.toPromise(); fixture.detectChanges(); - const verProp = queryDom(fixture, 'Versionable'); + const verProp = queryDom('Versionable'); expect(verProp).toBeNull(); - const auditableProp = queryDom(fixture, 'Auditable'); + const auditableProp = queryDom('Auditable'); expect(auditableProp).toBeNull(); expect(classesApi.getClass).toHaveBeenCalledWith('cm_versionable'); @@ -1061,7 +1046,7 @@ describe('ContentMetadataComponent', () => { await component.groupedProperties$.toPromise(); fixture.detectChanges(); - const exifProp = queryDom(fixture, 'Exif'); + const exifProp = queryDom('Exif'); expect(exifProp).toBeTruthy(); expect(classesApi.getClass).toHaveBeenCalledWith('exif_exif'); @@ -1103,9 +1088,10 @@ describe('ContentMetadataComponent', () => { }); describe('Expand the panel', () => { + it('should general info panel be expanded by default if no displayAspect provided', () => { + fixture.detectChanges(); - beforeEach(() => { - component.isGeneralPanelExpanded = false; + expect(getGeneralInfoPanel().expanded).toBeTrue(); }); it('should open and update drawer with expand section dynamically', async () => { @@ -1116,16 +1102,16 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - let defaultProp = queryDom(fixture); - expect(defaultProp.componentInstance.expanded).toBeFalsy(); + let defaultProp = queryDom(); + expect(defaultProp.nativeElement.expanded).toBeFalsy(); component.displayAspect = 'CUSTOM'; fixture.detectChanges(); await fixture.whenStable(); - defaultProp = queryDom(fixture); - expect(defaultProp.componentInstance.expanded).toBeFalsy(); + defaultProp = queryDom(); + expect(defaultProp.nativeElement.expanded).toBeFalsy(); }); it('should not expand anything if input is wrong', async () => { @@ -1136,8 +1122,8 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const defaultProp = queryDom(fixture); - expect(defaultProp.componentInstance.expanded).toBeFalsy(); + const defaultProp = queryDom(); + expect(defaultProp.nativeElement.expanded).toBeFalsy(); }); it('should expand the section when displayAspect set as Properties', async () => { @@ -1146,7 +1132,7 @@ describe('ContentMetadataComponent', () => { component.ngOnInit(); fixture.detectChanges(); - expect(component.isGeneralPanelExpanded).toBeTruthy(); + expect(getGeneralInfoPanel().expanded).toBeTrue(); }); }); @@ -1182,6 +1168,12 @@ describe('ContentMetadataComponent', () => { describe('Tags list', () => { let tagPaging: TagPaging; + const expandTagsPanel = (): void => { + fixture.debugElement.query(By.css('[data-automation-id="adf-content-metadata-tags-panel"]')) + ?.componentInstance.opened.emit(); + fixture.detectChanges(); + }; + beforeEach(() => { tagPaging = mockTagPaging(); component.displayTags = true; @@ -1191,6 +1183,8 @@ describe('ContentMetadataComponent', () => { spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); component.ngOnInit(); fixture.detectChanges(); + + expandTagsPanel(); const tagElements = findTagElements(); expect(tagElements).toHaveSize(2); expect(tagElements[0].nativeElement.textContent).toBe(tagPaging.list.entries[0].entry.tag); @@ -1203,6 +1197,8 @@ describe('ContentMetadataComponent', () => { spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); component.ngOnInit(); fixture.detectChanges(); + + expandTagsPanel(); const tagElements = findTagElements(); expect(tagElements).toHaveSize(0); expect(tagService.getTagsByNodeId).not.toHaveBeenCalled(); @@ -1215,6 +1211,8 @@ describe('ContentMetadataComponent', () => { node: new SimpleChange(undefined, node, false) }); fixture.detectChanges(); + + expandTagsPanel(); const tagElements = findTagElements(); expect(tagElements).toHaveSize(2); expect(tagElements[0].nativeElement.textContent).toBe(tagPaging.list.entries[0].entry.tag); @@ -1225,10 +1223,11 @@ describe('ContentMetadataComponent', () => { it('should not render tags after loading tags in ngOnChanges if displayTags is false', () => { component.displayTags = false; spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); - component.ngOnChanges({ node: new SimpleChange(undefined, node, false) }); + + expandTagsPanel(); fixture.detectChanges(); const tagElements = findTagElements(); expect(tagElements).toHaveSize(0); @@ -1237,8 +1236,9 @@ describe('ContentMetadataComponent', () => { it('should not render tags after loading tags in ngOnChanges if node is not changed', () => { spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); - component.ngOnChanges({}); + + expandTagsPanel(); fixture.detectChanges(); const tagElements = findTagElements(); expect(tagElements).toHaveSize(0); @@ -1247,10 +1247,11 @@ describe('ContentMetadataComponent', () => { it('should not render tags after loading tags in ngOnChanges if node is changed first time', () => { spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); - component.ngOnChanges({ node: new SimpleChange(undefined, node, true) }); + + expandTagsPanel(); fixture.detectChanges(); const tagElements = findTagElements(); expect(tagElements).toHaveSize(0); @@ -1258,9 +1259,9 @@ describe('ContentMetadataComponent', () => { }); it('should render tags after loading tags after clicking on Cancel button', fakeAsync(() => { - component.isEditingModeTags = true; component.readOnly = false; fixture.detectChanges(); + toggleEditModeForTags(); TestBed.inject(CardViewContentUpdateService).itemUpdated$.next({ changed: {} } as UpdateNotification); @@ -1268,8 +1269,9 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); findCancelTagsButton().click(); - component.isEditingModeTags = false; fixture.detectChanges(); + + expandTagsPanel(); const tagElements = findTagElements(); expect(tagElements).toHaveSize(2); expect(tagElements[0].nativeElement.textContent).toBe(tagPaging.list.entries[0].entry.tag); @@ -1280,9 +1282,10 @@ describe('ContentMetadataComponent', () => { it('should be hidden when editable is true', () => { spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging)); component.ngOnInit(); + component.readOnly = false; fixture.detectChanges(); - component.isEditingModeTags = true; + toggleEditModeForTags(); fixture.detectChanges(); expect(findTagElements()).toHaveSize(0); }); @@ -1292,14 +1295,15 @@ describe('ContentMetadataComponent', () => { let tagsCreator: TagsCreatorComponent; beforeEach(() => { - component.isEditingModeTags = true; component.displayTags = true; + component.readOnly = false; fixture.detectChanges(); + toggleEditModeForTags(); tagsCreator = findTagsCreator(); }); - it('should have assigned false to tagNameControlVisible initially', () => { - expect(tagsCreator.tagNameControlVisible).toBeFalse(); + it('should have assigned true to tagNameControlVisible initially', () => { + expect(tagsCreator.tagNameControlVisible).toBeTrue(); }); it('should load in create and assign mode by default', () => { @@ -1335,7 +1339,6 @@ describe('ContentMetadataComponent', () => { spyOn(tagService, 'assignTagsToNode').and.returnValue(EMPTY); const tagName1 = tagPaging.list.entries[0].entry.tag; const tagName2 = 'New tag 3'; - component.isEditingModeTags = true; component.readOnly = false; updateService.update(property, 'updated-value'); @@ -1358,7 +1361,7 @@ describe('ContentMetadataComponent', () => { component.ngOnInit(); fixture.detectChanges(); - expect(tagsCreator.tags).toEqual([tagPaging.list.entries[0].entry.tag, tagPaging.list.entries[1].entry.tag]); + expect(component.assignedTags).toEqual([tagPaging.list.entries[0].entry.tag, tagPaging.list.entries[1].entry.tag]); expect(tagService.getTagsByNodeId).toHaveBeenCalledWith(node.id); }); @@ -1366,20 +1369,28 @@ describe('ContentMetadataComponent', () => { component.ngOnInit(); fixture.detectChanges(); - expect(tagsCreator.tags).toEqual([tagPaging.list.entries[0].entry.tag, tagPaging.list.entries[1].entry.tag]); + expect(component.assignedTags).toEqual([tagPaging.list.entries[0].entry.tag, tagPaging.list.entries[1].entry.tag]); expect(tagService.getTagsByNodeId).toHaveBeenCalledWith(node.id); }); }); }); - it('should show tags creator if editable is true and displayTags is true', () => { - component.isEditingModeTags = true; + it('should show tags creator if displayTags is true and edit mode is toggled for tags', () => { component.displayTags = true; + component.readOnly = false; fixture.detectChanges(); + + toggleEditModeForTags(); expect(findTagsCreator()).toBeDefined(); }); describe('Categories list', () => { + const expandCategoriesPanel = (): void => { + fixture.debugElement.query(By.css('[data-automation-id="adf-content-metadata-categories-panel"]')) + ?.componentInstance.opened.emit(); + fixture.detectChanges(); + }; + beforeEach(() => { component.displayCategories = true; component.node.aspectNames.push('generalclassifiable'); @@ -1390,6 +1401,7 @@ describe('ContentMetadataComponent', () => { component.ngOnInit(); fixture.detectChanges(); + expandCategoriesPanel(); const categories = getCategories(); expect(categories.length).toBe(2); expect(categories[0].textContent).toBe(category1.name); @@ -1402,6 +1414,7 @@ describe('ContentMetadataComponent', () => { component.ngOnInit(); fixture.detectChanges(); + expandCategoriesPanel(); const categories = getCategories(); expect(categories).toHaveSize(0); expect(categoryService.getCategoryLinksForNode).not.toHaveBeenCalled(); @@ -1411,6 +1424,7 @@ describe('ContentMetadataComponent', () => { component.ngOnChanges({ node: new SimpleChange(undefined, node, false) }); fixture.detectChanges(); + expandCategoriesPanel(); const categories = getCategories(); expect(categories.length).toBe(2); expect(categories[0].textContent).toBe(category1.name); @@ -1424,6 +1438,8 @@ describe('ContentMetadataComponent', () => { node: new SimpleChange(undefined, node, false) }); fixture.detectChanges(); + + expandCategoriesPanel(); const categories = getCategories(); expect(categories).toHaveSize(0); expect(categoryService.getCategoryLinksForNode).not.toHaveBeenCalled(); @@ -1433,11 +1449,11 @@ describe('ContentMetadataComponent', () => { component.ngOnChanges({}); fixture.detectChanges(); + expandCategoriesPanel(); expect(categoryService.getCategoryLinksForNode).not.toHaveBeenCalled(); }); it('should render categories after discard changes button is clicked', fakeAsync(() => { - component.isEditingModeCategories = true; component.readOnly = false; fixture.detectChanges(); TestBed.inject(CardViewContentUpdateService).itemUpdated$.next({ @@ -1445,11 +1461,12 @@ describe('ContentMetadataComponent', () => { } as UpdateNotification); tick(500); fixture.detectChanges(); + toggleEditModeForCategories(); clickOnCancel(); - component.isEditingModeGeneralInfo = false; fixture.detectChanges(); + expandCategoriesPanel(); const categories = getCategories(); expect(categories.length).toBe(2); expect(categories[0].textContent).toBe(category1.name); @@ -1459,9 +1476,11 @@ describe('ContentMetadataComponent', () => { flush(); })); - it('should be hidden when editable is true', () => { - component.isEditingModeCategories = true; + it('should be hidden when edit mode for categories is toggled', () => { + component.readOnly = false; fixture.detectChanges(); + + toggleEditModeForCategories(); expect(getCategories().length).toBe(0); }); }); @@ -1470,16 +1489,17 @@ describe('ContentMetadataComponent', () => { let categoriesManagementComponent: CategoriesManagementComponent; beforeEach(() => { - component.isEditingModeCategories = true; component.displayCategories = true; + component.readOnly = false; component.node.aspectNames.push('generalclassifiable'); spyOn(categoryService, 'getCategoryLinksForNode').and.returnValue(of(categoryPagingResponse)); fixture.detectChanges(); + toggleEditModeForCategories(); categoriesManagementComponent = getCategoriesManagementComponent(); }); - it('should set categoryNameControlVisible to false initially', () => { - expect(categoriesManagementComponent.categoryNameControlVisible).toBeFalse(); + it('should set categoryNameControlVisible to true initially', () => { + expect(categoriesManagementComponent.categoryNameControlVisible).toBeTrue(); }); it('should load with assign mode by default', () => { @@ -1521,7 +1541,6 @@ describe('ContentMetadataComponent', () => { updateService.update(property, 'updated-value'); component.readOnly = false; - component.isEditingModeCategories = true; fixture.detectChanges(); categoriesManagementComponent.categoriesChange.emit([category1, category2]); findSaveCategoriesButton(); @@ -1534,7 +1553,7 @@ describe('ContentMetadataComponent', () => { component.ngOnInit(); fixture.detectChanges(); - expect(categoriesManagementComponent.categories).toEqual([category1, category2]); + expect(component.assignedCategories).toEqual([category1, category2]); expect(categoryService.getCategoryLinksForNode).toHaveBeenCalledWith(node.id); }); @@ -1559,6 +1578,3 @@ describe('ContentMetadataComponent', () => { }); }); }); - -const queryDom = (fixture: ComponentFixture, properties: string = 'properties') => - fixture.debugElement.query(By.css(`[data-automation-id="adf-metadata-group-${properties}"]`)); diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts index dbd136c245..d88285771f 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts @@ -35,7 +35,7 @@ import { UpdateNotification } from '@alfresco/adf-core'; import { ContentMetadataService } from '../../services/content-metadata.service'; -import { CardViewGroup, PresetConfig, ContentMetadataCustomPanel } from '../../interfaces/content-metadata.interfaces'; +import { CardViewGroup, PresetConfig, ContentMetadataCustomPanel, ContentMetadataPanel } from '../../interfaces/content-metadata.interfaces'; import { catchError, debounceTime, map, takeUntil } from 'rxjs/operators'; import { CardViewContentUpdateService } from '../../../common/services/card-view-content-update.service'; import { NodesApiService } from '../../../common/services/nodes-api.service'; @@ -48,6 +48,12 @@ import { ContentService } from '../../../common/services/content.service'; const DEFAULT_SEPARATOR = ', '; +enum DefaultPanels { + PROPERTIES = 'Properties', + TAGS = 'Tags', + CATEGORIES = 'Categories' +} + @Component({ selector: 'adf-content-metadata', templateUrl: './content-metadata.component.html', @@ -124,26 +130,23 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { private classifiableChangedSubject = new Subject(); private _saving = false; + DefaultPanels = DefaultPanels; multiValueSeparator: string; basicProperties$: Observable; groupedProperties$: Observable; changedProperties = {}; hasMetadataChanged = false; - tagNameControlVisible = false; assignedCategories: Category[] = []; categories: Category[] = []; categoriesManagementMode = CategoriesManagementMode.ASSIGN; - categoryControlVisible = false; classifiableChanged = this.classifiableChangedSubject.asObservable(); - isGeneralPanelExpanded = true; - isTagPanelExpanded: boolean; - isCategoriesPanelExpanded: boolean; - currentGroup: CardViewGroup; - - isEditingModeGeneralInfo = false; - isEditingModeTags = false; - isEditingModeCategories = false; + editing = false; + editedPanelTitle = ''; + currentPanel: ContentMetadataPanel = { + expanded: false, + panelTitle: '' + }; constructor( private contentMetadataService: ContentMetadataService, @@ -180,9 +183,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { this.loadProperties(this.node); this.verifyAllowableOperations(); - if (this.displayAspect === 'Properties') { - this.isGeneralPanelExpanded = true; - } + this.currentPanel.panelTitle = this.displayAspect ?? this.DefaultPanels.PROPERTIES; + this.currentPanel.expanded = true; } private verifyAllowableOperations() { @@ -207,6 +209,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { return this._saving; } + isPanelEditing(panelTitle: string): boolean { + return this.editing && ((this.currentPanel.panelTitle === panelTitle && this.editedPanelTitle === panelTitle) || this.editedPanelTitle === panelTitle); + } + protected handleUpdateError(error: Error) { let statusCode = 0; @@ -230,10 +236,17 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { if (changes.node && !changes.node.firstChange) { this.loadProperties(changes.node.currentValue); } - if(changes?.readOnly && changes?.readOnly?.currentValue) { - this.cancelEditing(); - this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(this.node, this.preset); + + if (changes.readOnly?.currentValue) { + this.resetEditing(); + this.loadProperties(this.node); } + + if (changes.displayAspect?.currentValue) { + this.currentPanel.panelTitle = changes.displayAspect.currentValue; + this.currentPanel.expanded = true; + } + } ngOnDestroy() { @@ -254,35 +267,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { }); } - private onSave(event?: MouseEvent) { + saveChanges(event?: MouseEvent) { event?.stopPropagation(); - - this.onSaveChanges(); - this.cancelEditing(); - } - - onSaveGeneralInfoChanges(event?: MouseEvent) { - this.onSave(event); - } - - onSaveTagsChanges(event?: MouseEvent) { - this.onSave(event); - } - - onSaveCategoriesChanges(event?: MouseEvent) { - this.onSave(event); - } - - onSaveGroupChanges(group: CardViewGroup, event?: MouseEvent) { - this.onSave(event); - - group.editable = false; - } - - private onSaveChanges() { + this.resetEditing(); this._saving = true; - this.tagNameControlVisible = false; - this.categoryControlVisible = false; if (this.hasContentTypeChanged(this.changedProperties)) { this.contentMetadataService.openConfirmDialog(this.changedProperties).subscribe(() => { @@ -318,172 +306,52 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { revertChanges() { this.changedProperties = {}; this.hasMetadataChanged = false; - this.tagNameControlVisible = false; - this.categoryControlVisible = false; - } - - // Returns the editing state of the panel - isEditingPanel(): boolean { - return ( - (this.isEditingModeGeneralInfo || this.isEditingModeTags || this.isEditingModeCategories || this.currentGroup?.editable) && this.hasMetadataChanged - ); - } - - onToggleGeneralInfoEdit(event?: MouseEvent) { - event?.stopPropagation(); - - if (this.isEditingPanel()) { - this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); - return; - } - - const currentMode = this.isEditingModeGeneralInfo; - this.cancelEditing(); - this.isEditingModeGeneralInfo = !currentMode; - this.isGeneralPanelExpanded = true; - this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(this.node, this.preset); - } - - onToggleTagsEdit(event?: MouseEvent) { - event?.stopPropagation(); - - if (this.isEditingPanel()) { - this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); - return; - } - - const currentValue = this.isEditingModeTags; - this.cancelEditing(); - this.isEditingModeTags = !currentValue; - this.isTagPanelExpanded = this.isEditingModeTags; - this.tagNameControlVisible = true; - this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(this.node, this.preset); - } - - private cancelEditing() { - this.isEditingModeGeneralInfo = false; - this.isEditingModeCategories = false; - this.isEditingModeTags = false; - } - - onCancelGeneralInfoEdit(event?: MouseEvent) { - event?.stopPropagation(); - - this.cancelEditing(); - this.revertChanges(); - - this.basicProperties$ = this.getProperties(this.node); - } - - onCancelCategoriesEdit(event?: MouseEvent) { - event?.stopPropagation(); - - this.cancelEditing(); - this.revertChanges(); - - this.loadCategoriesForNode(this.node.id); - - const aspectNames = this.node.aspectNames || []; - if (!aspectNames.includes('generalclassifiable')) { - this.categories = []; - this.classifiableChangedSubject.next(); - } - } - - onCancelTagsEdit(event?: MouseEvent) { - event?.stopPropagation(); - - this.cancelEditing(); - this.revertChanges(); - - this.basicProperties$ = this.getProperties(this.node); - this.loadTagsForNode(this.node.id); - } - - onCancelGroupEdit(group: CardViewGroup, event?: MouseEvent) { - event?.stopPropagation(); - - this.cancelEditing(); - this.revertChanges(); - - group.editable = false; - this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(this.node, this.preset); - } - - onToggleCategoriesEdit(event?: MouseEvent) { - event?.stopPropagation(); - - if (this.isEditingPanel()) { - this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); - return; - } - - const currentValue = this.isEditingModeCategories; - this.cancelEditing(); - this.isEditingModeCategories = !currentValue; - this.isCategoriesPanelExpanded = this.isEditingModeCategories; - this.categoryControlVisible = true; - this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(this.node, this.preset); - } - - onToggleGroupEdit(group: CardViewGroup, event?: MouseEvent) { - event?.stopPropagation(); - - if (this.isEditingPanel()) { - this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); - return; - } - this.cancelEditing(); - - if (this.currentGroup && this.currentGroup.title !== group.title) { - this.currentGroup.editable = false; - } - - group.editable = !group.editable; - this.currentGroup = group.editable ? group : null; - if (group.editable) { - group.expanded = true; - } } get showEmptyTagMessage(): boolean { - return this.tags?.length === 0 && !this.isEditingModeTags; + return this.tags?.length === 0 && this.currentPanel.panelTitle === 'Tags' && !this.editing; } get showEmptyCategoryMessage(): boolean { - return this.categories?.length === 0 && !this.isEditingModeCategories; + return this.categories?.length === 0 && this.currentPanel.panelTitle === 'Categories' && !this.editing; } - get canEditGeneralInfo(): boolean { - return !this.isEditingModeGeneralInfo && !this.readOnly; + toggleGroupEditing(panelTitle: string, event?: MouseEvent) { + event?.stopPropagation(); + if (this.editing && this.hasMetadataChanged) { + this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES'); + return; + } + this.editing = true; + this.editedPanelTitle = panelTitle; + this.expandPanel(panelTitle); } - get isEditingGeneralInfo(): boolean { - return this.isEditingModeGeneralInfo && !this.readOnly; + cancelGroupEditing(panelTitle: string, event?: MouseEvent) { + event?.stopPropagation(); + this.resetEditing(); + this.revertChanges(); + const loadBasicProps = panelTitle === this.DefaultPanels.PROPERTIES; + const loadTags = panelTitle === this.DefaultPanels.TAGS; + const loadCategories = panelTitle === this.DefaultPanels.CATEGORIES; + const loadGroupedProps = !loadBasicProps && !loadTags && !loadCategories; + this.loadProperties(this.node, loadBasicProps, loadGroupedProps, loadTags, loadCategories); } - get canEditTags(): boolean { - return !this.isEditingModeTags && !this.readOnly; + expandPanel(panelTitle: string) { + this.currentPanel.panelTitle = panelTitle; + this.currentPanel.expanded = true; } - get isEditingTags(): boolean { - return this.isEditingModeTags && !this.readOnly; + closePanel(panelTitle: string) { + if (this.currentPanel.panelTitle === panelTitle) { + this.currentPanel.expanded = false; + } } - get canEditCategories(): boolean { - return !this.isEditingModeCategories && !this.readOnly; - } - - get isEditingCategories(): boolean { - return this.isEditingModeCategories && !this.readOnly; - } - - hasGroupToggleEdit(group: CardViewGroup): boolean { - return !group.editable && !this.readOnly; - } - - isGroupToggleEditing(group: CardViewGroup): boolean { - return group.editable && !this.readOnly; + resetEditing() { + this.editing = false; + this.editedPanelTitle = ''; } showGroup(group: CardViewGroup): boolean { @@ -492,10 +360,6 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { return properties.length > 0; } - canExpandTheCard(groupTitle: string): boolean { - return groupTitle === this.displayAspect; - } - keyDown(event: KeyboardEvent) { if (event.keyCode === 37 || event.keyCode === 39) { // ArrowLeft && ArrowRight event.stopPropagation(); @@ -513,6 +377,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { this.cardViewContentUpdateService.updateElement(this.targetProperty); this.handleUpdateError(err); this._saving = false; + this.loadProperties(this.node); return of(null); }) ) @@ -548,16 +413,20 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { } } - private loadProperties(node: Node) { + private loadProperties(node: Node, loadBasicProps = true, loadGroupedProps = true, loadTags = true, loadCategories = true) { if (node) { - this.basicProperties$ = this.getProperties(node); - this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(node, this.preset); + if (loadBasicProps) { + this.basicProperties$ = this.getProperties(node); + } + if (loadGroupedProps) { + this.groupedProperties$ = this.contentMetadataService.getGroupedProperties(node, this.preset); + } - if (this.displayTags) { + if (this.displayTags && loadTags) { this.loadTagsForNode(node.id); } - if (this.displayCategories) { + if (this.displayCategories && loadCategories) { this.loadCategoriesForNode(node.id); const aspectNames = node.aspectNames || []; diff --git a/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts b/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts index 3b164bf67f..f8f911a492 100644 --- a/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts +++ b/lib/content-services/src/lib/content-metadata/interfaces/card-view-group.interface.ts @@ -20,6 +20,6 @@ import { CardViewItem } from '@alfresco/adf-core'; export interface CardViewGroup { title: string; properties: CardViewItem[]; - editable?: boolean; + editable: boolean; expanded?: boolean; } diff --git a/lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts b/lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts index 9f41b4f856..5dc64c1e6c 100644 --- a/lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts +++ b/lib/content-services/src/lib/content-metadata/interfaces/content-metadata-custom-panel.interface.ts @@ -15,8 +15,8 @@ * limitations under the License. */ -export interface ContentMetadataCustomPanel { - panelTitle: string; +import { ContentMetadataPanel } from './content-metadata-panel.interface'; + +export interface ContentMetadataCustomPanel extends ContentMetadataPanel { component: string; - expanded?: boolean; } diff --git a/lib/content-services/src/lib/content-metadata/interfaces/content-metadata-panel.interface.ts b/lib/content-services/src/lib/content-metadata/interfaces/content-metadata-panel.interface.ts new file mode 100644 index 0000000000..7ff5b2dfa4 --- /dev/null +++ b/lib/content-services/src/lib/content-metadata/interfaces/content-metadata-panel.interface.ts @@ -0,0 +1,21 @@ +/*! + * @license + * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export interface ContentMetadataPanel { + panelTitle: string; + expanded?: boolean; +} diff --git a/lib/content-services/src/lib/content-metadata/interfaces/content-metadata.interfaces.ts b/lib/content-services/src/lib/content-metadata/interfaces/content-metadata.interfaces.ts index 5003fd0e95..9f1dcba57d 100644 --- a/lib/content-services/src/lib/content-metadata/interfaces/content-metadata.interfaces.ts +++ b/lib/content-services/src/lib/content-metadata/interfaces/content-metadata.interfaces.ts @@ -25,3 +25,4 @@ export * from './indifferent-config.interface'; export * from './layout-oriented-config.interface'; export * from './preset-config.interface'; export * from './content-metadata-custom-panel.interface'; +export * from './content-metadata-panel.interface'; diff --git a/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.spec.ts b/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.spec.ts index 81a732406f..76abe2e7c6 100644 --- a/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.spec.ts +++ b/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.spec.ts @@ -84,7 +84,8 @@ describe('PropertyGroupTranslatorService', () => { dataType: 'd:text', defaultValue: 'defaultValue', mandatory: false, - multiValued: false + multiValued: false, + editable: true }, { name: 'FAS:ALOY', @@ -98,10 +99,11 @@ describe('PropertyGroupTranslatorService', () => { propertyValues = { 'FAS:PLAGUE': 'The Chariot Line' }; - const cardViewGroup = service.translateToCardViewGroups(propertyGroups, propertyValues, null); - expect(cardViewGroup[0].properties.length).toBe(2); - expect(cardViewGroup[0].properties[0] instanceof CardViewTextItemModel).toBeTruthy('First property should be instance of CardViewTextItemModel'); - expect(cardViewGroup[0].properties[1] instanceof CardViewTextItemModel).toBeTruthy('Second property should be instance of CardViewTextItemModel'); + const cardViewGroup = service.translateToCardViewGroups(propertyGroups, propertyValues, null)[0]; + expect(cardViewGroup.properties.length).toBe(2); + expect(cardViewGroup.properties[0] instanceof CardViewTextItemModel).toBeTruthy('First property should be instance of CardViewTextItemModel'); + expect(cardViewGroup.properties[1] instanceof CardViewTextItemModel).toBeTruthy('Second property should be instance of CardViewTextItemModel'); + expect(cardViewGroup.editable).toBeTrue(); }); it('should translate EVERY property in EVERY group properly', () => { @@ -113,7 +115,8 @@ describe('PropertyGroupTranslatorService', () => { dataType: 'd:text', defaultValue: 'defaultvalue', mandatory: false, - multiValued: false + multiValued: false, + editable: false }] }), Object.assign({}, propertyGroup, { @@ -123,17 +126,20 @@ describe('PropertyGroupTranslatorService', () => { dataType: 'd:text', defaultValue: 'defaultvalue', mandatory: false, - multiValued: false + multiValued: false, + editable: false }] }) ); propertyValues = { 'FAS:PLAGUE': 'The Chariot Line' }; - const cardViewGroup = service.translateToCardViewGroups(propertyGroups, propertyValues, null); - expect(cardViewGroup.length).toBe(2); - expect(cardViewGroup[0].properties[0] instanceof CardViewTextItemModel).toBeTruthy('First group\'s property should be instance of CardViewTextItemModel'); - expect(cardViewGroup[1].properties[0] instanceof CardViewTextItemModel).toBeTruthy('Second group\'s property should be instance of CardViewTextItemModel'); + const cardViewGroups = service.translateToCardViewGroups(propertyGroups, propertyValues, null); + expect(cardViewGroups.length).toBe(2); + const firstCardViewGroup = cardViewGroups[0]; + expect(firstCardViewGroup.properties[0] instanceof CardViewTextItemModel).toBeTruthy('First group\'s property should be instance of CardViewTextItemModel'); + expect(cardViewGroups[1].properties[0] instanceof CardViewTextItemModel).toBeTruthy('Second group\'s property should be instance of CardViewTextItemModel'); + expect(firstCardViewGroup.editable).toBeFalse(); }); it('should log an error if unrecognised type is found', () => { diff --git a/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.ts b/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.ts index e2696fb787..18bd1da1fb 100644 --- a/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.ts +++ b/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.ts @@ -64,6 +64,7 @@ export class PropertyGroupTranslatorService { return propertyGroups.map((propertyGroup) => { const translatedPropertyGroup: any = Object.assign({}, propertyGroup); translatedPropertyGroup.properties = this.translateArray(propertyGroup.properties, propertyValues, definition); + translatedPropertyGroup.editable = translatedPropertyGroup.properties.some((property) => property.editable); return translatedPropertyGroup; }); }