Mergovana grana sa granom redesign. Sredjeni konflikti.

3 files changed, 81 insertions, 112 deletions

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 da31cfcb..7c7eb0d3 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
@@ -4,26 +4,23 @@
     position: relative;
 }
 
+.bottomBar {
+    width: 50%;
+    margin: 1rem;
+    align-items: flex-start;
+}
+
+.fileButton{
+    margin-top: 10px;
+}
+
 .file-container {
     border: 4px solid transparent;
     position: relative;
     margin-left: 3%;
-    margin-top: 3rem;
     width: 94%;
-    min-height: 300px;
-    height: 75%;
-}
-
-.fileButton {
-    position: absolute;
-    margin-top: -3rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.fileButton label {
-    margin-left: 10px;
+    min-height: 400px;
+    height: 95%;
 }
 
 .dottedClass {
@@ -31,6 +28,13 @@
     border-radius: 25px;
 }
 
+.icon-display {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(4);
+}
+
 .hidden {
     visibility: hidden;
 }
@@ -42,28 +46,7 @@
     opacity: 0;
 }
 
-.file input {
-    border-radius: 4px;
-    margin-top: -15px;
-    width: 100%;
-    height: 100%;
-}
-
-.icon-display {
-    position: absolute;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(4);
-}
-
-.bottomBar {
-    width: 50%;
-    margin: 1rem;
-    align-items: flex-start;
-}
-
-#bottomButton {
-    background-color: var(--ns-bg-dark-100);
-    width: 10%;
-    height: 65%;
+.file-container input{
+    border-radius: 5px;
+    left: 0%;
 }
\ 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 2176b130..5c2b29ba 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -1,74 +1,58 @@
-<div class="folderBox">
-
-    <div class="file-container" [ngClass]="{'dottedClass': !tableData.hasInput}">
-        
-        <i class="material-icons-outlined icon-display" [ngClass]="{'hidden': tableData.hasInput}">file_upload</i>
-        
-        <div class="fileButton">   
-                <button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
-                <label>{{filename}}</label>
-        </div>
-                
-        <input class="file" id="file-upload" (change)="changeListener($event)" #fileInput type="file"  accept=".csv">
-        
-        
-        <div class="mt-5 datatable">
-            <app-datatable [tableData]="tableData"></app-datatable>
-        </div>
-        
-        
-    </div>
-    
+<div class="folderBox" *ngIf="dataset">
+
+    <div class="row" style="margin-right: 0;">
+        <div class="bottomBar">
+            <div class="row">
+                <div class="col-sm mb-3">
+                    <div class="fileButton">
+                        <button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
+                        <label>{{filename}}</label>
+                    </div>
+                </div>
 
-    
-    
+                <div class="col-sm">
+                    <div role="group">
+                        <div class="row">
+                            <mat-form-field class="example-full-width" appearance="fill">
+                                <mat-label>Naziv</mat-label>
+                                <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name">
 
-    <div class="bottomBar">
-        <div class="row">
-            <div class="col-sm">
-                <div role="group">
-                    <div class="row">
-                        <mat-form-field class="example-full-width" appearance="fill">
-                            <mat-label>Naziv</mat-label>
-                            <input type="text" matInput value="{{dataset?.name}}">
-                            <!--[formControl]="nameFormControl"-->
 
-                            <mat-error *ngIf="nameFormControl.hasError('required')">
-                                Naziv je <strong>obavezan</strong>
-                            </mat-error>
-                        </mat-form-field>
+                                <mat-error *ngIf="nameFormControl.hasError('required')">
+                                    Naziv je <strong>obavezan</strong>
+                                </mat-error>
+                            </mat-form-field>
+                        </div>
                     </div>
                 </div>
+                <div class="col-sm">
+                    <mat-form-field appearance="fill">
+                        <mat-label>Delimiter</mat-label>
+                        <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (change)="update()" value=",">
+                            <mat-option *ngFor="let option of delimiterOptions" [value]="option">
+                                {{ option }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </div>
             </div>
-            <div class="col-sm mb-3">
+        </div>
+    </div>
 
-                <!--<input id="fileInput" class="form-control btn-lg" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
-                -->
-            </div>
-            <div class="col-sm">
 
+    <div class="row" style="margin-right: 0;">
+        <div class="file-container" [ngClass]="{'dottedClass': !tableData.hasInput}">
 
+            <i class="material-icons-outlined icon-display" [ngClass]="{'hidden': tableData.hasInput}">file_upload</i>
 
-                <mat-form-field appearance="fill">
-                    <mat-label>Delimiter</mat-label>
-                    <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (change)="update()" value=",">
-                        <mat-option *ngFor="let option of delimiterOptions" [value]="option">
-                            {{ option }}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
+            <input class="file" id="file-upload" (change)="changeListener($event)" #fileInput type="file" accept=".csv">
+
+            <div class="mt-5 datatable">
+                <app-datatable [tableData]="tableData"></app-datatable>
             </div>
-        </div>
-    </div>
 
-    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
 
+        </div>
     </div>
 
-
-    <!--
-    <div class="d-flex flex-row align-items-center justify-content-center w-100 my-2">
-        <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button>
-    </div>
--->
 </div>
\ No newline at end of file
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 63376524..62afaa47 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -5,7 +5,7 @@ import { ModelsService } from 'src/app/_services/models.service';
 import shared from 'src/app/Shared';
 import { DatatableComponent, TableData } from '../datatable/datatable.component';
 import { CsvParseService } from 'src/app/_services/csv-parse.service';
-import {FormControl, Validators} from '@angular/forms';
+import { FormControl, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-form-dataset',
@@ -18,7 +18,7 @@ export class FormDatasetComponent {
 
   nameFormControl = new FormControl('', [Validators.required, Validators.email]);
 
-  delimiterOptions: Array<string> = [",", ";",  "|", "razmak", "novi red"]; //podrazumevano ","
+  delimiterOptions: Array<string> = [",", ";", "|", "razmak", "novi red"]; //podrazumevano ","
 
   csvRecords: any[] = [];
   files: File[] = [];
@@ -29,7 +29,7 @@ export class FormDatasetComponent {
 
   tableData: TableData = new TableData();
 
-  @ViewChild('fileInput') fileInput! : ElementRef
+  @ViewChild('fileInput') fileInput!: ElementRef
 
   filename: String;
 
@@ -65,16 +65,13 @@ export class FormDatasetComponent {
       if (typeof fileReader.result === 'string') {
         const result = this.csv.csvToArray(fileReader.result, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter)
 
-        if (this.dataset.hasHeader)
-          this.csvRecords = result.splice(0, 11);
-        else
-          this.csvRecords = result.splice(0, 10);
+
+        this.csvRecords = result.splice(0, 11);
 
         this.colsNumber = result[0].length;
         this.rowsNumber = result.length;
 
-        this.tableData.data = this.csvRecords
-        this.tableData.hasHeader = this.dataset.hasHeader;
+        this.tableData.data = this.csvRecords;
         this.tableData.loaded = true;
         this.tableData.numCols = this.colsNumber;
         this.tableData.numRows = this.rowsNumber;
@@ -85,32 +82,37 @@ export class FormDatasetComponent {
     this.dataset.name = this.filename.slice(0, this.filename.length - 4);
   }
 
+  /*exportAsXLSX():void {
+    this.excelService.exportAsExcelFile(this.data, 'sample');
+  }*/
+
   checkAccessible() {
     if (this.dataset.isPublic)
       this.dataset.accessibleByLink = true;
   }
 
-  uploadDataset() {
+  uploadDataset(onSuccess: Function = (dataset: Dataset) => { }, onError: Function = () => { }) {
     if (this.files[0] == undefined) {
       shared.openDialog("Greška", "Niste izabrali fajl za učitavanje.");
       return;
     }
 
-    this.modelsService.uploadData(this.files[0]).subscribe((file) => {
+    return this.modelsService.uploadData(this.files[0]).subscribe((file) => {
       //console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id);
+      this.dataset._id = "";
       this.dataset.fileId = file._id;
       this.dataset.uploaderId = shared.userId;
 
       this.datasetsService.addDataset(this.dataset).subscribe((dataset) => {
-        shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira.");
+        onSuccess();
       }, (error) => {
-        shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset.");
+        onError();
       }); //kraj addDataset subscribe
     }, (error) => {
-
+      onError();
     }); //kraj uploadData subscribe
   }
 
-  
+
 
 }