From 7c54090deae6e97649311cad7fd18cef7f857e96 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Mon, 6 Feb 2017 09:55:12 +0000
Subject: [PATCH] ability to change position of the dropdown menu (left|right)
 (#1590)

* ability to change position of the dropdown menu (left|right)

* unit tests
---
 .../ng2-alfresco-datatable/README.md          |  1 +
 .../datatable/datatable.component.html        | 29 +++++++--
 .../datatable/datatable.component.spec.ts     | 62 +++++++++++++++++--
 .../datatable/datatable.component.ts          |  3 +
 .../ng2-alfresco-documentlist/README.md       |  3 +-
 .../components/document-list.component.html   |  1 +
 .../src/components/document-list.component.ts |  3 +
 7 files changed, 93 insertions(+), 9 deletions(-)

diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md
index b560bf048e..ad2754a8ef 100644
--- a/ng2-components/ng2-alfresco-datatable/README.md
+++ b/ng2-components/ng2-alfresco-datatable/README.md
@@ -177,6 +177,7 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
 | `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
 | `actions` | boolean | false | Toggles data actions column |
+| `actionsPosition` | string (left\|right) | right | Position of the actions dropdown menu. | 
 | `fallbackThumbnail` | string |  | Fallback image for row ehre thubnail is missing|
 
 ### Events
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index 28bd176f42..be77cc8a4f 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -3,6 +3,10 @@
     class="mdl-data-table mdl-js-data-table full-width mdl-data-table-fix-firefox">
     <thead>
     <tr>
+        <!-- Actions (left) -->
+        <th *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-header">
+            <span class="sr-only">Actions</span>
+        </th>
         <!-- Columns -->
         <th *ngIf="multiselect">
             <label
@@ -23,8 +27,8 @@
             <span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span>
             <span *ngIf="col.title">{{col.title}}</span>
         </th>
-        <!-- Actions -->
-        <th *ngIf="actions">
+        <!-- Actions (right) -->
+        <th *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-header">
             <span class="sr-only">Actions</span>
         </th>
     </tr>
@@ -34,6 +38,23 @@
     <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
         class="alfresco-datatable__row"
         [class.alfresco-datatable__row--selected]="selectedRow === row">
+
+        <!-- Actions (right) -->
+        <td *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-cell">
+            <button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon" [attr.data-automation-id]="actions_menu">
+                <i class="material-icons">more_vert</i>
+            </button>
+            <ul alfresco-mdl-menu class="mdl-menu--bottom-left"
+                [attr.for]="'action_menu_' + idx">
+                <li class="mdl-menu__item"
+                    [attr.data-automation-id]="action.title"
+                    *ngFor="let action of getRowActions(row)"
+                    (click)="onExecuteRowAction(row, action)">
+                    {{action.title}}
+                </li>
+            </ul>
+        </td>
+
         <td *ngIf="multiselect">
             <label
                 class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select"
@@ -71,8 +92,8 @@
             </div>
         </td>
 
-        <td *ngIf="actions">
-            <!-- action menu -->
+        <!-- Actions (right) -->
+        <td *ngIf="actions && actionsPosition === 'right'" class="alfresco-datatable__actions-cell">
             <button [id]="'action_menu_' + idx" alfresco-mdl-button class="mdl-button--icon" [attr.data-automation-id]="actions_menu">
                 <i class="material-icons">more_vert</i>
             </button>
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
index 97ee9b9617..db1ec81250 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableComponent } from './datatable.component';
 import {
     DataRow,
@@ -26,23 +28,75 @@ import {
 
 describe('DataTable', () => {
 
+    let fixture: ComponentFixture<DataTableComponent>;
     let dataTable: DataTableComponent;
+    let element: any;
     let eventMock: any;
 
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot()
+            ],
+            declarations: [DataTableComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DataTableComponent);
+        dataTable = fixture.componentInstance;
+        element = fixture.debugElement.nativeElement;
+
+        // usernameInput = element.querySelector('#username');
+        // passwordInput = element.querySelector('#password');
+
+        fixture.detectChanges();
+    });
+
     beforeEach(() => {
         // reset MDL handler
         window['componentHandler'] = null;
-        dataTable = new DataTableComponent();
+        // dataTable = new DataTableComponent();
 
         eventMock = {
             preventDefault: function () {}
         };
     });
 
+    it('should put actions menu to the right by default', () => {
+        dataTable.data = new ObjectDataTableAdapter([], [
+            <DataColumn> {},
+            <DataColumn> {},
+            <DataColumn> {}
+        ]);
+        dataTable.actions = true;
+        fixture.detectChanges();
+
+        let headers = element.querySelectorAll('th');
+        expect(headers.length).toBe(4);
+        expect(headers[headers.length - 1].classList.contains('alfresco-datatable__actions-header')).toBeTruthy();
+    });
+
+    it('should put actions menu to the left', () => {
+        dataTable.data = new ObjectDataTableAdapter([], [
+            <DataColumn> {},
+            <DataColumn> {},
+            <DataColumn> {}
+        ]);
+        dataTable.actions = true;
+        dataTable.actionsPosition = 'left';
+        fixture.detectChanges();
+
+        let headers = element.querySelectorAll('th');
+        expect(headers.length).toBe(4);
+        expect(headers[0].classList.contains('alfresco-datatable__actions-header')).toBeTruthy();
+    });
+
     it('should initialize default adapter', () => {
-        expect(dataTable.data).toBeUndefined();
-        dataTable.ngOnInit();
-        expect(dataTable.data).toEqual(jasmine.any(ObjectDataTableAdapter));
+        let table = new DataTableComponent();
+        expect(table.data).toBeUndefined();
+        table.ngOnInit();
+        expect(table.data).toEqual(jasmine.any(ObjectDataTableAdapter));
     });
 
     it('should initialize with custom data', () => {
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
index b8497b9ebc..312c817a56 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
@@ -44,6 +44,9 @@ export class DataTableComponent implements OnInit {
     @Input()
     actions: boolean = false;
 
+    @Input()
+    actionsPosition: string = 'right'; // left|right
+
     @Input()
     fallbackThumbnail: string;
 
diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md
index ce6e74aff3..c37d0177b3 100644
--- a/ng2-components/ng2-alfresco-documentlist/README.md
+++ b/ng2-components/ng2-alfresco-documentlist/README.md
@@ -181,6 +181,7 @@ The properties currentFolderId, folderNode and node are the entry initialization
 | `fallbackThumbnail` | string |  | Path to fallback image to use if the row thumbnail is missing |
 | `multiselect` | boolean | false | Toggles multiselect mode |
 | `contentActions` | boolean | false | Toggles content actions for each row |
+| `contentActionsPosition` | string (left\|right) | right | Position of the content actions dropdown menu. |
 | `contextMenuActions` | boolean | false | Toggles context menus for each row |
 | `enablePagination` | boolean | true | Shows pagination |
 | `creationMenuActions` | boolean | true | Toggles the creation menu actions|
@@ -488,7 +489,7 @@ context.row.getValue('name')
 context.row.getValue('createdByUser.displayName')
 ```
 
-_You may want using **row** api to get raw value access. 
+You may want using **row** api to get raw value access.
 
 ```html
 <content-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
index 340bdfad79..5890129508 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
@@ -7,6 +7,7 @@
 <alfresco-datatable
     [data]="data"
     [actions]="contentActions"
+    [actionsPosition]="contentActionsPosition"
     [multiselect]="multiselect"
     [fallbackThumbnail]="fallbackThumbnail"
     (showRowContextMenu)="onShowRowContextMenu($event)"
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
index a849269e38..c9547828f1 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
@@ -74,6 +74,9 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     @Input()
     contentActions: boolean = false;
 
+    @Input()
+    contentActionsPosition: string = 'right'; // left|right
+
     @Input()
     contextMenuActions: boolean = false;