test of toaster

cerberus/src/app/app.module.ts

@@ -11,6 +11,8 @@ import { ApplicationCardComponent } from './core/components/application-card/app
 import {MatTooltipModule} from '@angular/material/tooltip'; 
 import { AddApplicationButtonComponent } from './core/components/add-application-button/add-application-button.component';
 import { ModalComponent } from './core/components/modal/modal.component';
+import { SelectComponent } from './core/components/select/select.component';
+import { UpdateApplicationComponent } from './applications/update-application/update-application.component';
 
 @NgModule({
   declarations: [
@@ -21,7 +23,9 @@ import { ModalComponent } from './core/components/modal/modal.component';
     StatusComponent,
     ApplicationCardComponent,
     AddApplicationButtonComponent,
-    ModalComponent
+    ModalComponent,
+    SelectComponent,
+    UpdateApplicationComponent,
   ],
   imports: [
     RouterModule,

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

@@ -1,29 +1,23 @@
-<div class="content">
+<h1>Add a new application</h1>
-  <h1>Add a new application</h1>
+<form [formGroup]="form" (ngSubmit)="onSubmit()" ngNativeValidate>
-  <form [formGroup]="form" (ngSubmit)="onSubmit()" ngNativeValidate>
+  <div class="form-control">
-    <div class="form-control">
+    <label for="name">Application name</label>
-      <label for="name">Application name</label>
+    <input id="name" formControlName="name" placeholder="Enter application name" required/>
-      <input id="name" formControlName="name" placeholder="Enter application name" required/>
+  </div>
-    </div>
+  <div class="form-control">
-    <div class="form-control">
+    <label for="service-name">Service name</label>
-      <label for="service-name">Service name</label>
+    <input id="service-name" formControlName="serviceName" placeholder="Enter service name" required/>
-      <input id="service-name" formControlName="serviceName" placeholder="Enter service name" required/>
+  </div>
-    </div>
+  <div class="form-control">
-    <div class="form-control">
+    <label for="service-type">Type</label>
-      <label for="service-type">Type</label>
+    <app-select [options]="serviceTypes" optionLabel="label" (onSelection)="onServiceTypeSelection($event)"></app-select>
-      <select id="service-type" formControlName="serviceType" placeholder="Enter service type">
+  </div>
-        <option *ngFor="let type of serviceTypes" [value]="type.value">
+  <div class="form-control">
-          {{type.label}}
+    <label for="image">Image</label>
-        </option>
+    <input id="image" formControlName="image" placeholder="Enter image url" required/>
-      </select>
+  </div>
-    </div>
+  <div class="row action">
-    <div class="form-control">
+    <button type="button" class="secondary" (click)="onCancel()">Cancel</button>
-      <label for="image">Image</label>
+    <button type="submit">Save</button>
-      <input id="image" formControlName="image" placeholder="Enter image url" required/>
+  </div>
-    </div>
+</form>
-    <div class="row action">
-      <button type="button" class="secondary" (click)="onCancel()">Cancel</button>
-      <button type="submit">Save</button>
-    </div>
-  </form>
-</div>

cerberus/src/app/applications/create-application/create-application.component.scss

@@ -1,17 +1,12 @@
-.content {
+form {
-  width: 300px;
+  .action {
-  margin: auto;
+    display: flex;
+    justify-content: space-between;
 
-  form {
+    button {
-    .action {
+      margin: 0;
-      display: flex;
+      width: 100px;
-      justify-content: space-between;
+      flex: 0 0;
-
-      button {
-        margin: 0;
-        width: 100px;
-        flex: 0 0;
-      }
     }
   }
 }

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

@@ -33,11 +33,19 @@ export class CreateApplicationComponent implements OnInit {
         .catch(error => console.error('An error occured while loading service types.'));
   }
 
+  onServiceTypeSelection(event: ReferentialData): void {
+    this.form.controls.serviceType.setValue(event.value);
+    console.log(event.value);
+  }
+
   onSubmit(): void {
     if (this.form.valid) {
       const appToAdd: Application = this.form.value as Application;
       this._applicationService.add(appToAdd)
-          .then(applicationAdded => console.log('Application added.'))
+          .then(applicationAdded => {
+            console.log('Application added.');
+            this._modalService.close();
+          })
           .catch(error => console.error('An error occured while adding the new application.'));
     } else {
       console.error('Form is invalid');

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

@@ -1,13 +1,29 @@
 <div class="application-list" *ngIf="applicationsStatus?.length; else noAnyApp">
-    <app-application-card *ngFor="let applicationStatus of applicationsStatus" [applicationStatus]="applicationStatus"></app-application-card>
+  <app-application-card *ngFor="let applicationStatus of applicationsStatus"
+			[applicationStatus]="applicationStatus"></app-application-card>
 </div>
 <ng-template #noAnyApp>
-    <div class="no-any-app">
+  <div class="no-any-app">
-        <p>
+    <p>There is no any application.</p>
-            There is no any application.
+    <p>
-        </p>
+      Add one by clicking here:
-        <p>
+      <app-add-application-button></app-add-application-button>
-            Add one by clicking here: <app-add-application-button></app-add-application-button>
+    </p>
-        </p>
+  </div>
+</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>
-</ng-template>
+    <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/status/status.component.ts

@@ -18,6 +18,11 @@ export class StatusComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
+    this.loadApplications();
+    this._modalService.onClose.subscribe(() => this.loadApplications());
+  }
+
+  private loadApplications(): void {
     this._applicationService.getAllStatus()
         .then(applicationsStatus => this.applicationsStatus = applicationsStatus);
   }

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

@@ -0,0 +1,31 @@
+<div class="title">
+    <h1>Edit the application {{application?.name}}</h1>
+    <button class="icon danger" matTooltip="Remove the application">
+        <mat-icon>delete</mat-icon>
+    </button>
+</div>
+<form [formGroup]="form" (ngSubmit)="onSubmit()" ngNativeValidate>
+    <div class="form-control">
+        <label for="name">Application name</label>
+        <input id="name" formControlName="name" placeholder="Enter application name" required />
+    </div>
+    <div class="form-control">
+        <label for="service-name">Service name</label>
+        <input id="service-name" formControlName="serviceName" placeholder="Enter service name" required />
+    </div>
+    <div class="form-control">
+        <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">
+        <label for="image">Image</label>
+        <input id="image" formControlName="image" placeholder="Enter image url" required />
+    </div>
+    <div class="row action">
+        <button type="button" class="secondary" (click)="onCancel()">Cancel</button>
+        <button type="submit">Save</button>
+    </div>
+</form>

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

@@ -0,0 +1,18 @@
+.title {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+        button {
+            opacity: 1;
+        }
+    }
+
+    button {
+        position: absolute;
+        right: 5px;
+        opacity: 0;
+        transition: opacity .2s ease;
+    }
+}

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpdateApplicationComponent } from './update-application.component';
+
+describe('UpdateApplicationComponent', () => {
+  let component: UpdateApplicationComponent;
+  let fixture: ComponentFixture<UpdateApplicationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UpdateApplicationComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UpdateApplicationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Application } from 'src/app/core/entities/Application';
+import { ReferentialData } from 'src/app/core/entities/ReferentialData';
+import { ApplicationService } from 'src/app/core/services/application.service';
+import { ModalService } from 'src/app/core/services/modal.service';
+import { ReferentialDataService } from 'src/app/core/services/referential-data.service';
+
+@Component({
+  selector: 'app-update-application',
+  templateUrl: './update-application.component.html',
+  styleUrls: ['./update-application.component.scss']
+})
+export class UpdateApplicationComponent implements OnInit {
+  application?: Application;
+  form: FormGroup = this._formBuilder.group({
+    name: [undefined, Validators.required],
+    serviceName: [undefined, Validators.required],
+    serviceType: [undefined, Validators.required],
+    image: [undefined, Validators.required]
+  });
+  serviceTypes: ReferentialData[] = [];
+
+  constructor(
+    private _formBuilder: FormBuilder,
+    private _modalService: ModalService,
+    private _applicationService: ApplicationService,
+    private _referentialDataService: ReferentialDataService
+  ) {}
+
+  ngOnInit(): void {
+    this._referentialDataService.getServiceTypes()
+        .then(serviceTypes => this.serviceTypes = serviceTypes)
+        .catch(error => console.error('An error occured while loading service types.'));
+
+    this.application = this._modalService.data;
+    this.form.controls.name.setValue(this.application?.name);
+    this.form.controls.serviceName.setValue(this.application?.serviceName);
+    this.form.controls.serviceType.setValue(this.application?.serviceType);
+    this.form.controls.image.setValue(this.application?.image);
+  }
+
+  onServiceTypeSelection(event: ReferentialData): void {
+    this.form.controls.serviceType.setValue(event.value);
+    console.log(event.value);
+  }
+
+  onSubmit(): void {
+    if (this.form.valid) {
+      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.image = this.form.controls.image.value;
+
+      this._applicationService.update(appToUpdate)
+          .then(() => {
+            console.log('Application uodated.');
+            this._modalService.close();
+          })
+          .catch(error => console.error('An error occured while updating the application.'));
+    } else {
+      console.error('Form is invalid');
+    }
+  }
+
+  onCancel(): void {
+    this._modalService.close();
+  }
+}

cerberus/src/app/core/components/application-card/application-card.component.html

@@ -2,6 +2,11 @@
     <div class="logo">
         <img [src]="applicationStatus?.application?.image" />
         <div class="status {{applicationStatus?.status?.toLowerCase()}}" matTooltip="This application is running"></div>
+        <button class="icon secondary"
+                (click)="edit()"
+                matTooltip="Edit the application details">
+            <mat-icon>edit</mat-icon>
+        </button>
     </div>
     <div class="name">{{applicationStatus?.application?.name}}</div>
 </div>

cerberus/src/app/core/components/application-card/application-card.component.scss

@@ -7,6 +7,12 @@
     
     .logo {
         position: relative;
+        
+        &:hover {
+            button {
+                opacity: 1;
+            }
+        }
 
         img {
             width: 164px;
@@ -34,6 +40,14 @@
                 border: 2px solid #770000;
             }
         }
+        
+        button {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            opacity: 0;
+            transition: opacity .2s ease;
+        }
     }
 
 

cerberus/src/app/core/components/application-card/application-card.component.ts

@@ -1,7 +1,9 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { UpdateApplicationComponent } from 'src/app/applications/update-application/update-application.component';
 import { Application } from '../../entities/Application';
 import { ApplicationStatus } from '../../entities/ApplicationStatus';
 import { ApplicationService } from '../../services/application.service';
+import { ModalService } from '../../services/modal.service';
 
 interface AppDisplaying {
   name: string,
@@ -18,6 +20,11 @@ export class ApplicationCardComponent {
   @Input() applicationStatus: ApplicationStatus | undefined;
 
   constructor(
-    private _applicationService: ApplicationService
+    private _applicationService: ApplicationService,
+    private _modalService: ModalService
   ) {}
+
+  edit(): void {
+    this._modalService.open(UpdateApplicationComponent, this.applicationStatus?.application);
+  }
 }

cerberus/src/app/core/components/modal/modal.component.scss

@@ -1,63 +1,64 @@
 #modal-container {
-    &.hidden {
+  &.hidden {
-        #overlay {
-            display: none;
-        }
-
-        #modal-frame {
-            height: 0;
-
-            #modal-window {
-                top: -500px;
-            }
-        }
-    }
-
-    &.displayed {
-        display: flex;
-
-        #overlay {
-            display: flex;
-        }
-
-        #modal-frame {
-            #modal-window {
-                top: 58px;
-            }
-        }
-    }
-
     #overlay {
-        position: fixed;
+      display: none;
-        top: 56px;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 100;
     }
 
     #modal-frame {
-        position: fixed;
+      height: 0;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 101;
-        display: flex;
-        justify-content: center;
-        transition: height 1s ease;
 
-        #modal-window {
+      #modal-window {
-            position: absolute;
+        top: -500px;
-            background-color: #f6f6f6;
+      }
-            z-index: 102;
-            padding: 1rem;
-            border: 1px solid #bfbfbf;
-            border-top: none;
-            min-width: 600px;
-            max-height: 500px;
-            box-shadow: inset 0px 5px 5px -3px rgba(0,0,0,.2), 0px 5px 10px 1px rgba(0,0,0,.2);
-            transition: top 1s ease;
-        }
     }
+  }
+
+  &.displayed {
+    display: flex;
+
+    #overlay {
+      display: flex;
+    }
+
+    #modal-frame {
+      #modal-window {
+        top: 58px;
+      }
+    }
+  }
+
+  #overlay {
+    position: fixed;
+    top: 56px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+  }
+
+  #modal-frame {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 101;
+    display: flex;
+    justify-content: center;
+    transition: height 1s ease;
+
+    #modal-window {
+      position: absolute;
+      background-color: #f6f6f6;
+      z-index: 102;
+      border: 1px solid #bfbfbf;
+      border-top: none;
+      width: 300px;
+      max-height: 500px;
+      box-shadow: inset 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0px 5px 10px 1px rgba(0, 0, 0, 0.2);
+      transition: top 1s ease;
+      padding: 1rem 150px;
+    }
+  }
 }

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

@@ -22,7 +22,9 @@ export class ModalComponent implements OnInit {
             if (!modalContentClass) {
                 this.displayed = false;
                 window.setTimeout(() => {
-                    this.modalContent?.detach();
+                    if (!this.displayed) {
+                        this.modalContent?.detach();
+                    }
                 }, 1000);
             } else {
                 this.displayed = true;

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

@@ -1,9 +1,14 @@
-<div class="container">
+<div class="dropdown">
-  <select #select>
+  <button #select class="secondary" type="button" (click)="_active = !_active" (focus)="onFocus()" (blur)="onBlur()">
-    <option>Option 1</option>
+    {{!_selectedOption ? 'Select an option' : _selectedOption.label}}
-    <option>Option 2</option>
+  </button>
-  </select>
   <div class="icon">
-    <mat-icon (click)="select.focus()">unfold_more</mat-icon>
+    <mat-icon (click)="onIconClick()">unfold_more</mat-icon>
   </div>
-</div>
+
+  <ul class="{{_active ? 'show' : ''}}">
+    <li *ngFor="let option of options" (click)="setOption(option)">
+      {{option.label}}
+    </li>
+  </ul>
+</div>

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

@@ -1,16 +1,25 @@
-$btn-primary-background-top: #4ca4f6;
+@import '../../../../colors.scss';
-$btn-primary-background-bottom: #0073f7;
 
 $select-icon-radius: 4px;
 
-.container {
+.dropdown {
+  width: max-content;
   position: relative;
   display: flex;
-  justify-content: center;
   align-items: center;
+  width: 100%;
 
-  select {
+  button {
+    padding-right: 35px;
+    border: none;
+    margin: 0;
+    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
+    width: 100%;
+    justify-content: left;
 
+    &:focus {
+      outline: 2px solid $blue;
+    }
   }
 
   .icon {
@@ -20,20 +29,51 @@ $select-icon-radius: 4px;
     width: 1.5rem;
     background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
     color: white;
-    height: 23px;
+    height: 21px;
-    top: 3px;
     right: 0;
     border-radius: 0 $select-icon-radius $select-icon-radius 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     mat-icon {
       font-size: 19px;
       display: flex;
       justify-content: center;
       align-items: center;
+      padding-right: 2px;
 
       &:hover {
         cursor: default;
       }
     }
   }
+
+  ul {
+    position: absolute;
+    top: 24px;
+    background-color: #fff;
+    border-radius: 4px;
+    margin: 0;
+    padding: .3rem 0;
+    min-width: 150px;
+    border: 1px solid #eee;
+    display: none;
+    flex-direction: column;
+
+    &.show {
+      display: flex;
+    }
+
+    li {
+      list-style: none;
+      padding: .2rem 1rem;
+      
+      &:hover {
+        background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
+        color: white;
+        cursor: pointer;
+      }
+    }
+  }
 }

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

@@ -1,15 +1,71 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AbstractControl, FormControl } from '@angular/forms';
+
+export interface Option {
+  value: any;
+  label: string
+}
 
 @Component({
   selector: 'app-select',
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.scss']
 })
-export class SelectComponent implements OnInit {
+export class SelectComponent implements OnChanges {
+  _selectedOption?: Option;
+  _options: Option[] = []
+  _active: boolean = false;
+  private _disableBlurEffect: boolean = false;
+  @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();
 
-  constructor() { }
+  constructor(
 
-  ngOnInit(): void {
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.options?.length) {
+      this._options = this.options.map(option => ({
+        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);
+      }
+    }
   }
 
+  onIconClick(): void {
+    if (this.select) {
+      this.select.nativeElement.focus();
+      this.select.nativeElement.click();
+    }
+  }
+
+  setOption(selectedOption: Option): void {
+    this._selectedOption = selectedOption;
+    this._active = false;
+    this.select?.nativeElement?.focus();
+    this.onSelection.emit(this._selectedOption);
+  }
+
+  onFocus(): void {
+    this._disableBlurEffect = true;
+    window.setTimeout(() => this._disableBlurEffect = false, 150);
+  }
+
+  onBlur(): void {
+    window.setTimeout(() => {
+      if (!this._disableBlurEffect) {
+        this._active = false;
+      }
+    }, 150);
+  }
 }

cerberus/src/app/core/services/application.service.ts

@@ -1,4 +1,4 @@
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Application } from '../entities/Application';
 import { ApplicationStatus } from '../entities/ApplicationStatus';
@@ -17,6 +17,14 @@ export class ApplicationService {
   }
 
   add(application: Application): Promise<Application> {
+    const headers = new HttpHeaders()
+        .append('Content-Type', 'application/json');
     return this._httpClient.post<Application>('/api/applications', application).toPromise();
   }
+
+  update(application: Application): Promise<void> {
+    const headers = new HttpHeaders()
+        .append('Content-Type', 'application/json');
+    return this._httpClient.put<void>(`/api/applications/${application.id}`, application, { headers }).toPromise();
+  }
 }

cerberus/src/app/core/services/modal.service.ts

@@ -1,21 +1,33 @@
 import { Injectable, Type } from "@angular/core";
-import { BehaviorSubject, Observable } from "rxjs";
+import { BehaviorSubject, Observable, Subject } from "rxjs";
 
 @Injectable({
     providedIn: 'root'
 })
 export class ModalService {
     _modalContent: BehaviorSubject<Type<unknown> | undefined> = new BehaviorSubject<Type<unknown> | undefined>(undefined);
+    _modalData: any;
+    _onClose: Subject<void> = new Subject();
 
-    open(componentClass: Type<unknown>): void {
+    open(componentClass: Type<unknown>, data: any = undefined): void {
         this._modalContent.next(componentClass);
+        this._modalData = data;
     }
 
     close(): void {
         this._modalContent.next(undefined);
+        this._onClose.next();
     }
 
     get modalContent(): Observable<Type<unknown> | undefined> {
         return this._modalContent.asObservable();
     }
+
+    get data(): any {
+        return this._modalData;
+    }
+
+    get onClose(): Observable<void> {
+        return this._onClose.asObservable();
+    }
 }

cerberus/src/colors.scss

@@ -15,4 +15,11 @@ $btn-secondary-active-background: #f0f0f0;
 $gray-top: #e6e6e6;
 $gray-bottom: #cfcfcf;
 
-$gray-icon-secondary: #777777;
+$gray-icon-secondary: #777777;
+
+$danger-border: #ac0000;
+$danger-background-top: #e70000;
+$danger-background-bottom: #be0000;
+$danger-active-border: #b40000;
+$danger-active-background-top: #bd0000;
+$danger-active-background-bottom: #b10000;

cerberus/src/components-styles/button.scss

@@ -0,0 +1,84 @@
+@import "../colors.scss";
+
+a.button {
+  text-decoration: none;
+}
+
+button, a.button {
+  background-image: linear-gradient(
+    $btn-primary-background-top,
+    $btn-primary-background-bottom
+  );
+  color: white;
+  border: solid 1px $btn-primary-background-bottom;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 5rem;
+  border-radius: 0.3rem;
+  padding: 0.15rem 1rem;
+  font-weight: 600;
+  margin: 0.2rem 0.5rem;
+
+  &:active {
+    border-color: $btn-primary-active-border;
+    background-image: linear-gradient(
+      $btn-primary-active-background-top,
+      $btn-primary-active-background-bottom
+    );
+  }
+
+  &.secondary {
+    background-image: none;
+    background-color: $btn-secondary-background;
+    border-color: $btn-secondary-border;
+    color: #222;
+    font-weight: 500;
+
+    &:active {
+      background-color: $btn-secondary-active-background;
+      border-color: $btn-secondary-active-border;
+    }
+  }
+
+  &.danger {
+    border-color: $danger-border;
+    background-image: linear-gradient(
+      $danger-background-top,
+      $danger-background-bottom
+    );
+    color: white;
+    font-weight: 500;
+
+    &:active {
+      border-color: $danger-active-border;
+      background-image: linear-gradient(
+        $danger-active-background-top,
+        $danger-active-background-bottom
+    );
+    }
+  }
+
+  &.help {
+    border-radius: 10em;
+    padding: 0;
+    background-image: none;
+    background-color: #eeeeee;
+    color: #333;
+    border-color: #bbb;
+    min-width: min-content;
+    width: 1.5rem;
+    height: 1.5rem;
+
+    &:hover {
+      background-color: #dddddd;
+    }
+  }
+
+  &.icon {
+    padding-left: 0;
+    padding-right: 0;
+    min-width: 25px;
+    width: 25px;
+  }
+}

cerberus/src/components-styles/card.scss

@@ -0,0 +1,7 @@
+.card {
+    width: max-content;
+    padding: .5rem 1rem;
+    box-shadow: 0px 13px 28px 4px rgba(0,0,0,0.2);
+    border-radius: .4rem;
+    margin: 2rem;
+  }

cerberus/src/components-styles/components-styles.scss

@@ -0,0 +1,4 @@
+@import './button.scss';
+@import './card.scss';
+@import './form/form.scss';
+@import './icon.scss';

cerberus/src/components-styles/form/form-control.scss

@@ -0,0 +1,19 @@
+.form-control {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem 0;
+  
+    & > * {
+      display: flex;
+      flex: 1 0;
+    }
+  
+    & > input, select {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    app-select {
+      width: 100%;
+    }
+  }

cerberus/src/components-styles/form/form.scss

@@ -0,0 +1,17 @@
+@import "./form-control.scss";
+@import "./label.scss";
+@import "./input.scss";
+@import "./select.scss";
+
+form {
+  .action {
+    display: flex;
+    justify-content: space-between;
+
+    button {
+      margin: 0;
+      width: 100px;
+      flex: 0 0;
+    }
+  }
+}

cerberus/src/components-styles/form/input.scss

@@ -0,0 +1,29 @@
+@import '../../colors.scss';
+
+input {
+  margin: 0 .5rem;
+  border: none;
+  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
+  padding: .2rem .5rem;
+  border-radius: .2rem;
+
+  &:focus {
+    outline: 2px solid $blue;
+  }
+}
+
+.iconed-input {
+  display: flex;
+  position: relative;
+  align-items: center;
+
+  input {
+    padding-left: 2rem;
+  }
+
+  mat-icon {
+    color: $gray-icon-secondary;
+    position: absolute;
+    left: 1rem;
+  }
+}

cerberus/src/components-styles/form/label.scss

@@ -0,0 +1,4 @@
+label {
+    margin-bottom: .2rem;
+    font-weight: 500;
+}

cerberus/src/components-styles/form/select.scss

@@ -0,0 +1,30 @@
+$font-size: 14px;
+
+select {
+    // A reset of styles, including removing the default dropdown arrow
+    appearance: none;
+    // Additional resets for further consistency
+    border: none;
+    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
+    color: #333;
+    border-radius: .3rem;
+    padding: .15rem .5rem;
+    font-weight: 600;
+    margin: .2rem .5rem;
+    font-size: $font-size;
+  
+    &::-ms-expand {
+      display: none;
+    }
+
+    &:focus {
+        outline: 2px solid $blue;
+    }
+}
+
+.select {
+    display: grid;
+    grid-template-areas: "select";
+    align-items: center;
+}
+  

cerberus/src/components-styles/icon.scss

@@ -0,0 +1,8 @@
+
+mat-icon.mat-icon {
+    display: flex;
+    align-items: center;
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+}

cerberus/src/styles.scss

@@ -1,14 +1,20 @@
 @import './colors.scss';
+@import './components-styles/components-styles.scss';
 
 /* You can add global styles to this file, and also import other style files */
 @font-face {
   font-family: helvetica;
-  src: url(assets/fonts/Helvetica.ttf);
+  src: url(/assets/fonts/Helvetica.ttf);
 }
 
 $font-size: 14px;
 
+html, body {
+  height: 100%;
+}
 body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
   font-size: $font-size;
   font-family: helvetica;
 
@@ -22,120 +28,6 @@ body {
   }
 }
 
-button {
-  // background-color: $blue;
-  background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
-  color: white;
-  border: solid 1px $btn-primary-background-bottom;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 5rem;
-  border-radius: .3rem;
-  padding: .15rem 1rem;
-  font-weight: 600;
-  margin: .2rem .5rem;
-
-  &:active {
-    border-color: $btn-primary-active-border;
-    background-image: linear-gradient($btn-primary-active-background-top, $btn-primary-active-background-bottom);
-  }
-
-  &.secondary {
-    background-image: none;
-    background-color: $btn-secondary-background;
-    border-color: $btn-secondary-border;
-    color: #222;
-    font-weight: 500;
-
-    &:active {
-      background-color: $btn-secondary-active-background;
-      border-color: $btn-secondary-active-border;
-    }
-  }
-
-  &.help {
-    border-radius: 10em;
-    padding: 0;
-    background-image: none;
-    background-color: #eeeeee;
-    color: #333;
-    border-color: #bbb;
-    min-width: min-content;
-    width: 1.5rem;
-    height: 1.5rem;
-
-    &:hover {
-      background-color: #dddddd;
-    }
-  }
-}
-
-div.card {
-  width: max-content;
-  padding: .5rem 1rem;
-  box-shadow: 0px 13px 28px 4px rgba(0,0,0,0.2);
-  border-radius: .4rem;
-  margin: 2rem;
-}
-
-.form-control {
-  display: flex;
-  flex-direction: column;
-  margin: 1rem 0;
-
-  & > * {
-    display: flex;
-    flex: 1 0;
-  }
-
-  & > input, select {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-label {
-  margin-bottom: .2rem;
-  font-weight: 500;
-}
-
-input {
-  margin: 0 .5rem;
-  border: none;
-  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
-  padding: .2rem .5rem;
-  border-radius: .2rem;
-
-  &:focus {
-    outline: 2px solid $blue;
-  }
-}
-
-select {
-  // A reset of styles, including removing the default dropdown arrow
-  appearance: none;
-  // Additional resets for further consistency
-  border: none;
-  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
-  color: #333;
-  border-radius: .3rem;
-  padding: .15rem .5rem;
-  font-weight: 600;
-  margin: .2rem .5rem;
-  font-size: $font-size;
-
-  &::-ms-expand {
-    display: none;
-  }
-}
-
-.select {
-  display: grid;
-  grid-template-areas: "select";
-  align-items: center;
-}
-
 
 // Utilitary classes
 .max-width {
@@ -159,35 +51,3 @@ div.row {
     flex: 1 0;
   }
 }
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
-
-
-mat-icon.mat-icon {
-  display: flex;
-  align-items: center;
-  width: 18px;
-  height: 18px;
-}
-
-
-.iconed-input {
-  display: flex;
-  position: relative;
-  align-items: center;
-
-  input {
-    padding-left: 2rem;
-  }
-
-  mat-icon {
-    color: $gray-icon-secondary;
-    position: absolute;
-    left: 1rem;
-  }
-}
-
-mat-icon.mat-icon {
-  font-size: 18px;
-}

src/main/java/org/takiguchi/cerberus/cerberusapp/controller/ApplicationController.java

@@ -51,6 +51,7 @@ public class ApplicationController {
                 .withName(application.getName())
                 .withServiceName(application.getServiceName())
                 .withServiceType(application.getServiceType())
+                .withImage(application.getImage())
                 .build();
         service.update(applicationToUpdate);
     }

src/main/java/org/takiguchi/cerberus/cerberusapp/service/ApplicationService.java

@@ -50,6 +50,7 @@ public class ApplicationService {
                         .withName(application.getName())
                         .withServiceName(application.getServiceName())
                         .withServiceType(application.getServiceType())
+                        .withImage(application.getImage())
                         .build()
                 )
                 .ifPresentOrElse(this::validateThenSave, NotFoundException::new);