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

[ADF-1751] Version manager POC (#2551)

Browse Source 
* First try

* Upload new versions

* Add versionComment

* Permission handling for sidebar also

* Add tests

* Fix rebase

* Add documentation
This commit is contained in:
Popovics András 2017-10-26 14:22:34 +01:00 committed by Eugenio Romano
parent e7e2007c93
commit 2588bbda7d
26 changed files with 753 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
demo-shell-ng2/src/app/app.module.ts
View File

@ -35,6 +35,7 @@ import { FileViewComponent } from './components/file-view/file-view.component';
import { WebscriptComponent } from './components/webscript/webscript.component'; import { WebscriptComponent } from './components/webscript/webscript.component';
import { TagComponent } from './components/tag/tag.component'; import { TagComponent } from './components/tag/tag.component';
import { SocialComponent } from './components/social/social.component'; import { SocialComponent } from './components/social/social.component';
import { VersionManagerDialogAdapterComponent } from './components/files/version-manager-dialog-adapter.component';
import { ThemePickerModule } from './components/theme-picker/theme-picker'; import { ThemePickerModule } from './components/theme-picker/theme-picker';
import { DebugAppConfigService } from './services/debug-app-config.service'; import { DebugAppConfigService } from './services/debug-app-config.service';
@ -67,7 +68,8 @@ import { routing } from './app.routes';
WebscriptComponent, WebscriptComponent,
TagComponent, TagComponent,
SocialComponent, SocialComponent,
CustomSourcesComponent CustomSourcesComponent,
VersionManagerDialogAdapterComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
@ -93,6 +95,9 @@ import { routing } from './app.routes';
} }
} }
], ],
entryComponents: [
VersionManagerDialogAdapterComponent
],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { export class AppModule {

470
demo-shell-ng2/src/app/components/files/files.component.html
View File

@ -3,230 +3,266 @@
<adf-sites-dropdown (change)="getSiteContent($event)"> <adf-sites-dropdown (change)="getSiteContent($event)">
</adf-sites-dropdown> </adf-sites-dropdown>
</div> </div>
<adf-upload-drag-area <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
[parentId]="getDocumentListCurrentFolderId()" <adf-upload-drag-area fxFlex="1 1 auto"
[versioning]="versioning" [parentId]="getDocumentListCurrentFolderId()"
[adf-node-permission]="'create'" [versioning]="versioning"
[adf-nodes]="getCurrentDocumentListNode()"> [adf-node-permission]="'create'"
<div *ngIf="errorMessage" class="error-message"> [adf-nodes]="getCurrentDocumentListNode()">
<button (click)="resetError()" mat-icon-button> <div *ngIf="errorMessage" class="error-message">
<mat-icon>highlight_off</mat-icon> <button (click)="resetError()" mat-icon-button>
</button> <mat-icon>highlight_off</mat-icon>
<span class="error-message--text">{{errorMessage}}</span>
</div>
<adf-toolbar [color]="toolbarColor" class="adf-files-toolbar">
<adf-toolbar-title fxFlex="0 1 auto">
<adf-breadcrumb fxShow fxHide.lt-sm="true"
class="files-breadcrumb"
root="Personal Files"
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-breadcrumb>
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
class="files-breadcrumb"
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-dropdown-breadcrumb>
</adf-toolbar-title>
<adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
<div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
<button mat-icon-button
(click)="onCreateFolderClicked($event)">
<mat-icon>create_new_folder</mat-icon>
</button>
<button mat-icon-button
[disabled]="!hasSelection(documentList.selection)"
title="Download"
(click)="downloadNodes(documentList.selection)">
<mat-icon>get_app</mat-icon>
</button>
<button mat-icon-button
adf-node-permission="delete"
[adf-nodes]="documentList.selection"
(delete)="documentList.reload()"
[adf-delete]="documentList.selection">
<mat-icon>delete</mat-icon>
</button>
<button mat-icon-button
#favorite="adfFavorite"
(toggle)="documentList.reload()"
[adf-node-favorite]="documentList.selection">
<mat-icon>
{{ favorite.hasFavorites() ? 'star' :'star_border' }}
</mat-icon>
</button> </button>
<span class="error-message--text">{{errorMessage}}</span>
</div> </div>
<adf-toolbar [color]="toolbarColor" class="adf-files-toolbar">
<adf-toolbar-title fxFlex="0 1 auto">
<adf-breadcrumb fxShow fxHide.lt-sm="true"
class="files-breadcrumb"
root="Personal Files"
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-breadcrumb>
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
class="files-breadcrumb"
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-dropdown-breadcrumb>
</adf-toolbar-title>
<button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker"> <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
<mat-icon>format_color_fill</mat-icon>
</button>
<mat-menu #themePicker="matMenu"> <div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
<button mat-menu-item (click)="toolbarColor = 'default'">Default</button> <button mat-icon-button
<button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button> (click)="onCreateFolderClicked($event)">
<button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button> <mat-icon>create_new_folder</mat-icon>
<button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button> </button>
</mat-menu> <button mat-icon-button
[disabled]="!hasSelection(documentList.selection)"
title="Download"
(click)="downloadNodes(documentList.selection)">
<mat-icon>get_app</mat-icon>
</button>
<button mat-icon-button
adf-node-permission="delete"
[adf-nodes]="documentList.selection"
(delete)="documentList.reload()"
[adf-delete]="documentList.selection">
<mat-icon>delete</mat-icon>
</button>
<button mat-icon-button
#favorite="adfFavorite"
(toggle)="documentList.reload()"
[adf-node-favorite]="documentList.selection">
<mat-icon>
{{ favorite.hasFavorites() ? 'star' :'star_border' }}
</mat-icon>
</button>
</div>
<adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider> <button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker">
<mat-icon>format_color_fill</mat-icon>
<button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item
(click)="onCreateFolderClicked($event)">
<mat-icon>create_new_folder</mat-icon>
<span>New folder</span>
</button> </button>
<button mat-menu-item
[disabled]="!hasSelection(documentList.selection)"
title="Download"
(click)="downloadNodes(documentList.selection)">
<mat-icon>get_app</mat-icon>
<span>Download</span>
</button>
<button mat-menu-item
adf-node-permission="delete"
[adf-nodes]="documentList.selection">
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
</mat-menu>
</adf-toolbar>
<adf-document-list
#documentList
[permissionsStyle]="permissionsStyle"
[currentFolderId]="currentFolderId"
[contextMenuActions]="true"
[contentActions]="true"
[allowDropFiles]="true"
[selectionMode]="selectionMode"
[multiselect]="multiselect"
(error)="onNavigationError($event)"
(success)="resetError()"
(preview)="showFile($event)"
(folderChange)="onFolderChange($event)"
(permissionError)="handlePermissionError($event)">
<data-columns>
<data-column
key="$thumbnail"
type="image"
[sortable]="false"
class="image-table-cell">
</data-column>
<data-column
key="name"
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
[formatTooltip]="getNodeNameTooltip"
class="full-width ellipsis-cell">
</data-column>
<!-- Location column demo -->
<!--
<data-column
key="path"
type="location"
format="/files"
title="Location">
</data-column>
-->
<data-column
key="content.sizeInBytes"
title="Size"
type="fileSize">
</data-column>
<!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
<!--
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
key="id"
class="full-width ellipsis-cell">
<ng-template let-entry="$implicit">
<alfresco-tag-node-list [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
</ng-template>
</data-column>
-->
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
class="desktop-only">
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
key="createdAt"
type="date"
format="timeAgo"
class="desktop-only">
</data-column>
</data-columns>
<content-actions> <mat-menu #themePicker="matMenu">
<!-- folder actions --> <button mat-menu-item (click)="toolbarColor = 'default'">Default</button>
<content-action <button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
icon="content_copy" <button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
target="folder" <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.COPY' | translate}}" </mat-menu>
permission="update"
[disableWithNoPermission]="true" <button mat-icon-button (click)="showVersions = !showVersions">
(error)="onContentActionError($event)" <mat-icon *ngIf="!showVersions">chevron_left</mat-icon>
(success)="onContentActionSuccess($event)" <mat-icon *ngIf="showVersions">chevron_right</mat-icon>
handler="copy"> </button>
</content-action>
<content-action <adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
icon="redo"
target="folder" <button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.MOVE' | translate}}" <mat-icon>more_vert</mat-icon>
permission="update" </button>
[disableWithNoPermission]="true" <mat-menu #menu="matMenu">
(error)="onContentActionError($event)" <button mat-menu-item
(success)="onContentActionSuccess($event)" (click)="onCreateFolderClicked($event)">
handler="move"> <mat-icon>create_new_folder</mat-icon>
</content-action> <span>New folder</span>
<content-action </button>
icon="delete" <button mat-menu-item
target="folder" [disabled]="!hasSelection(documentList.selection)"
permission="delete" title="Download"
[disableWithNoPermission]="true" (click)="downloadNodes(documentList.selection)">
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}" <mat-icon>get_app</mat-icon>
(permissionEvent)="handlePermissionError($event)" <span>Download</span>
handler="delete"> </button>
</content-action> <button mat-menu-item
<!-- document actions --> adf-node-permission="delete"
<content-action [adf-nodes]="documentList.selection">
icon="content_copy" <mat-icon>delete</mat-icon>
target="document" <span>Delete</span>
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.COPY' | translate}}" </button>
permission="update" </mat-menu>
[disableWithNoPermission]="true" </adf-toolbar>
(error)="onContentActionError($event)" <adf-document-list
(success)="onContentActionSuccess($event)" #documentList
handler="copy"> [permissionsStyle]="permissionsStyle"
</content-action> [currentFolderId]="currentFolderId"
<content-action [contextMenuActions]="true"
icon="redo" [contentActions]="true"
target="document" [allowDropFiles]="true"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.MOVE' | translate}}" [selectionMode]="selectionMode"
permission="update" [multiselect]="multiselect"
[disableWithNoPermission]="true" (error)="onNavigationError($event)"
(error)="onContentActionError($event)" (success)="resetError()"
(success)="onContentActionSuccess($event)" (preview)="showFile($event)"
handler="move"> (folderChange)="onFolderChange($event)"
</content-action> (permissionError)="handlePermissionError($event)">
<content-action <data-columns>
icon="delete" <data-column
target="document" key="$thumbnail"
permission="delete" type="image"
[disableWithNoPermission]="true" [sortable]="false"
(permissionEvent)="handlePermissionError($event)" class="image-table-cell">
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}" </data-column>
(success)="onDeleteActionSuccess($event)" <data-column
handler="delete"> key="name"
</content-action> title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
</content-actions> [formatTooltip]="getNodeNameTooltip"
</adf-document-list> class="full-width ellipsis-cell">
</adf-upload-drag-area> </data-column>
<!-- Location column demo -->
<!--
<data-column
key="path"
type="location"
format="/files"
title="Location">
</data-column>
-->
<data-column
key="content.sizeInBytes"
title="Size"
type="fileSize">
</data-column>
<!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
<!--
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
key="id"
class="full-width ellipsis-cell">
<ng-template let-entry="$implicit">
<alfresco-tag-node-list [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
</ng-template>
</data-column>
-->
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
class="desktop-only">
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
key="createdAt"
type="date"
format="timeAgo"
class="desktop-only">
</data-column>
</data-columns>
<content-actions>
<!-- folder actions -->
<content-action
icon="content_copy"
target="folder"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.COPY' | translate}}"
permission="update"
[disableWithNoPermission]="true"
(error)="onContentActionError($event)"
(success)="onContentActionSuccess($event)"
handler="copy">
</content-action>
<content-action
icon="redo"
target="folder"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.MOVE' | translate}}"
permission="update"
[disableWithNoPermission]="true"
(error)="onContentActionError($event)"
(success)="onContentActionSuccess($event)"
handler="move">
</content-action>
<content-action
icon="delete"
target="folder"
permission="delete"
[disableWithNoPermission]="true"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
(permissionEvent)="handlePermissionError($event)"
handler="delete">
</content-action>
<!-- document actions -->
<content-action
icon="content_copy"
target="document"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.COPY' | translate}}"
permission="update"
[disableWithNoPermission]="true"
(error)="onContentActionError($event)"
(success)="onContentActionSuccess($event)"
handler="copy">
</content-action>
<content-action
icon="redo"
target="document"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.MOVE' | translate}}"
permission="update"
[disableWithNoPermission]="true"
(error)="onContentActionError($event)"
(success)="onContentActionSuccess($event)"
handler="move">
</content-action>
<content-action
icon="storage"
target="document"
title="Manage versions..."
(execute)="onManageVersions($event)">
</content-action>
<content-action
icon="delete"
target="document"
permission="delete"
[disableWithNoPermission]="true"
(permissionEvent)="handlePermissionError($event)"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
(success)="onDeleteActionSuccess($event)"
handler="delete">
</content-action>
</content-actions>
</adf-document-list>
</adf-upload-drag-area>
<adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
<div info-drawer-content>
<ng-container *ngIf="hasOneFileSelected();else choose_document_template">
<ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions">
<adf-version-manager
[node]="documentList.selection[0].entry">
</adf-version-manager>
</ng-container>
</ng-container>
<ng-template #choose_document_template>
<div class="adf-manage-versions-empty">
<mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
Please choose a document to see the versions of it.
</div>
</ng-template>
<ng-template #no_permission_to_versions>
<div class="adf-manage-versions-no-permission">
<mat-icon class="adf-manage-versions-no-permission-icon">warning</mat-icon>
You don't have permission to manage the versions of this content.
</div>
</ng-template>
</div>
</adf-info-drawer-layout>
</div>
</div> </div>
<context-menu-holder></context-menu-holder> <context-menu-holder></context-menu-holder>

39
demo-shell-ng2/src/app/components/files/files.component.scss
View File

@ -74,6 +74,45 @@ adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell::befo
} }
} }
.adf-manage-versions-sidebar {
width: 300px;
color: rgba(0, 0, 0, 0.87);
.adf-manage-versions-empty,
.adf-manage-versions-no-permission {
margin: 24px;
color: grey;
text-align: justify;
&-icon {
display: block;
font-size: 48px;
margin: 0 auto 32px auto;
}
}
& ::ng-deep .adf-info-drawer-layout-header {
display: none;
}
& ::ng-deep .adf-info-drawer-layout-content {
padding: 0;
.adf-version-upload,
.adf-new-version-file-upload {
width: 100%;
& .mat-raised-button {
width: 100%;
}
}
.adf-new-version-uploader-container {
padding: 8px 24px 16px 24px;
}
}
}
@media (max-width: $minimumDocumentListWidth) { @media (max-width: $minimumDocumentListWidth) {
adf-document-list ::ng-deep adf-datatable { adf-document-list ::ng-deep adf-datatable {
& ::ng-deep .adf-data-table-cell--fileSize { & ::ng-deep .adf-data-table-cell--fileSize {

24
demo-shell-ng2/src/app/components/files/files.component.ts
View File

@ -26,6 +26,7 @@ import {
} from 'ng2-alfresco-core'; } from 'ng2-alfresco-core';
import { DataColumn, DataRow } from 'ng2-alfresco-datatable'; import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist'; import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
const DEFAULT_FOLDER_TO_SHOW = '-my-'; const DEFAULT_FOLDER_TO_SHOW = '-my-';
@ -41,6 +42,7 @@ export class FilesComponent implements OnInit {
errorMessage: string = null; errorMessage: string = null;
fileNodeId: any; fileNodeId: any;
showViewer: boolean = false; showViewer: boolean = false;
showVersions: boolean = false;
toolbarColor = 'default'; toolbarColor = 'default';
@ -211,6 +213,17 @@ export class FilesComponent implements OnInit {
}); });
} }
onManageVersions(event) {
const contentEntry = event.value.entry;
if (this.contentService.hasPermission(contentEntry, 'update')) {
this.dialog.open(VersionManagerDialogAdapterComponent, { data: { contentEntry }, panelClass: 'adf-version-manager-dialog', width: '630px' });
} else {
const translatedErrorMessage: any = this.translateService.get('OPERATION.ERROR.PERMISSION');
this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
}
}
getSiteContent(site: SiteModel) { getSiteContent(site: SiteModel) {
this.currentFolderId = site && site.guid ? site.guid : DEFAULT_FOLDER_TO_SHOW; this.currentFolderId = site && site.guid ? site.guid : DEFAULT_FOLDER_TO_SHOW;
} }
@ -223,6 +236,17 @@ export class FilesComponent implements OnInit {
return selection && selection.length > 0; return selection && selection.length > 0;
} }
hasOneFileSelected(): boolean {
const selection: Array<MinimalNodeEntity> = this.documentList.selection;
const hasOneFileSelected = selection && selection.length === 1 && selection[0].entry.isFile;
return hasOneFileSelected;
}
userHasPermissionToManageVersions(): boolean {
const selection: Array<MinimalNodeEntity> = this.documentList.selection;
return this.contentService.hasPermission(selection[0].entry, 'update');
}
downloadNodes(selection: Array<MinimalNodeEntity>) { downloadNodes(selection: Array<MinimalNodeEntity>) {
if (!selection || selection.length === 0) { if (!selection || selection.length === 0) {
return; return;

7
demo-shell-ng2/src/app/components/files/version-manager-dialog-adapter.component.html Normal file
View File

@ -0,0 +1,7 @@
<header mat-dialog-title>Manage versions</header>
<section mat-dialog-content>
<adf-version-manager [node]="contentEntry"></adf-version-manager>
</section>
<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
<button mat-button (click)="close($event)">Close</button>
</footer>

38
demo-shell-ng2/src/app/components/files/version-manager-dialog-adapter.component.ts Normal file
View File

@ -0,0 +1,38 @@
/*!
* @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 { Component, Inject, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
@Component({
templateUrl: './version-manager-dialog-adapter.component.html',
encapsulation: ViewEncapsulation.None
})
export class VersionManagerDialogAdapterComponent {
public contentEntry: MinimalNodeEntryEntity;
constructor(@Inject(MAT_DIALOG_DATA) data: any,
private containingDialog?: MatDialogRef<VersionManagerDialogAdapterComponent>) {
this.contentEntry = data.contentEntry;
}
close() {
this.containingDialog.close();
}
}

1
docs/README.md
View File

@ -422,6 +422,7 @@ for more information about installing and using the source code.
- [Document list component](document-list.component.md) - [Document list component](document-list.component.md)
- [Sites dropdown component](sites-dropdown.component.md) - [Sites dropdown component](sites-dropdown.component.md)
- [*Content node selector component](../ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts) - [*Content node selector component](../ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts)
- [Version Manager Component](version-manager.component.md)
### Models ### Models

BIN
docs/docassets/images/version-manager.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

1
docs/seeAlsoGraph.json
View File

@ -38,6 +38,7 @@
"nodes-api.service" "nodes-api.service"
], ],
"dropdown-breadcrumb.component": ["document-list.component", "breadcrumb.component"], "dropdown-breadcrumb.component": ["document-list.component", "breadcrumb.component"],
"version-manager": ["document-list.component"],
"extensibility": [], "extensibility": [],
"file-uploading-dialog.component": [], "file-uploading-dialog.component": [],
"folder-actions.service": ["document-actions.service"], "folder-actions.service": ["document-actions.service"],

25
docs/version-manager.component.md Normal file
View File

@ -0,0 +1,25 @@
# Version Manager Component
The Version manager component displays the version history of a node with the ability to upload a new version.
![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `This component is still in experimental phase, it has several limitations which will be resolved soon.`
![Breadcrumb](docassets/images/version-manager.png)
## Basic Usage
```html
<adf-version-manager [node]="aMinimalNodeEntryEntity"></adf-version-manager>
```
### Properties
| Name | Type | Description |
| --- | --- | --- |
| node | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | The node you want to see the version history of. |
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
<!-- seealso end -->

7
ng2-components/ng2-alfresco-core/src/services/alfresco-api.service.ts
View File

@ -18,7 +18,8 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { import {
AlfrescoApi, ContentApi, FavoritesApi, NodesApi, AlfrescoApi, ContentApi, FavoritesApi, NodesApi,
PeopleApi, RenditionsApi, SharedlinksApi, SitesApi PeopleApi, RenditionsApi, SharedlinksApi, SitesApi,
VersionsApi
} from 'alfresco-js-api'; } from 'alfresco-js-api';
import * as alfrescoApi from 'alfresco-js-api'; import * as alfrescoApi from 'alfresco-js-api';
import { AppConfigService } from './app-config.service'; import { AppConfigService } from './app-config.service';
@ -65,6 +66,10 @@ export class AlfrescoApiService {
return this.getInstance().search.searchApi; return this.getInstance().search.searchApi;
} }
get versionsApi(): VersionsApi {
return this.getInstance().core.versionsApi;
}
constructor(private appConfig: AppConfigService, constructor(private appConfig: AppConfigService,
private storage: StorageService) { private storage: StorageService) {

14
ng2-components/ng2-alfresco-documentlist/index.ts
View File

@ -16,8 +16,10 @@
*/ */
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core'; import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable'; import { DataTableModule } from 'ng2-alfresco-datatable';
import { UploadModule } from 'ng2-alfresco-upload';
import { BreadcrumbComponent } from './src/components/breadcrumb/breadcrumb.component'; import { BreadcrumbComponent } from './src/components/breadcrumb/breadcrumb.component';
import { DropdownBreadcrumbComponent } from './src/components/breadcrumb/dropdown-breadcrumb.component'; import { DropdownBreadcrumbComponent } from './src/components/breadcrumb/dropdown-breadcrumb.component';
@ -29,6 +31,9 @@ import { ContentNodeSelectorComponent } from './src/components/content-node-sele
import { DocumentListComponent } from './src/components/document-list.component'; import { DocumentListComponent } from './src/components/document-list.component';
import { EmptyFolderContentDirective } from './src/components/empty-folder/empty-folder-content.directive'; import { EmptyFolderContentDirective } from './src/components/empty-folder/empty-folder-content.directive';
import { DropdownSitesComponent } from './src/components/site-dropdown/sites-dropdown.component'; import { DropdownSitesComponent } from './src/components/site-dropdown/sites-dropdown.component';
import { VersionListComponent } from './src/components/version-manager/version-list.component';
import { VersionManagerComponent } from './src/components/version-manager/version-manager.component';
import { VersionUploadComponent } from './src/components/version-manager/version-upload.component';
import { MaterialModule } from './src/material.module'; import { MaterialModule } from './src/material.module';
import { ContentNodeSelectorService } from './src/components/content-node-selector/content-node-selector.service'; import { ContentNodeSelectorService } from './src/components/content-node-selector/content-node-selector.service';
@ -75,7 +80,10 @@ export const DOCUMENT_LIST_DIRECTIVES: any[] = [
BreadcrumbComponent, BreadcrumbComponent,
DropdownSitesComponent, DropdownSitesComponent,
DropdownBreadcrumbComponent, DropdownBreadcrumbComponent,
ContentNodeSelectorComponent ContentNodeSelectorComponent,
VersionListComponent,
VersionUploadComponent,
VersionManagerComponent
]; ];
export const DOCUMENT_LIST_PROVIDERS: any[] = [ export const DOCUMENT_LIST_PROVIDERS: any[] = [
@ -89,8 +97,10 @@ export const DOCUMENT_LIST_PROVIDERS: any[] = [
@NgModule({ @NgModule({
imports: [ imports: [
CoreModule, CoreModule,
UploadModule,
DataTableModule, DataTableModule,
MaterialModule MaterialModule,
FlexLayoutModule
], ],
declarations: [ declarations: [
...DOCUMENT_LIST_DIRECTIVES ...DOCUMENT_LIST_DIRECTIVES

1
ng2-components/ng2-alfresco-documentlist/package.json
View File

@ -47,6 +47,7 @@
"@angular/common": "4.4.5", "@angular/common": "4.4.5",
"@angular/compiler": "4.4.5", "@angular/compiler": "4.4.5",
"@angular/core": "4.4.5", "@angular/core": "4.4.5",
"@angular/flex-layout": "2.0.0-beta.9",
"@angular/forms": "4.4.5", "@angular/forms": "4.4.5",
"@angular/http": "4.4.5", "@angular/http": "4.4.5",
"@angular/material": "2.0.0-beta.12", "@angular/material": "2.0.0-beta.12",

1
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
View File

@ -35,7 +35,6 @@ import { NodeMinimal, NodeMinimalEntry, NodePaging } from '../models/document-li
import { ImageResolver } from './../data/image-resolver.model'; import { ImageResolver } from './../data/image-resolver.model';
import { RowFilter } from './../data/row-filter.model'; import { RowFilter } from './../data/row-filter.model';
import { DocumentListService } from './../services/document-list.service'; import { DocumentListService } from './../services/document-list.service';
import { DocumentListComponent } from './document-list.component'; import { DocumentListComponent } from './document-list.component';

23
ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.html Normal file
View File

@ -0,0 +1,23 @@
<mat-list class="adf-version-list" *ngIf="!isLoading; else loading_template">
<mat-list-item *ngFor="let version of versions">
<mat-icon mat-list-icon>insert_drive_file</mat-icon>
<h4 mat-line class="adf-version-list-item-name">{{version.entry.name}}</h4>
<p mat-line>
<span class="adf-version-list-item-version">{{version.entry.id}}</span> -
<span class="adf-version-list-item-date">{{version.entry.modifiedAt | date}}</span>
</p>
<p mat-line class="adf-version-list-item-comment">{{version.entry.versionComment}}</p>
<mat-menu #versionMenu="matMenu" yPosition="below" xPosition="before">
<button mat-menu-item (click)="restore(version.entry.id)"> Restore </button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="versionMenu">
<mat-icon>more_vert</mat-icon>
</button>
</mat-list-item>
</mat-list>
<ng-template #loading_template>
<mat-progress-bar data-automation-id="version-history-loading-bar" mode="indeterminate" color="accent"></mat-progress-bar>
</ng-template>

17
ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.scss Normal file
View File

@ -0,0 +1,17 @@
.adf-version-list {
.mat-list-item {
border-bottom:1px solid #d8d8d8;
}
&-item-version {
font-weight: bold;
}
&-item-date {
opacity: 0.6;
}
&-item-comment {
opacity: 0.5;
}
}

135
ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.spec.ts Normal file
View File

@ -0,0 +1,135 @@
/*!
* @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 { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { AlfrescoApiService, CoreModule } from 'ng2-alfresco-core';
import { MaterialModule } from '../../material.module';
import { VersionListComponent } from './version-list.component';
describe('VersionListComponent', () => {
let component: VersionListComponent;
let fixture: ComponentFixture<VersionListComponent>;
let element: DebugElement;
const nodeId = 'test-id';
const versionId = '1.0';
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
CoreModule,
MaterialModule
],
declarations: [
VersionListComponent
],
providers: [
AlfrescoApiService
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
}));
afterEach(() => {
fixture.destroy();
TestBed.resetTestingModule();
});
beforeEach(() => {
fixture = TestBed.createComponent(VersionListComponent);
element = fixture.debugElement;
component = fixture.componentInstance;
component.id = nodeId;
});
describe('Version history fetching', () => {
it('should use loading bar', () => {
let loadingProgressBar = fixture.debugElement.query(By.css('[data-automation-id="version-history-loading-bar"]'));
expect(loadingProgressBar).toBeNull();
component.ngOnChanges();
fixture.detectChanges();
loadingProgressBar = fixture.debugElement.query(By.css('[data-automation-id="version-history-loading-bar"]'));
expect(loadingProgressBar).not.toBeNull();
});
it('should load the versions for a given id', () => {
const alfrescoApiService = TestBed.get(AlfrescoApiService);
spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.callThrough();
component.ngOnChanges();
fixture.detectChanges();
expect(alfrescoApiService.versionsApi.listVersionHistory).toHaveBeenCalledWith(nodeId);
});
it('should show the versions after loading', () => {
fixture.detectChanges();
const alfrescoApiService = TestBed.get(AlfrescoApiService);
spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.callFake(() => {
return Promise.resolve([
{
entry: { name: 'test-file-name', id: '1.0', versionComment: 'test-version-comment' }
}
]);
});
component.ngOnChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
let versionFileName = fixture.debugElement.query(By.css('.adf-version-list-item-name')).nativeElement.innerText;
let versionIdText = fixture.debugElement.query(By.css('.adf-version-list-item-version')).nativeElement.innerText;
let versionComment = fixture.debugElement.query(By.css('.adf-version-list-item-comment')).nativeElement.innerText;
expect(versionFileName).toBe('test-file-name');
expect(versionIdText).toBe('1.0');
expect(versionComment).toBe('test-version-comment');
});
});
});
describe('Version restoring', () => {
it('should load the versions for a given id', () => {
fixture.detectChanges();
const alfrescoApiService = TestBed.get(AlfrescoApiService);
spyOn(alfrescoApiService.versionsApi, 'revertVersion').and.callThrough();
component.restore(versionId);
expect(alfrescoApiService.versionsApi.revertVersion).toHaveBeenCalledWith(nodeId, versionId, { majorVersion: true, comment: ''});
});
it('should reload the version list after a version restore', () => {
fixture.detectChanges();
const alfrescoApiService = TestBed.get(AlfrescoApiService);
spyOn(alfrescoApiService.versionsApi, 'listVersionHistory').and.callThrough();
spyOn(alfrescoApiService.versionsApi, 'revertVersion').and.callFake(() => Promise.resolve());
component.restore(versionId);
fixture.whenStable().then(() => {
expect(alfrescoApiService.versionsApi.listVersionHistory).toHaveBeenCalledTimes(1);
});
});
});
});

61
ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-list.component.ts Normal file
View File

@ -0,0 +1,61 @@
/*!
* @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 { Component, Input, OnChanges, ViewEncapsulation } from '@angular/core';
import { VersionsApi } from 'alfresco-js-api';
import { AlfrescoApiService } from 'ng2-alfresco-core';
@Component({
selector: 'adf-version-list',
templateUrl: './version-list.component.html',
styleUrls: ['./version-list.component.scss'],
encapsulation: ViewEncapsulation.None,
host: {
'class': 'adf-version-list'
}
})
export class VersionListComponent implements OnChanges {
private versionsApi: VersionsApi;
versions: any = [];
isLoading: boolean = true;
@Input()
id: string;
constructor(private alfrescoApi: AlfrescoApiService) {
this.versionsApi = this.alfrescoApi.versionsApi;
}
ngOnChanges() {
this.loadVersionHistory();
}
restore(versionId) {
this.versionsApi
.revertVersion(this.id, versionId, { majorVersion: true, comment: ''})
.then(this.loadVersionHistory.bind(this));
}
private loadVersionHistory() {
this.isLoading = true;
this.versionsApi.listVersionHistory(this.id).then((data) => {
this.versions = data.list.entries;
this.isLoading = false;
});
}
}

6
ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-manager.component.html Normal file
View File

@ -0,0 +1,6 @@
<div class="adf-new-version-uploader-container" fxLayout="row" fxLayoutAlign="end center">
<adf-version-upload [node]="node"></adf-version-upload>
</div>
<div class="adf-version-list-container">
<adf-version-list [id]="node.id"></adf-version-list>
</div>

8
ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-manager.component.scss Normal file
View File

@ -0,0 +1,8 @@
.adf-button.upload-new-version {
box-shadow: none;
}
.adf-new-version-uploader-container {
border-bottom:1px solid #d8d8d8;
padding: 16px 0;
}

31
ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-manager.component.ts Normal file
View File

@ -0,0 +1,31 @@
/*!
* @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 { Component, Input, ViewEncapsulation } from '@angular/core';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
@Component({
selector: 'adf-version-manager',
templateUrl: './version-manager.component.html',
styleUrls: ['./version-manager.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class VersionManagerComponent {
@Input()
node: MinimalNodeEntryEntity;
}

8
ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-upload.component.html Normal file
View File

@ -0,0 +1,8 @@
<adf-upload-button
data-automation-id="adf-new-version-file-upload"
class="adf-new-version-file-upload"
staticTitle="Upload new version"
[rootFolderId]="node.parentId"
tooltip="Restriction: upload file with the same name to create a new version of it"
[versioning]="true">
</adf-upload-button>

33
ng2-components/ng2-alfresco-documentlist/src/components/version-manager/version-upload.component.ts Normal file
View File

@ -0,0 +1,33 @@
/*!
* @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 { Component, Input, ViewEncapsulation } from '@angular/core';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
@Component({
selector: 'adf-version-upload',
templateUrl: './version-upload.component.html',
encapsulation: ViewEncapsulation.None,
host: {
'class': 'adf-version-upload'
}
})
export class VersionUploadComponent {
@Input()
node: MinimalNodeEntryEntity;
}

2
ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.spec.ts
View File

@ -20,8 +20,8 @@ import { CoreModule } from 'ng2-alfresco-core';
import { DataColumn, DataRow, DataSorting } from 'ng2-alfresco-datatable'; import { DataColumn, DataRow, DataSorting } from 'ng2-alfresco-datatable';
import { FileNode, FolderNode } from './../assets/document-library.model.mock'; import { FileNode, FolderNode } from './../assets/document-library.model.mock';
import { DocumentListService } from './../services/document-list.service'; import { DocumentListService } from './../services/document-list.service';
import { ShareDataTableAdapter } from './share-datatable-adapter';
import { ShareDataRow } from './share-data-row.model'; import { ShareDataRow } from './share-data-row.model';
import { ShareDataTableAdapter } from './share-datatable-adapter';
describe('ShareDataTableAdapter', () => { describe('ShareDataTableAdapter', () => {

2
ng2-components/ng2-alfresco-documentlist/src/material.module.ts
View File

@ -21,6 +21,7 @@ import {
MatDialogModule, MatDialogModule,
MatIconModule, MatIconModule,
MatInputModule, MatInputModule,
MatListModule,
MatMenuModule, MatMenuModule,
MatOptionModule, MatOptionModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
@ -34,6 +35,7 @@ export function modules() {
MatDialogModule, MatDialogModule,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
MatListModule,
MatInputModule, MatInputModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
MatSelectModule, MatSelectModule,

17
ng2-components/ng2-alfresco-login/src/material.module.ts
View File

@ -18,9 +18,15 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { import {
MatCheckboxModule, MatCheckboxModule,
MatDialogModule,
MatIconModule, MatIconModule,
MatInputModule, MatInputModule,
MatProgressSpinnerModule MatListModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatSelectModule,
MatSidenavModule,
MatSlideToggleModule
} from '@angular/material'; } from '@angular/material';
export function modules() { export function modules() {
@ -28,7 +34,14 @@ export function modules() {
MatCheckboxModule, MatCheckboxModule,
MatIconModule, MatIconModule,
MatInputModule, MatInputModule,
MatProgressSpinnerModule MatProgressSpinnerModule,
MatSlideToggleModule,
MatInputModule,
MatSelectModule,
MatListModule,
MatDialogModule,
MatSidenavModule,
MatProgressBarModule
]; ];
} }