inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dhrn 2019-04-19 19:33:21 +05:30
parent 32ba281b70
commit c6933e169a
9 changed files with 208 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
demo-shell/src/app/components/file-view/file-view.component.html
View File

@ -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"

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

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

1
lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.html
View File

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

14
lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.spec.ts
View File

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

16
lib/content-services/content-metadata/components/content-metadata-card/content-metadata-card.component.ts
View File

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

6
lib/content-services/content-metadata/components/content-metadata/content-metadata.component.html
View File

@ -2,8 +2,8 @@
<mat-accordion displayMode="flat" [multi]="multi">
<mat-expansion-panel
*ngIf="displayDefaultProperties"
[expanded]="!expanded"
[hideToggle]="!expanded"
[expanded]="!expanded || !displayAspect"
[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 }}

74
lib/content-services/content-metadata/components/content-metadata/content-metadata.component.spec.ts
View File

@ -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}"]`));
}

8
lib/content-services/content-metadata/components/content-metadata/content-metadata.component.ts
View File

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

74
lib/content-services/content-metadata/components/content-metadata/mock-data.ts Normal file
View File

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