From 31e3b846eda94de86e249956d96c54aaa92eb0c6 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Tue, 26 Apr 2022 21:11:43 +0200
Subject: Column-table: afterview init. Menjani theme.css i columne-table.css,
 malo sredjen dizajn tabele.

---
 .../column-table/column-table.component.css        | 28 +++++++++++++-
 .../column-table/column-table.component.html       | 21 ++++++++---
 .../column-table/column-table.component.ts         | 44 +++++++++++++++++++---
 3 files changed, 81 insertions(+), 12 deletions(-)

(limited to 'frontend/src/app/_elements/column-table')

diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css
index f65d7c3d..6b62dd56 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -1,5 +1,31 @@
-table {
+table.fixed {
+    table-layout: fixed;
     display: block;
     overflow-x: auto;
     white-space: nowrap;
+}
+
+table.fixed td {
+    overflow: hidden;
+    max-width: 200px;
+    vertical-align: middle;
+}
+
+table.fixed th {
+    overflow: hidden;
+    max-width: 350px;
+    vertical-align: middle;
+}
+
+table.fixed th:first-child {
+    text-align: center;
+    background-color: var(--ns-primary-25);
+}
+
+.columnNames {
+    background-color: var(--ns-primary-50) !important;
+}
+
+.brighter {
+    background-color: var(--ns-primary) !important;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html
index e6d9442c..2b2fd537 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -1,8 +1,8 @@
-<table *ngIf="dataset && experiment" class="table text-offwhite">
+<table *ngIf="dataset && experiment" class="table text-offwhite fixed">
     <thead>
         <tr>
             <th>Naziv</th>
-            <th *ngFor="let colInfo of dataset.columnInfo; let i = index">
+            <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
                 #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
                 <mat-checkbox checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
             </th>
@@ -29,7 +29,7 @@
             </td>
         </tr>
         <tr>
-            <th>Statistika</th>
+            <th class="brighter">Statistika</th>
             <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
                 <span *ngIf="colInfo.isNumber">
                     Mean: {{colInfo.mean}}<br>
@@ -49,7 +49,7 @@
             </td>
         </tr>
         <tr>
-            <th (click)="openEncodingDialog()">Enkoding&nbsp;
+            <th class="brighter" (click)="openEncodingDialog()">Enkoding&nbsp;
                 <span class="material-icons-round">settings</span>
             </th>
             <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
@@ -63,12 +63,14 @@
             </td>
         </tr>
         <tr>
-            <th (click)="openMissingValuesDialog()">Regulisanje nedostajućih vrednosti&nbsp;
+            <th class="brighter" (click)="openMissingValuesDialog()">Regulisanje<br>nedostajućih<br>vrednosti<br>
                 <span class="material-icons-round">settings</span>
             </th>
             <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
 
-                <button mat-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}">Prikaži opcije</button>
+                <button mat-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu>
+                    Prikaži opcije<span class="material-icons">arrow_drop_down</span>
+                </button>
                 <mat-menu #menu="matMenu">
                     <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteColumns)" value={{colInfo.columnName}}>Obriši kolonu</button>
                     <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteRows)" value={{colInfo.columnName}}>Obriši redove</button>
@@ -97,5 +99,12 @@
 
             </td>
         </tr>
+        <tr *ngFor="let element of [1, 2]; let i = index">
+            <th *ngIf="i == 0" rowspan="2">Vrednosti</th>
+
+            <td *ngFor="let colInfo of dataset.columnInfo; let j = index">
+                <!--<app-datatable [data]=""></app-datatable>-->ok
+            </td>
+        </tr>
     </tbody>
 </table>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts
index 603de591..caacf63e 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChildren } from '@angular/core';
 import Dataset from 'src/app/_data/Dataset';
 import Experiment, { ColumnEncoding, Encoding, NullValReplacer, NullValueOptions } from 'src/app/_data/Experiment';
 import { DatasetsService } from 'src/app/_services/datasets.service';
@@ -13,17 +13,22 @@ import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
   templateUrl: './column-table.component.html',
   styleUrls: ['./column-table.component.css']
 })
-export class ColumnTableComponent implements OnInit {
+export class ColumnTableComponent implements AfterViewInit {
 
   @Input() dataset?: Dataset;
   @Input() experiment?: Experiment;
+  @ViewChildren("nullValMenu") nullValMenus!: ElementRef[];
 
   Object = Object;
   Encoding = Encoding;
   NullValueOptions = NullValueOptions;
+  tableData?: any[][];
 
   constructor(private datasetService: DatasetsService, public dialog: MatDialog) { 
     //ovo mi nece trebati jer primam dataset iz druge komponente
+  }
+
+  ngAfterViewInit(): void {
     this.datasetService.getMyDatasets().subscribe((datasets) => {
       this.dataset = datasets[0];
       //console.log(this.dataset);
@@ -32,10 +37,36 @@ export class ColumnTableComponent implements OnInit {
         this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName);
       }
       this.resetColumnEncodings(Encoding.Label);
+      this.setDeleteColumnsForMissingValTreatment();
+
+      /*this.tableData = this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => {
+        if (file) {
+          //this.tableData = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
+        }
+      });*/
     });
   }
 
-  ngOnInit(): void {
+  setDeleteColumnsForMissingValTreatment() {
+    console.log("USAOOOO");
+    if (this.experiment != undefined) {
+      this.experiment.nullValues = NullValueOptions.DeleteColumns;
+      this.experiment.nullValuesReplacers = [];
+      console.log("duzina",this.experiment.inputColumns.length);
+      for (let i = 0; i < this.experiment.inputColumns.length; i++) {
+        this.experiment.nullValuesReplacers.push({
+          column: this.experiment.inputColumns[i],
+          option: NullValueOptions.DeleteColumns,
+          value: ""
+        });
+        console.log(i);
+      }
+      //console.log("len",this.nullValMenus.length);
+      this.nullValMenus.forEach((menu) => {
+        //console.log(menu.nativeElement);
+        menu.nativeElement.textContent = "Obriši kolonu";
+      });
+    }
   }
 
   changeInputColumns(targetMatCheckbox: MatCheckboxChange, columnName: string) {
@@ -49,6 +80,8 @@ export class ColumnTableComponent implements OnInit {
         this.experiment.inputColumns = this.experiment.inputColumns.filter(x => x != columnName);
         //console.log("Input columns: ", this.experiment.inputColumns);
         //TODO: da se zatamni kolona koja je unchecked
+        //this.experiment.encodings = this.experiment.encodings.filter(x => x.columnName != columnName); samo na kraju iz enkodinga skloni necekirane
+        this.experiment.nullValuesReplacers = this.experiment.nullValuesReplacers.filter(x => x.column != columnName);
       }
     }
   }
@@ -84,6 +117,7 @@ export class ColumnTableComponent implements OnInit {
             option: NullValueOptions.DeleteColumns,
             value: ""
           });
+          (<HTMLInputElement>document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši kolonu";
         }
       } 
       else if (selectedMissingValuesOption == NullValueOptions.DeleteRows) {
@@ -95,9 +129,9 @@ export class ColumnTableComponent implements OnInit {
             option: NullValueOptions.DeleteRows,
             value: ""
           });
+          (<HTMLInputElement>document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši redove";
         }
       }
-
     }
   }
   openMissingValuesDialog() {
@@ -157,4 +191,4 @@ export class ColumnTableComponent implements OnInit {
     return '0';
   }
 
-}
+} 
-- 
cgit v1.2.3