[WIP] CORD-686 Added pagination to table
Change-Id: I26c57cdf9759363e2bce2fd5333f45d63694278b
diff --git a/src/app/core/table/table.html b/src/app/core/table/table.html
index 788e84c..d7df1db 100644
--- a/src/app/core/table/table.html
+++ b/src/app/core/table/table.html
@@ -48,7 +48,7 @@
</tr>
</tbody>
<tbody>
- <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse track by $index">
+ <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse | pagination:vm.currentPage * vm.config.pagination.pageSize | limitTo: (vm.config.pagination.pageSize || vm.data.length) track by $index">
<td ng-repeat="col in vm.columns" xos-link-wrapper>
<span ng-if="!col.type || col.type === 'text'">{{item[col.prop]}}</span>
<span ng-if="col.type === 'boolean'">
@@ -77,7 +77,12 @@
<span ng-if="col.type === 'icon'">
<i class="fa fa-{{col.formatter(item)}}">
</i>
- </span>
+ </span>
+ <div class="xos-table-hover" ng-if="col.hover">
+ <div class="alert alert-info">
+ {{col.hover(item)}}
+ </div>
+ </div>
</td>
<td ng-if="vm.config.actions">
<a href=""
@@ -92,6 +97,12 @@
</tr>
</tbody>
</table>
+ <xos-pagination
+ ng-if="vm.config.pagination"
+ page-size="vm.config.pagination.pageSize"
+ total-elements="vm.data.length"
+ change="vm.goToPage">
+ </xos-pagination>
</div>
<!--</div>-->
<!--<div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">-->
diff --git a/src/app/core/table/table.scss b/src/app/core/table/table.scss
index a2af05e..9922026 100644
--- a/src/app/core/table/table.scss
+++ b/src/app/core/table/table.scss
@@ -1,3 +1,6 @@
+@import './../../style/vars.scss';
+@import '../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
+
xos-table {
.row + .table-responsive {
margin-top: 10px;
@@ -5,40 +8,29 @@
}
table {
- border-collapse: collapse !important;
- background: darken(grey, 20);
- border: 1px solid darken(grey, 35);
+ border: 1px solid $background-dark-color;
td, th {
+ position: relative;
}
- > tbody > tr > th,
- > tfoot > tr > th,
- > thead > tr > td,
- > tbody > tr > td,
- > tfoot > tr > td {
- padding: 8px;
- line-height: 1.42857143;
- vertical-align: top;
- border-top: 1px solid #ddd;
+
+ .xos-table-hover {
+ position: absolute;
+ top: -$padding-large-vertical;
+ left: $padding-large-horizontal;
+ opacity: 0;
+ transition: all .5s;
+ z-index: -1;
+ width: 250px;
+
+ &:hover {
+ cursor: pointer;
+ }
}
- > thead > tr > th {
- vertical-align: bottom;
- border-bottom: 2px solid #ddd;
- text-align: left;
- padding: 8px;
+
+ td:hover .xos-table-hover {
+ opacity: 1;
+ z-index: 2;
}
- > caption + thead > tr:first-child > th,
- > colgroup + thead > tr:first-child > th,
- > thead:first-child > tr:first-child > th,
- > caption + thead > tr:first-child > td,
- > colgroup + thead > tr:first-child > td,
- > thead:first-child > tr:first-child > td {
- border-top: 0;
- }
- > tbody + tbody {
- border-top: 2px solid #ddd;
- }
- .table .table {
- background-color: #fff;
- }
+
}
\ No newline at end of file
diff --git a/src/app/core/table/table.ts b/src/app/core/table/table.ts
index 1ed258d..2c0b272 100644
--- a/src/app/core/table/table.ts
+++ b/src/app/core/table/table.ts
@@ -19,6 +19,7 @@
type?: string; // understand why enum does not work
formatter?(item: any): string;
link?(item: any): string;
+ hover?(item: any): string;
}
interface IXosTableCgfOrder {
@@ -28,6 +29,9 @@
export interface IXosTableCfg {
columns: any[];
+ pagination?: {
+ pageSize: number;
+ };
order?: IXosTableCgfOrder;
filter?: string;
actions?: any[]; // TODO create interface
@@ -41,6 +45,7 @@
public reverse: boolean;
public classes: string;
private config: IXosTableCfg;
+ private currentPage: number;
$onInit() {
@@ -94,9 +99,28 @@
});
}
+ // if an hover property is passed,
+ // it should be a function
+ let hoverColumns = _.filter(this.config.columns, col => angular.isDefined(col.hover));
+ if (angular.isArray(hoverColumns) && hoverColumns.length > 0) {
+ _.forEach(hoverColumns, (col) => {
+ if (!angular.isFunction(col.hover)) {
+ throw new Error('[xosTable] The hover property should be a function.');
+ }
+ });
+ }
+
+ if (this.config.pagination) {
+ this.currentPage = 0;
+ }
+
this.columns = this.config.columns;
}
+
+ public goToPage = (n) => {
+ this.currentPage = n;
+ };
}
export const xosTable: angular.IComponentOptions = {