From c6933e169a4632aa7dc70cfb1d73f8d79a9143b0 Mon Sep 17 00:00:00 2001 From: dhrn Date: Fri, 19 Apr 2019 19:33:21 +0530 Subject: [PATCH 1/4] [ADF-4359] - Add the possibility to chose which panel to show first in info-drawer --- .../file-view/file-view.component.html | 17 ++++- .../file-view/file-view.component.ts | 6 ++ .../content-metadata-card.component.html | 1 + .../content-metadata-card.component.spec.ts | 14 ++++ .../content-metadata-card.component.ts | 16 +++- .../content-metadata.component.html | 6 +- .../content-metadata.component.spec.ts | 74 ++++++++++++++++++- .../content-metadata.component.ts | 8 ++ .../components/content-metadata/mock-data.ts | 74 +++++++++++++++++++ 9 files changed, 208 insertions(+), 8 deletions(-) create mode 100644 lib/content-services/content-metadata/components/content-metadata/mock-data.ts diff --git a/demo-shell/src/app/components/file-view/file-view.component.html b/demo-shell/src/app/components/file-view/file-view.component.html index c2586757cd..d14163bbaf 100644 --- a/demo-shell/src/app/components/file-view/file-view.component.html +++ b/demo-shell/src/app/components/file-view/file-view.component.html @@ -12,12 +12,14 @@ [multi]="multi" [preset]="customPreset" [readOnly]="isReadOnly" + [displayAspect]="showAspect" [displayDefaultProperties]="displayDefaultProperties" [displayEmpty]="displayEmptyMetadata"> @@ -71,6 +73,19 @@

+

+ + + + + + +

+

@@ -118,7 +133,7 @@

- + diff --git a/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts index 7c1f730fa1..0e5bb7ab4f 100644 --- a/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts +++ b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts @@ -22,6 +22,7 @@ import { ContentMetadataCardComponent } from './content-metadata-card.component' import { ContentMetadataComponent } from '../content-metadata/content-metadata.component'; import { setupTestBed, AllowableOperationsEnum } from '@alfresco/adf-core'; import { ContentTestingModule } from '../../../testing/content.testing.module'; +import { SimpleChange } from '@angular/core'; describe('ContentMetadataCardComponent', () => { @@ -189,4 +190,17 @@ describe('ContentMetadataCardComponent', () => { const button = fixture.debugElement.query(By.css('[data-automation-id="meta-data-card-toggle-edit"]')); expect(button).not.toBeNull(); }); + + it('should expand the card when custom display aspect is valid', () => { + expect(component.expanded).toBeFalsy(); + + let displayAspect = new SimpleChange(null , 'EXIF', true); + component.ngOnChanges({ displayAspect }); + expect(component.expanded).toBeTruthy(); + + displayAspect = new SimpleChange('EXIF' , null, false); + component.ngOnChanges({ displayAspect }); + expect(component.expanded).toBeTruthy(); + }); + }); diff --git a/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts index 54084f0db3..ddd2f99577 100644 --- a/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts +++ b/lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { Node } from '@alfresco/js-api'; import { ContentService, AllowableOperationsEnum } from '@alfresco/adf-core'; @@ -26,7 +26,7 @@ import { ContentService, AllowableOperationsEnum } from '@alfresco/adf-core'; encapsulation: ViewEncapsulation.None, host: { 'class': 'adf-content-metadata-card' } }) -export class ContentMetadataCardComponent { +export class ContentMetadataCardComponent implements OnChanges { /** (required) The node entity to fetch metadata about */ @Input() node: Node; @@ -37,6 +37,12 @@ export class ContentMetadataCardComponent { @Input() displayEmpty: boolean = false; + /** (optional) This flag displays desired aspect when open for the first time + * fields. + */ + @Input() + displayAspect: string = null; + /** (required) Name of the metadata preset, which defines aspects * and their properties. */ @@ -77,6 +83,12 @@ export class ContentMetadataCardComponent { constructor(private contentService: ContentService) { } + ngOnChanges(changes: SimpleChanges): void { + if (changes.displayAspect && changes.displayAspect.currentValue) { + this.expanded = true; + } + } + onDisplayDefaultPropertiesChange(): void { this.expanded = !this._displayDefaultProperties; } diff --git a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html index e1c344b2c9..8f4876110a 100644 --- a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html +++ b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html @@ -2,8 +2,8 @@ @@ -23,7 +23,7 @@

+ [expanded]="canExpandTheCard(group) || !displayDefaultProperties && first"> {{ group.title | translate }} diff --git a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts index ac6bfd0dec..a3fe638500 100644 --- a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts +++ b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts @@ -27,10 +27,12 @@ import { } from '@alfresco/adf-core'; import { throwError, of } from 'rxjs'; import { ContentTestingModule } from '../../../testing/content.testing.module'; +import { mockGroupProperties } from './mock-data'; describe('ContentMetadataComponent', () => { let component: ContentMetadataComponent; let fixture: ComponentFixture; + let contentMetadataService: ContentMetadataService; let node: Node; let folderNode: Node; const preset = 'custom-preset'; @@ -43,6 +45,7 @@ describe('ContentMetadataComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(ContentMetadataComponent); component = fixture.componentInstance; + contentMetadataService = TestBed.get(ContentMetadataService); node = { id: 'node-id', aspectNames: [], @@ -147,11 +150,10 @@ describe('ContentMetadataComponent', () => { }); describe('Properties loading', () => { - let expectedNode, contentMetadataService: ContentMetadataService; + let expectedNode; beforeEach(() => { expectedNode = Object.assign({}, node, { name: 'some-modified-value' }); - contentMetadataService = TestBed.get(ContentMetadataService); fixture.detectChanges(); }); @@ -294,4 +296,72 @@ describe('ContentMetadataComponent', () => { expect(component.displayDefaultProperties).toBe(true); }); }); + + describe('Expand the panel', () => { + let expectedNode; + + beforeEach(() => { + expectedNode = Object.assign({}, node, {name: 'some-modified-value'}); + spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of(mockGroupProperties)); + component.ngOnChanges({node: new SimpleChange(node, expectedNode, false)}); + }); + + it('should open and update drawer with expand section dynamically', async(() => { + component.displayAspect = 'EXIF'; + component.expanded = true; + component.displayEmpty = true; + + fixture.detectChanges(); + const defaultProp = queryDom(fixture); + const exifProp = queryDom(fixture, 'EXIF'); + const customProp = queryDom(fixture, 'CUSTOM'); + expect(defaultProp.componentInstance.expanded).toBeFalsy(); + expect(exifProp.componentInstance.expanded).toBeTruthy(); + expect(customProp.componentInstance.expanded).toBeFalsy(); + + component.displayAspect = 'CUSTOM'; + fixture.detectChanges(); + const updatedDefault = queryDom(fixture); + const updatedExif = queryDom(fixture, 'EXIF'); + const updatedCustom = queryDom(fixture, 'CUSTOM'); + expect(updatedDefault.componentInstance.expanded).toBeFalsy(); + expect(updatedExif.componentInstance.expanded).toBeFalsy(); + expect(updatedCustom.componentInstance.expanded).toBeTruthy(); + + })); + + it('should not expand anything if input is wrong', async(() => { + component.displayAspect = 'XXXX'; + component.expanded = true; + component.displayEmpty = true; + + fixture.detectChanges(); + const defaultProp = queryDom(fixture); + const exifProp = queryDom(fixture, 'EXIF'); + const customProp = queryDom(fixture, 'CUSTOM'); + expect(defaultProp.componentInstance.expanded).toBeFalsy(); + expect(exifProp.componentInstance.expanded).toBeFalsy(); + expect(customProp.componentInstance.expanded).toBeFalsy(); + + })); + + it('should expand the properties section when input is null', async(() => { + component.displayAspect = null; + component.expanded = true; + component.displayEmpty = true; + + fixture.detectChanges(); + const defaultProp = queryDom(fixture); + const exifProp = queryDom(fixture, 'EXIF'); + const customProp = queryDom(fixture, 'CUSTOM'); + expect(defaultProp.componentInstance.expanded).toBeTruthy(); + expect(exifProp.componentInstance.expanded).toBeFalsy(); + expect(customProp.componentInstance.expanded).toBeFalsy(); + + })); + }); }); + +function queryDom(fixture: ComponentFixture, properties: string = 'properties') { + return fixture.debugElement.query(By.css(`[data-automation-id="adf-metadata-group-${properties}"]`)); +} diff --git a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts index d3c4004263..b6d769cafb 100644 --- a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts +++ b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts @@ -61,6 +61,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { @Input() displayDefaultProperties: boolean = true; + /** (Optional) shows the given aspect in the expanded card */ + @Input() + displayAspect: string = null; + basicProperties$: Observable; groupedProperties$: Observable; disposableNodeUpdate: Subscription; @@ -118,4 +122,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { this.disposableNodeUpdate.unsubscribe(); } + public canExpandTheCard(group: CardViewGroup): boolean { + return group.title === this.displayAspect; + } + } diff --git a/lib/content-services/content-metadata/components/content-metadata/mock-data.ts b/lib/content-services/content-metadata/components/content-metadata/mock-data.ts new file mode 100644 index 0000000000..4ea3974bcd --- /dev/null +++ b/lib/content-services/content-metadata/components/content-metadata/mock-data.ts @@ -0,0 +1,74 @@ +/*! + * @license + * Copyright 2019 Alfresco Software, Ltd. + * + * 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 const mockGroupProperties = [ + { + 'title': 'EXIF', + 'properties': [ + { + 'label': 'Image Width', + 'value': 363, + 'key': 'properties.exif:pixelXDimension', + 'default': null, + 'editable': true, + 'clickable': false, + 'icon': '', + 'data': null, + 'type': 'int', + 'multiline': false, + 'pipes': [], + 'clickCallBack': null, + displayValue: 400 + }, + { + 'label': 'Image Height', + 'value': 400, + 'key': 'properties.exif:pixelYDimension', + 'default': null, + 'editable': true, + 'clickable': false, + 'icon': '', + 'data': null, + 'type': 'int', + 'multiline': false, + 'pipes': [], + 'clickCallBack': null, + displayValue: 400 + } + ] + }, + { + 'title': 'CUSTOM', + 'properties': [ + { + 'label': 'Height', + 'value': 400, + 'key': 'properties.custom:abc', + 'default': null, + 'editable': true, + 'clickable': false, + 'icon': '', + 'data': null, + 'type': 'int', + 'multiline': false, + 'pipes': [], + 'clickCallBack': null, + displayValue: 400 + } + ] + } +]; From 262a0387463229f076ae579b799d114033616c30 Mon Sep 17 00:00:00 2001 From: dhrn Date: Mon, 22 Apr 2019 12:20:47 +0530 Subject: [PATCH 2/4] * docs added --- .../components/content-metadata-card.component.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/content-services/components/content-metadata-card.component.md b/docs/content-services/components/content-metadata-card.component.md index 773ed6b807..c280ae6f69 100644 --- a/docs/content-services/components/content-metadata-card.component.md +++ b/docs/content-services/components/content-metadata-card.component.md @@ -34,6 +34,7 @@ Displays and edits metadata related to a node. | preset | `string` | | (required) Name 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. | +| displayAspect | `string` | | (optional) This flag displays the desired metadata property in the expanded card | ## Details From 374da200d27cb03d444062d8793c063e905e55fc Mon Sep 17 00:00:00 2001 From: dhrn Date: Tue, 23 Apr 2019 18:39:41 +0530 Subject: [PATCH 3/4] * e2e fixed --- e2e/content-services/metadata/metadata-properties.e2e.ts | 2 +- e2e/pages/adf/metadataViewPage.ts | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/e2e/content-services/metadata/metadata-properties.e2e.ts b/e2e/content-services/metadata/metadata-properties.e2e.ts index 6afc23d447..94da213ea8 100644 --- a/e2e/content-services/metadata/metadata-properties.e2e.ts +++ b/e2e/content-services/metadata/metadata-properties.e2e.ts @@ -135,7 +135,7 @@ describe('CardView Component - properties', () => { metadataViewPage.clickOnInformationButton(); metadataViewPage.checkMetadataGroupIsNotExpand('EXIF'); - metadataViewPage.checkMetadataGroupIsNotExpand('properties'); + metadataViewPage.checkMetadataGroupIsExpand('properties'); metadataViewPage.clickMetadataGroup('properties'); diff --git a/e2e/pages/adf/metadataViewPage.ts b/e2e/pages/adf/metadataViewPage.ts index 4a247f7364..0ab21906ba 100644 --- a/e2e/pages/adf/metadataViewPage.ts +++ b/e2e/pages/adf/metadataViewPage.ts @@ -115,6 +115,7 @@ export class MetadataViewPage { editIconClick(): promise.Promise { BrowserVisibility.waitUntilElementIsVisible(this.editIcon); + BrowserVisibility.waitUntilElementIsClickable(this.editIcon); return this.editIcon.click(); } @@ -167,7 +168,7 @@ export class MetadataViewPage { editPropertyIconIsDisplayed(propertyName: string) { const editPropertyIcon = element(by.css('mat-icon[data-automation-id="card-textitem-edit-icon-' + propertyName + '"]')); - BrowserVisibility.waitUntilElementIsVisible(editPropertyIcon); + BrowserVisibility.waitUntilElementIsPresent(editPropertyIcon); } updatePropertyIconIsDisplayed(propertyName: string) { @@ -264,13 +265,13 @@ export class MetadataViewPage { checkMetadataGroupIsNotExpand(groupName: string) { const group = element(by.css('mat-expansion-panel[data-automation-id="adf-metadata-group-' + groupName + '"] > mat-expansion-panel-header')); - BrowserVisibility.waitUntilElementIsVisible(group); + BrowserVisibility.waitUntilElementIsPresent(group); expect(group.getAttribute('class')).not.toContain('mat-expanded'); } getMetadataGroupTitle(groupName: string): promise.Promise { const group = element(by.css('mat-expansion-panel[data-automation-id="adf-metadata-group-' + groupName + '"] > mat-expansion-panel-header > span > mat-panel-title')); - BrowserVisibility.waitUntilElementIsVisible(group); + BrowserVisibility.waitUntilElementIsPresent(group); return group.getText(); } From 9866cf4d1d0a5b6ca9c1a0a1e6619493a1cfe2f7 Mon Sep 17 00:00:00 2001 From: dhrn Date: Wed, 24 Apr 2019 12:30:52 +0530 Subject: [PATCH 4/4] * fixing the existing behavior --- .../metadata/metadata-properties.e2e.ts | 2 +- .../content-metadata.component.html | 4 +- .../content-metadata.component.spec.ts | 42 ++++++++----------- .../content-metadata.component.ts | 4 ++ 4 files changed, 25 insertions(+), 27 deletions(-) diff --git a/e2e/content-services/metadata/metadata-properties.e2e.ts b/e2e/content-services/metadata/metadata-properties.e2e.ts index 94da213ea8..6afc23d447 100644 --- a/e2e/content-services/metadata/metadata-properties.e2e.ts +++ b/e2e/content-services/metadata/metadata-properties.e2e.ts @@ -135,7 +135,7 @@ describe('CardView Component - properties', () => { metadataViewPage.clickOnInformationButton(); metadataViewPage.checkMetadataGroupIsNotExpand('EXIF'); - metadataViewPage.checkMetadataGroupIsExpand('properties'); + metadataViewPage.checkMetadataGroupIsNotExpand('properties'); metadataViewPage.clickMetadataGroup('properties'); diff --git a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html index 8f4876110a..d58b10ce2f 100644 --- a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html +++ b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html @@ -2,8 +2,8 @@ diff --git a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts index a3fe638500..fc263c9018 100644 --- a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts +++ b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts @@ -312,21 +312,30 @@ describe('ContentMetadataComponent', () => { component.displayEmpty = true; fixture.detectChanges(); - const defaultProp = queryDom(fixture); - const exifProp = queryDom(fixture, 'EXIF'); - const customProp = queryDom(fixture, 'CUSTOM'); + let defaultProp = queryDom(fixture); + let exifProp = queryDom(fixture, 'EXIF'); + let customProp = queryDom(fixture, 'CUSTOM'); expect(defaultProp.componentInstance.expanded).toBeFalsy(); expect(exifProp.componentInstance.expanded).toBeTruthy(); expect(customProp.componentInstance.expanded).toBeFalsy(); component.displayAspect = 'CUSTOM'; fixture.detectChanges(); - const updatedDefault = queryDom(fixture); - const updatedExif = queryDom(fixture, 'EXIF'); - const updatedCustom = queryDom(fixture, 'CUSTOM'); - expect(updatedDefault.componentInstance.expanded).toBeFalsy(); - expect(updatedExif.componentInstance.expanded).toBeFalsy(); - expect(updatedCustom.componentInstance.expanded).toBeTruthy(); + defaultProp = queryDom(fixture); + exifProp = queryDom(fixture, 'EXIF'); + customProp = queryDom(fixture, 'CUSTOM'); + expect(defaultProp.componentInstance.expanded).toBeFalsy(); + expect(exifProp.componentInstance.expanded).toBeFalsy(); + expect(customProp.componentInstance.expanded).toBeTruthy(); + + component.displayAspect = 'Properties'; + fixture.detectChanges(); + defaultProp = queryDom(fixture); + exifProp = queryDom(fixture, 'EXIF'); + customProp = queryDom(fixture, 'CUSTOM'); + expect(defaultProp.componentInstance.expanded).toBeTruthy(); + expect(exifProp.componentInstance.expanded).toBeFalsy(); + expect(customProp.componentInstance.expanded).toBeFalsy(); })); @@ -344,21 +353,6 @@ describe('ContentMetadataComponent', () => { expect(customProp.componentInstance.expanded).toBeFalsy(); })); - - it('should expand the properties section when input is null', async(() => { - component.displayAspect = null; - component.expanded = true; - component.displayEmpty = true; - - fixture.detectChanges(); - const defaultProp = queryDom(fixture); - const exifProp = queryDom(fixture, 'EXIF'); - const customProp = queryDom(fixture, 'CUSTOM'); - expect(defaultProp.componentInstance.expanded).toBeTruthy(); - expect(exifProp.componentInstance.expanded).toBeFalsy(); - expect(customProp.componentInstance.expanded).toBeFalsy(); - - })); }); }); diff --git a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts index b6d769cafb..cfeb2893ee 100644 --- a/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts +++ b/lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts @@ -126,4 +126,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { return group.title === this.displayAspect; } + public canExpandProperties(): boolean { + return !this.expanded || this.displayAspect === 'Properties'; + } + }