[ACA-1221] Files versions manager (#247)

* [ACA-1221] Integrate the component as it currently is on ADF.

add versions as a modal

* refactor scss file

* remove permission check from directive

* emit event on node type error

src/app/common/common.module.ts

@@ -39,10 +39,12 @@ import { NodeRestoreDirective } from './directives/node-restore.directive';
 import { NodePermanentDeleteDirective } from './directives/node-permanent-delete.directive';
 import { NodeUnshareDirective } from './directives/node-unshare.directive';
 import { NodeInfoDirective} from './directives/node-info.directive';
+import { NodeVersionsDirective} from './directives/node-versions.directive';
 
 import { ContentManagementService } from './services/content-management.service';
 import { BrowsingFilesService } from './services/browsing-files.service';
 import { NodeActionsService } from './services/node-actions.service';
+import { VersionManagerDialogAdapterComponent } from '../components/versions-dialog/version-manager-dialog-adapter.component';
 
 export function modules() {
     return [
@@ -63,7 +65,9 @@ export function declarations() {
         NodeRestoreDirective,
         NodePermanentDeleteDirective,
         NodeUnshareDirective,
-        NodeInfoDirective
+        NodeInfoDirective,
+        NodeVersionsDirective,
+        VersionManagerDialogAdapterComponent
     ];
 }
 
@@ -79,7 +83,9 @@ export function providers() {
 @NgModule({
     imports: modules(),
     declarations: declarations(),
-    entryComponents: [],
+    entryComponents: [
+        VersionManagerDialogAdapterComponent
+    ],
     providers: providers(),
     exports: [
         ...modules(),

src/app/common/directives/node-versions.directive.ts

@@ -0,0 +1,70 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
+
+import { TranslationService, NotificationService } from '@alfresco/adf-core';
+import { MinimalNodeEntity } from 'alfresco-js-api';
+
+import { VersionManagerDialogAdapterComponent } from '../../components/versions-dialog/version-manager-dialog-adapter.component';
+import { MatDialog } from '@angular/material';
+
+@Directive({
+    selector: '[app-node-versions]'
+})
+export class NodeVersionsDirective {
+
+    @Input('app-node-versions')
+    selection: MinimalNodeEntity[];
+
+    @Output()
+    nodeVersionError: EventEmitter<any> = new EventEmitter();
+
+    @HostListener('click')
+    onClick() {
+        this.onManageVersions();
+    }
+
+    constructor(
+        private dialog: MatDialog,
+        private notification: NotificationService,
+        private translation: TranslationService
+    ) {}
+
+    onManageVersions() {
+        const contentEntry = this.selection[this.selection.length - 1].entry;
+
+        if (contentEntry.isFile) {
+            this.dialog.open(
+                VersionManagerDialogAdapterComponent,
+                <any>{ data: { contentEntry }, panelClass: 'adf-version-manager-dialog', width: '630px' });
+        } else {
+            const translatedErrorMessage: any = this.translation.get('APP.MESSAGES.ERRORS.PERMISSION');
+            this.notification.openSnackMessage(translatedErrorMessage.value, 4000);
+
+            this.nodeVersionError.emit();
+        }
+    }
+}

src/app/components/files/files.component.html

@@ -82,6 +82,14 @@
                     <mat-icon>delete</mat-icon>
                     <span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
                 </button>
+
+                <button
+                    mat-menu-item
+                    *ngIf="canManageVersions(documentList.selection)"
+                    [app-node-versions]="documentList.selection">
+                    <mat-icon>storage</mat-icon>
+                    <span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
+                </button>
             </mat-menu>
         </adf-toolbar>
     </div>

src/app/components/page.component.ts

@@ -136,6 +136,15 @@ export abstract class PageComponent {
         return this.isFileSelected(selection);
     }
 
+    canManageVersions(selection: Array<MinimalNodeEntity>): boolean {
+        const lastItem = selection.length && selection[selection.length - 1].entry;
+        return lastItem && lastItem.isFile && this.userHasPermissionToManageVersions(lastItem);
+    }
+
+    userHasPermissionToManageVersions(nodeEntry): boolean {
+        return this.nodeHasPermission(nodeEntry, 'update');
+    }
+
     nodeHasPermission(node: MinimalNodeEntryEntity, permission: string): boolean {
         if (node && permission) {
             const { allowableOperations = [] } = <any>(node || {});

src/app/components/versions-dialog/version-manager-dialog-adapter.component.html

@@ -0,0 +1,9 @@
+<div class="version-manager-dialog-adapter">
+    <header mat-dialog-title>{{'VERSION.DIALOG.TITLE' | translate}}</header>
+    <section mat-dialog-content>
+        <adf-version-manager [node]="contentEntry" (uploadError)="uploadError($event)"></adf-version-manager>
+    </section>
+    <footer mat-dialog-actions>
+        <button mat-button (click)="close()">{{'VERSION.DIALOG.CLOSE' | translate}}</button>
+    </footer>
+</div>

src/app/components/versions-dialog/version-manager-dialog-adapter.component.scss

@@ -0,0 +1,52 @@
+.adf-version-manager-dialog {
+    .mat-dialog-container {
+        padding-left: 0;
+        padding-right: 0;
+        padding-bottom: 8px;
+    }
+
+    .mat-dialog-title {
+        margin-left: 24px;
+        margin-right: 24px;
+        font-size: 20px;
+        font-weight: 600;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.6;
+        letter-spacing: -0.5px;
+        color: rgba(0, 0, 0, 0.87);
+    }
+
+    .mat-dialog-content {
+        margin: 0;
+    }
+
+    .mat-dialog-actions {
+        padding: 8px 8px 24px 8px;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: end;
+        -ms-flex-pack: end;
+        justify-content: flex-end;
+        color: rgba(0, 0, 0, 0.54);
+
+        button {
+            text-transform: uppercase;
+            font-weight: normal;
+
+            &:enabled {
+                color: #ff9800;
+            }
+        }
+    }
+
+    .adf-version-list {
+        height: 200px;
+        overflow: auto;
+    }
+}
+
+.version-manager-dialog-adapter {
+    width: 100%;
+}

src/app/components/versions-dialog/version-manager-dialog-adapter.component.ts

@@ -0,0 +1,45 @@
+/*!
+ * @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, MatSnackBarConfig } from '@angular/material';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { MatSnackBar } from '@angular/material';
+
+@Component({
+    templateUrl: './version-manager-dialog-adapter.component.html',
+    styleUrls: ['./version-manager-dialog-adapter.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class VersionManagerDialogAdapterComponent {
+
+    public contentEntry: MinimalNodeEntryEntity;
+
+    constructor(@Inject(MAT_DIALOG_DATA) data: any,
+                private snackBar: MatSnackBar,
+                private containingDialog?: MatDialogRef<VersionManagerDialogAdapterComponent>) {
+        this.contentEntry = data.contentEntry;
+    }
+
+    uploadError(errorMessage: string) {
+        this.snackBar.open(errorMessage, '', <MatSnackBarConfig>{ duration: 4000 });
+    }
+
+    close() {
+        this.containingDialog.close();
+    }
+}

src/assets/i18n/en.json

@@ -103,7 +103,8 @@
             "RESTORE": "Restore",
             "FAVORITE": "Favorite",
             "UNSHARE": "Unshare",
-            "DETAILS": "View details"
+            "DETAILS": "View details",
+            "VERSIONS": "Manage Versions"
         },
         "DOCUMENT_LIST": {
             "COLUMNS": {
@@ -196,5 +197,11 @@
         "MOVE_ITEM": "Move '{{ name }}' to...",
         "MOVE_ITEMS": "Move {{ number }} items to...",
         "SEARCH": "Search"
+    },
+    "VERSION": {
+        "DIALOG": {
+            "TITLE": "Manage Versions",
+            "CLOSE": "Close"
+        }
     }
 }