[ADF-4359] - Add the possibility to chose which panel to show first in info-drawer

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"></adf-content-metadata-card>
 
                 <adf-content-metadata-card *ngIf="!isPreset" [node]="node"
                                            [multi]="multi"
                                            [readOnly]="isReadOnly"
+                                           [displayAspect]="showAspect"
                                            [displayDefaultProperties]="displayDefaultProperties"
                                            [displayEmpty]="displayEmptyMetadata"></adf-content-metadata-card>
 
@@ -71,6 +73,19 @@
                     </mat-slide-toggle>
                 </p>
 
+                <p class="toggle">
+
+                    <mat-form-field floatPlaceholder="float">
+                        <input matInput
+                               placeholder="Display Aspect"
+                               [(ngModel)]="desiredAspect">
+                    </mat-form-field>
+
+                    <button mat-raised-button (click)="applyAspect()" color="primary">
+                        Apply Aspect
+                    </button>
+                </p>
+
                 <p class="toggle">
                     <ng-container *ngIf="isPreset">
                         <mat-form-field floatPlaceholder="float">
@@ -118,7 +133,7 @@
 
                 <p class="toggle">
                     <ng-container *ngIf="customName">
-                        <mat-form-field floatPlaceholder="float">
+                        <mat-form-field floatLabel="never">
                             <input matInput
                                    placeholder="Custom Name"
                                    [(ngModel)]="displayName"

demo-shell/src/app/components/file-view/file-view.component.ts

@@ -55,6 +55,8 @@ export class FileViewComponent implements OnInit {
     isCommentEnabled = false;
     showTabWithIcon = false;
     showTabWithIconAndLabel = false;
+    desiredAspect: string = null;
+    showAspect: string = null;
 
     constructor(private router: Router,
                 private route: ActivatedRoute,
@@ -188,4 +190,8 @@ export class FileViewComponent implements OnInit {
             this.isPreset = true;
         }, 100);
     }
+
+    applyAspect() {
+        this.showAspect = this.desiredAspect;
+    }
 }

lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.html

@@ -7,6 +7,7 @@
             [displayEmpty]="displayEmpty"
             [editable]="editable"
             [multi]="multi"
+            [displayAspect]="displayAspect"
             [preset]="preset">
         </adf-content-metadata>
     </mat-card-content>

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();
+    });
+
 });

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;
     }

lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html

@@ -2,8 +2,8 @@
     <mat-accordion displayMode="flat" [multi]="multi">
         <mat-expansion-panel
             *ngIf="displayDefaultProperties"
-            [expanded]="!expanded"
+            [expanded]="!expanded || !displayAspect"
-            [hideToggle]="!expanded"
+            [hideToggle]="!expanded || !displayAspect"
             [attr.data-automation-id]="'adf-metadata-group-properties'" >
             <mat-expansion-panel-header>
                 <mat-panel-title>
@@ -23,7 +23,7 @@
                 <div *ngFor="let group of groupedProperties; let first = first;" class="adf-metadata-grouped-properties-container">
                     <mat-expansion-panel *ngIf="showGroup(group) || editable"
                     [attr.data-automation-id]="'adf-metadata-group-' + group.title"
-                    [expanded]="!displayDefaultProperties && first">
+                    [expanded]="canExpandTheCard(group) || !displayDefaultProperties && first">
                         <mat-expansion-panel-header>
                             <mat-panel-title>
                                 {{ group.title | translate }}

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<ContentMetadataComponent>;
+    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 = <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<ContentMetadataComponent>, properties: string = 'properties') {
+   return fixture.debugElement.query(By.css(`[data-automation-id="adf-metadata-group-${properties}"]`));
+}

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<CardViewItem[]>;
     groupedProperties$: Observable<CardViewGroup[]>;
     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;
+    }
+
 }

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
+            }
+        ]
+    }
+];