commit modif

db_users_projects_companies.json

       "id": 1,
       "companyName": "NATAN",
       "companyType": "PROSPECT",
-      "creationDate": "05 17 2022"
-    },
-    {
-      "id": 2,
-      "companyName": "Company-1",
-      "companyType": "CLIENT",
-      "creationDate": "05 17 2022"
+      "creationDate": "01 01 2019"
     },
     {
       "id": 4,
       "companyName": "Company-3",
       "companyType": "CLIENT",
       "creationDate": "05 18 2022"
+    },
+    {
+      "id": 5,
+      "companyName": "Company-1",
+      "companyType": "CLIENT",
+      "creationDate": "06 09 2022"
+    },
+    {
+      "id": 6,
+      "companyName": "Company-2",
+      "companyType": "CLIENT",
+      "creationDate": "06 09 2022"
+    },
+    {
+      "id": 7,
+      "companyName": "Company-5",
+      "companyType": "CLIENT",
+      "creationDate": "06 09 2022"
+    },
+    {
+      "id": 8,
+      "companyName": "company-6",
+      "companyType": "PROSPECT",
+      "creationDate": "06 09 2022"
+    },
+    {
+      "id": 9,
+      "companyName": "Company-7",
+      "companyType": "PROSPECT",
+      "creationDate": "06 09 2022"
+    },
+    {
+      "id": 10,
+      "companyName": "Company-8",
+      "companyType": "CLIENT",
+      "creationDate": "06 09 2022"
+    },
+    {
+      "id": 11,
+      "companyName": "Company-9",
+      "companyType": "PROSPECT",
+      "creationDate": "06 09 2022"
     }
   ],
   "users": [
       "email": "david.touitou@natan.fr",
       "address": {
         "numRue": 45,
-        "nomRue": "Rue Notre Dame de Paris",
+        "nomRue": "Rue Notre Dame des Victoires",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
       "email": "nadhir.ben-mohamed@natan.fr",
       "address": {
         "numRue": 45,
-        "nomRue": "Rue Notre Dame de Paris",
+        "nomRue": "Rue Notre Dame des Victoires",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
     {
       "address": {
         "numRue": 44,
-        "nomRue": "Rue Notre Dame de Paris",
+        "nomRue": "Rue Notre Dame des Victoires",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
     {
       "address": {
         "numRue": 44,
-        "nomRue": "Rue Notre Dame de Paris",
+        "nomRue": "Rue Notre Dame des Victoires",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
     {
       "address": {
         "numRue": 44,
-        "nomRue": "Rue Notre Dame de Paris",
-        "bp": 75002,
-        "ville": "Paris",
-        "pays": "France"
-      },
-      "creationDate": "05 15 2022",
-      "firstname": "Syrine",
-      "lastname": "Ait Haddad",
-      "email": "syrine.ait-haddadene@natan.fr",
-      "id": 8
-    },
-    {
-      "address": {
-        "numRue": 44,
-        "nomRue": "Rue Notre Dame de Paris",
+        "nomRue": "Rue Notre Dame des Victoires",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
     {
       "address": {
         "numRue": 44,
-        "nomRue": "Rue Notre Dame de Paris",
+        "nomRue": "Rue Notre Dame des Victoires",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
       "email": "charles.benassaya@natan.fr",
       "address": {
         "numRue": 44,
-        "nomRue": "Rue Notre Dame de Paris",
+        "nomRue": "Rue Notre Dame des Victoires",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
       "email": "placide.nduwayo@natan.fr",
       "address": {
         "numRue": 44,
-        "nomRue": "Rue Notre Dame de Paris",
+        "nomRue": "Rue Notre Dame des Victoires",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
       "email": "naolie.boudouka-tete@natan.fr",
       "address": {
         "numRue": 44,
-        "nomRue": "Rue Notre Dame de Paris",
+        "nomRue": "Rue Notre Dame des Victoires",
         "bp": 75002,
         "ville": "Paris",
         "pays": "France"
       "email": "rayene.bessrour@natan.fr",
       "address": {
         "numRue": 44,
-        "nomRue": "Rue Notre Dame de Paris",
+        "nomRue": "Rue Notre Dame des Victoires",
         "bp": 75004,
         "ville": "Paris",
         "pays": "France"
       "creationDate": "05 15 2022"
     },
     {
-      "id": 17,
-      "firstname": "user test",
-      "lastname": "user test",
-      "email": "user.test@test",
+      "id": 19,
+      "firstname": "Syrine",
+      "lastname": "Ait Haddadene",
+      "email": "syrine.ait-haddadene@natan.fr",
       "address": {
-        "numRue": 952,
-        "nomRue": "user test",
-        "bp": 45,
-        "ville": "user test",
-        "pays": "user test"
+        "numRue": 44,
+        "nomRue": "Rue Notre Dame des Victoires",
+        "bp": 75002,
+        "ville": "Paris",
+        "pays": "France"
       },
-      "creationDate": "05 15 2022"
+      "creationDate": "06 09 2022"
     },
     {
-      "id": 18,
-      "firstname": "test2",
-      "lastname": "test2",
-      "email": "test2@test2",
+      "id": 20,
+      "firstname": "test",
+      "lastname": "test",
+      "email": "test@test",
       "address": {
-        "numRue": 121,
-        "nomRue": "test2",
-        "bp": 120,
-        "ville": "test2",
-        "pays": "test2"
+        "numRue": 21,
+        "nomRue": "test",
+        "bp": 21,
+        "ville": "test",
+        "pays": "test"
       },
-      "createDate": "06 07 2022"
+      "creationDate": "06 09 2022"
     }
   ],
   "projects": [
     {
-      "id": 2,
-      "projectName": "Project-2",
-      "priority": 3,
-      "creationDate": "03 06 2022",
-      "companyId": 2,
-      "description": "Project description for action",
-      "userId": 12,
-      "state": "END"
-    },
-    {
       "id": 3,
       "projectName": "Project-3",
       "priority": 1,
       "projectName": "Project-test",
       "priority": 1,
       "creationDate": "06 08 2022",
-      "companyId": 4,
+      "companyId": 11,
       "description": "project for test adding ",
       "userId": 12,
       "state": "IN PROGRESS"
+    },
+    {
+      "id": 7,
+      "projectName": "Project-1",
+      "priority": 1,
+      "creationDate": "06 09 2022",
+      "companyId": 8,
+      "description": "Project description here",
+      "userId": 3,
+      "state": "IN PROGRESS"
     }
   ]
 }

src/app/app.component.html

 <app-base-nav-menu></app-base-nav-menu>
-<!-- <router-outlet></router-outlet> -->
+<router-outlet></router-outlet>

src/app/app.module.ts

+import { CompanyCreateEffects } from './ngrx/companies/effects.company.create';
 import { CompanyUpdateDeleteEffects } from './ngrx/companies/effects.company.update.delete';
-import { CompanyGetSearchEffects } from './ngrx/companies/effects.company.get.search';
+import { CompanyGetSearchEffects } from './ngrx/companies/effects.company.get';
 import { BaseNavMenuComponent } from './pages/base-nav-menu/base-nav-menu.component';
 import { FormsModule } from '@angular/forms';
 import { AccueilModule } from './pages/accueil/accueil.module';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { UserCreateEffects } from './ngrx/users/effects.user.create';
-import { UserGetSearchEffects } from './ngrx/users/effects.user.get.search';
+import { UserGetSearchEffects } from './ngrx/users/effects.user.get';
 import { UserUpdateEffects } from './ngrx/users/effects.user.update.delete';
 import { userReducer } from './ngrx/users/users.reducer';
 import { projectReducer } from './ngrx/projects/projects.reducer';
 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 { ProjectGetEffects } from './ngrx/projects/effects.project.get';
 import { DatePipe } from '@angular/common';
 import { companyReducer } from './ngrx/companies/companies.reducer';
 
       UserGetSearchEffects,
       UserUpdateEffects,
       ProjectCreateEffects,
-      ProjectGet,
+      ProjectGetEffects,
       ProjectUpdateEffects,
       CompanyGetSearchEffects,
-      CompanyUpdateDeleteEffects
+      CompanyUpdateDeleteEffects,
+      CompanyCreateEffects
     ]),
     StoreDevtoolsModule.instrument(),
   ],
-  providers: [DatePipe],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

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

   constructor(public payload: string) {}
 }
 
-//create form to create campany
+//create form to create company
+export class CreateCompanyFormAddAction implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.CREATE_COMPANY_FORM_ADD;
+  constructor(public payload: void) {}
+}
+
+export class CreateCompanyFormAddActionSuccess implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.CREATE_COMPANY_FORM_ADD_SUCCESS;
+  constructor(public payload: void) {}
+}
+
+export class CreateCompanyFormAddActionError implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.CREATE_COMPANY_FORM_ADD_ERROR;
+  constructor(public payload: string) {}
+}
+
+// save company with form data
+export class SaveCompanyFormDataAddAction implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.SAVE_COMPANY_FORM_DATA_ADD;
+  constructor(public payload: Company) {}
+}
+export class SaveCompanyFormDataAddActionSuccess implements Action {
+  type: CompanyActionTypes =
+    CompanyActionTypes.SAVE_COMPANY_FORM_DATA_ADD_SUCCESS;
+  constructor(public payload: Company) {}
+}
+
+export class SaveCompanyFormDataAddActionError implements Action {
+  type: CompanyActionTypes =
+    CompanyActionTypes.SAVE_COMPANY_FORM_DATA_ADD_ERROR;
+  constructor(public payload: string) {}
+}
 
 //create form to update company
 export class CreateFormToUpdateCompanyAction implements Action {
 }
 
 // detele a company
-export class DeleteCompany implements Action{
+export class DeleteCompanyAction implements Action {
   type: CompanyActionTypes = CompanyActionTypes.DELETE_COMPANY;
-  constructor(public payload: Company){}
+  constructor(public payload: Company) {}
 }
 
-export class DeleteCompanySuccess implements Action{
+export class DeleteCompanyActionSuccess implements Action {
   type: CompanyActionTypes = CompanyActionTypes.DELETE_COMPANY_SUCCESS;
-  constructor(public payload: Company){}
+  constructor(public payload: Company) {}
 }
 
-export class DeleteCompanyError implements Action{
+export class DeleteCompanyActionError implements Action {
   type: CompanyActionTypes = CompanyActionTypes.DELETE_COMPANY_ERROR;
-  constructor(public payload: string){}
+  constructor(public payload: string) {}
+}
+
+// Get company's projects
+export class GetCompany_S_Projects implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.GET_COMPANY_S_PROJECTS;
+  constructor(public payload: any) {}
 }
 
+export class GetCompany_S_ProjectsSuccess implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.GET_COMPANY_S_PROJECTS_SUCCESS;
+  constructor(public payload: any) {}
+}
+
+export class GetCompany_S_ProjectsError implements Action {
+  type: CompanyActionTypes = CompanyActionTypes.GET_COMPANY_S_PROJECTS_ERROR;
+  constructor(public payload: string) {}
+}
+
+
 export type CompanyActionUnion =
   | GetAllCompaniesAction
   | GetAllCompaniesActionSuccess
   | GetAllCompaniesActionError
+  | CreateCompanyFormAddAction
+  | CreateCompanyFormAddActionSuccess
+  | CreateCompanyFormAddActionError
+  | SaveCompanyFormDataAddAction
+  | SaveCompanyFormDataAddActionSuccess
+  | SaveCompanyFormDataAddActionError
   | CreateFormToUpdateCompanyAction
   | CreateFormToUpdateCompanyActionSuccess
   | CreateFormToUpdateCompanyActionError
   | UpdateCompanyWithFormDataAction
   | UpdateCompanyWithFormDataActionSuccess
-  | UpdateCompanyWithFormDataActionError;
+  | UpdateCompanyWithFormDataActionError
+  | DeleteCompanyAction
+  | DeleteCompanyActionSuccess
+  | DeleteCompanyActionError
+  | GetCompany_S_Projects
+  | GetCompany_S_ProjectsSuccess
+  | GetCompany_S_ProjectsError;

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';
+import { Action } from "@ngrx/store";
+import { Company } from "src/app/shared/models/company/company.model";
+import { MsgState } from "../msg.state";
+import { CompanyActionUnion } from "./companies.actions";
+import { CompanyActionTypes } from "./company.action.types";
+import { CompanyState } from "./company.state";
 
 /**reducer fonction to handle actions
 a reducer function need initial state and an action to handle*/
   currentCompany: null,
   companiesList: [],
   msgState: MsgState.INIT_STATE,
-  serverMsgErron: 'no error msg',
+  serverMsgError: 'no error msg'
 };
 
-export function companyReducer(
-  companyState: CompanyState = companyInitialState,
-  action: Action
-) {
+export function companyReducer(state: CompanyState = companyInitialState, action: Action
+) : CompanyState {
+
   switch (action.type) {
     // get all companies
     case CompanyActionTypes.GET_ALL_COMPANIES:
       return {
-        ...companyState,
+        ...state,
         msgState: MsgState.LOADING,
       };
 
     case CompanyActionTypes.GET_ALL_COMPANIES_SUCCESS:
       return {
-        ...companyState,
+        ...state,
         msgState: MsgState.LOADED,
-        companiesList: (<CompanyActionUnion>action).payload,
+        companiesList: (<CompanyActionUnion> action).payload
       };
 
     case CompanyActionTypes.GET_ALL_COMPANIES_ERROR:
       return {
-        ...companyState,
+        ...state,
         msgState: MsgState.ERR,
         serverMsgError: (<CompanyActionUnion>action).payload,
       };
     //create form to update company
     case CompanyActionTypes.CREATE_COMPANY_FORM_UPDATE:
       return {
-        ...companyState,
+        ...state,
         msgState: MsgState.FORM_LOADING,
       };
     case CompanyActionTypes.CREATE_COMPANY_FORM_UPDATE_SUCCESS:
       let companyToUpdate: Company = (<CompanyActionUnion>action).payload;
       return {
-        ...companyState,
+        ...state,
         msgState: MsgState.FORM_LOADED,
         currentCompany: companyToUpdate,
       };
 
     case CompanyActionTypes.CREATE_COMPANY_FORM_UPDATE_ERROR:
       return {
-        ...companyState,
+        ...state,
         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,
+        ...state,
+        msgState: MsgState.UPDATE,
       };
     case CompanyActionTypes.UPDATE_COMPANY_WITH_FORM_DATA_SUCCESS:
       let updatedCompany: Company = (<CompanyActionUnion>action).payload;
-      let companiesListCopy1: Company[] = [...companyState.companiesList];
+      let companiesListCopy1: Company[] = [...state.companiesList];
       companiesListCopy1 = companiesListCopy1.map((company) =>
         company.id == updatedCompany.id ? updatedCompany : company
       );
 
       return{
-        ...companyState,
+        ...state,
         msgState: MsgState.UPDATED,
         companiesList: companiesListCopy1
       }
 
       case CompanyActionTypes.UPDATE_COMPANY_WITH_FORM_DATA_ERROR:
         return{
-          ...companyState,
+          ...state,
           msgState: MsgState.ERR,
           serverMsgError: (<CompanyActionUnion>action).payload
         };
         // delete a company
       case CompanyActionTypes.DELETE_COMPANY:
         return{
-          ...companyState,
+          ...state,
           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];
+        let deletedCompanyIndex = state.companiesList.indexOf(deletedCompany);
+        let companiesListCopy2: Company[] = [...state.companiesList];
         companiesListCopy2 = companiesListCopy2.splice(deletedCompanyIndex);
 
         return{
-          ...companyState,
+          ...state,
           msgState: MsgState.DELETED,
           companiesList: companiesListCopy2
         };
 
       case CompanyActionTypes.DELETE_COMPANY_ERROR:
         return{
-          ... companyState,
+          ... state,
+          msgState: MsgState.ERR,
+          serverMsgError: (<CompanyActionUnion> action).payload
+        };
+
+      // Get company's projects
+      case CompanyActionTypes.GET_COMPANY_S_PROJECTS:
+        return{
+          ...state,
+          msgState: MsgState.LOADING
+        };
+
+      case CompanyActionTypes.GET_COMPANY_S_PROJECTS_SUCCESS:
+        return{
+          ...state,
+          msgState: MsgState.LOADED,
+          companiesList: (<CompanyActionUnion> action).payload
+        };
+
+      case CompanyActionTypes.GET_COMPANY_S_PROJECTS_ERROR:
+        return{
+          ...state,
+          msgState: MsgState.ERR,
+          serverMsgError: (<CompanyActionUnion> action).payload
+        };
+
+      //create form to add company
+      case CompanyActionTypes.CREATE_COMPANY_FORM_ADD:
+        return{
+          ...state,
+          msgState: MsgState.FORM_LOADING,
+        };
+
+      case CompanyActionTypes.CREATE_COMPANY_FORM_ADD_SUCCESS:
+        return{
+          ...state,
+          msgState: MsgState.FORM_LOADED
+        };
+      case CompanyActionTypes.CREATE_COMPANY_FORM_ADD_ERROR:
+        return{
+          ...state,
+          msgState: MsgState.ERR,
+          serverMsgError: (<CompanyActionUnion> action).payload
+        };
+
+      // save company with form data
+      case CompanyActionTypes.SAVE_COMPANY_FORM_DATA_ADD:
+        return{
+          ...state,
+          msgState: MsgState.ADD
+        };
+
+      case CompanyActionTypes.SAVE_COMPANY_FORM_DATA_ADD_SUCCESS:
+        let createdCompany: Company = (<CompanyActionUnion> action).payload;
+        let companiesListCopy3 : Company[] = [...state.companiesList];
+        companiesListCopy3.push(createdCompany);
+
+        return{
+          ...state,
+          msgState: MsgState.ADDED,
+          companiesList: companiesListCopy3
+        };
+
+      case CompanyActionTypes.SAVE_COMPANY_FORM_DATA_ADD_ERROR:
+        return{
+          ...state,
           msgState: MsgState.ERR,
           serverMsgError: (<CompanyActionUnion> action).payload
         };
 
     default:
-      return { ...companyState };
+      return { ...state };
   }
 }

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

-export enum CompanyActionTypes{
+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',
+  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',
+
+  // Get company's pprjects
+  GET_COMPANY_S_PROJECTS = 'GET COMPANY\'S PROJECT',
+  GET_COMPANY_S_PROJECTS_SUCCESS = 'GET COMPANY\'S PROJECT SUCCESS',
+  GET_COMPANY_S_PROJECTS_ERROR = 'GET COMPANY\'S PROJECT 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_ADD = '[Company] SAVE COMPANY FORM DATA ADD',
+  SAVE_COMPANY_FORM_DATA_ADD_SUCCESS = '[Company] SAVE COMPANY FORM DATA ADD SUCCESS',
+  SAVE_COMPANY_FORM_DATA_ADD_ERROR = '[Company] SAVE COMPANY FORM DATA ADD ERROR'
 }

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

   currentCompany!: Company | null;
   companiesList!: Company[];
   msgState!: MsgState;
-  serverMsgErron!: string;
+  serverMsgError!: string;
 }

src/app/ngrx/companies/effects.company.create.ts

+import { Company } from 'src/app/shared/models/company/company.model';
+import { CompanyActionTypes } from './company.action.types';
+import { CompanyActionUnion, CreateCompanyFormAddActionSuccess, SaveCompanyFormDataAddActionSuccess, SaveCompanyFormDataAddActionError } from './companies.actions';
+import { map, Observable, mergeMap, catchError, of } from 'rxjs';
+import { CompaniesServices } from './../../shared/services/companies.service';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class CompanyCreateEffects {
+  constructor(
+    private companyActions: Actions,
+    private companiesService: CompaniesServices
+  ) {}
+
+  // create company form to add company
+  createFormToAddCompanyEffect: Observable<CompanyActionUnion> = createEffect(
+    () => this.companyActions.pipe(
+        ofType(CompanyActionTypes.CREATE_COMPANY_FORM_ADD),
+        map((action: CompanyActionUnion) =>{
+          return new CreateCompanyFormAddActionSuccess()
+        })
+      )
+  );
+
+  // save company form data
+  saveCompanyFormDataAddEffect : Observable<CompanyActionUnion> = createEffect(
+    () => this.companyActions.pipe(
+      ofType(CompanyActionTypes.SAVE_COMPANY_FORM_DATA_ADD),
+      mergeMap( (action : CompanyActionUnion)  =>{
+        return this.companiesService.createCompany(action.payload).pipe(
+          map ( (company: Company) => new SaveCompanyFormDataAddActionSuccess(company)),
+          catchError( err => of(new SaveCompanyFormDataAddActionError( err.message)))
+        )
+      })
+    )
+  );
+
+}

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.get.ts

+import { Injectable } from '@angular/core';
+import { CompanyActionTypes } from './company.action.types';
+import {
+  CompanyActionUnion,
+  GetAllCompaniesActionSuccess,
+  GetAllCompaniesActionError,
+  GetCompany_S_ProjectsSuccess,
+  GetCompany_S_ProjectsError,
+} from './companies.actions';
+import { Observable, mergeMap, catchError, map, of } from 'rxjs';
+import { CompaniesServices } 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: CompaniesServices
+  ) {}
+
+  // get all companies effect
+  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)))
+        );
+      })
+    )
+  );
+
+  // get company's projects effect
+  getCompany_s_ProjectEffect: Observable<CompanyActionUnion> = createEffect(
+    () =>
+      this.companyActions.pipe(
+        ofType(CompanyActionTypes.GET_COMPANY_S_PROJECTS),
+        mergeMap((action: CompanyActionUnion) => {
+          return this.companiesService.getCompany_s_Projects().pipe(
+            map(
+              (company_s_ProjectsList: any) =>
+                new GetCompany_S_ProjectsSuccess(company_s_ProjectsList)
+            ),
+            catchError((err) => of(new GetCompany_S_ProjectsError(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 { CompanyActionUnion, CreateFormToUpdateCompanyActionSuccess, CreateFormToUpdateCompanyActionError, UpdateCompanyWithFormDataActionSuccess, UpdateCompanyWithFormDataActionError, DeleteCompanyAction, DeleteCompanyActionSuccess, DeleteCompanyActionError } 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 { CompaniesServices } 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 companiesService: CompaniesServices,
     private companyActions: Actions
   ) {}
 
       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)))
+          map(()=>new DeleteCompanyActionSuccess(action.payload)),
+          catchError(err=> of(new DeleteCompanyActionError(err.message)))
         )
       })
     )

src/app/ngrx/msg.state.ts

   CONFIRM_ADD = 'CONFIRM ADDING',
   CONFIRM_UPDATE = 'CONFIRM UPDATE',
   CONFIRM_DEL = 'CONFIRM DELETION',
+  ADD ='IS ADDING',
   ADDED = 'SUCCESSFULLY ADDED',
   EXIST = 'ALREADY EXISTS',
+  UPDATE = 'IS UPDATING',
   UPDATED = ' SUCCESSFULLY UPDATED',
-  DEFAULT_MSG = 'DEFAULT MSG LOADING',
   DELETE = 'DELETE',
   DELETED = 'SUCCESSFULLY DELETED'
 }

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

 import { ProjectActionTypes } from './project.action.types';
 import { ProjectActionUnion, CreateProjectFormAddAction, SaveProjectFormDataActionSuccess, SaveProjectFormDataActionError, CreateProjectFormAddActionSuccess } from './projects.actions';
 import { map, Observable, mergeMap, catchError, of } from 'rxjs';
-import { ProjectsService } from './../../shared/services/projects.service';
+import { ProjectsServices } 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/project.model';
 
   constructor(
     private projectActions: Actions,
-    private projectsService: ProjectsService
+    private projectsService: ProjectsServices
   ) {}
 
   //create project form effect

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

 import { ProjectActionUnion, GetAllProjectsActionSuccess, GetAllProjectsActionError, GetProjectWithUserAssociatedActionSuccess, GetProjectWithUserAssociatedActionError, GetProjectWithCompanyAssociatedActionSuccess, GetProjectWithCompanyAssociatedActionError } 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 { ProjectsServices } from './../../shared/services/projects.service';
 import { Injectable } from '@angular/core';
 
 @Injectable()
-export class ProjectGet {
+export class ProjectGetEffects {
   constructor(
-    private projectsService: ProjectsService,
+    private projectsService: ProjectsServices,
     private projectActions: Actions
   ) {}
 

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

 } 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 { ProjectsServices } from '../../shared/services/projects.service';
 import { Injectable } from '@angular/core';
 
 @Injectable()
 export class ProjectUpdateEffects {
   constructor(
-    private projectsService: ProjectsService,
+    private projectsService: ProjectsServices,
     private projectActions: Actions
   ) {}
 

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

     case ProjectActionTypes.UPDATE_PROJECT_WITH_FORM_DATA:
       return {
         ...state,
-        msgState: MsgState.DEFAULT_MSG,
+        msgState: MsgState.UPDATE,
       };
 
     case ProjectActionTypes.UPDATE_PROJECT_WITH_FORM_DATA_SUCCESS:

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

-import { UsersService } from '../../shared/services/users.service';
-import { CreateFormUserAddActionError, CreateFormUserAddActionSuccess, SaveUserFormAddActionError, SaveUserFormAddActionSuccess, UserActionUnion } from './users.actions';
-import { Injectable } from "@angular/core";
+import { UsersServices } from '../../shared/services/users.service';
+import {
+  CreateFormUserAddActionError,
+  CreateFormUserAddActionSuccess,
+  SaveUserFormAddActionError,
+  SaveUserFormAddActionSuccess,
+  UserActionUnion,
+} from './users.actions';
+import { Injectable } from '@angular/core';
 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/user.model';
 
 @Injectable()
-export class UserCreateEffects{
-
-  constructor(private userActions: Actions, private usersService: UsersService){}
-
-
-
-   //create a user add form effect
-   createAddUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
-   this.userActions.pipe(
-     ofType(UserActionTypes.CREATE_FORM_ADD_USER),
-     map((userAction: UserActionUnion) => {
-       return new CreateFormUserAddActionSuccess(userAction.payload);
-     }),
-     catchError((err) => of(new CreateFormUserAddActionError(err.message)))
-   )
- );
-
- //saving user form data effect
-
- saveUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
-   this.userActions.pipe(
-     ofType(UserActionTypes.SAVE_USERFORM_ADD),
-     mergeMap((userAction: UserActionUnion) => {
-       return this.usersService.createUser(userAction.payload).pipe(
-         map((user:User) => new SaveUserFormAddActionSuccess(user)),
-         catchError((err) => of(new SaveUserFormAddActionError(err.message)))
-       );
-     })
-   )
- );
-
+export class UserCreateEffects {
+  constructor(
+    private userActions: Actions,
+    private usersService: UsersServices
+  ) {}
+
+  //create a user add form effect
+  createAddUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.userActions.pipe(
+      ofType(UserActionTypes.CREATE_FORM_ADD_USER),
+      map((userAction: UserActionUnion) => {
+        return new CreateFormUserAddActionSuccess(userAction.payload);
+      }),
+      catchError((err) => of(new CreateFormUserAddActionError(err.message)))
+    )
+  );
+
+  //saving user form data effect
+
+  saveUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.userActions.pipe(
+      ofType(UserActionTypes.SAVE_USERFORM_ADD),
+      mergeMap((userAction: UserActionUnion) => {
+        return this.usersService.createUser(userAction.payload).pipe(
+          map((user: User) => new SaveUserFormAddActionSuccess(user)),
+          catchError((err) => of(new SaveUserFormAddActionError(err.message)))
+        );
+      })
+    )
+  );
 }

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

 import { Router } from '@angular/router';
-import { UsersService } from '../../shared/services/users.service';
+import { UsersServices } from '../../shared/services/users.service';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Injectable } from '@angular/core';
-import { GetAllUsersActionError, GetAllUsersActionSuccess, GetUser_s_ProjectsError, GetUser_s_ProjectsSuccess, SearchUserActionError, SearchUserActionSuccess, UserActionUnion } from './users.actions';
+import {
+  GetAllUsersActionError,
+  GetAllUsersActionSuccess,
+  GetUser_S_ProjectsError,
+  GetUser_S_ProjectsSuccess,
+  UserActionUnion,
+} from './users.actions';
 import { Observable, mergeMap, map, catchError, of, tap } from 'rxjs';
 import { User } from 'src/app/shared/models/user/user.model';
 import { UserActionTypes } from './user.action.types';
 export class UserGetSearchEffects {
   constructor(
     private userActions: Actions,
-    private usersService: UsersService,
+    private usersService: UsersServices,
     private router: Router
   ) {}
 
-  //create getAllUsers effect
+  //getAllUsers effect
 
   getAllUsersEffect: Observable<UserActionUnion> = createEffect(() =>
     this.userActions.pipe(
     )
   );
 
-  //create searchUser effect
-
-  searchUserEffect: Observable<UserActionUnion> = createEffect(() =>
-    this.userActions.pipe(
-      ofType(UserActionTypes.SEARCH_A_USER),
-      mergeMap((userAction: UserActionUnion) => {
-        return this.usersService.searchUser(userAction.payload).pipe(
-          map((users: User[]) => new SearchUserActionSuccess(users)),
-          catchError((err) => of(new SearchUserActionError(err.message)))
-        );
-      })
-    )
-  );
 
   // navigate to another component effect
-  navigate:Observable<UserActionUnion> = createEffect(
-    () => this.userActions.pipe(
+  navigate: Observable<UserActionUnion> = createEffect(
+    () =>
+      this.userActions.pipe(
         ofType(UserActionTypes.NAVIGATE_TO_USER_S_PROJECTS_COMPONENT_SUCCESS),
         tap(() => {
-            this.router.navigate(['/user-s-projects']);
+          this.router.navigate(['/user-s-projects']);
         })
-    ),
+      ),
     { dispatch: false }
-);
+  );
+
+  // get user's projects
 
-  loadUserSProjectsEffect : Observable<UserActionUnion> = createEffect(
-    ()=> this.userActions.pipe(
+  loadUserSProjectsEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.userActions.pipe(
       ofType(UserActionTypes.GET_USER_S_PROJECTS),
-      mergeMap( (action: UserActionUnion)=>{
+      mergeMap((action: UserActionUnion) => {
         return this.usersService.getUser_s_Projects().pipe(
-          map( (users: any)=> new GetUser_s_ProjectsSuccess(users)),
-          catchError(err => of(new GetUser_s_ProjectsError(err.message)))
-        )
+          map((users: any) => new GetUser_S_ProjectsSuccess(users)),
+          catchError((err) => of(new GetUser_S_ProjectsError(err.message)))
+        );
       })
     )
   );

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

   UpdateUserFormActionSuccess,
 } from './users.actions';
 import { map, mergeMap, Observable, catchError, of } from 'rxjs';
-import { UsersService } from '../../shared/services/users.service';
+import { UsersServices } 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/user.model';
 
 export class UserUpdateEffects {
   constructor(
-    private usersService: UsersService,
+    private usersService: UsersServices,
     private effectActions: Actions
   ) {}
 

src/app/ngrx/users/user.action.types.ts

   GET_ALL_USERS_SUCCESS = '[User] GET-ALL USERS SUCCESS',
   GET_ALL_USERS_ERROR = '[User] GET ALL USERS ERROR',
 
-  // action: search a user
-  SEARCH_A_USER = '[User] SEARCH A USER',
-  SEARCH_A_USER_SUCCESS = '[User] SEARCH A USER SUCCESS',
-  SEARCH_A_USER_ERROR = '[User] SEARCH A USER ERROR',
-
-
   // action of button: create a user form
   CREATE_FORM_ADD_USER = '[User] USER FORM ADD',
   CREATE_FORM_ADD_USER_SUCCESS = '[User] USER FORM ADD SUCCESS',

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

   constructor(public payload: string) {}
 }
 
- // Actios of searching a user
-
-export class SearchUsersAction implements Action {
-  type: UserActionTypes = UserActionTypes.SEARCH_A_USER;
-
-  constructor(public payload: any) {}
-}
-
-export class SearchUserActionSuccess implements Action {
-  type: UserActionTypes = UserActionTypes.SEARCH_A_USER_SUCCESS;
-  constructor(public payload: User[]) {}
-}
-
-export class SearchUserActionError implements Action {
-  type: UserActionTypes = UserActionTypes.SEARCH_A_USER_ERROR;
-  constructor(public payload: string) {}
-}
-
 // Actios of creating a user form to add user
 
 export class CreateFormUserAddAction implements Action {
   constructor(public payload: any){}
 }
 
-export class GetUser_s_ProjectsSuccess implements Action{
+export class GetUser_S_ProjectsSuccess implements Action{
   type: UserActionTypes = UserActionTypes.GET_USER_S_PROJECTS_SUCCESS;
   constructor(public payload: any){}
 }
 
-export class GetUser_s_ProjectsError implements Action{
+export class GetUser_S_ProjectsError implements Action{
   type: UserActionTypes = UserActionTypes.GET_USER_S_PROJECTS_ERROR;
   constructor(public payload: string){}
 }
   | GetAllUsersAction
   | GetAllUsersActionSuccess
   | GetAllUsersActionError
-  | SearchUsersAction
-  | SearchUserActionSuccess
-  | SearchUserActionError
   | CreateFormUserAddAction
   | CreateFormUserAddActionSuccess
   | CreateFormUserAddActionError
   | DeleteUserActionSuccess
   | DeleteUserActionError
   | GetUser_S_Projects
-  | GetUser_s_ProjectsSuccess
-  | GetUser_s_ProjectsError
+  | GetUser_S_ProjectsSuccess
+  | GetUser_S_ProjectsError
   | NavigateActionSuccess;

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

-import { Injectable } from '@angular/core';
-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/user.model';
-import { UsersService } from 'src/app/shared/services/users.service';
-import { UserActionTypes } from './user.action.types';
-import {
-  UserActionUnion,
-  GetAllUsersActionSuccess,
-  GetAllUsersActionError,
-  SearchUserActionSuccess,
-  SearchUserActionError,
-  GetUser_s_ProjectsSuccess,
-  GetUser_s_ProjectsError,
-  CreateFormUserAddActionError,
-  CreateFormUserAddActionSuccess,
-  SaveUserFormAddActionError,
-  SaveUserFormAddActionSuccess,
-  CreareFormUserEditActionActionError,
-  CreareFormUserEditActionSuccess,
-  DeleteUserActionError,
-  DeleteUserActionSuccess,
-  UpdateUserFormActionError,
-  UpdateUserFormActionSuccess,
-} from './users.actions';
-@Injectable()
-export class UsersEffects {
-  effectActions: any;
-  constructor(
-    private userActions: Actions,
-    private usersService: UsersService,
-    private router: Router
-  ) {}
-
-  //create getAllUsers effect
-
-  getAllUsersEffect: Observable<UserActionUnion> = createEffect(() =>
-    this.userActions.pipe(
-      ofType(UserActionTypes.GET_ALL_USERS),
-      mergeMap(() => {
-        return this.usersService.getAllUsers().pipe(
-          map((users: User[]) => new GetAllUsersActionSuccess(users)),
-          catchError((err) => of(new GetAllUsersActionError(err.message)))
-        );
-      })
-    )
-  );
-
-  //create searchUser effect
-
-  searchUserEffect: Observable<UserActionUnion> = createEffect(() =>
-    this.userActions.pipe(
-      ofType(UserActionTypes.SEARCH_A_USER),
-      mergeMap((userAction: UserActionUnion) => {
-        return this.usersService.searchUser(userAction.payload).pipe(
-          map((users: User[]) => new SearchUserActionSuccess(users)),
-          catchError((err) => of(new SearchUserActionError(err.message)))
-        );
-      })
-    )
-  );
-
-  // navigate to another component effect
-  navigate: Observable<UserActionUnion> = createEffect(
-    () =>
-      this.userActions.pipe(
-        ofType(UserActionTypes.NAVIGATE_TO_USER_S_PROJECTS_COMPONENT_SUCCESS),
-        tap(() => {
-          this.router.navigate(['/user-s-projects']);
-        })
-      ),
-    { dispatch: false }
-  );
-
-  loadUserSProjectsEffect: Observable<UserActionUnion> = createEffect(() =>
-    this.userActions.pipe(
-      ofType(UserActionTypes.GET_USER_S_PROJECTS),
-      mergeMap((action: UserActionUnion) => {
-        return this.usersService.getUser_s_Projects().pipe(
-          map((users: any) => new GetUser_s_ProjectsSuccess(users)),
-          catchError((err) => of(new GetUser_s_ProjectsError(err.message)))
-        );
-      })
-    )
-  );
-
-
-   //create a user add form effect
-   createAddUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
-   this.userActions.pipe(
-     ofType(UserActionTypes.CREATE_FORM_ADD_USER),
-     map((userAction: UserActionUnion) => {
-       return new CreateFormUserAddActionSuccess(userAction.payload);
-     }),
-     catchError((err) => of(new CreateFormUserAddActionError(err.message)))
-   )
- );
-
- //saving user form data effect
-
- saveUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
-   this.userActions.pipe(
-     ofType(UserActionTypes.SAVE_USERFORM_ADD),
-     mergeMap((userAction: UserActionUnion) => {
-       return this.usersService.createUser(userAction.payload).pipe(
-         map((user:User) => new SaveUserFormAddActionSuccess(user)),
-         catchError((err) => of(new SaveUserFormAddActionError(err.message)))
-       );
-     })
-   )
- );
-
- // create an update user form effect and fill it with data of a user to update
-
- createUpdateUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
- this.effectActions.pipe(
-   ofType(UserActionTypes.CREATE_FORM_USER_EDIT),
-   mergeMap((userAction: UserActionUnion) => {
-     return this.usersService.getUserById(userAction.payload.id).pipe(
-       map((user: User) => new CreareFormUserEditActionSuccess(user)),
-       catchError((err) =>
-         of(new CreareFormUserEditActionActionError(err.message))
-       )
-     );
-   })
- )
-);
-
-// update a user with data of form effect
-
-updateUserFormDataEffect: Observable<UserActionUnion> = createEffect(() =>
- this.effectActions.pipe(
-   ofType(UserActionTypes.UPDATE_USER_FORM),
-   mergeMap((userAction: UserActionUnion) => {
-     return this.usersService.updateUser(userAction.payload).pipe(
-       map((user: User) => new UpdateUserFormActionSuccess(user)),
-       catchError((err) => of(new UpdateUserFormActionError(err.message)))
-     );
-   })
- )
-);
-
-//deleteUser effect
-
-deleteUserEffect: Observable<UserActionUnion> = createEffect(() =>
- this.effectActions.pipe(
-   ofType(UserActionTypes.DELETE_A_USER),
-   mergeMap((userAction: UserActionUnion) => {
-     return this.usersService.deleteUser(userAction.payload.id).pipe(
-       map(() => new DeleteUserActionSuccess(userAction.payload)),
-       catchError((err) => of(new DeleteUserActionError(err.message)))
-     );
-   })
- )
-);
-
-}

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

         serverMsgError: (<UserActionUnion>action).payload
       };
 
-    // search a user actions
-    case UserActionTypes.SEARCH_A_USER:
-      return {
-        ...state,
-        msgState: MsgState.LOADING
-      };
-
-    case UserActionTypes.SEARCH_A_USER_SUCCESS:
-      return {
-        ...state,
-        msgState: MsgState.LOADED,
-        usersList: (<UserActionUnion>action).payload
-      };
-
-    case UserActionTypes.SEARCH_A_USER_ERROR:
-      return {
-        ...state,
-        msgState: MsgState.ERR,
-        serverMsgError: (<UserActionUnion>action).payload
-      };
 
-    // create a user form actions
+    // create a user form action to add a suer
     case UserActionTypes.CREATE_FORM_ADD_USER:
       return {
         ...state,
     case UserActionTypes.SAVE_USERFORM_ADD:
       return {
         ...state,
-        msgState: MsgState.DEFAULT_MSG
+        msgState: MsgState.ADD
       };
 
     case UserActionTypes.SAVE_USERFORM_ADD_SUCCESS:
     case UserActionTypes.UPDATE_USER_FORM:
       return {
         ...state,
-        msgState: MsgState.DEFAULT_MSG
+        msgState: MsgState.UPDATE
       };
 
     case UserActionTypes.UPDATE_USER_FORM_SUCCESS:
     case UserActionTypes.NAVIGATE_TO_USER_S_PROJECTS_COMPONENT_SUCCESS:
       return{
         ...state,
-        msgState: MsgState.DEFAULT_MSG
+        msgState: MsgState.UPDATE
       };
 
     default:

src/app/pages/accueil/accueil-routing.module.ts

 import { AccueilComponent } from './accueil/accueil.component';
 
 const routes: Routes = [
-  // {
-  //   path:'', component: AccueilComponent
-  // }
+  {
+    path:'', component: AccueilComponent
+  }
 ];
 
 @NgModule({

src/app/pages/accueil/accueil/accueil.component.html

 <div class="container mt-5">
   <div class="row d-flex justify-content-left">
 
-    <div class="card bg-light" style="width: 20rem;">
+    <div>
       <div class="card-body">
         <h4 class="card-title">Welcome to Natan</h4>
-        <p class="card-text">NATAN est palindrome</p>
-        <p>Ce qui fait de NATAN le meilleur</p>
+        <p class="card-text p-2">NATAN est palindrome</p>
+        <p class="card-text">Ce qui fait de NATAN le meilleur</p>
       </div>
     </div>
 

src/app/pages/base-nav-menu/base-nav-menu.component.html

     </mat-toolbar>
 
       <mat-nav-list>
+        <a mat-list-item routerLink="/">Accueil</a>
         <a mat-list-item routerLink="/users-management"> User Manager</a>
-        <a mat-list-item routerLink="/projects-management">project Manager</a>
-        <a mat-list-item routerLink="/companies-management">company Manager</a>
+        <a mat-list-item routerLink="/projects-management">Project Manager</a>
+        <a mat-list-item routerLink="/companies-management">Company Manager</a>
       </mat-nav-list>
   </mat-sidenav>
 
   <mat-sidenav-content>
     <mat-toolbar>
       <button
-        type="button"
-        aria-label="Toggle sidenav"
-        mat-icon-button
-        (click)="drawer.toggle()"
-        *ngIf="isHandset$ | async">
-        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
-      </button>
+      type="button"
+      aria-label="Toggle sidenav"
+      mat-icon-button
+      (click)="drawer.toggle()"
+      *ngIf="isHandset$ | async">
+      <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+    </button>
       <span>Users, Projects and Companies Management</span>
     </mat-toolbar>
     <!-- Add Content Here -->
-    <router-outlet></router-outlet>
   </mat-sidenav-content>
 </mat-sidenav-container>

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

-<p>companies-create works!</p>

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

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

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

-<div class="container">
   <div *ngIf="inputCompaniesList">
     <input
       type="text"
       </tr>
     </ng-template>
   </p-table>
-</div>

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

 import { MsgState } from 'src/app/ngrx/msg.state';
-import { DeleteCompany, GetAllCompaniesAction } from './../../../../ngrx/companies/companies.actions';
+import { DeleteCompanyAction, GetAllCompaniesAction } from './../../../../ngrx/companies/companies.actions';
 import { CompanyState } from './../../../../ngrx/companies/company.state';
 import { Router } from '@angular/router';
 import { Component, Input, OnInit } from '@angular/core';
 
   onCompanyDelete(company: Company) {
     if (window.confirm(this.msgState.CONFIRM_DEL)) {
-      this.store.dispatch(new DeleteCompany(company));
+      this.store.dispatch(new DeleteCompanyAction(company));
     }
   }
 

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

+<div class="container p-3" *ngIf="companyFormGroup">
+  <ng-container [ngSwitch]="companyState.msgState">
+    <ng-container *ngSwitchCase="msgState.FORM_LOADING">
+      {{ companyState.msgState }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOAD_ERR">
+      {{ companyState.msgState }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOADED">
+      <div class="card">
+        <div class="card-header"><b>Company informations to Create</b></div>
+
+        <div class="card-body">
+          <form
+            [formGroup]="companyFormGroup"
+            (ngSubmit)="onCompanyCreate(); 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 compTypes | 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"
+              >
+                save
+              </button>
+              &nbsp;
+              <button class="btn btn-outline-danger" 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">
+        <span> {{ companyState.msgState }}</span> &nbsp;&nbsp;
+        <button class="btn btn-success" (click)="onSaveOk()">OK</button>
+      </div>
+    </ng-container>
+
+  </ng-container>
+</div>

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

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

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

+import { SaveCompanyFormDataAddAction } from './../../../../ngrx/companies/companies.actions';
+import { Company } from './../../../../shared/models/company/company.model';
+import { CompaniesServices } from './../../../../shared/services/companies.service';
+import { DatePipe } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { CreateCompanyFormAddAction } from 'src/app/ngrx/companies/companies.actions';
+import { CompanyState } from 'src/app/ngrx/companies/company.state';
+import { MsgState } from 'src/app/ngrx/msg.state';
+import { CompanyType } from 'src/app/shared/models/company/company.type';
+
+@Component({
+  selector: 'app-company-create',
+  templateUrl: './company-create.component.html',
+  styleUrls: ['./company-create.component.css']
+})
+export class CompanyCreateComponent implements OnInit {
+
+  constructor(
+    private store: Store<{ companyReducerKey: CompanyState }>,
+    private fb: FormBuilder,
+    private datePipe: DatePipe,
+    private router: Router,
+    private companiesService: CompaniesServices
+  ) {}
+
+  companyState!: CompanyState;
+  companyFormGroup!: FormGroup;
+  msgState = MsgState;
+  compTypes = CompanyType;
+
+  ngOnInit(): void {
+    this.store.dispatch(new CreateCompanyFormAddAction());
+    this.store.subscribe( (state)=>{
+      this.companyState = state.companyReducerKey;
+
+      this.companyFormGroup = this.fb.group({
+        id: [0, Validators.required],
+        companyName:['', [Validators.required, Validators.minLength(5), Validators.maxLength(20)]],
+        companyType:['', Validators.required],
+        creationDate:[this.datePipe.transform(new Date(),'MM dd yyyy')]
+      })
+    });
+  }
+
+
+  onCompanyCreate(){
+     let company: Company = this.companyFormGroup.value;
+     this.companiesService.getCompanyByCompanyName(company.companyName).subscribe(
+       (companies: Company[]) => {
+         if( companies.length > 0){
+           alert(this.msgState.EXIST);
+           this.store.dispatch(new CreateCompanyFormAddAction());
+         }
+         else{
+           if(window.confirm(this.msgState.CONFIRM_ADD)){
+            this.store.dispatch(new SaveCompanyFormDataAddAction(company));
+           }
+         }
+       }
+     )
+
+  }
+  onSaveOk(){
+    this.router.navigateByUrl('/companies-management');
+  }
+
+}

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

         type="button"
         label="company's projects"
         class="btn btn-outline-primary"
-        (click)="onProjectsOfCampany()"
+        (click)="onCompany_s_Projects()"
       ></button>
     </div>
   </nav>

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

+import { Router } from '@angular/router';
 import { GetAllCompaniesAction } from './../../../../ngrx/companies/companies.actions';
 import { CompanyState } from './../../../../ngrx/companies/company.state';
 import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-company-nav-bar',
   templateUrl: './company-nav-bar.component.html',
-  styleUrls: ['./company-nav-bar.component.css']
+  styleUrls: ['./company-nav-bar.component.css'],
 })
-export class CompanyNavBarComponent{
+export class CompanyNavBarComponent {
+  constructor(
+    private store: Store<{ companyReducerKey: CompanyState }>,
+    private router: Router
+  ) {}
 
-  constructor(private store: Store<{companyReducerKey: CompanyState}>){}
+  companyState!: CompanyState;
 
-  companyState!: CompanyState
-
-  onCompanyCreate(){}
+  onCompanyCreate() {
+    this.router.navigateByUrl('/company-create');
+  }
 
-  onCompaniesGetAll(){
+  onCompaniesGetAll() {
     this.store.dispatch(new GetAllCompaniesAction({}));
-    this.store.subscribe((state)=>{
+    this.store.subscribe((state) => {
       this.companyState = state.companyReducerKey;
-    })
+    });
   }
 
-  onProjectsOfCampany(){}
-
+  onCompany_s_Projects() {
+    this.router.navigateByUrl('/company-s-projects');
+  }
 }

src/app/pages/companies-manager/companies-management/company-s-projects/company-s-projects-list/company-s-projects-list.component.css

+ul{
+  list-style-type: none;
+}

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

+<p-table
+        [value]="inputCompany_s_ProjectsList"
+        responsiveLayout="scroll"
+        styleClass="p-datatable-striped"
+        [paginator]="true"
+        [rows]="1"
+        [showCurrentPageReport]="true"
+        currentPageReportTemplate="{first} - {last} of {totalRecords} users"
+        [rowsPerPageOptions]="[1, 3, 5]"
+        class="p-3"
+      >
+        <ng-template pTemplate="header">
+          <tr>
+            <th>ID</th>
+            <th>Company name</th>
+            <th>Projects of company</th>
+            <th>Company type</th>
+            <th>Creation Date</th>
+          </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-company>
+          <tr>
+            <td>{{ company.id }}</td>
+            <td>{{ company.companyName }}</td>
+            <td>
+              <ul *ngFor="let project of company.projects">
+                <li>
+                  <span style="font-weight: bold"
+                    >Project ID: {{ project.id }}</span
+                  >
+                </li>
+                <li>Project Name: {{ project.projectName }}</li>
+                <li>Priority: {{ project.priority }}</li>
+                <li>Creation Date: {{ project.creationDate }}</li>
+                <li>Company ID: {{ project.companyId }}</li>
+                <li>Description: {{ project.description }}</li>
+                <li>User ID: {{ project.userId }}</li>
+                <li>Project State: {{ project.state }}</li>
+              </ul>
+            </td>
+            <td>{{ company.companyType }}</td>
+            <td>{{company.creationDate}}</td>
+          </tr>
+        </ng-template>
+      </p-table>

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

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

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

+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-company-s-projects-list',
+  templateUrl: './company-s-projects-list.component.html',
+  styleUrls: ['./company-s-projects-list.component.css']
+})
+export class CompanySProjectsListComponent{
+
+  @Input () inputCompany_s_ProjectsList!: any
+}

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

+<div class="container" *ngIf="companyState$ | async as companyState">
+  <ng-container [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-company-s-projects-list
+        [inputCompany_s_ProjectsList]="companyState.companiesList"
+      ></app-company-s-projects-list>
+    </ng-container>
+  </ng-container>
+</div>

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

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

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

+import { Observable } from 'rxjs';
+import { MsgState } from './../../../../ngrx/msg.state';
+import { GetCompany_S_Projects } 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-s-projects',
+  templateUrl: './company-s-projects.component.html',
+  styleUrls: ['./company-s-projects.component.css']
+})
+export class CompanySProjectsComponent implements OnInit {
+
+  constructor(private store: Store<{companyReducerKey: CompanyState}>) { }
+
+  companyState$!: Observable<CompanyState>;
+  msgState = MsgState;
+
+  ngOnInit(): void {
+
+    this.store.dispatch(new GetCompany_S_Projects({}));
+    this.companyState$ = this.store.select('companyReducerKey');
+  }
+
+}

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}}
+    {{ companyState.msgState }}
   </ng-container>
   <ng-container *ngIf="companyState.msgState == msgState.FORM_LOAD_ERR">
-    {{companyState.msgState}}
+    {{ companyState.msgState }}
   </ng-container>
 
   <ng-container *ngIf="companyState.msgState == msgState.FORM_LOADED">
-
-    <div class="card mt-3" style="width: 18rem">
-      <div class="card-header">Company informations to update</div>
+    <div class="card mt-3">
+      <div class="card-header">
+        <b>Company informations to update</b>: Company ID:
+        <b>{{ companyState.currentCompany?.id }}</b
+        >, Creation Date: <b>{{ companyState.currentCompany?.creationDate }}</b>
+      </div>
 
       <div class="card-body">
-        <form [formGroup]="companyFormGroup"
+        <form
+          [formGroup]="companyFormGroup"
           (ngSubmit)="onCompanyUpdate(); companyFormGroup.reset()"
         >
           <div class="col-md-auto mb-3">
               class="form-control"
               [ngClass]="{
                 'is-invalid':
-                companyFormGroup.controls['companyName'].touched &&
+                  companyFormGroup.controls['companyName'].touched &&
                   !companyFormGroup.controls['companyName'].valid
               }"
             />
           <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
+                *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"
+              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.ts

   CreateFormToUpdateCompanyAction,
   UpdateCompanyWithFormDataAction,
 } from './../../../../ngrx/companies/companies.actions';
-import { CompaniesService } from './../../../../shared/services/companies.service';
+import { CompaniesServices } 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';
     activatedRoute: ActivatedRoute,
     private store: Store<{ companyReducerKey: CompanyState }>,
     private formBuilder: FormBuilder,
-    private companiesService: CompaniesService,
+    private companiesService: CompaniesServices,
     private router: Router
   ) {
     this.companyId = activatedRoute.snapshot.params['companyId'];

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

+import { CompanyCreateComponent } from './companies-management/company-create/company-create.component';
+import { CompanySProjectsComponent } from './companies-management/company-s-projects/company-s-projects.component';
 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';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
-  {path: 'company-create', component: CompaniesCreateComponent},
+  {path: 'company-create', component: CompanyCreateComponent},
   {path: 'companies-management', component: CompaniesManagementComponent},
-  {path:'company-update/:companyId', component: CompanyUpdateComponent}
+  {path:'company-update/:companyId', component: CompanyUpdateComponent},
+  { path:'company-s-projects', component: CompanySProjectsComponent}
 ];
 
 @NgModule({

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

 import { TableModule } from 'primeng/table';
 import { ButtonModule } from 'primeng/button';
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 
 import { CompaniesManagerRoutingModule } from './companies-manager-routing.module';
-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';
+import { CompanySProjectsComponent } from './companies-management/company-s-projects/company-s-projects.component';
+import { CompanySProjectsListComponent } from './companies-management/company-s-projects/company-s-projects-list/company-s-projects-list.component';
+import { CompanyCreateComponent } from './companies-management/company-create/company-create.component';
 
 
 @NgModule({
   declarations: [
-    CompaniesCreateComponent,
     CompanyNavBarComponent,
     CompaniesManagementComponent,
     CompaniesListComponent,
-    CompanyUpdateComponent
+    CompanyUpdateComponent,
+    CompanySProjectsComponent,
+    CompanySProjectsListComponent,
+    CompanyCreateComponent
   ],
   imports: [
     CommonModule,
     TableModule,
     ReactiveFormsModule,
     FormsModule
-  ]
+  ],
+  providers:[DatePipe]
 })
 export class CompaniesManagerModule { }

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

                 save
               </button>
               &nbsp;
-              <button class="btn btn-outline-primary" type="reset">
+              <button class="btn btn-outline-danger" type="reset">
                 reset
               </button>
             </div>

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

 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 { ProjectsServices } from './../../../../shared/services/projects.service';
 import { MsgState } from './../../../../ngrx/msg.state';
 import { DatePipe } from '@angular/common';
 import { GetAllUsersAction } from './../../../../ngrx/users/users.actions';
       companyReducerKey: CompanyState
     }>,
     private datePipe: DatePipe,
-    private projectsServices: ProjectsService,
+    private projectsServices: ProjectsServices,
     private router: Router
   ) {}
 
     this.projectsServices.getProjectByName(projectName).subscribe((projects: Project[])=>{
       if(projects.length>0){
         alert(projectName+' '+this.msgState.EXIST);
-        return;
+        this.store.dispatch(new CreateProjectFormAddAction({})); //pour reactualiser le formulaire
       }
       else{
         if(window.confirm(this.msgState.CONFIRM_ADD)){

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

 
       <div class="card mt-3">
         <div class="card-header bg-light">
-          Project informations to Update>> Project ID: <b>{{ projectState.currentProject?.id }}</b>, User ID:
+          <b>Project informations to Update </b>>> Project ID: <b>{{ projectState.currentProject?.id }}</b>, User ID:
             <b>{{ projectState.currentProject?.userId }}</b>, Company ID:
             <b>{{ projectState.currentProject?.companyId }}</b>
 

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

 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 { ProjectsServices } from './../../../../shared/services/projects.service';
 import { ProjectState } from './../../../../ngrx/projects/project.state';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 
   constructor(
     activatedRoute: ActivatedRoute,
-    private projectsService: ProjectsService,
+    private projectsService: ProjectsServices,
     private store: Store<{
       projectReducerKey: ProjectState;
       userReducerKey: UserState;

src/app/pages/projects-manager/projects-management/project-with-company-associated/project-with-company-associated-list/project-with-company-associated-list.component.html

-<div class="container">
   <p-table
     [value]="inputProjectCompanyAssociated"
     responsiveLayout="scroll"
     [showCurrentPageReport]="true"
     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
     [rowsPerPageOptions]="[4, 6, 10]"
+    class="p-3"
   >
     <ng-template pTemplate="header">
       <tr>
         <th>Prioriy</th>
         <th>State</th>
         <th>Description</th>
-        <th>Company related</th>
+        <th>Company</th>
         <th>Company ID</th>
-        <th>Project User ID</th>
+        <th>User ID</th>
         <th>Creation Date</th>
       </tr>
     </ng-template>
       </tr>
     </ng-template>
   </p-table>
-</div>

src/app/pages/projects-manager/projects-management/project-with-user-associated/project-with-user-associated-list/project-with-user-associated-list.component.html

     [showCurrentPageReport]="true"
     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
     [rowsPerPageOptions]="[3, 5, 10]"
+    class="p-3"
   >
     <ng-template pTemplate="header">
       <tr>

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

-<div class="container">
+
   <div *ngIf="inputProjectsList" style="position:relative">
     <input
       type="text"
       (ngModelChange)="onSearch()"
     />
   </div>
-</div>
 
-<div class="container">
   <p-table
     [value]="inputProjectsList"
     responsiveLayout="scroll"
       </tr>
     </ng-template>
   </p-table>
-</div>

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

 import { TableModule } from 'primeng/table';
 import { ButtonModule } from 'primeng/button';
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 
 import { ProjectsManagerRoutingModule } from './projects-manager-routing.module';
 import { ProjectCreateComponent } from './projects-management/project-create/project-create.component';
     ReactiveFormsModule,
     FormsModule
   ],
-  providers:[
-  ]
+  providers:[DatePipe]
 })
 
 export class ProjectsManagerModule { }

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

 
     <ng-container *ngIf="userState as state" [ngSwitch]="state.msgState">
 
-      <ng-container *ngSwitchCase="msgState.DEFAULT_MSG">
+      <ng-container *ngSwitchCase="msgState.FORM_LOADING">
         {{state.msgState}}
       </ng-container>
 
-      <ng-container *ngSwitchCase="msgState.ADDED">
-        <div class="alert-success container p-3 m-3">
-          <span> {{state.msgState}}</span> &nbsp;
-          <button class="btn btn-success" (click)="onNewUser()"> create user</button>
-        </div>
-      </ng-container>
-
       <ng-container *ngSwitchCase="msgState.ERR">
         <div class="alert-danger container pt-3 mt-3">
           <span> {{state.msgState}}</span> &nbsp;
         </div>
       </ng-container>
 
-
-
       <ng-container *ngSwitchCase="msgState.FORM_LOADED">
 
         <div class="card mt-3">
-          <div class="card-header bg-light">Input form of User information</div>
+          <div class="card-header bg-light"><b>User Informations to Create</b></div>
           <div class="card-body">
             <form [formGroup]="userFormGroup" (ngSubmit)="onUserSave(); userFormGroup.reset()">
 
                         </span>
                         <span
                           *ngIf="userFormGroup.controls['address'].get('nomRue')?.errors?.['maxlength']"
-                          >max chars 15
+                          >max chars 50
                         </span>
                       </div>
                     </div>
         </div>
       </ng-container>
 
+      <ng-container *ngSwitchCase="msgState.ADDED">
+        <div class="alert-success container p-3 m-3">
+          <span> {{state.msgState}}</span> &nbsp;
+          <button class="btn btn-success" (click)="onSaveSuccess()"> OK</button>
+        </div>
+      </ng-container>
+
     </ng-container>
 
 </div>

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

+import { Router } from '@angular/router';
+import { GetAllUsersAction } from 'src/app/ngrx/users/users.actions';
 import { DatePipe } from '@angular/common';
-import { UsersService } from '../../../../shared/services/users.service';
+import { UsersServices } from '../../../../shared/services/users.service';
 import { User } from '../../../../shared/models/user/user.model';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import {
   constructor(
     private store: Store<{ userReducerKey: UserState }>,
     private fb: FormBuilder,
-    private usersService: UsersService,
-    private datePipe: DatePipe
+    private usersService: UsersServices,
+    private datePipe: DatePipe,
+    private router: Router
   ) {}
   userState!: UserState;
   readonly msgState = MsgState;
             [
               Validators.required,
               Validators.minLength(3),
-              Validators.maxLength(25),
+              Validators.maxLength(50),
             ],
           ],
           bp: [0, [Validators.required, Validators.min(1)]],
             ],
           ],
         }),
-        createDate: [this.datePipe.transform(new Date(), 'MM dd yyyy')],
+        creationDate: [this.datePipe.transform(new Date(), 'MM dd yyyy')],
       });
     });
   }
     this.usersService.getUserByName(lastname).subscribe((users: User[]) => {
       if (users.length > 0) {
         alert(lastname + ' ' + this.msgState.EXIST);
-        return;
+        this.store.dispatch(new CreateFormUserAddAction({}));//pour reactualiser le formulaire
       } else {
         if (
           window.confirm(
     });
   }
 
-  onNewUser() {
-    this.store.dispatch(new CreateFormUserAddAction({}));
+  onSaveSuccess() {
+   this.router.navigate(['/users-management'])
   }
 
   tryEgain() {

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

 import { UserState } from './../../../../ngrx/users/user.state';
 import {
-  NavigateActionSuccess,
-  SearchUsersAction,
+  NavigateActionSuccess
 } from './../../../../ngrx/users/users.actions';
 import { GetAllUsersAction } from '../../../../ngrx/users/users.actions';
 import { Component, OnInit } from '@angular/core';
    this.store.dispatch(new NavigateActionSuccess({}))
   }
 
-  onSearch(searchForm: any) {
-    this.store.dispatch(new SearchUsersAction(searchForm.keyword));
-  }
 }

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

-<div class="container m-3 p-3">
+<div class="container p-3">
   <ng-container
     *ngIf="usersState$ | async as userState"
     [ngSwitch]="userState.msgState"

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

                       </span>
                       <span
                         *ngIf="userFormGrp.controls['address'].get('nomRue')?.errors?.['maxlength']"
-                        >max chars 15
+                        >max chars 50
                       </span>
                     </div>
                   </div>

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

 import { MsgState } from 'src/app/ngrx/msg.state';
-import { UsersService } from '../../../../shared/services/users.service';
+import { UsersServices } from '../../../../shared/services/users.service';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { CreareFormUserEditAction, UpdateUserFormAction } from '../../../../ngrx/users/users.actions';
 import { UserState } from 'src/app/ngrx/users/user.state';
 
   constructor(
     activatedRoute: ActivatedRoute,
-    private usersService: UsersService,
+    private usersService: UsersServices,
     private store: Store<{ userReducerKey: UserState }>,
     private fb: FormBuilder,
     private router: Router
                 [
                   Validators.required,
                   Validators.minLength(3),
-                  Validators.maxLength(25),
+                  Validators.maxLength(50),
                 ],
               ],
               bp: [

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

     type="text"
     class="form-control"
     id="search"
-    placeholder="search a project by name"
+    placeholder="search a user by firstname"
     [(ngModel)]="firstname"
     (ngModelChange)="onSearch()"
   />

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

     </ng-container>
 
   </ng-container>
-
 </div>

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

     FormsModule,
     ReactiveFormsModule
   ],
+
+  providers:[DatePipe]
 })
 export class UsersManagerModule { }

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

 @Injectable({
   providedIn: 'root'
 })
-export class CompaniesService {
+export class CompaniesServices {
 
   constructor(private http: HttpClient) { }
 
     return this.http.get<Company[]>(this.baseUrl + '/companies');
   }
 
-  getAllProjectsOfCompany(): Observable<Company[]> {
+  getCompany_s_Projects(): Observable<Company[]> {
     return this.http
       .get<Company[]>(this.baseUrl + '/companies?_embed=projects')
       .pipe(catchError(this.handleError));

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

 @Injectable({
   providedIn: 'root',
 })
-export class ProjectsService implements OnInit {
+export class ProjectsServices implements OnInit {
   constructor(private http: HttpClient) {}
   ngOnInit(): void {}
 

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

 @Injectable({
   providedIn: 'root',
 })
-export class UsersService {
+export class UsersServices {
   constructor(private http: HttpClient) {}
 
   handleError(err: HttpErrorResponse) {
       .pipe(catchError(this.handleError));
   }
 
-  searchUser(keyword: string): Observable<User[]> {
+  searchUser(firstnameKeyword: string): Observable<User[]> {
    let users = this.http.get<User[]>(
-      this.baseUrl + '/users?firstname_like=' + keyword
+      this.baseUrl + '/users?firstname_like=' + firstnameKeyword
     );
 
     return users;