From 822e17068dfda64cd5336a7bd503da9d3066bb90 Mon Sep 17 00:00:00 2001
From: aoezdemir <aoezdemir@uni-koblenz.de>
Date: Thu, 7 Mar 2024 10:18:13 +0100
Subject: [PATCH] First step of stepper implemented.

---
 frontend/angular.json                         |  2 +
 frontend/src/app/app-routing.module.ts        |  6 +-
 frontend/src/app/app.module.ts                | 17 +++-
 .../student-register.component.html           | 84 +++++++++++++++++++
 .../student-register.component.scss           | 43 ++++++++++
 .../student-register.component.spec.ts        | 25 ++++++
 .../student-register.component.ts             | 25 ++++++
 frontend/src/styles.scss                      |  4 +-
 8 files changed, 201 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/app/components/students/student-register/student-register.component.html
 create mode 100644 frontend/src/app/components/students/student-register/student-register.component.scss
 create mode 100644 frontend/src/app/components/students/student-register/student-register.component.spec.ts
 create mode 100644 frontend/src/app/components/students/student-register/student-register.component.ts

diff --git a/frontend/angular.json b/frontend/angular.json
index e7b5663..e609732 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -31,6 +31,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -99,6 +100,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
               "src/styles.scss"
             ],
             "scripts": []
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 8af2b8e..6d5f973 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -3,12 +3,14 @@ import { RouterModule, Routes } from '@angular/router';
 import { StudentListComponent } from './components/students/student-list/student-list.component';
 import { VisitsComponent } from './components/visits/visits.component';
 import { VisitsDatetimeComponent } from './components/visits/visits-datetime/visits-datetime.component';
+import {StudentRegisterComponent} from "./components/students/student-register/student-register.component";
 
 const routes: Routes = [
   { path: 'students', component: StudentListComponent },
   { path: 'visits', component: VisitsComponent },
-  { path: 'select', component: VisitsDatetimeComponent },  
-  { path: 'visits/:date/:time', component: VisitsComponent },  
+  { path: 'select', component: VisitsDatetimeComponent },
+  { path: 'register', component: StudentRegisterComponent },
+  { path: 'visits/:date/:time', component: VisitsComponent },
   { path: '**', redirectTo: 'students' }
 ];
 
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 27ea2ec..b854298 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule } from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { StudentListComponent } from './components/students/student-list/student-list.component';
@@ -20,6 +20,12 @@ import { VisitsDatetimeComponent } from './components/visits/visits-datetime/vis
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { StudentRegisterComponent } from './components/students/student-register/student-register.component';
+import {MatStepperModule} from "@angular/material/stepper";
+import {MatInputModule} from "@angular/material/input";
+import {MatButtonModule} from "@angular/material/button";
+import {MatRadioModule} from "@angular/material/radio";
+import {MatSelectModule} from "@angular/material/select";
 
 @NgModule({
   declarations: [
@@ -32,7 +38,8 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
     EnrollPipe,
     VisitsComponent,
     StudentEnrollComponent,
-    VisitsDatetimeComponent
+    VisitsDatetimeComponent,
+    StudentRegisterComponent,
   ],
   imports: [
     BrowserModule,
@@ -47,6 +54,12 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
     MatFormFieldModule,
     MatRippleModule,
     MatNativeDateModule,
+    MatStepperModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatRadioModule,
+    MatSelectModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/frontend/src/app/components/students/student-register/student-register.component.html b/frontend/src/app/components/students/student-register/student-register.component.html
new file mode 100644
index 0000000..2b7ea5d
--- /dev/null
+++ b/frontend/src/app/components/students/student-register/student-register.component.html
@@ -0,0 +1,84 @@
+<!--<button mat-raised-button (click)="isEditable = !isEditable">-->
+<!--  {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}-->
+<!--</button>-->
+
+<mat-stepper linear #stepper>
+  <mat-step [stepControl]="firstFormGroup" class="firstStep">
+    <form [formGroup]="firstFormGroup">
+      <ng-template matStepLabel>Personal Information</ng-template>
+      <div class="formContainer">
+        <div class="leftContainer">
+
+          <mat-form-field appearance="fill">
+            <mat-label>Name</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+
+          <mat-form-field appearance="fill">
+            <mat-label>Surname</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+
+          <mat-form-field appearance="fill">
+            <mat-label>Birthdate</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Gender</mat-label>
+            <mat-select>
+              <mat-option>Male</mat-option>
+              <mat-option value="valid">Female</mat-option>
+              <mat-option value="invalid">Divers</mat-option>
+            </mat-select>
+          </mat-form-field>
+
+        </div>
+        <div class="rightContainer">
+          <mat-form-field appearance="fill">
+            <mat-label>Address</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+          <mat-form-field appearance="fill">
+            <mat-label>Postal Code</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+          <mat-form-field appearance="fill">
+            <mat-label>Phone</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+          <mat-form-field appearance="fill">
+            <mat-label>E-Mail</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+        </div>
+      </div>
+
+      <div>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
+    <form [formGroup]="secondFormGroup">
+      <ng-template matStepLabel>Fill out your address</ng-template>
+      <mat-form-field appearance="fill">
+        <mat-label>Address</mat-label>
+        <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
+               required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step>
+    <ng-template matStepLabel>Done</ng-template>
+    <p>You are now done.</p>
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button (click)="stepper.reset()">Reset</button>
+    </div>
+  </mat-step>
+</mat-stepper>
diff --git a/frontend/src/app/components/students/student-register/student-register.component.scss b/frontend/src/app/components/students/student-register/student-register.component.scss
new file mode 100644
index 0000000..108e669
--- /dev/null
+++ b/frontend/src/app/components/students/student-register/student-register.component.scss
@@ -0,0 +1,43 @@
+.mat-stepper-horizontal {
+  margin-top: 8px;
+}
+
+.mat-form-field {
+  margin-top: 16px;
+}
+
+.mat-stepper-horizontal {
+  background-color: transparent;
+}
+
+input, button {
+  color: white;
+}
+
+button {
+  background-color: #0366d6;
+}
+
+
+::selection {
+  color: white;
+  background-color: #1576d5;
+}
+
+.formContainer {
+  width: 50%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+}
+.leftContainer {
+  display: flex;
+  flex-direction: column;
+  width: 45%;
+}
+.rightContainer {
+  display: flex;
+  flex-direction: column;
+  width: 45%;
+}
diff --git a/frontend/src/app/components/students/student-register/student-register.component.spec.ts b/frontend/src/app/components/students/student-register/student-register.component.spec.ts
new file mode 100644
index 0000000..7b5bfdb
--- /dev/null
+++ b/frontend/src/app/components/students/student-register/student-register.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StudentRegisterComponent } from './student-register.component';
+
+describe('StudentRegisterComponent', () => {
+  let component: StudentRegisterComponent;
+  let fixture: ComponentFixture<StudentRegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StudentRegisterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StudentRegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/components/students/student-register/student-register.component.ts b/frontend/src/app/components/students/student-register/student-register.component.ts
new file mode 100644
index 0000000..0535a98
--- /dev/null
+++ b/frontend/src/app/components/students/student-register/student-register.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+
+@Component({
+  selector: 'li-student-register',
+  templateUrl: './student-register.component.html',
+  styleUrls: ['./student-register.component.scss']
+})
+
+export class StudentRegisterComponent implements OnInit {
+  firstFormGroup!: FormGroup;
+  secondFormGroup!: FormGroup;
+  isEditable = false;
+
+  constructor(private _formBuilder: FormBuilder) {}
+
+  ngOnInit() {
+    this.firstFormGroup = this._formBuilder.group({
+      firstCtrl: ['', Validators.required],
+    });
+    this.secondFormGroup = this._formBuilder.group({
+      secondCtrl: ['', Validators.required],
+    });
+  }
+}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 6503786..433c4b5 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -65,4 +65,6 @@ body {
     color: #fff;
     background-color: #1b6ec2;
     border-color: #1861ac;    
-}
\ No newline at end of file
+}
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }