Merge branch 'redesign' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into redesign

7 files changed, 85 insertions, 11 deletions

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index ada2dba0..3ecba343 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -177,7 +177,7 @@
 
 .file-content {
     width: 100%;
-    height: 100%;
+    height: 95%;
     position: relative;
 }
 
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 8896e7e5..db4f28f0 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -78,7 +78,12 @@
                         <div class="mx-2 hover-show" *ngIf="selectedTab !== TabType.PublicDatasets && selectedTab !== TabType.PublicModels">
                             <button class="btn-clear file-button" (click)="deleteFile(file, $event)">
                                 <mat-icon>delete</mat-icon>
-                            </button>
+                            </button>   
+                        </div>
+                        <div class="mx-2 hover-show" *ngIf="selectedTab == TabType.PublicDatasets || selectedTab == TabType.PublicModels">
+                            <button  class="btn-clear file-button" (click)="addFile(file, $event)">
+                                <mat-icon>note_add</mat-icon>
+                            </button>   
                         </div>
                     </div>
                     <div *ngIf="type == FolderType.Experiment" class="list-view">
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 665659a8..fff5a25d 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -65,8 +65,10 @@ export class FolderComponent implements AfterViewInit {
   }
 
   displayFile() {
-    if (this.type == FolderType.Dataset)
+    if (this.type == FolderType.Dataset){
       this.formDataset.dataset = <Dataset>this.fileToDisplay;
+      this.formDataset.existingFlag=false;
+    }
     else if (this.type == FolderType.Model)
       this.formModel.newModel = <Model>this.fileToDisplay;
   }
@@ -93,11 +95,13 @@ export class FolderComponent implements AfterViewInit {
     this.newFileSelected = true;
     this.listView = false;
     this.displayFile();
-    if (this.type == FolderType.Dataset)
+    if (this.type == FolderType.Dataset){
       this.formDataset.clear();
+    }
   }
 
   selectFile(file?: FolderFile) {
+    this.formDataset.resetPagging();
     this.selectedFile = file;
     this.fileToDisplay = file;
     if (this.type == FolderType.Experiment && file) {
@@ -292,6 +296,32 @@ export class FolderComponent implements AfterViewInit {
     }
   }
 
+  addFile(file: FolderFile, event: Event) {
+    event.stopPropagation();
+    switch (this.type) {
+      case FolderType.Dataset:
+        (<Dataset>file)._id="";
+        
+        (<Dataset>file).isPublic=false;
+        this.datasetsService.addDataset(<Dataset>file).subscribe((response) => {
+          this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
+          this.refreshFiles(null);
+        });
+        break;
+      case FolderType.Model:
+        this.modelsService.addModel(<Model>file).subscribe((response) => {
+          this.refreshFiles(null);
+        });
+        break;
+      case FolderType.Experiment:
+        // this.experimentsService.addExperiment(<Model>file).subscribe((response) => {
+        //   console.log(response);
+        // });
+        //todo delete za predictor
+        break;
+    }
+  }
+
   folders: { [tab: number]: FolderFile[] } = {};
 
   tabTitles: { [tab: number]: string } = {
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 079711d0..99ed5d40 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
@@ -63,4 +63,8 @@
 .file-container input{
     border-radius: 5px;
     left: 0%;
+}
+
+.naslov{
+    font-size: 30px;
 }
\ No newline at end of file
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 b96276bd..9f8e9e6f 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -1,6 +1,5 @@
 <div class="folderBox" *ngIf="dataset">
-
-    
+ 
         <div class="topBar">
                 <div class="kolona mb-3">
                     <div class="fileButton">
@@ -35,7 +34,7 @@
         </div>
         
     <div class="row" *ngIf="firstInput">
-        <label class=" mt-5">{{filename}}</label>
+        <label class="naslov mt-2">{{filename}}</label>
 
     </div>
 
@@ -43,10 +42,16 @@
         <div class="file-container" [ngClass]="{'dottedClass': !tableData.hasInput}">
 
             <i class="material-icons-outlined icon-display" [ngClass]="{'hidden': tableData.hasInput}">file_upload</i>
+            
 
             <input class="file" id="file-upload" (change)="changeListener($event)" #fileInput type="file" accept=".csv">
 
             <div class="mt-5 datatable">
+                <div [ngClass]="{'hidden': (!existingFlag)}" class="text-center">
+                    <button mat-button  (click)="goBack()"><mat-icon>keyboard_arrow_left</mat-icon></button>
+                    <div style="display: inline;">{{(this.begin/10)+1}}</div>
+                    <button mat-button (click)="goForward()"><mat-icon>keyboard_arrow_right</mat-icon></button>
+                </div>
                 <app-datatable [tableData]="tableData"></app-datatable>
             </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 94ef9905..79fbe2c9 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -24,6 +24,9 @@ export class FormDatasetComponent {
   files: File[] = [];
   rowsNumber: number = 0;
   colsNumber: number = 0;
+  begin:number=0;
+  end:number=10;
+  existingFlag:boolean=false;
 
   @Input() dataset: Dataset; //dodaj ! potencijalno
 
@@ -40,7 +43,21 @@ export class FormDatasetComponent {
   }
 
   //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo?
+  resetPagging(){
+    this.begin=0;
+  }
+  goBack(){
+    if(this.begin-10<=0)
+      this.begin=0;
+    else
+      this.begin-=10;
+    this.loadExisting();
 
+  }
+  goForward(){
+    this.begin+=10;
+    this.loadExisting();
+  }
   clear(){
     this.tableData.hasInput = false;
   }
@@ -56,6 +73,7 @@ export class FormDatasetComponent {
 
     this.filename = this.files[0].name;
     this.tableData.loaded = false;
+    this.existingFlag=false;
     this.update();
   }
 
@@ -64,7 +82,6 @@ export class FormDatasetComponent {
   update() {
 
     this.firstInput = true
-
     if (this.files.length < 1)
       return;
 
@@ -91,20 +108,27 @@ export class FormDatasetComponent {
   }
 
   loadExisting(){
+    this.existingFlag=true;
     this.firstInput = false;
 
     this.tableData.hasInput = true;
     this.tableData.loaded = false;
-
-    this.datasetsService.getDatasetFile(this.dataset.fileId).subscribe((file: string | undefined) => {
+    this.datasetsService.getDatasetHeader(this.dataset.fileId).subscribe((header: string | undefined)=>{
+    
+    this.datasetsService.getDatasetFilePaging(this.dataset.fileId,this.begin,this.end).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 == "novi red") ? "\t" : this.dataset.delimiter);
+        this.tableData.data = this.csv.csvToArray(header+'\n'+file, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter);
 
       }
+      else{
+        this.begin-=10;
+        this.loadExisting();
+      }
     });
+  });
 
     
   }
diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts
index 2211996f..f5677097 100644
--- a/frontend/src/app/_services/datasets.service.ts
+++ b/frontend/src/app/_services/datasets.service.ts
@@ -27,6 +27,12 @@ export class DatasetsService {
   getDatasetFile(fileId: any): any {
     return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/${fileId}/-1/11`, { headers: this.authService.authHeader(), responseType: 'text' });
   }
+  getDatasetFilePaging(fileId:any,begin:any,end:any){
+    return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/${fileId}/${begin}/${end}`, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
+  getDatasetHeader(fileId:any){
+    return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/${fileId}/-1/1`, { 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' });
   }