From 0aa45260963dbf0a52726f791c3813928a1bcebc Mon Sep 17 00:00:00 2001
From: Danijel Andjelkovic <adanijel99@gmail.com>
Date: Thu, 24 Mar 2022 05:05:31 +0100
Subject: Izmenio ucitavanje dataseta na add-model stranici tako da se
 checkoboxovi i radio dugmad za odabir ulaznih i izlazne kolone ne ponavljaju.

---
 .../dataset-load/dataset-load.component.html       | 51 +++++-----------------
 .../dataset-load/dataset-load.component.ts         |  4 +-
 .../_elements/datatable/datatable.component.css    |  0
 .../_elements/datatable/datatable.component.html   | 29 ++++++++++++
 .../datatable/datatable.component.spec.ts          | 25 +++++++++++
 .../app/_elements/datatable/datatable.component.ts | 19 ++++++++
 6 files changed, 85 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/app/_elements/datatable/datatable.component.css
 create mode 100644 frontend/src/app/_elements/datatable/datatable.component.html
 create mode 100644 frontend/src/app/_elements/datatable/datatable.component.spec.ts
 create mode 100644 frontend/src/app/_elements/datatable/datatable.component.ts

(limited to 'frontend/src/app/_elements')

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 76fc40e2..b159c748 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -5,57 +5,28 @@
     </div>
     <div class="col-3">
       <label for="name" class="col-form-label">Naziv dataseta:</label>
-      <input type="text" class="form-control mb-3" 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>
+      <input type="text" class="form-control mb-3" 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>
     </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)]="delimiter"
-      (input)="update()">
+      <input list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2"
+        [(ngModel)]="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)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked>
+        <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox"
+          value="" id="checkboxHeader" checked>
       </label>
       <br>
-      <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
+      <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)"
+        accept=".csv">
     </div>
   </div>
-
-  <div class="table-responsive" *ngIf="hasInput">
-    <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light mt-4">
-      <thead>
-        <tr>
-          <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let row of csvRecords | slice:1:11">
-          <td *ngFor="let col of row">{{col}}</td>
-        </tr>
-      </tbody>
-    </table>
-
-    <table *ngIf="csvRecords.length > 0 && !hasHeader" class="table table-bordered table-light mt-4">
-      <tbody>
-        <tr *ngFor="let row of csvRecords | slice:0:10">
-          <td *ngFor="let col of row">{{col}}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <div *ngIf="csvRecords.length > 0 && hasInput" id="info">
-    . . . <br>
-    {{rowsNumber}} x {{colsNumber}}
-  </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 bccf13b7..7f432b9a 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -15,7 +15,6 @@ export class DatasetLoadComponent {
   delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
 
   hasHeader: boolean = true;
-
   hasInput: boolean = false;
 
   csvRecords: any[] = [];
@@ -39,10 +38,9 @@ export class DatasetLoadComponent {
       this.hasInput = false;
       return;
     }
-    else 
+    else
       this.hasInput = true;
 
-    console.log(this.files);
     this.update();
   }
 
diff --git a/frontend/src/app/_elements/datatable/datatable.component.css b/frontend/src/app/_elements/datatable/datatable.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html
new file mode 100644
index 00000000..2c469ecc
--- /dev/null
+++ b/frontend/src/app/_elements/datatable/datatable.component.html
@@ -0,0 +1,29 @@
+<div *ngIf="data">
+    <div class="table-responsive">
+        <table *ngIf="hasHeader" class="table table-bordered table-light mt-4">
+            <thead>
+                <tr>
+                    <th *ngFor="let item of data[0]; let i = index">{{item}}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let row of data | slice:1:11">
+                    <td *ngFor="let col of row">{{col}}</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light mt-4">
+            <tbody>
+                <tr *ngFor="let row of data | slice:0:10">
+                    <td *ngFor="let col of row">{{col}}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div id="info">
+        . . . <br>
+        {{data.length}} x {{data[0].length}}
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/datatable/datatable.component.spec.ts b/frontend/src/app/_elements/datatable/datatable.component.spec.ts
new file mode 100644
index 00000000..3cf06160
--- /dev/null
+++ b/frontend/src/app/_elements/datatable/datatable.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatatableComponent } from './datatable.component';
+
+describe('DatatableComponent', () => {
+  let component: DatatableComponent;
+  let fixture: ComponentFixture<DatatableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DatatableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatatableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/datatable/datatable.component.ts b/frontend/src/app/_elements/datatable/datatable.component.ts
new file mode 100644
index 00000000..d3740d83
--- /dev/null
+++ b/frontend/src/app/_elements/datatable/datatable.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-datatable',
+  templateUrl: './datatable.component.html',
+  styleUrls: ['./datatable.component.css']
+})
+export class DatatableComponent implements OnInit {
+
+  @Input() hasHeader?: boolean = true;
+
+  @Input() data?: any[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
-- 
cgit v1.2.3