summaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/browseSdc/vid-table
diff options
context:
space:
mode:
Diffstat (limited to 'vid-webpack-master/src/app/browseSdc/vid-table')
-rw-r--r--vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.html26
-rw-r--r--vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.scss40
-rw-r--r--vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.ts59
3 files changed, 125 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.html b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.html
new file mode 100644
index 000000000..5650e5d35
--- /dev/null
+++ b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.html
@@ -0,0 +1,26 @@
+<table class="table table-hover table-striped table-sortable" [mfData]="options.data | dataFilter : filterQuery" #mf="mfDataTable" [(mfSortBy)]="options.config.sortBy" [(mfSortOrder)]="options.config.sortOrder" [mfRowsOnPage]="10">
+ <thead>
+ <tr>
+ <th *ngFor="let column of options.columns">
+ <mfDefaultSorter by="{{column.key}}"> {{column.displayName}}</mfDefaultSorter>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let row of mf.data">
+ <td *ngFor="let column of options.columns" >
+ <button class="btn btn-primary" *ngIf="column.type==='button' && (!column.showCondition || row[column.showCondition])" title="{{column.text}}" (click)="clickBtn(row, column.action)">
+ {{column.text}}
+ </button>
+ {{row[column.key]}}
+ </td>
+ </tr>
+ </tbody>
+ <tfoot>
+ <tr>
+ <td colspan="5">
+ <mfBootstrapPaginator [rowsOnPageSet]="[10,15,20]"></mfBootstrapPaginator>
+ </td>
+ </tr>
+ </tfoot>
+</table>
diff --git a/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.scss b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.scss
new file mode 100644
index 000000000..f34887987
--- /dev/null
+++ b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.scss
@@ -0,0 +1,40 @@
+table > thead > tr > th {
+ cursor: pointer;
+ position: relative;
+ background-image: none;
+ color: #fff;
+ background-color: #666;
+ a{
+ color: #fff;
+ }
+}
+
+.table-sortable > thead > tr > th:after,
+.table-sortable > thead > tr > th.sort-false:after,
+.table-sortable > thead > tr > th.sort-true:after {
+ font-family: FontAwesome;
+ padding-left: 5px;
+}
+
+.table-sortable > thead > tr > th:after {
+ content: "\f0dc";
+ color: #ddd;
+}
+.table-sortable > thead > tr > th.sort-false:after {
+ content: "\f0de";
+ color: #767676;
+}
+.table-sortable > thead > tr > th.sort-true:after {
+ content: "\f0dd";
+ color: #767676;
+}
+//.table-sortable > tbody > td >
+.table-sortable {
+ tbody{
+ td{
+ .btn-primary{
+ min-width: 100px;
+ }
+ }
+ }
+}
diff --git a/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.ts b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.ts
new file mode 100644
index 000000000..aa2030908
--- /dev/null
+++ b/vid-webpack-master/src/app/browseSdc/vid-table/vid-table.component.ts
@@ -0,0 +1,59 @@
+/**
+ * Created by cp2122 on 1/2/2018.
+ */
+import { Component, Input, EventEmitter, Output } from '@angular/core';
+export class CustomTableColumnDefinition {
+ public displayName = '';
+ public key = '';
+ public type? = 'text';
+ public text? = ''; // for button
+ public action? = ''; // for button - callback
+ public showCondition? = ''; // for button
+ // public binding = '';
+ public filter? = '';
+ // public computedClass: any;
+ // public isComputed = false;
+ // public isAnchor = false;
+ // public srefBinding = '';
+}
+
+export class CustomTableConfig {
+ public sortBy = '';
+ public sortOrder = 'desc';
+ public pageSize? = 10;
+ public pageNumber? = 1;
+ public totalCount? = 0;
+ public totalPages? = 0;
+ public maxSize? = 10;
+ public showSelectCheckbox? = false;
+ public showSelectAll? = true;
+ public showSort? = true;
+ public clientSort? = true;
+ public clientPaging? = true;
+ public stickyHeader? = true;
+ public stickyHeaderOffset? = 0;
+ public stickyContainer? = '';
+}
+
+export class CustomTableOptions {
+ public data: any[];
+ public columns: Array<CustomTableColumnDefinition>;
+ public config: CustomTableConfig;
+ // public callbacks: any;
+}
+@Component({
+ selector: 'vid-table',
+ styleUrls: ['./vid-table.component.scss'],
+ templateUrl: './vid-table.component.html'
+})
+
+export class VidTableComponent {
+ @Input() options: CustomTableOptions;
+ @Input() filterQuery = '';
+
+ @Output() clickEvent = new EventEmitter<any>();
+ clickBtn(row, actionName) {
+ row.actionName = actionName;
+ this.clickEvent.emit(row);
+ }
+}