second commit

db_users_projects_companies.json

@@ -1,5 +1,4 @@
 {
-
   "companies": [
     {
       "id": 2,
@@ -29,10 +28,10 @@
         "ville": "Paris",
         "pays": "France"
       },
-      "firstname": "David",
-      "lastname": "Touitou",
-      "email": "david.touitou@natan.fr",
-      "id": 1
+      "firstname": "Placide",
+      "lastname": "Nduwayo",
+      "email": "placide.nduwayo@natan.fr",
+      "id": 2
     },
     {
       "address": {
@@ -42,10 +41,10 @@
         "ville": "Paris",
         "pays": "France"
       },
-      "firstname": "Placide",
-      "lastname": "Nduwayo",
-      "email": "placide.nduwayo@natan.fr",
-      "id": 2
+      "firstname": "David",
+      "lastname": "Touitou",
+      "email": "david.touitou@natan.fr",
+      "id": 3
     },
     {
       "address": {
@@ -58,21 +57,102 @@
       "firstname": "Nadhir",
       "lastname": "Ben Mohamed",
       "email": "nadhir.ben-mohamed@natan.fr",
-      "id": 3
+      "id": 4
+    },
+    {
+      "address": {
+        "numRue": 44,
+        "nomRue": "Rue Notre Dame de Paris",
+        "bp": 75002,
+        "ville": "Paris",
+        "pays": "France"
+      },
+      "firstname": "Smail",
+      "lastname": "Sellah",
+      "email": "smail.sellah@natan.fr",
+      "id": 5
+    },
+    {
+      "address": {
+        "numRue": 44,
+        "nomRue": "Rue Notre Dame de Paris",
+        "bp": 75002,
+        "ville": "Paris",
+        "pays": "France"
+      },
+      "firstname": "Sarah",
+      "lastname": "Leray",
+      "email": "sarah.leray@natan.fr",
+      "id": 6
+    },
+    {
+      "address": {
+        "numRue": 44,
+        "nomRue": "Rue Notre Dame de Paris",
+        "bp": 75002,
+        "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",
+      "id": 8
+    },
+    {
+      "address": {
+        "numRue": 44,
+        "nomRue": "Rue Notre Dame de Paris",
+        "bp": 75002,
+        "ville": "Paris",
+        "pays": "France"
+      },
+      "firstname": "Marion",
+      "lastname": "Jaillot",
+      "email": "marion.jaillot@natan.fr",
+      "id": 9
+    },
+    {
+      "address": {
+        "numRue": 44,
+        "nomRue": "Rue Notre Dame de Paris",
+        "bp": 75002,
+        "ville": "Paris",
+        "pays": "France"
+      },
+      "firstname": "avraham",
+      "lastname": "Benassaya",
+      "email": "avraham.benassaya@natan.fr",
+      "id": 10
+    },
+    {
+      "id": 11,
+      "firstname": "Charles",
+      "lastname": "Benassaya",
+      "email": "charles.benassaya@natan.fr",
+      "address": {
+        "numRue": 44,
+        "nomRue": "Rue Notre Dame de Paris",
+        "bp": 75002,
+        "ville": "Paris",
+        "pays": "France"
+      }
     }
   ],
   "projects": [
     {
-      "id": 1,
-      "projectName": "Project-1",
-      "priority": 1,
-      "creationDate": "05 18 2022",
-      "companyId": 3,
-      "description": "Project of training users to angular",
-      "userId": 1,
-      "state": "END"
-    },
-    {
       "id": 2,
       "projectName": "Project-2",
       "priority": 1,
@@ -91,26 +171,6 @@
       "description": "Project description",
       "userId": 2,
       "state": "IN PROGRESS"
-    },
-    {
-      "id": 4,
-      "projectName": "Project-4",
-      "priority": 3,
-      "creationDate": "05 18 2022",
-      "companyId": 4,
-      "description": "Project description",
-      "userId": 3,
-      "state": "END"
-    },
-    {
-      "id": 5,
-      "projectName": "Project-5",
-      "priority": 1,
-      "creationDate": "05 18 2022",
-      "companyId": 3,
-      "description": "project of training Natan users on backend tools",
-      "userId": 1,
-      "state": "IN PROGRESS"
     }
   ]
-}
+}

package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "~13.3.0",
         "@angular/router": "~13.3.0",
         "@ngrx/effects": "^13.2.0",
+        "@ngrx/entity": "^13.2.0",
         "@ngrx/store": "^13.2.0",
         "@ngrx/store-devtools": "^13.2.0",
         "bootstrap": "^5.1.3",
@@ -2415,6 +2416,19 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@ngrx/entity": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/entity/-/entity-13.2.0.tgz",
+      "integrity": "sha512-2zgz2/3BpYSvVNLqQM034lK3kQ0UoHj7kxmtf5Bkf2yWrjEGVmwyRUYDt1/vlfoBUE/KU7DDPHWJT8r5Li0ALA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "^13.0.0",
+        "@ngrx/store": "13.2.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@ngrx/store": {
       "version": "13.2.0",
       "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-13.2.0.tgz",
@@ -14508,6 +14522,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@ngrx/entity": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/entity/-/entity-13.2.0.tgz",
+      "integrity": "sha512-2zgz2/3BpYSvVNLqQM034lK3kQ0UoHj7kxmtf5Bkf2yWrjEGVmwyRUYDt1/vlfoBUE/KU7DDPHWJT8r5Li0ALA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@ngrx/store": {
       "version": "13.2.0",
       "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-13.2.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
     "@ngrx/effects": "^13.2.0",
+    "@ngrx/entity": "^13.2.0",
     "@ngrx/store": "^13.2.0",
     "@ngrx/store-devtools": "^13.2.0",
     "bootstrap": "^5.1.3",

src/app/app.module.ts

@@ -1,4 +1,4 @@
-
+import { FormsModule } from '@angular/forms';
 import { AccueilModule } from './pages/accueil/accueil.module';
 import { CompaniesManagerModule } from './pages/companies-manager/companies-manager.module';
 import { ProjectsManagerModule } from './pages/projects-manager/projects-manager.module';
@@ -26,7 +26,8 @@ import { HttpClientModule } from '@angular/common/http';
     CompaniesManagerModule,
     AccueilModule,
     HttpClientModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/ngrx/msg.state.ts

@@ -0,0 +1,9 @@
+export enum MsgState {
+  LOADING = '[User] LOADING ...',
+  LOADED = '[User] LOADED',
+  ERROR = '[User] ERROR',
+  INIT_STATE = '[User] INITIAL STATE',
+  CONFIRM = 'CONFIRM',
+  NEW ='NEW',
+  SUCCESS = 'SUCCESSFUL SAVED'
+}

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

@@ -0,0 +1,9 @@
+import { User } from "src/app/shared/models/user.model";
+import { MsgState } from "../msg.state";
+
+//create a state
+export class UserState {
+  usersList!: User[];
+  msgState!: MsgState;
+  userServerErrorMsg!: string;
+}

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

@@ -13,6 +13,28 @@ export enum UserActionType {
   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_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',
+
+  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: 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
@@ -33,7 +55,7 @@ export class GetAllUsersActionError implements Action {
   constructor(public payload: string) {}
 }
 
-/* Actios nof searching a user */
+/* Actios of searching a user */
 
 export class SearchUsersAction implements Action {
   type: UserActionType = UserActionType.SEARCH_A_USER;
@@ -51,10 +73,92 @@ export class SearchUserActionError implements Action {
   constructor(public payload: string) {}
 }
 
-export type UserAction =
+/* Actios of editing a user */
+
+export class EditUsersAction implements Action {
+  type: UserActionType = UserActionType.EDIT_A_USER;
+
+  constructor(public payload: {user: User}) {}
+}
+
+export class EditUserActionSuccess implements Action {
+  type: UserActionType = UserActionType.EDIT_A_USER_SUCCESS;
+  constructor(public payload: User) {}
+}
+
+export class EditUserActionError implements Action {
+  type: UserActionType = UserActionType.EDIT_A_USER_ERROR;
+  constructor(public payload: string) {}
+}
+
+/* Actios of creating a user form */
+
+export class CreateUserFormAction implements Action {
+  type: UserActionType = UserActionType.CREATE_A_USERFORM;
+
+  constructor(public payload: any) {}
+}
+
+export class CreateUserFormActionSuccess implements Action {
+  type: UserActionType = UserActionType.CREATE_A_USERFORM_SUCCESS;
+  constructor(public payload: any) {}
+}
+
+export class CreateUserFormActionError implements Action {
+  type: UserActionType = UserActionType.CREATE_A_USERFORM_ERROR;
+  constructor(public payload: string) {}
+}
+
+/**action of saving a user */
+export class SaveUserFormAction implements Action{
+  type: UserActionType = UserActionType.SAVE_A_USERFORM;
+  constructor(public payload: User){}
+}
+
+export class SaveUserFormActionSuccess implements Action{
+  type: UserActionType = UserActionType.SAVE_A_USERFORM_SUCCESS;
+  constructor(public payload: User){}
+}
+
+export class SaveUserFormActionError implements Action{
+  type: UserActionType = UserActionType.SAVE_A_USERFORM_ERROR;
+  constructor(public payload: string){}
+}
+
+/* Actios of deleting a user */
+
+export class DeleteUsersAction implements Action {
+  type: UserActionType = UserActionType.DELETE_A_USER;
+
+  constructor(public payload: User) {}
+}
+
+export class DeleteUserActionSuccess implements Action {
+  type: UserActionType = UserActionType.DELETE_A_USER_SUCCESS;
+  constructor(public payload: User) {}
+}
+
+export class DeleteUserActionError implements Action {
+  type: UserActionType = UserActionType.DELETE_A_USER_ERROR;
+  constructor(public payload: string) {}
+}
+
+export type UserActionUnion =
   | GetAllUsersAction
   | GetAllUsersActionSuccess
   | GetAllUsersActionError
   | SearchUsersAction
   | SearchUserActionSuccess
-  | SearchUserActionError;
+  | SearchUserActionError
+  | EditUsersAction
+  | EditUserActionSuccess
+  | EditUserActionError
+  | CreateUserFormAction
+  | CreateUserFormActionSuccess
+  | CreateUserFormActionError
+  | SaveUserFormAction
+  | SaveUserFormActionSuccess
+  | SaveUserFormActionError
+  | DeleteUsersAction
+  | DeleteUserActionSuccess
+  | DeleteUserActionError;

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

@@ -1,4 +1,4 @@
-import { UserActionType, GetAllUsersActionSuccess, GetAllUsersActionError, UserAction, SearchUserActionSuccess, SearchUserActionError } from './users.actions';
+import { UserActionType, GetAllUsersActionSuccess, GetAllUsersActionError, UserActionUnion, SearchUserActionSuccess, SearchUserActionError, EditUserActionSuccess, EditUserActionError, DeleteUserActionSuccess, DeleteUserActionError, CreateUserFormActionSuccess, CreateUserFormActionError, SaveUserFormActionSuccess, SaveUserFormActionError } from './users.actions';
 import { map, mergeMap, Observable, catchError, of } from 'rxjs';
 import { UsersService } from './../../shared/services/users.service';
 import { Injectable } from "@angular/core";
@@ -12,12 +12,12 @@ export class UserEffects{
 
   //create getAllUsers effects
 
-  getAllUsersEffect: Observable<UserAction> = createEffect(
+  getAllUsersEffect: Observable<UserActionUnion> = createEffect(
 
     () => this.effectActions.pipe(
       ofType(UserActionType.GET_ALL_USERS),
       mergeMap(
-        (userAction: UserAction) =>{
+        () =>{
 
           return this.usersService.getAllUsers().pipe(
               map((users: User[])=> new GetAllUsersActionSuccess(users)),
@@ -28,15 +28,13 @@ export class UserEffects{
 
     )
   );
-
    //create searchUser effects
-
-   searchUserEffect: Observable<UserAction> = createEffect(
+   searchUserEffect: Observable<UserActionUnion> = createEffect(
 
     () => this.effectActions.pipe(
       ofType(UserActionType.SEARCH_A_USER),
       mergeMap(
-        (userAction: UserAction) =>{
+        (userAction: UserActionUnion) =>{
 
           return this.usersService.searchUser(userAction.payload).pipe(
               map((users: User[])=> new SearchUserActionSuccess(users)),
@@ -47,4 +45,54 @@ 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(
+    ()=> this.effectActions.pipe(
+      ofType(UserActionType.DELETE_A_USER),
+      mergeMap( (userAction: UserActionUnion) => {
+        return this.usersService.deleteUser(userAction.payload.id).pipe(
+          map( ()=> new DeleteUserActionSuccess(userAction.payload)),
+          catchError( (err) => of(new DeleteUserActionError(err.message)))
+        )
+      })
+    )
+  );
+
+  //create createUser effect: action of button to create user form
+  createUserFormEffect: Observable<UserActionUnion> = createEffect(
+    () => this.effectActions.pipe(
+      ofType(UserActionType.CREATE_A_USERFORM),
+      map( ()=>{
+        return new CreateUserFormActionSuccess({});
+      }),
+      catchError( (err) => of(new CreateUserFormActionError(err.message)))
+    )
+  );
+
+  //create save a user effect: action of saving data of the form
+  saveUserFormEffect : Observable<UserActionUnion> = createEffect(
+    () => this.effectActions.pipe(
+      ofType(UserActionType.SAVE_A_USERFORM),
+      mergeMap( (userAction: UserActionUnion) => {
+        return this.usersService.createUser(userAction.payload).pipe(
+          map (user => new SaveUserFormActionSuccess(user)),
+          catchError( err => of(new SaveUserFormActionError(err.message)))
+        );
+      })
+    )
+  );
 }

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

@@ -1,26 +1,20 @@
 import { Action } from '@ngrx/store';
 import { User } from 'src/app/shared/models/user.model';
-import { UserAction, UserActionType } from './users.actions';
-
-export enum UserStateEnum {
-  LOADING = '[User] LOADING',
-  LOADED = '[User] LOADED',
-  ERROR = '[User] ERROR',
-  INIT_STATE = '[User] INITIAL STATE',
-}
+import { MsgState } from '../msg.state';
+import { UserActionUnion, UserActionType } from './users.actions';
 
 //create a state
-export interface UserState {
-  usersList: User[];
-  serverErrorMsg: string;
-  dataState: UserStateEnum;
+export class UserState {
+  usersList!: User[];
+  msgState!: MsgState;
+  userServerErrorMsg!: string;
 }
 
 //create reducer, a reducer need a initial state and an action
 const initUserState: UserState = {
   usersList: [],
-  serverErrorMsg: '',
-  dataState: UserStateEnum.INIT_STATE,
+  msgState: MsgState.INIT_STATE,
+  userServerErrorMsg: 'No error message',
 };
 
 export function userReducer(
@@ -28,38 +22,128 @@ export function userReducer(
   action: Action
 ): UserState {
   switch (action.type) {
+    /** get all users actions */
     case UserActionType.GET_ALL_USERS:
-      return { ...state, dataState: UserStateEnum.LOADING };
+      return { ...state, msgState: MsgState.LOADING };
 
     case UserActionType.GET_ALL_USERS_SUCCESS:
       return {
         ...state,
-        dataState: UserStateEnum.LOADED,
-        usersList: (<UserAction>action).payload,
+        msgState: MsgState.LOADED,
+        usersList: (<UserActionUnion>action).payload,
       };
 
     case UserActionType.GET_ALL_USERS_ERROR:
       return {
         ...state,
-        dataState: UserStateEnum.ERROR,
-        serverErrorMsg: (<UserAction>action).payload,
+        msgState: MsgState.ERROR,
+        userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
+    /** search a user actions */
     case UserActionType.SEARCH_A_USER:
-      return { ...state, dataState: UserStateEnum.LOADING };
+      return { ...state, msgState: MsgState.LOADING };
 
     case UserActionType.SEARCH_A_USER_SUCCESS:
       return {
         ...state,
-        dataState: UserStateEnum.LOADED,
-        usersList: (<UserAction>action).payload,
+        msgState: MsgState.LOADED,
+        usersList: (<UserActionUnion>action).payload,
       };
 
     case UserActionType.SEARCH_A_USER_ERROR:
       return {
         ...state,
-        dataState: UserStateEnum.ERROR,
-        serverErrorMsg: (<UserAction>action).payload,
+        msgState: MsgState.ERROR,
+        userServerErrorMsg: (<UserActionUnion>action).payload,
+      };
+
+    /** edit a user actions */
+    case UserActionType.EDIT_A_USER:
+      return {
+        ...state,
+        msgState: MsgState.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
+      );
+      return {
+        ...state,
+        msgState: MsgState.LOADED,
+        usersList: usersListNew1,
+      };
+
+    case UserActionType.EDIT_A_USER_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERROR,
+        userServerErrorMsg: (<UserActionUnion>action).payload,
+      };
+
+    /** create a user form actions */
+    case UserActionType.CREATE_A_USERFORM:
+      return {
+        ...state,
+        msgState: MsgState.LOADING,
+      };
+
+    case UserActionType.CREATE_A_USERFORM_SUCCESS:
+      return {
+        ...state,
+        msgState: MsgState.NEW,
+      };
+
+    case UserActionType.CREATE_A_USERFORM_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERROR,
+        userServerErrorMsg: (<UserActionUnion>action).payload,
+      };
+
+    /** save a user (data of form) action*/
+    case UserActionType.SAVE_A_USERFORM:
+      return {
+        ...state,
+        msgState: MsgState.LOADING,
+      };
+    case UserActionType.CREATE_A_USERFORM_SUCCESS:
+      let createdUser: User = (<UserActionUnion>action).payload;
+      let usersListCopy2: User[] = [...state.usersList];
+      usersListCopy2.push(createdUser);
+
+      return {
+        ...state,
+        msgState: MsgState.SUCCESS,
+        usersList: usersListCopy2,
+      };
+
+    /** delete a user actions */
+    case UserActionType.DELETE_A_USER:
+      return {
+        ...state,
+        msgState: MsgState.LOADING,
+      };
+
+    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);
+      return {
+        ...state,
+        msgState: MsgState.LOADED,
+        usersList: usersListNew3,
+      };
+
+    case UserActionType.DELETE_A_USER_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERROR,
+        userServerErrorMsg: (<UserActionUnion>action).payload,
       };
 
     default:

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

@@ -1 +0,0 @@
-<p>user-create works!</p>

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

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-user-create',
-  templateUrl: './user-create.component.html',
-  styleUrls: ['./user-create.component.css']
-})
-export class UserCreateComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

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

@@ -0,0 +1,267 @@
+<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="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
+                    }"
+                  />
+
+                  <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
+                    }"
+                  />
+
+                  <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>
+
+                <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
+                    }"
+                  />
+
+                  <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>
+
+              <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 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>
+
+          </form>
+        </div>
+      </div>
+
+
+    </ng-container>
+
+  </ng-container>
+
+</div>

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

@@ -0,0 +1,97 @@
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import {
+  CreateUserFormAction,
+  SaveUserFormAction,
+} from './../../../../ngrx/users/users.actions';
+import { Store } from '@ngrx/store';
+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',
+  styleUrls: ['./user-create.component.css'],
+})
+export class UserCreateComponent implements OnInit {
+  userFormGroup!: FormGroup;
+
+  constructor(
+    private store: Store<{ userReducerKey: UserState }>,
+    private fb: FormBuilder
+  ) {}
+  userState!: UserState;
+  readonly msgState = MsgState;
+
+  ngOnInit(): void {
+
+    this.store.dispatch(new CreateUserFormAction({}));
+
+    this.store.subscribe((state) => {
+      this.userState = state.userReducerKey;
+
+      if(this.userState.msgState==this.msgState.NEW){
+
+        this.userFormGroup = this.fb.group({
+          id: [0, Validators.required],
+          firstname: [
+            '',
+            [
+              Validators.required,
+              Validators.minLength(3),
+              Validators.maxLength(15),
+            ],
+          ],
+          lastname: [
+            '',
+            [
+              Validators.required,
+              Validators.minLength(3),
+              Validators.maxLength(15),
+            ],
+          ],
+          email: ['', [Validators.required, Validators.email]],
+          address: this.fb.group({
+            numRue: [0, [Validators.required, Validators.min(1)]],
+            nomRue: [
+              '',
+              [
+                Validators.required,
+                Validators.minLength(3),
+                Validators.maxLength(25),
+              ],
+            ],
+            bp: [0, [Validators.required, Validators.min(1)]],
+            ville: [
+              '',
+              [
+                Validators.required,
+                Validators.minLength(3),
+                Validators.maxLength(15),
+              ],
+            ],
+            pays: [
+              '',
+              [
+                Validators.required,
+                Validators.minLength(3),
+                Validators.maxLength(15),
+              ],
+            ],
+          }),
+        });
+      }
+    });
+  }
+
+  onUserSave() {
+    if (window.confirm(MsgState.CONFIRM)) {
+      this.store.dispatch(new SaveUserFormAction(this.userFormGroup.value));
+    }
+  }
+
+  onNewUser() {
+    this.store.dispatch(new CreateUserFormAction({}));
+  }
+}

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

@@ -25,17 +25,31 @@
         (click)="onGetUsersVsProjects()"
       ></button>
     </div>
+
     <ul class="navbar-nav ml-auto">
       <li>
-        <form #f="ngForm" (ngSubmit)="onSearch(f.value)" class="form-inline">
-            <div class="form-group">
-              <input type="text" class="form-control" ngModel name="keyword">
-              <button class="btn btn-outline-primary"type="submit" [disabled]="!f.valid"> <i class="fa fa-search"></i>search</button>
+        <form #form="ngForm"
+          (ngSubmit)="onSearch(form.value)"
+          novalidate
+        >
+          <div class="input-group">
+            <input
+              type="text"
+              class="form-control"
+              name="keyword"
+              ngModel
+              placeholder="firstname keyword"
+            />
+            <div class="input-group-append">
+              <span class="input-group-text" id="basic-addon2">
+                <button class="btn" type="submit" [disabled]="!form.valid">
+                  <i class="fa fa-search"></i>search
+                </button>
+              </span>
             </div>
+          </div>
         </form>
       </li>
     </ul>
   </nav>
 </div>
-
-

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

@@ -1,27 +1,35 @@
-import { SearchUsersAction } from './../../../../ngrx/users/users.actions';
+import { UserState } from './../../../../ngrx/users/user.state';
+import {
+  SearchUsersAction,
+  CreateUserFormAction,
+} from './../../../../ngrx/users/users.actions';
 import { GetAllUsersAction } from '../../../../ngrx/users/users.actions';
 import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-user-nav-bar',
   templateUrl: './user-nav-bar.component.html',
-  styleUrls: ['./user-nav-bar.component.css']
+  styleUrls: ['./user-nav-bar.component.css'],
 })
 export class UserNavBarComponent {
+  constructor(
+    private store: Store<{ userReducerKey: UserState }>,
+    private router: Router
+  ) {}
 
-  constructor(private store: Store) { }
 
-   onUserCreate(): any{}
-
-  onUsersGetAll(): any{
-
-    this.store.dispatch(new GetAllUsersAction({}))
+  onUserCreate(): void {
+    this.router.navigateByUrl('/user-create');
   }
-  onGetUsersVsProjects(): any{}
 
-  onSearch(searchForm:any){
+  onUsersGetAll(): any {
+    this.store.dispatch(new GetAllUsersAction({}));
+  }
+  onGetUsersVsProjects(): any {}
 
-    this.store.dispatch(new SearchUsersAction(searchForm.keyword))
+  onSearch(searchForm: any) {
+    this.store.dispatch(new SearchUsersAction(searchForm.keyword));
   }
 }

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

@@ -0,0 +1,3 @@
+ul{
+  list-style-type: none;
+}

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

@@ -1,13 +1,13 @@
-<p-table
+<p-table #tbl
 [value]="inputState.usersList"
 responsiveLayout="scroll"
 *ngIf="inputState.usersList && inputState.usersList.length > 0"
 styleClass="p-datatable-striped"
 [paginator]="true"
-[rows]="2"
+[rows]="3"
 [showCurrentPageReport]="true"
 currentPageReportTemplate="{first} - {last} of {totalRecords} users"
-[rowsPerPageOptions]="[2, 5, 10]"
+[rowsPerPageOptions]="[3, 5, 10]"
 >
 <ng-template pTemplate="header">
   <tr>
@@ -27,10 +27,9 @@ currentPageReportTemplate="{first} - {last} of {totalRecords} users"
     <td>{{ user.lastname }}</td>
     <td>
       <ul>
-        <li>{{user.address.numRue}}</li>
+        <li>N°{{user.address.numRue}}</li>
         <li> {{user.address.nomRue}}</li>
-        <li> {{user.address.bp}}</li>
-        <li> {{user.address.ville}}</li>
+        <li> {{user.address.bp}} {{user.address.ville}}
         <li>{{user.address.pays}}</li>
       </ul>
     </td>
@@ -40,7 +39,7 @@ currentPageReportTemplate="{first} - {last} of {totalRecords} users"
         <i
           class="fa fa-pencil"
           style="color: mediumturquoise"
-
+          (click)="onUserEdit(user)"
         ></i>
       </button>
     </td>
@@ -49,7 +48,7 @@ currentPageReportTemplate="{first} - {last} of {totalRecords} users"
         <i
           class="fa fa-trash"
           style="color: red"
-
+          (click)="onUserDelete(user)"
         ></i>
       </button>
     </td>

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

@@ -1,6 +1,10 @@
-import { UserState } from './../../../../ngrx/users/users.reducer';
+import { EditUsersAction, 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';
+import { UserState } from 'src/app/ngrx/users/user.state';
+import { Store } from '@ngrx/store';
+import { MsgState } from 'src/app/ngrx/msg.state';
 
 @Component({
   selector: 'app-users-list',
@@ -9,6 +13,18 @@ import { Component } from '@angular/core';
 })
 export class UsersListComponent {
 
- @Input ()  inputState!: UserState
+ @Input()  inputState!: UserState
 
+ constructor(private store: Store<any>){}
+
+ onUserEdit(user:User){
+   this.store.dispatch(new EditUsersAction({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

@@ -1,21 +1,21 @@
 <div class="p-4">
   <app-user-nav-bar></app-user-nav-bar>
 
-  <ng-container *ngIf="userState$ | async as userState" [ngSwitch]="userState.dataState">
+  <ng-container *ngIf="userState$ | async as userState" [ngSwitch]="userState.msgState">
 
-    <ng-container *ngSwitchCase="userStateEnum.INIT_STATE">
-      <div class="p-2">initial state</div>
+    <ng-container *ngSwitchCase="userMsg.INIT_STATE">
+      <div class="p-2">{{userState.msgState}}</div>
     </ng-container>
 
-    <ng-container *ngSwitchCase="userStateEnum.LOADING">
-      <div class="p-2">Data are looding ...</div>
+    <ng-container *ngSwitchCase="userMsg.LOADING">
+      <div class="p-2">{{userMsg.LOADING}}</div>
     </ng-container>
 
-    <ng-container *ngSwitchCase="userStateEnum.ERROR">
-      <div class="p-2 text-danger"> {{userState.serverErrorMsg}} </div>
+    <ng-container *ngSwitchCase="userMsg.ERROR">
+      <div class="p-2 text-danger"> {{userState.userServerErrorMsg}} </div>
     </ng-container>
 
-    <ng-container *ngSwitchCase="userStateEnum.LOADED">
+    <ng-container *ngSwitchCase="userMsg.LOADED">
       <app-users-list [inputState]="userState"></app-users-list>
     </ng-container>
 

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

@@ -1,27 +1,32 @@
-import { userReducer } from 'src/app/ngrx/users/users.reducer';
-import { UserState, UserStateEnum } from './../../../ngrx/users/users.reducer';
-import { Observable, map } from 'rxjs';
+import { UserState } from './../../../ngrx/users/user.state';
 import { Component, OnInit } from '@angular/core';
-import { Store } from '@ngrx/store';
+import {  Store } from '@ngrx/store';
+import { map, Observable } from 'rxjs';
+import { User } from 'src/app/shared/models/user.model';
+import { MsgState } from 'src/app/ngrx/msg.state';
 
 @Component({
   selector: 'app-users-management',
   templateUrl: './users-management.component.html',
-  styleUrls: ['./users-management.component.css']
+  styleUrls: ['./users-management.component.css'],
 })
 export class UsersManagementComponent implements OnInit {
 
-  userState$ !: Observable<UserState>
-  readonly userStateEnum = UserStateEnum
+  userState$!: Observable<{
+    usersList: User[];
+    msgState: MsgState;
+    userServerErrorMsg: string;
+  }>;
 
-  constructor(private store: Store<any>) { }
+  readonly userMsg = MsgState;
 
-  ngOnInit(): void {
-
-  this.userState$ = this.store.pipe(
+  constructor(private store: Store<{ userReducerKey: UserState }>) {}
 
-    map( (state) => state.userReducer)
-  )
+  ngOnInit(): void {
+   // this.userState$ = this.store.select('userReducerKey');
+    //or
+    this.userState$ = this.store.pipe(
+      map( (userState) => userState.userReducerKey)
+    )
   }
-
 }

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

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

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

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ButtonModule } from "primeng/button";
 import { UsersManagerRoutingModule } from './users-manager-routing.module';
-import { UserCreateComponent } from './user-create/user-create.component';
+import { UserCreateComponent } from './users-management/user-create/user-create.component';
 import { UsersManagementComponent } from './users-management/users-management.component';
 import { UserNavBarComponent } from './users-management/user-nav-bar/user-nav-bar.component';
 import { EffectsModule } from '@ngrx/effects';
@@ -12,7 +12,7 @@ import { UserEffects } from 'src/app/ngrx/users/users.effects';
 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 } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 
 
@@ -27,11 +27,12 @@ import { FormsModule } from '@angular/forms';
     CommonModule,
     UsersManagerRoutingModule,
     ButtonModule,
-    StoreModule.forRoot({userReducer: userReducer}),
+    StoreModule.forRoot({userReducerKey: userReducer}),
     EffectsModule.forRoot([UserEffects]),
     StoreDevtoolsModule.instrument(),
     TableModule,
-    FormsModule
+    FormsModule,
+    ReactiveFormsModule
   ]
 })
 export class UsersManagerModule { }