From 3b552e38b263cff042578ee866063dc19c1c3ea7 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 25 May 2022 00:33:30 +0200
Subject: Opcije Update i Save As za experiment. Napravljena dijalog
 komponenta.

---
 .../update-experiment-dialog.component.css         | 21 +++++++
 .../update-experiment-dialog.component.html        | 24 ++++++++
 .../update-experiment-dialog.component.spec.ts     | 25 ++++++++
 .../update-experiment-dialog.component.ts          | 68 ++++++++++++++++++++++
 4 files changed, 138 insertions(+)
 create mode 100644 frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.css
 create mode 100644 frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.html
 create mode 100644 frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.spec.ts
 create mode 100644 frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.ts

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

diff --git a/frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.css b/frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.css
new file mode 100644
index 00000000..551a4e21
--- /dev/null
+++ b/frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.css
@@ -0,0 +1,21 @@
+#btnYes {
+    background-color: var(--offwhite);
+    color: var(--ns-bg-dark-100);
+}
+
+#btnNo {
+    color: gray;
+}
+
+.wrongInput {
+    color: var(--ns-warn);
+    font-size: 11px;
+}
+
+::ng-deep.mat-dialog-content {
+    overflow: visible;
+}
+
+.hidden-class {
+    opacity: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.html b/frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.html
new file mode 100644
index 00000000..db44dfe1
--- /dev/null
+++ b/frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.html
@@ -0,0 +1,24 @@
+<h1 mat-dialog-title class="text-center">Sačuvaj izmene</h1>
+<div mat-dialog-content class="mt-5 mb-3 mx-1">
+    <form (keydown)="saveWithEnterKey($event)">
+        <mat-radio-group [(ngModel)]="selectedOption" [ngModelOptions]="{standalone: true}">
+            <!-- I   Update the existing experiment -->
+            <mat-radio-button [value]="1" checked>Izmeni postojeći eksperiment</mat-radio-button>
+            <!-- II  Save as new experiment -->
+            <mat-radio-button [value]="2" class="mt-4">Sačuvaj kao novi eksperiment</mat-radio-button>
+        </mat-radio-group>
+        <div class="d-flex align-items-center justify-content-center mt-3" [ngClass]="{'hidden-class': selectedName.length == 0 && selectedOption == 1}">
+            <mat-form-field [style.width.px]=200>
+                <input type="text" matInput [(ngModel)]="selectedName" (click)="selectedOption = 2" (keydown)="selectedOption = 2" cdkFocusInitial [ngModelOptions]="{standalone: true}" placeholder="Naziv novog eskperimenta">
+            </mat-form-field>
+        </div>
+        <div class="d-flex align-items-center justify-content-center mt-1 mx-4">
+            <p *ngIf="wrongAlreadyExists" class="wrongInput">Eskperiment sa unetim nazivom već postoji u kolekciji.<br>Izaberite drugi naziv.</p>
+            <p *ngIf="wrongEmptyName" class="wrongInput">Unesite naziv eksperimenta.</p>
+        </div>
+    </form>
+</div>
+<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/update-experiment-dialog/update-experiment-dialog.component.spec.ts b/frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.spec.ts
new file mode 100644
index 00000000..e0f26b2c
--- /dev/null
+++ b/frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpdateExperimentDialogComponent } from './update-experiment-dialog.component';
+
+describe('UpdateExperimentDialogComponent', () => {
+  let component: UpdateExperimentDialogComponent;
+  let fixture: ComponentFixture<UpdateExperimentDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UpdateExperimentDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UpdateExperimentDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.ts b/frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.ts
new file mode 100644
index 00000000..068aa2ef
--- /dev/null
+++ b/frontend/src/app/_modals/update-experiment-dialog/update-experiment-dialog.component.ts
@@ -0,0 +1,68 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import Experiment from 'src/app/_data/Experiment';
+import { ExperimentsService } from 'src/app/_services/experiments.service';
+
+interface DialogData {
+  experiment: Experiment;
+  selectedOption: number;
+}
+
+@Component({
+  selector: 'app-update-experiment-dialog',
+  templateUrl: './update-experiment-dialog.component.html',
+  styleUrls: ['./update-experiment-dialog.component.css']
+})
+export class UpdateExperimentDialogComponent implements OnInit {
+
+  selectedOption: number = 1;
+  selectedName: string = '';
+  wrongAlreadyExists: boolean = false;
+  wrongEmptyName: boolean = false;
+
+  constructor(public dialogRef: MatDialogRef<UpdateExperimentDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData, private experimentService: ExperimentsService) { 
+    this.wrongAlreadyExists = false;
+    this.wrongEmptyName = false;
+  }
+
+  ngOnInit(): void {
+  }
+
+  onNoClick() {
+    this.dialogRef.close();
+  }
+
+  saveWithEnterKey(keyboardEvent: KeyboardEvent) {
+    if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") 
+      this.onYesClick();
+  }
+
+  onYesClick() {
+    if (this.selectedOption == 1) { //update
+      this.experimentService.updateExperiment(this.data.experiment).subscribe((response) => { 
+        this.data.experiment = response;
+        this.dialogRef.close(this.data.experiment);
+      });
+    }
+    else { //save new
+      if (this.selectedName == "") {
+        this.wrongEmptyName = true;
+        return;
+      }
+      this.wrongEmptyName = false;
+
+      const newExperiment = new Experiment();
+      Object.assign(newExperiment, this.data.experiment);
+      newExperiment.name = this.selectedName;
+      newExperiment._id = '';
+      this.experimentService.addExperiment(newExperiment!).subscribe((response) => {
+        this.wrongAlreadyExists = false;
+        this.dialogRef.close(response);
+      }, (error) => {
+        if (error.error == "Experiment with this name exists") {
+          this.wrongAlreadyExists = true;
+        }
+      });
+    }
+  }
+}
-- 
cgit v1.2.3