diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3204ce7..8cb9279 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,7 +6,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {RouterModule} from "@angular/router";
import { CollaborateurComponent } from './components/collaborateur/collaborateur.component';
import { CollaborateurEditComponent } from './components/collaborateur/collaborateur-edit/collaborateur-edit.component';
-import {FormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './components/home/home.component';
import { AgenceComponent } from './components/agence/agence.component';
@@ -15,7 +15,6 @@ import { CollaborateurDetailComponent } from './components/collaborateur/collabo
import { BusinessunitComponent } from './components/businessunit/businessunit.component';
import { BusinessunitEditComponent } from './components/businessunit/businessunit-edit/businessunit-edit.component';
import { BusinessunitDetailComponent } from './components/businessunit/businessunit-detail/businessunit-detail.component';
-import { AgenceDetailComponent } from './components/agence/agence-detail/agence-detail.component';
@NgModule({
declarations: [
@@ -25,7 +24,6 @@ import { AgenceDetailComponent } from './components/agence/agence-detail/agence-
HomeComponent,
AgenceComponent,
AgenceEditComponent,
- AgenceDetailComponent,
CollaborateurDetailComponent,
BusinessunitComponent,
BusinessunitEditComponent,
@@ -38,7 +36,8 @@ import { AgenceDetailComponent } from './components/agence/agence-detail/agence-
NgbModule,
RouterModule,
FormsModule,
- AppRoutingModule
+ AppRoutingModule,
+ ReactiveFormsModule
],
providers: [Title],
bootstrap: [AppComponent]
diff --git a/src/app/components/agence/agence-detail/agence-detail.component.html b/src/app/components/agence/agence-detail/agence-detail.component.html
deleted file mode 100644
index 01ffc21..0000000
--- a/src/app/components/agence/agence-detail/agence-detail.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
diff --git a/src/app/components/agence/agence-detail/agence-detail.component.scss b/src/app/components/agence/agence-detail/agence-detail.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/components/agence/agence-detail/agence-detail.component.ts b/src/app/components/agence/agence-detail/agence-detail.component.ts
deleted file mode 100644
index a06a442..0000000
--- a/src/app/components/agence/agence-detail/agence-detail.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {Agence} from "../../../interfaces/agence";
-import {HttpClient} from "@angular/common/http";
-import {AgenceService} from "../../../services/agence.service";
-@Component({
- selector: 'app-agence-detail',
- templateUrl: './agence-detail.component.html',
- styleUrls: ['./agence-detail.component.scss']
-})
-export class AgenceDetailComponent implements OnInit {
-
- agences : Agence[] = [];
- @Input()
- agence = {} as Agence ;
-
- constructor(
- private http : HttpClient,
- private agenceService: AgenceService,
- ) { }
-
- ngOnInit(): void {
- this.getAgences();
- this.getAgences();
- }
-
- getAgences():void {
- this.agenceService.getAgences()
- .subscribe(agences => this.agences = agences);
- }
-
-}
diff --git a/src/app/components/agence/agence-edit/agence-edit.component.html b/src/app/components/agence/agence-edit/agence-edit.component.html
index 77428c1..14b06f9 100644
--- a/src/app/components/agence/agence-edit/agence-edit.component.html
+++ b/src/app/components/agence/agence-edit/agence-edit.component.html
@@ -4,9 +4,25 @@
{{agence.name | uppercase}}
id : {{agence.id}}
-
+
+
+
-
-
-
diff --git a/src/app/components/agence/agence-edit/agence-edit.component.ts b/src/app/components/agence/agence-edit/agence-edit.component.ts
index 41c65b2..98ce358 100644
--- a/src/app/components/agence/agence-edit/agence-edit.component.ts
+++ b/src/app/components/agence/agence-edit/agence-edit.component.ts
@@ -3,6 +3,7 @@ import {Agence} from "../../../interfaces/agence";
import {ActivatedRoute} from "@angular/router";
import {AgenceService} from "../../../services/agence.service";
import {Location} from "@angular/common";
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-agence-edit',
@@ -10,16 +11,23 @@ import {Location} from "@angular/common";
styleUrls: ['./agence-edit.component.scss']
})
export class AgenceEditComponent implements OnInit {
- agence : Agence | undefined;
+ agence = {} as Agence ;
+
+ registerForm!: FormGroup;
+ submitted = false;
constructor(
private route: ActivatedRoute,
private agenceService: AgenceService,
- private location: Location
+ private location: Location,
+ private formBuilder: FormBuilder
) { }
ngOnInit(): void {
this.getAgence()
+ this.registerForm = this.formBuilder.group({
+ name: ['', Validators.required]
+ });
}
getAgence(): void {
@@ -46,4 +54,21 @@ export class AgenceEditComponent implements OnInit {
}
}
+ onSubmit() {
+ this.submitted = true;
+
+ if (this.registerForm.invalid) {
+ return;
+ }
+ this.agence.name = this.registerForm.value.name
+ this.save()
+ }
+
+ get f() { return this.registerForm.controls; }
+
+ onReset() {
+ this.submitted = false;
+ this.registerForm.reset();
+ }
+
}
diff --git a/src/app/components/agence/agence.component.html b/src/app/components/agence/agence.component.html
index e219d51..8f6f8dd 100644
--- a/src/app/components/agence/agence.component.html
+++ b/src/app/components/agence/agence.component.html
@@ -21,9 +21,22 @@
Ajouter une agence :
-
+
+
-
diff --git a/src/app/components/agence/agence.component.ts b/src/app/components/agence/agence.component.ts
index e1c007f..4a00db4 100644
--- a/src/app/components/agence/agence.component.ts
+++ b/src/app/components/agence/agence.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import {Agence} from "../../interfaces/agence";
import {HttpClient} from "@angular/common/http";
import {AgenceService} from "../../services/agence.service";
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-agence',
@@ -12,13 +13,20 @@ export class AgenceComponent implements OnInit {
agences : Agence[] = [];
agence = {} as Agence ;
+ registerForm!: FormGroup;
+ submitted = false;
+
constructor(
private http : HttpClient,
private agenceService: AgenceService,
+ private formBuilder: FormBuilder
) { }
ngOnInit(): void {
this.getAgences();
+ this.registerForm = this.formBuilder.group({
+ name: ['', Validators.required]
+ });
}
getAgences():void {
@@ -32,4 +40,22 @@ export class AgenceComponent implements OnInit {
this.agences.push(agence);
});
}
+
+ onSubmit() {
+ this.submitted = true;
+
+ if (this.registerForm.invalid) {
+ return;
+ }
+ this.agence = this.registerForm.value
+ this.add(this.agence)
+ }
+
+ get f() { return this.registerForm.controls; }
+
+ onReset() {
+ this.submitted = false;
+ this.registerForm.reset();
+ }
+
}
diff --git a/src/styles.scss b/src/styles.scss
index ab2785a..5e192ac 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -36,7 +36,21 @@ button:disabled {
cursor: auto;
}
+.form-submit {
+ text-decoration: none;
+ background-color: $secondary;
+ color: white;
+ border-radius: 4px;
+}
+.form-submit:hover {
+ background-color: $primary;
+}
+.form-submit:disabled {
+ background-color: #eee;
+ color: #ccc;
+ cursor: auto;
+}
.entities {
margin: 0 0 2em 0;
@@ -72,14 +86,6 @@ button:disabled {
color: #fafafa;
}
-.spaced{
- padding : 0 25px;
-}
-
-.list {
-
-}
-
input{
margin: 0 15px 0 0;
}