Add couple of new components

We have allready created table and toolbar, so add it

src/components/data-table/data-table-pagination.html

@@ -0,0 +1,16 @@
+<div class="dataTables_paginate paging_bootstrap_input" id="DataTables_Table_0_paginate">
+    <ul class="pagination">
+        <li ng-class="{disabled: pagesNumber === 1}" class="first" ng-click="goToFirst()"><span class="i fa fa-angle-double-left"></span></li>
+        <li ng-class="{disabled: pagesNumber === 1}" class="prev" ng-click="setPage(currentPage - 1)"><span class="i fa fa-angle-left"></span></li>
+    </ul>
+    <div class="pagination-input">
+        <form ng-submit="setPage(currentPageView - 1)">
+            <input type="text" class="paginate_input" ng-model="currentPageView">
+            <span class="paginate_of">of <b>{{goTos.length}}</b></span>
+        </form>
+    </div>
+    <ul class="pagination">
+        <li ng-class="{disabled: pagesNumber === 1}" class="next" ng-click="setPage(currentPage + 1)"><span class="i fa fa-angle-right"></span></li>
+        <li ng-class="{disabled: pagesNumber === 1}" class="last" ng-click="goToLast()"><span class="i fa fa-angle-double-right"></span></li>
+    </ul>
+</div>

src/components/data-table/data-table.html

@@ -0,0 +1,55 @@
+<div>
+    <table class="table table-bordered table-striped table-hover mig-table-with-footer">
+    <thead>
+        <tr>
+            <th ng-repeat="column in vm.columns"
+                ng-class="vm.getColumnClass(column)">
+                <a href="#" ng-click="vm.onSortClick(column)" ng-if="column.sort">
+                    {{column.text}}
+                    <div class="pull-right">
+                        <i ng-if="vm.isFilteredBy(column.col_idx) && !vm.sortReverse" class="fa fa-sort-desc"></i>
+                        <i ng-if="vm.isFilteredBy(column.col_idx) && vm.sortReverse" class="fa fa-sort-asc"></i>
+                    </div>
+                </a>
+            </th>
+        </tr>
+    </thead>
+    <tbody>
+    <tr ng-repeat="row in vm.data | orderBy : vm.sortType : vm.sortReverse"
+        ng-class="{active : row.selected}"
+        ng-click="vm.onRowClick({$event: $event, rowData: row})">
+        <td ng-repeat="(columnKey, column) in vm.columns"
+            ng-class="vm.getColumnClass(column)">
+            <input ng-if="vm.isCheckbox(row, columnKey)"
+                   ng-click="vm.onRowSelected($event)"
+                   onclick="event.stopPropagation();"
+                   type="checkbox"
+                   ng-model="row.selected"
+                   name="check_{{row.id}}"
+                   value="{{row.id}}"
+                   ng-checked="row.selected"
+                   class="list-grid-checkbox">
+            <img ng-if="vm.isIconOrImage(row, columnKey)"
+                 alt="row.cells[columnKey].title"
+                 title="row.cells[columnKey].title"
+                 ng-src="{{vm.buildImageUrl(row, columnKey)}}">
+            <span ng-if="row.cells[columnKey].text">
+                {{row.cells[columnKey].text}}
+            </span>
+        </td>
+    </tr>
+    </tbody>
+    </table>
+    <div class="dataTables_footer">
+        <span class="miq-info here">
+            <input type="checkbox" ng-model="isChecked" ng-click="vm.onCheckAll(isChecked)"> Check All
+        </span>
+        <span class="pull-right">
+            <miq-data-table-pagination resource-list="vm.data"
+                                       current-page="vm.resCurPage"
+                                       page-setter="vm.setPage"
+                                       per-page="vm.resPerPage">
+            </miq-data-table-pagination>
+        </span>
+    </div>
+</div>

src/components/data-table/dataTableDirective.ts

@@ -0,0 +1,22 @@
+///<reference path="../../tsd.d.ts"/>
+import DataTableController from './dataTablecontroller';
+
+export default class DataTable implements ng.IDirective {
+    public replace: boolean = true;
+    public template = require<string>('./data-table.html');
+    public controller: any = DataTableController;
+    public controllerAs: string = 'vm';
+    public scope: any = {};
+    public bindToController: any = {
+        onRowClick: '&',
+        onItemSelected: '&',
+        data: '=',
+        columns: '='
+    };
+
+    public static Factory = () => {
+        let directive: ng.IDirectiveFactory = () => new DataTable();
+        directive.$inject = [];
+        return directive;
+    };
+}

src/components/data-table/dataTablePaginationDirective.ts

@@ -0,0 +1,74 @@
+///<reference path="../../tsd.d.ts"/>
+
+export default class DataTablePagination implements ng.IDirective {
+    public link: ($scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
+    public template = require<string>('./data-table-pagination.html');
+    public scope = {
+        resourceList: '=',
+        currentPage: '=',
+        linkHeader: '=',
+        pageSetter: '&',
+        perPage: '='
+    };
+    public replace = true;
+
+    constructor() {
+        this.link = ($scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
+
+            $scope.currentPageView = $scope.currentPage + 1;
+            $scope.pagesNumber = getPagesNumber();
+
+            function getPagesNumber() {
+                return $scope.resourceList && Math.ceil(($scope.resourceList.length || 1) / $scope.perPage);
+            }
+
+            $scope.setPage = (pageNumber: number) => {
+                $scope.pagesNumber = getPagesNumber();
+
+                if ($scope.pagesNumber === 1) {
+                    $scope.currentPageView = 1;
+                    return;
+                }
+
+                if (pageNumber < 1) {
+                    $scope.pageSetter({ pageNumber: 0 });
+                    $scope.currentPageView = 1;
+                } else if (pageNumber >= $scope.pagesNumber) {
+                    $scope.pageSetter({ pageNumber: $scope.pagesNumber - 1 });
+                    $scope.currentPageView = pageNumber;
+                } else {
+                    $scope.pageSetter({ pageNumber: pageNumber });
+                }
+            };
+
+            $scope.goToFirst = () => {
+                $scope.pageSetter({ pageNumber: 0 });
+            };
+
+            $scope.goToLast = () => {
+                $scope.pagesNumber = getPagesNumber();
+                $scope.pageSetter({ pageNumber: $scope.pagesNumber - 1 });
+            };
+
+            $scope.goTos = [0];
+
+            $scope.$watch('currentPage', (recentCurrentPage) => {
+                $scope.currentPageView = parseInt(recentCurrentPage, 10) + 1;
+            });
+
+            $scope.$watchGroup(['perPage'], () => {
+                $scope.pagesNumber = getPagesNumber();
+                $scope.goTos = new Array($scope.pagesNumber);
+            });
+
+        };
+    }
+
+    public static Factory = () => {
+        let directive = () => new DataTablePagination();
+
+        directive.$inject = [];
+
+        return directive;
+    };
+}

src/components/data-table/dataTablecontroller.ts

@@ -0,0 +1,77 @@
+///<reference path="../../tsd.d.ts"/>
+export default class DataTableController {
+    public data: any;
+    public columns: any;
+    public sortType: any = -1;
+    public sortReverse: boolean;
+    public onRowClick: (args: {$event: JQueryEventObject, rowData: any}) => void;
+    public onItemSelected: () => void;
+    public resPerPage: number = 10;
+    public resCurPage: number = 0;
+
+    public static get assetUrl() {return '/assets/';}
+
+    public isFilteredBy(key): boolean {
+        return this.sortType === key;
+    }
+
+    public getColumnClass(column: any): any {
+        return {
+            narrow: column.is_narrow,
+            miqTextLeft : column.align === 'left',
+            miqTextRight : column.align === 'right'
+        };
+    }
+
+    public onSortClick(column: any): void {
+        this.sortType = column.col_idx;
+        this.sortReverse = !this.sortReverse;
+    }
+
+    public isCheckbox(row, columnKey): boolean {
+        return row.cells[columnKey].hasOwnProperty('is_checkbox') && row.cells[columnKey]['is_checkbox'];
+    }
+
+    public isIconOrImage(row, columnKey): boolean {
+        return DataTableController.isImage(row, columnKey) ||
+            DataTableController.isIcon(row, columnKey);
+    }
+
+    public static isIcon(row, columnKey): boolean {
+        return row.cells[columnKey].hasOwnProperty('icon') && row.cells[columnKey]['icon'] !== null;
+    }
+
+    public static isImage(row, columnKey): boolean {
+        return row.cells[columnKey].hasOwnProperty('image') && row.cells[columnKey]['image'] !== null;
+    }
+
+    public buildImageUrl(row, columnKey) {
+        const imagePath = DataTableController.isIcon(row, columnKey) ?
+            row.cells[columnKey]['icon'] : row.cells[columnKey]['image'];
+        return DataTableController.assetUrl + imagePath;
+    }
+
+    public setPage(page) {
+        this.resCurPage = page;
+    }
+
+    public getSortTypeAsText() {
+        const selectedFilter: any = _.find(this.columns, {col_idx: this.sortType});
+        if (selectedFilter) {
+            return selectedFilter.text;
+        }
+    }
+
+    public onCheckAll(isChecked: any) {
+        _.each(this.data, (oneItem: any) => {
+            oneItem.selected = isChecked;
+        });
+        this.onItemSelected();
+    }
+
+    public onRowSelected($event) {
+        $event.stopPropagation();
+        console.log(this);
+        this.onItemSelected();
+    }
+}

src/components/data-table/loader.ts

@@ -0,0 +1,7 @@
+import DataTable from './dataTableDirective';
+import DataTablePagination from './dataTablePaginationDirective';
+
+export default (module: ng.IModule) => {
+    module.directive('miqDataTable', DataTable.Factory());
+    module.directive('miqDataTablePagination', DataTablePagination.Factory());
+}

src/components/loader.ts

@@ -0,0 +1,7 @@
+import toolbarMenuLoader from './toolbar-menu/loader';
+import dataTableLoader from './data-table/loader';
+
+export default (module: ng.IModule) => {
+    toolbarMenuLoader(module);
+    dataTableLoader(module);
+}

src/components/toolbar-menu/loader.ts

@@ -0,0 +1,9 @@
+import Toolbar from './toolbarDirective';
+import ToolbarButton from './toolbarButtonDirective';
+import ToolbarList from './toolbarListDirective';
+
+export default (module: ng.IModule) => {
+    module.directive('miqToolbarMenu', Toolbar.Factory());
+    module.directive('miqToolbarButton', ToolbarButton.Factory());
+    module.directive('miqToolbarList', ToolbarList.Factory());
+}

src/components/toolbar-menu/toolbar-button.html

@@ -0,0 +1,3 @@
+<div>
+    Button
+</div>

src/components/toolbar-menu/toolbar-list.html

@@ -0,0 +1,15 @@
+<div class="btn-group" dropdown>
+    <button type="button" dropdown-toggle class="btn dropdown-toggle btn-default" ng-class="{disabled: toolbarList.disabled}" title="{{toolbarList.title}}">
+        <i class="{{toolbarList.icon}}" style="margin-right: 5px;" ng-if="toolbarList.icon"></i>
+        {{toolbarList.title}}
+        <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu" role="menu">
+        <li ng-repeat="item in toolbarList.children" ng-class="{disabled: item.disabled}">
+            <a href="#" ng-click="onItemClick({item: item})">
+                <i ng-if="item.icon" class="{{item.icon}}"></i>
+                {{item.title}}
+            </a>
+        </li>
+    </ul>
+</div>

src/components/toolbar-menu/toolbar-menu.html

@@ -0,0 +1,11 @@
+<div class="toolbar-pf-actions">
+    <div id="center_tb">
+        <div class="form-group">
+            <miq-toolbar-list ng-repeat="item in vm.toolbarItems | filter: children"
+                              toolbar-list="item"
+                              on-item-click="vm.onItemClick(item)">
+            </miq-toolbar-list>
+        </div>
+    </div>
+    <div id="view_tb"></div>
+</div>

src/components/toolbar-menu/toolbarButtonDirective.ts

@@ -0,0 +1,15 @@
+///<reference path="../../tsd.d.ts"/>
+
+export default class ToolbarButton implements ng.IDirective {
+    public replace: boolean = true;
+    public template = require<string>('./toolbar-button.html');
+    public scope: any = {
+        toolbarButton: '='
+    };
+
+    public static Factory = () => {
+        let directive: ng.IDirectiveFactory = () => new ToolbarButton();
+        directive.$inject = [];
+        return directive;
+    };
+}

src/components/toolbar-menu/toolbarController.ts

@@ -0,0 +1,17 @@
+///<reference path="../../tsd.d.ts"/>
+
+export default class ToolbarController {
+    public toolbarItems: any;
+    /*@ngInject*/
+    constructor(private $window: ng.IWindowService, private $location: ng.ILocationService) {}
+
+    public onItemClick(item: any) {
+        if (item.hasOwnProperty('actionUrl')) {
+            this.$location.path(item.actionUrl);
+        } else if (item.hasOwnProperty('redirectUrl')) {
+            this.$window.location = item.redirectUrl;
+        } else if (item.hasOwnProperty('actionFunction')) {
+            item.actionFunction();
+        }
+    }
+}

src/components/toolbar-menu/toolbarDirective.ts

@@ -0,0 +1,19 @@
+///<reference path="../../tsd.d.ts"/>
+
+import ToolbarController from './toolbarController';
+
+export default class Toolbar implements ng.IDirective {
+    public controller: any = ToolbarController;
+    public replace: boolean = true;
+    public controllerAs: string = 'vm';
+    public template = require<string>('./toolbar-menu.html');
+    public bindToController: any = {
+      toolbarItems: '='
+    };
+
+    public static Factory = () => {
+        let directive: ng.IDirectiveFactory = () => new Toolbar();
+        directive.$inject = [];
+        return directive;
+    };
+}

src/components/toolbar-menu/toolbarListDirective.ts

@@ -0,0 +1,16 @@
+///<reference path="../../tsd.d.ts"/>
+
+export default class ToolbarList implements ng.IDirective {
+    public replace: boolean = true;
+    public template = require<string>('./toolbar-list.html');
+    public scope: any = {
+        toolbarList: '=',
+        onItemClick: '&'
+    };
+
+    public static Factory = () => {
+        let directive: ng.IDirectiveFactory = () => new ToolbarList();
+        directive.$inject = [];
+        return directive;
+    };
+}