From bd13fc85e30778e0ce84ca3f066196c3e08a2e13 Mon Sep 17 00:00:00 2001
From: Ivan Ljubisavljevic <ivan996sk@gmail.com>
Date: Thu, 5 May 2022 01:34:20 +0200
Subject: Dataset form - ucitavanje postojeceg

---
 .../_elements/datatable/datatable.component.html   | 20 ++++++++++------
 .../src/app/_elements/folder/folder.component.ts   |  5 ++++
 .../form-dataset/form-dataset.component.css        | 16 +++++++++++--
 .../form-dataset/form-dataset.component.html       | 15 ++++++++----
 .../form-dataset/form-dataset.component.ts         | 27 ++++++++++++++++++++++
 frontend/src/app/_services/datasets.service.ts     |  2 +-
 6 files changed, 71 insertions(+), 14 deletions(-)

(limited to 'frontend/src')

diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html
index 17a187ef..27d66dd3 100644
--- a/frontend/src/app/_elements/datatable/datatable.component.html
+++ b/frontend/src/app/_elements/datatable/datatable.component.html
@@ -4,11 +4,6 @@
             <app-loading></app-loading>
         </div>
         <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 style="border-radius: 5px; overflow-x: auto; overflow-y: hidden;">
                 <table *ngIf="tableData.data.length && tableData.data[0].length > 0" class="table table-responsive table-sm text-offwhite row-height">
                     <thead>
@@ -23,8 +18,19 @@
                     </tbody>
                 </table>
             </div>
-            <div class="footer-center" >
-                <div>+ {{tableData.numRows - 11}} redova...</div>
+            <div class="row" >
+                <div id="info" *ngIf="tableData.data.length > 0 && tableData.data[0].length > 0" class="d-flex flex-row justify-content-right align-items-right col-sm">
+                    <div class=" mb-3">
+                        Tabela {{tableData.numCols}} x {{tableData.numRows}}
+                    </div>
+                </div>
+                <div class="col-sm"></div>
+                <div class="col-sm"></div>
+                <div class="footer-center col-sm">Prikazano 10/{{tableData.numRows}} redova</div>
+                <div class="col-sm"></div>
+                <div class="col-sm"></div>
+                <div class="col-sm"></div>
+                
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index d5a7a85c..b3c70d1d 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -91,6 +91,8 @@ export class FolderComponent implements AfterViewInit {
     this.newFileSelected = true;
     this.listView = false;
     this.displayFile();
+    if(this.type == FolderType.Dataset)
+      this.formDataset.clear();
   }
 
   selectFile(file?: FolderFile) {
@@ -101,6 +103,9 @@ export class FolderComponent implements AfterViewInit {
     this.selectedFileChanged.emit(this.selectedFile);
     this.selectTab(TabType.File);
     this.displayFile();
+
+    if(this.type == FolderType.Dataset)
+      this.formDataset.loadExisting();
   }
 
   createNewFile() {
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.css b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
index 7c7eb0d3..953daa0c 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
@@ -4,12 +4,24 @@
     position: relative;
 }
 
-.bottomBar {
-    width: 50%;
+.topBar {
+    width: 100%;
     margin: 1rem;
     align-items: flex-start;
 }
 
+.topBar label{
+    font-size: 30px;
+}
+.topBar mat-form-field{
+    width: 250px;
+}
+
+.toptop{
+    margin-left: 1.5%; 
+    width: 50%;
+}
+
 .fileButton{
     margin-top: 10px;
 }
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
index 5c2b29ba..281f9c05 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -1,12 +1,12 @@
 <div class="folderBox" *ngIf="dataset">
 
     <div class="row" style="margin-right: 0;">
-        <div class="bottomBar">
-            <div class="row">
+        <div class="topBar">
+            <div class="row toptop">
                 <div class="col-sm mb-3">
                     <div class="fileButton">
-                        <button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
-                        <label>{{filename}}</label>
+                        <button type="button" mat-raised-button (click)="fileInput.click()">Dodaj izvor podataka</button>
+                        
                     </div>
                 </div>
 
@@ -35,6 +35,13 @@
                         </mat-select>
                     </mat-form-field>
                 </div>
+                <div class="col-sm">
+                    
+                </div>
+            </div>
+            <div class="row" *ngIf="firstInput">
+                <label class=" mt-5">{{filename}}</label>
+
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
index 62afaa47..1eed2cdc 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -41,6 +41,10 @@ export class FormDatasetComponent {
 
   //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo?
 
+  clear(){
+    this.tableData.hasInput = false;
+  }
+
   changeListener($event: any): void {
     this.files = $event.srcElement.files;
     if (this.files.length == 0 || this.files[0] == null) {
@@ -55,8 +59,12 @@ export class FormDatasetComponent {
     this.update();
   }
 
+  firstInput = false;
+
   update() {
 
+    this.firstInput = true
+
     if (this.files.length < 1)
       return;
 
@@ -82,6 +90,25 @@ export class FormDatasetComponent {
     this.dataset.name = this.filename.slice(0, this.filename.length - 4);
   }
 
+  loadExisting(){
+    this.firstInput = false;
+
+    this.tableData.hasInput = true;
+    this.tableData.loaded = false;
+
+    this.datasetsService.getDatasetFile(this.dataset.fileId).subscribe((file: string | undefined) => {
+      if (file) {
+        this.tableData.loaded = true;
+        this.tableData.numRows = this.dataset.rowCount;
+        this.tableData.numCols = this.dataset.columnInfo.length;
+        this.tableData.data = this.csv.csvToArray(file, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter);
+
+      }
+    });
+
+    
+  }
+
   /*exportAsXLSX():void {
     this.excelService.exportAsExcelFile(this.data, 'sample');
   }*/
diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts
index d3f646cb..2211996f 100644
--- a/frontend/src/app/_services/datasets.service.ts
+++ b/frontend/src/app/_services/datasets.service.ts
@@ -25,7 +25,7 @@ export class DatasetsService {
   }
 
   getDatasetFile(fileId: any): any {
-    return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/${fileId}`, { headers: this.authService.authHeader(), responseType: 'text' });
+    return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/${fileId}/-1/11`, { headers: this.authService.authHeader(), responseType: 'text' });
   }
   getDatasetFilePartial(fileId: any, startRow: number, rowNum: number): Observable<any> {
     return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/${fileId}/${startRow}/${rowNum}`, { headers: this.authService.authHeader(), responseType: 'text' });
-- 
cgit v1.2.3