commit modification

db_users_projects_companies.json

@@ -225,9 +225,9 @@
       "projectName": "Project-3",
       "priority": 1,
       "creationDate": "03 06 2022",
-      "companyId": 3,
-      "description": "Project description for action",
-      "userId": 4,
+      "companyId": 1,
+      "description": "Project of training users to angular",
+      "userId": 3,
       "state": "END"
     },
     {
@@ -235,9 +235,9 @@
       "projectName": "Project-4",
       "priority": 1,
       "creationDate": "03 06 2022",
-      "companyId": 3,
+      "companyId": 4,
       "description": "Project description for action",
-      "userId": 3,
+      "userId": 4,
       "state": "END"
     },
     {
@@ -245,10 +245,20 @@
       "projectName": "Project-5",
       "priority": 1,
       "creationDate": "06 07 2022",
-      "companyId": 4,
+      "companyId": 1,
       "description": "Project of  creating and training models",
       "userId": 12,
       "state": "END"
+    },
+    {
+      "id": 6,
+      "projectName": "Project-test",
+      "priority": 1,
+      "creationDate": "06 08 2022",
+      "companyId": 4,
+      "description": "project for test adding ",
+      "userId": 12,
+      "state": "IN PROGRESS"
     }
   ]
 }

src/app/ngrx/msg.state.ts

@@ -6,9 +6,9 @@ export enum MsgState {
   FORM_LOADING = 'FORM LOADING',
   FORM_LOADED = 'FORM LOADED',
   FORM_LOAD_ERR= 'FORM LOADING ERROR',
-  CONFIRM_ADD = 'CONFIRM ADDING OF',
+  CONFIRM_ADD = 'CONFIRM ADDING',
   CONFIRM_UPDATE = 'CONFIRM UPDATE',
-  CONFIRM_DEL = 'CONFIRM DELETION OF',
+  CONFIRM_DEL = 'CONFIRM DELETION',
   ADDED = 'SUCCESSFULLY ADDED',
   EXIST = 'ALREADY EXISTS',
   UPDATED = ' SUCCESSFULLY UPDATED',

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

@@ -1,6 +1,6 @@
 import { Project } from './../../shared/models/project/project.model';
 import { ProjectActionTypes } from './project.action.types';
-import { ProjectActionUnion, GetAllProjectsActionSuccess, GetAllProjectsActionError } from './projects.actions';
+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';
@@ -13,6 +13,7 @@ export class ProjectGet {
     private projectActions: Actions
   ) {}
 
+  //get all projects
   getAllProjectsEffect: Observable<ProjectActionUnion> = createEffect(
     () => this.projectActions.pipe(
       ofType(ProjectActionTypes.GET_ALL_PROJECTS),
@@ -24,4 +25,30 @@ export class ProjectGet {
       })
     )
   );
+
+  //get project with user associated
+  getProjectWithUserAssociated: Observable<ProjectActionUnion> = createEffect(
+    () => this.projectActions.pipe(
+      ofType(ProjectActionTypes.GET_PROJECT_WITH_USER_ASSOCIATED),
+      mergeMap( (action: ProjectActionUnion)=>{
+        return this.projectsService.getProjectWithUserAsociated().pipe(
+          map((listAny:any)=> new GetProjectWithUserAssociatedActionSuccess(listAny)),
+          catchError(err => of(new GetProjectWithUserAssociatedActionError(err.message)))
+        )
+      })
+    )
+  );
+
+  //get project with company associated
+  getProjectWithCompanyAssociated: Observable<ProjectActionUnion> = createEffect(
+    () => this.projectActions.pipe(
+      ofType(ProjectActionTypes.GET_PROJECT_WITH_COMPANY_ASSOCIATED),
+      mergeMap( (action: ProjectActionUnion)=>{
+        return this.projectsService.getProjectWithCompanyAssociated().pipe(
+          map((listAny:any)=> new GetProjectWithCompanyAssociatedActionSuccess(listAny)),
+          catchError(err => of(new GetProjectWithCompanyAssociatedActionError(err.message)))
+        )
+      })
+    )
+  );
 }

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

@@ -32,4 +32,15 @@ export enum ProjectActionTypes{
   DELETE_PROJECT = '[Project] DELETE PROJECT',
   DELETE_PROJECT_SUCCESS = '[Project] DELETE PROJECT SUCCESS',
   DELETE_PROJECT_ERROR = '[Project] DELETE PROJECT ERROR',
+
+  // get project with user associated
+  GET_PROJECT_WITH_USER_ASSOCIATED = 'GET PROJECT WITH USER ASSOCIATED',
+  GET_PROJECT_WITH_USER_ASSOCIATED_SUCCESS = 'GET PROJECT WITH USER ASSOCIATED SUCCESS',
+  GET_PROJECT_WITH_USER_ASSOCIATED_ERROR = 'GET PROJECT WITH USER ASSOCIATED ERROR',
+
+  // get project with company associated
+  GET_PROJECT_WITH_COMPANY_ASSOCIATED = 'GET PROJECT WITH COMPANY ASSOCIATED',
+  GET_PROJECT_WITH_COMPANY_ASSOCIATED_SUCCESS = 'GET PROJECT WITH COMPANY ASSOCIATED SUCCESS',
+  GET_PROJECT_WITH_COMPANY_ASSOCIATED_ERROR = 'GET PROJECT WITH COMPANY ASSOCIATED ERROR',
+
 }

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

@@ -97,6 +97,34 @@ export class DeleteProjectActionError implements Action{
   constructor(public payload: string){}
 }
 
+// get project with user associated
+export class GetProjectWithUserAssociatedAction implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.GET_PROJECT_WITH_USER_ASSOCIATED;
+  constructor(public payload: any){}
+}
+export class GetProjectWithUserAssociatedActionSuccess implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.GET_PROJECT_WITH_USER_ASSOCIATED_SUCCESS;
+  constructor(public payload: any){}
+}
+export class GetProjectWithUserAssociatedActionError implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.GET_PROJECT_WITH_USER_ASSOCIATED_ERROR;
+  constructor(public payload: string){}
+}
+
+// get project with company associated
+export class GetProjectWithCompanyAssociatedAction implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.GET_PROJECT_WITH_COMPANY_ASSOCIATED;
+  constructor(public payload: any){}
+}
+export class GetProjectWithCompanyAssociatedActionSuccess implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.GET_PROJECT_WITH_COMPANY_ASSOCIATED_SUCCESS;
+  constructor(public payload: any){}
+}
+export class GetProjectWithCompanyAssociatedActionError implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.GET_PROJECT_WITH_COMPANY_ASSOCIATED_ERROR;
+  constructor(public payload: string){}
+}
+
 export type ProjectActionUnion =
   | GetAllProjectsAction
   | GetAllProjectsActionSuccess
@@ -115,4 +143,10 @@ export type ProjectActionUnion =
   | UpdateProjectWithFormDataActionError
   | DeleteProjectAction
   | DeleteProjectActionSuccess
-  | DeleteProjectActionError;
+  | DeleteProjectActionError
+  | GetProjectWithUserAssociatedAction
+  | GetProjectWithUserAssociatedActionSuccess
+  | GetProjectWithUserAssociatedActionError
+  | GetProjectWithCompanyAssociatedAction
+  | GetProjectWithCompanyAssociatedActionSuccess
+  | GetProjectWithCompanyAssociatedActionError;

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

@@ -11,14 +11,15 @@ const projectInitState: ProjectState = {
   currentProject: null,
   projectsList: [],
   msgState: MsgState.INIT_STATE,
-  serverErrorMsg: 'no error massage'
+  serverErrorMsg: 'no error massage',
 };
 
 export function projectReducer(
   state: ProjectState = projectInitState,
-  projectAction: Action
+  action: Action
 ): ProjectState {
-  switch (projectAction.type) {
+
+  switch (action.type) {
     // get all projects action reducer
     case ProjectActionTypes.GET_ALL_PROJECTS:
       return {
@@ -30,14 +31,14 @@ export function projectReducer(
       return {
         ...state,
         msgState: MsgState.LOADED,
-        projectsList: (<ProjectActionUnion>projectAction).payload,
+        projectsList: (<ProjectActionUnion>action).payload,
       };
 
     case ProjectActionTypes.GET_ALL_PROJECTS_ERROR:
       return {
         ...state,
         msgState: MsgState.ERR,
-        serverErrorMsg: (<ProjectActionUnion>projectAction).payload,
+        serverErrorMsg: (<ProjectActionUnion>action).payload,
       };
 
     // create project form to add action reducer
@@ -58,7 +59,7 @@ export function projectReducer(
       return {
         ...state,
         msgState: MsgState.ERR,
-        serverErrorMsg: (<ProjectActionUnion>projectAction).payload,
+        serverErrorMsg: (<ProjectActionUnion>action).payload,
       };
 
     //saving project form data
@@ -70,7 +71,7 @@ export function projectReducer(
       };
 
     case ProjectActionTypes.CREATE_PROJECT_FORM_ADD_SUCCESS:
-      let createdProject: Project = (<ProjectActionUnion>projectAction).payload;
+      let createdProject: Project = (<ProjectActionUnion>action).payload;
       let projectsListCopy1: Project[] = [...state.projectsList];
       projectsListCopy1.push(createdProject);
 
@@ -88,7 +89,7 @@ export function projectReducer(
       };
 
     case ProjectActionTypes.CREATE_PROJECT_FORM_UPDATE_SUCCESS:
-      let projectToUpdate: Project = (<ProjectActionUnion>projectAction)
+      let projectToUpdate: Project = (<ProjectActionUnion>action)
         .payload;
       return {
         ...state,
@@ -100,7 +101,7 @@ export function projectReducer(
       return {
         ...state,
         msgState: MsgState.FORM_LOAD_ERR,
-        serverErrorMsg: (<ProjectActionUnion>projectAction).payload,
+        serverErrorMsg: (<ProjectActionUnion>action).payload,
       };
 
     //update project with form data
@@ -112,43 +113,85 @@ export function projectReducer(
       };
 
     case ProjectActionTypes.UPDATE_PROJECT_WITH_FORM_DATA_SUCCESS:
-      let updatedProject: Project = (<ProjectActionUnion>projectAction).payload;
+      let updatedProject: Project = (<ProjectActionUnion>action).payload;
       let projectsListCopy2 = [...state.projectsList];
       projectsListCopy2 = projectsListCopy2.map((project) =>
         project.id == updatedProject.id ? updatedProject : project
       );
 
-      return{
+      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
-        };
+        projectsList: projectsListCopy2,
+      };
+
+    // delete project
+    case ProjectActionTypes.DELETE_PROJECT:
+      return {
+        ...state,
+        msgState: MsgState.DELETE,
+      };
+
+    case ProjectActionTypes.DELETE_PROJECT_SUCCESS:
+      let deletedProject = (<ProjectActionUnion>action).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>action).payload,
+      };
+
+    // get project with user associated
+    case ProjectActionTypes.GET_PROJECT_WITH_USER_ASSOCIATED:
+      return {
+        ...state,
+        msgState: MsgState.LOADING,
+      };
+
+    case ProjectActionTypes.GET_PROJECT_WITH_USER_ASSOCIATED_SUCCESS:
+      return{
+        ...state,
+        msgState: MsgState.LOADED,
+        projectsList: (<ProjectActionUnion> action).payload
+      };
+
+    case ProjectActionTypes.GET_PROJECT_WITH_USER_ASSOCIATED_ERROR:
+      return{
+        ...state,
+        msgState: MsgState.ERR,
+        serverErrorMsg: (<ProjectActionUnion> action).payload
+      };
+
+    // get project with company associated
+    case ProjectActionTypes.GET_PROJECT_WITH_COMPANY_ASSOCIATED:
+      return {
+        ...state,
+        msgState: MsgState.LOADING,
+      };
+
+    case ProjectActionTypes.GET_PROJECT_WITH_COMPANY_ASSOCIATED_SUCCESS:
+      return{
+        ...state,
+        msgState: MsgState.LOADED,
+        projectsList: (<ProjectActionUnion> action).payload
+      };
+
+    case ProjectActionTypes.GET_PROJECT_WITH_COMPANY_ASSOCIATED_ERROR:
+      return{
+        ...state,
+        msgState: MsgState.ERR,
+        serverErrorMsg: (<ProjectActionUnion> action).payload
+      };
 
     default:
       return { ...state };

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

@@ -58,7 +58,7 @@ export class UserGetSearchEffects {
     ()=> this.userActions.pipe(
       ofType(UserActionTypes.GET_USER_S_PROJECTS),
       mergeMap( (action: UserActionUnion)=>{
-        return this.usersService.getUser_sProjects().pipe(
+        return this.usersService.getUser_s_Projects().pipe(
           map( (users: any)=> new GetUser_s_ProjectsSuccess(users)),
           catchError(err => of(new GetUser_s_ProjectsError(err.message)))
         )

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

@@ -77,7 +77,7 @@ export class UsersEffects {
     this.userActions.pipe(
       ofType(UserActionTypes.GET_USER_S_PROJECTS),
       mergeMap((action: UserActionUnion) => {
-        return this.usersService.getUser_sProjects().pipe(
+        return this.usersService.getUser_s_Projects().pipe(
           map((users: any) => new GetUser_s_ProjectsSuccess(users)),
           catchError((err) => of(new GetUser_s_ProjectsError(err.message)))
         );

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

@@ -1,5 +1,5 @@
 <mat-sidenav-container class="sidenav-container">
-  <mat-sidenav #drawer class="sidenav" fixedInViewport
+  <mat-sidenav #drawer class="sidenav bg-light" fixedInViewport
       [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
       [mode]="(isHandset$ | async) ? 'over' : 'side'"
       [opened]="(isHandset$ | async) === false">

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

@@ -1,10 +1,12 @@
 <div class="container">
-  <div *ngIf="inputCompaniesList && inputCompaniesList.length>0">
+  <div *ngIf="inputCompaniesList">
     <input
       type="text"
       class="form-control"
       id="search"
       placeholder="search a company by name"
+      [(ngModel)]="companyName"
+      (ngModelChange)="onSearch()"
     />
   </div>
 
@@ -12,6 +14,7 @@
   <p-table
     [value]="inputCompaniesList"
     responsiveLayout="scroll"
+    *ngIf="inputCompaniesList.length>0"
     styleClass="p-datatable-striped"
     [paginator]="true"
     [rows]="4"

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

@@ -1,5 +1,5 @@
 import { MsgState } from 'src/app/ngrx/msg.state';
-import { DeleteCompany } from './../../../../ngrx/companies/companies.actions';
+import { DeleteCompany, 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';
@@ -27,9 +27,25 @@ export class CompaniesListComponent implements OnInit {
   }
 
   onCompanyDelete(company: Company) {
-    if(window.confirm(this.msgState.CONFIRM_DEL)){
+    if (window.confirm(this.msgState.CONFIRM_DEL)) {
       this.store.dispatch(new DeleteCompany(company));
     }
   }
 
+  companyName!: string;
+
+  onSearch() {
+    if(this.companyName==''){
+      this.store.dispatch(new GetAllCompaniesAction({})); //to refresh list
+    }
+    else{
+      this.inputCompaniesList = this.inputCompaniesList.filter(
+        (company: Company) => {
+          return company.companyName
+            .toLocaleLowerCase()
+            .match(this.companyName.toLocaleLowerCase());
+        }
+      );
+    }
+  }
 }

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

@@ -9,7 +9,7 @@
   <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-header">Company informations to update</div>
 
       <div class="card-body">
         <form [formGroup]="companyFormGroup"

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

@@ -1,4 +1,4 @@
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TableModule } from 'primeng/table';
 import { ButtonModule } from 'primeng/button';
 import { NgModule } from '@angular/core';
@@ -25,7 +25,8 @@ import { CompanyUpdateComponent } from './companies-management/company-update/co
     CompaniesManagerRoutingModule,
     ButtonModule,
     TableModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    FormsModule
   ]
 })
 export class CompaniesManagerModule { }

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

@@ -12,143 +12,139 @@
       <!-- create form -->
       <div class="card mt-3">
         <div class="card-header bg-light">
-          <b>Informations Card for Project to Create </b>
+          <b>Project Informations 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
-                >
+            [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>
-            </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
-                >
+              <!-- 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="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 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>
-
-            <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>
-
+          </form>
         </div>
       </div>
     </ng-container>

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

@@ -20,9 +20,9 @@
       <button
         pButton
         type="button"
-        label="project->user involved"
+        label="project-user-associated"
         class="btn btn-outline-primary"
-        (click)="onProjectsVsUsersGet()"
+        (click)="onGetProjectWithUserAssociated()"
       ></button>
       &nbsp;
       <button
@@ -30,7 +30,7 @@
         type="button"
         label="project->company"
         class="btn btn-outline-primary"
-        (click)="onProjectCompanyAssociated()"
+        (click)="onGetProjectWithCompanyAssociated()"
       ></button>
     </div>
   </nav>

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

@@ -21,7 +21,11 @@ export class ProjectNavBarComponent {
     this.store.dispatch(new GetAllProjectsAction({}));
   }
 
-  onProjectsVsUsersGet() {}
+  onGetProjectWithUserAssociated() {
+    this.router.navigate(['/project-user-asscociated'])
+  }
 
-  onProjectCompanyAssociated() {}
+  onGetProjectWithCompanyAssociated() {
+    this.router.navigate(['/project-company-asscociated'])
+  }
 }

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

@@ -13,7 +13,7 @@
 
       <div class="card mt-3">
         <div class="card-header bg-light">
-          >> Project ID: <b>{{ projectState.currentProject?.id }}</b>, User ID:
+          Project informations to Update>> Project ID: <b>{{ projectState.currentProject?.id }}</b>, User ID:
             <b>{{ projectState.currentProject?.userId }}</b>, Company ID:
             <b>{{ projectState.currentProject?.companyId }}</b>
 
@@ -23,107 +23,118 @@
             [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 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 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>
 
-              <!-- 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="companyId">Company ID</label>
+                <select formControlName="companyId" class="form-control">
+                  <option value="" disabled>select company ID</option>
+                  <option
+                    *ngFor="let company of companySate.companiesList"
+                    [ngValue]="company.id"
+                  >
+                    {{ company.id }}
+                  </option>
+                </select>
+              </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>
+            <!-- 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>
 
-            <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 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
@@ -141,8 +152,9 @@
 
     <ng-container *ngSwitchCase="msgState.UPDATED">
       <div class="alert-success container p-3 m-3" style="width: 30em">
+        {{ projectState.msgState }}
         <button class="btn btn-success" (click)="onUpdateOk()">
-          {{ projectState.msgState }}
+          Ok
         </button>
       </div>
     </ng-container>

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

@@ -1,3 +1,5 @@
+import { GetAllCompaniesAction } from './../../../../ngrx/companies/companies.actions';
+import { CompanyState } from './../../../../ngrx/companies/company.state';
 import { UpdateProjectWithFormDataAction } from './../../../../ngrx/projects/projects.actions';
 import { GetAllUsersAction } from 'src/app/ngrx/users/users.actions';
 import { UserState } from './../../../../ngrx/users/user.state';
@@ -12,7 +14,6 @@ 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',
@@ -30,6 +31,7 @@ export class ProjectUpdateComponent implements OnInit {
     private store: Store<{
       projectReducerKey: ProjectState;
       userReducerKey: UserState;
+      companyReducerKey: CompanyState;
     }>,
     private fb: FormBuilder,
     private router: Router
@@ -48,13 +50,20 @@ export class ProjectUpdateComponent implements OnInit {
   projectMsgState = ProjectMsgState;
 
   userState!: UserState;
+  companySate!: CompanyState;
 
   ngOnInit(): void {
+
     this.store.dispatch(new GetAllUsersAction({}));
     this.store
       .select('userReducerKey')
       .subscribe((userState) => (this.userState = userState));
 
+    this.store.dispatch(new GetAllCompaniesAction({}));
+    this.store.subscribe(
+      (companyState) => (this.companySate = companyState.companyReducerKey)
+    );
+
     this.projectsService.getProjectById(this.projectId).subscribe((project) => {
       this.store.dispatch(new CreateProjectFormUpdateAction(project));
 
@@ -98,9 +107,11 @@ export class ProjectUpdateComponent implements OnInit {
   }
 
   onProjectUpdate() {
-    this.store.dispatch(
-      new UpdateProjectWithFormDataAction(this.projectFormGroup.value)
-    );
+    if(window.confirm(this.msgState.CONFIRM_UPDATE)){
+      this.store.dispatch(
+        new UpdateProjectWithFormDataAction(this.projectFormGroup.value)
+      );
+    }
   }
 
   onUpdateOk() {

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

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

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

@@ -0,0 +1,47 @@
+<div class="container">
+  <p-table
+    [value]="inputProjectCompanyAssociated"
+    responsiveLayout="scroll"
+    styleClass="p-datatable-striped"
+    *ngIf="inputProjectCompanyAssociated && inputProjectCompanyAssociated.length > 0"
+    [paginator]="true"
+    [rows]="4"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+    [rowsPerPageOptions]="[4, 6, 10]"
+  >
+    <ng-template pTemplate="header">
+      <tr>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Prioriy</th>
+        <th>State</th>
+        <th>Description</th>
+        <th>Company related</th>
+        <th>Company ID</th>
+        <th>Project User ID</th>
+        <th>Creation Date</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-project>
+      <tr>
+        <td>{{ project.id }}</td>
+        <td>{{ project.projectName }}</td>
+        <td>{{ project.priority }}</td>
+        <td>{{ project.state }}</td>
+        <td>{{ project.description }}</td>
+        <td>
+          <ul>
+            <li>Company ID: {{ project.company.id}}</li>
+            <li>Company Name: {{ project.company.companyName}}</li>
+            <li>Company Type: {{ project.company.companyType}}</li>
+            <li>Creation Date: {{ project.company.creationDate}}</li>
+          </ul>
+        </td>
+        <td>{{ project.companyId }}</td>
+        <td>{{ project.userId }}</td>
+        <td>{{ project.creationDate | date:'dd MM yyyy' }}</td>
+      </tr>
+    </ng-template>
+  </p-table>
+</div>

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

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

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

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-project-with-company-associated-list',
+  templateUrl: './project-with-company-associated-list.component.html',
+  styleUrls: ['./project-with-company-associated-list.component.css']
+})
+export class ProjectWithCompanyAssociatedListComponent implements OnInit {
+
+  constructor() { }
+
+  @Input() inputProjectCompanyAssociated!: any;
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,20 @@
+<div class="container">
+  <ng-container
+    *ngIf="projectState$ | async as projectState"
+    [ngSwitch]="projectState.msgState"
+  >
+    <ng-container *ngSwitchCase="msgState.LOADING">
+      {{ projectState.msgState }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.ERR">
+      {{ projectState.msgState }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.LOADED">
+      <app-project-with-company-associated-list
+        [inputProjectCompanyAssociated]="projectState.projectsList"
+      ></app-project-with-company-associated-list>
+    </ng-container>
+  </ng-container>
+</div>

src/app/pages/projects-manager/projects-management/project-with-company-associated/project-with-company-associated.component.spec.ts

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

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

@@ -0,0 +1,27 @@
+import { GetProjectWithCompanyAssociatedAction } from './../../../../ngrx/projects/projects.actions';
+import { Observable } from 'rxjs';
+import { MsgState } from 'src/app/ngrx/msg.state';
+import { ProjectState } from 'src/app/ngrx/projects/project.state';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-project-with-company-associated',
+  templateUrl: './project-with-company-associated.component.html',
+  styleUrls: ['./project-with-company-associated.component.css']
+})
+export class ProjectWithCompanyAssociatedComponent implements OnInit {
+
+  projectState$!: Observable<ProjectState>;
+  msgState = MsgState;
+
+  constructor(private store: Store<{projectReducerKey: ProjectState}>) { }
+
+  ngOnInit(): void {
+
+
+    this.store.dispatch(new GetProjectWithCompanyAssociatedAction({}));
+    this.projectState$= this.store.select('projectReducerKey');
+  }
+
+}

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

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

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

@@ -0,0 +1,52 @@
+<p-table
+    [value]="inputProjectsListWithUserAssociated"
+    responsiveLayout="scroll"
+    styleClass="p-datatable-striped"
+    *ngIf="inputProjectsListWithUserAssociated && inputProjectsListWithUserAssociated.length > 0"
+    [paginator]="true"
+    [rows]="3"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+    [rowsPerPageOptions]="[3, 5, 10]"
+  >
+    <ng-template pTemplate="header">
+      <tr>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Priority</th>
+        <th>Project state</th>
+        <th>Company ID</th>
+        <th>Description</th>
+        <th>Involved user</th>
+        <th>User ID</th>
+        <th>Creation Date</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-project>
+      <tr>
+        <td>{{ project.id }}</td>
+        <td>{{ project.projectName }}</td>
+        <td>{{ project.priority }}</td>
+        <td>{{ project.state }}</td>
+        <td>{{ project.companyId }}</td>
+        <td>{{ project.description }}</td>
+        <td>
+          <ul>
+            <li>User ID: {{ project.user.id }}</li>
+            <li>{{ project.user.firstname }} {{ project.user.lastname }}</li>
+            <li>{{ project.user.email }}</li>
+            <li>
+              {{ project.user.address.numRue }}
+              {{ project.user.address.nomRue }}
+            </li>
+            <li>
+              {{ project.user.address.bp }} {{ project.user.address.ville }},
+              {{ project.user.address.pays }}
+            </li>
+          </ul>
+        </td>
+        <td>{{ project.userId }}</td>
+        <td>{{ project.creationDate | date: "dd MM yyyy" }}</td>
+      </tr>
+    </ng-template>
+  </p-table>

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

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

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

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-project-with-user-associated-list',
+  templateUrl: './project-with-user-associated-list.component.html',
+  styleUrls: ['./project-with-user-associated-list.component.css']
+})
+export class ProjectWithUserAssociatedListComponent implements OnInit {
+
+  constructor() { }
+  @Input() inputProjectsListWithUserAssociated!: any;
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,15 @@
+<div class="container" *ngIf="projectState">
+  <ng-container *ngIf="projectState.msgState == msgState.LOADING">
+    {{ msgState.LOADING }}
+  </ng-container>
+
+  <ng-container *ngIf="projectState.msgState == msgState.ERR">
+    {{ msgState.ERR }}
+  </ng-container>
+
+  <ng-container *ngIf="projectState.msgState == msgState.LOADED">
+    <app-project-with-user-associated-list
+      [inputProjectsListWithUserAssociated]="projectState.projectsList"
+    ></app-project-with-user-associated-list>
+  </ng-container>
+</div>

src/app/pages/projects-manager/projects-management/project-with-user-associated/project-with-user-associated.component.spec.ts

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

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

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { MsgState } from 'src/app/ngrx/msg.state';
+import { ProjectState } from 'src/app/ngrx/projects/project.state';
+import { GetProjectWithUserAssociatedAction } from 'src/app/ngrx/projects/projects.actions';
+
+@Component({
+  selector: 'app-project-with-user-associated',
+  templateUrl: './project-with-user-associated.component.html',
+  styleUrls: ['./project-with-user-associated.component.css']
+})
+export class ProjectWithUserAssociatedComponent implements OnInit {
+
+
+  projectState!: ProjectState;
+  msgState = MsgState;
+  constructor(private store:Store<{projectReducerKey: ProjectState}>) { }
+
+  ngOnInit(): void {
+
+    this.store.dispatch(new GetProjectWithUserAssociatedAction({}));
+    this.store.subscribe(projectState => {
+      this.projectState = projectState.projectReducerKey;
+    })
+  }
+
+
+}

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

@@ -1,25 +1,28 @@
 <div class="container">
-  <div *ngIf="inputProjectState.projectsList && inputProjectState.projectsList.length>0" style="position:relative">
+  <div *ngIf="inputProjectsList" style="position:relative">
     <input
       type="text"
       class="form-control"
       id="search"
       placeholder="search a project by name"
-      width="20"
+      [(ngModel)]="projectName"
+      (ngModelChange)="onSearch()"
     />
   </div>
 </div>
 
 <div class="container">
   <p-table
-    [value]="inputProjectState.projectsList"
+    [value]="inputProjectsList"
     responsiveLayout="scroll"
+    *ngIf="inputProjectsList.length>0"
     styleClass="p-datatable-striped"
     [paginator]="true"
     [rows]="5"
     [showCurrentPageReport]="true"
     currentPageReportTemplate="{first} - {last} of {totalRecords} projects"
     [rowsPerPageOptions]="[5, 8, 10]"
+
   >
     <ng-template pTemplate="header">
       <tr>

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

@@ -1,3 +1,4 @@
+import { GetAllProjectsAction } from './../../../../ngrx/projects/projects.actions';
 import { MsgState } from 'src/app/ngrx/msg.state';
 import { Store } from '@ngrx/store';
 import { Router } from '@angular/router';
@@ -17,7 +18,7 @@ export class ProjectsListComponent implements OnInit {
     private store: Store<{ projectReducerKey: ProjectState }>
   ) {}
 
-  @Input() inputProjectState!: ProjectState;
+  @Input() inputProjectsList!: Project[];
 
   ngOnInit(): void {}
 
@@ -26,8 +27,24 @@ export class ProjectsListComponent implements OnInit {
   }
 
   onProjectDelete(project: Project) {
-    if(window.confirm(MsgState.CONFIRM_DEL)){
+    if (window.confirm(MsgState.CONFIRM_DEL)) {
       this.store.dispatch(new DeleteProjectAction(project));
     }
   }
+
+  projectName!: string;
+  onSearch() {
+   if(this.projectName==''){
+     this.store.dispatch(new GetAllProjectsAction({}));
+   }
+   else{
+    this.inputProjectsList = this.inputProjectsList.filter(
+      (project: Project) => {
+        return project.projectName
+          .toLocaleLowerCase()
+          .match(this.projectName.toLocaleLowerCase());
+      }
+    );
+   }
+  }
 }

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

@@ -17,7 +17,7 @@
     </ng-container>
 
     <ng-container *ngSwitchCase="msgState.LOADED">
-      <app-projects-list [inputProjectState]="projectState"></app-projects-list>
+      <app-projects-list [inputProjectsList]="projectState.projectsList"></app-projects-list>
     </ng-container>
 
   </ng-container>

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

@@ -1,3 +1,5 @@
+import { ProjectWithCompanyAssociatedComponent } from './projects-management/project-with-company-associated/project-with-company-associated.component';
+import { ProjectWithUserAssociatedComponent } from './projects-management/project-with-user-associated/project-with-user-associated.component';
 import { ProjectUpdateComponent } from './projects-management/project-update/project-update.component';
 import { ProjectsManagementComponent } from './projects-management/projects-management.component';
 import { ProjectCreateComponent } from './projects-management/project-create/project-create.component';
@@ -8,6 +10,14 @@ const routes: Routes = [
   { path: 'project-create', component: ProjectCreateComponent },
   { path: 'projects-management', component: ProjectsManagementComponent },
   { path: 'project-update/:projectId', component: ProjectUpdateComponent },
+  {
+    path: 'project-user-asscociated',
+    component: ProjectWithUserAssociatedComponent,
+  },
+  {
+    path: 'project-company-asscociated',
+    component: ProjectWithCompanyAssociatedComponent,
+  },
 ];
 
 @NgModule({

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

@@ -1,7 +1,7 @@
 import { TableModule } from 'primeng/table';
 import { ButtonModule } from 'primeng/button';
 import { NgModule } from '@angular/core';
-import { CommonModule, DatePipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
 
 import { ProjectsManagerRoutingModule } from './projects-manager-routing.module';
 import { ProjectCreateComponent } from './projects-management/project-create/project-create.component';
@@ -9,9 +9,11 @@ import { ProjectNavBarComponent } from './projects-management/project-nav-bar/pr
 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';
-
-
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ProjectWithUserAssociatedComponent } from './projects-management/project-with-user-associated/project-with-user-associated.component';
+import { ProjectWithUserAssociatedListComponent } from './projects-management/project-with-user-associated/project-with-user-associated-list/project-with-user-associated-list.component';
+import { ProjectWithCompanyAssociatedComponent } from './projects-management/project-with-company-associated/project-with-company-associated.component';
+import { ProjectWithCompanyAssociatedListComponent } from './projects-management/project-with-company-associated/project-with-company-associated-list/project-with-company-associated-list.component';
 
 
 @NgModule({
@@ -20,7 +22,11 @@ import { ReactiveFormsModule } from '@angular/forms';
     ProjectNavBarComponent,
     ProjectsManagementComponent,
     ProjectsListComponent,
-    ProjectUpdateComponent
+    ProjectUpdateComponent,
+    ProjectWithUserAssociatedComponent,
+    ProjectWithUserAssociatedListComponent,
+    ProjectWithCompanyAssociatedComponent,
+    ProjectWithCompanyAssociatedListComponent,
 
   ],
   imports: [
@@ -28,7 +34,8 @@ import { ReactiveFormsModule } from '@angular/forms';
     ProjectsManagerRoutingModule,
     ButtonModule,
     TableModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    FormsModule
   ],
   providers:[
   ]

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

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

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

@@ -1,7 +1,17 @@
+<div *ngIf="inputUsersList" style="position:relative">
+  <input
+    type="text"
+    class="form-control"
+    id="search"
+    placeholder="search a project by name"
+    [(ngModel)]="firstname"
+    (ngModelChange)="onSearch()"
+  />
+</div>
 <p-table
-[value]="inputState.usersList"
+[value]="inputUsersList"
 responsiveLayout="scroll"
-*ngIf="inputState.usersList && inputState.usersList.length > 0"
+*ngIf="inputUsersList.length > 0"
 styleClass="p-datatable-striped"
 [paginator]="true"
 [rows]="5"

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

@@ -1,7 +1,6 @@
+import { GetAllUsersAction } from 'src/app/ngrx/users/users.actions';
 import { Router } from '@angular/router';
-import {
-  DeleteUsersAction,
-} from './../../../../ngrx/users/users.actions';
+import { DeleteUsersAction } from './../../../../ngrx/users/users.actions';
 import { User } from 'src/app/shared/models/user/user.model';
 import { Input } from '@angular/core';
 import { Component } from '@angular/core';
@@ -15,7 +14,7 @@ import { MsgState } from 'src/app/ngrx/msg.state';
   styleUrls: ['./users-list.component.css'],
 })
 export class UsersListComponent {
-  @Input() inputState!: UserState;
+  @Input() inputUsersList!: User[];
 
   constructor(
     private store: Store<{ userReducerKey: UserState }>,
@@ -23,12 +22,31 @@ export class UsersListComponent {
   ) {}
 
   onUserEdit(user: User) {
-    this.router.navigateByUrl('/user-update/'+user.id)
+    this.router.navigateByUrl('/user-update/' + user.id);
   }
 
   onUserDelete(user: User) {
-    if (window.confirm(MsgState.CONFIRM_DEL+' '+user.firstname+' '+user.lastname)) {
+    if (
+      window.confirm(
+        MsgState.CONFIRM_DEL + ' ' + user.firstname + ' ' + user.lastname
+      )
+    ) {
       this.store.dispatch(new DeleteUsersAction(user));
     }
   }
+
+  firstname!: string;
+
+  onSearch() {
+    if(this.firstname==''){
+      this.store.dispatch(new GetAllUsersAction({})); //refresh
+    }
+    else{
+      this.inputUsersList = this.inputUsersList.filter((user: User) => {
+        return user.firstname
+          .toLocaleLowerCase()
+          .match(this.firstname.toLocaleLowerCase());
+      });
+    }
+  }
 }

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

@@ -15,7 +15,7 @@
     </ng-container>
 
     <ng-container *ngSwitchCase="msgState.LOADED">
-      <app-users-list [inputState]="userState"></app-users-list>
+      <app-users-list [inputUsersList]="userState.usersList"></app-users-list>
     </ng-container>
 
   </ng-container>

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

@@ -33,7 +33,7 @@ export class ProjectsService implements OnInit {
     return this.http.get<Project[]>(this.baseUrl + '/projects');
   }
 
-  getAllProjectsWithUsersAsociated(): Observable<Project[]> {
+  getProjectWithUserAsociated(): Observable<Project[]> {
     return this.http
       .get<Project[]>(this.baseUrl + '/projects?_expand=user')
       .pipe(catchError(this.handleError));

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

@@ -36,7 +36,7 @@ export class UsersService {
     return allUsers$;
   }
 
-  getUser_sProjects(): Observable<any> {
+  getUser_s_Projects(): Observable<any> {
     return this.http
       .get<any>(this.baseUrl + '/users?_embed=projects')
       .pipe(catchError(this.handleError));