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 +++++++-
 3 files changed, 33 insertions(+), 15 deletions(-)

(limited to 'frontend/src/app/_modals/encoding-dialog')

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);
+  }
+} 
-- 
cgit v1.2.3