From a2275d2796331ff824f0f3ce05b9c2f92ad728c8 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Tue, 12 Apr 2022 21:12:10 +0200
Subject: Ispravio datatable komponentu koja se nije ucitavala za postojeci
 dataset. Dodao broj redova u klasu dataset posto vise nije isti kao broj
 elemenata podataka koje prikazujemo.

---
 .../_elements/datatable/datatable.component.html   | 70 ++++++++++++----------
 .../app/_elements/datatable/datatable.component.ts | 18 ++++--
 2 files changed, 49 insertions(+), 39 deletions(-)

(limited to 'frontend/src/app/_elements/datatable')

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[][]
+  ) { }
+}
-- 
cgit v1.2.3