[ADF-4213] drop events for DataTable component (#4589)

* stub for demo shell

* drop events for datatable

* fix docs

* cleanup template

* remove unused attribute

* disable spellcheck for the demo file

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

@@ -254,6 +254,10 @@ export const appRoutes: Routes = [
                 path: 'datatable',
                 loadChildren: 'app/components/datatable/datatable.module#AppDataTableModule'
             },
+            {
+                path: 'datatable/dnd',
+                loadChildren: './components/datatable/drag-and-drop/datatable-dnd.module#AppDataTableDndModule'
+            },
             {
                 path: 'search',
                 component: SearchResultComponent,

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

@@ -63,7 +63,8 @@ export class AppLayoutComponent implements OnInit {
         { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
         { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE', children: [
             { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
-            { href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' }
+            { href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },
+            { href: '/datatable/dnd', icon: 'view_module', title: 'Drag and Drop' }
         ]},
         { href: '/template-list', icon: 'list_alt', title: 'APP_LAYOUT.TEMPLATE' },
         { href: '/webscript', icon: 'extension', title: 'APP_LAYOUT.WEBSCRIPT' },

demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html

@@ -0,0 +1,6 @@
+<h1>DataTable Drag and Drop Demo</h1>
+<div
+    (header-drop)="onDrop($event)"
+    (cell-drop)="onDrop($event)">
+    <adf-datatable [data]="data"></adf-datatable>
+</div>

demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.ts

@@ -0,0 +1,99 @@
+/*!
+ * @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.
+ */
+
+/* cspell:disable */
+
+import { Component, OnInit } from '@angular/core';
+import { ObjectDataTableAdapter, DataSorting, NotificationService, DataTableDropEvent } from '@alfresco/adf-core';
+
+const createdBy = {
+    name: 'Administrator',
+    email: 'admin@alfresco.com'
+};
+
+@Component({
+    selector: 'app-datatable-dnd',
+    templateUrl: './datatable-dnd.component.html'
+})
+export class DataTableDnDComponent implements OnInit {
+
+    data: ObjectDataTableAdapter;
+
+    constructor(private notificationService: NotificationService) {
+    }
+
+    ngOnInit() {
+        this.data = new ObjectDataTableAdapter(
+            [
+                {
+                    id: 1,
+                    name: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident,
+                            sunt in culpa qui officia deserunt mollit anim id est laborum.`,
+                    createdOn: new Date(2016, 6, 2, 15, 8, 1),
+                    createdBy,
+                    icon: 'material-icons://folder_open',
+                    json: null
+                },
+                {
+                    id: 2,
+                    name: 'Name 2',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 2),
+                    createdBy,
+                    icon: 'material-icons://accessibility',
+                    json: null
+                },
+                {
+                    id: 3,
+                    name: 'Name 3',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 3),
+                    createdBy,
+                    icon: 'material-icons://alarm',
+                    json: null
+                },
+                {
+                    id: 4,
+                    name: 'Image 8',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 4),
+                    createdBy,
+                    icon: 'material-icons://alarm'
+                }
+            ],
+            [
+                { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                { type: 'text', key: 'id', title: 'Id', sortable: true , cssClass: '' },
+                { type: 'text', key: 'createdOn', title: 'Created On', sortable: true, cssClass: 'adf-ellipsis-cell adf-expand-cell-2' },
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'adf-ellipsis-cell', sortable: true },
+                { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: ''}
+            ]
+        );
+
+        this.data.setSorting(new DataSorting('id', 'asc'));
+    }
+
+    onDrop(event: DataTableDropEvent) {
+        event.preventDefault();
+
+        const { column, target } = event.detail;
+        const message = `Dropped data on [ ${column.key} ] ${target}`;
+
+        this.notificationService.openSnackMessage(message);
+    }
+}

demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.module.ts

@@ -0,0 +1,41 @@
+/*!
+ * @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 { DataTableDnDComponent } from './datatable-dnd.component';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: DataTableDnDComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        CoreModule.forChild(),
+        ContentModule.forChild()
+    ],
+    declarations: [DataTableDnDComponent]
+})
+export class AppDataTableDndModule {}

docs/core/components/datatable.component.md

@@ -367,8 +367,30 @@ These events bubble up the component tree and can be handled by any parent compo
 | row-unselect | Raised after user unselects a row |
 | row-keyup | Raised on the 'keyup' event for the focused row. |
 | sorting-changed | Raised after user clicks the sortable column header. |
+| header-drop | Raised when data is dropped on the column header. |
+| cell-drop | Raised when data is dropped on the column cell. |
 
-For example:
+#### Drop Events
+
+All custom DOM events related to `drop` handling expose the following interface:
+
+```ts
+export interface DataTableDropEvent {
+    detail: {
+        target: 'cell' | 'header';
+        event: Event;
+        column: DataColumn;
+        row?: DataRow
+    };
+
+    preventDefault(): void;
+}
+```
+
+Note that `event` is the original `drop` event,
+and `row` is not available for Header events.
+
+#### Example
 
 ```html
 <root-component (row-click)="onRowClick($event)">

lib/core/datatable/components/datatable/datatable.component.html

@@ -25,7 +25,9 @@
                  (keyup.enter)="onColumnHeaderClick(col)"
                  role="columnheader"
                  tabindex="0"
-                 title="{{ col.title | translate }}">
+                 title="{{ col.title | translate }}"
+                 (dragover)="onDragOver($event)"
+                 (drop)="onHeaderDrop($event, col)">
                 <span *ngIf="col.srTitle" class="adf-sr-only">{{ col.srTitle | translate }}</span>
                 <span *ngIf="col.title" class="adf-datatable-cell-value">{{ col.title | translate}}</span>
             </div>
@@ -95,7 +97,9 @@
                      (click)="onRowClick(row, $event)"
                      (keydown.enter)="onEnterKeyPressed(row, $event)"
                      [adf-context-menu]="getContextMenuActions(row, col)"
-                     [adf-context-menu-enabled]="contextMenu">
+                     [adf-context-menu-enabled]="contextMenu"
+                     (dragover)="onDragOver($event)"
+                     (drop)="onCellDrop($event, col, row)">
                     <div *ngIf="!col.template" class="adf-datatable-cell-container">
                         <ng-container [ngSwitch]="col.type">
                             <div *ngSwitchCase="'image'" class="adf-cell-value">

lib/core/datatable/components/datatable/datatable.component.ts

@@ -701,4 +701,51 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
         const name = this.getNameColumnValue();
         return name ? row.getValue(name.key) : '';
     }
+
+    onDragOver(event: Event) {
+        event.preventDefault();
+    }
+
+    onHeaderDrop(event: Event, column: DataColumn) {
+        event.preventDefault();
+
+        this.elementRef.nativeElement.dispatchEvent(
+            new CustomEvent('header-drop', {
+                detail: {
+                    target: 'header',
+                    event,
+                    column
+                },
+                bubbles: true
+            })
+        );
+    }
+
+    onCellDrop(event: Event, column: DataColumn, row: DataRow) {
+        event.preventDefault();
+
+        this.elementRef.nativeElement.dispatchEvent(
+            new CustomEvent('cell-drop', {
+                detail: {
+                    target: 'cell',
+                    event,
+                    column,
+                    row
+                },
+                bubbles: true
+            })
+        );
+    }
+
+}
+
+export interface DataTableDropEvent {
+    detail: {
+        target: 'cell' | 'header';
+        event: Event;
+        column: DataColumn;
+        row?: DataRow
+    };
+
+    preventDefault(): void;
 }