mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
Eugenio Romano
GitHub
@@ -0,0 +1,27 @@
|
||||
<adf-toolbar>
|
||||
<adf-toolbar-title>
|
||||
<mat-form-field>
|
||||
<mat-select [(ngModel)]="selectedSource">
|
||||
<mat-option *ngFor="let source of sources" [value]="source.value">
|
||||
{{ source.title }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</adf-toolbar-title>
|
||||
|
||||
<div fxFlex="0 1 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
|
||||
<button mat-icon-button
|
||||
(restore)="documentList.reload()"
|
||||
[disabled]="!documentList.selection.length"
|
||||
*ngIf="selectedSource === '-trashcan-'"
|
||||
location="/files"
|
||||
[adf-restore]="documentList.selection">
|
||||
<mat-icon>restore</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</adf-toolbar>
|
||||
<adf-document-list
|
||||
[currentFolderId]="selectedSource"
|
||||
locationFormat="/files"
|
||||
selectionMode="multiple">
|
||||
</adf-document-list>
|
||||
@@ -0,0 +1,44 @@
|
||||
/*!
|
||||
* @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, ViewChild } from '@angular/core';
|
||||
import { DocumentListComponent } from '@alfresco/content-services';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-custom-sources',
|
||||
templateUrl: 'custom-sources.component.html'
|
||||
})
|
||||
export class CustomSourcesComponent {
|
||||
|
||||
@Input()
|
||||
selectedSource = '-recent-';
|
||||
|
||||
@ViewChild(DocumentListComponent)
|
||||
documentList: DocumentListComponent;
|
||||
|
||||
sources = [
|
||||
{ title: 'Favorites', value: '-favorites-' },
|
||||
{ title: 'Recent', value: '-recent-' },
|
||||
{ title: 'Shared Links', value: '-sharedlinks-' },
|
||||
{ title: 'Sites', value: '-sites-' },
|
||||
{ title: 'My Sites', value: '-mysites-' },
|
||||
{ title: 'Trashcan', value: '-trashcan-' },
|
||||
{ title: 'Root', value: '-root-' },
|
||||
{ title: 'My', value: '-my-' },
|
||||
{ title: 'Shared', value: '-shared-' }
|
||||
];
|
||||
}
|
||||
401
demo-shell/src/app/components/files/files.component.html
Normal file
401
demo-shell/src/app/components/files/files.component.html
Normal file
@@ -0,0 +1,401 @@
|
||||
<div class="container">
|
||||
<div class="adf-site-container-style" id="site-container">
|
||||
<adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false">
|
||||
</adf-sites-dropdown>
|
||||
</div>
|
||||
<div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
|
||||
<adf-upload-drag-area fxFlex="1 1 auto"
|
||||
[parentId]="getDocumentListCurrentFolderId()"
|
||||
[versioning]="versioning"
|
||||
[adf-node-permission]="'create'"
|
||||
[adf-nodes]="getCurrentDocumentListNode()">
|
||||
<div *ngIf="errorMessage" class="error-message">
|
||||
<button (click)="resetError()" mat-icon-button>
|
||||
<mat-icon>highlight_off</mat-icon>
|
||||
</button>
|
||||
<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
|
||||
[adf-create-folder]="getDocumentListCurrentFolderId()">
|
||||
<mat-icon>create_new_folder</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button
|
||||
[disabled]="!canEditFolder(documentList.selection)"
|
||||
[adf-edit-folder]="documentList.selection[0]?.entry">
|
||||
<mat-icon>create</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
|
||||
[disabled]="!documentList.selection.length"
|
||||
#favorite="adfFavorite"
|
||||
[adf-node-favorite]="documentList.selection">
|
||||
<mat-icon>
|
||||
{{ favorite.hasFavorites() ? 'star' :'star_border' }}
|
||||
</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker">
|
||||
<mat-icon>format_color_fill</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #themePicker="matMenu">
|
||||
<button mat-menu-item (click)="toolbarColor = 'default'">Default</button>
|
||||
<button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
|
||||
<button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
|
||||
<button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
|
||||
</mat-menu>
|
||||
|
||||
<button mat-icon-button (click)="showVersions = !showVersions">
|
||||
<mat-icon *ngIf="!showVersions">chevron_left</mat-icon>
|
||||
<mat-icon *ngIf="showVersions">chevron_right</mat-icon>
|
||||
</button>
|
||||
|
||||
<adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
|
||||
|
||||
<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
|
||||
[adf-create-folder]="getDocumentListCurrentFolderId()">
|
||||
<mat-icon>create_new_folder</mat-icon>
|
||||
<span>New folder</span>
|
||||
</button>
|
||||
<button mat-menu-item
|
||||
[disabled]="!canEditFolder(documentList.selection)"
|
||||
[adf-edit-folder]="documentList.selection[0]?.entry">
|
||||
<mat-icon>create</mat-icon>
|
||||
<span>Edit folder</span>
|
||||
</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"
|
||||
[node]="nodeResult"
|
||||
(error)="onNavigationError($event)"
|
||||
(success)="resetError()"
|
||||
(ready)="emitReadyEvent($event)"
|
||||
(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>
|
||||
<!-- 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>
|
||||
{{'VERSION.CHOOSE_FILE' | translate}}
|
||||
</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>
|
||||
{{'VERSION.NO_PERMISSION' | translate}}
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</adf-info-drawer-layout>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<context-menu-holder></context-menu-holder>
|
||||
|
||||
<div class="adf-content-service-settings">
|
||||
|
||||
<p>Current folder ID: {{ documentList.currentFolderId }}</p>
|
||||
|
||||
<div class="p-10">
|
||||
Selected Nodes:
|
||||
<ul>
|
||||
<li *ngFor="let node of documentList.selection">
|
||||
{{ node.entry.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section>
|
||||
<mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' |
|
||||
translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<mat-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">
|
||||
{{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<mat-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">{{'DOCUMENT_LIST.FOLDER_UPLOAD' |
|
||||
translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<mat-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">{{'DOCUMENT_LIST.CUSTOM_FILTER' |
|
||||
translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
|
||||
translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' |
|
||||
translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<h5>Upload</h5>
|
||||
<section *ngIf="acceptedFilesTypeShow">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"
|
||||
data-automation-id="accepted-files-type">
|
||||
</mat-form-field>
|
||||
</section>
|
||||
<section *ngIf="maxSizeShow">
|
||||
<mat-form-field>
|
||||
<input matInput type="number" placeholder="Max file size" [(ngModel)]="maxFilesSize"
|
||||
data-automation-id="max-files-size">
|
||||
</mat-form-field>
|
||||
</section>
|
||||
<div *ngIf="!acceptedFilesTypeShow">
|
||||
<adf-upload-button
|
||||
#uploadButton
|
||||
tooltip="Custom tooltip"
|
||||
[disabled]="!enableUpload"
|
||||
data-automation-id="multiple-file-upload"
|
||||
[rootFolderId]="documentList.currentFolderId"
|
||||
[multipleFiles]="multipleFileUpload"
|
||||
[uploadFolders]="folderUpload"
|
||||
[maxFilesSize]="maxFilesSize"
|
||||
(error)="handleUploadError($event)"
|
||||
[versioning]="versioning"
|
||||
[adf-node-permission]="'create'"
|
||||
[adf-nodes]="getCurrentDocumentListNode()"
|
||||
(permissionEvent)="handlePermissionError($event)">
|
||||
</adf-upload-button>
|
||||
</div>
|
||||
<div *ngIf="acceptedFilesTypeShow">
|
||||
<adf-upload-button
|
||||
#uploadButton
|
||||
tooltip="Custom tooltip"
|
||||
[disabled]="!enableUpload"
|
||||
data-automation-id="multiple-file-upload"
|
||||
[rootFolderId]="documentList.currentFolderId"
|
||||
[acceptedFilesType]="acceptedFilesType"
|
||||
[multipleFiles]="multipleFileUpload"
|
||||
[uploadFolders]="folderUpload"
|
||||
[versioning]="versioning"
|
||||
(error)="handleUploadError($event)"
|
||||
[adf-node-permission]="'create'"
|
||||
[adf-nodes]="getCurrentDocumentListNode()"
|
||||
(permissionEvent)="handlePermissionError($event)">
|
||||
</adf-upload-button>
|
||||
</div>
|
||||
<section>
|
||||
<mat-checkbox [(ngModel)]="enableUpload">
|
||||
{{'DOCUMENT_LIST.DESCRIPTION_UPLOAD' | translate}}
|
||||
</mat-checkbox>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="p-10">
|
||||
<p>
|
||||
{{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
|
||||
</p>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
|
||||
<mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
|
||||
{{mode.viewValue}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<file-uploading-dialog #fileDialog></file-uploading-dialog>
|
||||
113
demo-shell/src/app/components/files/files.component.scss
Normal file
113
demo-shell/src/app/components/files/files.component.scss
Normal file
@@ -0,0 +1,113 @@
|
||||
$minimumDocumentListWidth: 425px;
|
||||
|
||||
.container {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.error-message--text {
|
||||
color: #d50000;
|
||||
}
|
||||
|
||||
.adf-not-overlay-viewer {
|
||||
height:900px;
|
||||
}
|
||||
|
||||
adf-document-list ::ng-deep adf-datatable tr.document-list__create {
|
||||
background: green !important;
|
||||
}
|
||||
|
||||
adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
|
||||
background: red !important;
|
||||
}
|
||||
|
||||
adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
|
||||
fill: #00bcd4;
|
||||
}
|
||||
|
||||
.adf-site-container-style {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.adf-content-service-settings {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.adf-files-toolbar {
|
||||
.adf-toolbar-title {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.adf-breadcrumb {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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) {
|
||||
adf-document-list ::ng-deep adf-datatable {
|
||||
& ::ng-deep .adf-data-table-cell--fileSize {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-site-container-style {
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
||||
& ::ng-deep .adf-site-dropdown-list-element {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
379
demo-shell/src/app/components/files/files.component.ts
Normal file
379
demo-shell/src/app/components/files/files.component.ts
Normal file
@@ -0,0 +1,379 @@
|
||||
/*!
|
||||
* @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, OnInit, OnChanges, OnDestroy, ChangeDetectorRef,
|
||||
EventEmitter, Optional, ViewChild, SimpleChanges, Output
|
||||
} from '@angular/core';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import { ActivatedRoute, Params, Router } from '@angular/router';
|
||||
import { MinimalNodeEntity, NodePaging } from 'alfresco-js-api';
|
||||
import {
|
||||
AlfrescoApiService, ContentService, TranslationService,
|
||||
FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
|
||||
SiteModel, UploadService, DataColumn, DataRow
|
||||
} from '@alfresco/core';
|
||||
|
||||
import { DocumentListComponent, PermissionStyleModel, DownloadZipDialogComponent } from '@alfresco/content-services';
|
||||
|
||||
import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
|
||||
import { Subscription } from 'rxjs/Rx';
|
||||
|
||||
const DEFAULT_FOLDER_TO_SHOW = '-my-';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-files-component',
|
||||
templateUrl: './files.component.html',
|
||||
styleUrls: ['./files.component.scss']
|
||||
})
|
||||
export class FilesComponent implements OnInit, OnChanges, OnDestroy {
|
||||
|
||||
errorMessage: string = null;
|
||||
fileNodeId: any;
|
||||
showViewer: boolean = false;
|
||||
showVersions: boolean = false;
|
||||
|
||||
toolbarColor = 'default';
|
||||
|
||||
selectionModes = [
|
||||
{ value: 'none', viewValue: 'None' },
|
||||
{ value: 'single', viewValue: 'Single' },
|
||||
{ value: 'multiple', viewValue: 'Multiple' }
|
||||
];
|
||||
|
||||
@Input()
|
||||
// The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
|
||||
currentFolderId: string = DEFAULT_FOLDER_TO_SHOW;
|
||||
|
||||
@Input()
|
||||
selectionMode = 'multiple';
|
||||
|
||||
@Input()
|
||||
multiselect = false;
|
||||
|
||||
@Input()
|
||||
multipleFileUpload: boolean = false;
|
||||
|
||||
@Input()
|
||||
folderUpload: boolean = false;
|
||||
|
||||
@Input()
|
||||
acceptedFilesTypeShow: boolean = false;
|
||||
|
||||
@Input()
|
||||
maxSizeShow: boolean = false;
|
||||
|
||||
@Input()
|
||||
versioning: boolean = false;
|
||||
|
||||
@Input()
|
||||
acceptedFilesType: string = '.jpg,.pdf,.js';
|
||||
|
||||
@Input()
|
||||
maxFilesSize: number = null;
|
||||
|
||||
@Input()
|
||||
enableUpload: boolean = true;
|
||||
|
||||
@Input()
|
||||
nodeResult: NodePaging;
|
||||
|
||||
@Output()
|
||||
documentListReady: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
@ViewChild(DocumentListComponent)
|
||||
documentList: DocumentListComponent;
|
||||
|
||||
permissionsStyle: PermissionStyleModel[] = [];
|
||||
|
||||
private onCreateFolder: Subscription;
|
||||
private onEditFolder: Subscription;
|
||||
|
||||
constructor(private changeDetector: ChangeDetectorRef,
|
||||
private apiService: AlfrescoApiService,
|
||||
private notificationService: NotificationService,
|
||||
private uploadService: UploadService,
|
||||
private contentService: ContentService,
|
||||
private dialog: MatDialog,
|
||||
private translateService: TranslationService,
|
||||
private router: Router,
|
||||
@Optional() private route: ActivatedRoute,
|
||||
private logService: LogService) {
|
||||
}
|
||||
|
||||
showFile(event) {
|
||||
const entry = event.value.entry;
|
||||
if (entry && entry.isFile) {
|
||||
this.router.navigate(['/files', entry.id, 'view']);
|
||||
}
|
||||
}
|
||||
|
||||
onFolderChange($event) {
|
||||
this.currentFolderId = $event.value.id;
|
||||
this.router.navigate(['/files', $event.value.id]);
|
||||
}
|
||||
|
||||
toggleFolder() {
|
||||
this.multipleFileUpload = false;
|
||||
this.folderUpload = !this.folderUpload;
|
||||
return this.folderUpload;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.route) {
|
||||
this.route.params.forEach((params: Params) => {
|
||||
if (params['id']) {
|
||||
this.currentFolderId = params['id'];
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.uploadService.fileUploadComplete.asObservable().debounceTime(300).subscribe(value => this.onFileUploadEvent(value));
|
||||
this.uploadService.fileUploadDeleted.subscribe((value) => this.onFileUploadEvent(value));
|
||||
this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
|
||||
this.onCreateFolder = this.contentService.folderCreate.subscribe(value => this.onFolderAction(value));
|
||||
this.onEditFolder = this.contentService.folderEdit.subscribe(value => this.onFolderAction(value));
|
||||
|
||||
// this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
|
||||
// this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.onCreateFolder.unsubscribe();
|
||||
this.onEditFolder.unsubscribe();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes.nodeResult && changes.nodeResult.currentValue) {
|
||||
this.nodeResult = <NodePaging> changes.nodeResult.currentValue;
|
||||
}
|
||||
}
|
||||
|
||||
getCurrentDocumentListNode(): MinimalNodeEntity[] {
|
||||
if (this.documentList.folderNode) {
|
||||
return [{ entry: this.documentList.folderNode }];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
onNavigationError(err: any) {
|
||||
if (err) {
|
||||
this.errorMessage = err.message || 'Navigation error';
|
||||
}
|
||||
}
|
||||
|
||||
resetError() {
|
||||
this.errorMessage = null;
|
||||
}
|
||||
|
||||
onFileUploadEvent(event: FileUploadEvent) {
|
||||
if (event && event.file.options.parentId === this.documentList.currentFolderId) {
|
||||
this.documentList.reload();
|
||||
}
|
||||
}
|
||||
|
||||
onFolderCreated(event: FolderCreatedEvent) {
|
||||
this.logService.log('FOLDER CREATED');
|
||||
this.logService.log(event);
|
||||
if (event && event.parentId === this.documentList.currentFolderId) {
|
||||
this.documentList.reload();
|
||||
}
|
||||
}
|
||||
|
||||
onFolderAction(node) {
|
||||
this.logService.log(node);
|
||||
if (node && node.parentId === this.documentList.currentFolderId) {
|
||||
this.documentList.reload();
|
||||
}
|
||||
}
|
||||
|
||||
handlePermissionError(event: any) {
|
||||
this.translateService.get('OPERATION.ERROR.NO_PERMISSION_EVENT', {
|
||||
permission: event.permission,
|
||||
action: event.action,
|
||||
type: event.type
|
||||
}).subscribe((message) => {
|
||||
this.notificationService.openSnackMessage(
|
||||
message,
|
||||
4000
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
handleUploadError(event: any) {
|
||||
this.notificationService.openSnackMessage(
|
||||
event,
|
||||
4000
|
||||
);
|
||||
}
|
||||
|
||||
emitReadyEvent(event: any) {
|
||||
this.documentListReady.emit(event);
|
||||
}
|
||||
|
||||
onContentActionError(errors) {
|
||||
const errorStatusCode = JSON.parse(errors.message).error.statusCode;
|
||||
let translatedErrorMessage: any;
|
||||
|
||||
switch (errorStatusCode) {
|
||||
case 403:
|
||||
translatedErrorMessage = this.translateService.get('OPERATION.ERROR.PERMISSION');
|
||||
break;
|
||||
case 409:
|
||||
translatedErrorMessage = this.translateService.get('OPERATION.ERROR.CONFLICT');
|
||||
break;
|
||||
default:
|
||||
translatedErrorMessage = this.translateService.get('OPERATION.ERROR.UNKNOWN');
|
||||
}
|
||||
|
||||
this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
|
||||
}
|
||||
|
||||
onContentActionSuccess(message) {
|
||||
let translatedMessage: any = this.translateService.get(message);
|
||||
this.notificationService.openSnackMessage(translatedMessage.value, 4000);
|
||||
}
|
||||
|
||||
onDeleteActionSuccess(message) {
|
||||
this.uploadService.fileDeleted.next(message);
|
||||
}
|
||||
|
||||
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) {
|
||||
this.currentFolderId = site && site.guid ? site.guid : DEFAULT_FOLDER_TO_SHOW;
|
||||
}
|
||||
|
||||
getDocumentListCurrentFolderId() {
|
||||
return this.documentList.currentFolderId || DEFAULT_FOLDER_TO_SHOW;
|
||||
}
|
||||
|
||||
hasSelection(selection: Array<MinimalNodeEntity>): boolean {
|
||||
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>) {
|
||||
if (!selection || selection.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (selection.length === 1) {
|
||||
this.downloadNode(selection[0]);
|
||||
} else {
|
||||
this.downloadZip(selection);
|
||||
}
|
||||
}
|
||||
|
||||
downloadNode(node: MinimalNodeEntity) {
|
||||
if (node && node.entry) {
|
||||
const entry = node.entry;
|
||||
|
||||
if (entry.isFile) {
|
||||
this.downloadFile(node);
|
||||
}
|
||||
|
||||
if (entry.isFolder) {
|
||||
this.downloadZip([node]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
downloadFile(node: MinimalNodeEntity) {
|
||||
if (node && node.entry) {
|
||||
const contentApi = this.apiService.getInstance().content;
|
||||
|
||||
const url = contentApi.getContentUrl(node.entry.id, true);
|
||||
const fileName = node.entry.name;
|
||||
|
||||
this.download(url, fileName);
|
||||
}
|
||||
}
|
||||
|
||||
downloadZip(selection: Array<MinimalNodeEntity>) {
|
||||
if (selection && selection.length > 0) {
|
||||
const nodeIds = selection.map(node => node.entry.id);
|
||||
|
||||
const dialogRef = this.dialog.open(DownloadZipDialogComponent, {
|
||||
width: '600px',
|
||||
data: {
|
||||
nodeIds: nodeIds
|
||||
}
|
||||
});
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
this.logService.log(result);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
download(url: string, fileName: string) {
|
||||
if (url && fileName) {
|
||||
const link = document.createElement('a');
|
||||
|
||||
link.style.display = 'none';
|
||||
link.download = fileName;
|
||||
link.href = url;
|
||||
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
}
|
||||
|
||||
getNodeNameTooltip(row: DataRow, col: DataColumn): string {
|
||||
if (row) {
|
||||
return row.getValue('name');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
canEditFolder(selection: Array<MinimalNodeEntity>): boolean {
|
||||
if (selection && selection.length === 1) {
|
||||
const entry = selection[0].entry;
|
||||
|
||||
if (entry && entry.isFolder) {
|
||||
return this.contentService.hasPermission(entry, 'update');
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -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()">Close</button>
|
||||
</footer>
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user