diff options
Diffstat (limited to 'frontend/src/app/_elements/datatable')
| -rw-r--r-- | frontend/src/app/_elements/datatable/datatable.component.html | 70 | ||||
| -rw-r--r-- | frontend/src/app/_elements/datatable/datatable.component.ts | 18 |
2 files changed, 49 insertions, 39 deletions
diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html index b6cbd303..8db62aff 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.html +++ b/frontend/src/app/_elements/datatable/datatable.component.html @@ -1,39 +1,43 @@ -PRE IFA -{{hasInput}} -<div *ngIf="data && hasInput"> - PROSLO IF - <div class="table-responsive" style="height: 34rem; overflow: auto; border-radius: 5px;" class="mh-5"> - <div *ngIf="!loaded" style="background-color: #003459; width: 100%; height: 100%;" +<div *ngIf="tableData.hasInput"> + <div> + <div *ngIf="!tableData.loaded" backgroundColor="secondary" style="width: 100%; height: 100%;" class="d-flex justify-content-center align-items-center"> <app-loading></app-loading> </div> - <div *ngIf="loaded"> - <table *ngIf="data.length > 0 && hasHeader && data[0].length > 0" class="table table-bordered table-light"> - <thead> - <tr> - <th *ngFor="let item of data[0]; let i = index">{{item}}</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let row of data | slice:1"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> - - <table *ngIf="data.length > 0 && !hasHeader && data[0].length > 0" class="table table-bordered table-light"> - <tbody> - <tr *ngFor="let row of data"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> + <div *ngIf="tableData.loaded && tableData.data"> + <div id="info" *ngIf="tableData.data.length > 0 && tableData.data[0].length > 0" + class="d-flex flex-row justify-content-center align-items-center"> + <div class="fs-5 mb-3"> + Tabela {{tableData.numCols}}x{{tableData.numRows}} + </div> + </div> + <div class="table-responsive" style="overflow: auto; border-radius: 5px;"> + <table *ngIf="tableData.data.length > 0 && tableData.hasHeader && tableData.data[0].length > 0" class="table table-bordered table-light"> + <thead> + <tr> + <th *ngFor="let item of tableData.data[0]; let i = index">{{item}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let row of tableData.data | slice:1"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + <tr> + <td colspan="100" class="text-lg-center fs-6">+ {{tableData.numRows - 11}} redova...</td> + </tr> + </tbody> + </table> + <table *ngIf="tableData.data.length > 0 && !tableData.hasHeader && tableData.data[0].length > 0" class="table table-bordered table-light"> + <tbody> + <tr *ngFor="let row of tableData.data"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + <tr> + <td colspan="100" class="text-lg-center fs-6">+ {{tableData.numRows - 10}} redova...</td> + </tr> + </tbody> + </table> + </div> </div> </div> - - <div id="info" *ngIf="data.length > 0 && data[0].length > 0"> - <br> - <span *ngIf="hasHeader">{{data.length - 1}} x {{data[0].length}}</span> - <span *ngIf="!hasHeader">{{data.length}} x {{data[0].length}}</span> - </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/datatable/datatable.component.ts b/frontend/src/app/_elements/datatable/datatable.component.ts index 19fb204e..82374f4d 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.ts +++ b/frontend/src/app/_elements/datatable/datatable.component.ts @@ -7,12 +7,7 @@ import { Component, Input, OnInit } from '@angular/core'; }) export class DatatableComponent implements OnInit { - @Input() hasHeader?: boolean = true; - - @Input() data?: any[] = []; - - hasInput = false; - loaded = false; + @Input() tableData!: TableData; constructor() { } @@ -20,3 +15,14 @@ export class DatatableComponent implements OnInit { } } + +export class TableData { + constructor( + public hasHeader = true, + public hasInput = false, + public loaded = false, + public numRows = 0, + public numCols = 0, + public data?: any[][] + ) { } +} |