commit modification

db_users_projects_companies.json

@@ -21,43 +21,30 @@
   ],
   "users": [
     {
+      "id": 3,
+      "firstname": "David",
+      "lastname": "Touitou",
+      "email": "david.touitou@natan.fr",
       "address": {
         "numRue": 44,
         "nomRue": "Rue Notre Dame de Paris",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
-      },
-      "firstname": "Placide",
-      "lastname": "Nduwayo",
-      "email": "placide.nduwayo@natan.fr",
-      "id": 2
-    },
-    {
-      "address": {
-        "numRue": 44,
-        "nomRue": "Rue Notre Dame de Paris",
-        "bp": 75002,
-        "ville": "Paris",
-        "pays": "France"
-      },
-      "firstname": "David",
-      "lastname": "Touitou",
-      "email": "david.touitou@natan.fr",
-      "id": 3
+      }
     },
     {
+      "id": 4,
+      "firstname": "Nadhir",
+      "lastname": "Ben Mohamed",
+      "email": "nadhir.ben-mohamed@natan.fr",
       "address": {
         "numRue": 44,
         "nomRue": "Rue Notre Dame de Paris",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
-      },
-      "firstname": "Nadhir",
-      "lastname": "Ben Mohamed",
-      "email": "nadhir.ben-mohamed@natan.fr",
-      "id": 4
+      }
     },
     {
       "address": {
@@ -93,19 +80,6 @@
         "ville": "Paris",
         "pays": "France"
       },
-      "firstname": "Naolie",
-      "lastname": "Boudouka",
-      "email": "naolie.boudouka@natan.fr",
-      "id": 7
-    },
-    {
-      "address": {
-        "numRue": 44,
-        "nomRue": "Rue Notre Dame de Paris",
-        "bp": 75002,
-        "ville": "Paris",
-        "pays": "France"
-      },
       "firstname": "Syrine",
       "lastname": "Ait Haddad",
       "email": "syrine.ait-haddadene@natan.fr",
@@ -149,28 +123,33 @@
         "ville": "Paris",
         "pays": "France"
       }
-    }
-  ],
-  "projects": [
+    },
     {
-      "id": 2,
-      "projectName": "Project-2",
-      "priority": 1,
-      "creationDate": "05 18 2022",
-      "companyId": 3,
-      "description": "Creating and training DL models",
-      "userId": 2,
-      "state": "END"
+      "id": 12,
+      "firstname": "Placide",
+      "lastname": "Nduwayo",
+      "email": "placide.nduwayo@natan.fr",
+      "address": {
+        "numRue": 44,
+        "nomRue": "Rue Notre Dame de Paris",
+        "bp": 75002,
+        "ville": "Paris",
+        "pays": "France"
+      }
     },
     {
-      "id": 3,
-      "projectName": "Project-3",
-      "priority": 1,
-      "creationDate": "05 18 2022",
-      "companyId": 2,
-      "description": "Project description",
-      "userId": 2,
-      "state": "IN PROGRESS"
+      "id": 13,
+      "firstname": null,
+      "lastname": null,
+      "email": null,
+      "address": {
+        "numRue": null,
+        "nomRue": null,
+        "bp": null,
+        "ville": null,
+        "pays": null
+      }
     }
-  ]
+  ],
+  "projects": []
 }

src/app/ngrx/msg.state.ts

@@ -1,9 +1,14 @@
 export enum MsgState {
-  LOADING = '[User] LOADING ...',
-  LOADED = '[User] LOADED',
-  ERROR = '[User] ERROR',
+  LOADING = '[User] USERS ARE LOADING ...',
+  LOADED = '[User] SUCCESSFUL LOADED',
+  ERR = 'ERROR ACCURRED',
   INIT_STATE = '[User] INITIAL STATE',
+  FORM_LOADING = 'FORM LOADING',
+  FORM_LOADED = 'FORM LOADED',
+  FORM_LOAD_ERR= 'FORM LOADING ERROR',
   CONFIRM = 'CONFIRM',
-  NEW ='NEW',
-  SUCCESS = 'SUCCESSFUL SAVED'
+  ADDED = 'SUCCESSFULLY ADDED',
+  EXIST = 'ALREADY EXISTS',
+  UPDATED = '[User] SUCCESSFULLY UPDATED',
+  DEFAULT_MSG = 'DEFAULT LOADING MSG'
 }

src/app/ngrx/users/user.state.ts

@@ -3,6 +3,7 @@ import { MsgState } from "../msg.state";
 
 //create a state
 export class UserState {
+  currentUser!: User | null;
   usersList!: User[];
   msgState!: MsgState;
   userServerErrorMsg!: string;

src/app/ngrx/users/users.actions.ts

@@ -2,6 +2,7 @@ import { Action } from '@ngrx/store';
 import { User } from 'src/app/shared/models/user.model';
 
 //type of actions
+
 export enum UserActionType {
   /* action: get all users */
   GET_ALL_USERS = '[User] GET ALL USERS',
@@ -9,32 +10,36 @@ export enum UserActionType {
   GET_ALL_USERS_ERROR = '[User] GET-ALL USERS ERROR',
 
   /* action: search a user */
-
   SEARCH_A_USER = '[User] SEARCH A USER',
   SEARCH_A_USER_SUCCESS = '[User] SEARCH A USER SUCCESS',
   SEARCH_A_USER_ERROR = '[User] SEARCH A USER ERROR',
 
-  /* action: edit a user */
 
-  EDIT_A_USER = '[User] EDIT A USER',
-  EDIT_A_USER_SUCCESS = '[User] EDIT A USER SUCCESS',
-  EDIT_A_USER_ERROR = '[User] EDIT A USER ERROR',
+  /** action of button: create a user form*/
+  CREATE_FORM_ADD_USER = '[User] USER FORM ADD',
+  CREATE_FORM_ADD_USER_SUCCESS = '[User] USER FORM ADD SUCCESS',
+  CREATE_FORM_ADD_USER_ERROR = '[User] USER FORM ADD ERROR',
 
-  /* action of button: create a user form*/
+  /** action of saving user data in the form */
+  SAVE_USERFORM_ADD = '[User] SAVE USER',
+  SAVE_USERFORM_ADD_SUCCESS = '[User] SAVE USER SUCCESS',
+  SAVE_USERFORM_ADD_ERROR = '[User] SAVE USER ERROR',
 
-  CREATE_A_USERFORM = '[User] CREATE USER FORM',
-  CREATE_A_USERFORM_SUCCESS = '[User] CREATE A USER FORM SUCCESS',
-  CREATE_A_USERFORM_ERROR = '[User] CREATE A USER FORM ERROR',
+  /* action: create form to edit a user */
+  CREATE_FORM_USER_EDIT = '[User] USER FORM EDIT',
+  CREATE_FORM_USER_EDIT_SUCCESS = '[User] USER FORM EDIT SUCCESS',
+  CREATE_FORM_USER_EDIT_ERROR = '[User] USER FORM EDIT ERROR',
 
-  SAVE_A_USERFORM ='[User] SAVE A USER',
-  SAVE_A_USERFORM_SUCCESS ='[User] SAVE A USER SUCCESS',
-  SAVE_A_USERFORM_ERROR='[User] SAVE A USER ERROR',
+  /** action of updating user from user form */
+  UPDATE_USER_FORM = '[User] USER FORM UPDATE',
+  UPDATE_USER_FORM_SUCCESS = '[User] USER FORM UPDATE SUCCESS',
+  UPDATE_USER_FORM_ERROR = '[User] USER FORM UPDATE ERROR',
 
-   /* action: delete a user */
 
-   DELETE_A_USER = '[User] DELETE A USER',
-   DELETE_A_USER_SUCCESS = '[User] DELETE A USER SUCCESS',
-   DELETE_A_USER_ERROR = '[User] DELETE A USER ERROR'
+  /* action: delete a user */
+  DELETE_A_USER = '[User] DELETE A USER',
+  DELETE_A_USER_SUCCESS = '[User] DELETE A USER SUCCESS',
+  DELETE_A_USER_ERROR = '[User] DELETE A USER ERROR',
 }
 
 //create actions
@@ -73,58 +78,76 @@ export class SearchUserActionError implements Action {
   constructor(public payload: string) {}
 }
 
-/* Actios of editing a user */
+/* Actios of creating a user form to add user*/
 
-export class EditUsersAction implements Action {
-  type: UserActionType = UserActionType.EDIT_A_USER;
-
-  constructor(public payload: {user: User}) {}
+export class CreateFormUserAddAction implements Action {
+  type: UserActionType = UserActionType.CREATE_FORM_ADD_USER;
+  constructor(public payload: void) {}
 }
 
-export class EditUserActionSuccess implements Action {
-  type: UserActionType = UserActionType.EDIT_A_USER_SUCCESS;
-  constructor(public payload: User) {}
+export class CreateFormUserAddActionSuccess implements Action {
+  type: UserActionType = UserActionType.CREATE_FORM_ADD_USER_SUCCESS;
+  constructor(public payload: any) {}
 }
 
-export class EditUserActionError implements Action {
-  type: UserActionType = UserActionType.EDIT_A_USER_ERROR;
+export class CreateFormUserAddActionError implements Action {
+  type: UserActionType = UserActionType.CREATE_FORM_ADD_USER_ERROR;
   constructor(public payload: string) {}
 }
 
-/* Actios of creating a user form */
+/**action of saving a user form data*/
+export class SaveUserFormAction implements Action{
+  type: UserActionType = UserActionType.SAVE_USERFORM_ADD;
+  constructor(public payload: User){}
+}
 
-export class CreateUserFormAction implements Action {
-  type: UserActionType = UserActionType.CREATE_A_USERFORM;
+export class SaveUserFormActionSuccess implements Action{
+  type: UserActionType = UserActionType.SAVE_USERFORM_ADD_SUCCESS;
+  constructor(public payload: User){}
+}
 
-  constructor(public payload: any) {}
+export class SaveUserFormActionError implements Action{
+  type: UserActionType = UserActionType.SAVE_USERFORM_ADD_ERROR;
+  constructor(public payload: string){}
 }
 
-export class CreateUserFormActionSuccess implements Action {
-  type: UserActionType = UserActionType.CREATE_A_USERFORM_SUCCESS;
-  constructor(public payload: any) {}
+/* Actios of creating a user form to edit user*/
+
+export class CreareFormUserEditAction implements Action {
+  type: UserActionType = UserActionType.CREATE_FORM_USER_EDIT;
+
+  constructor(public payload: User) {}
+}
+
+export class CreareFormUserEditActionSuccess implements Action {
+  type: UserActionType = UserActionType.CREATE_FORM_USER_EDIT_SUCCESS;
+  constructor(public payload: User) {}
 }
 
-export class CreateUserFormActionError implements Action {
-  type: UserActionType = UserActionType.CREATE_A_USERFORM_ERROR;
+export class CreareFormUserEditActionActionError implements Action {
+  type: UserActionType = UserActionType.CREATE_FORM_USER_EDIT_ERROR;
   constructor(public payload: string) {}
 }
 
-/**action of saving a user */
-export class SaveUserFormAction implements Action{
-  type: UserActionType = UserActionType.SAVE_A_USERFORM;
+/** action of updating user from user data form */
+
+export class UpdateUserFormAction implements Action{
+  type: UserActionType = UserActionType.UPDATE_USER_FORM;
   constructor(public payload: User){}
 }
 
-export class SaveUserFormActionSuccess implements Action{
-  type: UserActionType = UserActionType.SAVE_A_USERFORM_SUCCESS;
+export class UpdateUserFormActionSuccess implements Action{
+  type: UserActionType = UserActionType.UPDATE_USER_FORM_SUCCESS;
   constructor(public payload: User){}
 }
 
-export class SaveUserFormActionError implements Action{
-  type: UserActionType = UserActionType.SAVE_A_USERFORM_ERROR;
+export class UpdateUserFormActionError implements Action{
+
+  type: UserActionType = UserActionType.UPDATE_USER_FORM_ERROR;
   constructor(public payload: string){}
 }
 
+
 /* Actios of deleting a user */
 
 export class DeleteUsersAction implements Action {
@@ -150,15 +173,18 @@ export type UserActionUnion =
   | SearchUsersAction
   | SearchUserActionSuccess
   | SearchUserActionError
-  | EditUsersAction
-  | EditUserActionSuccess
-  | EditUserActionError
-  | CreateUserFormAction
-  | CreateUserFormActionSuccess
-  | CreateUserFormActionError
+  | CreateFormUserAddAction
+  | CreateFormUserAddActionSuccess
+  | CreateFormUserAddActionError
   | SaveUserFormAction
   | SaveUserFormActionSuccess
   | SaveUserFormActionError
+  | CreareFormUserEditAction
+  | CreareFormUserEditActionSuccess
+  | CreareFormUserEditActionActionError
+  | UpdateUserFormAction
+  | UpdateUserFormActionSuccess
+  | UpdateUserFormActionError
   | DeleteUsersAction
   | DeleteUserActionSuccess
   | DeleteUserActionError;

src/app/ngrx/users/users.effects.ts

@@ -1,4 +1,4 @@
-import { UserActionType, GetAllUsersActionSuccess, GetAllUsersActionError, UserActionUnion, SearchUserActionSuccess, SearchUserActionError, EditUserActionSuccess, EditUserActionError, DeleteUserActionSuccess, DeleteUserActionError, CreateUserFormActionSuccess, CreateUserFormActionError, SaveUserFormActionSuccess, SaveUserFormActionError } from './users.actions';
+import { UserActionType, GetAllUsersActionSuccess, GetAllUsersActionError, UserActionUnion, SearchUserActionSuccess, SearchUserActionError, CreareFormUserEditActionSuccess, CreareFormUserEditActionActionError, DeleteUserActionSuccess, DeleteUserActionError, CreateFormUserAddActionSuccess, CreateFormUserAddActionError, SaveUserFormActionSuccess, SaveUserFormActionError, UpdateUserFormAction, UpdateUserFormActionError, UpdateUserFormActionSuccess } from './users.actions';
 import { map, mergeMap, Observable, catchError, of } from 'rxjs';
 import { UsersService } from './../../shared/services/users.service';
 import { Injectable } from "@angular/core";
@@ -46,18 +46,6 @@ export class UserEffects{
     )
   );
 
-  //create editUser effect
-  editUserEffect: Observable<UserActionUnion> = createEffect(
-    () => this.effectActions.pipe(
-      ofType(UserActionType.EDIT_A_USER),
-      mergeMap( (userAction: UserActionUnion)=>{
-        return this.usersService.updateUser(userAction.payload).pipe(
-          map( (user: User)=> new EditUserActionSuccess(user)),
-          catchError( (err) => of(new EditUserActionError(err.message)))
-        )
-      })
-    )
-  );
 
   //create deleteUser effect
   deleteUserEffect: Observable<UserActionUnion> = createEffect(
@@ -72,21 +60,21 @@ export class UserEffects{
     )
   );
 
-  //create createUser effect: action of button to create user form
-  createUserFormEffect: Observable<UserActionUnion> = createEffect(
+  //create a user add form effect
+  createAddUserFormEffect: Observable<UserActionUnion> = createEffect(
     () => this.effectActions.pipe(
-      ofType(UserActionType.CREATE_A_USERFORM),
+      ofType(UserActionType.CREATE_FORM_ADD_USER),
       map( ()=>{
-        return new CreateUserFormActionSuccess({});
+        return new CreateFormUserAddActionSuccess({});
       }),
-      catchError( (err) => of(new CreateUserFormActionError(err.message)))
+      catchError( (err) => of(new CreateFormUserAddActionError(err.message)))
     )
   );
 
-  //create save a user effect: action of saving data of the form
+  //action of saving user form data effect
   saveUserFormEffect : Observable<UserActionUnion> = createEffect(
     () => this.effectActions.pipe(
-      ofType(UserActionType.SAVE_A_USERFORM),
+      ofType(UserActionType.SAVE_USERFORM_ADD),
       mergeMap( (userAction: UserActionUnion) => {
         return this.usersService.createUser(userAction.payload).pipe(
           map (user => new SaveUserFormActionSuccess(user)),
@@ -95,4 +83,29 @@ export class UserEffects{
       })
     )
   );
+
+  //create update user form with data of user to update effect
+  createUpdateUserFormEffect: Observable<UserActionUnion> = createEffect(
+    () => this.effectActions.pipe(
+      ofType(UserActionType.CREATE_FORM_USER_EDIT),
+      mergeMap( (userAction: UserActionUnion)=>{
+        return this.usersService.getUserById(userAction.payload.id).pipe(
+          map( (user: User)=> new CreareFormUserEditActionSuccess(user)),
+          catchError( (err) => of(new CreareFormUserEditActionActionError(err.message)))
+        )
+      })
+    )
+  );
+
+  updateUserFormDataEffect: Observable<UserActionUnion> = createEffect(
+    () => this.effectActions.pipe(
+      ofType(UserActionType.UPDATE_USER_FORM),
+      mergeMap( (userAction: UserActionUnion) =>{
+        return this.usersService.updateUser(userAction.payload).pipe(
+          map( (user: User) => new UpdateUserFormActionSuccess(user)),
+          catchError( err => of(new UpdateUserFormActionError(err.message)))
+        );
+      })
+    )
+  );
 }

src/app/ngrx/users/users.reducer.ts

@@ -5,6 +5,7 @@ import { UserActionUnion, UserActionType } from './users.actions';
 
 //create a state
 export class UserState {
+  currentUser!: User | null;
   usersList!: User[];
   msgState!: MsgState;
   userServerErrorMsg!: string;
@@ -13,6 +14,7 @@ export class UserState {
 //create reducer, a reducer need a initial state and an action
 const initUserState: UserState = {
   usersList: [],
+  currentUser: null,
   msgState: MsgState.INIT_STATE,
   userServerErrorMsg: 'No error message',
 };
@@ -21,7 +23,9 @@ export function userReducer(
   state: UserState = initUserState,
   action: Action
 ): UserState {
+
   switch (action.type) {
+
     /** get all users actions */
     case UserActionType.GET_ALL_USERS:
       return { ...state, msgState: MsgState.LOADING };
@@ -30,16 +34,17 @@ export function userReducer(
       return {
         ...state,
         msgState: MsgState.LOADED,
-        usersList: (<UserActionUnion>action).payload,
+        usersList: (<UserActionUnion> action).payload,
       };
 
     case UserActionType.GET_ALL_USERS_ERROR:
       return {
         ...state,
-        msgState: MsgState.ERROR,
+        msgState: MsgState.ERR,
         userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
+
     /** search a user actions */
     case UserActionType.SEARCH_A_USER:
       return { ...state, msgState: MsgState.LOADING };
@@ -54,73 +59,106 @@ export function userReducer(
     case UserActionType.SEARCH_A_USER_ERROR:
       return {
         ...state,
-        msgState: MsgState.ERROR,
+        msgState: MsgState.ERR,
         userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
-    /** edit a user actions */
-    case UserActionType.EDIT_A_USER:
+
+    /** create a user form actions */
+    case UserActionType.CREATE_FORM_ADD_USER:
       return {
         ...state,
-        msgState: MsgState.LOADING,
+        msgState: MsgState.FORM_LOADING,
       };
 
-    case UserActionType.EDIT_A_USER_SUCCESS:
-      let modifiedUser: User = (<UserActionUnion>action).payload;
-      let usersListCopy1: User[] = [...state.usersList];
-      let usersListNew1: User[] = usersListCopy1.map((user) =>
-        user.id == modifiedUser.id ? modifiedUser : user
-      );
+    case UserActionType.CREATE_FORM_ADD_USER_SUCCESS:
       return {
         ...state,
-        msgState: MsgState.LOADED,
-        usersList: usersListNew1,
+        msgState: MsgState.FORM_LOADED,
       };
 
-    case UserActionType.EDIT_A_USER_ERROR:
+    case UserActionType.CREATE_FORM_ADD_USER_ERROR:
       return {
         ...state,
-        msgState: MsgState.ERROR,
+        msgState: MsgState.FORM_LOAD_ERR,
         userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
-    /** create a user form actions */
-    case UserActionType.CREATE_A_USERFORM:
+    /** save a user (data of form) action*/
+    case UserActionType.SAVE_USERFORM_ADD:
       return {
         ...state,
-        msgState: MsgState.LOADING,
+        msgState: MsgState.DEFAULT_MSG,
       };
+    case UserActionType.SAVE_USERFORM_ADD_SUCCESS:
+      let createdUser: User = (<UserActionUnion>action).payload;
+      let usersListCopy1: User[] = [...state.usersList];
+      usersListCopy1.push(createdUser);
 
-    case UserActionType.CREATE_A_USERFORM_SUCCESS:
       return {
         ...state,
-        msgState: MsgState.NEW,
+        msgState: MsgState.LOADED,
+        usersList: usersListCopy1,
       };
 
-    case UserActionType.CREATE_A_USERFORM_ERROR:
+    case UserActionType.SAVE_USERFORM_ADD_ERROR:
       return {
         ...state,
-        msgState: MsgState.ERROR,
+        msgState: MsgState.ERR,
         userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
-    /** save a user (data of form) action*/
-    case UserActionType.SAVE_A_USERFORM:
+
+      /**create a edit user form actions */
+    case UserActionType.CREATE_FORM_USER_EDIT:
       return {
         ...state,
-        msgState: MsgState.LOADING,
+        msgState: MsgState.FORM_LOADING,
+      };
+
+    case UserActionType.CREATE_FORM_USER_EDIT_SUCCESS:
+      let modifiedUser: User = (<UserActionUnion>action).payload;
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADED,
+        currentUser: modifiedUser
       };
-    case UserActionType.CREATE_A_USERFORM_SUCCESS:
-      let createdUser: User = (<UserActionUnion>action).payload;
-      let usersListCopy2: User[] = [...state.usersList];
-      usersListCopy2.push(createdUser);
 
+    case UserActionType.CREATE_FORM_USER_EDIT_ERROR:
       return {
         ...state,
-        msgState: MsgState.SUCCESS,
-        usersList: usersListCopy2,
+        msgState: MsgState.ERR,
+        userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
+
+      /** update user with user form data*/
+
+      case UserActionType.UPDATE_USER_FORM:
+        return {
+          ...state,
+          msgState:MsgState.DEFAULT_MSG
+        };
+
+      case UserActionType.UPDATE_USER_FORM_SUCCESS:
+        let updatedUser: User = (<UserActionUnion> action).payload;
+        let usersListCopy2 : User[] = state.usersList.map(
+          (user)=>(user.id==updatedUser.id)?updatedUser:user);
+
+          return{
+          ...state,
+          currentUser: updatedUser,
+          msgState: MsgState.UPDATED
+        }
+
+      case UserActionType.UPDATE_USER_FORM_ERROR:
+        return{
+          ...state,
+          msgState: MsgState.ERR,
+          userServerErrorMsg: (<UserActionUnion>action).payload,
+        }
+
+
     /** delete a user actions */
     case UserActionType.DELETE_A_USER:
       return {
@@ -131,18 +169,18 @@ export function userReducer(
     case UserActionType.DELETE_A_USER_SUCCESS:
       let deletedUser: User = (<UserActionUnion>action).payload;
       let deletedUserIndex = state.usersList.indexOf(deletedUser);
-      let usersListNew3: User[] = [...state.usersList];
-      usersListNew3.splice(deletedUserIndex, 1);
+      let usersListCopy3: User[] = [...state.usersList];
+      usersListCopy3.splice(deletedUserIndex, 1);
       return {
         ...state,
         msgState: MsgState.LOADED,
-        usersList: usersListNew3,
+        usersList: usersListCopy3,
       };
 
     case UserActionType.DELETE_A_USER_ERROR:
       return {
         ...state,
-        msgState: MsgState.ERROR,
+        msgState: MsgState.ERR,
         userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 

src/app/pages/users-manager/users-management/user-create/user-create.component.html

@@ -1,267 +1,275 @@
-<div class="container" *ngIf="userFormGroup">
-  <ng-container *ngIf="userState as userData">
-   
-    <ng-container *ngIf="userData.msgState == msgState.LOADED">
-      <div class="alert-success container p-3 m-3">
-        <span>  User form is loaded</span>
-        <button class="btn btn-success ml-3" (click)="onNewUser()"> create user</button>
-      </div>
-    </ng-container>
-
-    <ng-container *ngIf="userData.msgState==msgState.NEW">
-
-      <div class="card mt-3">
-        <div class="card-header bg-light">Update user informations</div>
-        <div class="card-body">
-          <form [formGroup]="userFormGroup" (ngSubmit)="onUserSave(); userFormGroup.reset()">
-
-            <div class="row">
-
-              <div class="col">
+<div class="container">
 
-                <div class="col-md-auto mb-3">
-                  <label for="id">Firstname</label>
-                  <input
-                    type="text"
-                    class="form-control"
-                    formControlName="firstname"
-                    [ngClass]="{
-                      'is-invalid':
-                        userFormGroup.controls['firstname'].touched &&
-                        !userFormGroup.controls['firstname'].valid
-                    }"
-                  />
+    <ng-container *ngIf="userState">
 
-                  <div class="invalid-feedback">
-                    <span
-                      *ngIf="userFormGroup.controls['firstname'].errors?.['required']"
-                      >required</span
-                    >
-                    <span
-                      *ngIf="userFormGroup.controls['firstname'].errors?.['minlength']"
-                      >min nbr chars 3</span
-                    >
-                    <span
-                      *ngIf="userFormGroup.controls['firstname'].errors?.['maxlength']"
-                      >max nbr chars 20</span
-                    >
-                  </div>
-                </div>
-
-                <div class="col-md-auto mb-3">
-                  <label for="id">Lastname</label>
-                  <input
-                    type="text"
-                    class="form-control"
-                    formControlName="lastname"
-                    [ngClass]="{
-                      'is-invalid':
-                        userFormGroup.controls['lastname'].touched &&
-                        !userFormGroup.controls['lastname'].valid
-                    }"
-                  />
+      <ng-container *ngIf="userState.msgState == msgState.LOADED">
+        <div class="alert-success container p-3 m-3">
+          <span> {{msgState.ADDED}}</span> &nbsp;
+          <button class="btn btn-success" (click)="onNewUser()"> create user</button>
+        </div>
+      </ng-container>
 
-                  <div class="invalid-feedback">
-                    <span
-                      *ngIf="userFormGroup.controls['lastname'].errors?.['required']"
-                      >required</span
-                    >
-                    <span
-                      *ngIf="userFormGroup.controls['lastname'].errors?.['minlength']"
-                      >min nbr char 3</span
-                    >
-                    <span
-                      *ngIf="userFormGroup.controls['lastname'].errors?.['maxlength']"
-                      >max nbr char 20</span
-                    >
-                  </div>
-                </div>
+      <ng-container *ngIf="userState.msgState == msgState.LOADING">
+        <div class="alert-danger container pt-3 mt-3">
+          <span> {{msgState.ERR}}</span> &nbsp;
+          <button class="btn btn-danger ml-3" (click)="tryEgain()"> try again</button>
+        </div>
+      </ng-container>
 
-                <div class="col-md-auto mb-3">
-                  <label for="email">Email</label>
-                  <input
-                    type="text"
-                    class="form-control"
-                    formControlName="email"
-                    [ngClass]="{
-                      'is-invalid':
-                        userFormGroup.controls['email'].touched &&
-                        !userFormGroup.controls['email'].valid
-                    }"
-                  />
+      <ng-container *ngIf="userState.msgState==msgState.FORM_LOADED">
 
-                  <div class="invalid-feedback">
-                    <span *ngIf="userFormGroup.controls['email'].errors?.['required']">
-                      required
-                    </span>
-                    <span *ngIf="userFormGroup.controls['email'].errors?.['email']">
-                      not valid
-                    </span>
-                  </div>
-                </div>
+        <div class="card mt-3">
+          <div class="card-header bg-light">Update user informations</div>
+          <div class="card-body">
+            <form [formGroup]="userFormGroup" (ngSubmit)="onUserSave(); userFormGroup.reset()">
 
-              </div>
+              <div class="row">
 
-              <div class="col">
+                <div class="col">
 
-                <div formGroupName="address">
                   <div class="col-md-auto mb-3">
-                    <label for="numRue">Street number</label>
+                    <label for="id">Firstname</label>
                     <input
-                      type="number"
+                      type="text"
                       class="form-control"
-                      formControlName="numRue"
+                      formControlName="firstname"
                       [ngClass]="{
                         'is-invalid':
-                          userFormGroup.controls['address'].get('numRue')?.touched &&
-                          !userFormGroup.controls['address'].get('numRue')?.valid
+                          userFormGroup.controls['firstname'].touched &&
+                          !userFormGroup.controls['firstname'].valid
                       }"
                     />
+
                     <div class="invalid-feedback">
                       <span
-                        *ngIf="userFormGroup.controls['address'].get('numRue')?.errors?.['required']"
+                        *ngIf="userFormGroup.controls['firstname'].errors?.['required']"
                         >required</span
                       >
                       <span
-                        *ngIf="userFormGroup.controls['address'].get('numRue')?.errors?.['min']"
-                        >street num >0
-                      </span>
+                        *ngIf="userFormGroup.controls['firstname'].errors?.['minlength']"
+                        >min nbr chars 3</span
+                      >
+                      <span
+                        *ngIf="userFormGroup.controls['firstname'].errors?.['maxlength']"
+                        >max nbr chars 20</span
+                      >
                     </div>
                   </div>
 
                   <div class="col-md-auto mb-3">
-                    <label for="nomRue">Street Name</label>
+                    <label for="id">Lastname</label>
                     <input
                       type="text"
                       class="form-control"
-                      formControlName="nomRue"
+                      formControlName="lastname"
                       [ngClass]="{
                         'is-invalid':
-                          userFormGroup.controls['address'].get('nomRue')?.touched &&
-                          !userFormGroup.controls['address'].get('nomRue')?.valid
+                          userFormGroup.controls['lastname'].touched &&
+                          !userFormGroup.controls['lastname'].valid
                       }"
                     />
+
                     <div class="invalid-feedback">
                       <span
-                        *ngIf="userFormGroup.controls['address'].get('nomRue')?.errors?.['required']"
+                        *ngIf="userFormGroup.controls['lastname'].errors?.['required']"
                         >required</span
                       >
                       <span
-                        *ngIf="userFormGroup.controls['address'].get('nomRue')?.errors?.['minlength']"
-                        >min chars 3
-                      </span>
-                      <span
-                        *ngIf="userFormGroup.controls['address'].get('nomRue')?.errors?.['maxlength']"
-                        >max chars 15
-                      </span>
-                    </div>
-                  </div>
-
-                  <div class="col-md-auto mb-3">
-                    <label for="bp">PB</label>
-                    <input
-                      type="number"
-                      class="form-control"
-                      formControlName="bp"
-                      [ngClass]="{
-                        'is-invalid':
-                          userFormGroup.controls['address'].get('bp')?.touched &&
-                          !userFormGroup.controls['address'].get('bp')?.valid
-                      }"
-                    />
-                    <div class="invalid-feedback">
-                      <span
-                        *ngIf="userFormGroup.controls['address'].get('bp')?.errors?.['required']"
-                        >required</span
+                        *ngIf="userFormGroup.controls['lastname'].errors?.['minlength']"
+                        >min nbr char 3</span
                       >
                       <span
-                        *ngIf="userFormGroup.controls['address'].get('bp')?.errors?.['min']"
-                        >pb >0
-                      </span>
+                        *ngIf="userFormGroup.controls['lastname'].errors?.['maxlength']"
+                        >max nbr char 20</span
+                      >
                     </div>
                   </div>
 
                   <div class="col-md-auto mb-3">
-                    <label for="city">City</label>
+                    <label for="email">Email</label>
                     <input
                       type="text"
                       class="form-control"
-                      formControlName="ville"
+                      formControlName="email"
                       [ngClass]="{
                         'is-invalid':
-                          userFormGroup.controls['address'].get('ville')?.touched &&
-                          !userFormGroup.controls['address'].get('vile')?.valid
+                          userFormGroup.controls['email'].touched &&
+                          !userFormGroup.controls['email'].valid
                       }"
                     />
+
                     <div class="invalid-feedback">
-                      <span
-                        *ngIf="userFormGroup.controls['address'].get('ville')?.errors?.['required']"
-                        >required</span
-                      >
-                      <span
-                        *ngIf="userFormGroup.controls['address'].get('ville')?.errors?.['minlength']"
-                        >min chars 3
+                      <span *ngIf="userFormGroup.controls['email'].errors?.['required']">
+                        required
                       </span>
-                      <span
-                        *ngIf="userFormGroup.controls['address'].get('ville')?.errors?.['maxlength']"
-                        >max chars 15
+                      <span *ngIf="userFormGroup.controls['email'].errors?.['email']">
+                        not valid
                       </span>
                     </div>
                   </div>
 
-                  <div class="col-md-auto mb-3">
-                    <label for="pays">Country</label>
-                    <input
-                      type="text"
-                      class="form-control"
-                      formControlName="pays"
-                      [ngClass]="{
-                        'is-invalid':
-                          userFormGroup.controls['address'].get('pays')?.touched &&
-                          !userFormGroup.controls['address'].get('pays')?.valid
-                      }"
-                    />
-                    <div class="invalid-feedback">
-                      <span
-                        *ngIf="userFormGroup.controls['address'].get('pays')?.errors?.['required']"
-                        >required</span
-                      >
-                      <span
-                        *ngIf="userFormGroup.controls['address'].get('pays')?.errors?.['minlength']"
-                        >min chars 3
-                      </span>
-                      <span
-                        *ngIf="userFormGroup.controls['address'].get('pays')?.errors?.['maxlength']"
-                        >max chars 15
-                      </span>
+                </div>
+
+                <div class="col">
+
+                  <div formGroupName="address">
+                    <div class="col-md-auto mb-3">
+                      <label for="numRue">Street number</label>
+                      <input
+                        type="number"
+                        class="form-control"
+                        formControlName="numRue"
+                        [ngClass]="{
+                          'is-invalid':
+                            userFormGroup.controls['address'].get('numRue')?.touched &&
+                            !userFormGroup.controls['address'].get('numRue')?.valid
+                        }"
+                      />
+                      <div class="invalid-feedback">
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('numRue')?.errors?.['required']"
+                          >required</span
+                        >
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('numRue')?.errors?.['min']"
+                          >street num >0
+                        </span>
+                      </div>
+                    </div>
+
+                    <div class="col-md-auto mb-3">
+                      <label for="nomRue">Street Name</label>
+                      <input
+                        type="text"
+                        class="form-control"
+                        formControlName="nomRue"
+                        [ngClass]="{
+                          'is-invalid':
+                            userFormGroup.controls['address'].get('nomRue')?.touched &&
+                            !userFormGroup.controls['address'].get('nomRue')?.valid
+                        }"
+                      />
+                      <div class="invalid-feedback">
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('nomRue')?.errors?.['required']"
+                          >required</span
+                        >
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('nomRue')?.errors?.['minlength']"
+                          >min chars 3
+                        </span>
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('nomRue')?.errors?.['maxlength']"
+                          >max chars 15
+                        </span>
+                      </div>
+                    </div>
+
+                    <div class="col-md-auto mb-3">
+                      <label for="bp">PB</label>
+                      <input
+                        type="number"
+                        class="form-control"
+                        formControlName="bp"
+                        [ngClass]="{
+                          'is-invalid':
+                            userFormGroup.controls['address'].get('bp')?.touched &&
+                            !userFormGroup.controls['address'].get('bp')?.valid
+                        }"
+                      />
+                      <div class="invalid-feedback">
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('bp')?.errors?.['required']"
+                          >required</span
+                        >
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('bp')?.errors?.['min']"
+                          >pb >0
+                        </span>
+                      </div>
+                    </div>
+
+                    <div class="col-md-auto mb-3">
+                      <label for="city">City</label>
+                      <input
+                        type="text"
+                        class="form-control"
+                        formControlName="ville"
+                        [ngClass]="{
+                          'is-invalid':
+                            userFormGroup.controls['address'].get('ville')?.touched &&
+                            !userFormGroup.controls['address'].get('vile')?.valid
+                        }"
+                      />
+                      <div class="invalid-feedback">
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('ville')?.errors?.['required']"
+                          >required</span
+                        >
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('ville')?.errors?.['minlength']"
+                          >min chars 3
+                        </span>
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('ville')?.errors?.['maxlength']"
+                          >max chars 15
+                        </span>
+                      </div>
+                    </div>
+
+                    <div class="col-md-auto mb-3">
+                      <label for="pays">Country</label>
+                      <input
+                        type="text"
+                        class="form-control"
+                        formControlName="pays"
+                        [ngClass]="{
+                          'is-invalid':
+                            userFormGroup.controls['address'].get('pays')?.touched &&
+                            !userFormGroup.controls['address'].get('pays')?.valid
+                        }"
+                      />
+                      <div class="invalid-feedback">
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('pays')?.errors?.['required']"
+                          >required</span
+                        >
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('pays')?.errors?.['minlength']"
+                          >min chars 3
+                        </span>
+                        <span
+                          *ngIf="userFormGroup.controls['address'].get('pays')?.errors?.['maxlength']"
+                          >max chars 15
+                        </span>
+                      </div>
                     </div>
                   </div>
+
                 </div>
 
               </div>
 
-            </div>
-
-            <div class="row">
-              <div class="text-center">
-                <button
-                  class="btn btn-outline-primary"
-                  type="submit"
-                  [disabled]="!userFormGroup.valid"
-                >
-                  save</button
-                >&nbsp;
-                <button class="btn btn-outline-danger" type="reset">reset</button>
+              <div class="row">
+                <div class="text-center">
+                  <button
+                    class="btn btn-outline-primary"
+                    type="submit"
+                    [disabled]="!userFormGroup.valid"
+                  >
+                    save</button
+                  >&nbsp;
+                  <button class="btn btn-outline-danger" type="reset">reset</button>
+                </div>
               </div>
-            </div>
 
-          </form>
+            </form>
+          </div>
         </div>
-      </div>
 
 
-    </ng-container>
+      </ng-container>
 
-  </ng-container>
+    </ng-container>
 
 </div>

src/app/pages/users-manager/users-management/user-create/user-create.component.ts

@@ -1,6 +1,8 @@
+import { UsersService } from './../../../../shared/services/users.service';
+import { User } from './../../../../shared/models/user.model';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import {
-  CreateUserFormAction,
+  CreateFormUserAddAction,
   SaveUserFormAction,
 } from './../../../../ngrx/users/users.actions';
 import { Store } from '@ngrx/store';
@@ -8,7 +10,6 @@ import { Component, OnInit } from '@angular/core';
 import { MsgState } from 'src/app/ngrx/msg.state';
 import { UserState } from 'src/app/ngrx/users/user.state';
 
-
 @Component({
   selector: 'app-user-create',
   templateUrl: './user-create.component.html',
@@ -19,19 +20,17 @@ export class UserCreateComponent implements OnInit {
 
   constructor(
     private store: Store<{ userReducerKey: UserState }>,
-    private fb: FormBuilder
+    private fb: FormBuilder,
+    private usersService: UsersService
   ) {}
   userState!: UserState;
   readonly msgState = MsgState;
 
   ngOnInit(): void {
+    this.store.dispatch(new CreateFormUserAddAction());
 
-    this.store.dispatch(new CreateUserFormAction({}));
-
-    this.store.subscribe((state) => {
-      this.userState = state.userReducerKey;
-
-      if(this.userState.msgState==this.msgState.NEW){
+    this.store.subscribe((myState) => {
+      this.userState = myState.userReducerKey;
 
         this.userFormGroup = this.fb.group({
           id: [0, Validators.required],
@@ -81,17 +80,31 @@ export class UserCreateComponent implements OnInit {
             ],
           }),
         });
-      }
     });
   }
 
   onUserSave() {
-    if (window.confirm(MsgState.CONFIRM)) {
-      this.store.dispatch(new SaveUserFormAction(this.userFormGroup.value));
-    }
+
+   let user: User = this.userFormGroup.value;
+   let lastname: string = user.lastname;
+
+   this.usersService.getUserByName(lastname).subscribe((users: User[]) => {
+     if (users.length > 0) {
+       alert(lastname + ' ' + this.msgState.EXIST);
+       return;
+     }
+
+     if (window.confirm(MsgState.CONFIRM)) {
+       this.store.dispatch(new SaveUserFormAction(this.userFormGroup.value));
+     }
+   });
   }
 
   onNewUser() {
-    this.store.dispatch(new CreateUserFormAction({}));
+    this.store.dispatch(new CreateFormUserAddAction());
+  }
+
+  tryEgain() {
+    this.store.dispatch(new CreateFormUserAddAction());
   }
 }

src/app/pages/users-manager/users-management/user-nav-bar/user-nav-bar.component.ts

@@ -1,7 +1,7 @@
 import { UserState } from './../../../../ngrx/users/user.state';
 import {
   SearchUsersAction,
-  CreateUserFormAction,
+  CreateFormUserAddAction,
 } from './../../../../ngrx/users/users.actions';
 import { GetAllUsersAction } from '../../../../ngrx/users/users.actions';
 import { Component } from '@angular/core';

src/app/pages/users-manager/users-management/user-update/user-update.component.html

@@ -0,0 +1,269 @@
+<div class="container" *ngIf="userFormGrp">
+
+  <ng-container *ngIf="userState">
+
+    <ng-container *ngIf="userState.msgState==msg.ERR">
+      <div class="alert-danger container">
+        {{msg.ERR}}
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="userState.msgState == msg.UPDATED">
+      <div class="alert-success container p-3 m-3" style="width: 30em;">
+        <span>   {{msg.UPDATED}}</span> &nbsp;&nbsp;
+        <button class="btn btn-success" (click)="onUpdateOk()"> OK </button>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="userState.msgState==msg.FORM_LOADED">
+
+      <div class="card mt-3">
+        <div class="card-header bg-light">User informations to modify: ID of user: <b>{{userId}}</b> </div>
+        <div class="card-body">
+          <form [formGroup]="userFormGrp" (ngSubmit)="onUserUpdate(); userFormGrp.reset()">
+
+            <div class="row">
+
+              <div class="col">
+
+                <div class="col-md-auto mb-3">
+                  <label for="id">Firstname</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    formControlName="firstname"
+                    [ngClass]="{
+                      'is-invalid':
+                      userFormGrp.controls['firstname'].touched &&
+                        !userFormGrp.controls['firstname'].valid
+                    }"
+                  />
+
+                  <div class="invalid-feedback">
+                    <span
+                      *ngIf="userFormGrp.controls['firstname'].errors?.['required']"
+                      >required</span
+                    >
+                    <span
+                      *ngIf="userFormGrp.controls['firstname'].errors?.['minlength']"
+                      >min nbr chars 3</span
+                    >
+                    <span
+                      *ngIf="userFormGrp.controls['firstname'].errors?.['maxlength']"
+                      >max nbr chars 20</span
+                    >
+                  </div>
+                </div>
+
+                <div class="col-md-auto mb-3">
+                  <label for="id">Lastname</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    formControlName="lastname"
+                    [ngClass]="{
+                      'is-invalid':
+                      userFormGrp.controls['lastname'].touched &&
+                        !userFormGrp.controls['lastname'].valid
+                    }"
+                  />
+
+                  <div class="invalid-feedback">
+                    <span
+                      *ngIf="userFormGrp.controls['lastname'].errors?.['required']"
+                      >required</span
+                    >
+                    <span
+                      *ngIf="userFormGrp.controls['lastname'].errors?.['minlength']"
+                      >min nbr char 3</span
+                    >
+                    <span
+                      *ngIf="userFormGrp.controls['lastname'].errors?.['maxlength']"
+                      >max nbr char 20</span
+                    >
+                  </div>
+                </div>
+
+                <div class="col-md-auto mb-3">
+                  <label for="email">Email</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    formControlName="email"
+                    [ngClass]="{
+                      'is-invalid':
+                        userFormGrp.controls['email'].touched &&
+                        !userFormGrp.controls['email'].valid
+                    }"
+                  />
+
+                  <div class="invalid-feedback">
+                    <span *ngIf="userFormGrp.controls['email'].errors?.['required']">
+                      required
+                    </span>
+                    <span *ngIf="userFormGrp.controls['email'].errors?.['email']">
+                      not valid
+                    </span>
+                  </div>
+                </div>
+
+              </div>
+
+              <div class="col">
+
+                <div formGroupName="address">
+                  <div class="col-md-auto mb-3">
+                    <label for="numRue">Street number</label>
+                    <input
+                      type="number"
+                      class="form-control"
+                      formControlName="numRue"
+                      [ngClass]="{
+                        'is-invalid':
+                          userFormGrp.controls['address'].get('numRue')?.touched &&
+                          !userFormGrp.controls['address'].get('numRue')?.valid
+                      }"
+                    />
+                    <div class="invalid-feedback">
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('numRue')?.errors?.['required']"
+                        >required</span
+                      >
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('numRue')?.errors?.['min']"
+                        >street num >0
+                      </span>
+                    </div>
+                  </div>
+
+                  <div class="col-md-auto mb-3">
+                    <label for="nomRue">Street Name</label>
+                    <input
+                      type="text"
+                      class="form-control"
+                      formControlName="nomRue"
+                      [ngClass]="{
+                        'is-invalid':
+                          userFormGrp.controls['address'].get('nomRue')?.touched &&
+                          !userFormGrp.controls['address'].get('nomRue')?.valid
+                      }"
+                    />
+                    <div class="invalid-feedback">
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('nomRue')?.errors?.['required']"
+                        >required</span
+                      >
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('nomRue')?.errors?.['minlength']"
+                        >min chars 3
+                      </span>
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('nomRue')?.errors?.['maxlength']"
+                        >max chars 15
+                      </span>
+                    </div>
+                  </div>
+
+                  <div class="col-md-auto mb-3">
+                    <label for="bp">PB</label>
+                    <input
+                      type="number"
+                      class="form-control"
+                      formControlName="bp"
+                      [ngClass]="{
+                        'is-invalid':
+                          userFormGrp.controls['address'].get('bp')?.touched &&
+                          !userFormGrp.controls['address'].get('bp')?.valid
+                      }"
+                    />
+                    <div class="invalid-feedback">
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('bp')?.errors?.['required']"
+                        >required</span
+                      >
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('bp')?.errors?.['min']"
+                        >pb >0
+                      </span>
+                    </div>
+                  </div>
+
+                  <div class="col-md-auto mb-3">
+                    <label for="city">City</label>
+                    <input
+                      type="text"
+                      class="form-control"
+                      formControlName="ville"
+                      [ngClass]="{
+                        'is-invalid':
+                           userFormGrp.controls['address'].get('ville')?.touched &&
+                          !userFormGrp.controls['address'].get('vile')?.valid
+                      }"
+                    />
+                    <div class="invalid-feedback">
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('ville')?.errors?.['required']"
+                        >required</span
+                      >
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('ville')?.errors?.['minlength']"
+                        >min chars 3
+                      </span>
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('ville')?.errors?.['maxlength']"
+                        >max chars 15
+                      </span>
+                    </div>
+                  </div>
+
+                  <div class="col-md-auto mb-3">
+                    <label for="pays">Country</label>
+                    <input
+                      type="text"
+                      class="form-control"
+                      formControlName="pays"
+                      [ngClass]="{
+                        'is-invalid':
+                          userFormGrp.controls['address'].get('pays')?.touched &&
+                          !userFormGrp.controls['address'].get('pays')?.valid
+                      }"
+                    />
+                    <div class="invalid-feedback">
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('pays')?.errors?.['required']"
+                        >required</span
+                      >
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('pays')?.errors?.['minlength']"
+                        >min chars 3
+                      </span>
+                      <span
+                        *ngIf="userFormGrp.controls['address'].get('pays')?.errors?.['maxlength']"
+                        >max chars 15
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+
+            </div>
+
+            <div class="text-center col-md-auto mt-3">
+              <button
+                class="btn btn-outline-primary"
+                type="submit"
+                [disabled]="!userFormGrp.valid"
+              >
+                update
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+    </ng-container>
+
+  </ng-container>
+
+</div>

src/app/pages/users-manager/users-management/user-update/user-update.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserUpdateComponent } from './user-update.component';
+
+describe('UserUpdateComponent', () => {
+  let component: UserUpdateComponent;
+  let fixture: ComponentFixture<UserUpdateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UserUpdateComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserUpdateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/users-manager/users-management/user-update/user-update.component.ts

@@ -0,0 +1,110 @@
+import { MsgState } from 'src/app/ngrx/msg.state';
+import { UsersService } from './../../../../shared/services/users.service';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { CreareFormUserEditAction, UpdateUserFormAction } from './../../../../ngrx/users/users.actions';
+import { UserState } from 'src/app/ngrx/users/user.state';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-user-update',
+  templateUrl: './user-update.component.html',
+  styleUrls: ['./user-update.component.css'],
+})
+export class UserUpdateComponent implements OnInit {
+  userId: number;
+  userFormGrp!: FormGroup;
+  userState!: UserState;
+
+  constructor(
+    activatedRoute: ActivatedRoute,
+    private usersService: UsersService,
+    private store: Store<{ userReducerKey: UserState }>,
+    private fb: FormBuilder,
+    private router: Router
+  ) {
+    this.userId = activatedRoute.snapshot.params['id'];
+  }
+
+  readonly msg = MsgState;
+
+  ngOnInit(): void {
+    this.usersService.getUserById(this.userId).subscribe((user) => {
+      this.store.dispatch(new CreareFormUserEditAction(user));
+
+      this.store.subscribe((state) => {
+        this.userState = state.userReducerKey;
+
+        this.userFormGrp = this.fb.group({
+          id: [this.userState.currentUser?.id, Validators.required],
+          firstname: [
+            this.userState.currentUser?.firstname,
+            [
+                Validators.required,
+                Validators.minLength(3),
+                Validators.maxLength(15),
+            ],
+            ],
+            lastname: [
+              this.userState.currentUser?.lastname,
+              [
+                Validators.required,
+                Validators.minLength(3),
+                Validators.maxLength(15),
+              ],
+            ],
+            email: [
+              this.userState.currentUser?.email,
+              [Validators.required, Validators.email],
+            ],
+            address: this.fb.group({
+              numRue: [
+                this.userState.currentUser?.address.numRue,
+                [Validators.required, Validators.min(1)],
+              ],
+              nomRue: [
+                this.userState.currentUser?.address.nomRue,
+                [
+                  Validators.required,
+                  Validators.minLength(3),
+                  Validators.maxLength(25),
+                ],
+              ],
+              bp: [
+                this.userState.currentUser?.address.bp,
+                [Validators.required, Validators.min(1)],
+              ],
+              ville: [
+                this.userState.currentUser?.address.ville,
+                [
+                  Validators.required,
+                  Validators.minLength(3),
+                  Validators.maxLength(15),
+                ],
+              ],
+              pays: [
+                this.userState.currentUser?.address.pays,
+                [
+                  Validators.required,
+                  Validators.minLength(3),
+                  Validators.maxLength(15),
+                ],
+              ],
+            }),
+          });
+
+      });
+    });
+  }
+
+  onUserUpdate() {
+    if(window.confirm(MsgState.CONFIRM)){
+      this.store.dispatch(new UpdateUserFormAction(this.userFormGrp.value));
+    }
+  }
+
+  onUpdateOk(){
+    this.router.navigateByUrl('/users-management')
+  }
+}

src/app/pages/users-manager/users-management/users-list/users-list.component.html

@@ -4,10 +4,10 @@ responsiveLayout="scroll"
 *ngIf="inputState.usersList && inputState.usersList.length > 0"
 styleClass="p-datatable-striped"
 [paginator]="true"
-[rows]="3"
+[rows]="5"
 [showCurrentPageReport]="true"
 currentPageReportTemplate="{first} - {last} of {totalRecords} users"
-[rowsPerPageOptions]="[3, 5, 10]"
+[rowsPerPageOptions]="[5, 8, 10]"
 >
 <ng-template pTemplate="header">
   <tr>
@@ -38,7 +38,7 @@ currentPageReportTemplate="{first} - {last} of {totalRecords} users"
       <button class="btn">
         <i
           class="fa fa-pencil"
-          style="color: mediumturquoise"
+          style="color:cadetblue"
           (click)="onUserEdit(user)"
         ></i>
       </button>

src/app/pages/users-manager/users-management/users-list/users-list.component.ts

@@ -1,4 +1,9 @@
-import { EditUsersAction, DeleteUsersAction } from './../../../../ngrx/users/users.actions';
+import { Router } from '@angular/router';
+import { userReducer } from 'src/app/ngrx/users/users.reducer';
+import {
+  CreareFormUserEditAction,
+  DeleteUsersAction,
+} from './../../../../ngrx/users/users.actions';
 import { User } from 'src/app/shared/models/user.model';
 import { Input } from '@angular/core';
 import { Component } from '@angular/core';
@@ -9,22 +14,23 @@ import { MsgState } from 'src/app/ngrx/msg.state';
 @Component({
   selector: 'app-users-list',
   templateUrl: './users-list.component.html',
-  styleUrls: ['./users-list.component.css']
+  styleUrls: ['./users-list.component.css'],
 })
 export class UsersListComponent {
+  @Input() inputState!: UserState;
 
- @Input()  inputState!: UserState
+  constructor(
+    private store: Store<{ userReducerKey: UserState }>,
+    private router: Router
+  ) {}
 
- constructor(private store: Store<any>){}
-
- onUserEdit(user:User){
-   this.store.dispatch(new EditUsersAction({user}))
- }
-
- onUserDelete(user: User){
+  onUserEdit(user: User) {
+    this.router.navigateByUrl('/user-update/'+user.id)
+  }
 
-  if(window.confirm(MsgState.CONFIRM)){
-    this.store.dispatch(new DeleteUsersAction(user));
+  onUserDelete(user: User) {
+    if (window.confirm(MsgState.CONFIRM)) {
+      this.store.dispatch(new DeleteUsersAction(user));
+    }
   }
- }
 }

src/app/pages/users-manager/users-management/users-management.component.html

@@ -11,7 +11,7 @@
       <div class="p-2">{{userMsg.LOADING}}</div>
     </ng-container>
 
-    <ng-container *ngSwitchCase="userMsg.ERROR">
+    <ng-container *ngSwitchCase="userMsg.ERR">
       <div class="p-2 text-danger"> {{userState.userServerErrorMsg}} </div>
     </ng-container>
 

src/app/pages/users-manager/users-management/users-management.component.ts

@@ -13,9 +13,10 @@ import { MsgState } from 'src/app/ngrx/msg.state';
 export class UsersManagementComponent implements OnInit {
 
   userState$!: Observable<{
-    usersList: User[];
-    msgState: MsgState;
-    userServerErrorMsg: string;
+    currentUser: User | null,
+    usersList: User[],
+    msgState: MsgState,
+    userServerErrorMsg: string
   }>;
 
   readonly userMsg = MsgState;

src/app/pages/users-manager/users-manager-routing.module.ts

@@ -1,11 +1,13 @@
+import { UserUpdateComponent } from './users-management/user-update/user-update.component';
 import { UsersManagementComponent } from './users-management/users-management.component';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { UserCreateComponent } from './users-management/user-create/user-create.component';
 
 const routes: Routes = [
-  {path: 'user-create',component: UserCreateComponent},
-  {path:'users-management', component: UsersManagementComponent}
+  { path: 'user-create', component: UserCreateComponent },
+  { path: 'users-management', component: UsersManagementComponent },
+  { path: 'user-update/:id', component: UserUpdateComponent },
 ];
 
 @NgModule({

src/app/pages/users-manager/users-manager.module.ts

@@ -13,6 +13,7 @@ import { userReducer } from 'src/app/ngrx/users/users.reducer';
 import { TableModule } from "primeng/table";
 import { UsersListComponent } from './users-management/users-list/users-list.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { UserUpdateComponent } from './users-management/user-update/user-update.component';
 
 
 
@@ -21,7 +22,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
     UserCreateComponent,
     UserNavBarComponent,
     UsersManagementComponent,
-    UsersListComponent
+    UsersListComponent,
+    UserUpdateComponent
   ],
   imports: [
     CommonModule,

src/app/shared/models/company.type.ts

@@ -0,0 +1,4 @@
+export enum CompanyType{
+  CLIENT = "CLIENT",
+  PROSPECT= "PROSPECT"
+}

src/app/shared/services/users.service.ts

@@ -25,8 +25,7 @@ export class UsersService {
     });
   }
 
-  baseUrl: string =
-    Math.random() > 0.2 ? environment.host : environment.unreachibleHost;
+  baseUrl: string = Math.random() > 0.2 ? environment.host : environment.unreachibleHost;
   headers = { 'content-type': 'application/json' };
 
   getAllUsers(): Observable<User[]> {
@@ -61,6 +60,10 @@ export class UsersService {
     return this.http.get<User>(this.baseUrl + '/users/' + userId);
   }
 
+  getUserByName(lastname: string): Observable<User[]>{
+    return this.http.get<User[]>(this.baseUrl+'/users?lastname='+lastname);
+  }
+
   updateUser(user: User): Observable<User> {
     return this.http
       .put<User>(this.baseUrl + '/users/' + user.id, user, {