From 6754cb8d4fa9fe6938eb7c3bea7f60d96caad9e6 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Tue, 10 May 2022 17:54:57 +0200
Subject: Svi modali/dijalozi: omogucen submit preko entera. Sredjen izgled
 modala.

---
 .../encoding-dialog/encoding-dialog.component.css  |  8 ++++++
 .../encoding-dialog/encoding-dialog.component.html | 29 +++++++++++-----------
 .../encoding-dialog/encoding-dialog.component.ts   | 11 +++++++-
 .../_modals/login-modal/login-modal.component.html |  4 +--
 .../_modals/login-modal/login-modal.component.ts   | 13 ++++++++--
 .../missingvalues-dialog.component.css             |  8 ++++++
 .../missingvalues-dialog.component.html            | 22 ++++++++--------
 .../missingvalues-dialog.component.ts              |  8 ++++++
 .../register-modal/register-modal.component.html   |  2 +-
 .../register-modal/register-modal.component.ts     |  5 ++++
 .../save-experiment-dialog.component.html          | 14 ++++++-----
 .../save-experiment-dialog.component.ts            |  4 +++
 12 files changed, 91 insertions(+), 37 deletions(-)

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

diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css
index e69de29b..e99a1e1e 100644
--- a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css
+++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css
@@ -0,0 +1,8 @@
+#btnYes {
+    background-color: var(--offwhite);
+    color: var(--ns-bg-dark-100);
+}
+
+#btnNo {
+    color: gray;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
index 7ba286cb..08c1f26b 100644
--- a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
+++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
@@ -1,16 +1,17 @@
-<h1 mat-dialog-title>Enkodiranje svih kolona</h1>
-<div mat-dialog-content>
-    <p>Odaberite tip enkodinga za sve kolone zajedno:</p>
-    <mat-form-field>
-        <mat-select matNativeControl [(value)]="selectedEncodingType">
-            <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option">
-                {{ optionName }}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-    <p>Da li ste sigurni u izbor?</p>
+<h2 mat-dialog-title class="text-center">Enkodiranje svih kolona</h2>
+<div mat-dialog-content class="mt-5 mb-4">
+    <p>Sve izabrane kolone biće enkodirane metodom:</p>
+    <form (keydown)="withEnterKey($event)">
+        <mat-form-field>
+            <mat-select matNativeControl [(value)]="selectedEncodingType" cdkFocusInitial>
+                <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option">
+                    {{ optionName }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+    </form>
 </div>
-<div mat-dialog-actions>
-    <button mat-button [mat-dialog-close]="selectedEncodingType" cdkFocusInitial>Da</button>
-    <button mat-button (click)="onNoClick()">Odustani</button>
+<div mat-dialog-actions class="justify-content-center">
+    <button id="btnYes" mat-stroked-button color="basic" (click)="onYesClick()">Potvrdi</button>
+    <button id="btnNo" mat-stroked-button (click)="onNoClick()">Odustani</button>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts
index 3b7560bf..231d81a6 100644
--- a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts
+++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts
@@ -25,4 +25,13 @@ export class EncodingDialogComponent implements OnInit {
   onNoClick() {
     this.dialogRef.close();
   }
-}
+
+  withEnterKey(keyboardEvent: KeyboardEvent) {
+    if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") 
+      this.onYesClick();
+  }
+
+  onYesClick() {
+    this.dialogRef.close(this.selectedEncodingType);
+  }
+} 
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.html b/frontend/src/app/_modals/login-modal/login-modal.component.html
index cea6bf39..79e11db8 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.html
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.html
@@ -6,12 +6,12 @@
               <mat-icon>close</mat-icon>
             </button>
             <h1 class="login-heading mt-5 mb-5">Prijava</h1>
-            <form>
+            <form (keydown)="doLoginWithEnterKey($event)">
                 <!-- Korisnicko ime -->
                 <div class="mb-3">
                     <mat-form-field appearance="fill">
                         <mat-label>Korisničko ime</mat-label>
-                        <input type="text" matInput [(ngModel)]="username" name="username" id="username">
+                        <input type="text" matInput [(ngModel)]="username" name="username" id="username" #usernameInput autofocus="true">
                         <mat-icon matSuffix></mat-icon>
                     </mat-form-field>
                 </div>
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts
index ccd78509..33c17c31 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.ts
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -5,15 +5,17 @@ import { AuthService } from 'src/app/_services/auth.service';
 import { UserInfoService } from 'src/app/_services/user-info.service';
 import shared from '../../Shared';
 import {AfterViewInit, ElementRef} from '@angular/core';
+import { MatSelect } from '@angular/material/select';
 
 @Component({
   selector: 'app-login-modal',
   templateUrl: './login-modal.component.html',
   styleUrls: ['./login-modal.component.css']
 })
-export class LoginModalComponent implements OnInit {
+export class LoginModalComponent implements AfterViewInit {
 
   @ViewChild('closeButton') closeButton?: ElementRef;
+  @ViewChild('usernameInput') usernameInput!: ElementRef;
   @ViewChild('pass') passwordInput!: ElementRef;
 
   username: string = '';
@@ -30,7 +32,14 @@ export class LoginModalComponent implements OnInit {
     private userInfoService: UserInfoService
   ) { }
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
+    //console.log(this.usernameInput);
+    this.usernameInput.nativeElement.focus();
+  }
+
+  doLoginWithEnterKey(keyboardEvent: KeyboardEvent) {
+    if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") 
+      this.doLogin();
   }
 
   doLogin() {
diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css
index e69de29b..e99a1e1e 100644
--- a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css
+++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css
@@ -0,0 +1,8 @@
+#btnYes {
+    background-color: var(--offwhite);
+    color: var(--ns-bg-dark-100);
+}
+
+#btnNo {
+    color: gray;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html
index 81aec5f8..7ab92d02 100644
--- a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html
+++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html
@@ -1,13 +1,13 @@
-<h1 mat-dialog-title>Popunjavanje nedostajućih vrednosti</h1>
-<div mat-dialog-content>
-    <p>Želim da:</p>
-    <mat-radio-group [(ngModel)]="selectedMissingValuesOption">
-        <mat-radio-button [value]="NullValueOptions.DeleteColumns" checked>obrišem sve kolone koje sadrže nedostajuće vrednosti</mat-radio-button>
-        <mat-radio-button [value]="NullValueOptions.DeleteRows">obrišem sve redove koji sadrže nedostajuće vrednosti</mat-radio-button>
-    </mat-radio-group>
-    <p>Da li ste sigurni u izbor?</p>
+<h2 mat-dialog-title class="text-center">Nedostajuće vrednosti</h2>
+<div mat-dialog-content class="mt-5 mb-4">
+    <form (keydown)="withEnterKey($event)">
+        <mat-radio-group [(ngModel)]="selectedMissingValuesOption" [ngModelOptions]="{standalone: true}">
+            <mat-radio-button [value]="NullValueOptions.DeleteColumns" checked>Obriši sve kolone koje sadrže nedostajuće vrednosti</mat-radio-button>
+            <mat-radio-button [value]="NullValueOptions.DeleteRows">Obriši sve redove koji sadrže nedostajuće vrednosti</mat-radio-button>
+        </mat-radio-group>
+    </form>
 </div>
-<div mat-dialog-actions>
-    <button mat-button [mat-dialog-close]="selectedMissingValuesOption" cdkFocusInitial>Da</button>
-    <button mat-button (click)="onNoClick()">Odustani</button>
+<div mat-dialog-actions class="justify-content-center">
+    <button id="btnYes" mat-stroked-button color="basic" (click)="onYesClick()">Potvrdi</button>
+    <button id="btnNo" mat-stroked-button (click)="onNoClick()">Odustani</button>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts
index 908edd9e..822d4e4a 100644
--- a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts
+++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts
@@ -25,4 +25,12 @@ export class MissingvaluesDialogComponent implements OnInit {
     this.dialogRef.close();
   }
 
+  withEnterKey(keyboardEvent: KeyboardEvent) {
+    if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") 
+      this.onYesClick();
+  }
+  onYesClick() {
+    this.dialogRef.close(this.selectedMissingValuesOption);
+  }
+
 }
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.html b/frontend/src/app/_modals/register-modal/register-modal.component.html
index d76af4d6..0c791a61 100644
--- a/frontend/src/app/_modals/register-modal/register-modal.component.html
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.html
@@ -6,7 +6,7 @@
               <mat-icon>close</mat-icon>
             </button>
             <h1 class="mt-5 mb-4">Registracija</h1>
-            <form class="mx-4">
+            <form class="mx-4" (keydown)="doRegisterWithEnterKey($event)">
                 <!--Ime-->
                 <div>
                     <mat-form-field appearance="fill">
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts
index 575fc717..a5c6ddc6 100644
--- a/frontend/src/app/_modals/register-modal/register-modal.component.ts
+++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts
@@ -49,6 +49,11 @@ export class RegisterModalComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  doRegisterWithEnterKey(keyboardEvent: KeyboardEvent) {
+    if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") 
+      this.doRegister();
+  }
+
   doRegister() {
     this.validation();
   }
diff --git a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html
index 00ee98c5..2b3678ce 100644
--- a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html
+++ b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html
@@ -1,11 +1,13 @@
 <h1 mat-dialog-title class="text-center">Sačuvaj eksperiment</h1>
 <div mat-dialog-content class="mt-5 mb-4 mx-1">
-    Naziv eksperimenta:<br>
-    <mat-form-field [style.width.px]=250>
-        <input type="text" matInput [(ngModel)]="selectedName" cdkFocusInitial>
-    </mat-form-field>
-    <p *ngIf="wrongAlreadyExists" class="wrongInput">Izaberi drugi naziv za eskperiment.<br>Eskperiment sa unetim nazivom već postoji u kolekciji.</p>
-    <p *ngIf="wrongEmptyName" class="wrongInput">Unesite naziv eksperimenta.</p>
+    <form (keydown)="saveWithEnterKey($event)">
+        Naziv eksperimenta:<br>
+        <mat-form-field [style.width.px]=250>
+            <input type="text" matInput [(ngModel)]="selectedName" cdkFocusInitial [ngModelOptions]="{standalone: true}">
+        </mat-form-field>
+        <p *ngIf="wrongAlreadyExists" class="wrongInput">Izaberi drugi naziv za eskperiment.<br>Eskperiment sa unetim nazivom već postoji u kolekciji.</p>
+        <p *ngIf="wrongEmptyName" class="wrongInput">Unesite naziv eksperimenta.</p>
+    </form>
 </div>
 <div mat-dialog-actions class="justify-content-center">
     <button id="btnYes" mat-stroked-button color="basic" (click)="onYesClick()">Sačuvaj</button>
diff --git a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.ts b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.ts
index 610af351..3c19e732 100644
--- a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.ts
+++ b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.ts
@@ -31,6 +31,10 @@ export class SaveExperimentDialogComponent implements OnInit {
     this.dialogRef.close();
   }
 
+  saveWithEnterKey(keyboardEvent: KeyboardEvent) {
+    if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") 
+      this.onYesClick();
+  }
   onYesClick() {
     if (this.selectedName == "") {
       this.wrongEmptyName = true;
-- 
cgit v1.2.3