3 files changed, 88 insertions, 15 deletions
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.css b/frontend/src/app/_elements/item-dataset/item-dataset.component.css
index e69de29b..dc851671 100644
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.css
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.css
@@ -0,0 +1,23 @@
+.card{
+    margin-top:0;
+    padding: 0;
+}
+.p-2{
+    margin: 0;
+    padding: 0;
+}
+hr{
+    margin: 0;
+    padding: 0;
+}
+b{
+    margin-left: 5px;
+    margin-right: 10px;
+}
+th{
+    margin: 10px;
+    padding: 10px;
+}
+p{
+    text-align: justify;
+}
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.html b/frontend/src/app/_elements/item-dataset/item-dataset.component.html
index dc4221f4..11ff61c3 100644
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.html
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.html
@@ -1,16 +1,41 @@
 <div class="card" style="min-width: 12rem;">
-    <div class="card-header">
-        {{dataset.name}}
+<div class="card-header d-flex mb-2 justify-content-" style="padding: 0;margin: 0;">
+    
+        <div class=" p-2 float-left "><b   style="color: gray;">Naziv</b></div> 
+        <div class=" p-2 float-left"><b>{{dataset.name}}</b></div>
+</div>
+<div class="card-body overflow-hidden">
+    <b style="color: gray;">Opis</b>
+     <hr style="width: 20%;"> <p> {{dataset.description}}</p>
+    <hr>
+    <div class="d-flex justify-content-center">
+        <div  class=" p-2" >
+            <h4><span class="badge bg-secondary">{{dataset.extension}}</span></h4>
+        </div> 
+        <div class="p-2">
+            <span class="material-icons">{{visibleicon}}</span>
+        </div>
+        <div class="p-2">
+            <span class="material-icons">{{accessibleicon}}</span>
+        </div>
     </div>
-    <div class="card-body overflow-hidden">
-        <p class="card-text">
-            {{dataset.description}}
-        </p>
-        <table class="table table-bordered table-sm">
-            <thead>
-                <th scope="col" *ngFor="let column of dataset.header">{{column}}</th>
-                <!-- treba da se namesti da kad nema hedere, da korisnik unese nazive kolona pa da se taj heder prikaze  -->
-            </thead>
-        </table>
-    </div>
-</div>
-\ No newline at end of file
+    <hr>
+    <div class="col text-center">
+<button (click)=toggleDisplayDiv() class="btn btn-primary btn-sm active " mat-raised-button color="primary" style="margin: 0.5rem;">Kolone</button>
+        <div [hidden]="isShowDiv" style="overflow: scroll; overflow-y: hidden;">
+            <table class="table table-bordered table-md" >
+                <thead>
+                    <th scope="col" *ngFor="let column of dataset.columnInfo" >{{column.columnName}}</th> 
+                </thead>
+            </table>
+        </div>
+</div>
+    <table>
+        <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;">   <b> Kreirano</b></span></td><td>{{dataset.dateCreated |date}}</td></tr>
+        <tr><td><span class="material-icons">edit_calendar</span></td><td><span style="color: grey;">  <b> Poslednja izmena</b></span></td><td>{{dataset.lastUpdated |date}}</td></tr> 
+    </table>
+    
+</div>
+<div class="card-footer">	
+        
+    </div>
+\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts
index e12de34d..44b95310 100644
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts
@@ -9,7 +9,32 @@ import Dataset from 'src/app/_data/Dataset';
 export class ItemDatasetComponent {
 
   @Input() dataset: Dataset = new Dataset();
-
+  visibleicon='';
+  accessibleicon='';
+  isShowDiv = true;
+  toggleDisplayDiv() {
+    this.isShowDiv = !this.isShowDiv;
+  }
   constructor() {
   }
+  ngOnInit(): void {
+    if(this.dataset.isPublic==true)
+    {
+      this.visibleicon='visibility'
+    }
+    else
+    {
+      this.visibleicon='visibility_off';
+    }
+
+    if(this.dataset.accessibleByLink==true)
+    {
+      this.accessibleicon='link'
+    }
+    else
+    {
+      this.accessibleicon='link_off';
+    }
+  }
 }
+