mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-06-30 18:15:11 +00:00
501 lines
22 KiB
HTML
501 lines
22 KiB
HTML
<div class="app-container">
|
|
<div *ngIf="showSitePicker" class="app-site-container-style" id="site-container">
|
|
<adf-sites-dropdown (change)="onSiteChange($event)" [hideMyFiles]="false" [relations]="'members'">
|
|
</adf-sites-dropdown>
|
|
</div>
|
|
|
|
<div
|
|
id="document-list-container"
|
|
class="app-document-list-container">
|
|
<adf-upload-drag-area
|
|
[disabled]="disableDragArea"
|
|
[acceptedFilesType]="getFileFiltering()"
|
|
[rootFolderId]="currentFolderId"
|
|
[versioning]="versioning"
|
|
[adf-check-allowable-operation]="'create'"
|
|
[adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
|
|
(beginUpload)="onBeginUpload($event)"
|
|
(updateFileVersion)="onUploadNewVersion($event)">
|
|
<div *ngIf="errorMessage" class="app-error-message">
|
|
<button (click)="resetError()" mat-icon-button>
|
|
<mat-icon>highlight_off</mat-icon>
|
|
</button>
|
|
<span class="app-error-message--text">{{errorMessage}}</span>
|
|
</div>
|
|
<adf-toolbar *ngIf="!disableDragArea" class="app-files-toolbar">
|
|
<adf-toolbar-title>
|
|
<adf-breadcrumb root="Personal Files" [target]="documentList">
|
|
</adf-breadcrumb>
|
|
<adf-dropdown-breadcrumb [target]="documentList">
|
|
</adf-dropdown-breadcrumb>
|
|
</adf-toolbar-title>
|
|
|
|
<adf-toolbar-divider></adf-toolbar-divider>
|
|
|
|
<div class="app-document-action-buttons">
|
|
<button
|
|
mat-icon-button
|
|
data-automation-id="document-list-grid-view"
|
|
title="Toggle display mode"
|
|
(click)="toggleGalleryView()">
|
|
<mat-icon>list</mat-icon>
|
|
</button>
|
|
<button
|
|
data-automation-id="create-new-folder"
|
|
mat-icon-button
|
|
[disabled]="!canCreateContent(documentList.folderNode)"
|
|
title="New folder"
|
|
(error)="openSnackMessageError($event)"
|
|
(success)="documentList.reload()"
|
|
[adf-create-folder]="currentFolderId">
|
|
<mat-icon>create_new_folder</mat-icon>
|
|
</button>
|
|
<button mat-icon-button
|
|
[disabled]="!hasSelection(documentList.selection)"
|
|
title="Download"
|
|
[adfNodeDownload]="documentList.selection">
|
|
<mat-icon>get_app</mat-icon>
|
|
</button>
|
|
<button mat-icon-button
|
|
data-automation-id="delete-toolbar-button"
|
|
adf-check-allowable-operation="delete"
|
|
[permanent]="true"
|
|
[adf-nodes]="documentList.selection"
|
|
title="Delete"
|
|
(delete)="onDeleteActionSuccess($event)"
|
|
[adf-delete]="documentList.selection">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<button mat-icon-button (click)="showVersions = !showVersions" class="app-show-versions-button"
|
|
title="Toggle metadata">
|
|
<mat-icon>{{ showVersions ? 'chevron_right' : 'chevron_left' }}</mat-icon>
|
|
</button>
|
|
|
|
<adf-toolbar-divider class="app-toolbar-divider-before-more-menu"></adf-toolbar-divider>
|
|
|
|
<button class="app-toolbar-more-menu-button" mat-icon-button [matMenuTriggerFor]="menu">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #menu="matMenu">
|
|
<button mat-menu-item (click)="toggleGalleryView()">
|
|
<mat-icon *ngIf="displayMode === 'list'">view_comfy</mat-icon>
|
|
<mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
|
|
<span>Card view mode</span>
|
|
</button>
|
|
<button mat-menu-item
|
|
(error)="openSnackMessageError($event)"
|
|
[adf-create-folder]="currentFolderId">
|
|
<mat-icon>create_new_folder</mat-icon>
|
|
<span>New folder</span>
|
|
</button>
|
|
<button mat-menu-item
|
|
[disabled]="!canEditFolder(documentList.selection)"
|
|
(error)="openSnackMessageError($event)"
|
|
[adf-edit-folder]="documentList.selection[0]?.entry">
|
|
<mat-icon>create</mat-icon>
|
|
<span>Edit folder</span>
|
|
</button>
|
|
<button mat-menu-item
|
|
adf-check-allowable-operation="delete"
|
|
[adf-nodes]="documentList.selection"
|
|
(delete)="onDeleteActionSuccess($event)"
|
|
[adf-delete]="documentList.selection">
|
|
<mat-icon>delete</mat-icon>
|
|
<span>Delete</span>
|
|
</button>
|
|
</mat-menu>
|
|
</adf-toolbar>
|
|
|
|
<div class="app-document-list-container-in-upload-drag-area app-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
|
|
<adf-document-list
|
|
#documentList
|
|
class="app-file-list-container"
|
|
[permissionsStyle]="permissionsStyle"
|
|
[currentFolderId]="currentFolderId"
|
|
[contextMenuActions]="true"
|
|
[contentActions]="true"
|
|
[allowDropFiles]="allowDropFiles"
|
|
[selectionMode]="selectionMode"
|
|
[multiselect]="multiselect"
|
|
[display]="displayMode"
|
|
[node]="nodeResult"
|
|
[includeFields]="includeFields"
|
|
[sorting]="sorting"
|
|
[sortingMode]="sortingMode"
|
|
[showHeader]="showHeader"
|
|
[thumbnails]="thumbnails"
|
|
[stickyHeader]="stickyHeader"
|
|
[headerFilters]="headerFilters"
|
|
[filterValue]="paramValues"
|
|
(error)="onNavigationError($event)"
|
|
(success)="resetError()"
|
|
(ready)="emitReadyEvent($event)"
|
|
(preview)="showFile($event)"
|
|
(folderChange)="onFolderChange($event)"
|
|
(permissionError)="handlePermissionError($event)"
|
|
(name-click)="documentList.onNodeDblClick($any($event).detail?.node)"
|
|
(filterSelection)="onFilterSelected($event)">
|
|
|
|
<adf-custom-empty-content-template *ngIf="disableDragArea">
|
|
<div class="app-empty_template">
|
|
<div class="app-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
|
|
</div>
|
|
</adf-custom-empty-content-template>
|
|
<data-columns>
|
|
<data-column
|
|
key="$thumbnail"
|
|
type="image"
|
|
[sortable]="false"
|
|
class="app-image-table-cell"
|
|
[class.adf-cell-thumbnail]="thumbnails">
|
|
</data-column>
|
|
<data-column
|
|
*ngIf="showNameColumn && hyperlinkNavigation"
|
|
key="name"
|
|
sortingKey="name"
|
|
class="app-ellipsis-cell"
|
|
title="Display name"
|
|
[formatTooltip]="getNodeNameTooltip">
|
|
<ng-template let-context>
|
|
<adf-name-column key="name" [context]="context"></adf-name-column>
|
|
</ng-template>
|
|
</data-column>
|
|
<data-column
|
|
*ngIf="showNameColumn && !hyperlinkNavigation"
|
|
key="name"
|
|
sortingKey="name"
|
|
title="Display name"
|
|
[formatTooltip]="getNodeNameTooltip"
|
|
class="app-ellipsis-cell adf-expand-cell-5">
|
|
</data-column>
|
|
<data-column
|
|
key="content.sizeInBytes"
|
|
title="Size"
|
|
type="fileSize"
|
|
sortingKey="sizeInBytes"
|
|
class="app-desktop-only adf-ellipsis-cell">
|
|
</data-column>
|
|
<data-column
|
|
*ngIf="searchTerm"
|
|
key="search"
|
|
title="Search"
|
|
class="app-desktop-only adf-expand-cell-3">
|
|
<ng-template let-entry="$implicit">
|
|
<div [innerHTML]="searchResultsHighlight(entry.row.node.entry.search) | highlight:searchTerm">
|
|
</div>
|
|
</ng-template>
|
|
</data-column>
|
|
|
|
<data-column
|
|
class="app-full-width adf-ellipsis-cell adf-desktop-only"
|
|
title="Node id"
|
|
[sortable]="false"
|
|
key="id">
|
|
</data-column>
|
|
|
|
<data-column
|
|
title="Lock"
|
|
key="lock"
|
|
[focus]="false"
|
|
[sortable]="false"
|
|
class="app-desktop-only adf-ellipsis-cell">
|
|
<ng-template let-entry="$implicit">
|
|
<button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="app-lock-button">
|
|
<mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
|
|
<mat-icon *ngIf="!entry.row.getValue('isLocked')">lock_open</mat-icon>
|
|
</button>
|
|
</ng-template>
|
|
</data-column>
|
|
<data-column
|
|
title="Created by"
|
|
key="createdByUser.displayName"
|
|
sortingKey="createdByUser"
|
|
class="app-desktop-only adf-ellipsis-cell">
|
|
</data-column>
|
|
<data-column
|
|
title="Created"
|
|
key="createdAt"
|
|
sortingKey="createdAt"
|
|
type="date"
|
|
[format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
|
|
class="app-desktop-only adf-ellipsis-cell">
|
|
</data-column>
|
|
|
|
</data-columns>
|
|
|
|
<content-actions>
|
|
<content-action
|
|
icon="get_app"
|
|
title="Download"
|
|
handler="download">
|
|
</content-action>
|
|
<content-action
|
|
icon="delete"
|
|
permission="delete"
|
|
[disableWithNoPermission]="true"
|
|
title="Delete"
|
|
(permissionEvent)="handlePermissionError($event)"
|
|
(success)="onDeleteActionSuccess($event)"
|
|
handler="delete">
|
|
</content-action>
|
|
<content-action
|
|
icon="info"
|
|
title="Info"
|
|
(execute)="onManageMetadata($event)">
|
|
</content-action>
|
|
<content-action
|
|
icon="supervisor_account"
|
|
title="Permission"
|
|
permission="copy"
|
|
(error)="onContentActionError($event)"
|
|
(execute)="onPermissionRequested($event)">
|
|
</content-action>
|
|
<!-- document actions -->
|
|
<content-action
|
|
icon="storage"
|
|
target="document"
|
|
title="Manage versions"
|
|
(execute)="onManageVersions($event)">
|
|
</content-action>
|
|
<content-action
|
|
icon="beach_access"
|
|
target="document"
|
|
title="Update Aspects"
|
|
(execute)="onAspectUpdate($event)">
|
|
</content-action>
|
|
</content-actions>
|
|
</adf-document-list>
|
|
</div>
|
|
<adf-pagination
|
|
#standardPagination
|
|
*ngIf="!infiniteScrolling"
|
|
class="app-documentlist-pagination"
|
|
[target]="documentList"
|
|
(changePageSize)="onChangePageSize($event)"
|
|
(changePageNumber)="onChangePageNumber($event)"
|
|
(nextPage)="onNextPage($event)"
|
|
(prevPage)="onPrevPage($event)">
|
|
</adf-pagination>
|
|
<adf-infinite-pagination
|
|
[hidden]="!infiniteScrolling"
|
|
[target]="documentList"
|
|
[loading]="documentList.loading">
|
|
{{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
|
|
</adf-infinite-pagination>
|
|
</adf-upload-drag-area>
|
|
|
|
<adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar">
|
|
<div info-drawer-content>
|
|
|
|
<adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
|
|
<adf-info-drawer-tab label="Properties">
|
|
<adf-content-metadata-card
|
|
[node]="documentList.selection[0].entry"
|
|
[displayEmpty]="displayEmptyMetadata">
|
|
</adf-content-metadata-card>
|
|
</adf-info-drawer-tab>
|
|
<adf-info-drawer-tab label="Versions">
|
|
<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"
|
|
[showComments]="showVersionComments"
|
|
[allowDownload]="allowVersionDownload">
|
|
</adf-version-manager>
|
|
</ng-container>
|
|
</ng-container>
|
|
<ng-template #choose_document_template>
|
|
<div class="app-manage-versions-empty">
|
|
<mat-icon class="app-manage-versions-empty-icon">face</mat-icon>
|
|
Select a file to see its versions
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #no_permission_to_versions>
|
|
<div class="app-manage-versions-no-permission">
|
|
<mat-icon class="app-manage-versions-no-permission-icon">warning</mat-icon>
|
|
You don't have permission to manage versions of this content
|
|
</div>
|
|
</ng-template>
|
|
</adf-info-drawer-tab>
|
|
</adf-info-drawer>
|
|
</div>
|
|
</adf-info-drawer-layout>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="showSettingsPanel" class="app-content-service-settings">
|
|
<p>Current folder ID: {{ documentList.currentFolderId }}</p>
|
|
|
|
<div class="app-p-10">
|
|
Selected Nodes:
|
|
<ul>
|
|
<li *ngFor="let node of documentList.selection">
|
|
{{ node.entry.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="app-container">
|
|
<section>
|
|
<mat-slide-toggle [(ngModel)]="showNameColumn">
|
|
Show Name Column
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle [(ngModel)]="hyperlinkNavigation">
|
|
Hyperlink navigation
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle data-automation-id="multiSelectToggle" [(ngModel)]="multiselect">
|
|
Multiselect (with checkboxes)
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle id="adf-multiple-upload-switch" [(ngModel)]="multipleFileUpload" >
|
|
Multiple File Upload
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle id="adf-folder-upload-switch" [(ngModel)]="folderUpload">
|
|
Folder upload
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle id="adf-extension-filter-upload-switch" [(ngModel)]="acceptedFilesTypeShow">
|
|
Custom extensions filter
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle id="adf-max-size-filter-upload-switch" [(ngModel)]="maxSizeShow">
|
|
Max size filter
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle id="adf-thumbnails-upload-switch" (click)="toggleThumbnails()">
|
|
Enable Thumbnails
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle id="adf-version-upload-switch" [(ngModel)]="versioning">
|
|
Enable versioning
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle (click)="onInfiniteScrolling()">
|
|
Enable Infinite Scrolling
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle [(ngModel)]="showVersionComments">
|
|
Show comments on versions
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle [(ngModel)]="allowVersionDownload">
|
|
Enable version download
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle [(ngModel)]="warnOnMultipleUploads">
|
|
Display warning for multiple uploads
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle [(ngModel)]="enableMediumTimeFormat" id="enableMediumTimeFormat">
|
|
Enable medium time format for document list
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle [(ngModel)]="displayEmptyMetadata" id="displayEmptyMetadata">
|
|
Display Empty Metadata
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<section>
|
|
<mat-slide-toggle [(ngModel)]="stickyHeader" id="stickyHeader">
|
|
Sticky Header
|
|
</mat-slide-toggle>
|
|
</section>
|
|
|
|
<h5>Upload</h5>
|
|
<section *ngIf="acceptedFilesTypeShow">
|
|
<mat-form-field floatPlaceholder="float">
|
|
<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
|
|
[disabled]="!enableUpload"
|
|
[rootFolderId]="documentList.currentFolderId"
|
|
[multipleFiles]="multipleFileUpload"
|
|
[uploadFolders]="folderUpload"
|
|
[maxFilesSize]="maxSizeShow ? maxFilesSize : null"
|
|
(error)="openSnackMessageError($event)"
|
|
[versioning]="versioning"
|
|
[adf-check-allowable-operation]="'create'"
|
|
[adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
|
|
(permissionEvent)="handlePermissionError($event)"
|
|
(beginUpload)="onBeginUpload($event)">
|
|
</adf-upload-button>
|
|
</div>
|
|
<div *ngIf="acceptedFilesTypeShow">
|
|
<adf-upload-button
|
|
#uploadButton
|
|
[disabled]="!enableUpload"
|
|
[rootFolderId]="documentList.currentFolderId"
|
|
[acceptedFilesType]="acceptedFilesType"
|
|
[multipleFiles]="multipleFileUpload"
|
|
[uploadFolders]="folderUpload"
|
|
[versioning]="versioning"
|
|
(error)="openSnackMessageError($event)"
|
|
[adf-check-allowable-operation]="'create'"
|
|
[adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
|
|
(permissionEvent)="handlePermissionError($event)">
|
|
</adf-upload-button>
|
|
</div>
|
|
<section>
|
|
<mat-checkbox id="adf-disable-upload" [(ngModel)]="enableUpload">
|
|
Enable upload
|
|
</mat-checkbox>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="app-p-10">
|
|
<p>Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items</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>
|