Revert "[ACS-7381][ADF] Break DataTable dependency on Material Module (#9657)" (#9866)

This reverts commit f27d62585b.
This commit is contained in:
Maurizio Vitale
2024-06-25 13:53:14 +01:00
committed by GitHub
parent fb275d94c0
commit f9aadde4bf
82 changed files with 1260 additions and 1400 deletions

View File

@@ -1,24 +1,24 @@
<div class="app-container">
<div
class="app-document-list-container"
id="document-list-container">
id="document-list-container"
class="app-document-list-container">
<adf-upload-drag-area
(updateFileVersion)="onUploadNewVersion($event)"
[acceptedFilesType]="getFileFiltering()"
[adf-check-allowable-operation]="'create'"
[adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
[disabled]="disableDragArea"
[rootFolderId]="currentFolderId"
[versioning]="versioning">
[disabled]="disableDragArea"
[acceptedFilesType]="getFileFiltering()"
[rootFolderId]="currentFolderId"
[versioning]="versioning"
[adf-check-allowable-operation]="'create'"
[adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
(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>
<span class="app-error-message--text">{{errorMessage}}</span>
</div>
<adf-toolbar *ngIf="!disableDragArea" class="app-files-toolbar">
<adf-toolbar-title>
<adf-breadcrumb [target]="documentList" root="Personal Files">
<adf-breadcrumb root="Personal Files" [target]="documentList">
</adf-breadcrumb>
<adf-dropdown-breadcrumb [target]="documentList">
</adf-dropdown-breadcrumb>
@@ -26,223 +26,221 @@
<div class="app-document-action-buttons">
<button
(error)="openSnackMessageError($event)"
(success)="documentList.reload()"
[adf-create-folder]="currentFolderId"
[disabled]="!canCreateContent(documentList.folderNode)"
data-automation-id="create-new-folder"
mat-icon-button
title="New folder">
[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 [adfNodeDownload]="documentList.selection"
<button mat-icon-button
[disabled]="!hasSelection(documentList.selection)"
mat-icon-button
title="Download">
title="Download"
[adfNodeDownload]="documentList.selection">
<mat-icon>get_app</mat-icon>
</button>
<button (delete)="onDeleteActionSuccess($event)"
[adf-delete]="documentList.selection"
[adf-nodes]="documentList.selection"
[permanent]="true"
adf-check-allowable-operation="delete"
<button mat-icon-button
data-automation-id="delete-toolbar-button"
mat-icon-button
title="Delete">
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 (click)="showVersions = !showVersions" class="app-show-versions-button" mat-icon-button
title="Toggle metadata">
<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 [matMenuTriggerFor]="menu" class="app-toolbar-more-menu-button" mat-icon-button>
<button class="app-toolbar-more-menu-button" mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button (delete)="onDeleteActionSuccess($event)"
[adf-delete]="documentList.selection"
[adf-nodes]="documentList.selection"
<button mat-menu-item
adf-check-allowable-operation="delete"
mat-menu-item>
[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 [ngClass]="{'adf-sticky-document-list': stickyHeader }"
class="app-document-list-container-in-upload-drag-area app-document-list-container">
<div class="app-document-list-container-in-upload-drag-area app-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
<adf-document-list
#documentList
(error)="onNavigationError($event)"
(filterSelection)="onFilterSelected($event)"
(folderChange)="onFolderChange($event)"
(name-click)="documentList.onNodeDblClick($any($event).detail?.node)"
(permissionError)="handlePermissionError($event)"
(preview)="showFile($event)"
(ready)="emitReadyEvent($event)"
(success)="resetError()"
[allowDropFiles]="allowDropFiles"
[contentActions]="true"
[contextMenuActions]="true"
[currentFolderId]="currentFolderId"
[filterValue]="paramValues"
[headerFilters]="headerFilters"
[includeFields]="includeFields"
[multiselect]="multiselect"
[node]="nodeResult"
[permissionsStyle]="permissionsStyle"
[selectionMode]="selectionMode"
[showHeader]="showHeader"
[sortingMode]="sortingMode"
[sorting]="sorting"
[stickyHeader]="stickyHeader"
class="app-file-list-container">
#documentList
class="app-file-list-container"
[permissionsStyle]="permissionsStyle"
[currentFolderId]="currentFolderId"
[contextMenuActions]="true"
[contentActions]="true"
[allowDropFiles]="allowDropFiles"
[selectionMode]="selectionMode"
[multiselect]="multiselect"
[node]="nodeResult"
[includeFields]="includeFields"
[sorting]="sorting"
[sortingMode]="sortingMode"
[showHeader]="showHeader"
[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
[sortable]="false"
key="$thumbnail"
type="image">
</data-column>
<data-column
class="adf-expand-cell-5"
key="name"
sortingKey="name"
title="Display name">
</data-column>
<data-column
class="adf-ellipsis-cell"
key="content.sizeInBytes"
sortingKey="sizeInBytes"
title="Size"
type="fileSize">
</data-column>
<data-column
*ngIf="searchTerm"
class="adf-expand-cell-3"
key="search"
title="Search">
<ng-template let-entry="$implicit">
<div
[innerHTML]="searchResultsHighlight(entry.row.node.entry.search) | highlight:searchTerm">
</div>
</ng-template>
</data-column>
<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">
</data-column>
<data-column
key="name"
sortingKey="name"
title="Display name"
class="adf-expand-cell-5">
</data-column>
<data-column
key="content.sizeInBytes"
title="Size"
type="fileSize"
sortingKey="sizeInBytes"
class="adf-ellipsis-cell">
</data-column>
<data-column
*ngIf="searchTerm"
key="search"
title="Search"
class="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
[sortable]="false"
class="app-full-width adf-ellipsis-cell adf-desktop-only"
key="id"
title="Node id">
</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
[focus]="false"
[sortable]="false"
class="adf-ellipsis-cell"
key="lock"
title="Lock">
<ng-template let-entry="$implicit">
<button [adf-node-lock]="entry.row.node.entry" class="app-lock-button" mat-icon-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
class="adf-ellipsis-cell"
key="createdByUser.displayName"
sortingKey="createdByUser"
title="Created by">
</data-column>
<data-column
[format]="'timeAgo'"
class="adf-ellipsis-cell"
key="createdAt"
sortingKey="createdAt"
title="Created"
type="date">
</data-column>
<data-column
title="Lock"
key="lock"
[focus]="false"
[sortable]="false"
class="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="adf-ellipsis-cell">
</data-column>
<data-column
title="Created"
key="createdAt"
sortingKey="createdAt"
type="date"
[format]="'timeAgo'"
class="adf-ellipsis-cell">
</data-column>
</data-columns>
</data-columns>
<content-actions>
<content-action
handler="download"
icon="get_app"
title="Download">
</content-action>
<content-action
(permissionEvent)="handlePermissionError($event)"
(success)="onDeleteActionSuccess($event)"
[disableWithNoPermission]="true"
handler="delete"
icon="delete"
permission="delete"
title="Delete">
</content-action>
<content-action
(error)="onContentActionError($event)"
(execute)="onPermissionRequested($event)"
icon="supervisor_account"
permission="copy"
title="Permission">
</content-action>
<!-- document actions -->
<content-action
(execute)="onManageVersions($event)"
icon="storage"
target="document"
title="Manage versions">
</content-action>
<content-action
(execute)="onAspectUpdate($event)"
icon="beach_access"
target="document"
title="Update Aspects">
</content-action>
</content-actions>
</adf-document-list>
</div>
<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="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
(changePageNumber)="onChangePageNumber($event)"
[target]="documentList"
(changePageSize)="onChangePageSize($event)"
(changePageNumber)="onChangePageNumber($event)"
(nextPage)="onNextPage($event)"
(prevPage)="onPrevPage($event)"
[target]="documentList">
(prevPage)="onPrevPage($event)">
</adf-pagination>
</adf-upload-drag-area>
<adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar">
<div info-drawer-content>
<adf-info-drawer *ngIf="documentList.selection[0]" [title]="'Details'">
<adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
<adf-info-drawer-tab label="Properties">
<adf-content-metadata
[displayCategories]="true"
[node]="documentList.selection[0].entry"
[displayEmpty]="displayEmptyMetadata"
[displayTags]="true"
[node]="documentList.selection[0].entry">
[displayCategories]="true">
</adf-content-metadata>
</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
[allowDownload]="allowVersionDownload"
[node]="documentList.selection[0].entry"
[showComments]="true">
[showComments]="true"
[allowDownload]="allowVersionDownload">
</adf-version-manager>
</ng-container>
</ng-container>
@@ -279,37 +277,37 @@
<div class="app-container">
<section>
<mat-slide-toggle [(ngModel)]="multiselect" data-automation-id="multiSelectToggle">
<mat-slide-toggle data-automation-id="multiSelectToggle" [(ngModel)]="multiselect">
Multiselect (with checkboxes)
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle [(ngModel)]="multipleFileUpload" id="adf-multiple-upload-switch">
<mat-slide-toggle id="adf-multiple-upload-switch" [(ngModel)]="multipleFileUpload" >
Multiple File Upload
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle [(ngModel)]="folderUpload" id="adf-folder-upload-switch">
<mat-slide-toggle id="adf-folder-upload-switch" [(ngModel)]="folderUpload">
Folder upload
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle [(ngModel)]="acceptedFilesTypeShow" id="adf-extension-filter-upload-switch">
<mat-slide-toggle id="adf-extension-filter-upload-switch" [(ngModel)]="acceptedFilesTypeShow">
Custom extensions filter
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle [(ngModel)]="maxSizeShow" id="adf-max-size-filter-upload-switch">
<mat-slide-toggle id="adf-max-size-filter-upload-switch" [(ngModel)]="maxSizeShow">
Max size filter
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle [(ngModel)]="versioning" id="adf-version-upload-switch">
<mat-slide-toggle id="adf-version-upload-switch" [(ngModel)]="versioning">
Enable versioning
</mat-slide-toggle>
</section>
@@ -335,48 +333,48 @@
<h5>Upload</h5>
<section *ngIf="acceptedFilesTypeShow">
<mat-form-field floatPlaceholder="float">
<input [(ngModel)]="acceptedFilesType"
data-automation-id="accepted-files-type"
matInput
placeholder="Extension accepted">
<input matInput
placeholder="Extension accepted"
[(ngModel)]="acceptedFilesType"
data-automation-id="accepted-files-type">
</mat-form-field>
</section>
<section *ngIf="maxSizeShow">
<mat-form-field>
<input [(ngModel)]="maxFilesSize" data-automation-id="max-files-size" matInput placeholder="Max file size"
type="number">
<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
[disabled]="!enableUpload"
[rootFolderId]="documentList.currentFolderId"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[maxFilesSize]="maxSizeShow ? maxFilesSize : null"
(error)="openSnackMessageError($event)"
(permissionEvent)="handlePermissionError($event)"
[versioning]="versioning"
[adf-check-allowable-operation]="'create'"
[adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
[disabled]="!enableUpload"
[maxFilesSize]="maxSizeShow ? maxFilesSize : null"
[multipleFiles]="multipleFileUpload"
[rootFolderId]="documentList.currentFolderId"
[uploadFolders]="folderUpload"
[versioning]="versioning">
(permissionEvent)="handlePermissionError($event)">
</adf-upload-button>
</div>
<div *ngIf="acceptedFilesTypeShow">
<adf-upload-button
(error)="openSnackMessageError($event)"
(permissionEvent)="handlePermissionError($event)"
[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() : []"
[disabled]="!enableUpload"
[multipleFiles]="multipleFileUpload"
[rootFolderId]="documentList.currentFolderId"
[uploadFolders]="folderUpload"
[versioning]="versioning">
(permissionEvent)="handlePermissionError($event)">
</adf-upload-button>
</div>
<section>
<mat-checkbox [(ngModel)]="enableUpload" id="adf-disable-upload">
<mat-checkbox id="adf-disable-upload" [(ngModel)]="enableUpload">
Enable upload
</mat-checkbox>
</section>
@@ -385,9 +383,9 @@
<div class="app-p-10">
<p>Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items</p>
<mat-form-field>
<mat-select [(ngModel)]="selectionMode" name="food" placeholder="Selection Mode">
<mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
<mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
{{ mode.viewValue }}
{{mode.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>