test of toaster

cerberus/src/app/applications/status/status.component.html

@@ -10,4 +10,20 @@
       <app-add-application-button></app-add-application-button>
     </p>
   </div>
-</ng-template>
+</ng-template>
+<div class="toast-area">
+  <div class="toast">
+    <mat-icon>check_circle</mat-icon>
+    <div class="content">
+      <div class="title">
+        Operation succedded.
+      </div>
+      <div class="message">
+        Application created.
+      </div>
+    </div>
+    <button>
+      Close
+    </button>
+  </div>
+</div>

cerberus/src/app/applications/status/status.component.scss

@@ -19,4 +19,74 @@
         flex-direction: row;
         align-items: center;
     }
+}
+
+.toast-area {
+    position: fixed;
+    top: 60px;
+    right: 30px;
+    z-index: 100000;
+
+    .toast {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        background-color: #eef0ef;
+        border-radius: 7px;
+        width: 400px;
+        min-height: 70px;
+        border: 1px solid #dcdfdd;
+        box-shadow: 0 2px 15px 2px rgba(#383633, .2);
+
+        mat-icon {
+            color: green;
+            $icon-size: 35px;
+            width: $icon-size;
+            height: $icon-size;
+            font-size: $icon-size;
+            margin: 15px;
+        }
+        
+        .content {
+            display: flex;
+            justify-content: left;
+            flex-direction: column;
+            flex: 1 0 auto;
+            margin: 0;
+            padding: 1rem 0;
+            line-height: 20px;
+
+            .title {
+                font-weight: 600;
+                color: #484e5a;
+            }
+
+            .message {
+                display: flex;
+                color: #524f4b;
+                flex-wrap: wrap;
+                overflow-x: hidden;
+            }
+        }
+
+        button {
+            position: absolute;
+            right: 0;
+            background-color: #eef0ef;
+            background-image: none;
+            color: #737271;
+            font-weight: 600;
+            border-radius: 0 7px 7px 0;
+            border-left: 1px solid #d7d9d8;
+            height: 100%;
+            padding: 2px 5px;
+            margin: 0;
+            border: 1px solid #dcdfdd;
+
+            &:active {
+                background-color: #e2e4e3;
+                border-left: 1px solid #c3c5c4;
+            }
+        }
+    }
 }

cerberus/src/app/applications/update-application/update-application.component.html

@@ -17,6 +17,7 @@
         <label for="service-type">Type</label>
         <app-select [options]="serviceTypes"
                 optionLabel="label"
+                [value]="application?.serviceType"
                 (onSelection)="onServiceTypeSelection($event)"></app-select>
     </div>
     <div class="form-control">

cerberus/src/app/applications/update-application/update-application.component.ts

@@ -50,7 +50,7 @@ export class UpdateApplicationComponent implements OnInit {
       const appToUpdate = { ...this.application } as Application;
       appToUpdate.name = this.form.controls.name.value;
       appToUpdate.serviceName = this.form.controls.serviceName.value;
-      // appToUpdate.serviceType = this.form.controls.serviceType.value;
+      appToUpdate.serviceType = this.form.controls.serviceType.value;
       appToUpdate.image = this.form.controls.image.value;
 
       this._applicationService.update(appToUpdate)

cerberus/src/app/core/components/select/select.component.ts

@@ -19,6 +19,7 @@ export class SelectComponent implements OnChanges {
   @Input() formControl: any;
   @Input() options?: any[];
   @Input() optionLabel?: string;
+  @Input() value?: any;
   @ViewChild('select', {static: true}) select?: ElementRef;
   @ViewChild('selectIcon', {static: true}) selectIcon?: ElementRef;
   @Output() onSelection: EventEmitter<any> = new EventEmitter();
@@ -33,6 +34,11 @@ export class SelectComponent implements OnChanges {
         value: option,
         label: typeof this.optionLabel === 'undefined' ? undefined : option[this.optionLabel]
       } as Option));
+
+      const selectedOption = this._options.find(option => option.value === this.value || option.value?.value === this.value);
+      if (selectedOption) {
+        this.setOption(selectedOption);
+      }
     }
   }