From c6933e169a4632aa7dc70cfb1d73f8d79a9143b0 Mon Sep 17 00:00:00 2001 From: dhrn Date: Fri, 19 Apr 2019 19:33:21 +0530 Subject: [PATCH] [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 + } + ] + } +];