diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts index f2f14739e6..703c724073 100644 --- a/demo-shell/src/app/app.routes.ts +++ b/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, diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts index d58c63290c..f9fa4534f9 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.ts +++ b/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' }, diff --git a/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html b/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html new file mode 100644 index 0000000000..1a5cc482f3 --- /dev/null +++ b/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.html @@ -0,0 +1,6 @@ +

DataTable Drag and Drop Demo

+
+ +
diff --git a/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.ts b/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.component.ts new file mode 100644 index 0000000000..5b4f90e3e5 --- /dev/null +++ b/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); + } +} diff --git a/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.module.ts b/demo-shell/src/app/components/datatable/drag-and-drop/datatable-dnd.module.ts new file mode 100644 index 0000000000..82b0352525 --- /dev/null +++ b/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 {} diff --git a/docs/core/components/datatable.component.md b/docs/core/components/datatable.component.md index 5d922f2a84..1eff7b0e2c 100644 --- a/docs/core/components/datatable.component.md +++ b/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 diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html index 7a660d51fe..a1acc46132 100644 --- a/lib/core/datatable/components/datatable/datatable.component.html +++ b/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)"> {{ col.srTitle | translate }} {{ col.title | translate}} @@ -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)">
diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts index 524984017b..8dd36c03c0 100644 --- a/lib/core/datatable/components/datatable/datatable.component.ts +++ b/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; }