From 7a47929b7fea46012c6b22a72f141e6076f82d87 Mon Sep 17 00:00:00 2001 From: majid noureddine Date: Sun, 17 May 2020 00:30:36 +0100 Subject: [PATCH 1/5] create form to add new appareils --- src/app/app.component.html | 1 + src/app/app.module.ts | 5 ++++- .../edit-appareil.component.html | 22 +++++++++++++++++++ .../edit-appareil.component.scss | 0 .../edit-appareil/edit-appareil.component.ts | 19 ++++++++++++++++ 5 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 src/app/edit-appareil/edit-appareil.component.html create mode 100644 src/app/edit-appareil/edit-appareil.component.scss create mode 100644 src/app/edit-appareil/edit-appareil.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index f3b4310..38c0d5d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,6 +4,7 @@

Vous êtes connecté depuis {{ secondes }} secondes !

diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5d529b9..4e2791a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,10 +11,12 @@ import { AuthService } from './services/auth.service'; import { SingleAppareilComponent } from './single-appareil/single-appareil.component'; import { FourOhFourComponent } from './four-oh-four/four-oh-four.component'; import { AuthGuard } from './services/auth-guard.service'; +import { EditAppareilComponent } from './edit-appareil/edit-appareil.component'; const appRoutes: Routes = [ { path: 'appareils', canActivate: [AuthGuard], component: AppareilViewComponent }, { path: 'appareils/:id', canActivate: [AuthGuard], component: SingleAppareilComponent }, + { path: 'edit', canActivate: [AuthGuard], component: EditAppareilComponent }, { path: 'auth', component: AuthComponent }, { path: '', component: AuthComponent }, { path: 'not-found', component: FourOhFourComponent }, @@ -28,7 +30,8 @@ const appRoutes: Routes = [ AuthComponent, AppareilViewComponent, SingleAppareilComponent, - FourOhFourComponent + FourOhFourComponent, + EditAppareilComponent ], imports: [ BrowserModule, diff --git a/src/app/edit-appareil/edit-appareil.component.html b/src/app/edit-appareil/edit-appareil.component.html new file mode 100644 index 0000000..cabc7e1 --- /dev/null +++ b/src/app/edit-appareil/edit-appareil.component.html @@ -0,0 +1,22 @@ +
+
+
+
+ + +
+
+ + +
+ +
+
+
diff --git a/src/app/edit-appareil/edit-appareil.component.scss b/src/app/edit-appareil/edit-appareil.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/edit-appareil/edit-appareil.component.ts b/src/app/edit-appareil/edit-appareil.component.ts new file mode 100644 index 0000000..2e15a97 --- /dev/null +++ b/src/app/edit-appareil/edit-appareil.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit } from '@angular/core'; +import { NgForm } from '@angular/forms'; + +@Component({ + selector: 'app-edit-appareil', + templateUrl: './edit-appareil.component.html', + styleUrls: ['./edit-appareil.component.scss'] +}) +export class EditAppareilComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + + onSubmit(form: NgForm) { + console.log(form.value); + } +} From 3b903bcf292fcc51db338b65b530f8d96779abfe Mon Sep 17 00:00:00 2001 From: majid noureddine Date: Sun, 17 May 2020 00:35:39 +0100 Subject: [PATCH 2/5] add form validation --- src/app/edit-appareil/edit-appareil.component.html | 6 +++--- src/app/edit-appareil/edit-appareil.component.ts | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/edit-appareil/edit-appareil.component.html b/src/app/edit-appareil/edit-appareil.component.html index cabc7e1..8114717 100644 --- a/src/app/edit-appareil/edit-appareil.component.html +++ b/src/app/edit-appareil/edit-appareil.component.html @@ -5,18 +5,18 @@ - +
-
- + diff --git a/src/app/edit-appareil/edit-appareil.component.ts b/src/app/edit-appareil/edit-appareil.component.ts index 2e15a97..a067714 100644 --- a/src/app/edit-appareil/edit-appareil.component.ts +++ b/src/app/edit-appareil/edit-appareil.component.ts @@ -8,6 +8,8 @@ import { NgForm } from '@angular/forms'; }) export class EditAppareilComponent implements OnInit { + defaultOnOff = 'éteint'; + constructor() { } ngOnInit(): void { From 853db7e811c77fae426108fb146e22d36b7e9947 Mon Sep 17 00:00:00 2001 From: majid noureddine Date: Sun, 17 May 2020 00:43:01 +0100 Subject: [PATCH 3/5] perform data provided by form --- src/app/edit-appareil/edit-appareil.component.ts | 10 ++++++++-- src/app/services/appareil.service.ts | 13 +++++++++++++ 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/app/edit-appareil/edit-appareil.component.ts b/src/app/edit-appareil/edit-appareil.component.ts index a067714..7cda8bd 100644 --- a/src/app/edit-appareil/edit-appareil.component.ts +++ b/src/app/edit-appareil/edit-appareil.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { NgForm } from '@angular/forms'; +import { AppareilService } from '../services/appareil.service'; +import { Router } from '@angular/router'; @Component({ selector: 'app-edit-appareil', @@ -10,12 +12,16 @@ export class EditAppareilComponent implements OnInit { defaultOnOff = 'éteint'; - constructor() { } + constructor(private appareilService: AppareilService, + private router: Router) { } ngOnInit(): void { } onSubmit(form: NgForm) { - console.log(form.value); + const name = form.value['name']; + const status = form.value['status']; + this.appareilService.addAppareil(name, status); + this.router.navigate(['/appareils']); } } diff --git a/src/app/services/appareil.service.ts b/src/app/services/appareil.service.ts index 6f0918c..381058b 100644 --- a/src/app/services/appareil.service.ts +++ b/src/app/services/appareil.service.ts @@ -53,4 +53,17 @@ export class AppareilService { } ); } + + addAppareil(name: string, status: string) { + const appareilObject = { + id: 0, + name: '', + status: '' + }; + appareilObject.name = name; + appareilObject.status = status; + appareilObject.id = this.appareils[(this.appareils.length - 1)].id + 1; + this.appareils.push(appareilObject); + this.emitAppareilSubject(); + } } From dd5b10c0a331cce28e8508281067236d3d1cb9ee Mon Sep 17 00:00:00 2001 From: majid noureddine Date: Mon, 18 May 2020 01:17:39 +0100 Subject: [PATCH 4/5] angular form by reactive method --- src/app/app.component.html | 1 + src/app/app.module.ts | 15 +++++-- .../edit-appareil.component.html | 1 + src/app/models/User.model.ts | 9 ++++ src/app/new-user/new-user.component.html | 25 +++++++++++ src/app/new-user/new-user.component.scss | 0 src/app/new-user/new-user.component.ts | 45 +++++++++++++++++++ src/app/services/user.service.ts | 20 +++++++++ src/app/user-list/user-list.component.html | 12 +++++ src/app/user-list/user-list.component.scss | 0 src/app/user-list/user-list.component.ts | 31 +++++++++++++ 11 files changed, 156 insertions(+), 3 deletions(-) create mode 100644 src/app/models/User.model.ts create mode 100644 src/app/new-user/new-user.component.html create mode 100644 src/app/new-user/new-user.component.scss create mode 100644 src/app/new-user/new-user.component.ts create mode 100644 src/app/services/user.service.ts create mode 100644 src/app/user-list/user-list.component.html create mode 100644 src/app/user-list/user-list.component.scss create mode 100644 src/app/user-list/user-list.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 38c0d5d..a28e484 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -5,6 +5,7 @@
  • Authentification
  • Appareils
  • Nouvel appareil
    • +
  • Utilisateurs

    • Vous êtes connecté depuis {{ secondes }} secondes !

    diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4e2791a..33542c4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AppareilComponent } from './appareil/appareil.component'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule} from '@angular/forms'; import { AppareilService } from './services/appareil.service'; import { AuthComponent } from './auth/auth.component'; import { AppareilViewComponent } from './appareil-view/appareil-view.component'; @@ -12,11 +12,16 @@ import { SingleAppareilComponent } from './single-appareil/single-appareil.compo import { FourOhFourComponent } from './four-oh-four/four-oh-four.component'; import { AuthGuard } from './services/auth-guard.service'; import { EditAppareilComponent } from './edit-appareil/edit-appareil.component'; +import { UserService } from './services/user.service'; +import { UserListComponent } from './user-list/user-list.component'; +import { NewUserComponent } from './new-user/new-user.component'; const appRoutes: Routes = [ { path: 'appareils', canActivate: [AuthGuard], component: AppareilViewComponent }, { path: 'appareils/:id', canActivate: [AuthGuard], component: SingleAppareilComponent }, { path: 'edit', canActivate: [AuthGuard], component: EditAppareilComponent }, + { path: 'users', /*canActivate: [AuthGuard],*/ component: UserListComponent }, + { path: 'new-user', /*canActivate: [AuthGuard],*/ component: NewUserComponent }, { path: 'auth', component: AuthComponent }, { path: '', component: AuthComponent }, { path: 'not-found', component: FourOhFourComponent }, @@ -31,17 +36,21 @@ const appRoutes: Routes = [ AppareilViewComponent, SingleAppareilComponent, FourOhFourComponent, - EditAppareilComponent + EditAppareilComponent, + UserListComponent, + NewUserComponent ], imports: [ BrowserModule, FormsModule, + ReactiveFormsModule, RouterModule.forRoot(appRoutes) ], providers: [ AppareilService, AuthService, - AuthGuard + AuthGuard, + UserService ], bootstrap: [AppComponent] }) diff --git a/src/app/edit-appareil/edit-appareil.component.html b/src/app/edit-appareil/edit-appareil.component.html index 8114717..1d93e49 100644 --- a/src/app/edit-appareil/edit-appareil.component.html +++ b/src/app/edit-appareil/edit-appareil.component.html @@ -1,3 +1,4 @@ +
    diff --git a/src/app/models/User.model.ts b/src/app/models/User.model.ts new file mode 100644 index 0000000..1bc99a0 --- /dev/null +++ b/src/app/models/User.model.ts @@ -0,0 +1,9 @@ +export class User { + constructor( + public firstName: string, + public lastName: string, + public email: string, + public drinkPreference: string, + public hobbies?: string[] + ) {} +} diff --git a/src/app/new-user/new-user.component.html b/src/app/new-user/new-user.component.html new file mode 100644 index 0000000..b6dd5ef --- /dev/null +++ b/src/app/new-user/new-user.component.html @@ -0,0 +1,25 @@ + +
    + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + + +
    diff --git a/src/app/new-user/new-user.component.scss b/src/app/new-user/new-user.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/new-user/new-user.component.ts b/src/app/new-user/new-user.component.ts new file mode 100644 index 0000000..18076ee --- /dev/null +++ b/src/app/new-user/new-user.component.ts @@ -0,0 +1,45 @@ +import { Component, OnInit } from '@angular/core'; +import {FormBuilder, FormGroup} from '@angular/forms'; +import {UserService} from '../services/user.service'; +import {Router} from '@angular/router'; +import {User} from '../models/User.model'; + +@Component({ + selector: 'app-new-user', + templateUrl: './new-user.component.html', + styleUrls: ['./new-user.component.scss'] +}) +export class NewUserComponent implements OnInit { + + userForm: FormGroup; + + constructor(private formBuilder: FormBuilder, + private userService: UserService, + private router: Router + ) { } + + ngOnInit(): void { + this.initForm(); + } + + initForm() { + this.userForm = this.formBuilder.group({ + firstName: '', + lastName: '', + email: '', + drinkPreference: '' + }); + } + + onSubmitForm() { + const formValue = this.userForm.value; + const newUser = new User( + formValue['firstName'], + formValue['lastName'], + formValue['email'], + formValue['drinkPreference'] + ); + this.userService.addUser(newUser); + this.router.navigate(['/users']); + } +} diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts new file mode 100644 index 0000000..338bea2 --- /dev/null +++ b/src/app/services/user.service.ts @@ -0,0 +1,20 @@ +import { User } from '../models/User.model'; +import { Subject } from 'rxjs/Subject'; + +export class UserService { + + private users = [ + new User('Will', 'Alexander', 'will@will.com', 'jus d\'orange', ['coder', 'boire du café']) + ]; + + userSubject = new Subject(); + + emitUsers() { + this.userSubject.next(this.users.slice()); + } + + addUser(user: User) { + this.users.push(user); + this.emitUsers(); + } +} diff --git a/src/app/user-list/user-list.component.html b/src/app/user-list/user-list.component.html new file mode 100644 index 0000000..e81d683 --- /dev/null +++ b/src/app/user-list/user-list.component.html @@ -0,0 +1,12 @@ +
      +
    • +

      {{ user.firstName }} {{ user.lastName }}

      +

      {{ user.email }}

      +

      Cette persone préfère le {{ user.drinkPreference }}

      +

      + Cette personne a des hobbies ! + {{ hobby }} - +

      +
      • + Nouvel utilisateur +
    diff --git a/src/app/user-list/user-list.component.scss b/src/app/user-list/user-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/user-list/user-list.component.ts b/src/app/user-list/user-list.component.ts new file mode 100644 index 0000000..51e940f --- /dev/null +++ b/src/app/user-list/user-list.component.ts @@ -0,0 +1,31 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subscription } from 'rxjs/Subscription'; +import { User } from '../models/User.model'; +import { UserService } from '../services/user.service'; + +@Component({ + selector: 'app-user-list', + templateUrl: './user-list.component.html', + styleUrls: ['./user-list.component.scss'] +}) +export class UserListComponent implements OnInit, OnDestroy { + + users: User[]; + + userSubscription: Subscription; + + constructor(private userService: UserService) { } + + ngOnInit() { + this.userSubscription = this.userService.userSubject.subscribe( + (users: User[]) => { + this.users = users; + } + ); + this.userService.emitUsers(); + } + + ngOnDestroy() { + this.userSubscription.unsubscribe(); + } +} From 626f645c1e15d9d4b6570314173d8406a348a3ed Mon Sep 17 00:00:00 2001 From: majid noureddine Date: Mon, 18 May 2020 01:52:28 +0100 Subject: [PATCH 5/5] reactive form validation --- src/app/new-user/new-user.component.html | 10 ++++++++- src/app/new-user/new-user.component.ts | 27 ++++++++++++++++++------ 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/app/new-user/new-user.component.html b/src/app/new-user/new-user.component.html index b6dd5ef..d51ddad 100644 --- a/src/app/new-user/new-user.component.html +++ b/src/app/new-user/new-user.component.html @@ -20,6 +20,14 @@
    - +
    +

    Vos hobbies

    +
    + +
    + + +
    +
    diff --git a/src/app/new-user/new-user.component.ts b/src/app/new-user/new-user.component.ts index 18076ee..7aeb3a2 100644 --- a/src/app/new-user/new-user.component.ts +++ b/src/app/new-user/new-user.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import {FormBuilder, FormGroup} from '@angular/forms'; +import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms'; import {UserService} from '../services/user.service'; import {Router} from '@angular/router'; import {User} from '../models/User.model'; @@ -24,10 +24,11 @@ export class NewUserComponent implements OnInit { initForm() { this.userForm = this.formBuilder.group({ - firstName: '', - lastName: '', - email: '', - drinkPreference: '' + firstName: ['', Validators.required], + lastName: ['', Validators.required], + email: ['', [Validators.required, Validators.email]], + drinkPreference: ['', Validators.required], + hobbies: this.formBuilder.array([]) }); } @@ -37,9 +38,23 @@ export class NewUserComponent implements OnInit { formValue['firstName'], formValue['lastName'], formValue['email'], - formValue['drinkPreference'] + formValue['drinkPreference'], + formValue['hobbies'] ? formValue['hobbies'] : [] ); this.userService.addUser(newUser); this.router.navigate(['/users']); } + + getHobbies(): FormArray { + return this.userForm.get('hobbies') as FormArray; + } + + onAddHobby() { + const newHobbyControl = this.formBuilder.control(null, Validators.required); + this.getHobbies().push(newHobbyControl); + } + + onRemoveHobby() { + this.getHobbies().removeAt(-1); + } }