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-3332][ADF-3352] Add property e2e test and leftsidebar viewer (#3814)

Browse Source 
* new viewer test
left sidebar
fix height width no overlay viewer

* fix lint and failing e2e

* missing semi column

* fix test

* fix template

* documentation
This commit is contained in:
Eugenio Romano
2018-09-21 11:37:40 +01:00
committed by GitHub
parent cfbe3cfd86
commit 897a557afa
13 changed files with 870 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -28,3 +28,4 @@ src/environments/
/lib/config/export-check/exportCheck.js
/docs/sourceinfo
/docs/docs.json
/protractorFailuresReport

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

@@ -1,6 +1,6 @@
<ng-container *ngIf="nodeId">
<ng-template let-node="node" #sidebarTemplate>
<ng-template let-node="node" #sidebarRightTemplate>
<adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
<adf-info-drawer-tab [label]="'APP.INFO_DRAWER.COMMENTS' | translate">
@@ -79,7 +79,9 @@
data-automation-id="adf-text-custom-preset">
</mat-form-field>
<button mat-raised-button id="adf-metadata-aplly" (click)="applyCustomPreset()" color="primary">Apply</button>
<button mat-raised-button id="adf-metadata-aplly" (click)="applyCustomPreset()" color="primary">
Apply
</button>
</ng-container>
</p>
@@ -98,24 +100,194 @@
</adf-info-drawer>
</ng-template>
<ng-template let-node="node" #sidebarLeftTemplate>
<adf-info-drawer [title]="'Viewer Options'">
<adf-info-drawer-tab [label]="">
<p class="toggle">
<mat-slide-toggle
id="adf-switch-custoname"
[color]="'primary'"
(change)="toggleCustomName()"
[checked]="customName">
Custom Name
</mat-slide-toggle>
</p>
<p class="toggle">
<ng-container *ngIf="customName">
<mat-form-field floatPlaceholder="float">
<input matInput
placeholder="Custom Name"
[(ngModel)]="displayName"
data-automation-id="adf-text-custom-name">
</mat-form-field>
</ng-container>
</p>
<p class="toggle">
<mat-slide-toggle
id="adf-switch-fileurl"
[color]="'primary'"
(change)="toggleFileUrl()"
[checked]="fileUrlSwitch">
Url File
</mat-slide-toggle>
</p>
<p class="toggle">
<ng-container *ngIf="fileUrlSwitch">
<mat-form-field floatPlaceholder="float">
<input matInput
placeholder="Url File"
[(ngModel)]="urlFile"
data-automation-id="adf-text-file-url">
</mat-form-field>
</ng-container>
</p>
<p class="toggle">
<mat-slide-toggle
id="adf-switch-toolbar"
[color]="'primary'"
(change)="toggleShowToolbar()"
[checked]="showToolbar">
Show Toolbar
</mat-slide-toggle>
</p>
<p class="toggle">
<mat-slide-toggle
id="adf-switch-goback"
[color]="'primary'"
(change)="toggleAllowGoBack()"
[checked]="allowGoBack">
Allow GoBack
</mat-slide-toggle>
</p>
<p class="toggle">
<mat-slide-toggle
id="adf-switch-openwith"
[color]="'primary'"
(change)="toggleOpenWith()"
[checked]="openWith">
Open With
</mat-slide-toggle>
</p>
<p class="toggle">
<mat-slide-toggle
id="adf-switch-moreactions"
[color]="'primary'"
(change)="toggleOpenMoreActions()"
[checked]="moreActions">
More Actions
</mat-slide-toggle>
</p>
<p class="toggle">
<mat-slide-toggle
id="adf-switch-download"
[color]="'primary'"
(change)="toggleAllowDownload()"
[checked]="allowDownload">
Allow Download
</mat-slide-toggle>
</p>
<p class="toggle">
<mat-slide-toggle
id="adf-switch-print"
[color]="'primary'"
(change)="toggleAllowPrint()"
[checked]="allowPrint">
Allow Print
</mat-slide-toggle>
</p>
<p class="toggle">
<mat-slide-toggle
id="adf-switch-share"
[color]="'primary'"
(change)="toggleAllowShare()"
[checked]="allowShare">
Allow Share
</mat-slide-toggle>
</p>
<p class="toggle">
<mat-slide-toggle
id="adf-switch-allowsidebar"
[color]="'primary'"
(change)="toggleAllowSidebar()"
[checked]="allowSidebar">
Allow Sidebar
</mat-slide-toggle>
</p>
<p class="toggle">
<button mat-raised-button id="adf-switch-showrightsidebar" (click)="toggleShowRightSidebar()" color="primary">
Toggle Right Sidebar
</button>
</p>
<p class="toggle">
<button mat-raised-button id="adf-switch-showleftsidebar" (click)="hideLeftSidebar()" color="primary">
Hide Left Sidebar
</button>
</p>
</adf-info-drawer-tab>
</adf-info-drawer>
</ng-template>
<adf-viewer
[nodeId]="nodeId"
[allowPrint]="true"
[allowSidebar]="true"
[sidebarTemplate]="sidebarTemplate">
[showSidebar]="showRightSidebar"
[showLeftSidebar]="showLeftSidebar"
[allowGoBack]="allowGoBack"
[displayName]="displayName"
[showToolbar]="showToolbar"
[allowShare]="allowShare"
[allowPrint]="allowPrint"
[allowDownload]="allowDownload"
[allowSidebar]="allowSidebar"
[urlFile]="urlFile"
[sidebarLeftTemplate]="sidebarLeftTemplate"
[sidebarTemplate]="sidebarRightTemplate">
<adf-viewer-toolbar-actions>
<button mat-icon-button>
<adf-viewer-toolbar-actions *ngIf="moreActions">
<button mat-icon-button id="adf-viewer-time">
<mat-icon>alarm</mat-icon>
</button>
<button mat-icon-button>
<button mat-icon-button id="adf-viewer-upload">
<mat-icon>backup</mat-icon>
</button>
<button mat-icon-button>
<button mat-icon-button id="adf-viewer-bug">
<mat-icon>bug_report</mat-icon>
</button>
</adf-viewer-toolbar-actions>
<ng-container *ngIf="openWith">
<adf-viewer-open-with>
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Option 1</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Option 2</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Option 3</span>
</button>
</adf-viewer-open-with>
</ng-container>
<!--
<adf-viewer-extension [supportedExtensions]="['json']">
<ng-template let-urlFileContent="urlFileContent" let-extension="extension">

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

@@ -36,6 +36,20 @@ export class FileViewComponent implements OnInit {
isPreset = false;
customPreset: string = null;
displayDefaultProperties = true;
showToolbar = true;
displayName = null;
urlFile = null;
allowGoBack = true;
openWith = false;
allowDownload = true;
allowPrint = true;
allowShare = true;
allowSidebar = true;
moreActions = true;
customName = false;
fileUrlSwitch = false;
showLeftSidebar = null;
showRightSidebar = false;
constructor(private router: Router,
private route: ActivatedRoute,
@@ -44,7 +58,6 @@ export class FileViewComponent implements OnInit {
}
ngOnInit() {
this.route.params.subscribe(params => {
const id = params.nodeId;
if (id) {
@@ -82,6 +95,62 @@ export class FileViewComponent implements OnInit {
this.displayDefaultProperties = !this.displayDefaultProperties;
}
toggleShowToolbar() {
this.showToolbar = !this.showToolbar;
}
toggleAllowGoBack() {
this.allowGoBack = !this.allowGoBack;
}
toggleOpenWith() {
this.openWith = !this.openWith;
}
toggleAllowDownload() {
this.allowDownload = !this.allowDownload;
}
toggleAllowPrint() {
this.allowPrint = !this.allowPrint;
}
toggleAllowShare() {
this.allowShare = !this.allowShare;
}
toggleOpenMoreActions() {
this.moreActions = !this.moreActions;
}
toggleShowRightSidebar() {
this.showRightSidebar = !this.showRightSidebar;
}
hideLeftSidebar() {
this.showLeftSidebar = false;
}
toggleAllowSidebar() {
this.allowSidebar = !this.allowSidebar;
}
toggleCustomName() {
this.customName = !this.customName;
if (!this.customName) {
this.displayName = null;
}
}
toggleFileUrl() {
this.fileUrlSwitch = !this.fileUrlSwitch;
if (!this.fileUrlSwitch) {
this.urlFile = null;
}
}
togglePreset() {
this.isPreset = !this.isPreset;
if (!this.isPreset) {

2
docs/core/viewer.component.md
View File

@@ -93,9 +93,11 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
| nodeId | `string` | null | Node Id of the file to load. |
| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
| sharedLinkId | `string` | null | Shared link id (to display shared file). |
| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowSidebar` to be set to `true`. |
| showSidebar | `boolean` | false | Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. |
| showToolbar | `boolean` | true | Hide or show the toolbar |
| showViewer | `boolean` | true | Hide or show the viewer |
| sidebarLeftTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the left sidebar. The template context contains the loaded node data. |
| sidebarPosition | `string` | "right" | The position of the sidebar. Can be `left` or `right`. |
| sidebarTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the sidebar. The template context contains the loaded node data. |
| thumbnailsTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the pdf thumbnails. |

4
e2e/content-services/tag_component.e2e.ts
View File

@@ -28,6 +28,7 @@ import AlfrescoApi = require('alfresco-js-api-node');
import { UploadActions } from '../actions/ACS/upload.actions';
import Util = require('../util/util');
import { browser } from 'protractor';
describe('Tag component', () => {
@@ -105,6 +106,9 @@ describe('Tag component', () => {
it('[C260378] Multiple tags', () => {
tagPage.insertNodeId(pdfFileModel.id);
tagPage.addTag(tagList[2]);
browser.driver.sleep(3000); // wait CS return tags
tagPage.checkTagListIsOrderedAscending();
tagPage.checkTagListByNodeIdIsOrderedAscending();
tagPage.checkTagListContentServicesIsOrderedAscending();

180
e2e/core/viewer_properties.e2e.ts Normal file
View File

@@ -0,0 +1,180 @@
/*!
* @license
* Copyright 2016 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.
*/
import { browser } from 'protractor';
import TestConfig = require('../test.config');
import LoginPage = require('../pages/adf/loginPage');
import ContentServicesPage = require('../pages/adf/contentServicesPage');
import ViewerPage = require('../pages/adf/viewerPage');
import resources = require('../util/resources');
import FileModel = require('../models/ACS/fileModel');
import AcsUserModel = require('../models/ACS/acsUserModel');
import AlfrescoApi = require('alfresco-js-api-node');
import { UploadActions } from '../actions/ACS/upload.actions';
describe('Viewer - properties', () => {
let acsUser = new AcsUserModel();
let viewerPage = new ViewerPage();
let contentServicesPage = new ContentServicesPage();
let loginPage = new LoginPage();
let pngFile = new FileModel({
'name': resources.Files.ADF_DOCUMENTS.PNG.file_name,
'location': resources.Files.ADF_DOCUMENTS.PNG.file_location
});
beforeAll(async (done) => {
let uploadActions = new UploadActions();
this.alfrescoJsApi = new AlfrescoApi({
provider: 'ECM',
hostEcm: TestConfig.adf.url
});
await this.alfrescoJsApi.login(TestConfig.adf.adminEmail, TestConfig.adf.adminPassword);
await this.alfrescoJsApi.core.peopleApi.addPerson(acsUser);
await this.alfrescoJsApi.login(acsUser.id, acsUser.password);
let pngFileUploaded = await uploadActions.uploadFile(this.alfrescoJsApi, pngFile.location, pngFile.name, '-my-');
Object.assign(pngFile, pngFileUploaded.entry);
loginPage.loginToContentServicesUsingUserModel(acsUser);
contentServicesPage.goToDocumentList();
contentServicesPage.checkAcsContainer();
viewerPage.viewFile(pngFile.name);
viewerPage.clickLeftSidebarButton();
viewerPage.checkLeftSideBarIsDisplayed();
done();
});
afterAll(async (done) => {
let uploadActions = new UploadActions();
await uploadActions.deleteFilesOrFolder(this.alfrescoJsApi, pngFile.getId());
done();
});
it('[C260066] Should Show/Hide viewer toolbar when showToolbar is true/false', () => {
viewerPage.checkToolbarIsDisplayed();
viewerPage.disableToolbar();
viewerPage.checkToolbarIsNotDisplayed();
viewerPage.enableToolbar();
});
it('[C260076] Should Show/Hide back button when allowGoBack is true/false', () => {
viewerPage.checkGoBackIsDisplayed();
viewerPage.disableGoBack();
viewerPage.checkGoBackIsNotDisplayed();
viewerPage.enableGoBack();
});
it('[C260077] Should Show toolbar options dropdown when adf-viewer-open-with directive is used', () => {
viewerPage.checkToolbarOptionsIsNotDisplayed();
viewerPage.enableToolbarOptions();
viewerPage.checkToolbarOptionsIsDisplayed();
viewerPage.disableToolbarOptions();
});
it('[C260079] Should Show/Hide download button when allowDownload is true/false', () => {
viewerPage.checkDownloadButtonDisplayed();
viewerPage.disableDownload();
viewerPage.checkDownloadButtonIsNotDisplayed();
viewerPage.enableDownload();
});
it('[C260082] Should Show/Hide print button when allowPrint is true/false', () => {
viewerPage.checkPrintButtonIsDisplayed();
viewerPage.disablePrint();
viewerPage.checkPrintButtonIsNotDisplayed();
viewerPage.enablePrint();
});
it('[C260087] Should Show/Hide share button when allowShare is true/false', () => {
viewerPage.checkShareButtonDisplayed();
viewerPage.disableShare();
viewerPage.checkShareButtonIsNotDisplayed();
viewerPage.enableShare();
});
it('[C260092] Should show adf-viewer-toolbar-actions directive buttons when adf-viewer-toolbar-actions is used', () => {
viewerPage.checkMoreActionsDisplayed();
viewerPage.disableMoreActions();
viewerPage.checkMoreActionsIsNotDisplayed();
viewerPage.enableMoreActions();
});
it('[C260074] Should show a custom file name when displayName property is used', () => {
viewerPage.checkFileNameIsDisplayed(pngFile.name);
viewerPage.enableCustomName();
viewerPage.enterCustomName('test custom title');
viewerPage.checkFileNameIsDisplayed('test custom title');
viewerPage.disableCustomName();
});
it('[C260090] Sould showSidebar allow right info-drawer to be shown', () => {
viewerPage.clickToggleRightSidebar();
viewerPage.checkInfoSideBarIsDisplayed();
viewerPage.clickToggleRightSidebar();
viewerPage.checkInfoSideBarIsNotDisplayed();
});
it('[C286442] Sould showLeftSidebar allow left info-drawer to be shown', () => {
viewerPage.clickToggleLeftSidebar();
viewerPage.checkLeftSideBarIsNotDisplayed();
viewerPage.clickLeftSidebarButton();
viewerPage.checkLeftSideBarIsDisplayed();
});
it('[C260089] Should Show/Hide info-drawer if allowSidebar true/false', () => {
viewerPage.clickInfoButton();
viewerPage.checkLeftSideBarIsDisplayed();
viewerPage.checkInfoSideBarIsDisplayed();
viewerPage.checkInfoButtonIsDisplayed();
viewerPage.checkLeftSideBarButtonIsDisplayed();
viewerPage.disableAllowSidebar();
viewerPage.checkInfoButtonIsNotDisplayed();
viewerPage.checkLeftSideBarButtonIsNotDisplayed();
viewerPage.checkLeftSideBarIsNotDisplayed();
viewerPage.checkInfoSideBarIsNotDisplayed();
});
});

4
e2e/pages/adf/versionManagerPage.ts
View File

@@ -96,7 +96,7 @@ export class VersionManagePage {
}
/**
* disables download
* disables readOnly
*/
disableReadOnly() {
Util.waitUntilElementIsVisible(this.readOnlySwitch);
@@ -108,7 +108,7 @@ export class VersionManagePage {
}
/**
* enables download
* enables readOnly
*/
enableReadOnly() {
Util.waitUntilElementIsVisible(this.readOnlySwitch);

324
e2e/pages/adf/viewerPage.js
View File

@@ -21,8 +21,8 @@ var ViewerToolbarPage = function () {
var closeButton = element(by.css("button[data-automation-id='adf-toolbar-back']"));
var fileName = element(by.id("adf-viewer-display-name"));
var downloadButton = element(by.css("button[data-automation-id='adf-toolbar-download'] > span > mat-icon"));
var infoButton = element(by.css("button[data-automation-id='adf-toolbar-sidebar']"));
var leftSideBarButton = element(by.css("button[data-automation-id='adf-toolbar-left-sidebar']"));
var previousPageButton = element(by.id("viewer-previous-page-button"));
var nextPageButton = element(by.id("viewer-next-page-button"));
var zoomInButton = element(by.id("viewer-zoom-in-button"));
@@ -50,12 +50,42 @@ var ViewerToolbarPage = function () {
var passwordSubmitDisabled = element(by.css("button[data-automation-id='adf-password-dialog-submit'][disabled]"));
var passwordInput = element(by.css("input[data-automation-id='adf-password-dialog-input']"));
var passwordError = element(by.css("mat-error[data-automation-id='adf-password-dialog-error']"));
var infoSideBar = element(by.css("div[class='adf-info-drawer-layout-header']"));
var infoSideBar = element(by.id("adf-right-sidebar"));
var leftSideBar = element(by.id("adf-left-sidebar"));
var unsupportedFileContainer = element(by.cssContainingText(".label", "Document preview could not be loaded"));
var pageCanvas = element.all(by.css("div[class='canvasWrapper']")).first();
var activeTab = element(by.css("div[class*='mat-tab-label-active']"));
var uploadNewVersionButton = element(by.css("input[data-automation-id='upload-single-file']"));
var rightChevron = element(by.css("div[class*='header-pagination-after']"));
var toolbarSwitch = element(by.id('adf-switch-toolbar'));
var toolbar = element(by.id('adf-viewer-toolbar'));
var goBackSwitch = element(by.id('adf-switch-goback'));
var openWithSwitch = element(by.id('adf-switch-openwith'));
var openWith = element(by.id('adf-viewer-openwith'));
var customNameSwitch = element(by.id('adf-switch-custoname'));
var showRightSidebarSwitch = element(by.id('adf-switch-showrightsidebar'));
var showLeftSidebarSwitch = element(by.id('adf-switch-showleftsidebar'));
var moreActionsSwitch = element(by.id('adf-switch-moreactions'));
var moreActions = element(by.id('adf-viewer-moreactions'));
var downloadSwitch = element(by.id('adf-switch-download'));
var downloadButton = element(by.id('adf-viewer-download'));
var printSwitch = element(by.id('adf-switch-print'));
var printButton = element(by.id('adf-viewer-print'));
var allowSidebarSwitch = element(by.id('adf-switch-allowsidebar'));
var shareSwitch = element(by.id('adf-switch-share'));
var shareButton = element(by.id('adf-viewer-share'));
var uploadButton = element(by.id('adf-viewer-upload'));
var timeButton = element(by.id('adf-viewer-time'));
var bugButton = element(by.id('adf-viewer-bug'));
this.canvasHeight = function () {
var deferred = protractor.promise.defer();
@@ -164,6 +194,10 @@ var ViewerToolbarPage = function () {
Util.waitUntilElementIsVisible(infoButton);
};
this.checkInfoButtonIsNotDisplayed = function () {
Util.waitUntilElementIsNotVisible(infoButton);
};
this.checkFileThumbnailIsDisplayed = function () {
Util.waitUntilElementIsVisible(fileThumbnail);
};
@@ -287,11 +321,32 @@ var ViewerToolbarPage = function () {
Util.waitUntilElementIsNotOnPage(infoSideBar);
};
this.checkLeftSideBarButtonIsNotDisplayed = function () {
Util.waitUntilElementIsNotOnPage(leftSideBarButton);
};
this.checkLeftSideBarButtonIsDisplayed = function () {
Util.waitUntilElementIsOnPage(leftSideBarButton);
};
this.clickInfoButton = function () {
Util.waitUntilElementIsVisible(infoButton);
return infoButton.click();
};
this.clickLeftSidebarButton = function () {
Util.waitUntilElementIsVisible(leftSideBarButton);
return leftSideBarButton.click();
};
this.checkLeftSideBarIsDisplayed = function () {
Util.waitUntilElementIsVisible(leftSideBar);
};
this.checkLeftSideBarIsNotDisplayed = function () {
Util.waitUntilElementIsNotOnPage(leftSideBar);
};
this.clickPasswordSubmit = function () {
Util.waitUntilElementIsVisible(passwordSubmit);
passwordSubmit.click();
@@ -391,7 +446,7 @@ var ViewerToolbarPage = function () {
.map((element) => element.getAttribute('innerText'))
.then((texts) => {
for (let text of texts) {
if (text === tabName ) {
if (text === tabName) {
break;
}
this.clickRightChevron();
@@ -399,13 +454,13 @@ var ViewerToolbarPage = function () {
});
};
this.clickRightChevron = function() {
this.clickRightChevron = function () {
Util.waitUntilElementIsVisible(rightChevron);
rightChevron.click();
return this;
};
this.clickOnVersionsTab = function() {
this.clickOnVersionsTab = function () {
this.clickRightChevronToGetToTab('Versions');
var versionsTab = element(by.cssContainingText("div[id*='mat-tab-label']", "Versions"));
Util.waitUntilElementIsVisible(versionsTab);
@@ -413,23 +468,276 @@ var ViewerToolbarPage = function () {
return this;
};
this.checkUploadVersionsButtonIsDisplayed = function() {
this.checkUploadVersionsButtonIsDisplayed = function () {
Util.waitUntilElementIsVisible(uploadNewVersionButton);
return this;
};
this.checkVersionIsDisplayed = function(version) {
this.checkVersionIsDisplayed = function (version) {
Util.waitUntilElementIsVisible(element(by.cssContainingText("h4[class*='adf-version-list-item-name']", version)));
return this;
};
this.clickOnCommentsTab = function() {
this.clickOnCommentsTab = function () {
var commentsTab = element(by.cssContainingText("div[id*='mat-tab-label']", "Comments"));
Util.waitUntilElementIsVisible(commentsTab);
commentsTab.click();
return this;
};
this.disableToolbar = function () {
Util.waitUntilElementIsVisible(toolbarSwitch);
toolbarSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') >= 0) {
toolbarSwitch.click();
}
});
}
this.enableToolbar = function () {
Util.waitUntilElementIsVisible(toolbarSwitch);
toolbarSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') < 0) {
toolbarSwitch.click();
}
});
}
this.checkToolbarIsDisplayed = function () {
Util.waitUntilElementIsVisible(toolbar);
return this;
};
this.checkToolbarIsNotDisplayed = function () {
Util.waitUntilElementIsNotVisible(toolbar);
return this;
};
this.disableGoBack = function () {
Util.waitUntilElementIsVisible(goBackSwitch);
goBackSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') >= 0) {
goBackSwitch.click();
}
});
}
this.enableGoBack = function () {
Util.waitUntilElementIsVisible(goBackSwitch);
goBackSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') < 0) {
goBackSwitch.click();
}
});
}
this.checkGoBackIsDisplayed = function () {
Util.waitUntilElementIsVisible(closeButton);
return this;
};
this.checkGoBackIsNotDisplayed = function () {
Util.waitUntilElementIsNotVisible(closeButton);
return this;
};
this.disableToolbarOptions = function () {
Util.waitUntilElementIsVisible(openWithSwitch);
openWithSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') >= 0) {
openWithSwitch.click();
}
});
}
this.enableToolbarOptions = function () {
Util.waitUntilElementIsVisible(openWithSwitch);
openWithSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') < 0) {
openWithSwitch.click();
}
});
}
this.checkToolbarOptionsIsDisplayed = function () {
Util.waitUntilElementIsVisible(openWith);
return this;
};
this.checkToolbarOptionsIsNotDisplayed = function () {
Util.waitUntilElementIsNotVisible(openWith);
return this;
};
this.disableDownload = function () {
Util.waitUntilElementIsVisible(downloadSwitch);
downloadSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') >= 0) {
downloadSwitch.click();
}
});
}
this.enableDownload = function () {
Util.waitUntilElementIsVisible(openWithSwitch);
downloadSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') < 0) {
downloadSwitch.click();
}
});
}
this.checkDownloadButtonDisplayed = function () {
Util.waitUntilElementIsVisible(downloadButton);
return this;
};
this.checkDownloadButtonIsNotDisplayed = function () {
Util.waitUntilElementIsNotVisible(downloadButton);
return this;
};
this.disablePrint = function () {
Util.waitUntilElementIsVisible(printSwitch);
printSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') >= 0) {
printSwitch.click();
}
});
}
this.enablePrint = function () {
Util.waitUntilElementIsVisible(printSwitch);
printSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') < 0) {
printSwitch.click();
}
});
}
this.checkPrintButtonIsDisplayed = function () {
Util.waitUntilElementIsVisible(printButton);
return this;
};
this.checkPrintButtonIsNotDisplayed = function () {
Util.waitUntilElementIsNotVisible(printButton);
return this;
};
this.disableShare = function () {
Util.waitUntilElementIsVisible(shareSwitch);
shareSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') >= 0) {
shareSwitch.click();
}
});
}
this.enableShare = function () {
Util.waitUntilElementIsVisible(shareSwitch);
shareSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') < 0) {
shareSwitch.click();
}
});
}
this.disableAllowSidebar = function () {
Util.waitUntilElementIsVisible(allowSidebarSwitch);
allowSidebarSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') >= 0) {
allowSidebarSwitch.click();
}
});
}
this.enableAllowSidebar = function () {
Util.waitUntilElementIsVisible(allowSidebarSwitch);
allowSidebarSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') < 0) {
allowSidebarSwitch.click();
}
});
}
this.checkShareButtonDisplayed = function () {
Util.waitUntilElementIsVisible(shareButton);
return this;
};
this.checkShareButtonIsNotDisplayed = function () {
Util.waitUntilElementIsNotVisible(shareButton);
return this;
};
this.checkMoreActionsDisplayed = function () {
Util.waitUntilElementIsVisible(bugButton);
Util.waitUntilElementIsVisible(timeButton);
Util.waitUntilElementIsVisible(uploadButton);
return this;
};
this.checkMoreActionsIsNotDisplayed = function () {
Util.waitUntilElementIsNotVisible(bugButton);
Util.waitUntilElementIsNotVisible(timeButton);
Util.waitUntilElementIsNotVisible(uploadButton);
return this;
};
this.disableMoreActions = function () {
Util.waitUntilElementIsVisible(moreActionsSwitch);
moreActionsSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') >= 0) {
moreActionsSwitch.click();
}
});
}
this.enableMoreActions = function () {
Util.waitUntilElementIsVisible(moreActionsSwitch);
moreActionsSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') < 0) {
moreActionsSwitch.click();
}
});
}
this.disableCustomName = function () {
Util.waitUntilElementIsVisible(customNameSwitch);
customNameSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') >= 0) {
customNameSwitch.click();
}
});
}
this.enableCustomName = function () {
Util.waitUntilElementIsVisible(customNameSwitch);
customNameSwitch.getAttribute('class').then((check) => {
if (check.indexOf('mat-checked') < 0) {
customNameSwitch.click();
}
});
}
this.clickToggleRightSidebar = function () {
Util.waitUntilElementIsVisible(showRightSidebarSwitch);
showRightSidebarSwitch.click();
}
this.clickToggleLeftSidebar = function () {
Util.waitUntilElementIsVisible(showLeftSidebarSwitch);
showLeftSidebarSwitch.click();
}
this.enterCustomName = function (text) {
const textField = element(by.css('input[data-automation-id="adf-text-custom-name"]'));
Util.waitUntilElementIsVisible(textField);
textField.sendKeys('');
textField.clear().sendKeys(text);
return this;
};
};
module.exports = ViewerToolbarPage;

62
lib/core/viewer/components/viewer.component.html
View File

@@ -1,20 +1,32 @@
<div *ngIf="showViewer"
class="adf-viewer-container"
[class.adf-viewer-overlay-container]="overlayMode"
[class.adf-viewer-inline-container]="!overlayMode">
class="adf-viewer-container"
[class.adf-viewer-overlay-container]="overlayMode"
[class.adf-viewer-inline-container]="!overlayMode">
<div class="adf-viewer-content" fxLayout="column">
<ng-content select="adf-viewer-toolbar"></ng-content>
<ng-container *ngIf="showToolbar && !toolbar">
<adf-toolbar color="default" class="adf-viewer-toolbar">
<adf-toolbar color="default" id="adf-viewer-toolbar" class="adf-viewer-toolbar">
<adf-toolbar-title>
<ng-container *ngIf="allowSidebar">
<button
mat-icon-button
title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
data-automation-id="adf-toolbar-left-sidebar"
[color]="showLeftSidebar ? 'accent' : 'default'"
(click)="toggleLeftSidebar()">
<mat-icon>info_outline</mat-icon>
</button>
</ng-container>
<button *ngIf="allowGoBack"
class="adf-viewer-close-button"
data-automation-id="adf-toolbar-back"
mat-icon-button
title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
(click)="onBackButtonClick()">
class="adf-viewer-close-button"
data-automation-id="adf-toolbar-back"
mat-icon-button
title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
(click)="onBackButtonClick()">
<mat-icon>close</mat-icon>
</button>
</adf-toolbar-title>
@@ -44,6 +56,7 @@
<ng-container *ngIf="mnuOpenWith" data-automation-id='adf-toolbar-custom-btn'>
<button
id="adf-viewer-openwith"
mat-button
[matMenuTriggerFor]="mnuOpenWith"
data-automation-id="adf-toolbar-open-with">
@@ -58,6 +71,7 @@
<adf-toolbar-divider></adf-toolbar-divider>
<button
id="adf-viewer-download"
*ngIf="allowDownload"
mat-icon-button
title="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}"
@@ -67,6 +81,7 @@
</button>
<button
id="adf-viewer-print"
*ngIf="allowPrint"
mat-icon-button
title="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}"
@@ -76,6 +91,7 @@
</button>
<button
id="adf-viewer-share"
*ngIf="allowShare"
mat-icon-button
title="{{ 'ADF_VIEWER.ACTIONS.SHARE' | translate }}"
@@ -85,6 +101,7 @@
</button>
<button
id="adf-viewer-fullscreen"
*ngIf="viewerType !== 'media' && allowFullScreen"
mat-icon-button
title="{{ 'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate }}"
@@ -95,6 +112,7 @@
<ng-container *ngIf="mnuMoreActions">
<button
id="adf-viewer-moreactions"
mat-icon-button
[matMenuTriggerFor]="mnuMoreActions"
title="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}"
@@ -117,15 +135,18 @@
(click)="toggleSidebar()">
<mat-icon>info_outline</mat-icon>
</button>
</ng-container>
</adf-toolbar>
</ng-container>
<div fxLayout="row" fxFlex="1 1 auto">
showSidebar 1 {{showSidebar}}
<ng-container *ngIf="allowSidebar && showSidebar">
<div class="adf-viewer__sidebar" [ngClass]="getSideBarStyle()" fxFlexOrder="{{sidebarPosition === 'left'? 1 : 4 }}">
showSidebar {{showSidebar}}
<div class="adf-viewer__sidebar" [ngClass]="'adf-viewer__sidebar__right'" fxFlexOrder="4" id="adf-right-sidebar" >
<ng-container *ngIf="sidebarTemplate">
<ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
</ng-container>
@@ -133,6 +154,15 @@
</div>
</ng-container>
<ng-container *ngIf="allowSidebar && showLeftSidebar">
<div class="adf-viewer__sidebar" [ngClass]="'adf-viewer__sidebar__left'" fxFlexOrder="1" id="adf-left-sidebar" >
<ng-container *ngIf="sidebarLeftTemplate">
<ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext"></ng-container>
</ng-container>
<ng-content *ngIf="!sidebarLeftTemplate" select="adf-viewer-sidebar"></ng-content>
</div>
</ng-container>
<div *ngIf="isLoading" class="adf-viewer-main" fxFlexOrder="{{sidebarPosition !== 'left'? 1 : 4}}" fxFlex="1 1 auto">
<div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
<div class="adf-viewer-content-container">
@@ -169,12 +199,12 @@
</ng-container>
<ng-container *ngSwitchCase="'in_creation'">
<div class="adf-viewer__loading-screen" fxFlex="1 1 auto">
<h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
<div>
<mat-spinner></mat-spinner>
</div>
</div>
<div class="adf-viewer__loading-screen" fxFlex="1 1 auto">
<h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
<div>
<mat-spinner></mat-spinner>
</div>
</div>
</ng-container>
<ng-container *ngSwitchCase="'custom'">

4
lib/core/viewer/components/viewer.component.scss
View File

@@ -11,6 +11,10 @@
.adf-viewer {
position: absolute;
width: 100%;
height: 100%;
.mat-toolbar {
color: mat-color($foreground, text, 0.54);
}

59
lib/core/viewer/components/viewer.component.spec.ts
View File

@@ -141,10 +141,10 @@ describe('ViewerComponent', () => {
{ provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
{
provide: RenditionsService, useValue: {
getRendition: () => {
return throwError('throwed');
getRendition: () => {
return throwError('throwed');
}
}
}
},
RenderingQueueServices,
{ provide: Location, useClass: SpyLocation }
@@ -178,14 +178,14 @@ describe('ViewerComponent', () => {
component.ngOnChanges({});
tick();
expect(alfrescoApiService.nodesApi.getNodeInfo).toHaveBeenCalledWith('id1', {include: [ 'allowableOperations' ]});
expect(alfrescoApiService.nodesApi.getNodeInfo).toHaveBeenCalledWith('id1', { include: ['allowableOperations'] });
expect(component.fileTitle).toBe('file1');
component.fileNodeId = 'id2';
component.ngOnChanges({});
tick();
expect(alfrescoApiService.nodesApi.getNodeInfo).toHaveBeenCalledWith('id2', {include: [ 'allowableOperations' ]});
expect(alfrescoApiService.nodesApi.getNodeInfo).toHaveBeenCalledWith('id2', { include: ['allowableOperations'] });
expect(component.fileTitle).toBe('file2');
}));
@@ -251,37 +251,44 @@ describe('ViewerComponent', () => {
it('should NOT display sidebar if is not allowed', () => {
component.showSidebar = true;
component.allowSidebar = false;
component.sidebarPosition = 'left';
fixture.detectChanges();
let sidebar = element.querySelector('.adf-viewer__sidebar');
expect(sidebar).toBeNull();
});
it('should display sidebar on the left side', () => {
component.showSidebar = true;
component.allowSidebar = true;
component.sidebarPosition = 'left';
fixture.detectChanges();
let sidebar = element.querySelector('.adf-viewer__sidebar');
expect(getComputedStyle(sidebar).order).toEqual('1');
fixture.whenStable().then(() => {
let sidebar = element.querySelector('#adf-right-sidebar');
expect(sidebar).toBeNull();
});
});
it('should display sidebar on the right side', () => {
component.showSidebar = true;
component.allowSidebar = true;
component.sidebarPosition = 'right';
fixture.detectChanges();
let sidebar = element.querySelector('.adf-viewer__sidebar');
expect(getComputedStyle(sidebar).order).toEqual('4');
fixture.whenStable().then(() => {
let sidebar = element.querySelector('#adf-right-sidebar');
expect(getComputedStyle(sidebar).order).toEqual('4');
});
});
it('should display sidebar on the right side as fallback', () => {
component.showSidebar = true;
component.allowSidebar = true;
component.sidebarPosition = 'unknown-value';
it('should NOT display left sidebar if is not allowed', () => {
component.showLeftSidebar = true;
component.allowSidebar = false;
fixture.detectChanges();
let sidebar = element.querySelector('.adf-viewer__sidebar');
expect(getComputedStyle(sidebar).order).toEqual('4');
fixture.whenStable().then(() => {
let sidebar = element.querySelector('#adf-left-sidebar');
expect(sidebar).toBeNull();
});
});
it('should display sidebar on the left side', () => {
component.showLeftSidebar = true;
fixture.detectChanges();
fixture.whenStable().then(() => {
let sidebar = element.querySelector('#adf-left-sidebar');
expect(getComputedStyle(sidebar).order).toEqual('4');
});
});
});

28
lib/core/viewer/components/viewer.component.ts
View File

@@ -114,6 +114,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
@Input()
allowPrint = false;
/** @deprecated 2.5.0 inkect the share button directive as custom button */
/** Toggles sharing. */
@Input()
allowShare = false;
@@ -144,18 +145,29 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
@Input()
allowThumbnails = true;
/** @deprecated 2.5.0 will be renamed showRightSidebar in 3.0.0 */
/** Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. */
@Input()
showSidebar = false;
/** Toggles left sidebar visibility. Requires `allowSidebar` to be set to `true`. */
@Input()
showLeftSidebar = false;
/** @deprecated 2.5.0 use sidebarTemplateLeft */
/** The position of the sidebar. Can be `left` or `right`. */
@Input()
sidebarPosition = 'right';
/** @deprecated 2.5.0 rename sidebarRight */
/** The template for the sidebar. The template context contains the loaded node data. */
@Input()
sidebarTemplate: TemplateRef<any> = null;
/** The template for the left sidebar. The template context contains the loaded node data. */
@Input()
sidebarLeftTemplate: TemplateRef<any> = null;
/** The template for the pdf thumbnails. */
@Input()
thumbnailsTemplate: TemplateRef<any> = null;
@@ -224,6 +236,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
otherMenu: any;
extension: string;
sidebarTemplateContext: { node: MinimalNodeEntryEntity } = { node: null };
sidebarLeftTemplateContext: { node: MinimalNodeEntryEntity } = { node: null };
fileTitle: string;
private cacheBusterNumber;
@@ -377,6 +390,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
this.extensionChange.emit(this.extension);
this.sidebarTemplateContext.node = data;
this.sidebarLeftTemplateContext.node = data;
this.scrollTop();
return setupNode;
@@ -413,6 +427,16 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
}
}
toggleLeftSidebar() {
this.showLeftSidebar = !this.showLeftSidebar;
if (this.showSidebar && this.nodeId) {
this.apiService.getInstance().nodes.getNodeInfo(this.nodeId, { include: ['allowableOperations'] })
.then((data: MinimalNodeEntryEntity) => {
this.sidebarLeftTemplateContext.node = data;
});
}
}
private getDisplayName(name) {
return this.displayName || name ;
}
@@ -724,10 +748,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
});
}
getSideBarStyle(): string {
return this.sidebarPosition === 'left' ? 'adf-viewer__sidebar__left' : 'adf-viewer__sidebar__right';
}
private generateCacheBusterNumber() {
this.cacheBusterNumber = Date.now();
}

11
lib/process-services/task-list/components/task-details.component.ts
View File

@@ -292,7 +292,6 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
*/
private loadDetails(taskId: string) {
this.taskPeople = [];
this.readOnlyForm = false;
this.taskFormName = null;
if (taskId) {
@@ -305,8 +304,10 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
this.taskDetails.name = 'No name';
}
let endDate: any = res.endDate;
this.readOnlyForm = this.readOnlyForm ? this.readOnlyForm : !!(endDate && !isNaN(endDate.getTime()));
if (endDate && !isNaN(endDate.getTime())) {
this.readOnlyForm = true;
}
if (this.taskDetails && this.taskDetails.involvedPeople) {
this.taskDetails.involvedPeople.forEach((user) => {
this.taskPeople.push(new UserProcessModel(user));
@@ -326,8 +327,8 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
isAssignedToMe(): boolean {
return this.isAssigned() && this.hasEmailAddress() ?
this.isEmailEqual(this.taskDetails.assignee.email, this.currentLoggedUser.email) :
this.isExternalIdEqual(this.taskDetails.assignee.externalId, this.currentLoggedUser.externalId);
this.isEmailEqual(this.taskDetails.assignee.email, this.currentLoggedUser.email) :
this.isExternalIdEqual(this.taskDetails.assignee.externalId, this.currentLoggedUser.externalId);
}
private isEmailEqual(assigneeMail, currentLoggedEmail): boolean {