<div class="container">
<div class="adf-demo-site-container-style" id="demo-container">
<adf-sites-dropdown (change)="getSiteContent($event)">
</adf-sites-dropdown>
</div>
<adf-upload-drag-area
[parentId]="getDocumentListCurrentFolderId()"
[versioning]="versioning"
[adf-node-permission]="'create'"
[adf-nodes]="getCurrentDocumentListNode()">
<div *ngIf="errorMessage" class="error-message">
<button (click)="resetError()" md-icon-button>
<md-icon>highlight_off</md-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 md-icon-button
(click)="onCreateFolderClicked($event)">
<md-icon>create_new_folder</md-icon>
</button>
<button md-icon-button
[disabled]="!hasSelection(documentList.selection)"
title="Download"
(click)="downloadNodes(documentList.selection)">
<md-icon>get_app</md-icon>
</button>
<button md-icon-button
adf-node-permission="delete"
[adf-nodes]="documentList.selection">
<md-icon>delete</md-icon>
</button>
</div>
<button fxFlex="0 0 auto" md-icon-button [mdMenuTriggerFor]="themePicker">
<md-icon>format_color_fill</md-icon>
</button>
<md-menu #themePicker="mdMenu">
<button md-menu-item (click)="toolbarColor = 'default'">Default</button>
<button md-menu-item (click)="toolbarColor = 'primary'">Primary</button>
<button md-menu-item (click)="toolbarColor = 'accent'">Accent</button>
<button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
</md-menu>
<adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
<button fxFlex="0 0 auto" md-icon-button [mdMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
<md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
<button md-menu-item
(click)="onCreateFolderClicked($event)">
<md-icon>create_new_folder</md-icon>
<span>New folder</span>
</button>
<button md-menu-item
[disabled]="!hasSelection(documentList.selection)"
title="Download"
(click)="downloadNodes(documentList.selection)">
<md-icon>get_app</md-icon>
<span>Download</span>
</button>
<button md-menu-item
adf-node-permission="delete"
[adf-nodes]="documentList.selection">
<md-icon>delete</md-icon>
<span>Delete</span>
</button>
</md-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>
<!-- 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="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>
</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>
<md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
</section>
<section>
<md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
</section>
<section>
<md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
</section>
<section>
<md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
</section>
<section>
<md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
</section>
<h5>Upload</h5>
<section *ngIf="acceptedFilesTypeShow">
<md-input-container>
<input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType" data-automation-id="accepted-files-type">
</md-input-container>
</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"
[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"
[adf-node-permission]="'create'"
[adf-nodes]="getCurrentDocumentListNode()"
(permissionEvent)="handlePermissionError($event)">
</adf-upload-button>
</div>
<section>
<md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)</md-checkbox>
</section>
</div>
<div class="p-10">
<p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
<md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
<md-option *ngFor="let mode of selectionModes" [value]="mode.value">
{{mode.viewValue}}
</md-option>
</md-select>
</div>
</div>
<file-uploading-dialog #fileDialog></file-uploading-dialog>