From 19fd492a03ea48571d6aaab9e75108a82599ef0a Mon Sep 17 00:00:00 2001
From: Danijel Andjelkovic <adanijel99@gmail.com>
Date: Wed, 6 Apr 2022 13:07:23 +0200
Subject: Dodao klasu za notifikacije i dizajn. Dodao spinner u datatable
 komponentu.

---
 .../_elements/datatable/datatable.component.html   | 46 ++++++++++++----------
 .../app/_elements/datatable/datatable.component.ts |  2 +
 2 files changed, 28 insertions(+), 20 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 bd9e7a13..8fcd44ac 100644
--- a/frontend/src/app/_elements/datatable/datatable.component.html
+++ b/frontend/src/app/_elements/datatable/datatable.component.html
@@ -1,25 +1,31 @@
 <div *ngIf="data">
-    <div class="table-responsive" style="max-height: 50vh; max-width: 100%; overflow: scroll;">
-        <table *ngIf="hasHeader" 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>
+    <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%;"
+            class="d-flex justify-content-center align-items-center">
+            <app-loading></app-loading>
+        </div>
+        <div *ngIf="loaded">
+            <table *ngIf="hasHeader" 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" class="table table-bordered table-light">
-            <tbody>
-                <tr *ngFor="let row of data">
-                    <td *ngFor="let col of row">{{col}}</td>
-                </tr>
-            </tbody>
-        </table>
+            <table *ngIf="data.length > 0 && !hasHeader" 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>
     </div>
 
     <div id="info">
diff --git a/frontend/src/app/_elements/datatable/datatable.component.ts b/frontend/src/app/_elements/datatable/datatable.component.ts
index d3740d83..3343f6f0 100644
--- a/frontend/src/app/_elements/datatable/datatable.component.ts
+++ b/frontend/src/app/_elements/datatable/datatable.component.ts
@@ -11,6 +11,8 @@ export class DatatableComponent implements OnInit {
 
   @Input() data?: any[] = [];
 
+  loaded = false;
+
   constructor() { }
 
   ngOnInit(): void {
-- 
cgit v1.2.3