florian/Cerberus
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add update application component and danger color for buttons.

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2021-08-07 23:51:44 +02:00
parent 82053e4002
commit 84d66ec45a
13 changed files with 255 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cerberus/src/app/app.module.ts
View File

@@ -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,

48
cerberus/src/app/applications/create-application/create-application.component.html
View File

@@ -1,25 +1,23 @@
<div class="content">
<h1>Add a new application</h1>
<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>
</div>
<h1>Add a new application</h1>
<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>

21
cerberus/src/app/applications/create-application/create-application.component.scss
View File

@@ -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;
}
}
}

30
cerberus/src/app/applications/update-application/update-application.component.html Normal file
View File

@@ -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>

0
cerberus/src/app/applications/update-application/update-application.component.scss Normal file
View File

25
cerberus/src/app/applications/update-application/update-application.component.spec.ts Normal file
View File

@@ -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();
});
});

59
cerberus/src/app/applications/update-application/update-application.component.ts Normal file
View File

@@ -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();
}
}

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

@@ -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);
}
}

111
cerberus/src/app/core/components/modal/modal.component.scss
View File

@@ -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;
}
}
}

8
cerberus/src/app/core/services/modal.service.ts
View File

@@ -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();
}

9
cerberus/src/colors.scss
View File

@@ -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;

18
cerberus/src/components-styles/button.scss
View File

@@ -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;

21
cerberus/src/components-styles/form/form.scss
View File

@@ -1,4 +1,17 @@
@import './form-control.scss';
@import './label.scss';
@import './input.scss';
@import './select.scss';
@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;
}
}
}