From efa691b2499c73ae258d1538e8d0fddee73e2061 Mon Sep 17 00:00:00 2001 From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com> Date: Fri, 25 Aug 2023 10:49:28 +0200 Subject: [PATCH] [ACS-5281] Allow to change editable of content metadata from parent (#8841) * ACS-5281 Allow to change editable of content metadata from parent * ACS-5281 Added empty spaces to import --- .../content-metadata-card.component.md | 8 +++++++ .../content-metadata-card.component.spec.ts | 23 ++++++++++++------- .../content-metadata-card.component.ts | 13 ++++++++--- 3 files changed, 33 insertions(+), 11 deletions(-) diff --git a/docs/content-services/components/content-metadata-card.component.md b/docs/content-services/components/content-metadata-card.component.md index bb1b63a8c3..a18f301343 100644 --- a/docs/content-services/components/content-metadata-card.component.md +++ b/docs/content-services/components/content-metadata-card.component.md @@ -16,6 +16,7 @@ Displays and edits metadata related to a node. - [Basic Usage](#basic-usage) - [Class members](#class-members) - [Properties](#properties) + - [Events](#events) - [Details](#details) - [Application config presets](#application-config-presets) - [Layout oriented config](#layout-oriented-config) @@ -51,6 +52,13 @@ Displays and edits metadata related to a node. | preset | `string \| `[`PresetConfig`](../../../lib/content-services/src/lib/content-metadata/interfaces/preset-config.interface.ts) | | (required) Name or configuration of the metadata preset, which defines aspects and their properties. | | readOnly | `boolean` | false | (optional) This flag sets the metadata in read only mode preventing changes. | | displayDefaultProperties | `boolean` | | (optional) This flag displays/hides the metadata properties. | +| editable | `boolean` | | (optional) This flag toggles editable of content. | + +### Events + +| Name | Type | Description | +|----------------|-----------------------------------------------------------------------|---------------------------------------------------| +| editableChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when content's editable state is changed. | ## Details diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts index 3e4bab59b2..8d8416f17a 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts @@ -37,6 +37,8 @@ describe('ContentMetadataCardComponent', () => { const preset = 'custom-preset'; let nodeAspectService: NodeAspectService = null; + const getToggleEditButton = () => fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]')); + beforeEach(() => { TestBed.configureTestingModule({ imports: [ @@ -150,13 +152,21 @@ describe('ContentMetadataCardComponent', () => { component.node.allowableOperations = [AllowableOperationsEnum.UPDATE]; fixture.detectChanges(); - const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]')); - button.triggerEventHandler('click', {}); + getToggleEditButton().triggerEventHandler('click', {}); fixture.detectChanges(); expect(component.editable).toBe(false); }); + it('should emit editableChange by clicking on toggle edit button', () => { + component.node.allowableOperations = [AllowableOperationsEnum.UPDATE]; + fixture.detectChanges(); + spyOn(component.editableChange, 'emit'); + + getToggleEditButton().nativeElement.click(); + expect(component.editableChange.emit).toHaveBeenCalledWith(true); + }); + it('should toggle expanded by clicking on the button', () => { component.expanded = true; fixture.detectChanges(); @@ -190,8 +200,7 @@ describe('ContentMetadataCardComponent', () => { component.readOnly = true; fixture.detectChanges(); - const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]')); - expect(button).toBeNull(); + expect(getToggleEditButton()).toBeNull(); }); it('should hide the edit button if node does not have `update` permissions', () => { @@ -199,8 +208,7 @@ describe('ContentMetadataCardComponent', () => { component.node.allowableOperations = null; fixture.detectChanges(); - const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]')); - expect(button).toBeNull(); + expect(getToggleEditButton()).toBeNull(); }); it('should show the edit button if node does has `update` permissions', () => { @@ -208,8 +216,7 @@ describe('ContentMetadataCardComponent', () => { component.node.allowableOperations = [AllowableOperationsEnum.UPDATE]; fixture.detectChanges(); - const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]')); - expect(button).not.toBeNull(); + expect(getToggleEditButton()).not.toBeNull(); }); it('should expand the card when custom display aspect is valid', () => { diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts index 44f59c884d..bda3084e39 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { Node } from '@alfresco/js-api'; import { NodeAspectService } from '../../../aspect-list/services/node-aspect.service'; import { PresetConfig } from '../../interfaces/content-metadata.interfaces'; @@ -74,6 +74,14 @@ export class ContentMetadataCardComponent implements OnChanges { @Input() multi = false; + /** (optional) This flag toggles editable of content. **/ + @Input() + editable = false; + + /** Emitted when content's editable state is changed. **/ + @Output() + editableChange = new EventEmitter(); + private _displayDefaultProperties: boolean = true; /** (optional) This flag displays/hides the metadata @@ -89,8 +97,6 @@ export class ContentMetadataCardComponent implements OnChanges { return this._displayDefaultProperties; } - editable: boolean = false; - expanded: boolean; editAspectSupported = false; @@ -111,6 +117,7 @@ export class ContentMetadataCardComponent implements OnChanges { toggleEdit(): void { this.editable = !this.editable; + this.editableChange.emit(this.editable); } toggleExpanded(): void {