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

[ADF-3372] Added toggle and global configuration to display metadata (#3636)

Browse Source 
* [ADF-3372] Added toggle and global configuration to display metadata

* [ADF-3372] Fixed typo in shcema.json

* [ADF-3372] Removed unnecessary variables and variable name changed

* [ADF-3372] Fixed unit test

* [ADF-3372] Improved logic

* [ADF-3372] Improved Metadata component html logic

* [ADF-3372] Demoshell variable from app.config.json removed

* [ADF-3372] fixed bugs and tests

* [ADF-3372] fixed some error in tests

* [ADF-3372] fixed some wrong compilation in test

* [ADF-3372] fixed wrong locator

* [ADF-3372] fixed randomly failing tests
This commit is contained in:
davidcanonieto
2018-08-07 23:56:56 +02:00
committed by Eugenio Romano
parent 5b0b6e83bc
commit 409acbcc9e
12 changed files with 129 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@
<ng-template let-node="node" #sidebarTemplate>
<adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
<adf-info-drawer-tab [label]="'APP.INFO_DRAWER.COMMENTS' | translate">
<adf-comments [nodeId]="nodeId"></adf-comments>
</adf-info-drawer-tab>
@@ -11,13 +12,25 @@
[multi]="multi"
[preset]="customPreset"
[readOnly]="isReadOnly"
[displayDefaultProperties]="displayDefaultProperties"
[displayEmpty]="displayEmptyMetadata"></adf-content-metadata-card>
<adf-content-metadata-card *ngIf="!isPreset" [node]="node"
[multi]="multi"
[readOnly]="isReadOnly"
[displayDefaultProperties]="displayDefaultProperties"
[displayEmpty]="displayEmptyMetadata"></adf-content-metadata-card>
<p class="toggle">
<mat-slide-toggle
id="adf-toggle-display-properties"
[color]="'primary'"
(change)="toggleDisplayProperties()"
[checked]="displayDefaultProperties">
Display Properties
</mat-slide-toggle>
</p>
<p class="toggle">
<mat-slide-toggle
id="adf-metadata-empty"

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

@@ -30,10 +30,12 @@ export class FileViewComponent implements OnInit {
nodeId: string = null;
displayEmptyMetadata = false;
expanded: boolean;
multi = false;
isReadOnly = false;
isPreset = false;
customPreset: string = null;
displayDefaultProperties = true;
constructor(private router: Router,
private route: ActivatedRoute,
@@ -76,6 +78,10 @@ export class FileViewComponent implements OnInit {
this.isReadOnly = !this.isReadOnly;
}
toggleDisplayProperties() {
this.displayDefaultProperties = !this.displayDefaultProperties;
}
togglePreset() {
this.isPreset = !this.isPreset;
if (!this.isPreset) {

2
docs/content-services/content-metadata.component.md
View File

@@ -15,6 +15,7 @@ Displays and edits metadata related to a node.
```html
<adf-content-metadata-card
[displayEmpty]="false"
[toggleDisplayProperties]="displayDefaultProperties"
[preset]="'*'"
[node]="node">
</adf-content-metadata-card>
@@ -27,6 +28,7 @@ Displays and edits metadata related to a node.
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| displayEmpty | `boolean` | false | Toggles whether to display empty values in the card view |
| displayDefaultProperties | `boolean` | true | Toggles whether to display metadata fields values in the card view |
| editable | `boolean` | false | Toggles whether the edit button should be shown |
| expanded | `boolean` | false | Toggles between expanded (ie, full information) and collapsed (ie, reduced information) in the display |
| multi | `boolean` | false | The multi parameter of the underlying material expansion panel, set to true to allow multi accordion to be expanded at the same time |

42
e2e/core/card-view/aspect-oriented-config.e2e.ts
View File

@@ -31,6 +31,7 @@ import resources = require('../../util/resources');
import AlfrescoApi = require('alfresco-js-api-node');
import { UploadActions } from '../../actions/ACS/upload.actions';
import ContentServicesPage = require('../../pages/adf/contentServicesPage');
describe('Aspect oriented config', () => {
@@ -39,6 +40,7 @@ describe('Aspect oriented config', () => {
const metadataViewPage = new CardViewPage();
const navigationBarPage = new NavigationBarPage();
const configEditorPage = new ConfigEditorPage();
let contentServicesPage = new ContentServicesPage();
let acsUser = new AcsUserModel();
@@ -69,15 +71,21 @@ describe('Aspect oriented config', () => {
done();
});
afterEach(() => {
beforeEach(async(done) => {
navigationBarPage.clickConfigEditorButton();
configEditorPage.clickClearMetadataButton();
done();
});
afterEach(async(done) => {
viewerPage.clickCloseButton();
contentServicesPage.checkAcsContainer();
browser.refresh();
contentServicesPage.checkAcsContainer();
done();
});
it('[C261117] Should be possible restrict the display properties of one an aspect', () => {
navigationBarPage.clickConfigEditorButton();
configEditorPage.clickClearMetadataButton();
configEditorPage.enterMetadataConfiguration('{ "presets": {' +
' "default": [{' +
@@ -98,11 +106,10 @@ describe('Aspect oriented config', () => {
viewerPage.clickInfoButton();
viewerPage.checkInfoSideBarIsDisplayed();
metadataViewPage.clickOnPropertiesTab();
metadataViewPage.informationButtonIsDisplayed();
metadataViewPage.clickOnInformationButton();
metadataViewPage.clickMetadatGroup('IMAGE');
metadataViewPage.checkPopertyIsVisible('properties.exif:pixelXDimension', 'textitem');
metadataViewPage.checkPopertyIsVisible('properties.exif:pixelYDimension', 'textitem');
metadataViewPage.checkPopertyIsNotVisible('properties.exif:isoSpeedRatings', 'textitem');
@@ -113,9 +120,6 @@ describe('Aspect oriented config', () => {
});
it('[C260185] Should ignore not existing aspect when present in the configuration', () => {
navigationBarPage.clickConfigEditorButton();
configEditorPage.clickClearMetadataButton();
configEditorPage.enterMetadataConfiguration(' {' +
' "presets": {' +
@@ -135,7 +139,7 @@ describe('Aspect oriented config', () => {
viewerPage.clickInfoButton();
viewerPage.checkInfoSideBarIsDisplayed();
metadataViewPage.clickOnPropertiesTab();
metadataViewPage.informationButtonIsDisplayed();
metadataViewPage.clickOnInformationButton();
metadataViewPage.checkkMetadatGroupIsPresent('EXIF');
@@ -145,9 +149,6 @@ describe('Aspect oriented config', () => {
});
it('[C260183] Should show all the aspect if the content-metadata configuration is NOT provided' , () => {
navigationBarPage.clickConfigEditorButton();
configEditorPage.clickClearMetadataButton();
configEditorPage.enterMetadataConfiguration('{ }');
@@ -159,7 +160,7 @@ describe('Aspect oriented config', () => {
viewerPage.clickInfoButton();
viewerPage.checkInfoSideBarIsDisplayed();
metadataViewPage.clickOnPropertiesTab();
metadataViewPage.informationButtonIsDisplayed();
metadataViewPage.clickOnInformationButton();
metadataViewPage.checkkMetadatGroupIsPresent('EXIF');
@@ -172,9 +173,6 @@ describe('Aspect oriented config', () => {
});
it('[C260182] Should show all the aspects if the default configuration contains the * symbol' , () => {
navigationBarPage.clickConfigEditorButton();
configEditorPage.clickClearMetadataButton();
configEditorPage.enterMetadataConfiguration('{' +
' "presets": {' +
@@ -191,6 +189,7 @@ describe('Aspect oriented config', () => {
viewerPage.checkInfoSideBarIsDisplayed();
metadataViewPage.clickOnPropertiesTab();
metadataViewPage.informationButtonIsDisplayed();
metadataViewPage.clickOnInformationButton();
metadataViewPage.checkkMetadatGroupIsPresent('EXIF');
@@ -203,9 +202,6 @@ describe('Aspect oriented config', () => {
});
it('[C268899] Should be possible use a Translation key as Title of a metadata group' , () => {
navigationBarPage.clickConfigEditorButton();
configEditorPage.clickClearMetadataButton();
configEditorPage.enterMetadataConfiguration('{' +
' "presets": {' +
@@ -244,6 +240,7 @@ describe('Aspect oriented config', () => {
viewerPage.checkInfoSideBarIsDisplayed();
metadataViewPage.clickOnPropertiesTab();
metadataViewPage.informationButtonIsDisplayed();
metadataViewPage.clickOnInformationButton();
metadataViewPage.checkkMetadatGroupIsPresent('GROUP-TITLE1-TRANSLATION-KEY');
@@ -255,9 +252,6 @@ describe('Aspect oriented config', () => {
});
it('[C279968] Should be possible use a custom preset' , () => {
navigationBarPage.clickConfigEditorButton();
configEditorPage.clickClearMetadataButton();
configEditorPage.enterMetadataConfiguration('{' +
' "presets": {' +
@@ -278,8 +272,10 @@ describe('Aspect oriented config', () => {
metadataViewPage.clickOnPropertiesTab();
metadataViewPage.enablePreset();
metadataViewPage.enterPresetText('custom-preset');
metadataViewPage.informationButtonIsDisplayed();
metadataViewPage.clickOnInformationButton();
metadataViewPage.checkkMetadatGroupIsPresent('properties');

2
e2e/pages/adf/configEditorPage.ts
View File

@@ -33,12 +33,14 @@ export class ConfigEditorPage {
clickSaveMetadataButton() {
let saveButton = element(by.xpath('//*[@id="adf-metadata-save"]'));
Util.waitUntilElementIsVisible(saveButton);
Util.waitUntilElementIsClickable(saveButton);
return saveButton.click();
}
clickClearMetadataButton() {
let clearButton = element(by.xpath('//*[@id="adf-metadata-clear"]'));
Util.waitUntilElementIsVisible(clearButton);
Util.waitUntilElementIsClickable(clearButton);
return clearButton.click();
}
}

7
e2e/pages/adf/metadataViewPage.js
View File

@@ -116,11 +116,12 @@ var MetadataViewPage = function () {
};
this.informationButtonIsDisplayed = function () {
return Util.waitUntilElementIsVisible(informationSpan);
Util.waitUntilElementIsVisible(informationButton);
Util.waitUntilElementIsClickable(informationButton);
};
this.clickOnInformationButton = function () {
Util.waitUntilElementIsVisible(informationSpan);
this.informationButtonIsDisplayed();
informationButton.click();
return this;
};
@@ -136,7 +137,7 @@ var MetadataViewPage = function () {
};
this.clickOnPropertiesTab = function () {
var propertiesTab = element(by.cssContainingText(".adf-info-drawer-layout-content div.mat-tab-labels div", "Properties"));
let propertiesTab = element(by.cssContainingText(".adf-info-drawer-layout-content div.mat-tab-labels div .mat-tab-label-content", "Properties"));
Util.waitUntilElementIsVisible(propertiesTab);
propertiesTab.click();
return this;

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

@@ -1,10 +1,11 @@
<mat-card *ngIf="node">
<mat-card-content>
<adf-content-metadata
[displayDefaultProperties]="displayDefaultProperties"
[expanded]="expanded"
[node]="node"
[displayEmpty]="displayEmpty"
[editable]="editable"
[expanded]="expanded"
[multi]="multi"
[preset]="preset">
</adf-content-metadata>
@@ -19,7 +20,7 @@
<mat-icon>mode_edit</mat-icon>
</button>
</div>
<button mat-button (click)="toggleExpanded()" data-automation-id="meta-data-card-toggle-expand">
<button *ngIf="displayDefaultProperties" mat-button (click)="toggleExpanded()" data-automation-id="meta-data-card-toggle-expand">
<ng-container *ngIf="!expanded">
<span data-automation-id="meta-data-card-toggle-expand-label">{{ 'ADF_VIEWER.SIDEBAR.METADATA.MORE_INFORMATION' | translate }}</span>
<mat-icon>keyboard_arrow_down</mat-icon>

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

@@ -15,8 +15,6 @@
* limitations under the License.
*/
/*tslint:disable: ban*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
@@ -62,6 +60,16 @@ describe('ContentMetadataCardComponent', () => {
expect(component.displayEmpty).toBe(false);
});
it('should show more information when no metadata properties are being displayed', () => {
component.displayDefaultProperties = false;
expect(component.expanded).toBe(!component.displayDefaultProperties);
});
it('should show less information when metadata properties are being displayed', () => {
component.displayDefaultProperties = true;
expect(component.expanded).toBe(!component.displayDefaultProperties);
});
it('should pass through the node to the underlying component', () => {
const contentMetadataComponent = fixture.debugElement.query(By.directive(ContentMetadataComponent)).componentInstance;

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

@@ -27,27 +27,60 @@ import { ContentService, PermissionsEnum } from '@alfresco/adf-core';
host: { 'class': 'adf-content-metadata-card' }
})
export class ContentMetadataCardComponent {
/** (required) The node entity to fetch metadata about */
@Input()
node: MinimalNodeEntryEntity;
/** (optional) This flag displays/hides empty metadata
* fields.
*/
@Input()
displayEmpty: boolean = false;
/** (required) Name of the metadata preset, which defines aspects
* and their properties.
*/
@Input()
preset: string;
/** (optional) This flag sets the metadata in read only mode
* preventing changes.
*/
@Input()
readOnly = false;
/** (optional) This flag allows the component to display more
* than one accordion at a time.
*/
@Input()
multi = false;
private _displayDefaultProperties: boolean = true;
/** (optional) This flag displays/hides the metadata
* properties.
*/
@Input()
set displayDefaultProperties(value: boolean) {
this._displayDefaultProperties = value;
this.onDisplayDefaultPropertiesChange();
}
get displayDefaultProperties(): boolean {
return this._displayDefaultProperties;
}
editable: boolean = false;
expanded: boolean = false;
expanded: boolean;
constructor(private contentService: ContentService) {
}
onDisplayDefaultPropertiesChange(): void {
this.expanded = !this._displayDefaultProperties;
}
toggleEdit(): void {
this.editable = !this.editable;
}

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

@@ -1,6 +1,10 @@
<div class="adf-metadata-properties">
<mat-accordion displayMode="flat" [multi]="multi">
<mat-expansion-panel [expanded]="!expanded" [hideToggle]="!expanded" [attr.data-automation-id]="'adf-metadata-group-properties'" >
<mat-expansion-panel
*ngIf="displayDefaultProperties"
[expanded]="!expanded"
[hideToggle]="!expanded"
[attr.data-automation-id]="'adf-metadata-group-properties'" >
<mat-expansion-panel-header>
<mat-panel-title>
{{ 'CORE.METADATA.BASIC.HEADER' | translate }}
@@ -16,8 +20,10 @@
<ng-container *ngIf="expanded">
<ng-container *ngIf="groupedProperties$ | async; else loading; let groupedProperties">
<div *ngFor="let group of groupedProperties" class="adf-metadata-grouped-properties-container">
<mat-expansion-panel [attr.data-automation-id]="'adf-metadata-group-' + group.title" >
<div *ngFor="let group of groupedProperties; let first = first;" class="adf-metadata-grouped-properties-container">
<mat-expansion-panel
[attr.data-automation-id]="'adf-metadata-group-' + group.title"
[expanded]="!displayDefaultProperties && first">
<mat-expansion-panel-header>
<mat-panel-title>
{{ group.title | translate }}
@@ -30,6 +36,7 @@
[displayEmpty]="displayEmpty">
</adf-card-view>
</mat-expansion-panel>
</div>
</ng-container>
<ng-template #loading>

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

@@ -15,8 +15,6 @@
* limitations under the License.
*/
/*tslint:disable: ban*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SimpleChange } from '@angular/core';
import { By } from '@angular/platform-browser';
@@ -233,4 +231,26 @@ describe('ContentMetadataComponent', () => {
});
}));
});
describe('Properties displaying', () => {
it('should hide metadata fields if displayDefaultProperties is set to false', () => {
component.displayDefaultProperties = false;
fixture.detectChanges();
const metadataContainer = fixture.debugElement.query(By.css('mat-expansion-panel[data-automation-id="adf-metadata-group-properties"]'));
fixture.detectChanges();
expect(metadataContainer).toBeNull();
});
it('should display metadata fields if displayDefaultProperties is set to true', () => {
component.displayDefaultProperties = true;
fixture.detectChanges();
const metadataContainer = fixture.debugElement.query(By.css('mat-expansion-panel[data-automation-id="adf-metadata-group-properties"]'));
fixture.detectChanges();
expect(metadataContainer).toBeDefined();
});
it('should have displayDefaultProperties input param as true by default', () => {
expect(component.displayDefaultProperties).toBe(true);
});
});
});

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

@@ -57,6 +57,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
@Input()
preset: string;
/** Toggles whether the metadata properties should be shown */
@Input()
displayDefaultProperties: boolean = true;
basicProperties$: Observable<CardViewItem[]>;
groupedProperties$: Observable<CardViewGroup[]>;
disposableNodeUpdate: Subscription;