From 84d66ec45ae92bf7aff084432a15cd779d0bdcf2 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Sat, 7 Aug 2021 23:51:44 +0200 Subject: [PATCH] Add update application component and danger color for buttons. --- cerberus/src/app/app.module.ts | 2 + .../create-application.component.html | 48 ++++---- .../create-application.component.scss | 21 ++-- .../update-application.component.html | 30 +++++ .../update-application.component.scss | 0 .../update-application.component.spec.ts | 25 ++++ .../update-application.component.ts | 59 ++++++++++ .../application-card.component.ts | 3 +- .../components/modal/modal.component.scss | 111 +++++++++--------- .../src/app/core/services/modal.service.ts | 8 +- cerberus/src/colors.scss | 9 +- cerberus/src/components-styles/button.scss | 18 +++ cerberus/src/components-styles/form/form.scss | 21 +++- 13 files changed, 255 insertions(+), 100 deletions(-) create mode 100644 cerberus/src/app/applications/update-application/update-application.component.html create mode 100644 cerberus/src/app/applications/update-application/update-application.component.scss create mode 100644 cerberus/src/app/applications/update-application/update-application.component.spec.ts create mode 100644 cerberus/src/app/applications/update-application/update-application.component.ts diff --git a/cerberus/src/app/app.module.ts b/cerberus/src/app/app.module.ts index c042c9f..dd6d9db 100644 --- a/cerberus/src/app/app.module.ts +++ b/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, diff --git a/cerberus/src/app/applications/create-application/create-application.component.html b/cerberus/src/app/applications/create-application/create-application.component.html index 7e53fd8..298bc21 100644 --- a/cerberus/src/app/applications/create-application/create-application.component.html +++ b/cerberus/src/app/applications/create-application/create-application.component.html @@ -1,25 +1,23 @@ -
-

Add a new application

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
\ No newline at end of file +

Add a new application

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
\ No newline at end of file diff --git a/cerberus/src/app/applications/create-application/create-application.component.scss b/cerberus/src/app/applications/create-application/create-application.component.scss index e30a025..c082081 100644 --- a/cerberus/src/app/applications/create-application/create-application.component.scss +++ b/cerberus/src/app/applications/create-application/create-application.component.scss @@ -1,17 +1,12 @@ -.content { - width: 300px; - margin: auto; +form { + .action { + display: flex; + justify-content: space-between; - form { - .action { - display: flex; - justify-content: space-between; - - button { - margin: 0; - width: 100px; - flex: 0 0; - } + button { + margin: 0; + width: 100px; + flex: 0 0; } } } \ No newline at end of file diff --git a/cerberus/src/app/applications/update-application/update-application.component.html b/cerberus/src/app/applications/update-application/update-application.component.html new file mode 100644 index 0000000..cea7b77 --- /dev/null +++ b/cerberus/src/app/applications/update-application/update-application.component.html @@ -0,0 +1,30 @@ +
+

Edit the application {{application?.name}}

+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
\ No newline at end of file diff --git a/cerberus/src/app/applications/update-application/update-application.component.scss b/cerberus/src/app/applications/update-application/update-application.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/cerberus/src/app/applications/update-application/update-application.component.spec.ts b/cerberus/src/app/applications/update-application/update-application.component.spec.ts new file mode 100644 index 0000000..2db6cd9 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ UpdateApplicationComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(UpdateApplicationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cerberus/src/app/applications/update-application/update-application.component.ts b/cerberus/src/app/applications/update-application/update-application.component.ts new file mode 100644 index 0000000..d3375d9 --- /dev/null +++ b/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(); + } +} diff --git a/cerberus/src/app/core/components/application-card/application-card.component.ts b/cerberus/src/app/core/components/application-card/application-card.component.ts index adc3fa8..141d49a 100644 --- a/cerberus/src/app/core/components/application-card/application-card.component.ts +++ b/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); } } diff --git a/cerberus/src/app/core/components/modal/modal.component.scss b/cerberus/src/app/core/components/modal/modal.component.scss index 329b53e..9bff719 100644 --- a/cerberus/src/app/core/components/modal/modal.component.scss +++ b/cerberus/src/app/core/components/modal/modal.component.scss @@ -1,63 +1,64 @@ #modal-container { - &.hidden { - #overlay { - display: none; - } - - #modal-frame { - height: 0; - - #modal-window { - top: -500px; - } - } - } - - &.displayed { - display: flex; - - #overlay { - display: flex; - } - - #modal-frame { - #modal-window { - top: 58px; - } - } - } - + &.hidden { #overlay { - position: fixed; - top: 56px; - left: 0; - width: 100%; - height: 100%; - z-index: 100; + display: none; } #modal-frame { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 101; - display: flex; - justify-content: center; - transition: height 1s ease; + height: 0; - #modal-window { - position: absolute; - 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; - } + #modal-window { + top: -500px; + } } + } + + &.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; + } + } } \ No newline at end of file diff --git a/cerberus/src/app/core/services/modal.service.ts b/cerberus/src/app/core/services/modal.service.ts index 8a77179..3a69f7b 100644 --- a/cerberus/src/app/core/services/modal.service.ts +++ b/cerberus/src/app/core/services/modal.service.ts @@ -6,10 +6,12 @@ import { BehaviorSubject, Observable, Subject } from "rxjs"; }) export class ModalService { _modalContent: BehaviorSubject | undefined> = new BehaviorSubject | undefined>(undefined); + _modalData: any; _onClose: Subject = new Subject(); - open(componentClass: Type): void { + open(componentClass: Type, 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 { return this._onClose.asObservable(); } diff --git a/cerberus/src/colors.scss b/cerberus/src/colors.scss index 9187c0a..e10dda9 100644 --- a/cerberus/src/colors.scss +++ b/cerberus/src/colors.scss @@ -15,4 +15,11 @@ $btn-secondary-active-background: #f0f0f0; $gray-top: #e6e6e6; $gray-bottom: #cfcfcf; -$gray-icon-secondary: #777777; \ No newline at end of file +$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; diff --git a/cerberus/src/components-styles/button.scss b/cerberus/src/components-styles/button.scss index d279a29..ead0688 100644 --- a/cerberus/src/components-styles/button.scss +++ b/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; diff --git a/cerberus/src/components-styles/form/form.scss b/cerberus/src/components-styles/form/form.scss index 6656760..9a4cbef 100644 --- a/cerberus/src/components-styles/form/form.scss +++ b/cerberus/src/components-styles/form/form.scss @@ -1,4 +1,17 @@ -@import './form-control.scss'; -@import './label.scss'; -@import './input.scss'; -@import './select.scss'; \ No newline at end of file +@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; + } + } +}