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

3 files changed, 112 insertions, 94 deletions

diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.css b/frontend/src/app/_elements/dataset-load/dataset-load.component.css
index 05819702..54e0738e 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.css
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.css
@@ -1,6 +1,13 @@
-#divInputs {
-    margin-left: 20px;
+.btnType1 {
+    background-color: #003459;
+    color: white;
 }
-#divOutputs {
-    margin-left: 20px;
+.btnType2 {
+    background-color: white;
+    color: #003459;
+    border-color: #003459;
+}
+.selectedDatasetClass {
+    /*border-color: 2px solid #003459;*/
+    background-color: lightblue;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
index 76e46092..674e5990 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -1,44 +1,42 @@
 <div>
 
-  <div class="row mb-4">
-    <div class="col-2">
-    </div>
-    <div class="col-3">
-      <label for="name" class="col-form-label">Naziv dataseta:</label>
-      <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name">
-
-      <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
-      <div>
-        <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea>
-      </div>
+  <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset-->
 
-      <label for="checkboxIsPublic" class="form-check-label mt-3 mb-1">Želite li da dataset bude javan?
-        <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.isPublic" (change)="checkAccessible()" type="checkbox"
-          value="" id="checkboxIsPublic">
-      </label>    
-      
-      <label for="checkboxAccessibleByLink" class="form-check-label">Želite li da bude deljiv linkom? &nbsp;
-        <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.accessibleByLink" type="checkbox"
-          value="" id="checkboxAccessibleByLink">
-      </label>
-    </div>
+  <div class="col-12 d-flex my-5">
+    <h2 class="">Izvor podataka:</h2>
     <div class="col-1">
     </div>
-    <div class="col-4 mt-4">
-
-      <input list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2"
-        [(ngModel)]="dataset.delimiter" (input)="update()">
-      <datalist id=delimiterOptions>
-        <option *ngFor="let option of delimiterOptions">{{option}}</option>
-      </datalist>
+    <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()"
+        [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}">
+        Izaberite dataset iz kolekcije
+    </button>
+    <h3 class="mt-3 mx-3">ili</h3>
+    <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()"
+        [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}">
+        Dodajte novi dataset
+    </button>
+  </div>
+  <div class="px-5 my-2">
+      <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga"
+          [(ngModel)]="term">
+  </div>
+  <div class="px-5">
+      <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;">
+          <ul class="list-group">
+              <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term"
+                  [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
+                  <app-item-dataset name="usersDataset" [dataset]="dataset"
+                      (click)="selectThisDataset(dataset);"></app-item-dataset>
+              </li>
+          </ul>
+      </div>
+  </div>
 
-      <label for="type" class="form-check-label my-5">Da li .csv ima header?
-        <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="dataset.hasHeader" type="checkbox"
-          value="" id="checkboxHeader" checked>
-      </label>
-      <br>
-      <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)"
-        accept=".csv">
-    </div>
+  <app-add-new-dataset [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset"
+      (loaded)="datasetLoaded = true; selectedDataset = addNewDatasetComponent?.dataset; datasetFile = addNewDatasetComponent?.csvRecords; datasetHasHeader = addNewDatasetComponent?.dataset!.hasHeader">
+  </app-add-new-dataset>
+  <div class="px-5 mt-5">
+      <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable>
   </div>
+
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
index f9343117..ed71dc3c 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -1,6 +1,12 @@
-import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
-import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { AddNewDatasetComponent } from '../add-new-dataset/add-new-dataset.component';
+import { ModelsService } from 'src/app/_services/models.service';
+import shared from 'src/app/Shared';
 import Dataset from 'src/app/_data/Dataset';
+import { DatatableComponent } from 'src/app/_elements/datatable/datatable.component';
+import { DatasetsService } from 'src/app/_services/datasets.service';
+import { CsvParseService } from 'src/app/_services/csv-parse.service';
+import { Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-dataset-load',
@@ -9,70 +15,77 @@ import Dataset from 'src/app/_data/Dataset';
 })
 export class DatasetLoadComponent {
 
-  @Output() loaded = new EventEmitter<string>();
+  @Output() selectedDatasetChangeEvent = new EventEmitter<Dataset>();
 
-  delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
+  @ViewChild(AddNewDatasetComponent) addNewDatasetComponent?: AddNewDatasetComponent;
+  @ViewChild(AddNewDatasetComponent) datatable?: DatatableComponent;
+  datasetLoaded: boolean = false;
+  selectedDatasetLoaded: boolean = false;
 
-  //hasHeader: boolean = true;
-  hasInput: boolean = false;
+  showMyDatasets: boolean = true;
+  myDatasets?: Dataset[];
+  existingDatasetSelected: boolean = false;
+  selectedDataset?: Dataset;
+  otherDataset?: Dataset;
+  otherDatasetFile?: any[];
+  datasetFile?: any[];
+  datasetHasHeader?: boolean = true;
 
-  csvRecords: any[] = [];
-  files: File[] = [];
-  rowsNumber: number = 0;
-  colsNumber: number = 0;
+  term: string = "";
 
-  dataset: Dataset; //dodaj ! potencijalno
-
-  constructor(private ngxCsvParser: NgxCsvParser) {
-    this.dataset = new Dataset();
+  constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) {
+    this.datasets.getMyDatasets().subscribe((datasets) => {
+      this.myDatasets = datasets;
+    });
   }
 
-  @ViewChild('fileImportInput', { static: false }) fileImportInput: any;
-
-  changeListener($event: any): void {
-    this.files = $event.srcElement.files;
-    if (this.files.length == 0 || this.files[0] == null) {
-      //console.log("NEMA FAJLA");
-      //this.loaded.emit("not loaded");
-      this.hasInput = false;
-      return;
-    }
-    else
-      this.hasInput = true;
-
-    this.update();
+  viewMyDatasetsForm() {
+    this.showMyDatasets = true;
+    this.resetSelectedDataset();
+    //this.resetCbsAndRbs();        //TREBA DA SE DESI
+  }
+  viewNewDatasetForm() {
+    this.showMyDatasets = false;
+    this.resetSelectedDataset();
+    //this.resetCbsAndRbs();        //TREBA DA SE DESI
   }
 
-  update() {
-
-    if (this.files.length < 1)
-      return;
-
-    this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter })
-      .pipe().subscribe((result) => {
-
-        console.log('Result', result);
-        if (result.constructor === Array) {
-          this.csvRecords = result;
-          if (this.dataset.hasHeader)
-            this.rowsNumber = this.csvRecords.length - 1;
+  selectThisDataset(dataset: Dataset) {
+    this.selectedDataset = dataset;
+    this.selectedDatasetLoaded = false;
+    this.existingDatasetSelected = true;
+    this.datasetHasHeader = this.selectedDataset.hasHeader;
+
+    this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => {
+      if (file) {
+        this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
+        /*for (let i = this.datasetFile.length - 1; i >= 0; i--) {  //moguce da je vise redova na kraju fajla prazno i sl.
+          if (this.datasetFile[i].length != this.datasetFile[0].length)
+            this.datasetFile[i].pop();
           else
-            this.rowsNumber = this.csvRecords.length;
-          this.colsNumber = this.csvRecords[0].length;
+            break; //nema potrebe dalje
+        }*/
+        //console.log(this.datasetFile);
+        //this.resetCbsAndRbs();                        //TREBA DA SE DESI
+        //this.refreshThreeNullValueRadioOptions();       //TREBA DA SE DESI
+        this.selectedDatasetLoaded = true;
+        //this.scrollToNextForm();
+      }
+    });
+  }
 
-          if (this.dataset.hasHeader) //kasnije dodati opciju kada nema header da korisnik rucno unosi header-e
-            this.dataset.header = this.csvRecords[0];
+  resetSelectedDataset(): boolean {
+    const temp = this.selectedDataset;
+    this.selectedDataset = this.otherDataset;
+    this.otherDataset = temp;
+    const tempFile = this.datasetFile;
+    this.datasetFile = this.otherDatasetFile;
+    this.otherDatasetFile = tempFile;
 
-          this.loaded.emit("loaded");
-        }
-      }, (error: NgxCSVParserError) => {
-        console.log('Error', error);
-      });
-  }
+    this.selectedDatasetChangeEvent.emit(this.selectedDataset);
 
-  checkAccessible() {
-    if (this.dataset.isPublic)
-      this.dataset.accessibleByLink = true;
+    return true;
   }
 
+
 }