Refactoring course

src/app/app.module.ts

@@ -95,6 +95,8 @@ import { TypedInputComponent } from './typed-form/typed-input.component';
 import { TypedInputFieldComponent } from './typed-form/typed-input-field.component';
 import { TypedSettingsService } from './data/typedSettings.service';
 import { OTACManagementComponent } from './event/otacmanagement/otacmanagement.component';
+import { CourseWizardComponent } from './course/course-wizard/course-wizard.component';
+import { CourseDetailsComponent } from './course/course-details/course-details.component';
 
 const appInitializerFn = (appConfig: AppConfigService) => {
   return () => {
@@ -130,6 +132,7 @@ export function jwtOptionsFactory() {
     EditEnvironmentComponent,
     ContentComponent,
     CourseComponent,
+    CourseDetailsComponent,
     NewCourseComponent,
     CourseFormComponent,
     AddScenarioComponent,
@@ -175,6 +178,7 @@ export function jwtOptionsFactory() {
     TypedInputFieldComponent,
     SettingsComponent,
     OTACManagementComponent,
+    CourseWizardComponent,
   ],
   imports: [
     BrowserModule,

src/app/course/course-details/course-details.component.html

@@ -0,0 +1,52 @@
+<div>
+  <clr-stack-view>
+    <clr-stack-block>
+      <clr-stack-label>Basic Information</clr-stack-label>
+      <clr-stack-block>
+        <clr-stack-label class="stackbox-header">Option</clr-stack-label>
+        <clr-stack-content class="stackbox-header">Value</clr-stack-content>
+      </clr-stack-block>
+      <clr-stack-block>
+        <clr-stack-label>Name</clr-stack-label>
+        <clr-stack-content>{{ course.name }}</clr-stack-content>
+      </clr-stack-block>
+      <clr-stack-block>
+        <clr-stack-label>Description</clr-stack-label>
+        <clr-stack-content>{{ course.description }}</clr-stack-content>
+      </clr-stack-block>
+      <clr-stack-block>
+        <clr-stack-label>Keepalive Duration</clr-stack-label>
+        <clr-stack-content>{{ course.keepalive_duration }}</clr-stack-content>
+      </clr-stack-block>
+      <clr-stack-block>
+        <clr-stack-label>Pause Duration</clr-stack-label>
+        <clr-stack-content>{{ course.pause_duration }}</clr-stack-content>
+      </clr-stack-block>
+      <clr-stack-block>
+        <clr-stack-label>Virtual Machine</clr-stack-label>
+        <clr-stack-content>{{
+          course.virtualmachines.length
+        }}</clr-stack-content>
+      </clr-stack-block>
+      <clr-stack-block>
+        <clr-stack-label>Scenarios</clr-stack-label>
+        <clr-stack-content
+          ><span class="label" *ngFor="let scenario of course.scenarios">
+            {{ scenario.name }}</span
+          ></clr-stack-content
+        >
+      </clr-stack-block>
+    </clr-stack-block>
+    <clr-stack-block *ngIf="course.categories.length > 0">
+      <clr-stack-label>Dynamic Scenarios</clr-stack-label>
+      <clr-stack-block>
+        <clr-stack-label>Dynamic Scenarios</clr-stack-label>
+        <clr-stack-content
+          ><span class="label" *ngFor="let categorie of course.categories">
+            {{ categorie }}</span
+          ></clr-stack-content
+        >
+      </clr-stack-block>
+    </clr-stack-block>
+  </clr-stack-view>
+</div>

src/app/course/course-details/course-details.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { Course } from 'src/app/data/course';
+
+@Component({
+  selector: 'course-details',
+  templateUrl: './course-details.component.html',
+  styleUrls: ['./course-details.component.scss'],
+})
+export class CourseDetailsComponent {
+  @Input()
+  course: Course;
+}

src/app/course/course-form/course-form.component.html

@@ -5,13 +5,19 @@
       <clr-control-error *clrIfError="'required'">Course name is required</clr-control-error>
       <clr-control-error *clrIfError="'minlength'">Course name must be longer than 4 characters
       </clr-control-error>
+      <clr-control-error *clrIfError="'pattern'">
+        Non latin letters is forbidden
+      </clr-control-error>
     </clr-input-container>
     <clr-input-container>
       <label>Description</label>
       <input clrInput type="text" formControlName="course_description" required>
       <clr-control-error *clrIfError="'required'">Course description is required</clr-control-error>
       <clr-control-error *clrIfError="'minlength'">Course description must be longer than 4 characters
       </clr-control-error>
+      <clr-control-error *clrIfError="'pattern'">
+        Non latin letters is forbidden
+      </clr-control-error>
     </clr-input-container>
     <div class="clr-form-control clr-row">
       <label for="keepalive_amount" class="clr-control-label">Keepalive Duration</label>

src/app/course/course-form/course-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { KeepaliveValidator } from 'src/app/validators/keepalive.validator';
 import { Course } from 'src/app/data/course';
@@ -14,6 +14,7 @@ export class CourseFormComponent implements OnInit {
   @Output()
   formReady: EventEmitter<FormGroup> = new EventEmitter(null);
 
+
   constructor() { }
 
   ngOnInit(): void {
@@ -67,18 +68,36 @@ export class CourseFormComponent implements OnInit {
     }
   }
 
+
+  resetFormToRenew(): void {
+    this.courseDetails.reset({
+      'course_name': null,
+      'course_description': null,
+      'virtualmachines': null, 
+      'keepalive_amount': 10,
+      'keepalive_unit': 'm',
+      'pauseable': true,
+      'keep_vm': true,
+      'pause_duration': 1,
+      'scenarios': null, 
+    });
+    this.formReady.emit(this.courseDetails);
+  }
+
   ngOnChanges(): void {
     this.reset();
   }
 
   public courseDetails: FormGroup = new FormGroup({
     'course_name': new FormControl(null, [
       Validators.required,
-      Validators.minLength(4)
+      Validators.minLength(4), 
+      Validators.pattern(/^[a-zA-Z0-9 ]+$/)
     ]),
     'course_description': new FormControl(null, [
       Validators.required,
-      Validators.minLength(4)
+      Validators.minLength(4),
+      Validators.pattern(/^[a-zA-Z0-9 ]+$/)
     ]),
     'keepalive_amount': new FormControl(10, [
       Validators.required