3 files changed, 63 insertions, 13 deletions
diff --git a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.css b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.css
index e69de29b..8225af36 100644
--- a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.css
+++ b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.css
@@ -0,0 +1,13 @@
+#btnYes {
+    background-color: var(--offwhite);
+    color: var(--ns-bg-dark-100);
+}
+
+#btnNo {
+    color: gray;
+}
+
+.wrongInput {
+    color: var(--ns-warn);
+    font-size: 11px;
+}
+\ No newline at end of file
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 bac73e0a..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,13 +1,15 @@
-<h1 mat-dialog-title>Čuvanje eksperimenta</h1>
-<div mat-dialog-content>
-    <span>Unesi naziv eksperimenta:</span>
-    <mat-form-field>
-        <input type="text" matInput [(ngModel)]="selectedName">
-    </mat-form-field>
-    <br><br>
-    <p>Sačuvaj eksperiment:</p>
+<h1 mat-dialog-title class="text-center">Sačuvaj eksperiment</h1>
+<div mat-dialog-content class="mt-5 mb-4 mx-1">
+    <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>
-    <button mat-button [mat-dialog-close]="selectedName" 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()">Sačuvaj</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/save-experiment-dialog/save-experiment-dialog.component.ts b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.ts
index ca01f57e..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
@@ -1,5 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import Experiment from 'src/app/_data/Experiment';
+import { ExperimentsService } from 'src/app/_services/experiments.service';
+import { Inject} from '@angular/core';
+
+interface DialogData {
+  experiment: Experiment;
+}
 
 @Component({
   selector: 'app-save-experiment-dialog',
@@ -9,8 +16,13 @@ import { MatDialogRef } from '@angular/material/dialog';
 export class SaveExperimentDialogComponent implements OnInit {
 
   selectedName: string = '';
+  wrongAlreadyExists: boolean = false;
+  wrongEmptyName: boolean = false;
 
-  constructor(public dialogRef: MatDialogRef<SaveExperimentDialogComponent>) { }
+  constructor(public dialogRef: MatDialogRef<SaveExperimentDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData, private experimentService: ExperimentsService) { 
+    this.wrongAlreadyExists = false;
+    this.wrongEmptyName = false;
+  }
 
   ngOnInit(): void {
   }
@@ -18,4 +30,27 @@ export class SaveExperimentDialogComponent implements OnInit {
   onNoClick() {
     this.dialogRef.close();
   }
+
+  saveWithEnterKey(keyboardEvent: KeyboardEvent) {
+    if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") 
+      this.onYesClick();
+  }
+  onYesClick() {
+    if (this.selectedName == "") {
+      this.wrongEmptyName = true;
+      return;
+    }
+    this.wrongEmptyName = false;
+    
+    this.data.experiment.name = this.selectedName;
+    this.experimentService.addExperiment(this.data.experiment).subscribe((response) => {
+      this.wrongAlreadyExists = false;
+      this.data.experiment = response;
+      this.dialogRef.close(this.data.experiment);
+    }, (error) => {
+      if (error.error == "Experiment with this name exists") {
+        this.wrongAlreadyExists = true;
+      }
+    });
+  }
 }