document list extensions (demo shell) (#4511)

* doclist extensibility test page

* desktopOnly support

* extensions category, custom column

* update code

* Fix styling for column templates

* update package lock

demo-shell/src/app/app.routes.ts

@@ -223,6 +223,11 @@ export const appRoutes: Routes = [
                 component: FilesComponent,
                 canActivate: [AuthGuardEcm]
             },
+            {
+                path: 'extensions/document-list/presets',
+                canActivate: [AuthGuardEcm],
+                loadChildren: './components/document-list/extension-presets/extension-presets.module#ExtensionPresetsModule'
+            },
             {
                 path: 'files/:id',
                 component: FilesComponent,

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -32,6 +32,11 @@ export class AppLayoutComponent implements OnInit {
 
     links: Array<any> = [
         { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
+        {
+            href: '/extensions', icon: 'extension', title: 'Extensions', children: [
+                { href: '/extensions/document-list/presets', icon: 'extension', title: 'Document List' }
+            ]
+        },
         { href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
         { href: '/breadcrumb', icon: 'label', title: 'APP_LAYOUT.BREADCRUMB' },
         { href: '/notifications', icon: 'alarm', title: 'APP_LAYOUT.NOTIFICATIONS' },

demo-shell/src/app/components/document-list/extension-presets/extension-presets.component.html

@@ -0,0 +1,46 @@
+<adf-document-list
+    currentFolderId="-my-"
+    [navigate]="false">
+    <data-columns>
+        <ng-container *ngFor="let column of columns; trackBy: trackById">
+            <ng-container
+                *ngIf="
+                    column.template && !(column.desktopOnly && isSmallScreen)
+                "
+            >
+                <data-column
+                    [key]="column.key"
+                    [title]="column.title"
+                    [type]="column.type"
+                    [format]="column.format"
+                    [class]="column.class"
+                    [sortable]="column.sortable"
+                >
+                    <ng-template let-context>
+                        <adf-dynamic-column
+                            [id]="column.template"
+                            [context]="context"
+                        >
+                        </adf-dynamic-column>
+                    </ng-template>
+                </data-column>
+            </ng-container>
+
+            <ng-container
+                *ngIf="
+                    !column.template && !(column.desktopOnly && isSmallScreen)
+                "
+            >
+                <data-column
+                    [key]="column.key"
+                    [title]="column.title"
+                    [type]="column.type"
+                    [format]="column.format"
+                    [class]="column.class"
+                    [sortable]="column.sortable"
+                >
+                </data-column>
+            </ng-container>
+        </ng-container>
+    </data-columns>
+</adf-document-list>

demo-shell/src/app/components/document-list/extension-presets/extension-presets.component.ts

@@ -0,0 +1,61 @@
+/*!
+ * @license
+ * Copyright 2019 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, OnInit, OnDestroy } from '@angular/core';
+import { AppExtensionService } from '@alfresco/adf-extensions';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+    selector: 'app-extension-presets',
+    templateUrl: './extension-presets.component.html'
+})
+export class ExtensionPresetsComponent implements OnInit, OnDestroy {
+    onDestroy$ = new Subject<boolean>();
+
+    columns: any[] = [];
+    isSmallScreen = false;
+
+    constructor(
+        private extensions: AppExtensionService,
+        private breakpointObserver: BreakpointObserver
+    ) {}
+
+    ngOnInit() {
+        this.columns = this.extensions.getDocumentListPreset('files');
+
+        this.breakpointObserver
+            .observe([
+                Breakpoints.HandsetPortrait,
+                Breakpoints.HandsetLandscape
+            ])
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((result) => {
+                this.isSmallScreen = result.matches;
+            });
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
+    trackById(index: number, obj: { id: string }) {
+        return obj.id;
+    }
+}

demo-shell/src/app/components/document-list/extension-presets/extension-presets.module.ts

@@ -0,0 +1,56 @@
+/*!
+ * @license
+ * Copyright 2019 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 { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+import { ExtensionPresetsComponent } from './extension-presets.component';
+import { ExtensionsModule, ExtensionService } from '@alfresco/adf-extensions';
+import { NameColumnComponent } from './name-column/name-column.component';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: ExtensionPresetsComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        RouterModule.forChild(routes),
+        ContentModule.forChild(),
+        ExtensionsModule.forChild()
+    ],
+    declarations: [
+        ExtensionPresetsComponent,
+        NameColumnComponent
+    ],
+    entryComponents: [
+        NameColumnComponent
+    ]
+})
+export class ExtensionPresetsModule {
+    constructor(extensionService: ExtensionService) {
+        extensionService.setComponents({
+            'app.columns.name': NameColumnComponent
+        });
+    }
+}

demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts

@@ -0,0 +1,95 @@
+/*!
+ * @license
+ * Copyright 2019 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,
+    ChangeDetectionStrategy,
+    ViewEncapsulation,
+    ElementRef,
+    OnDestroy
+} from '@angular/core';
+import { NodeEntry } from '@alfresco/js-api';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { AlfrescoApiService } from '@alfresco/adf-core';
+import { Node } from '@alfresco/js-api';
+
+@Component({
+    selector: 'app-name-column',
+    template: `
+        <span class="adf-datatable-cell-value" title="{{ node | adfNodeNameTooltip }}" (click)="onClick()">
+            {{ displayText$ | async }}
+        </span>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-datatable-cell adf-datatable-link adf-name-column' }
+})
+export class NameColumnComponent implements OnInit, OnDestroy {
+    @Input()
+    context: any;
+
+    displayText$ = new BehaviorSubject<string>('');
+    node: NodeEntry;
+
+    private sub: Subscription;
+
+    constructor(private element: ElementRef, private alfrescoApiService: AlfrescoApiService) {}
+
+    ngOnInit() {
+        this.updateValue();
+
+        this.sub = this.alfrescoApiService.nodeUpdated.subscribe((node: Node) => {
+            const row = this.context.row;
+            if (row) {
+                const { entry } = row.node;
+
+                if (entry === node) {
+                    row.node = { entry };
+                    this.updateValue();
+                }
+            }
+        });
+    }
+
+    protected updateValue() {
+        this.node = this.context.row.node;
+
+        if (this.node && this.node.entry) {
+            this.displayText$.next(this.node.entry.name || this.node.entry.id);
+        }
+    }
+
+    onClick() {
+        this.element.nativeElement.dispatchEvent(
+            new CustomEvent('name-click', {
+                bubbles: true,
+                detail: {
+                    node: this.node
+                }
+            })
+        );
+    }
+
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+            this.sub = null;
+        }
+    }
+}

demo-shell/src/assets/app.extensions.json

@@ -10,6 +10,54 @@
   "features": {
     "viewer": {
       "content": []
+    },
+
+    "documentList": {
+      "files": [
+        {
+          "id": "app.files.thumbnail",
+          "key": "$thumbnail",
+          "type": "image",
+          "sortable": false,
+          "desktopOnly": false
+        },
+        {
+          "id": "app.files.name",
+          "key": "name",
+          "title": "Name",
+          "type": "text",
+          "class": "adf-ellipsis-cell adf-expand-cell-5",
+          "sortable": true,
+          "template": "app.columns.name",
+          "desktopOnly": false
+        },
+        {
+          "id": "app.files.size",
+          "key": "content.sizeInBytes",
+          "title": "Size",
+          "type": "fileSize",
+          "sortable": true,
+          "desktopOnly": true
+        },
+        {
+          "id": "app.files.modifiedOn",
+          "key": "modifiedAt",
+          "title": "Modified on",
+          "type": "date",
+          "format": "timeAgo",
+          "sortable": true,
+          "desktopOnly": true
+        },
+        {
+          "id": "app.files.modifiedBy",
+          "key": "modifiedByUser.displayName",
+          "title": "Modified by",
+          "type": "text",
+          "class": "adf-ellipsis-cell",
+          "sortable": true,
+          "desktopOnly": true
+        }
+      ]
     }
   }
 }