From 40e4cf81dc29d2f3a44cd56a58a5181a64295d5f Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Thu, 19 May 2022 21:10:36 +0200
Subject: Dodao spiner dok se izvrsavaju neke akcije. Promenio brisanje u
 folderu tako da se prvo postavi pitanje korisniku da li ste sigurni... Dodao
 pracenje da li se model/dataset promenio i mogucnost da se updateuje isti.

---
 .../form-dataset/form-dataset.component.html       | 63 +++++++++---------
 .../form-dataset/form-dataset.component.ts         | 74 +++++++++++-----------
 2 files changed, 68 insertions(+), 69 deletions(-)

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

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 7be838f1..78bb4bd1 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -1,49 +1,48 @@
 <div class="folderBox" *ngIf="dataset">
- 
-        <div class="topBar">
-                <div class="kolona mb-3">
-                    <div class="fileButton">
-                        <button type="button" mat-raised-button (click)="fileInput.click()"><span *ngIf="!firstInput">Dodaj izvor podataka</span><span *ngIf="firstInput">{{filename}}</span></button>
-                    </div>
-                </div>
+    <div class="topBar">
+        <div class="kolona mb-3">
+            <div class="fileButton">
+                <button type="button" mat-raised-button (click)="fileInput.click()"><span *ngIf="!firstInput">Dodaj izvor podataka</span><span *ngIf="firstInput">{{filename}}</span></button>
+            </div>
+        </div>
 
-                <div class="kolona">
-                    <div role="group">
-                            <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="kolona">
+            <div role="group">
+                <mat-form-field class="example-full-width" appearance="fill">
+                    <mat-label>Naziv</mat-label>
+                    <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name" (change)="editEvent.emit()">
 
 
-                                <mat-error *ngIf="nameFormControl.hasError('required')">
-                                    Naziv je <strong>obavezan</strong>
-                                </mat-error>
-                            </mat-form-field>
-                    </div>
-                </div>
-                <div class="kolona">
-                    <mat-form-field appearance="fill">
-                        <mat-label>Delimiter</mat-label>
-                        <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (selectionChange)="update()" value=",">
-                            <mat-option *ngFor="let option of delimiterOptions" [value]="option">
-                                {{ option }}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </div>
+                    <mat-error *ngIf="nameFormControl.hasError('required')">
+                        Naziv je <strong>obavezan</strong>
+                    </mat-error>
+                </mat-form-field>
+            </div>
+        </div>
+        <div class="kolona">
+            <mat-form-field appearance="fill">
+                <mat-label>Delimiter</mat-label>
+                <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (selectionChange)="update(); editEvent.emit();" value=",">
+                    <mat-option *ngFor="let option of delimiterOptions" [value]="option">
+                        {{ option }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
         </div>
-     
+    </div>
+
 
     <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>
-            
 
-            <input class="file" id="file-upload" (change)="changeListener($event)" #fileInput type="file" accept=".csv">
+
+            <input class="file" id="file-upload" (change)="changeListener($event)" (valueChange)="dataset.isPreProcess = false; editEvent.emit()" #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>
+                    <button mat-button (click)="goBack()"><mat-icon>keyboard_arrow_left</mat-icon></button>
                     <div style="display: inline;">{{(this.begin/10)+1}}...{{getPage()}}</div>
                     <button mat-button (click)="goForward()"><mat-icon>keyboard_arrow_right</mat-icon></button>
                 </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 19c0083c..35d68526 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -24,11 +24,12 @@ export class FormDatasetComponent {
   files: File[] = [];
   rowsNumber: number = 0;
   colsNumber: number = 0;
-  begin:number=0;
-  step:number=10;
-  existingFlag:boolean=false;
+  begin: number = 0;
+  step: number = 10;
+  existingFlag: boolean = false;
 
   @Input() dataset: Dataset; //dodaj ! potencijalno
+  @Output() editEvent = new EventEmitter();
 
   tableData: TableData = new TableData();
 
@@ -43,31 +44,30 @@ export class FormDatasetComponent {
   }
 
   //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo?
-  resetPagging(){
-    this.begin=0;
+  resetPagging() {
+    this.begin = 0;
   }
-  goBack(){
-    if(this.begin-10<0)
-      this.begin=0;
-    else
-    {
-      this.begin-=10;
+  goBack() {
+    if (this.begin - 10 < 0)
+      this.begin = 0;
+    else {
+      this.begin -= 10;
       this.loadExisting();
     }
 
   }
-  goForward(){
-    this.begin+=10;
-    if(this.dataset.rowCount<this.begin)
-      this.begin-=10;
+  goForward() {
+    this.begin += 10;
+    if (this.dataset.rowCount < this.begin)
+      this.begin -= 10;
     else
       this.loadExisting();
   }
-  clear(){
+  clear() {
     this.tableData.hasInput = false;
   }
-  getPage(){
-    return Math.ceil(this.dataset.rowCount/10)
+  getPage() {
+    return Math.ceil(this.dataset.rowCount / 10)
   }
 
   changeListener($event: any): void {
@@ -81,7 +81,7 @@ export class FormDatasetComponent {
 
     this.filename = this.files[0].name;
     this.tableData.loaded = false;
-    this.existingFlag=false;
+    this.existingFlag = false;
     this.update();
   }
 
@@ -115,30 +115,30 @@ export class FormDatasetComponent {
     this.dataset.name = this.filename.slice(0, this.filename.length - 4);
   }
 
-  loadExisting(){
-    this.existingFlag=true;
+  loadExisting() {
+    this.existingFlag = true;
     this.firstInput = false;
 
     this.tableData.hasInput = true;
     this.tableData.loaded = false;
-    this.datasetsService.getDatasetHeader(this.dataset.fileId).subscribe((header: string | undefined)=>{
-    
-    this.datasetsService.getDatasetFilePaging(this.dataset.fileId,this.begin,this.step).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(header+'\n'+file, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter);
-
-      }
-      else{
-        this.begin-=10;
-        this.loadExisting();
-      }
+    this.datasetsService.getDatasetHeader(this.dataset.fileId).subscribe((header: string | undefined) => {
+
+      this.datasetsService.getDatasetFilePaging(this.dataset.fileId, this.begin, this.step).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(header + '\n' + file, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter);
+
+        }
+        else {
+          this.begin -= 10;
+          this.loadExisting();
+        }
+      });
     });
-  });
 
-    
+
   }
 
   /*exportAsXLSX():void {
-- 
cgit v1.2.3