Add update application component and danger color for buttons.

cerberus/src/app/app.module.ts

@@ -12,6 +12,7 @@ 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: [
@@ -24,6 +25,7 @@ import { SelectComponent } from './core/components/select/select.component';
     AddApplicationButtonComponent,
     ModalComponent,
     SelectComponent,
+    UpdateApplicationComponent,
   ],
   imports: [
     RouterModule,

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

@@ -1,25 +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>
-      <app-select [options]="serviceTypes" optionLabel="label" (onSelection)="onServiceTypeSelection($event)"></app-select>
+  </div>
-    </div>
+  <div class="form-control">
-    <div class="form-control">
+    <label for="image">Image</label>
-      <label for="image">Image</label>
+    <input id="image" formControlName="image" placeholder="Enter image url" required/>
-      <input id="image" formControlName="image" placeholder="Enter image url" required/>
+  </div>
-    </div>
+  <div class="row action">
-    <div class="row action">
+    <button type="button" class="secondary" (click)="onCancel()">Cancel</button>
-      <button type="button" class="secondary" (click)="onCancel()">Cancel</button>
+    <button type="submit">Save</button>
-      <button type="submit">Save</button>
+  </div>
-    </div>
+</form>
-  </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/update-application/update-application.component.html

@@ -0,0 +1,30 @@
+<div class="title">
+    <h1>Edit the application {{application?.name}}</h1>
+    <button class="icon danger">
+        <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"
+                (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.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,59 @@
+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';
+
+@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
+  ) {}
+
+  ngOnInit(): void {
+    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 appToAdd: Application = this.form.value as Application;
+      this._applicationService.add(appToAdd)
+          .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');
+    }
+  }
+
+  onCancel(): void {
+    this._modalService.close();
+  }
+}

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

@@ -1,4 +1,5 @@
 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';
@@ -24,6 +25,6 @@ export class ApplicationCardComponent {
   ) {}
 
   edit(): void {
-    // this._modalService.open();
+    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/services/modal.service.ts

@@ -6,10 +6,12 @@ import { BehaviorSubject, Observable, Subject } from "rxjs";
 })
 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 {
@@ -21,6 +23,10 @@ export class ModalService {
         return this._modalContent.asObservable();
     }
 
+    get data(): any {
+        return this._modalData;
+    }
+
     get onClose(): Observable<void> {
         return this._onClose.asObservable();
     }

cerberus/src/colors.scss

@@ -16,3 +16,10 @@ $gray-top: #e6e6e6;
 $gray-bottom: #cfcfcf;
 
 $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

@@ -37,6 +37,24 @@ button, a.button {
     }
   }
 
+  &.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;

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

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