From fef66d17b52568bb64a8857c3dd8feacfde57297 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Tue, 5 Apr 2022 17:33:43 +0200
Subject: Kompletna reorganizacija komponenti za izbor dataseta pri dodavanju
 modela. Dodata komponenta add-new-dataset, dataset-load.component izmenjena,
 preostala add-model da se uskladi.

---
 .../add-new-dataset/add-new-dataset.component.css  |  0
 .../add-new-dataset/add-new-dataset.component.html | 41 ++++++++++++
 .../add-new-dataset.component.spec.ts              | 25 +++++++
 .../add-new-dataset/add-new-dataset.component.ts   | 78 ++++++++++++++++++++++
 4 files changed, 144 insertions(+)
 create mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css
 create mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html
 create mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts
 create mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts

(limited to 'frontend/src/app/_elements/add-new-dataset')

diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html
new file mode 100644
index 00000000..dfeb4f62
--- /dev/null
+++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html
@@ -0,0 +1,41 @@
+<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>
+
+      <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-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>
+
+      <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>
+  </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts
new file mode 100644
index 00000000..a9ea25b4
--- /dev/null
+++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddNewDatasetComponent } from './add-new-dataset.component';
+
+describe('AddNewDatasetComponent', () => {
+  let component: AddNewDatasetComponent;
+  let fixture: ComponentFixture<AddNewDatasetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddNewDatasetComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddNewDatasetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
new file mode 100644
index 00000000..fceb53cf
--- /dev/null
+++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
@@ -0,0 +1,78 @@
+import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
+import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
+import Dataset from 'src/app/_data/Dataset';
+
+@Component({
+  selector: 'app-add-new-dataset',
+  templateUrl: './add-new-dataset.component.html',
+  styleUrls: ['./add-new-dataset.component.css']
+})
+export class AddNewDatasetComponent {
+
+  @Output() loaded = new EventEmitter<string>();
+
+  delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
+
+  //hasHeader: boolean = true;
+  hasInput: boolean = false;
+
+  csvRecords: any[] = [];
+  files: File[] = [];
+  rowsNumber: number = 0;
+  colsNumber: number = 0;
+
+  dataset: Dataset; //dodaj ! potencijalno
+
+  constructor(private ngxCsvParser: NgxCsvParser) {
+    this.dataset = new Dataset();
+  }
+
+  //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo?
+
+  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();
+  }
+
+  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;
+          else
+            this.rowsNumber = this.csvRecords.length;
+          this.colsNumber = this.csvRecords[0].length;
+
+          if (this.dataset.hasHeader) //kasnije dodati opciju kada nema header da korisnik rucno unosi header-e
+            this.dataset.header = this.csvRecords[0];
+
+          this.loaded.emit("loaded");
+        }
+      }, (error: NgxCSVParserError) => {
+        console.log('Error', error);
+      });
+  }
+
+  checkAccessible() {
+    if (this.dataset.isPublic)
+      this.dataset.accessibleByLink = true;
+  }
+
+}
-- 
cgit v1.2.3