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

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

* unit tests

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>

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', () => {

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;