[ACS-7462] cleanup deprecated api for DataTable and DocumentList (#9500)

* refactor: cleanup gallery mode from DataTable/DocumentList * refactor: cleanup gallery mode from DataTable/DocumentList * refactor: cleanup gallery mode from DataTable/DocumentList [ci:force] * refactor: remove unused api [ci:force] * refactor: remove unused api [ci:force] * refactor: update and fix documentation [ci:force] * refactor: restore thumbnails, docs fixes [ci:force] * fix package lock
Alfresco · Apr 9, 2024 · 135b3b4 · 135b3b4
1 parent 8b59187
commit 135b3b4
Show file tree

Hide file tree

Showing 16 changed files with 210 additions and 502 deletions.
diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
@@ -99,7 +99,6 @@
                 [allowDropFiles]="allowDropFiles"
                 [selectionMode]="selectionMode"
                 [multiselect]="multiselect"
-                [display]="displayMode"
                 [node]="nodeResult"
                 [includeFields]="includeFields"
                 [sorting]="sorting"

diff --git a/demo-shell/src/app/components/files/files.component.ts b/demo-shell/src/app/components/files/files.component.ts
@@ -31,14 +31,7 @@ import {
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { NodeEntry, NodePaging, Pagination, Node, SearchEntry } from '@alfresco/js-api';
-import {
-    NotificationService,
-    UserPreferencesService,
-    PaginationComponent,
-    DisplayMode,
-    ShowHeaderMode,
-    FormRenderingService
-} from '@alfresco/adf-core';
+import { NotificationService, UserPreferencesService, PaginationComponent, ShowHeaderMode, FormRenderingService } from '@alfresco/adf-core';
 import {
     ContentService,
     FolderCreatedEvent,
@@ -74,7 +67,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     showViewer = false;
     showVersions = false;
     allowDropFiles = true;
-    displayMode = DisplayMode.List;
     includeFields = ['isFavorite', 'isLocked', 'aspectNames', 'definition'];
 
     selectionModes = [
@@ -221,10 +213,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                 if (params['id'] && this.currentFolderId !== params['id']) {
                     this.currentFolderId = params['id'];
                 }
-
-                if (params['mode'] && params['mode'] === DisplayMode.Gallery) {
-                    this.displayMode = DisplayMode.Gallery;
-                }
             });
         }
 
@@ -312,7 +300,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     onFolderChange($event) {
-        this.router.navigate([this.navigationRoute, $event.value.id, 'display', this.displayMode]);
+        this.router.navigate([this.navigationRoute, $event.value.id]);
     }
 
     handlePermissionError(event: any) {
@@ -507,7 +495,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         if (this.currentFolderId === '-my-') {
             this.router.navigate([this.navigationRoute, '']);
         } else {
-            this.router.navigate([this.navigationRoute, this.currentFolderId, 'display', this.displayMode]);
+            this.router.navigate([this.navigationRoute, this.currentFolderId]);
         }
         this.documentList.reload();
     }

diff --git a/docs/content-services/components/document-list.component.md b/docs/content-services/components/document-list.component.md
@@ -66,7 +66,6 @@ Displays the documents from a repository.
 | contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
 | contextMenuActions | `boolean` | false | Toggles context menus for each row |
 | currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources |
-| display | `string` | DisplayMode.List | Change the display mode of the table. Can be "list" or "gallery". |
 | emptyFolderImageUrl | `string` |  | Custom image for empty folder. Default value: './assets/images/empty_doc_lib.svg' |
 | filterValue | `any` |  | Initial value for filter. |
 | headerFilters | `boolean` | false | Toggles the header filters mode. |
@@ -175,22 +174,6 @@ You can use `ngIf` directives to provide conditional visibility support for the
 </data-column>
 ```
 
-### Card view
-
-The Document List has an option to display items as "cards" instead of the
-standard view:
-
-![card-view](../../docassets/images/document-list-card-view.png)
-
-Set the `[display]` property to "gallery" to enable card view mode:
-
-```html
-<adf-document-list
-    [currentFolderId]="'-my-'"
-    [display]="'gallery'">
-</adf-document-list>
-```
-
 ### Pagination strategy
 
 The Document List by default supports 2 types of pagination:  [Pagination component](../../core/components/pagination.component.md) and [Infinite pagination component](../../core/components/infinite-pagination.component.md)

diff --git a/docs/core/components/datatable.component.md b/docs/core/components/datatable.component.md
diff --git a/docs/docassets/images/document-list-card-view.png b/docs/docassets/images/document-list-card-view.png
diff --git a/lib/content-services/src/lib/breadcrumb/navigable-component.interface.ts b/lib/content-services/src/lib/breadcrumb/navigable-component.interface.ts
diff --git a/lib/content-services/src/lib/breadcrumb/public-api.ts b/lib/content-services/src/lib/breadcrumb/public-api.ts
@@ -17,6 +17,5 @@
 
 export * from './breadcrumb.component';
 export * from './dropdown-breadcrumb.component';
-export * from './navigable-component.interface';
 
 export * from './breadcrumb.module';
diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.html b/lib/content-services/src/lib/document-list/components/document-list.component.html
@@ -10,7 +10,6 @@
     [rowStyleClass]="rowStyleClass"
     [showMainDatatableActions]="true"
     [loading]="loading"
-    [display]="display"
     [noPermission]="noPermission"
     [showHeader]="showHeader"
     [rowMenuCacheEnabled]="false"

diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts b/lib/content-services/src/lib/document-list/components/document-list.component.spec.ts
@@ -364,23 +364,6 @@ describe('DocumentList', () => {
         expect(documentList.resetSelection).toHaveBeenCalled();
     });
 
-    it('should use the cardview style if cardview is true', () => {
-        documentList.display = 'gallery';
-
-        fixture.detectChanges();
-
-        expect(element.querySelector('.adf-datatable-card')).toBeDefined();
-    });
-
-    it('should use the base document list style if cardview is false', () => {
-        documentList.display = 'list';
-
-        fixture.detectChanges();
-
-        expect(element.querySelector('.adf-datatable-card')).toBe(null);
-        expect(element.querySelector('.adf-datatable')).toBeDefined();
-    });
-
     it('should reset selection upon reload', () => {
         documentList.currentFolderId = 'id-folder';
         spyOn(documentList, 'resetSelection').and.callThrough();

diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.ts b/lib/content-services/src/lib/document-list/components/document-list.component.ts
@@ -41,7 +41,6 @@ import {
     DataRowActionEvent,
     DataSorting,
     DataTableComponent,
-    DisplayMode,
     ShowHeaderMode,
     PaginatedComponent,
     AppConfigService,
@@ -61,7 +60,6 @@ import {
     DataColumn
 } from '@alfresco/adf-core';
 import { NodesApiService } from '../../common/services/nodes-api.service';
-
 import { Node, NodeEntry, NodePaging, NodesApi, Pagination } from '@alfresco/js-api';
 import { Subject, BehaviorSubject, of } from 'rxjs';
 import { ShareDataRow } from './../data/share-data-row.model';
@@ -70,7 +68,6 @@ import { presetsDefaultModel } from '../models/preset.model';
 import { ContentActionModel } from './../models/content-action.model';
 import { PermissionStyleModel } from './../models/permissions-style.model';
 import { NodeEntityEvent, NodeEntryEvent } from './node.event';
-import { NavigableComponentInterface } from '../../breadcrumb/navigable-component.interface';
 import { FilterSearch } from './../../search/models/filter-search.interface';
 import { RowFilter } from '../data/row-filter.model';
 import { DocumentListService } from '../services/document-list.service';
@@ -97,7 +94,7 @@ const BYTES_TO_MB_CONVERSION_VALUE = 1048576;
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-document-list' }
 })
-export class DocumentListComponent extends DataTableSchema implements OnInit, OnChanges, OnDestroy, AfterContentInit, PaginatedComponent, NavigableComponentInterface {
+export class DocumentListComponent extends DataTableSchema implements OnInit, OnChanges, OnDestroy, AfterContentInit, PaginatedComponent {
     static SINGLE_CLICK_NAVIGATION: string = 'click';
     static DOUBLE_CLICK_NAVIGATION: string = 'dblclick';
 
@@ -133,10 +130,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
     @Input()
     where: string;
 
-    /** Change the display mode of the table. Can be "list" or "gallery". */
-    @Input()
-    display: string = DisplayMode.List;
-
     /**
      * Define a set of CSS styles to apply depending on the permission
      * of the user on that node. See the Permission Style model
@@ -479,7 +472,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
         return defaultSorting;
     }
 
-
     isMobile(): boolean {
         return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
     }
@@ -976,7 +968,6 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
         return canNavigateFolder;
     }
 
-
     private onDataReady(nodePaging: NodePaging) {
         this.ready.emit(nodePaging);
         this.pagination.next(nodePaging.list.pagination);

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -1,8 +1,7 @@
 <div
     role="grid"
-    *ngIf="data" class="adf-full-width"
-    [class.adf-datatable-card]="display === 'gallery'"
-    [class.adf-datatable-list]="display === 'list'"
+    *ngIf="data"
+    class="adf-full-width adf-datatable-list"
     [class.adf-sticky-header]="isStickyHeaderEnabled()"
     [class.adf-datatable--empty]="(isEmpty() && !isHeaderVisible()) || loading"
     [class.adf-datatable--empty--header-visible]="isEmpty() && isHeaderVisible()">
@@ -14,7 +13,6 @@
             data-automation-id="datatable-row-header"
             [disabled]="!isHeaderVisible()"
             class="adf-datatable-row"
-            *ngIf="display === 'list'"
             role="row">
 
             <!-- Actions (left) -->
@@ -143,17 +141,6 @@
             </div>
 
         </adf-datatable-row>
-        <mat-form-field *ngIf="display === 'gallery' && isHeaderVisible()">
-            <mat-select [value]="getSortingKey()" [attr.data-automation-id]="'grid-view-sorting'">
-                <mat-option *ngFor="let col of getSortableColumns()"
-                            [value]="col.key"
-                            [attr.data-automation-id]="'grid-view-sorting-'+col.title"
-                            (click)="onColumnHeaderClick(col, $event)"
-                            (keyup.enter)="onColumnHeaderClick(col, $event)">
-                    {{ col.title | translate}}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
     </div>
 
     <div
@@ -382,10 +369,7 @@
                     </ng-container>
                 </div>
             </adf-datatable-row>
-            <div *ngIf="isEmpty()"
-                 role="row"
-                 [class.adf-datatable-row]="display === 'list'"
-                 [class.adf-datatable-card-empty]="display === 'gallery'">
+            <div *ngIf="isEmpty()" role="row" class="adf-datatable-row">
                 <div class="adf-no-content-container adf-datatable-cell" role="gridcell">
                     <ng-template *ngIf="noContentTemplate"
                                  ngFor [ngForOf]="[data]"
@@ -394,24 +378,18 @@
                     <ng-content select="adf-empty-list"></ng-content>
                 </div>
             </div>
-            <div *ngFor="let row of fakeRows"
-                 class="adf-datatable-row adf-datatable-row-empty-card">
-            </div>
         </ng-container>
         <div *ngIf="!loading && noPermission"
              role="row"
-             [class.adf-datatable-row]="display === 'list'"
-             class="adf-no-permission__row">
+             class="adf-datatable-row adf-no-permission__row">
             <div class="adf-no-permission__cell adf-no-content-container adf-datatable-cell">
                 <ng-template *ngIf="noPermissionTemplate"
                              ngFor [ngForOf]="[data]"
                              [ngForTemplate]="noPermissionTemplate">
                 </ng-template>
             </div>
         </div>
-        <div *ngIf="loading"
-             [class.adf-datatable-row]="display === 'list'"
-             [class.adf-datatable-card-loading]="display === 'gallery'">
+        <div *ngIf="loading" class="adf-datatable-row">
             <div class="adf-no-content-container adf-datatable-cell">
                 <ng-template *ngIf="loadingTemplate"
                              ngFor [ngForOf]="[data]"