commit modification

.vscode/extensions.json

 {
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
+  "recommendations": [
+    "angular.ng-template",
+    "Angular.ng-template"
+  ]
 }

db_users_projects_companies.json

 {
   "companies": [
     {
-      "id": 2,
-      "companyName": "Company-2",
+      "id": 1,
+      "companyName": "NATAN",
       "companyType": "PROSPECT",
-      "creationDate": "05/17/2022"
+      "creationDate": "05 17 2022"
     },
     {
-      "id": 3,
-      "companyName": "Natan",
-      "companyType": "PROSPECT",
+      "id": 2,
+      "companyName": "Company-1",
+      "companyType": "CLIENT",
       "creationDate": "05 17 2022"
     },
     {
       "id": 4,
-      "companyName": "Company-1",
+      "companyName": "Company-4",
+      "companyType": "PROSPECT",
+      "creationDate": "05 18 2022"
+    },
+    {
+      "id": 3,
+      "companyName": "Company-3",
       "companyType": "CLIENT",
       "creationDate": "05 18 2022"
     }
       "lastname": "Touitou",
       "email": "david.touitou@natan.fr",
       "address": {
-        "numRue": 44,
+        "numRue": 45,
         "nomRue": "Rue Notre Dame de Paris",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
-      }
+      },
+      "creationDate": "05 15 2022"
     },
     {
       "id": 4,
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
-      }
+      },
+      "creationDate": "05 15 2022"
     },
     {
       "address": {
         "ville": "Paris",
         "pays": "France"
       },
+      "creationDate": "05 15 2022",
       "firstname": "Smail",
       "lastname": "Sellah",
       "email": "smail.sellah@natan.fr",
         "ville": "Paris",
         "pays": "France"
       },
+      "creationDate": "05 15 2022",
       "firstname": "Sarah",
       "lastname": "Leray",
       "email": "sarah.leray@natan.fr",
         "ville": "Paris",
         "pays": "France"
       },
+      "creationDate": "05 15 2022",
       "firstname": "Syrine",
       "lastname": "Ait Haddad",
       "email": "syrine.ait-haddadene@natan.fr",
         "ville": "Paris",
         "pays": "France"
       },
+      "creationDate": "05 15 2022",
       "firstname": "Marion",
       "lastname": "Jaillot",
       "email": "marion.jaillot@natan.fr",
         "ville": "Paris",
         "pays": "France"
       },
+      "creationDate": "05 15 2022",
       "firstname": "avraham",
       "lastname": "Benassaya",
       "email": "avraham.benassaya@natan.fr",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
-      }
+      },
+      "creationDate": "05 15 2022"
     },
     {
       "id": 12,
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
-      }
+      },
+      "creationDate": "05 15 2022"
     },
     {
       "id": 14,
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
-      }
+      },
+      "creationDate": "05 15 2022"
     },
     {
       "id": 15,
         "bp": 75004,
         "ville": "Paris",
         "pays": "France"
-      }
+      },
+      "creationDate": "05 15 2022"
     },
     {
       "id": 17,
         "bp": 45,
         "ville": "user test",
         "pays": "user test"
-      }
+      },
+      "creationDate": "05 15 2022"
+    },
+    {
+      "id": 18,
+      "firstname": "test2",
+      "lastname": "test2",
+      "email": "test2@test2",
+      "address": {
+        "numRue": 121,
+        "nomRue": "test2",
+        "bp": 120,
+        "ville": "test2",
+        "pays": "test2"
+      },
+      "createDate": "06 07 2022"
     }
   ],
   "projects": [
     {
-      "id": 1,
-      "projectName": "Project-1",
-      "priority": 1,
-      "creationDate": "03 06 2022",
-      "companyId": 2,
-      "description": "Training users to frontend in angular",
-      "userId": 3,
-      "state": "END"
-    },
-    {
       "id": 2,
       "projectName": "Project-2",
-      "priority": 1,
+      "priority": 3,
       "creationDate": "03 06 2022",
       "companyId": 2,
       "description": "Project description for action",
-      "userId": 3,
+      "userId": 12,
       "state": "END"
     },
     {
       "creationDate": "03 06 2022",
       "companyId": 3,
       "description": "Project description for action",
+      "userId": 3,
+      "state": "END"
+    },
+    {
+      "id": 5,
+      "projectName": "Project-5",
+      "priority": 1,
+      "creationDate": "06 07 2022",
+      "companyId": 4,
+      "description": "Project of  creating and training models",
       "userId": 12,
       "state": "END"
     }

src/app/app.module.ts

+import { CompanyUpdateDeleteEffects } from './ngrx/companies/effects.company.update.delete';
+import { CompanyGetSearchEffects } from './ngrx/companies/effects.company.get.search';
 import { BaseNavMenuComponent } from './pages/base-nav-menu/base-nav-menu.component';
 import { FormsModule } from '@angular/forms';
 import { AccueilModule } from './pages/accueil/accueil.module';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { ProjectCreateEffects } from './ngrx/projects/effects.projectcreate';
-import { UserCreateEffects } from './ngrx/users/effects.user.createuser';
-import { UserGetSearchEffects } from './ngrx/users/effects.user.getsearchuser';
-import { UserUpdateEffects } from './ngrx/users/effects.user.update';
+import { UserCreateEffects } from './ngrx/users/effects.user.create';
+import { UserGetSearchEffects } from './ngrx/users/effects.user.get.search';
+import { UserUpdateEffects } from './ngrx/users/effects.user.update.delete';
 import { userReducer } from './ngrx/users/users.reducer';
 import { projectReducer } from './ngrx/projects/projects.reducer';
-import { ProjectGet } from './ngrx/projects/effects.projectget';
+import { ProjectUpdateEffects } from './ngrx/projects/effects.project.update.delete';
+import { ProjectCreateEffects } from './ngrx/projects/effects.project.create';
+import { ProjectGet } from './ngrx/projects/effects.project.get';
+import { DatePipe } from '@angular/common';
+import { companyReducer } from './ngrx/companies/companies.reducer';
 
 @NgModule({
   declarations: [AppComponent, BaseNavMenuComponent],
     MatMenuModule,
     StoreModule.forRoot({
       userReducerKey: userReducer,
-      productReducerKey: projectReducer,
+      projectReducerKey: projectReducer,
+      companyReducerKey: companyReducer
     }),
     EffectsModule.forRoot([
       UserCreateEffects,
       UserGetSearchEffects,
       UserUpdateEffects,
       ProjectCreateEffects,
-      ProjectGet
+      ProjectGet,
+      ProjectUpdateEffects,
+      CompanyGetSearchEffects,
+      CompanyUpdateDeleteEffects
     ]),
     StoreDevtoolsModule.instrument(),
   ],
-  providers: [],
+  providers: [DatePipe],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/ngrx/companies/companies.actions.ts

+import { CompanyActionTypes } from './company.action.types';
+import { Action } from '@ngrx/store';
+import { Company } from 'src/app/shared/models/company/company.model';
+/** all actions related to company */
+
+//get all companies
+export class GetAllCompaniesAction implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.GET_ALL_COMPANIES;
+  constructor(public payload: any) {}
+}
+
+export class GetAllCompaniesActionSuccess implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.GET_ALL_COMPANIES_SUCCESS;
+  constructor(public payload: Company[]) {}
+}
+
+export class GetAllCompaniesActionError implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.GET_ALL_COMPANIES_ERROR;
+  constructor(public payload: string) {}
+}
+
+//create form to create campany
+
+//create form to update company
+export class CreateFormToUpdateCompanyAction implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.CREATE_COMPANY_FORM_UPDATE;
+  constructor(public payload: Company) {}
+}
+
+export class CreateFormToUpdateCompanyActionSuccess implements Action {
+  type: CompanyActionTypes =
+    CompanyActionTypes.CREATE_COMPANY_FORM_UPDATE_SUCCESS;
+  constructor(public payload: Company) {}
+}
+
+export class CreateFormToUpdateCompanyActionError implements Action {
+  type: CompanyActionTypes =
+    CompanyActionTypes.CREATE_COMPANY_FORM_UPDATE_ERROR;
+  constructor(public payload: string) {}
+}
+
+//save form data to update company
+export class UpdateCompanyWithFormDataAction implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.UPDATE_COMPANY_WITH_FORM_DATA;
+  constructor(public payload: Company) {}
+}
+
+export class UpdateCompanyWithFormDataActionSuccess implements Action {
+  type: CompanyActionTypes =
+    CompanyActionTypes.UPDATE_COMPANY_WITH_FORM_DATA_SUCCESS;
+  constructor(public payload: Company) {}
+}
+
+export class UpdateCompanyWithFormDataActionError implements Action {
+  type: CompanyActionTypes =
+    CompanyActionTypes.UPDATE_COMPANY_WITH_FORM_DATA_ERROR;
+  constructor(public payload: string) {}
+}
+
+// detele a company
+export class DeleteCompany implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.DELETE_COMPANY;
+  constructor(public payload: Company){}
+}
+
+export class DeleteCompanySuccess implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.DELETE_COMPANY_SUCCESS;
+  constructor(public payload: Company){}
+}
+
+export class DeleteCompanyError implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.DELETE_COMPANY_ERROR;
+  constructor(public payload: string){}
+}
+
+export type CompanyActionUnion =
+  | GetAllCompaniesAction
+  | GetAllCompaniesActionSuccess
+  | GetAllCompaniesActionError
+  | CreateFormToUpdateCompanyAction
+  | CreateFormToUpdateCompanyActionSuccess
+  | CreateFormToUpdateCompanyActionError
+  | UpdateCompanyWithFormDataAction
+  | UpdateCompanyWithFormDataActionSuccess
+  | UpdateCompanyWithFormDataActionError;

src/app/ngrx/companies/companies.reducer.ts

+import { ProjectActionTypes } from './../projects/project.action.types';
+import { CompanyActionUnion } from './companies.actions';
+import { CompanyActionTypes } from './company.action.types';
+import { Action } from '@ngrx/store';
+import { MsgState } from '../msg.state';
+import { CompanyState } from './company.state';
+import { state } from '@angular/animations';
+import { Company } from 'src/app/shared/models/company/company.model';
+
+/**reducer fonction to handle actions
+a reducer function need initial state and an action to handle*/
+
+const companyInitialState: CompanyState = {
+  currentCompany: null,
+  companiesList: [],
+  msgState: MsgState.INIT_STATE,
+  serverMsgErron: 'no error msg',
+};
+
+export function companyReducer(
+  companyState: CompanyState = companyInitialState,
+  action: Action
+) {
+  switch (action.type) {
+    // get all companies
+    case CompanyActionTypes.GET_ALL_COMPANIES:
+      return {
+        ...companyState,
+        msgState: MsgState.LOADING,
+      };
+
+    case CompanyActionTypes.GET_ALL_COMPANIES_SUCCESS:
+      return {
+        ...companyState,
+        msgState: MsgState.LOADED,
+        companiesList: (<CompanyActionUnion>action).payload,
+      };
+
+    case CompanyActionTypes.GET_ALL_COMPANIES_ERROR:
+      return {
+        ...companyState,
+        msgState: MsgState.ERR,
+        serverMsgError: (<CompanyActionUnion>action).payload,
+      };
+
+    //create form to update company
+    case CompanyActionTypes.CREATE_COMPANY_FORM_UPDATE:
+      return {
+        ...companyState,
+        msgState: MsgState.FORM_LOADING,
+      };
+    case CompanyActionTypes.CREATE_COMPANY_FORM_UPDATE_SUCCESS:
+      let companyToUpdate: Company = (<CompanyActionUnion>action).payload;
+      return {
+        ...companyState,
+        msgState: MsgState.FORM_LOADED,
+        currentCompany: companyToUpdate,
+      };
+
+    case CompanyActionTypes.CREATE_COMPANY_FORM_UPDATE_ERROR:
+      return {
+        ...companyState,
+        msgState: MsgState.FORM_LOAD_ERR,
+        serverMsgError: (<CompanyActionUnion>action).payload,
+      };
+
+    //save form data to update company
+    case CompanyActionTypes.UPDATE_COMPANY_WITH_FORM_DATA:
+      return {
+        ...companyState,
+        msgState: MsgState.DEFAULT_MSG,
+      };
+    case CompanyActionTypes.UPDATE_COMPANY_WITH_FORM_DATA_SUCCESS:
+      let updatedCompany: Company = (<CompanyActionUnion>action).payload;
+      let companiesListCopy1: Company[] = [...companyState.companiesList];
+      companiesListCopy1 = companiesListCopy1.map((company) =>
+        company.id == updatedCompany.id ? updatedCompany : company
+      );
+
+      return{
+        ...companyState,
+        msgState: MsgState.UPDATED,
+        companiesList: companiesListCopy1
+      }
+
+      case CompanyActionTypes.UPDATE_COMPANY_WITH_FORM_DATA_ERROR:
+        return{
+          ...companyState,
+          msgState: MsgState.ERR,
+          serverMsgError: (<CompanyActionUnion>action).payload
+        };
+
+        // delete a company
+      case CompanyActionTypes.DELETE_COMPANY:
+        return{
+          ...companyState,
+          msgState: MsgState.DELETE
+        }
+
+      case CompanyActionTypes.DELETE_COMPANY_SUCCESS:
+        let deletedCompany: Company = (<CompanyActionUnion> action).payload;
+        let deletedCompanyIndex = companyState.companiesList.indexOf(deletedCompany);
+        let companiesListCopy2: Company[] = [...companyState.companiesList];
+        companiesListCopy2 = companiesListCopy2.splice(deletedCompanyIndex);
+
+        return{
+          ...companyState,
+          msgState: MsgState.DELETED,
+          companiesList: companiesListCopy2
+        };
+
+      case CompanyActionTypes.DELETE_COMPANY_ERROR:
+        return{
+          ... companyState,
+          msgState: MsgState.ERR,
+          serverMsgError: (<CompanyActionUnion> action).payload
+        };
+
+    default:
+      return { ...companyState };
+  }
+}

src/app/ngrx/companies/company.action.types.ts

+export enum CompanyActionTypes{
+  //get all companies action
+  GET_ALL_COMPANIES = '[Company] GET ALL COMPANIES',
+  GET_ALL_COMPANIES_SUCCESS = '[Company] GET ALL COMPANIES SUCCESS',
+  GET_ALL_COMPANIES_ERROR = '[Company] GET ALL COMPANIES ERROR',
+
+  //create a company form to add a project
+  CREATE_COMPANY_FORM_ADD = '[Company] CREATE COMPANY FORM ADD',
+  CREATE_COMPANY_FORM_ADD_SUCCESS = '[Company] CREATE COMPANY FORM ADD SUCCESS',
+  CREATE_COMPANY_FORM_ADD_ERROR = '[Company] CREATE COMPANY FORM ADD ERROR',
+
+  //save a company form data
+  SAVE_COMPANY_FORM_DATA ='[Company] SAVE COMPANY FORM DATA',
+  SAVE_COMPANY_FORM_DATA_SUCCESS ='[Company] SAVE COMPANY FORM DATA SUCCESS',
+  SAVE_COMPANY_FORM_DATA_ERROR ='[Company] SAVE COMPANY FORM DATA ERROR',
+
+  // create form to update a company
+  CREATE_COMPANY_FORM_UPDATE = '[Company] CREATE COMPANY FORM UPDATE',
+  CREATE_COMPANY_FORM_UPDATE_SUCCESS = '[Company] CREATE COMPANY FORM UPDATE SUCCESS',
+  CREATE_COMPANY_FORM_UPDATE_ERROR = '[Company] CREATE COMPANY FORM UPDATE ERROR',
+
+  //update a company with form data
+  UPDATE_COMPANY_WITH_FORM_DATA ='[Company] UPDATE COMPANY WITH FORM DATA',
+  UPDATE_COMPANY_WITH_FORM_DATA_SUCCESS ='[Company] UPDATE COMPANY WITH FORM DATA SUCCESS',
+  UPDATE_COMPANY_WITH_FORM_DATA_ERROR ='[Company] UPDATE COMPANY WITH FORM DATA ERROR',
+
+  //Delete a company
+  DELETE_COMPANY = '[Company] DELETE COMPANY',
+  DELETE_COMPANY_SUCCESS = '[Company] DELETE COMPANY SUCCESS',
+  DELETE_COMPANY_ERROR = '[Company] DELETE COMPANY ERROR',
+}

src/app/ngrx/companies/company.state.ts

+import { MsgState } from './../msg.state';
+import { Company } from './../../shared/models/company/company.model';
+export class CompanyState{
+  currentCompany!: Company | null;
+  companiesList!: Company[];
+  msgState!: MsgState;
+  serverMsgErron!: string;
+}

src/app/ngrx/companies/effects.company.get.search.ts

+import { Injectable } from '@angular/core';
+import { CompanyActionTypes } from './company.action.types';
+import { CompanyActionUnion, GetAllCompaniesActionSuccess, GetAllCompaniesActionError } from './companies.actions';
+import { Observable, mergeMap, catchError, map, of } from 'rxjs';
+import { CompaniesService } from './../../shared/services/companies.service';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Company } from 'src/app/shared/models/company/company.model';
+
+@Injectable()
+export class CompanyGetSearchEffects {
+  constructor(
+    private companyActions: Actions,
+    private companiesService: CompaniesService
+  ) {}
+
+  getAllCompaniesEffect : Observable<CompanyActionUnion> = createEffect(
+    () => this.companyActions.pipe(
+      ofType(CompanyActionTypes.GET_ALL_COMPANIES),
+      mergeMap(()=>{
+        return this.companiesService.getAllCompanies().pipe(
+          map( (companies: Company[])=> new GetAllCompaniesActionSuccess(companies)),
+          catchError(err=> of(new GetAllCompaniesActionError(err.message)))
+        )
+      })
+    )
+  );
+}

src/app/ngrx/companies/effects.company.update.delete.ts

+import { CompanyActionTypes } from './company.action.types';
+import { CompanyActionUnion, CreateFormToUpdateCompanyActionSuccess, CreateFormToUpdateCompanyActionError, UpdateCompanyWithFormDataActionSuccess, UpdateCompanyWithFormDataActionError, DeleteCompany, DeleteCompanySuccess, DeleteCompanyError } from './companies.actions';
+import { Observable, mergeMap, map, catchError, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { CompaniesService } from './../../shared/services/companies.service';
+import { Injectable } from '@angular/core';
+import { Company } from 'src/app/shared/models/company/company.model';
+
+@Injectable()
+export class CompanyUpdateDeleteEffects {
+  constructor(
+    private companiesService: CompaniesService,
+    private companyActions: Actions
+  ) {}
+
+  //create form to update company effect
+  createFormToUpdateCompanyEffect : Observable<CompanyActionUnion> = createEffect(
+    () => this.companyActions.pipe(
+      ofType(CompanyActionTypes.CREATE_COMPANY_FORM_UPDATE),
+      mergeMap((action: CompanyActionUnion) =>{
+        return this.companiesService.getCompanyById(action.payload.id).pipe(
+          map( (company: Company) => new CreateFormToUpdateCompanyActionSuccess(company)),
+          catchError(err => of(new CreateFormToUpdateCompanyActionError(err.message)))
+        )
+      })
+    )
+  );
+
+  //update company with form data
+
+  updateCompanyWithFormDataEffect : Observable<CompanyActionUnion> = createEffect(
+    () => this.companyActions.pipe(
+      ofType(CompanyActionTypes.UPDATE_COMPANY_WITH_FORM_DATA),
+      mergeMap((action: CompanyActionUnion)=>{
+        return this.companiesService.updateCompany(action.payload).pipe(
+          map((company: Company) => new UpdateCompanyWithFormDataActionSuccess(company)),
+          catchError(err=> of(new UpdateCompanyWithFormDataActionError(err.message)))
+        )
+      })
+    )
+  );
+
+  // delete a company
+  deleteCompany: Observable<CompanyActionUnion> = createEffect(
+    () => this.companyActions.pipe(
+      ofType(CompanyActionTypes.DELETE_COMPANY),
+      mergeMap((action: CompanyActionUnion)=>{
+        return this.companiesService.deleteCompany(action.payload.id).pipe(
+          map(()=>new DeleteCompanySuccess(action.payload)),
+          catchError(err=> of(new DeleteCompanyError(err.message)))
+        )
+      })
+    )
+  );
+}

src/app/ngrx/msg.state.ts

   FORM_LOADED = 'FORM LOADED',
   FORM_LOAD_ERR= 'FORM LOADING ERROR',
   CONFIRM_ADD = 'CONFIRM ADDING OF',
+  CONFIRM_UPDATE = 'CONFIRM UPDATE',
   CONFIRM_DEL = 'CONFIRM DELETION OF',
   ADDED = 'SUCCESSFULLY ADDED',
   EXIST = 'ALREADY EXISTS',
   UPDATED = ' SUCCESSFULLY UPDATED',
-  DEFAULT_MSG = 'DEFAULT MSG LOADING'
+  DEFAULT_MSG = 'DEFAULT MSG LOADING',
+  DELETE = 'DELETE',
+  DELETED = 'SUCCESSFULLY DELETED'
 }

src/app/ngrx/projects/effects.projectcreate.ts → src/app/ngrx/projects/effects.project.create.ts

 import { ProjectsService } from './../../shared/services/projects.service';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Injectable } from '@angular/core';
-import { Project } from 'src/app/shared/models/project.model';
+import { Project } from 'src/app/shared/models/project/project.model';
 
 @Injectable()
 export class ProjectCreateEffects {
         )
       })
     )
-  )
+  );
+
 }

src/app/ngrx/projects/effects.projectget.ts → src/app/ngrx/projects/effects.project.get.ts

-import { Project } from './../../shared/models/project.model';
+import { Project } from './../../shared/models/project/project.model';
 import { ProjectActionTypes } from './project.action.types';
 import { ProjectActionUnion, GetAllProjectsActionSuccess, GetAllProjectsActionError } from './projects.actions';
 import { Observable, mergeMap, map, catchError, of } from 'rxjs';

src/app/ngrx/projects/effects.project.update.delete.ts

+import { Project } from '../../shared/models/project/project.model';
+import { ProjectActionTypes } from './project.action.types';
+import {
+  ProjectActionUnion,
+  CreateProjectFormUpdateActionSuccess,
+  CreateProjectFormUpdateActionError,
+  UpdateProjectWithFormDataActionSuccess,
+  UpdateProjectWithFormDataActionError,
+  DeleteProjectActionSuccess,
+  DeleteProjectActionError,
+} from './projects.actions';
+import { Observable, mergeMap, map, catchError, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { ProjectsService } from '../../shared/services/projects.service';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ProjectUpdateEffects {
+  constructor(
+    private projectsService: ProjectsService,
+    private projectActions: Actions
+  ) {}
+
+  //create form filled with current data to update
+  createUpdateFormEffect: Observable<ProjectActionUnion> = createEffect(() =>
+    this.projectActions.pipe(
+      ofType(ProjectActionTypes.CREATE_PROJECT_FORM_UPDATE),
+      mergeMap((action: ProjectActionUnion) => {
+        return this.projectsService.getProjectById(action.payload.id).pipe(
+          map(
+            (project: Project) =>
+              new CreateProjectFormUpdateActionSuccess(project)
+          ),
+          catchError((err) =>
+            of(new CreateProjectFormUpdateActionError(err.message))
+          )
+        );
+      })
+    )
+  );
+
+  //update project with form data
+  updateProjectWithFormDataEffect: Observable<ProjectActionUnion> =
+    createEffect(() =>
+      this.projectActions.pipe(
+        ofType(ProjectActionTypes.UPDATE_PROJECT_WITH_FORM_DATA),
+        mergeMap((action: ProjectActionUnion) => {
+          return this.projectsService.updateProject(action.payload).pipe(
+            map(
+              (project: Project) =>
+                new UpdateProjectWithFormDataActionSuccess(project)
+            ),
+            catchError((err) =>
+              of(new UpdateProjectWithFormDataActionError(err.message))
+            )
+          );
+        })
+      )
+    );
+
+  deleteProjectEffect: Observable<ProjectActionUnion> = createEffect(() =>
+    this.projectActions.pipe(
+      ofType(ProjectActionTypes.DELETE_PROJECT),
+      mergeMap((action: ProjectActionUnion) => {
+        return this.projectsService.deleteProject(action.payload.id).pipe(
+          map(() => new DeleteProjectActionSuccess(action.payload)),
+        );
+      })
+    )
+  );
+}

src/app/ngrx/projects/project.action.types.ts

   SAVE_PROJECT_FORM_DATA ='[Project] SAVE PROJECT FORM DATA',
   SAVE_PROJECT_FORM_DATA_SUCCESS ='[Project] SAVE PROJECT FORM DATA SUCCESS',
   SAVE_PROJECT_FORM_DATA_ERROR ='[Project] SAVE PROJECT FORM DATA ERROR',
+
+  // create form to update project
+  CREATE_PROJECT_FORM_UPDATE = '[Project] CREATE PROJECT FORM UPDATE',
+  CREATE_PROJECT_FORM_UPDATE_SUCCESS = '[Project] CREATE PROJECT FORM UPDATE SUCCESS',
+  CREATE_PROJECT_FORM_UPDATE_ERROR = '[Project] CREATE PROJECT FORM UPDATE ERROR',
+
+  //update project with form data
+
+  UPDATE_PROJECT_WITH_FORM_DATA ='[Project] UPDATE_PROJECT_WITH_FORM_DATA',
+  UPDATE_PROJECT_WITH_FORM_DATA_SUCCESS ='[Project] UPDATE_PROJECT_WITH_FORM_DATA SUCCESS',
+  UPDATE_PROJECT_WITH_FORM_DATA_ERROR ='[Project] UPDATE_PROJECT_WITH_FORM_DATA ERROR',
+
+  //Delete project
+  DELETE_PROJECT = '[Project] DELETE PROJECT',
+  DELETE_PROJECT_SUCCESS = '[Project] DELETE PROJECT SUCCESS',
+  DELETE_PROJECT_ERROR = '[Project] DELETE PROJECT ERROR',
 }

src/app/ngrx/projects/project.state.ts

 import { MsgState } from 'src/app/ngrx/msg.state';
-import { Project } from './../../shared/models/project.model';
-import { ProjectActionUnion } from './projects.actions';
+import { Project } from './../../shared/models/project/project.model';
 
 export class ProjectState{
   currentProject !: Project| null;
   projectsList: any;
   msgState!: MsgState;
-  serverErrorMsg!: string;
-  currectAction!: ProjectActionUnion | null;
+  serverErrorMsg!: string
 }
 

src/app/ngrx/projects/projects.actions.ts

-import { Project } from './../../shared/models/project.model';
+import { Project } from './../../shared/models/project/project.model';
 import { ProjectActionTypes } from './project.action.types';
 import { Action } from '@ngrx/store';
 
 
 //save project form data
 export class SaveProjectFormDataAction implements Action{
-  type: ProjectActionTypes = ProjectActionTypes.SAVE_PROJECT_FORM_DATA
+  type: ProjectActionTypes = ProjectActionTypes.SAVE_PROJECT_FORM_DATA;
   constructor (public payload: Project){}
 }
 //save project form data
 export class SaveProjectFormDataActionSuccess implements Action{
-  type: ProjectActionTypes = ProjectActionTypes.SAVE_PROJECT_FORM_DATA_SUCCESS
+  type: ProjectActionTypes = ProjectActionTypes.SAVE_PROJECT_FORM_DATA_SUCCESS;
   constructor (public payload: Project){}
 }
 //save project form data
 export class SaveProjectFormDataActionError implements Action{
-  type: ProjectActionTypes = ProjectActionTypes.SAVE_PROJECT_FORM_DATA_ERROR
+  type: ProjectActionTypes = ProjectActionTypes.SAVE_PROJECT_FORM_DATA_ERROR;
   constructor (public payload: string){}
 }
 
+//create form for project update
+export class CreateProjectFormUpdateAction implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.CREATE_PROJECT_FORM_UPDATE;
+  constructor(public payload: Project){}
+}
+
+export class CreateProjectFormUpdateActionSuccess implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.CREATE_PROJECT_FORM_UPDATE_SUCCESS;
+  constructor(public payload: Project){}
+}
+
+export class CreateProjectFormUpdateActionError implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.CREATE_PROJECT_FORM_UPDATE_ERROR;
+  constructor(public payload: string){}
+}
+
+// update project with form data
+export class UpdateProjectWithFormDataAction implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.UPDATE_PROJECT_WITH_FORM_DATA;
+  constructor (public payload: Project){}
+}
+export class UpdateProjectWithFormDataActionSuccess implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.UPDATE_PROJECT_WITH_FORM_DATA_SUCCESS;
+  constructor (public payload: Project){}
+}
+export class UpdateProjectWithFormDataActionError implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.UPDATE_PROJECT_WITH_FORM_DATA_ERROR;
+  constructor (public payload: string){}
+}
+
+// delete a project
+export class DeleteProjectAction implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.DELETE_PROJECT;
+  constructor(public payload: Project){}
+}
+export class DeleteProjectActionSuccess implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.DELETE_PROJECT_SUCCESS;
+  constructor(public payload: Project){}
+}
+export class DeleteProjectActionError implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.DELETE_PROJECT_ERROR;
+  constructor(public payload: string){}
+}
+
 export type ProjectActionUnion =
   | GetAllProjectsAction
   | GetAllProjectsActionSuccess
   | CreateProjectFormAddActionError
   | SaveProjectFormDataAction
   | SaveProjectFormDataActionSuccess
-  | SaveProjectFormDataActionError;
+  | SaveProjectFormDataActionError
+  | CreateProjectFormUpdateAction
+  | CreateProjectFormUpdateActionSuccess
+  | CreateProjectFormUpdateActionError
+  | UpdateProjectWithFormDataAction
+  | UpdateProjectWithFormDataActionSuccess
+  | UpdateProjectWithFormDataActionError
+  | DeleteProjectAction
+  | DeleteProjectActionSuccess
+  | DeleteProjectActionError;

src/app/ngrx/projects/projects.reducer.ts

 import { MsgState } from '../msg.state';
 import { ProjectState } from './project.state';
 import { ProjectActionTypes } from './project.action.types';
-import { Project } from 'src/app/shared/models/project.model';
+import { Project } from 'src/app/shared/models/project/project.model';
 
 /** a reducer need first initial state and action to perform */
 
   currentProject: null,
   projectsList: [],
   msgState: MsgState.INIT_STATE,
-  serverErrorMsg: 'no error massage',
-  currectAction: null,
+  serverErrorMsg: 'no error massage'
 };
 
 export function projectReducer(
   state: ProjectState = projectInitState,
   projectAction: Action
 ): ProjectState {
-
   switch (projectAction.type) {
-
     // get all projects action reducer
     case ProjectActionTypes.GET_ALL_PROJECTS:
       return {
       return {
         ...state,
         msgState: MsgState.LOADED,
-        projectsList: (<ProjectActionUnion> projectAction).payload,
+        projectsList: (<ProjectActionUnion>projectAction).payload,
       };
 
     case ProjectActionTypes.GET_ALL_PROJECTS_ERROR:
       return {
         ...state,
         msgState: MsgState.ERR,
-        serverErrorMsg: (<ProjectActionUnion> projectAction).payload,
+        serverErrorMsg: (<ProjectActionUnion>projectAction).payload,
       };
 
-
     // create project form to add action reducer
 
     case ProjectActionTypes.CREATE_PROJECT_FORM_ADD:
-      return{
+      return {
         ...state,
         msgState: MsgState.FORM_LOADING,
       };
 
     case ProjectActionTypes.CREATE_PROJECT_FORM_ADD_SUCCESS:
-      return{
+      return {
         ...state,
-        msgState: MsgState.FORM_LOADED
+        msgState: MsgState.FORM_LOADED,
       };
 
     case ProjectActionTypes.CREATE_PROJECT_FORM_ADD_ERROR:
-      return{
+      return {
         ...state,
         msgState: MsgState.ERR,
-        serverErrorMsg: (<ProjectActionUnion> projectAction).payload
-      }
+        serverErrorMsg: (<ProjectActionUnion>projectAction).payload,
+      };
 
     //saving project form data
 
     case ProjectActionTypes.SAVE_PROJECT_FORM_DATA:
-      return{
+      return {
         ...state,
-        msgState: MsgState.LOADING
+        msgState: MsgState.LOADING,
       };
 
     case ProjectActionTypes.CREATE_PROJECT_FORM_ADD_SUCCESS:
-      let createdProject: Project = (<ProjectActionUnion> projectAction).payload;
-      let projectsListCopy: Project[] = [...state.projectsList];
-      projectsListCopy.push(createdProject);
+      let createdProject: Project = (<ProjectActionUnion>projectAction).payload;
+      let projectsListCopy1: Project[] = [...state.projectsList];
+      projectsListCopy1.push(createdProject);
 
-      return{
+      return {
         ...state,
         msgState: MsgState.ADDED,
-        projectsList: projectsListCopy
+        projectsList: projectsListCopy1,
       };
 
+    // create form to update project
+    case ProjectActionTypes.CREATE_PROJECT_FORM_UPDATE:
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADING,
+      };
+
+    case ProjectActionTypes.CREATE_PROJECT_FORM_UPDATE_SUCCESS:
+      let projectToUpdate: Project = (<ProjectActionUnion>projectAction)
+        .payload;
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADED,
+        currentProject: projectToUpdate,
+      };
+
+    case ProjectActionTypes.CREATE_PROJECT_FORM_UPDATE_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOAD_ERR,
+        serverErrorMsg: (<ProjectActionUnion>projectAction).payload,
+      };
+
+    //update project with form data
+
+    case ProjectActionTypes.UPDATE_PROJECT_WITH_FORM_DATA:
+      return {
+        ...state,
+        msgState: MsgState.DEFAULT_MSG,
+      };
+
+    case ProjectActionTypes.UPDATE_PROJECT_WITH_FORM_DATA_SUCCESS:
+      let updatedProject: Project = (<ProjectActionUnion>projectAction).payload;
+      let projectsListCopy2 = [...state.projectsList];
+      projectsListCopy2 = projectsListCopy2.map((project) =>
+        project.id == updatedProject.id ? updatedProject : project
+      );
+
+      return{
+        ...state,
+        msgState: MsgState.UPDATED,
+        projectsList : projectsListCopy2
+      }
+
+      // delete project
+      case ProjectActionTypes.DELETE_PROJECT:
+        return {
+          ...state,
+          msgState: MsgState.DELETE
+        }
+
+      case ProjectActionTypes.DELETE_PROJECT_SUCCESS:
+        let deletedProject = (<ProjectActionUnion> projectAction).payload;
+        let deletedProjectIndex = state.projectsList.indexOf(deletedProject);
+        let projectsListCopy3 : Project[] = [...state.projectsList];
+        projectsListCopy3 = projectsListCopy3.splice(deletedProjectIndex);
+
+        return{
+          ...state,
+          msgState: MsgState.DELETED,
+          projectsList: projectsListCopy3
+        };
+
+      case ProjectActionTypes.DELETE_PROJECT_ERROR:
+        return{
+          ...state,
+          msgState: MsgState.ERR,
+          serverErrorMsg: (<ProjectActionUnion>projectAction).payload
+        };
 
     default:
       return { ...state };

src/app/ngrx/users/effects.user.createuser.ts → src/app/ngrx/users/effects.user.create.ts

 import { catchError, map, mergeMap, Observable, of } from 'rxjs';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { UserActionTypes } from './user.action.types';
-import { User } from 'src/app/shared/models/user.model';
+import { User } from 'src/app/shared/models/user/user.model';
 
 @Injectable()
 export class UserCreateEffects{

src/app/ngrx/users/effects.user.getsearchuser.ts → src/app/ngrx/users/effects.user.get.search.ts

 import { Injectable } from '@angular/core';
 import { GetAllUsersActionError, GetAllUsersActionSuccess, GetUser_s_ProjectsError, GetUser_s_ProjectsSuccess, SearchUserActionError, SearchUserActionSuccess, UserActionUnion } from './users.actions';
 import { Observable, mergeMap, map, catchError, of, tap } from 'rxjs';
-import { User } from 'src/app/shared/models/user.model';
+import { User } from 'src/app/shared/models/user/user.model';
 import { UserActionTypes } from './user.action.types';
 
 @Injectable()

src/app/ngrx/users/effects.user.update.ts → src/app/ngrx/users/effects.user.update.delete.ts

 import { UsersService } from '../../shared/services/users.service';
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { User } from 'src/app/shared/models/user.model';
+import { User } from 'src/app/shared/models/user/user.model';
 import { UserActionTypes } from './user.action.types';
 import { Router } from '@angular/router';
 
 export class UserUpdateEffects {
   constructor(
     private usersService: UsersService,
-    private effectActions: Actions,
-    private router: Router
+    private effectActions: Actions
   ) {}
 
 

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

-import { UserActionUnion } from './users.actions';
-import { User } from "src/app/shared/models/user.model";
+import { User } from "src/app/shared/models/user/user.model";
 import { MsgState } from "../msg.state";
 
 //create a state

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

 import { Action } from '@ngrx/store';
-import { User } from 'src/app/shared/models/user.model';
+import { User } from 'src/app/shared/models/user/user.model';
 import { UserActionTypes } from './user.action.types';
 
 

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

 import { Router } from '@angular/router';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Observable, mergeMap, map, catchError, of, tap } from 'rxjs';
-import { User } from 'src/app/shared/models/user.model';
+import { User } from 'src/app/shared/models/user/user.model';
 import { UsersService } from 'src/app/shared/services/users.service';
 import { UserActionTypes } from './user.action.types';
 import {

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

 import { Action } from '@ngrx/store';
-import { User } from 'src/app/shared/models/user.model';
+import { User } from 'src/app/shared/models/user/user.model';
 import { MsgState } from '../msg.state';
 import { UserActionTypes } from './user.action.types';
 import { UserState } from './user.state';
         msgState: MsgState.DEFAULT_MSG
       };
 
-
     default:
       return { ...state };
   }

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

+<div class="container">
+  <div *ngIf="inputCompaniesList && inputCompaniesList.length>0">
+    <input
+      type="text"
+      class="form-control"
+      id="search"
+      placeholder="search a company by name"
+    />
+  </div>
+
+
+  <p-table
+    [value]="inputCompaniesList"
+    responsiveLayout="scroll"
+    styleClass="p-datatable-striped"
+    [paginator]="true"
+    [rows]="4"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="{first} - {last} of {totalRecords} companies"
+    [rowsPerPageOptions]="[4, 6, 8]"
+  >
+    <ng-template pTemplate="header">
+      <tr>
+        <th>ID</th>
+        <th>Name</th>
+        <th>type</th>
+        <th>Creaton date</th>
+        <th>action1</th>
+        <th>action2</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-company>
+      <tr>
+        <td>{{ company.id }}</td>
+        <td>{{ company.companyName }}</td>
+        <td>{{ company.companyType }}</td>
+        <td>{{ company.creationDate | date: "dd MM yyyy" }}</td>
+
+        <td>
+          <button class="btn">
+            <i
+              class="fa fa-pencil"
+              style="color: mediumturquoise"
+              (click)="onCompanyEdit(company)"
+            ></i>
+          </button>
+        </td>
+        <td>
+          <button class="btn">
+            <i
+              class="fa fa-trash"
+              style="color: red"
+              (click)="onCompanyDelete(company)"
+            ></i>
+          </button>
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
+</div>

src/app/pages/companies-manager/companies-management/companies-list/companies-list.component.spec.ts

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

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

+import { MsgState } from 'src/app/ngrx/msg.state';
+import { DeleteCompany } from './../../../../ngrx/companies/companies.actions';
+import { CompanyState } from './../../../../ngrx/companies/company.state';
+import { Router } from '@angular/router';
+import { Component, Input, OnInit } from '@angular/core';
+import { Company } from 'src/app/shared/models/company/company.model';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-companies-list',
+  templateUrl: './companies-list.component.html',
+  styleUrls: ['./companies-list.component.css'],
+})
+export class CompaniesListComponent implements OnInit {
+  constructor(
+    private router: Router,
+    private store: Store<{ companyReducerKey: CompanyState }>
+  ) {}
+
+  @Input() inputCompaniesList!: Company[];
+  msgState = MsgState;
+
+  ngOnInit(): void {}
+
+  onCompanyEdit(company: Company) {
+    this.router.navigate(['/company-update/' + company.id]);
+  }
+
+  onCompanyDelete(company: Company) {
+    if(window.confirm(this.msgState.CONFIRM_DEL)){
+      this.store.dispatch(new DeleteCompany(company));
+    }
+  }
+
+}

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

-<app-company-nav-bar></app-company-nav-bar>
+<div class="container">
+  <app-company-nav-bar></app-company-nav-bar>
+
+  <ng-container *ngIf="companyState"  [ngSwitch]="companyState.msgState">
+
+    <ng-container *ngSwitchCase="msgState.LOADING">
+      {{companyState.msgState}}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.ERR">
+      {{companyState.msgState}}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.LOADED">
+      <app-companies-list [inputCompaniesList]="companyState.companiesList"></app-companies-list>
+    </ng-container>
+
+  </ng-container>
+
+</div>

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

+import { MsgState } from './../../../ngrx/msg.state';
+import { CompanyState } from './../../../ngrx/companies/company.state';
 import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-companies-management',
 })
 export class CompaniesManagementComponent implements OnInit {
 
-  constructor() { }
+  constructor(private store: Store<{companyReducerKey: CompanyState}>) { }
+
+  companyState!: CompanyState;
+  msgState = MsgState;
 
   ngOnInit(): void {
+
+    this.store.subscribe( state =>{
+      this.companyState = state.companyReducerKey;
+    })
   }
 
 }

src/app/pages/companies-manager/companies-management/company-nav-bar/company-nav-bar.component.ts

+import { GetAllCompaniesAction } from './../../../../ngrx/companies/companies.actions';
+import { CompanyState } from './../../../../ngrx/companies/company.state';
 import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-company-nav-bar',
 })
 export class CompanyNavBarComponent{
 
+  constructor(private store: Store<{companyReducerKey: CompanyState}>){}
+
+  companyState!: CompanyState
+
   onCompanyCreate(){}
-  onCompaniesGetAll(){}
+
+  onCompaniesGetAll(){
+    this.store.dispatch(new GetAllCompaniesAction({}));
+    this.store.subscribe((state)=>{
+      this.companyState = state.companyReducerKey;
+    })
+  }
+
   onProjectsOfCampany(){}
 
 }

src/app/pages/companies-manager/companies-management/company-update/company-update.component.html

+<div class="container" *ngIf="companyFormGroup">
+  <ng-container *ngIf="companyState.msgState == msgState.FORM_LOADING">
+    {{companyState.msgState}}
+  </ng-container>
+  <ng-container *ngIf="companyState.msgState == msgState.FORM_LOAD_ERR">
+    {{companyState.msgState}}
+  </ng-container>
+
+  <ng-container *ngIf="companyState.msgState == msgState.FORM_LOADED">
+
+    <div class="card mt-3" style="width: 18rem">
+      <div class="card-header">Update company informations</div>
+
+      <div class="card-body">
+        <form [formGroup]="companyFormGroup"
+          (ngSubmit)="onCompanyUpdate(); companyFormGroup.reset()"
+        >
+          <div class="col-md-auto mb-3">
+            <label for="companyName">Company name</label>
+            <input
+              type="text"
+              formControlName="companyName"
+              class="form-control"
+              [ngClass]="{
+                'is-invalid':
+                companyFormGroup.controls['companyName'].touched &&
+                  !companyFormGroup.controls['companyName'].valid
+              }"
+            />
+            <div class="invalid-feedback">
+              <span
+                *ngIf="companyFormGroup.controls['companyName'].errors?.['required']"
+              >
+                required
+              </span>
+              <span
+                *ngIf="companyFormGroup.controls['companyName'].errors?.['minlength']"
+              >
+                min nbr chars 5
+              </span>
+            </div>
+          </div>
+
+          <div class="col-md-auto mb-3">
+            <label for="type">Company type</label>
+            <select formControlName="companyType" class="form-control">
+
+              <option *ngFor="let companyType of companyTypes | keyvalue " [ngValue]="companyType.value">
+                  {{companyType.value}}
+              </option>
+
+            </select>
+          </div>
+
+          <div class="text-center col-md-auto mt-3">
+            <button
+              class="btn btn-outline-primary"
+              type="submit" [disabled]="!companyFormGroup.valid"
+            >
+              update
+            </button>
+          </div>
+
+        </form>
+      </div>
+    </div>
+  </ng-container>
+
+
+  <ng-container *ngIf="companyState.msgState == msgState.UPDATED">
+    <div class="alert-success container p-3 m-3" style="width: 30em">
+      <span> {{ msgState.UPDATED }}</span> &nbsp;&nbsp;
+      <button class="btn btn-success" (click)="onUpdateOk()">OK</button>
+    </div>
+  </ng-container>
+
+</div>

src/app/pages/companies-manager/companies-management/company-update/company-update.component.spec.ts

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

src/app/pages/companies-manager/companies-management/company-update/company-update.component.ts

+import { CompanyType } from './../../../../shared/models/company/company.type';
+import { MsgState } from './../../../../ngrx/msg.state';
+import {
+  CreateFormToUpdateCompanyAction,
+  UpdateCompanyWithFormDataAction,
+} from './../../../../ngrx/companies/companies.actions';
+import { CompaniesService } from './../../../../shared/services/companies.service';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { CompanyState } from './../../../../ngrx/companies/company.state';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Company } from 'src/app/shared/models/company/company.model';
+
+@Component({
+  selector: 'app-company-update',
+  templateUrl: './company-update.component.html',
+  styleUrls: ['./company-update.component.css'],
+})
+export class CompanyUpdateComponent implements OnInit {
+  companyId: number;
+  companyFormGroup!: FormGroup;
+  companyState!: CompanyState;
+  msgState = MsgState;
+  companyTypes = CompanyType;
+
+  constructor(
+    activatedRoute: ActivatedRoute,
+    private store: Store<{ companyReducerKey: CompanyState }>,
+    private formBuilder: FormBuilder,
+    private companiesService: CompaniesService,
+    private router: Router
+  ) {
+    this.companyId = activatedRoute.snapshot.params['companyId'];
+  }
+
+  ngOnInit(): void {
+    this.companiesService
+      .getCompanyById(this.companyId)
+      .subscribe((company: Company) => {
+        this.store.dispatch(new CreateFormToUpdateCompanyAction(company));
+
+        this.store.subscribe((state) => {
+          this.companyState = state.companyReducerKey;
+          this.companyFormGroup = this.formBuilder.group({
+            id: [this.companyState.currentCompany?.id, Validators.required],
+            companyName: [
+              this.companyState.currentCompany?.companyName,
+              [Validators.required, Validators.minLength(5)],
+            ],
+            companyType: [
+              this.companyState.currentCompany?.companyType,
+              Validators.required,
+            ],
+            creationDate: [
+              this.companyState.currentCompany?.creationDate,
+              Validators.required,
+            ],
+          });
+        });
+      });
+  }
+
+  onCompanyUpdate() {
+    let company: Company = this.companyFormGroup.value;
+
+    if (window.confirm(this.msgState.CONFIRM_UPDATE)) {
+      this.store.dispatch(new UpdateCompanyWithFormDataAction(company));
+    }
+  }
+
+  onUpdateOk() {
+    this.router.navigate(['/companies-management']);
+  }
+}

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

+import { CompanyUpdateComponent } from './companies-management/company-update/company-update.component';
 import { CompaniesManagementComponent } from './companies-management/companies-management.component';
 import { CompanyNavBarComponent } from './companies-management/company-nav-bar/company-nav-bar.component';
 import { CompaniesCreateComponent } from './companies-management/companies-create/companies-create.component';
 
 const routes: Routes = [
   {path: 'company-create', component: CompaniesCreateComponent},
-  {path: 'companies-management', component: CompaniesManagementComponent}
+  {path: 'companies-management', component: CompaniesManagementComponent},
+  {path:'company-update/:companyId', component: CompanyUpdateComponent}
 ];
 
 @NgModule({

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

+import { ReactiveFormsModule } from '@angular/forms';
+import { TableModule } from 'primeng/table';
 import { ButtonModule } from 'primeng/button';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CompaniesCreateComponent } from './companies-management/companies-create/companies-create.component';
 import { CompanyNavBarComponent } from './companies-management/company-nav-bar/company-nav-bar.component';
 import { CompaniesManagementComponent } from './companies-management/companies-management.component';
+import { CompaniesListComponent } from './companies-management/companies-list/companies-list.component';
+import { CompanyUpdateComponent } from './companies-management/company-update/company-update.component';
 
 
 @NgModule({
   declarations: [
     CompaniesCreateComponent,
     CompanyNavBarComponent,
-    CompaniesManagementComponent
+    CompaniesManagementComponent,
+    CompaniesListComponent,
+    CompanyUpdateComponent
   ],
   imports: [
     CommonModule,
     CompaniesManagerRoutingModule,
-    ButtonModule
+    ButtonModule,
+    TableModule,
+    ReactiveFormsModule
   ]
 })
 export class CompaniesManagerModule { }

src/app/pages/projects-manager/projects-management/project-create/project-create.component.html

-<p>project-create works!</p>
+<div class="container" *ngIf="projectFormGroup">
+  <ng-container *ngIf="projectState" [ngSwitch]="projectState.msgState">
+    <ng-container *ngSwitchCase="msgState.FORM_LOADING">
+      {{ projectState.msgState }}
+    </ng-container>
 
+    <ng-container *ngSwitchCase="msgState.FORM_LOAD_ERR">
+      {{ projectState.msgState }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOADED">
+      <!-- create form -->
+      <div class="card mt-3">
+        <div class="card-header bg-light">
+          <b>Informations Card for Project to Create </b>
+        </div>
+        <div class="card-body">
+
+          <form
+        [formGroup]="projectFormGroup"
+        (ngSubmit)="onProjectSave(); projectFormGroup.reset()"
+      >
+        <div class="row">
+          <!-- 1ère colonne -->
+          <div class="col">
+            <div class="col-md-auto mb-3">
+              <label for="projectName">Project name</label>
+              <input
+                type="text"
+                formControlName="projectName"
+                class="form-control"
+                [ngClass]="{
+                  'is-invalid':
+                    projectFormGroup.controls['projectName'].touched &&
+                    !projectFormGroup.controls['projectName'].valid
+                }"
+              />
+              <div class="invalid-feedback">
+                <span
+                  *ngIf="projectFormGroup.controls['projectName'].errors?.['required']"
+                  >required</span
+                >
+                <span
+                  *ngIf="projectFormGroup.controls['projectName'].errors?.['minlength']"
+                  >min nbr chars 5</span
+                >
+                <span
+                  *ngIf="projectFormGroup.controls['projectName'].errors?.['maxlength']"
+                  >min nbr chars 20</span
+                >
+              </div>
+            </div>
+
+            <div class="col-md-auto mb-3">
+              <label for="priority">Priority</label>
+              <select formControlName="priority" class="form-control">
+                <option value="" disabled> select a priority</option>
+                <option
+                  *ngFor="let priority of priorities"
+                  [ngValue]="priority"
+                >
+                  {{ priority }}
+                </option>
+              </select>
+            </div>
+
+
+
+
+            <div class="col-md-auto mb-3">
+              <label for="companyId">Company ID</label>
+              <select formControlName="companyId" class="form-control">
+                <option value="" disabled>select company ID</option>
+                <option
+                  *ngFor="let company of companyState.companiesList" [ngValue]="company.id"
+
+                >
+                  {{ company.id }}
+                </option>
+              </select>
+            </div>
+          </div>
+
+          <!-- 2ème colonne -->
+          <div class="col">
+            <div class="col-md-auto mb-3">
+              <label for="description">Description</label>
+              <textarea
+                type="text"
+                formControlName="description"
+                class="form-control"
+                [ngClass]="{
+                  'is-invalid':
+                    projectFormGroup.controls['description'].touched &&
+                    !projectFormGroup.controls['description'].valid
+                }"
+
+                rows="2"
+              ></textarea>
+              <div class="invalid-feedback">
+                <span
+                  *ngIf="projectFormGroup.controls['description'].errors?.['required']"
+                  >required</span
+                >
+                <span
+                  *ngIf="projectFormGroup.controls['description'].errors?.['minlength']"
+                  >min desc chars 25</span
+                >
+              </div>
+            </div>
+
+            <div class="col-md-auto mb-3">
+              <label for="userId">User ID</label>
+              <select formControlName="userId" class="form-control">
+                <option value="" disabled>select user ID</option>
+                <option *ngFor="let user of userState.usersList" [ngValue]="user.id">
+                  {{ user.id }}
+                </option>
+              </select>
+            </div>
+
+            <div class="col-md-auto mb-3">
+              <label for="state">State</label>
+              <select formControlName="state" class="form-control">
+                <option value="" desabled>
+                  select project state
+                </option>
+                <option
+                  *ngFor="let state of projectMsgState | keyvalue"
+                  [ngValue]="state.value"
+                >
+                  {{ state.value }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="text-center col-md-auto mt-3">
+          <button
+            class="btn btn-outline-primary"
+            type="submit"
+            [disabled]="(!projectFormGroup.valid)"
+          >
+            save
+          </button>
+          &nbsp;
+          <button class="btn btn-outline-primary" type="reset">reset</button>
+        </div>
+      </form>
+
+        </div>
+      </div>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.ADDED">
+      <div class="alert-success container p-3 m-3" style="width: 30em">
+        <button class="btn btn-success" (click)="onSaveOk()">
+          {{ projectState.msgState }}
+        </button>
+      </div>
+    </ng-container>
+  </ng-container>
+</div>

src/app/pages/projects-manager/projects-management/project-create/project-create.component.ts

-
-import { UserState } from 'src/app/ngrx/users/user.state';
+import { GetAllCompaniesAction } from './../../../../ngrx/companies/companies.actions';
+import { CompanyState } from './../../../../ngrx/companies/company.state';
+import { Router } from '@angular/router';
+import { ProjectsService } from './../../../../shared/services/projects.service';
+import { MsgState } from './../../../../ngrx/msg.state';
+import { DatePipe } from '@angular/common';
 import { GetAllUsersAction } from './../../../../ngrx/users/users.actions';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { CreateProjectFormAddAction } from './../../../../ngrx/projects/projects.actions';
+import { CreateProjectFormAddAction, SaveProjectFormDataAction } from './../../../../ngrx/projects/projects.actions';
 import { ProjectState } from './../../../../ngrx/projects/project.state';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { DatePipe } from '@angular/common';
+import { Priority } from 'src/app/shared/models/project/project.priority';
+import { ProjectMsgState } from 'src/app/shared/models/project/project.msgstate';
+import { UserState } from 'src/app/ngrx/users/user.state';
+import { Project } from 'src/app/shared/models/project/project.model';
 
 @Component({
   selector: 'app-project-create',
   styleUrls: ['./project-create.component.css'],
 })
 export class ProjectCreateComponent implements OnInit {
-
   projectFormGroup!: FormGroup;
+  projectState!: ProjectState;
+
+  priorities = [
+    Priority.PRIORITY1,
+    Priority.PRIORITY2,
+    Priority.PRIORITY3,
+    Priority.PRIORITY4,
+    Priority.PRIORITY5,
+  ];
+
+  projectMsgState = ProjectMsgState;
+  msgState = MsgState;
+
+  userState!: UserState;
+  companyState!: CompanyState;
 
   constructor(
+    private fb: FormBuilder,
+    private store: Store<{
+      projectReducerKey: ProjectState,
+      userReducerKey: UserState,
+      companyReducerKey: CompanyState
+    }>,
+    private datePipe: DatePipe,
+    private projectsServices: ProjectsService,
+    private router: Router
   ) {}
 
   ngOnInit(): void {
 
+    this.store.dispatch(new GetAllUsersAction({}));
+    this.store.subscribe(
+      (userState) => (this.userState = userState.userReducerKey)
+    );
+
+    this.store.dispatch(new GetAllCompaniesAction({}));
+    this.store.subscribe(companyState=>(this.companyState = companyState.companyReducerKey));
+
+    this.store.dispatch(new CreateProjectFormAddAction({}));
+    this.store.subscribe((projectState) => {
+      this.projectState = projectState.projectReducerKey;
+
+      this.projectFormGroup = this.fb.group({
+        id: [0, Validators.required],
+        projectName: [
+          'Project-',
+          [
+            Validators.required,
+            Validators.minLength(5),
+            Validators.maxLength(15),
+          ],
+        ],
+        priority: [this.priorities[0], Validators.required],
+        creationDate: [
+          this.datePipe.transform(new Date(), 'MM dd yyyy'),
+          Validators.required,
+        ],
+        companyId: ['', Validators.required],
+        description: ['', [Validators.required, Validators.minLength(20)]],
+        userId: ['', Validators.required],
+        state: [this.projectMsgState.INPROGRESS, Validators.required]
+      });
+    });
   }
 
-  onProjectCreate(){}
-  onNewProject(){}
-  tryEgain(){}
+  onProjectSave(){
+
+    let project: Project = this.projectFormGroup.value;
+    let projectName: string = project.projectName;
+    this.projectsServices.getProjectByName(projectName).subscribe((projects: Project[])=>{
+      if(projects.length>0){
+        alert(projectName+' '+this.msgState.EXIST);
+        return;
+      }
+      else{
+        if(window.confirm(this.msgState.CONFIRM_ADD)){
+          this.store.dispatch(new SaveProjectFormDataAction(project));
+        }
+      }
+    })
+
+  }
+  onSaveOk() {
+    this.router.navigateByUrl('/projects-management')
+  }
+  tryEgain() {
+    this.router.navigateByUrl('/project-create')
+  }
 }

src/app/pages/projects-manager/projects-management/project-nav-bar/project-nav-bar.component.ts

   onProjectsGetAll() {
     this.store.dispatch(new GetAllProjectsAction({}));
   }
+
   onProjectsVsUsersGet() {}
+
   onProjectCompanyAssociated() {}
 }

src/app/pages/projects-manager/projects-management/project-update/project-update.component.html

+<div class="container" *ngIf="projectFormGroup">
+  <ng-container *ngIf="projectState" [ngSwitch]="projectState.msgState">
+    <ng-container *ngSwitchCase="msgState.FORM_LOADING">
+      {{ projectState.msgState }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOAD_ERR">
+      {{ projectState.msgState }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOADED">
+      <!-- create form -->
+
+      <div class="card mt-3">
+        <div class="card-header bg-light">
+          >> Project ID: <b>{{ projectState.currentProject?.id }}</b>, User ID:
+            <b>{{ projectState.currentProject?.userId }}</b>, Company ID:
+            <b>{{ projectState.currentProject?.companyId }}</b>
+
+        </div>
+        <div class="card-body">
+          <form
+            [formGroup]="projectFormGroup"
+            (ngSubmit)="onProjectUpdate(); projectFormGroup.reset()"
+          >
+            <div class="row">
+              <!-- 1ère colonne -->
+              <div class="col">
+                <div class="col-md-auto mb-3">
+                  <label for="projectName">Project name</label>
+                  <input
+                    type="text"
+                    formControlName="projectName"
+                    class="form-control"
+                    [ngClass]="{
+                      'is-invalid':
+                        projectFormGroup.controls['projectName'].touched &&
+                        !projectFormGroup.controls['projectName'].valid
+                    }"
+                  />
+                  <div class="invalid-feedback">
+                    <span
+                      *ngIf="projectFormGroup.controls['projectName'].errors?.['required']"
+                      >required</span
+                    >
+                    <span
+                      *ngIf="projectFormGroup.controls['projectName'].errors?.['minlength']"
+                      >min nbr chars 5</span
+                    >
+                    <span
+                      *ngIf="projectFormGroup.controls['projectName'].errors?.['maxlength']"
+                      >min nbr chars 20</span
+                    >
+                  </div>
+                </div>
+
+                <div class="col-md-auto mb-3">
+                  <label for="priority">Priority</label>
+                  <select formControlName="priority" class="form-control">
+                    <option value="Choose a priority" disabled>
+                      Choose a priority
+                    </option>
+                    <option
+                      *ngFor="let priority of priorities"
+                      [ngValue]="priority"
+                    >
+                      {{ priority }}
+                    </option>
+                  </select>
+                </div>
+              </div>
+
+              <!-- 2ème colonne -->
+              <div class="col">
+                <div class="col-md-auto mb-3">
+                  <label for="description">Description</label>
+                  <input
+                    type="text"
+                    formControlName="description"
+                    class="form-control"
+                    [ngClass]="{
+                      'is-invalid':
+                        projectFormGroup.controls['description'].touched &&
+                        !projectFormGroup.controls['description'].valid
+                    }"
+                  />
+                  <div class="invalid-feedback">
+                    <span
+                      *ngIf="projectFormGroup.controls['description'].errors?.['required']"
+                      >required</span
+                    >
+                    <span
+                      *ngIf="projectFormGroup.controls['description'].errors?.['minlength']"
+                      >min desc chars 25</span
+                    >
+                  </div>
+                </div>
+
+                <div class="col-md-auto mb-3">
+                  <label for="state">State</label>
+                  <select formControlName="state" class="form-control">
+                    <option
+                      *ngFor="let state of projectMsgState | keyvalue"
+                      [ngValue]="state.value"
+                    >
+                      {{ state.value }}
+                    </option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-md-auto mb-3">
+              <label for="userId"
+                >ReAssign project to another user, choose user ID</label
+              >
+              <select formControlName="userId" class="form-control">
+                <option [ngValue]="null" desabled>choose user ID</option>
+                <option
+                  *ngFor="let user of userState.usersList"
+                  [ngValue]="user.id"
+                >
+                  {{ user.id }}
+                </option>
+              </select>
+            </div>
+
+            <div class="text-center col-md-auto mt-3">
+              <button
+                class="btn btn-outline-primary"
+                type="submit"
+                [disabled]="!projectFormGroup.valid"
+              >
+                update
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.UPDATED">
+      <div class="alert-success container p-3 m-3" style="width: 30em">
+        <button class="btn btn-success" (click)="onUpdateOk()">
+          {{ projectState.msgState }}
+        </button>
+      </div>
+    </ng-container>
+  </ng-container>
+</div>

src/app/pages/projects-manager/projects-management/project-update/project-update.component.spec.ts

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

src/app/pages/projects-manager/projects-management/project-update/project-update.component.ts

+import { UpdateProjectWithFormDataAction } from './../../../../ngrx/projects/projects.actions';
+import { GetAllUsersAction } from 'src/app/ngrx/users/users.actions';
+import { UserState } from './../../../../ngrx/users/user.state';
+import { ProjectMsgState } from '../../../../shared/models/project/project.msgstate';
+import { Priority } from '../../../../shared/models/project/project.priority';
+import { MsgState } from './../../../../ngrx/msg.state';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ProjectsService } from './../../../../shared/services/projects.service';
+import { ProjectState } from './../../../../ngrx/projects/project.state';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { CreateProjectFormUpdateAction } from 'src/app/ngrx/projects/projects.actions';
+
+
+@Component({
+  selector: 'app-project-update',
+  templateUrl: './project-update.component.html',
+  styleUrls: ['./project-update.component.css'],
+})
+export class ProjectUpdateComponent implements OnInit {
+  projectId!: number;
+  projectState!: ProjectState;
+  projectFormGroup!: FormGroup;
+  msgState = MsgState;
+
+  constructor(
+    activatedRoute: ActivatedRoute,
+    private projectsService: ProjectsService,
+    private store: Store<{
+      projectReducerKey: ProjectState;
+      userReducerKey: UserState;
+    }>,
+    private fb: FormBuilder,
+    private router: Router
+  ) {
+    this.projectId = activatedRoute.snapshot.params['projectId'];
+  }
+
+  priorities = [
+    Priority.PRIORITY1,
+    Priority.PRIORITY2,
+    Priority.PRIORITY3,
+    Priority.PRIORITY4,
+    Priority.PRIORITY5,
+  ];
+
+  projectMsgState = ProjectMsgState;
+
+  userState!: UserState;
+
+  ngOnInit(): void {
+    this.store.dispatch(new GetAllUsersAction({}));
+    this.store
+      .select('userReducerKey')
+      .subscribe((userState) => (this.userState = userState));
+
+    this.projectsService.getProjectById(this.projectId).subscribe((project) => {
+      this.store.dispatch(new CreateProjectFormUpdateAction(project));
+
+      this.store.subscribe((state) => {
+        this.projectState = state.projectReducerKey;
+
+        this.projectFormGroup = this.fb.group({
+          id: [this.projectState.currentProject?.id, Validators.required],
+          projectName: [
+            this.projectState.currentProject?.projectName,
+            [
+              Validators.required,
+              Validators.minLength(5),
+              Validators.maxLength(20),
+            ],
+          ],
+          priority: [
+            this.projectState.currentProject?.priority,
+            Validators.required,
+          ],
+          creationDate: [
+            this.projectState.currentProject?.creationDate,
+            Validators.required,
+          ],
+          companyId: [
+            this.projectState.currentProject?.companyId,
+            Validators.required,
+          ],
+          description: [
+            this.projectState.currentProject?.description,
+            [Validators.required, Validators.minLength(15)],
+          ],
+          userId: [
+            this.projectState.currentProject?.userId,
+            Validators.required,
+          ],
+          state: [this.projectState.currentProject?.state, Validators.required],
+        });
+      });
+    });
+  }
+
+  onProjectUpdate() {
+    this.store.dispatch(
+      new UpdateProjectWithFormDataAction(this.projectFormGroup.value)
+    );
+  }
+
+  onUpdateOk() {
+    this.router.navigate(['/projects-management']);
+  }
+}

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

         <td>{{ project.state }}</td>
         <td>
           <button class="btn">
-            <i class="fa fa-pencil" style="color:mediumturquoise"></i>
+            <i class="fa fa-pencil" style="color:mediumturquoise" (click)="onEditProject(project)"></i>
           </button>
         </td>
         <td>
           <button class="btn">
-            <i class="fa fa-trash" style="color:red"></i>
+            <i class="fa fa-trash" style="color:red" (click)="onProjectDelete(project)"></i>
           </button>
         </td>
       </tr>

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

+import { MsgState } from 'src/app/ngrx/msg.state';
+import { Store } from '@ngrx/store';
+import { Router } from '@angular/router';
+import { Project } from './../../../../shared/models/project/project.model';
 import { ProjectState } from './../../../../ngrx/projects/project.state';
 import { Component, Input, OnInit } from '@angular/core';
+import { DeleteProjectAction } from 'src/app/ngrx/projects/projects.actions';
 
 @Component({
   selector: 'app-projects-list',
   templateUrl: './projects-list.component.html',
-  styleUrls: ['./projects-list.component.css']
+  styleUrls: ['./projects-list.component.css'],
 })
 export class ProjectsListComponent implements OnInit {
-
-  constructor() { }
+  constructor(
+    private router: Router,
+    private store: Store<{ projectReducerKey: ProjectState }>
+  ) {}
 
   @Input() inputProjectState!: ProjectState;
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
+
+  onEditProject(project: Project) {
+    this.router.navigate(['/project-update/' + project.id]);
   }
 
+  onProjectDelete(project: Project) {
+    if(window.confirm(MsgState.CONFIRM_DEL)){
+      this.store.dispatch(new DeleteProjectAction(project));
+    }
+  }
 }

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

 })
 export class ProjectsManagementComponent implements OnInit {
 
-  constructor(private store: Store<{productReducerKey: ProjectState}>) { }
+  constructor(private store: Store<{projectReducerKey: ProjectState}>) { }
 
   projectState$!:Observable<ProjectState>
 
 
   ngOnInit(): void {
 
-    this.projectState$= this.store.select("productReducerKey");
+    this.projectState$= this.store.select("projectReducerKey");
   }
 
 }

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

+import { ProjectUpdateComponent } from './projects-management/project-update/project-update.component';
 import { ProjectsManagementComponent } from './projects-management/projects-management.component';
-import { ProjectNavBarComponent } from './projects-management/project-nav-bar/project-nav-bar.component';
 import { ProjectCreateComponent } from './projects-management/project-create/project-create.component';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
-  {path:'project-create', component: ProjectCreateComponent},
-  {path: 'projects-management', component:ProjectsManagementComponent}
+  { path: 'project-create', component: ProjectCreateComponent },
+  { path: 'projects-management', component: ProjectsManagementComponent },
+  { path: 'project-update/:projectId', component: ProjectUpdateComponent },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class ProjectsManagerRoutingModule { }
+export class ProjectsManagerRoutingModule {}

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

 import { ProjectNavBarComponent } from './projects-management/project-nav-bar/project-nav-bar.component';
 import { ProjectsManagementComponent } from './projects-management/projects-management.component';
 import { ProjectsListComponent } from './projects-management/projects-list/projects-list.component';
+import { ProjectUpdateComponent } from './projects-management/project-update/project-update.component';
+import { ReactiveFormsModule } from '@angular/forms';
 
 
 
     ProjectCreateComponent,
     ProjectNavBarComponent,
     ProjectsManagementComponent,
-    ProjectsListComponent
+    ProjectsListComponent,
+    ProjectUpdateComponent
 
   ],
   imports: [
     CommonModule,
     ProjectsManagerRoutingModule,
     ButtonModule,
-    TableModule
+    TableModule,
+    ReactiveFormsModule
   ],
   providers:[
-    DatePipe
   ]
 })
 

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

                     </div>
 
                     <div class="col-md-auto mb-3">
-                      <label for="city">City</label>
+                      <label for="ville">City</label>
                       <input
                         type="text"
                         class="form-control"
                         [ngClass]="{
                           'is-invalid':
                             userFormGroup.controls['address'].get('ville')?.touched &&
-                            !userFormGroup.controls['address'].get('vile')?.valid
+                            !userFormGroup.controls['address'].get('ville')?.valid
                         }"
                       />
                       <div class="invalid-feedback">
                           >max chars 15
                         </span>
                       </div>
+
                     </div>
                   </div>
                 </div>

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

+import { DatePipe } from '@angular/common';
 import { UsersService } from '../../../../shared/services/users.service';
-import { User } from '../../../../shared/models/user.model';
+import { User } from '../../../../shared/models/user/user.model';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import {
   CreateFormUserAddAction,
   styleUrls: ['./user-create.component.css'],
 })
 export class UserCreateComponent implements OnInit {
-
   userFormGroup!: FormGroup;
 
   constructor(
     private store: Store<{ userReducerKey: UserState }>,
     private fb: FormBuilder,
-    private usersService: UsersService
+    private usersService: UsersService,
+    private datePipe: DatePipe
   ) {}
   userState!: UserState;
   readonly msgState = MsgState;
 
   ngOnInit(): void {
-
     this.store.dispatch(new CreateFormUserAddAction({}));
 
     this.store.subscribe((myState) => {
       this.userState = myState.userReducerKey;
 
-        this.userFormGroup = this.fb.group({
-          id: [0, Validators.required],
-          firstname: [
+      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(15),
+              Validators.maxLength(25),
             ],
           ],
-          lastname: [
+          bp: [0, [Validators.required, Validators.min(1)]],
+          ville: [
             '',
             [
               Validators.required,
               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),
-              ],
+          pays: [
+            '',
+            [
+              Validators.required,
+              Validators.minLength(3),
+              Validators.maxLength(15),
             ],
-          }),
-        });
+          ],
+        }),
+        createDate: [this.datePipe.transform(new Date(), 'MM dd yyyy')],
+      });
     });
   }
 
   onUserSave() {
+    let user: User = this.userFormGroup.value;
+    let lastname: string = user.lastname;
 
-   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;
-     }
-     else{
-
-      if (window.confirm(MsgState.CONFIRM_ADD+' '+user.firstname+' '+user.lastname)) {
-        this.store.dispatch(new SaveUserFormAddAction(user));
+    this.usersService.getUserByName(lastname).subscribe((users: User[]) => {
+      if (users.length > 0) {
+        alert(lastname + ' ' + this.msgState.EXIST);
+        return;
+      } else {
+        if (
+          window.confirm(
+            MsgState.CONFIRM_ADD + ' ' + user.firstname + ' ' + user.lastname
+          )
+        ) {
+          this.store.dispatch(new SaveUserFormAddAction(user));
+        }
       }
-     }
-   });
+    });
   }
 
   onNewUser() {

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

 import { UserState } from './../../../../ngrx/users/user.state';
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { User } from 'src/app/shared/models/user.model';
+import { User } from 'src/app/shared/models/user/user.model';
 
 @Component({
   selector: 'app-user-s-projects',
     this.store.dispatch(new GetUser_S_Projects({}));
 
     this.usersState$= this.store.select("userReducerKey");
-    console.log(this.usersState$)
-
   }
 }

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

 <div class="container" *ngIf="userFormGrp">
-
   <ng-container *ngIf="userState">
+    <ng-container *ngIf="userState.msgState == msg.FORM_LOADING">
+      msg.FORM_LOADING
+    </ng-container>
 
-    <ng-container *ngIf="userState.msgState==msg.ERR">
+    <ng-container *ngIf="userState.msgState == msg.FORM_LOAD_ERR">
       <div class="alert-danger container">
-        {{msg.ERR}}
+        {{ msg.FORM_LOAD_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>
+    <ng-container *ngIf="userState.msgState == msg.FORM_LOAD_ERR">
+      <div class="alert-danger container">
+        {{ msg.FORM_LOAD_ERR }}
       </div>
     </ng-container>
 
-    <ng-container *ngIf="userState.msgState==msg.FORM_LOADED">
-
+    <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-header bg-light">
+          User informations to modify: <b>ID of user:
+          {{ userState.currentUser?.id }}</b>
+        </div>
         <div class="card-body">
-          <form [formGroup]="userFormGrp" (ngSubmit)="onUserUpdate(); userFormGrp.reset()">
-
+          <form
+            [formGroup]="userFormGrp"
+            (ngSubmit)="onUserUpdate(); userFormGrp.reset()"
+          >
             <div class="row">
-
               <div class="col card">
-
                 <div class="col-md-auto mb-3">
                   <label for="id">Firstname</label>
                   <input
                     formControlName="firstname"
                     [ngClass]="{
                       'is-invalid':
-                      userFormGrp.controls['firstname'].touched &&
+                        userFormGrp.controls['firstname'].touched &&
                         !userFormGrp.controls['firstname'].valid
                     }"
                   />
                     formControlName="lastname"
                     [ngClass]="{
                       'is-invalid':
-                      userFormGrp.controls['lastname'].touched &&
+                        userFormGrp.controls['lastname'].touched &&
                         !userFormGrp.controls['lastname'].valid
                     }"
                   />
                   />
 
                   <div class="invalid-feedback">
-                    <span *ngIf="userFormGrp.controls['email'].errors?.['required']">
+                    <span
+                      *ngIf="userFormGrp.controls['email'].errors?.['required']"
+                    >
                       required
                     </span>
-                    <span *ngIf="userFormGrp.controls['email'].errors?.['email']">
+                    <span
+                      *ngIf="userFormGrp.controls['email'].errors?.['email']"
+                    >
                       not valid
                     </span>
                   </div>
                 </div>
-
               </div>
 
               <div class="col card">
-
                 <div formGroupName="address">
                   <div class="col-md-auto mb-3">
                     <label for="numRue">Street number</label>
                       formControlName="numRue"
                       [ngClass]="{
                         'is-invalid':
-                          userFormGrp.controls['address'].get('numRue')?.touched &&
+                          userFormGrp.controls['address'].get('numRue')
+                            ?.touched &&
                           !userFormGrp.controls['address'].get('numRue')?.valid
                       }"
                     />
                       formControlName="nomRue"
                       [ngClass]="{
                         'is-invalid':
-                          userFormGrp.controls['address'].get('nomRue')?.touched &&
+                          userFormGrp.controls['address'].get('nomRue')
+                            ?.touched &&
                           !userFormGrp.controls['address'].get('nomRue')?.valid
                       }"
                     />
                       formControlName="ville"
                       [ngClass]="{
                         'is-invalid':
-                           userFormGrp.controls['address'].get('ville')?.touched &&
+                          userFormGrp.controls['address'].get('ville')
+                            ?.touched &&
                           !userFormGrp.controls['address'].get('vile')?.valid
                       }"
                     />
                       formControlName="pays"
                       [ngClass]="{
                         'is-invalid':
-                          userFormGrp.controls['address'].get('pays')?.touched &&
+                          userFormGrp.controls['address'].get('pays')
+                            ?.touched &&
                           !userFormGrp.controls['address'].get('pays')?.valid
                       }"
                     />
                     </div>
                   </div>
                 </div>
-
               </div>
-
             </div>
 
             <div class="text-center col-md-auto mt-3">
           </form>
         </div>
       </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>
-
 </div>

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

     <th>Lastname</th>
     <th>Address</th>
     <th>Email</th>
+    <th>Creation Date</th>
     <th>action1</th>
     <th>action2</th>
   </tr>
       </ul>
     </td>
     <td>{{ user.email }}</td>
+    <td>{{ user.creationDate }}</td>
     <td>
       <button class="btn">
         <i

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

 import {
   DeleteUsersAction,
 } from './../../../../ngrx/users/users.actions';
-import { User } from 'src/app/shared/models/user.model';
+import { User } from 'src/app/shared/models/user/user.model';
 import { Input } from '@angular/core';
 import { Component } from '@angular/core';
 import { UserState } from 'src/app/ngrx/users/user.state';

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

 import { Component, OnInit } from '@angular/core';
 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';
+import { User } from 'src/app/shared/models/user/user.model';
 
 @Component({
   selector: 'app-users-management',

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

 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { ButtonModule } from "primeng/button";
 import { UsersManagerRoutingModule } from './users-manager-routing.module';
 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';
-import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { StoreModule } from '@ngrx/store';
-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';
 import { UserSProjectsComponent } from './users-management/user-s-projects/user-s-projects.component';
-import { UserCreateEffects } from 'src/app/ngrx/users/effects.user.createuser';
-import { UserGetSearchEffects } from 'src/app/ngrx/users/effects.user.getsearchuser';
-import { UserUpdateEffects } from 'src/app/ngrx/users/effects.user.update';
-import { ProjectCreateEffects } from 'src/app/ngrx/projects/effects.projectcreate';
 
 
 
     TableModule,
     FormsModule,
     ReactiveFormsModule
-  ]
+  ],
 })
 export class UsersManagerModule { }

src/app/shared/models/project.model.ts → src/app/shared/models/project/project.model.ts

 import { DatePipe } from '@angular/common';
 import { Priority } from './project.priority';
-import { State } from './project.state';
+import { ProjectMsgState } from './project.msgstate';
 
 export class Project{
   id!: number;
   companyId!: number;
   description!: string;
   userId!: number;
-  state!:State ;
+  state!:ProjectMsgState ;
 }

src/app/shared/models/project.state.ts → src/app/shared/models/project/project.msgstate.ts

-export enum State {
+export enum ProjectMsgState {
   END = "END",
   INPROGRESS = "IN PROGRESS"
 }

src/app/shared/models/user.model.ts → src/app/shared/models/user/user.model.ts

+import { DatePipe } from '@angular/common';
 import { Address } from './address.model';
 export class User{
   id!:number;
   lastname!: string;
   email!: string;
   address: Address = new Address();
+  createDate!: DatePipe
 }

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

 import { Injectable } from '@angular/core';
 import { catchError, Observable, throwError } from 'rxjs';
 import { environment } from 'src/environments/environment';
-import { Company } from '../models/company.model';
+import { Company } from '../models/company/company.model'
 
 @Injectable({
   providedIn: 'root'

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

 import { Injectable, OnInit } from '@angular/core';
 import { catchError, Observable, retry, throwError } from 'rxjs';
 import { environment } from 'src/environments/environment';
-import { Project } from '../models/project.model';
+import { Project } from '../models/project/project.model';
 
 @Injectable({
   providedIn: 'root',

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

-import { User } from 'src/app/shared/models/user.model';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { catchError, Observable, throwError } from 'rxjs';
 import { environment } from 'src/environments/environment';
+import { User } from '../models/user/user.model';
 
 @Injectable({
   providedIn: 'root',