first commit

.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.vscode/extensions.json

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

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

README.md

@@ -0,0 +1,27 @@
+# UsersProjectsCompaniesAngularNgrxFrontend
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular.json

@@ -0,0 +1,115 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "users-projects-companies-angular-ngrx-frontend": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/users-projects-companies-angular-ngrx-frontend",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+             "styles": [
+              "src/styles.css",
+              "node_modules/primeicons/primeicons.css",
+              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/font-awesome/css/font-awesome.min.css",
+              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
+            ],
+            "scripts": [
+
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "users-projects-companies-angular-ngrx-frontend:build:production"
+            },
+            "development": {
+              "browserTarget": "users-projects-companies-angular-ngrx-frontend:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "users-projects-companies-angular-ngrx-frontend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "users-projects-companies-angular-ngrx-frontend"
+}

karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/users-projects-companies-angular-ngrx-frontend'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "users-projects-companies-angular-ngrx-frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~13.3.0",
+    "@angular/cdk": "~13.3.6",
+    "@angular/common": "~13.3.0",
+    "@angular/compiler": "~13.3.0",
+    "@angular/core": "~13.3.0",
+    "@angular/forms": "~13.3.0",
+    "@angular/material": "~13.3.6",
+    "@angular/platform-browser": "~13.3.0",
+    "@angular/platform-browser-dynamic": "~13.3.0",
+    "@angular/router": "~13.3.0",
+    "@ngrx/effects": "^13.2.0",
+    "@ngrx/store": "^13.2.0",
+    "@ngrx/store-devtools": "^13.2.0",
+    "bootstrap": "^5.1.3",
+    "font-awesome": "^4.7.0",
+    "primeicons": "^5.0.0",
+    "primeng": "^13.4.1",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~13.3.4",
+    "@angular/cli": "~13.3.4",
+    "@angular/compiler-cli": "~13.3.0",
+    "@types/jasmine": "~3.10.0",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~4.0.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.1.0",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "typescript": "~4.6.2"
+  }
+}

src/app/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -0,0 +1,2 @@
+<app-base-nav-menu></app-base-nav-menu>
+<router-outlet></router-outlet>

src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'users-projects-companies-angular-ngrx-frontend'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('users-projects-companies-angular-ngrx-frontend');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('users-projects-companies-angular-ngrx-frontend app is running!');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'users-projects-companies-angular-ngrx-frontend';
+}

src/app/app.module.ts

@@ -0,0 +1,85 @@
+import { ProjectDeleteEffect } from './ngrx/project/project.effects.delete';
+import { ProjectUpdateEffect } from './ngrx/project/project.effects.update';
+import { ProjectGetEffects } from './ngrx/project/project.effects.get';
+import { ProjectCreateEffects } from './ngrx/project/project.effects.create';
+import { CompanyDeleteEffect } from './ngrx/company/company.effects.delete';
+import { CompanyUpdateEffects } from './ngrx/company/company.effects.update';
+import { CompanyGetEffects } from './ngrx/company/company.effects.get';
+import { CompanyCreateEffects } from './ngrx/company/company.effects.create';
+import { UserUpdateEffects } from './ngrx/user/user.effects.update';
+import { UserDeleteEffect } from './ngrx/user/user.effects.delete';
+import { UserSAddressManagerModule } from './pages/user-s-address-manager/user-s-address-manager.module';
+import { AddressEffects } from './ngrx/user-s-address/address.effects';
+import { UserGetAllEffects } from './ngrx/user/user.effects.get';
+import { UserManagerModule } from './pages/user-manager/user-manager.module';
+import { BasePageAccueilModule } from './pages/base-page-accueil/base-page-accueil.module';
+import { ProjectManagerModule } from './pages/project-manager/project-manager.module';
+import { CompanyManagerModule } from './pages/company-manager/company-manager.module';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BaseNavMenuComponent } from './pages/base-nav-menu/base-nav-menu.component';
+import { LayoutModule } from '@angular/cdk/layout';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { HttpClientModule } from '@angular/common/http';
+import { userReducer } from './ngrx/user/user.reducer';
+import { addressReducer } from './ngrx/user-s-address/address.reducer';
+import { UserCreateEffects } from './ngrx/user/user.effects.create';
+import { companyReducer } from './ngrx/company/company.reducer';
+import { projectReducer } from './ngrx/project/project.reducer';
+
+@NgModule({
+  declarations: [AppComponent, BaseNavMenuComponent],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    StoreModule.forRoot({
+      userReducerSelector: userReducer,
+      addressReducerSelector: addressReducer,
+      companyReducerSelector: companyReducer,
+      projectReducerSelector: projectReducer,
+    }),
+    EffectsModule.forRoot([
+      AddressEffects,
+      UserGetAllEffects,
+      UserCreateEffects,
+      UserDeleteEffect,
+      UserUpdateEffects,
+      CompanyCreateEffects,
+      CompanyGetEffects,
+      CompanyUpdateEffects,
+      CompanyDeleteEffect,
+      ProjectCreateEffects,
+      ProjectGetEffects,
+      ProjectUpdateEffect,
+      ProjectDeleteEffect
+    ]),
+    StoreDevtoolsModule.instrument(),
+    BrowserAnimationsModule,
+    LayoutModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatListModule,
+    BasePageAccueilModule,
+    UserManagerModule,
+    UserSAddressManagerModule,
+    CompanyManagerModule,
+    ProjectManagerModule,
+    HttpClientModule,
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

src/app/ngrx/company/company.action.type.ts

@@ -0,0 +1,25 @@
+export enum CompanyActionTypes{
+  CREATE_FORM_ADD_COMPANY = '[Company] CREATE FORM ADD COMPANY',
+  CREATE_FORM_ADD_COMPANY_SUCCESS = '[Company] CREATE FORM ADD COMPANY SUCCESS',
+  CREATE_FORM_ADD_COMPANY_ERROR = '[Company] CREATE FORM ADD COMPANY ERROR',
+
+  SAVE_NEW_CAMPANY = '[Company] SAVE NEW CAMPANY',
+  SAVE_NEW_CAMPANY_SUCCESS = '[Company] SAVE NEW CAMPANY SUCCESS',
+  SAVE_NEW_CAMPANY_ERROR = '[Company] SAVE NEW CAMPANY ERROR',
+
+  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_FORM_UPDATE_COMPANY= '[Company] CREATE FORM UPDATE COMPANY',
+  CREATE_FORM_UPDATE_COMPANY_SUCCESS= '[Company] CREATE FORM UPDATE COMPANY SUCCESS',
+  CREATE_FORM_UPDATE_COMPANY_ERROR= '[Company] CREATE FORM UPDATE COMPANY ERROR',
+
+  UPDATE_COMPANY= '[Company] UPDATE COMPANY',
+  UPDATE_COMPANY_SUCCESS= '[Company] UPDATE COMPANY SUCCESS',
+  UPDATE_COMPANY_ERROR= '[Company] UPDATE COMPANY ERROR',
+
+  DELETE_COMPANY = '[Company] DELETE COMPANY',
+  DELETE_COMPANY_SUCCESS = '[Company] DELETE COMPANY SUCCESS',
+  DELETE_COMPANY_ERROR = '[Company] DELETE COMPANY ERROR',
+}

src/app/ngrx/company/company.actions.ts

@@ -0,0 +1,107 @@
+import { Company } from './../../shared/models/company/company.model';
+import { CompanyActionTypes } from './company.action.type';
+import { Action } from '@ngrx/store';
+
+//create form to add new company
+export class CreateFormAddCompanyAction implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.CREATE_FORM_ADD_COMPANY;
+  constructor(public payload: any){}
+}
+export class CreateFormAddCompanyActionSuccess implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.CREATE_FORM_ADD_COMPANY_SUCCESS;
+  constructor(public payload: any){}
+}
+export class CreateFormAddCompanyActionError implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.CREATE_FORM_ADD_COMPANY_ERROR;
+  constructor(public payload: string){}
+}
+
+// save new company
+export class SaveNewCompanyAction implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.SAVE_NEW_CAMPANY;
+  constructor(public payload: Company){}
+}
+export class SaveNewCompanyActionSuccess implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.SAVE_NEW_CAMPANY_SUCCESS;
+  constructor(public payload: Company){}
+}
+export class SaveNewCompanyActionError implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.SAVE_NEW_CAMPANY_ERROR;
+  constructor(public payload: string){}
+}
+
+//get all companies
+export class GetAllComapaniesAction implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.GET_ALL_COMPANIES;
+  constructor(public payload: any){}
+}
+export class GetAllComapaniesActionSuccess implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.GET_ALL_COMPANIES_SUCCESS;
+  constructor(public payload: Array<Company>){}
+}
+export class GetAllComapaniesActionError implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.GET_ALL_COMPANIES_ERROR;
+  constructor(public payload: string){}
+}
+
+//create form to update company
+export class CreateFormUpdateCompanyAction implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.CREATE_FORM_UPDATE_COMPANY;
+  constructor(public payload: Company){}
+}
+export class CreateFormUpdateCompanyActionSuccess implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.CREATE_FORM_UPDATE_COMPANY_SUCCESS;
+  constructor(public payload: Company){}
+}
+export class CreateFormUpdateCompanyActionError implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.CREATE_FORM_UPDATE_COMPANY_ERROR;
+  constructor(public payload: string){}
+}
+
+//update company
+export class UpdateCompanyAction implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.UPDATE_COMPANY;
+  constructor(public payload: Company){}
+}
+export class UpdateCompanyActionSuccss implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.UPDATE_COMPANY_SUCCESS;
+  constructor(public payload: Company){}
+}
+export class UpdateCompanyActionError implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.UPDATE_COMPANY_ERROR;
+  constructor(public payload: string){}
+}
+
+//delete a company
+export class DeleteCompanyAction implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.DELETE_COMPANY;
+  constructor(public payload: Company){}
+}
+export class DeleteCompanyActionSuccess implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.DELETE_COMPANY_SUCCESS;
+  constructor(public payload: Company){}
+}
+export class DeleteCompanyActionError implements Action{
+  type: CompanyActionTypes = CompanyActionTypes.DELETE_COMPANY_ERROR;
+  constructor(public payload: string){}
+}
+
+export type CompanyActionUnion =
+| CreateFormAddCompanyAction
+| CreateFormAddCompanyActionSuccess
+| CreateFormAddCompanyActionError
+| SaveNewCompanyAction
+| SaveNewCompanyActionSuccess
+| SaveNewCompanyActionError
+| GetAllComapaniesAction
+| GetAllComapaniesActionSuccess
+| GetAllComapaniesActionError
+| CreateFormUpdateCompanyAction
+| CreateFormUpdateCompanyActionSuccess
+| CreateFormUpdateCompanyActionError
+| UpdateCompanyAction
+| UpdateCompanyActionSuccss
+| UpdateCompanyActionError
+| DeleteCompanyAction
+| DeleteCompanyActionSuccess
+| DeleteCompanyActionError;

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

@@ -0,0 +1,45 @@
+import { catchError, map } from 'rxjs/operators';
+import { CompanyActionTypes } from './company.action.type';
+import {
+  CompanyActionUnion,
+  CreateFormAddCompanyActionSuccess,
+  CreateFormAddCompanyActionError,
+  SaveNewCompanyActionSuccess,
+  SaveNewCompanyActionError,
+} from './company.actions';
+import { Observable, of, mergeMap } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { CompanyService } from './../../shared/services/company.service';
+import { Injectable } from '@angular/core';
+import { Company } from 'src/app/shared/models/company/company.model';
+
+@Injectable()
+export class CompanyCreateEffects {
+  constructor(
+    private companyService: CompanyService,
+    private companyActions: Actions
+  ) {}
+
+  //create form to add company
+  createFormAddCompanyEffect: Observable<CompanyActionUnion> = createEffect(
+    () =>
+      this.companyActions.pipe(
+        ofType(CompanyActionTypes.CREATE_FORM_ADD_COMPANY),
+        map(() => new CreateFormAddCompanyActionSuccess({})),
+        catchError((err) => of(new CreateFormAddCompanyActionError(err)))
+      )
+  );
+
+  // save new company
+  saveNewCompany: Observable<CompanyActionUnion> = createEffect(() =>
+    this.companyActions.pipe(
+      ofType(CompanyActionTypes.SAVE_NEW_CAMPANY),
+      mergeMap((action: CompanyActionUnion) => {
+        return this.companyService.createCompanyService(action.payload).pipe(
+          map((company: Company) => new SaveNewCompanyActionSuccess(company)),
+          catchError((err) => of(new SaveNewCompanyActionError(err)))
+        );
+      })
+    )
+  );
+}

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

@@ -0,0 +1,26 @@
+import { map, catchError } from 'rxjs/operators';
+import { CompanyActionTypes } from './company.action.type';
+import { CompanyActionUnion, DeleteCompanyActionSuccess, DeleteCompanyActionError } from './company.actions';
+import { Observable, mergeMap, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { CompanyService } from './../../shared/services/company.service';
+import { Injectable } from "@angular/core";
+
+@Injectable()
+export class CompanyDeleteEffect {
+
+  constructor(private companyService: CompanyService, private companyActions: Actions){}
+
+  //delete company effect
+  DeleteCompanyEffect: Observable<CompanyActionUnion> = createEffect(
+    ()=> this.companyActions.pipe(
+      ofType(CompanyActionTypes.DELETE_COMPANY),
+      mergeMap((action: CompanyActionUnion) =>{
+        return this.companyService.deleteCompany(action.payload.companyID).pipe(
+          map( ()=> new DeleteCompanyActionSuccess(action.payload)),
+          catchError( err => of( new DeleteCompanyActionError(err)) )
+        )
+      })
+    )
+  );
+}

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

@@ -0,0 +1,35 @@
+import { Company } from 'src/app/shared/models/company/company.model';
+import { catchError } from 'rxjs/operators';
+import { CompanyActionTypes } from './company.action.type';
+import {
+  CompanyActionUnion,
+  GetAllComapaniesActionSuccess,
+  GetAllComapaniesActionError,
+} from './company.actions';
+import { Observable, mergeMap, map, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { CompanyService } from './../../shared/services/company.service';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class CompanyGetEffects {
+  constructor(
+    private companyService: CompanyService,
+    private companyActions: Actions
+  ) {}
+
+  geAllCompanyEffect: Observable<CompanyActionUnion> = createEffect(() =>
+    this.companyActions.pipe(
+      ofType(CompanyActionTypes.GET_ALL_COMPANIES),
+      mergeMap((action: CompanyActionUnion) => {
+        return this.companyService.getAllCompaniesService().pipe(
+          map(
+            (companies: Array<Company>) =>
+              new GetAllComapaniesActionSuccess(companies)
+          ),
+          catchError((err) => of(new GetAllComapaniesActionError(err)))
+        );
+      })
+    )
+  );
+}

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

@@ -0,0 +1,56 @@
+import { catchError, map } from 'rxjs/operators';
+import { CompanyActionTypes } from './company.action.type';
+import {
+  CompanyActionUnion,
+  CreateFormUpdateCompanyActionSuccess,
+  CreateFormUpdateCompanyActionError,
+  UpdateCompanyActionSuccss,
+  UpdateCompanyActionError,
+} from './company.actions';
+import { Observable, mergeMap, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { CompanyService } from './../../shared/services/company.service';
+import { Injectable } from '@angular/core';
+import { Company } from 'src/app/shared/models/company/company.model';
+
+@Injectable()
+export class CompanyUpdateEffects {
+  constructor(
+    private companyService: CompanyService,
+    private companyActions: Actions
+  ) {}
+
+  //create form update company effect
+  createFormUpdateCompanyEffect: Observable<CompanyActionUnion> = createEffect(
+    () =>
+      this.companyActions.pipe(
+        ofType(CompanyActionTypes.CREATE_FORM_UPDATE_COMPANY),
+        mergeMap((action: CompanyActionUnion) => {
+          return this.companyService
+            .getCompanyByIDService(action.payload.companyID)
+            .pipe(
+              map(
+                (company: Company) =>
+                  new CreateFormUpdateCompanyActionSuccess(company)
+              ),
+              catchError((err) =>
+                of(new CreateFormUpdateCompanyActionError(err))
+              )
+            );
+        })
+      )
+  );
+
+  //update company
+  updateCompanyEffect : Observable<CompanyActionUnion> = createEffect(
+    ()=> this.companyActions.pipe(
+      ofType(CompanyActionTypes.UPDATE_COMPANY),
+      mergeMap( (action: CompanyActionUnion) =>{
+        return this.companyService.updateCompanyService(action.payload).pipe(
+          map( (company: Company) => new UpdateCompanyActionSuccss(company)),
+          catchError( err => of (new UpdateCompanyActionError(err)) )
+        )
+      })
+    )
+  )
+}

src/app/ngrx/company/company.reducer.ts

@@ -0,0 +1,150 @@
+import { CompanyActionTypes } from './company.action.type';
+import { Action } from '@ngrx/store';
+import { CompanyActionUnion } from './company.actions';
+import { MsgState } from '../msg.state';
+import { CompanyState } from './company.state';
+import { Company } from 'src/app/shared/models/company/company.model';
+
+const companyInitState : CompanyState = {
+  currentCompany: null,
+  companiesList: [],
+  msgState: MsgState.INIT_STATE,
+  errorMsg: "no error"
+}
+
+export function companyReducer(state: CompanyState = companyInitState, action: Action): CompanyState{
+
+  switch(action.type){
+
+    case CompanyActionTypes.CREATE_FORM_ADD_COMPANY:
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADING
+      };
+    case CompanyActionTypes.CREATE_FORM_ADD_COMPANY_SUCCESS:
+      return{
+        ...state,
+        msgState:MsgState.FORM_LOADED
+      };
+    case CompanyActionTypes.CREATE_FORM_ADD_COMPANY_ERROR:
+      return {
+        ...state,
+        msgState:MsgState.ERR,
+        errorMsg: (<CompanyActionUnion> action).payload
+      };
+
+      //save new company
+    case CompanyActionTypes.SAVE_NEW_CAMPANY:
+      return {
+        ...state,
+        msgState: MsgState.ADD
+      };
+    case CompanyActionTypes.SAVE_NEW_CAMPANY_SUCCESS:
+      let newCompany: Company = (<CompanyActionUnion> action).payload;
+      let companiesListCopy1: Array<Company> = [...state.companiesList];
+      companiesListCopy1.push(newCompany);
+      return {
+        ...state,
+        msgState: MsgState.ADDED,
+        companiesList: companiesListCopy1,
+        currentCompany:newCompany
+      };
+    case CompanyActionTypes.SAVE_NEW_CAMPANY_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg:(<CompanyActionUnion> action).payload
+      };
+
+    // get all companies
+    case CompanyActionTypes.GET_ALL_COMPANIES:
+      return {
+        ...state,
+        msgState: MsgState.LOADING
+      };
+    case CompanyActionTypes.GET_ALL_COMPANIES_SUCCESS:
+      let companiesListCopy2 : Array<Company> = (<CompanyActionUnion> action).payload;
+      return {
+        ...state,
+        msgState: MsgState.LOADED,
+        companiesList: companiesListCopy2
+      };
+    case CompanyActionTypes.GET_ALL_COMPANIES_ERROR:
+      return {
+        ...state,
+        msgState:MsgState.ERR,
+        errorMsg: (<CompanyActionUnion> action).payload
+      };
+
+    // create form to update company
+    case CompanyActionTypes.CREATE_FORM_UPDATE_COMPANY:
+      return{
+        ...state,
+        msgState: MsgState.FORM_LOADING
+      };
+    case CompanyActionTypes.CREATE_FORM_UPDATE_COMPANY_SUCCESS:
+      let companyToUpdate: Company = (<CompanyActionUnion>  action).payload;
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADED,
+        currentCompany:companyToUpdate
+      };
+    case CompanyActionTypes.CREATE_FORM_UPDATE_COMPANY_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg:(<CompanyActionUnion> action).payload
+      };
+
+    // update company
+    case CompanyActionTypes.UPDATE_COMPANY:
+      return {
+        ...state,
+        msgState:MsgState.UPDATE
+      };
+    case CompanyActionTypes.UPDATE_COMPANY_SUCCESS:
+      let updatedCompany: Company = (<CompanyActionUnion> action).payload;
+      let companiesListCopy3: Array<Company> = [...state.companiesList];
+      companiesListCopy3.map(
+        (company: Company) => (company.companyID==updatedCompany.companyID)?updatedCompany:company
+      );
+      return {
+        ...state,
+        msgState:MsgState.UPDATED,
+        companiesList: companiesListCopy3,
+        currentCompany: updatedCompany
+      };
+      case CompanyActionTypes.UPDATE_COMPANY_ERROR:
+        return {
+          ...state,
+          msgState: MsgState.ERR,
+          errorMsg:(<CompanyActionUnion> action).payload
+        };
+
+        //delete company
+      case CompanyActionTypes.DELETE_COMPANY:
+        return {
+          ...state,
+          msgState: MsgState.DELETE
+        };
+      case CompanyActionTypes.DELETE_COMPANY_SUCCESS:
+        let deletedCompany: Company = (<CompanyActionUnion> action).payload;
+        let indexDeletedCompany = state.companiesList.indexOf(deletedCompany);
+        let companiesListCopy4: Array<Company> = [...state.companiesList];
+        companiesListCopy4.splice(indexDeletedCompany,1);
+        return{
+          ...state,
+          msgState: MsgState.DELETED,
+          companiesList: companiesListCopy4,
+          currentCompany: deletedCompany
+        };
+      case CompanyActionTypes.DELETE_COMPANY_ERROR:
+        return{
+          ...state,
+          msgState: MsgState.ERR,
+          errorMsg:(<CompanyActionUnion> action).payload
+        };
+    default:
+      return {...state};
+  }
+}

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

@@ -0,0 +1,9 @@
+import { MsgState } from './../msg.state';
+import { Company } from './../../shared/models/company/company.model';
+
+export class CompanyState{
+  currentCompany!: Company | null;
+  companiesList!: Array<Company>;
+  msgState!: MsgState;
+  errorMsg!: string
+  }

src/app/ngrx/msg.state.ts

@@ -0,0 +1,19 @@
+export enum MsgState {
+  LOADING = 'LOADING ...',
+  LOADED = 'SUCCESSFUL LOADED',
+  ERR = 'ERROR ACCURRED',
+  INIT_STATE = 'INITIAL STATE',
+  FORM_LOADING = 'FORM LOADING',
+  FORM_LOADED = 'FORM LOADED',
+  FORM_LOAD_ERR= 'FORM LOADING ERROR',
+  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',
+  DELETE = 'DELETE',
+  DELETED = 'SUCCESSFULLY DELETED'
+}

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

@@ -0,0 +1,150 @@
+import { ProjectActionTypes } from './project.action.type';
+import { Action } from '@ngrx/store';
+import { Project } from 'src/app/shared/models/project/project.model';
+
+//create form to add project
+export class CreateFormAddProjectAction implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.CREATE_FORM_ADD_PROJECT;
+  constructor(public payload: any, public userID: any, public companyID: any) {}
+}
+export class CreateFormAddProjectActionSuccess implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.CREATE_FORM_ADD_PROJECT_SUCCESS;
+  constructor(public payload: any, public userID: any, public companyID: any) {}
+}
+export class CreateFormAddProjectActionError implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.CREATE_FORM_ADD_PROJECT_ERROR;
+  constructor(
+    public payload: string,
+    public userID: any,
+    public companyID: any
+  ) {}
+}
+
+// save new project
+export class SaveNewProjectAction implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.SAVE_NEW_PROJECT;
+  constructor(
+    public payload: Project
+  ) {}
+}
+export class SaveNewProjectActionSuccess implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.SAVE_NEW_PROJECT_SUCCESS;
+  constructor(
+    public payload: Project
+  ) {}
+}
+export class SaveNewProjectActionError implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.SAVE_NEW_PROJECT_ERROR;
+  constructor(
+    public payload: string
+  ) {}
+}
+
+// get all projects action
+export class GetAllProjectAction implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.GET_ALL_PROJECTS;
+  constructor(
+    public payload: void
+  ) {}
+}
+export class GetAllProjectActionSuccess implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.GET_ALL_PROJECTS_SUCCESS;
+  constructor(
+    public payload: Array<Project>
+  ) {}
+}
+export class GetAllProjectActionError implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.GET_ALL_PROJECTS_ERROR;
+  constructor(
+    public payload: string
+  ) {}
+}
+
+// create form update project
+export class CreateFormUpdatedProjectAction implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.CREATE_FORM_UPDATE_PROJECT;
+  constructor(
+    public payload: Project,
+    public userID: any,
+    public companyID: any
+  ) {}
+}
+export class CreateFormUpdatedProjectActionError implements Action {
+  type: ProjectActionTypes =
+    ProjectActionTypes.CREATE_FORM_UPDATE_PROJECT_ERROR;
+  constructor(
+    public payload: string,
+    public userID: any,
+    public companyID: any
+  ) {}
+}
+export class CreateFormUpdatedProjectActionSuccess implements Action {
+  type: ProjectActionTypes =
+    ProjectActionTypes.CREATE_FORM_UPDATE_PROJECT_SUCCCESS;
+  constructor(
+    public payload: Project,
+    public userID: any,
+    public companyID: any
+  ) {}
+}
+
+//update project
+export class UpdateProjectAction implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.UPDATE_PROJECT;
+  constructor(
+    public payload: Project
+  ) {}
+}
+export class UpdateProjectActionError implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.UPDATE_PROJECT_ERROR;
+  constructor(
+    public payload: string
+  ) {}
+}
+export class UpdateProjectActionSuccess implements Action {
+  type: ProjectActionTypes = ProjectActionTypes.UPDATE_PROJECT_SUCCESS;
+  constructor(
+    public payload: Project
+  ) {}
+}
+
+// delete project
+export class DeleteProjectAction implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.DELETE_PROJECT;
+  constructor(
+    public payload: Project
+  ) {}
+}
+export class DeleteProjectActionSuccess implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.DELETE_PROJECT_SUCCESS;
+  constructor(
+    public payload: Project
+  ) {}
+}
+export class DeleteProjectActionError implements Action{
+  type: ProjectActionTypes = ProjectActionTypes.DELETE_PROJECT_ERROR;
+  constructor(
+    public payload: string
+  ) {}
+}
+
+
+export type ProjectActionUnion =
+  | CreateFormAddProjectAction
+  | CreateFormAddProjectActionSuccess
+  | CreateFormAddProjectActionError
+  | SaveNewProjectAction
+  | SaveNewProjectActionSuccess
+  | SaveNewProjectActionError
+  | GetAllProjectAction
+  | GetAllProjectActionSuccess
+  | GetAllProjectActionError
+  | CreateFormUpdatedProjectAction
+  | CreateFormUpdatedProjectActionSuccess
+  | CreateFormUpdatedProjectActionError
+  | UpdateProjectAction
+  | UpdateProjectActionSuccess
+  | UpdateProjectActionError
+  | DeleteProjectAction
+  | DeleteProjectActionSuccess
+  | DeleteProjectActionError;

src/app/ngrx/project/project.action.type.ts

@@ -0,0 +1,25 @@
+export enum ProjectActionTypes{
+  CREATE_FORM_ADD_PROJECT = "[Project] CREATE FORM ADD PROJECT",
+  CREATE_FORM_ADD_PROJECT_SUCCESS = "[Project] CREATE FORM ADD PROJECT SUCCESS",
+  CREATE_FORM_ADD_PROJECT_ERROR = "[Project] CREATE FORM ADD PROJECT ERROR",
+
+  SAVE_NEW_PROJECT = "[Project] SAVE NEW PROJECT",
+  SAVE_NEW_PROJECT_SUCCESS = "[Project] SAVE NEW PROJECT SUCCESS",
+  SAVE_NEW_PROJECT_ERROR = "[Project] SAVE NEW PROJECT ERROR",
+
+  GET_ALL_PROJECTS = "[Projects] GET ALL PROJECTS",
+  GET_ALL_PROJECTS_SUCCESS = "[Projects] GET ALL PROJECTS SUCCESS",
+  GET_ALL_PROJECTS_ERROR = "[Projects] GET ALL PROJECTS ERROR",
+
+  CREATE_FORM_UPDATE_PROJECT = "[Project] CREATE FORM UPDATE PROJECT",
+  CREATE_FORM_UPDATE_PROJECT_SUCCCESS = "[Project] CREATE FORM UPDATE PROJECT SUCCCESS",
+  CREATE_FORM_UPDATE_PROJECT_ERROR = "[Project] CREATE FORM UPDATE PROJECT ERROR",
+
+  UPDATE_PROJECT = "[Project] UPDATE PROJECT",
+  UPDATE_PROJECT_SUCCESS = "[Project] UPDATE PROJECT SUCCESS",
+  UPDATE_PROJECT_ERROR = "[Project] UPDATE PROJECT ERROR",
+
+  DELETE_PROJECT = "[Project] DELETE PROJECT",
+  DELETE_PROJECT_SUCCESS = "[Project] DELETE PROJECT SUCCESS",
+  DELETE_PROJECT_ERROR = "[Project] DELETE PROJECT ERROR"
+}

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

@@ -0,0 +1,60 @@
+import { catchError, map } from 'rxjs/operators';
+import { ProjectActionTypes } from './project.action.type';
+import {
+  ProjectActionUnion,
+  CreateFormAddProjectActionSuccess,
+  CreateFormAddProjectActionError,
+  SaveNewProjectActionSuccess,
+  SaveNewProjectActionError,
+} from './project.action';
+import { Observable, of, mergeMap } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { ProjectService } from './../../shared/services/project.service';
+import { Injectable } from '@angular/core';
+import { Project } from 'src/app/shared/models/project/project.model';
+
+@Injectable()
+export class ProjectCreateEffects {
+  constructor(
+    private projectService: ProjectService,
+    private projectActions: Actions
+  ) {}
+
+  //create form to add new project
+  createFormAddProjectEffect: Observable<ProjectActionUnion> = createEffect(
+    () =>
+      this.projectActions.pipe(
+        ofType(ProjectActionTypes.CREATE_FORM_ADD_PROJECT),
+        map(() => new CreateFormAddProjectActionSuccess({}, {}, {})),
+        catchError((err) =>
+          of(new CreateFormAddProjectActionError(err, {}, {}))
+        )
+      )
+  );
+
+  //save new project
+  saveNewProjectEffect: Observable<ProjectActionUnion> = createEffect(() =>
+    this.projectActions.pipe(
+      ofType(ProjectActionTypes.SAVE_NEW_PROJECT),
+      mergeMap((action: ProjectActionUnion) => {
+        return this.projectService
+          .createProjectService(action.payload)
+          .pipe(
+            map(
+              (project: Project) =>
+                new SaveNewProjectActionSuccess(
+                  project
+                )
+            ),
+            catchError((err) =>
+              of(
+                new SaveNewProjectActionError(
+                  err
+                )
+              )
+            )
+          );
+      })
+    )
+  );
+}

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

@@ -0,0 +1,26 @@
+import { catchError, map } from 'rxjs/operators';
+import { ProjectActionTypes } from './project.action.type';
+import { ProjectActionUnion, DeleteProjectActionSuccess, DeleteProjectActionError } from './project.action';
+import { Observable, mergeMap, of } from 'rxjs';
+import { ProjectService } from './../../shared/services/project.service';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Injectable } from "@angular/core";
+
+@Injectable()
+export class ProjectDeleteEffect {
+
+  constructor(private projectActions: Actions, private projectService: ProjectService){}
+
+  //delete project effect
+  deleteProjectEffect : Observable<ProjectActionUnion> = createEffect(
+    ()=> this.projectActions.pipe(
+      ofType(ProjectActionTypes.DELETE_PROJECT),
+      mergeMap((action: ProjectActionUnion)=>{
+        return this.projectService.deleteProject(action.payload.projectID).pipe(
+          map( ()=> new DeleteProjectActionSuccess(action.payload)),
+          catchError(err => of(new DeleteProjectActionError(err)))
+        )
+      })
+    )
+  )
+}

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

@@ -0,0 +1,29 @@
+import { catchError } from 'rxjs/operators';
+import { Project } from 'src/app/shared/models/project/project.model';
+import { ProjectActionTypes } from './project.action.type';
+import { ProjectActionUnion, GetAllProjectActionSuccess, GetAllProjectActionError } from './project.action';
+import { Observable, mergeMap, map, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { ProjectService } from './../../shared/services/project.service';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ProjectGetEffects {
+  constructor(
+    private projectService: ProjectService,
+    private projectActions: Actions
+  ) {}
+
+  // get all project effect
+  getAllProjectEffect : Observable<ProjectActionUnion> = createEffect(
+    ()=> this.projectActions.pipe(
+      ofType(ProjectActionTypes.GET_ALL_PROJECTS),
+      mergeMap( (action: ProjectActionUnion) =>{
+        return this.projectService.getAllProjectsService().pipe(
+          map ( (projects: Array<Project>) => new GetAllProjectActionSuccess(projects)),
+          catchError( err => of(new GetAllProjectActionError(err)))
+        )
+      })
+    )
+  );
+}

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

@@ -0,0 +1,59 @@
+import { catchError, map } from 'rxjs/operators';
+import { ProjectActionTypes } from './project.action.type';
+import {
+  ProjectActionUnion,
+  CreateFormUpdatedProjectActionSuccess,
+  CreateFormUpdatedProjectActionError,
+  UpdateProjectActionSuccess,
+  UpdateProjectActionError,
+} from './project.action';
+import { Observable, mergeMap, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { ProjectService } from './../../shared/services/project.service';
+import { Injectable } from '@angular/core';
+import { Project } from 'src/app/shared/models/project/project.model';
+
+@Injectable()
+export class ProjectUpdateEffect {
+  constructor(
+    private projectService: ProjectService,
+    private projectActions: Actions
+  ) {}
+
+  //create form to update project
+  createFormUpdateProject: Observable<ProjectActionUnion> = createEffect(() =>
+    this.projectActions.pipe(
+      ofType(ProjectActionTypes.CREATE_FORM_UPDATE_PROJECT),
+      mergeMap((action: ProjectActionUnion) => {
+        return this.projectService
+          .getProjectByIDService(action.payload.projectID)
+          .pipe(
+            map(
+              (project: Project) =>
+                new CreateFormUpdatedProjectActionSuccess(project, {}, {})
+            ),
+            catchError((err) =>
+              of(new CreateFormUpdatedProjectActionError(err, {}, {}))
+            )
+          );
+      })
+    )
+  );
+
+  // update project
+  updateProjectEffect: Observable<ProjectActionUnion> = createEffect(() =>
+    this.projectActions.pipe(
+      ofType(ProjectActionTypes.UPDATE_PROJECT),
+      mergeMap((action: ProjectActionUnion) => {
+        return this.projectService
+          .updateProjectService(action.payload)
+          .pipe(
+            map((project: Project) =>new UpdateProjectActionSuccess(project)
+            ),
+            catchError(err=> of (new UpdateProjectActionError(err)))
+          );
+      })
+    )
+  );
+
+}

src/app/ngrx/project/project.reducer.ts

@@ -0,0 +1,151 @@
+import { ProjectActionTypes } from './project.action.type';
+import { Action } from '@ngrx/store';
+import { MsgState } from '../msg.state';
+import { ProjectState } from './project.state';
+import { ProjectActionUnion } from './project.action';
+import { Project } from 'src/app/shared/models/project/project.model';
+
+
+const projectInitState: ProjectState = {
+  currestProject: null,
+  projectsList: [],
+  msgState: MsgState.INIT_STATE,
+  errorMsg: 'no error'
+};
+
+export function projectReducer(state: ProjectState = projectInitState, action: Action): ProjectState{
+
+  switch(action.type){
+
+    //create form to add project
+    case ProjectActionTypes.CREATE_FORM_ADD_PROJECT:
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADING,
+      };
+    case ProjectActionTypes.CREATE_FORM_ADD_PROJECT_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg:(<ProjectActionUnion> action).payload
+      };
+    case ProjectActionTypes.CREATE_FORM_ADD_PROJECT_SUCCESS:
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADED
+      };
+
+      //save new project
+    case ProjectActionTypes.SAVE_NEW_PROJECT:
+      return {
+        ...state,
+        msgState: MsgState.ADD
+      };
+    case ProjectActionTypes.SAVE_NEW_PROJECT_SUCCESS:
+      let newProject: Project = (<ProjectActionUnion> action).payload;
+      let projectsListCopy1: Array<Project> = [...state.projectsList];
+      projectsListCopy1.push(newProject);
+      return {
+        ...state,
+        msgState: MsgState.ADDED,
+        projectsList: projectsListCopy1,
+        currestProject: newProject
+      };
+
+    //get all projects
+    case ProjectActionTypes.GET_ALL_PROJECTS:
+      return {
+        ...state,
+        msgState: MsgState.LOADING
+      };
+    case ProjectActionTypes.GET_ALL_PROJECTS_SUCCESS:
+      let projectsListCopy2: Array<Project> = (<ProjectActionUnion> action).payload;
+      return {
+        ...state,
+        msgState:MsgState.LOADED,
+        projectsList: projectsListCopy2
+      };
+    case ProjectActionTypes.GET_ALL_PROJECTS_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg:(<ProjectActionUnion> action).payload
+      };
+
+     // create form to update project
+    case ProjectActionTypes.CREATE_FORM_UPDATE_PROJECT:
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADING
+      };
+    case ProjectActionTypes.CREATE_FORM_UPDATE_PROJECT_SUCCCESS:
+      let projectToUpdate: Project = (<ProjectActionUnion> action).payload
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADED,
+        currestProject: projectToUpdate
+      };
+    case ProjectActionTypes.CREATE_FORM_UPDATE_PROJECT_ERROR:
+      let err: string = (<ProjectActionUnion> action).payload;
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg:err
+      };
+
+    // update project
+    case ProjectActionTypes.UPDATE_PROJECT:
+      return {
+        ...state,
+        msgState: MsgState.UPDATE,
+      };
+    case ProjectActionTypes.UPDATE_PROJECT_SUCCESS:
+      let updatedProject : Project = (<ProjectActionUnion> action).payload;
+      let projectsListCopy3: Array<Project> = [...state.projectsList];
+      projectsListCopy3.map((project: Project)=>{
+        project.projectID === updatedProject.projectID?updatedProject:project;
+      })
+      return {
+        ...state,
+        msgState:MsgState.UPDATED,
+        currestProject: updatedProject,
+        projectsList: projectsListCopy3
+      };
+    case ProjectActionTypes.UPDATE_PROJECT_ERROR:
+      let returnedError: string=(<ProjectActionUnion> action).payload;
+      return {
+        ...state,
+        msgState:MsgState.ERR,
+        errorMsg:returnedError
+      };
+
+    // delete project
+    case ProjectActionTypes.DELETE_PROJECT:
+      return {
+        ...state,
+        msgState: MsgState.DELETE
+      };
+    case ProjectActionTypes.DELETE_PROJECT_SUCCESS:
+      let deletedProject: Project =(<ProjectActionUnion> action).payload;
+      let indexDeleteProj = state.projectsList.indexOf(deletedProject);
+      let projectsListCopy4: Array<Project> =[... state.projectsList];
+      projectsListCopy4 = projectsListCopy4.splice(indexDeleteProj,1);
+      return {
+        ...state,
+        msgState: MsgState.DELETED,
+        currestProject: deletedProject,
+        projectsList: projectsListCopy4
+      };
+    case ProjectActionTypes.DELETE_PROJECT_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg: (<ProjectActionUnion> action).payload
+      };
+    default:
+      return {...state};
+
+    // get projects assigned to user ID
+
+  }
+}

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

@@ -0,0 +1,8 @@
+import { MsgState } from 'src/app/ngrx/msg.state';
+import { Project } from 'src/app/shared/models/project/project.model';
+export class ProjectState{
+  currestProject!: Project | null;
+  projectsList!: Array<Project>;
+  msgState!: MsgState;
+  errorMsg!: string;
+}

src/app/ngrx/user-s-address/address.action.ts

@@ -0,0 +1,101 @@
+import { AddressActionTypes } from './address.action.type';
+import { Action } from '@ngrx/store';
+import { Address } from 'src/app/shared/models/user/address.model';
+
+export class GetAllAddressesAction implements Action {
+  type: AddressActionTypes = AddressActionTypes.GET_ALL_ADDRESSES;
+  constructor(public payload: any) {}
+}
+export class GetAllAddressesActionSuccess implements Action {
+  type: AddressActionTypes = AddressActionTypes.GET_ALL_ADDRESSES_SUCCESS;
+  constructor(public payload: Array<Address>) {}
+}
+export class GetAllAddressesActionError implements Action {
+  type: AddressActionTypes = AddressActionTypes.GET_ALL_ADDRESSES_ERROR;
+  constructor(public payload: string) {}
+}
+
+export class CreateFormAddAddressAction implements Action {
+  type: AddressActionTypes = AddressActionTypes.CREATE_FORM_ADD_ADDRESS;
+  constructor(public payload: void) {}
+}
+export class CreateFormAddAddressActionSuccess implements Action {
+  type: AddressActionTypes = AddressActionTypes.CREATE_FORM_ADD_ADDRESS_SUCCESS;
+  constructor(public payload: any) {}
+}
+export class CreateFormAddAddressActionError implements Action {
+  type: AddressActionTypes = AddressActionTypes.CREATE_FORM_ADD_ADDRESS_ERROR;
+  constructor(public payload: string) {}
+}
+
+export class SaveNewAddressAction implements Action {
+  type: AddressActionTypes = AddressActionTypes.SAVE_NEW_ADDRESS;
+  constructor(public payload: Address) {}
+}
+export class SaveNewAddressActionSuccess implements Action {
+  type: AddressActionTypes = AddressActionTypes.SAVE_NEW_ADDRESS_SUCCESS;
+  constructor(public payload: Address) {}
+}
+export class SaveNewAddressActionError implements Action {
+  type: AddressActionTypes = AddressActionTypes.SAVE_NEW_ADDRESS_ERROR;
+  constructor(public payload: string) {}
+}
+
+export class CreateFormUpdateAddressAction implements Action{
+  type: AddressActionTypes = AddressActionTypes.CREATE_FORM_UPDATE_ADDRESS;
+  constructor(public payload: Address){}
+}
+export class CreateFormUpdateAddressActionSuccess implements Action{
+  type: AddressActionTypes = AddressActionTypes.CREATE_FORM_UPDATE_ADDRESS_SUCCESS;
+  constructor(public payload: Address){}
+}
+export class CreateFormUpdateAddressActionError implements Action{
+  type: AddressActionTypes = AddressActionTypes.CREATE_FORM_UPDATE_ADDRESS_ERROR;
+  constructor(public payload: string){}
+}
+
+export class UpdateAddressAction implements Action{
+  type: AddressActionTypes = AddressActionTypes.UPDATE_ADDRESS;
+  constructor(public payload: Address){}
+}
+export class UpdateAddressActionSuccess implements Action{
+  type: AddressActionTypes = AddressActionTypes.UPDATE_ADDRESS_SUCCESS;
+  constructor(public payload: Address){}
+}
+export class UpdateAddressActionError implements Action{
+  type: AddressActionTypes = AddressActionTypes.UPDATE_ADDRESS_ERROR;
+  constructor(public payload: string){}
+}
+
+export class DeleteAddressAction implements Action{
+  type: AddressActionTypes = AddressActionTypes.DELETE_ADDRESS;
+  constructor(public payload: Address){}
+}
+export class DeleteAddressActionSuccess implements Action{
+  type: AddressActionTypes = AddressActionTypes.DELETE_ADDRESS_SUCCESS;
+  constructor(public payload: Address){}
+}
+export class DeleteAddressActionError implements Action{
+  type: AddressActionTypes = AddressActionTypes.DELETE_ADDRESS_ERROR;
+  constructor(public payload: string){}
+}
+
+export type AddressActionUnion =
+  | GetAllAddressesAction
+  | GetAllAddressesActionSuccess
+  | GetAllAddressesActionError
+  | CreateFormAddAddressAction
+  | CreateFormAddAddressActionSuccess
+  | CreateFormAddAddressActionError
+  | SaveNewAddressAction
+  | SaveNewAddressActionSuccess
+  | SaveNewAddressActionError
+  | CreateFormUpdateAddressAction
+  | CreateFormUpdateAddressActionSuccess
+  | CreateFormUpdateAddressActionError
+  | UpdateAddressAction
+  | UpdateAddressActionSuccess
+  | UpdateAddressActionError
+  | DeleteAddressAction
+  | DeleteAddressActionSuccess
+  | DeleteAddressActionError;

src/app/ngrx/user-s-address/address.action.type.ts

@@ -0,0 +1,26 @@
+export enum AddressActionTypes{
+
+  GET_ALL_ADDRESSES = "[Address] GET ALL ADDRESSES",
+  GET_ALL_ADDRESSES_SUCCESS = "[Address] GET ALL ADDRESSES SUCCESS",
+  GET_ALL_ADDRESSES_ERROR = "[Address] GET ALL ADDRESSES ERROR",
+
+  CREATE_FORM_ADD_ADDRESS = "[Address] CREATE FORM ADD ADDRESS",
+  CREATE_FORM_ADD_ADDRESS_SUCCESS = "[Address] CREATE FORM ADD ADDRESS SUCCESS",
+  CREATE_FORM_ADD_ADDRESS_ERROR= "[Address] CREATE FORM ADD ADDRESS ERROR",
+
+  SAVE_NEW_ADDRESS = "[Address] SAVE NEW ADDRESS",
+  SAVE_NEW_ADDRESS_SUCCESS = "[Address] SAVE NEW ADDRESS SUCCESS",
+  SAVE_NEW_ADDRESS_ERROR = "[Address] SAVE NEW ADDRESS ERROR",
+
+  CREATE_FORM_UPDATE_ADDRESS = "[Address] CREATE FORM UPDATE ADDRESS",
+  CREATE_FORM_UPDATE_ADDRESS_SUCCESS = "[Address] CREATE FORM UPDATE ADDRESS SUCCESS",
+  CREATE_FORM_UPDATE_ADDRESS_ERROR = "[Address] CREATE  FORM UPDATE ADDRESS ERROR",
+
+  UPDATE_ADDRESS ="[Address] UPDATE ADDRESS",
+  UPDATE_ADDRESS_SUCCESS ="[Address] UPDATE ADDRESS SUCCESS",
+  UPDATE_ADDRESS_ERROR ="[Address] UPDATE ADDRESS ERROR",
+
+  DELETE_ADDRESS ="[Address] DELETEADDRESS",
+  DELETE_ADDRESS_SUCCESS ="[Address] DELETEADDRESS SUCCESS",
+  DELETE_ADDRESS_ERROR ="[Address] DELETEADDRESS ERROR",
+}

src/app/ngrx/user-s-address/address.effects.ts

@@ -0,0 +1,103 @@
+import { catchError } from 'rxjs/operators';
+import { AddressActionTypes } from './address.action.type';
+import {
+  AddressActionUnion,
+  GetAllAddressesActionSuccess,
+  GetAllAddressesActionError,
+  CreateFormAddAddressActionSuccess,
+  CreateFormAddAddressActionError,
+  SaveNewAddressActionSuccess,
+  SaveNewAddressActionError,
+  CreateFormUpdateAddressActionSuccess,
+  CreateFormUpdateAddressActionError,
+  UpdateAddressActionSuccess,
+  UpdateAddressActionError,
+  DeleteAddressActionError,
+  DeleteAddressActionSuccess,
+} from './address.action';
+import { Observable, mergeMap, map, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { AddressService } from '../../shared/services/address.service';
+import { Injectable } from '@angular/core';
+import { Address } from 'src/app/shared/models/user/address.model';
+
+@Injectable()
+export class AddressEffects {
+  constructor(
+    private addressService: AddressService,
+    private addressActions: Actions
+  ) {}
+
+  getAllAddressEffect: Observable<AddressActionUnion> = createEffect(() =>
+    this.addressActions.pipe(
+      ofType(AddressActionTypes.GET_ALL_ADDRESSES),
+      mergeMap((action: AddressActionUnion) => {
+        return this.addressService.getAllAddressesService().pipe(
+          map(
+            (addresses: Array<Address>) =>
+              new GetAllAddressesActionSuccess(addresses)
+          ),
+          catchError((err) => of(new GetAllAddressesActionError(err)))
+        );
+      })
+    )
+  );
+
+  createFormAddAddressEffect : Observable<AddressActionUnion> = createEffect(
+    ()=> this.addressActions.pipe(
+      ofType(AddressActionTypes.CREATE_FORM_ADD_ADDRESS),
+      map((action: AddressActionUnion) => new CreateFormAddAddressActionSuccess({})),
+      catchError(err => of(new CreateFormAddAddressActionError(err)))
+
+    )
+  );
+
+  saveNewAddressEffect: Observable<AddressActionUnion> = createEffect(
+    ()=> this.addressActions.pipe(
+      ofType(AddressActionTypes.SAVE_NEW_ADDRESS),
+      mergeMap((action:AddressActionUnion)=>{
+        return this.addressService.createAddressService(action.payload).pipe(
+          map((address: Address) => new SaveNewAddressActionSuccess(address)),
+          catchError(err => of(new SaveNewAddressActionError(err)))
+        )
+      })
+    )
+  );
+
+  createFormUpdateAddressEffect : Observable<AddressActionUnion> = createEffect(
+    ()=> this.addressActions.pipe(
+      ofType(AddressActionTypes.CREATE_FORM_UPDATE_ADDRESS),
+      mergeMap((action: AddressActionUnion)=>{
+        return this.addressService.getAddressByIDService(action.payload.addressID).pipe(
+          map ((address: Address)=> new CreateFormUpdateAddressActionSuccess(address)),
+          catchError(err=> of(new CreateFormUpdateAddressActionError(err)))
+        )
+      })
+    )
+  );
+
+  updateAddressEffect : Observable<AddressActionUnion> = createEffect(
+    ()=> this.addressActions.pipe(
+      ofType(AddressActionTypes.UPDATE_ADDRESS),
+      mergeMap( (action: AddressActionUnion)=>{
+        return this.addressService.updateAddressService(action.payload).pipe(
+          map((address: Address)=> new UpdateAddressActionSuccess(address)),
+          catchError(err=> of(new UpdateAddressActionError(err)))
+        )
+      })
+    )
+  );
+
+  deleteUserEffect: Observable<AddressActionUnion> = createEffect(() =>
+    this.addressActions.pipe(
+      ofType(AddressActionTypes.DELETE_ADDRESS),
+      mergeMap((action: AddressActionUnion) => {
+        return this.addressService.deleteAddressService(action.payload.addressID).pipe(
+          map(() => new DeleteAddressActionSuccess(action.payload)),
+          catchError((err) => of(new DeleteAddressActionError(err)))
+        );
+      })
+    )
+  );
+
+}

src/app/ngrx/user-s-address/address.reducer.ts

@@ -0,0 +1,146 @@
+import { AddressActionTypes } from './address.action.type';
+import { Action } from '@ngrx/store';
+import { MsgState } from '../msg.state';
+import { AddressState } from './address.state';
+import { AddressActionUnion } from './address.action';
+import { Address } from 'src/app/shared/models/user/address.model';
+
+const addressInitialState: AddressState = {
+  currentAddress: null,
+  msgState: MsgState.INIT_STATE,
+  addressesList: [],
+  errorMsg: 'no error',
+};
+
+export function addressReducer(
+  state: AddressState = addressInitialState,
+  action: Action
+): AddressState {
+  switch (action.type) {
+
+    //get all addresses
+    case AddressActionTypes.GET_ALL_ADDRESSES:
+      return {
+        ...state,
+        msgState: MsgState.LOADING,
+      };
+    case AddressActionTypes.GET_ALL_ADDRESSES_SUCCESS:
+      return {
+        ...state,
+        msgState: MsgState.LOADED,
+        addressesList: (<AddressActionUnion>action).payload,
+      };
+    case AddressActionTypes.GET_ALL_ADDRESSES_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg: (<AddressActionUnion>action).payload,
+      };
+
+    // create form to add new address
+    case AddressActionTypes.CREATE_FORM_ADD_ADDRESS:
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADING,
+      };
+    case AddressActionTypes.CREATE_FORM_ADD_ADDRESS_SUCCESS:
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADED,
+      };
+    case AddressActionTypes.CREATE_FORM_ADD_ADDRESS_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg: (<AddressActionUnion>action).payload,
+      };
+
+    // save new address
+    case AddressActionTypes.SAVE_NEW_ADDRESS:
+      return {
+        ...state,
+        msgState: MsgState.ADD,
+      };
+    case AddressActionTypes.SAVE_NEW_ADDRESS_SUCCESS:
+      let newAddress: Address = (<AddressActionUnion>action).payload;
+      let addressesListCopy1 = [...state.addressesList];
+      addressesListCopy1.push(newAddress);
+      return {
+        ...state,
+        msgState: MsgState.ADDED,
+      };
+    case AddressActionTypes.SAVE_NEW_ADDRESS_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg: (<AddressActionUnion>action).payload,
+      };
+
+    // create form to update address
+    case AddressActionTypes.CREATE_FORM_UPDATE_ADDRESS:
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADING,
+      };
+    case AddressActionTypes.CREATE_FORM_UPDATE_ADDRESS_SUCCESS:
+      let addressToUpdate: Address = (<AddressActionUnion> action).payload;
+      return {
+        ...state,
+        msgState: MsgState.FORM_LOADED,
+        currentAddress:addressToUpdate
+      };
+    case AddressActionTypes.CREATE_FORM_UPDATE_ADDRESS_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg: (<AddressActionUnion>action).payload,
+      };
+
+    //update address
+    case AddressActionTypes.UPDATE_ADDRESS:
+      return {
+        ...state,
+        msgState: MsgState.UPDATE,
+      };
+    case AddressActionTypes.UPDATE_ADDRESS_SUCCESS:
+      let updatedAddress: Address = (<AddressActionUnion>action).payload;
+      let addressesListCopy2: Array<Address> = [...state.addressesList];
+      addressesListCopy2.map((address) =>
+        address.addressID == updatedAddress.addressID ? updatedAddress : address
+      );
+      return{
+        ...state,
+        msgState: MsgState.UPDATED,
+        addressesList: addressesListCopy2
+      };
+    case AddressActionTypes.UPDATE_ADDRESS_ERROR:
+      return{
+        ...state,
+        msgState:MsgState.ERR,
+        errorMsg: (<AddressActionUnion>action).payload,
+      };
+
+    // delete address
+    case AddressActionTypes.DELETE_ADDRESS:
+      return{
+        ...state,
+        msgState:MsgState.DELETE,
+        currentAddress: (<AddressActionUnion>action).payload
+      };
+    case AddressActionTypes.DELETE_ADDRESS_SUCCESS:
+      let deletedAddress : Address = (<AddressActionUnion> action).payload;
+      let deletedAddressIndex = state.addressesList.indexOf(deletedAddress);
+      let addressesListCopy3 : Array<Address> = [...state.addressesList];
+      addressesListCopy3.splice(deletedAddressIndex,1);
+
+      return{
+        ...state,
+        msgState:MsgState.DELETED,
+        addressesList: addressesListCopy3,
+        currentAddress: deletedAddress
+      };
+
+    default:
+      return { ...state };
+  }
+}

src/app/ngrx/user-s-address/address.state.ts

@@ -0,0 +1,9 @@
+import { MsgState } from '../msg.state';
+import { Address } from '../../shared/models/user/address.model';
+export class AddressState{
+
+  currentAddress!: Address | null;
+  msgState!: MsgState;
+  addressesList!: Array<Address>;
+  errorMsg!: string;
+}

src/app/ngrx/user/user.action.type.ts

@@ -0,0 +1,29 @@
+export enum UserActionTypes {
+  GET_ALL_USERS = '[User] GET ALL USERS',
+  GET_ALL_USERS_SUCCESS = '[User] GET ALL USERS SUCCESS',
+  GET_ALL_USERS_ERROR = '[User] GET ALL USERS ERROR',
+
+  CREATE_FORM_ADD_USER = '[User] CREATE FORM ADD USER',
+  CREATE_FORM_ADD_USER_SUCCESS = '[User] CREATE FORM ADD USER SUCCESS',
+  CREATE_FORM_ADD_USER_ERROR = '[User] CREATE FORM ADD USER ERROR',
+
+  SAVE_NEW_USER = ' [User] SAVE NEW USER',
+  SAVE_NEW_USER_SUCCESS = ' [User] SAVE USER NEW SUCCESS',
+  SAVE_NEW_USER_ERROR = ' [User] SAVE USER NEW ERROR',
+
+  DELETE_USER = '[User] DELETE USER',
+  DELETE_USER_SUCCCESS = '[User] DELETE USER SUCCCESS',
+  DELETE_USER_ERROR = '[User] DELETE USER ERROR',
+
+  CREATE_FORM_UPDATE_USER = '[User] CREATE_FORM UPDATE USER',
+  CREATE_FORM_UPDATE_USER_SUCCESS = '[User] CREATE FORM UPDATE USER SUCCESS',
+  CREATE_FORM_UPDATE_USER_ERROR = '[User] CREATE FORM UPDATE USER ERROR',
+
+  UPDATE_USER = '[User] UPDATE USER',
+  UPDATE_USER_SUCCESS = '[User] UPDATE USER SUCCESS',
+  UPDATE_USER_ERROR = '[User] UPDATE USER ERROR',
+
+  GET_PROJECTS_BY_USER = '[User] GET PROJECTS ASSIGNED TO USER',
+  GET_PROJECTS_BY_USER_SUCCESS = '[User] GET PROJECTS ASSIGNED TO USER SUCCESS',
+  GET_PROJECTS_BY_USER_ERROR = '[User] GET PROJECTS ASSIGNED TO USER ERROR',
+}

src/app/ngrx/user/user.actions.ts

@@ -0,0 +1,123 @@
+import { UserActionTypes } from './user.action.type';
+import { Action } from '@ngrx/store';
+import { User } from 'src/app/shared/models/user/user.model';
+import { Project } from 'src/app/shared/models/project/project.model';
+
+//get all user action
+export class GetAllUsersAction implements Action {
+  type: UserActionTypes = UserActionTypes.GET_ALL_USERS;
+  constructor(public payload: any, public addressID: any) {}
+}
+export class GetAllUsersActionSuccess implements Action {
+  type: UserActionTypes = UserActionTypes.GET_ALL_USERS_SUCCESS;
+  constructor(public payload: Array<User>, public addressID: any) {}
+}
+export class GetAllUsersActionError implements Action {
+  type: UserActionTypes = UserActionTypes.GET_ALL_USERS_ERROR;
+  constructor(public payload: string, public addressID: any) {}
+}
+
+//form to add new user action
+export class CreateFormAddUserAction implements Action {
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_ADD_USER;
+  constructor(public payload: any, public addressID: any) {}
+}
+export class CreateFormAddUserActionSuccess implements Action {
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_ADD_USER_SUCCESS;
+  constructor(public payload: any, public addressID: any) {}
+}
+export class CreateFormAddUserActionError implements Action {
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_ADD_USER_ERROR;
+  constructor(public payload: string, public addressID: any) {}
+}
+
+// save new user action
+export class SaveNewUserAction implements Action{
+  type: UserActionTypes = UserActionTypes.SAVE_NEW_USER;
+  constructor(public payload:User){}
+}
+export class SaveNewUserActionSuccess implements Action{
+  type: UserActionTypes = UserActionTypes.SAVE_NEW_USER_SUCCESS;
+  constructor(public payload:User){}
+}
+export class SaveNewUserActionError implements Action{
+  type: UserActionTypes = UserActionTypes.SAVE_NEW_USER_ERROR;
+  constructor(public payload: string){}
+}
+
+// delete user action
+export class DeleteUserAction implements Action{
+  type: UserActionTypes = UserActionTypes.DELETE_USER;
+  constructor(public payload: User,  public addressID: any){}
+}
+export class DeleteUserActionSuccess implements Action{
+  type: UserActionTypes = UserActionTypes.DELETE_USER_SUCCCESS;
+  constructor(public payload: User,  public addressID: any){}
+}
+export class DeleteUserActionError implements Action{
+  type: UserActionTypes = UserActionTypes.DELETE_USER_ERROR;
+  constructor(public payload: string,  public addressID: any){}
+}
+
+// form to update user action
+export class CreateFormUpdateUserAction implements Action{
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_UPDATE_USER;
+  constructor(public payload: User,  public addressID: any){}
+}
+export class CreateFormUpdateUserActionSuccess implements Action{
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_UPDATE_USER_SUCCESS;
+  constructor(public payload: User,  public addressID: any){}
+}
+export class CreateFormUpdateUserActionError implements Action{
+  type: UserActionTypes = UserActionTypes.CREATE_FORM_UPDATE_USER_ERROR;
+  constructor(public payload: string,  public addressID: any){}
+}
+
+//update user
+export class UpdateUserAction implements Action{
+  type: UserActionTypes = UserActionTypes.UPDATE_USER;
+  constructor(public payload: User){}
+}
+export class UpdateUserActionSuccess implements Action{
+  type: UserActionTypes = UserActionTypes.UPDATE_USER_SUCCESS;
+  constructor(public payload: User){}
+}
+export class UpdateUserActionError implements Action{
+  type: UserActionTypes = UserActionTypes.UPDATE_USER_ERROR;
+  constructor(public payload: string){}
+}
+
+//get projects assigned to user
+export class GetUser_s_Projects implements Action{
+  type: UserActionTypes = UserActionTypes.GET_PROJECTS_BY_USER;
+  constructor(public payload: any, public addressID: any){}
+}
+export class GetUser_s_ProjectsSuccess implements Action{
+  type: UserActionTypes = UserActionTypes.GET_PROJECTS_BY_USER_SUCCESS;
+  constructor(public payload: Array<Project>, public addressID: any){}
+}
+export class GetUser_s_ProjectsError implements Action{
+  type: UserActionTypes = UserActionTypes.GET_PROJECTS_BY_USER_ERROR;
+  constructor(public payload: string, public addressID: any){}
+}
+
+export type UserActionUnion =
+  | GetAllUsersAction
+  | GetAllUsersActionSuccess
+  | GetAllUsersActionError
+  | CreateFormAddUserAction
+  | CreateFormAddUserActionSuccess
+  | CreateFormAddUserActionError
+  | SaveNewUserAction
+  | SaveNewUserActionSuccess
+  | SaveNewUserActionError
+  | DeleteUserAction
+  | DeleteUserActionSuccess
+  | DeleteUserActionError
+  | CreateFormUpdateUserAction
+  | CreateFormUpdateUserActionSuccess
+  | CreateFormUpdateUserActionError
+  | UpdateUserAction
+  | UpdateUserActionSuccess
+  | UpdateUserActionError
+  ;

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

@@ -0,0 +1,46 @@
+import { UserService } from './../../shared/services/user.service';
+import { catchError } from 'rxjs/operators';
+import { UserActionTypes } from './user.action.type';
+import {
+  UserActionUnion,
+  CreateFormAddUserActionSuccess,
+  CreateFormAddUserActionError,
+  SaveNewUserActionSuccess,
+  SaveNewUserActionError,
+} from './user.actions';
+import { map, Observable, of, mergeMap } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Injectable } from '@angular/core';
+import { User } from 'src/app/shared/models/user/user.model';
+
+@Injectable()
+export class UserCreateEffects {
+  constructor(private actions: Actions, private userService: UserService) {}
+
+  createUserFormEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.actions.pipe(
+      ofType(UserActionTypes.CREATE_FORM_ADD_USER),
+      map(
+        (action: UserActionUnion) => new CreateFormAddUserActionSuccess({}, {})
+      ),
+      catchError((err) => of(new CreateFormAddUserActionError(err, {})))
+    )
+  );
+
+  saveNewUserEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.actions.pipe(
+      ofType(UserActionTypes.SAVE_NEW_USER),
+      mergeMap((action: UserActionUnion) => {
+        return this.userService
+          .createUserService(action.payload)
+          .pipe(
+            map(
+              (user: User) =>
+                new SaveNewUserActionSuccess(user)
+            ),
+            catchError((err) => of(new SaveNewUserActionError(err.message)))
+          );
+      })
+    )
+  );
+}

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

@@ -0,0 +1,28 @@
+import { catchError, map } from 'rxjs/operators';
+import { UserActionTypes } from './user.action.type';
+import {
+  UserActionUnion,
+  DeleteUserActionSuccess,
+  DeleteUserActionError,
+} from './user.actions';
+import { Observable, mergeMap, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { UserService } from './../../shared/services/user.service';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class UserDeleteEffect {
+  constructor(private userService: UserService, private userActions: Actions) {}
+
+  deleteUserEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.userActions.pipe(
+      ofType(UserActionTypes.DELETE_USER),
+      mergeMap((action: UserActionUnion) => {
+        return this.userService.deleteUserService(action.payload.userID).pipe(
+          map(() => new DeleteUserActionSuccess(action.payload,{})),
+          catchError((err) => of(new DeleteUserActionError(err,{})))
+        );
+      })
+    )
+  );
+}

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

@@ -0,0 +1,29 @@
+import { catchError, map } from 'rxjs/operators';
+import { UserActionTypes } from './user.action.type';
+import {
+  UserActionUnion,
+  GetAllUsersActionSuccess,
+  GetAllUsersActionError,
+} from './user.actions';
+import { mergeMap, Observable, of } from 'rxjs';
+import { UserService } from '../../shared/services/user.service';
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { User } from 'src/app/shared/models/user/user.model';
+
+@Injectable()
+export class UserGetAllEffects {
+  constructor(private userservice: UserService, private actions: Actions) {}
+
+  userGetAllEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.actions.pipe(
+      ofType(UserActionTypes.GET_ALL_USERS),
+      mergeMap((action: UserActionUnion) => {
+        return this.userservice.geAllUsersService().pipe(
+          map((users: User[]) => new GetAllUsersActionSuccess(users, {})),
+          catchError((err) => of(new GetAllUsersActionError(err, {})))
+        );
+      })
+    )
+  );
+}

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

@@ -0,0 +1,45 @@
+import { catchError, map } from 'rxjs/operators';
+import { UserActionTypes } from './user.action.type';
+import {
+  UserActionUnion,
+  CreateFormUpdateUserActionSuccess,
+  CreateFormUpdateUserActionError,
+  UpdateUserActionSuccess,
+  UpdateUserActionError,
+} from './user.actions';
+import { Observable, mergeMap, of } from 'rxjs';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { UserService } from './../../shared/services/user.service';
+import { Injectable } from '@angular/core';
+import { User } from 'src/app/shared/models/user/user.model';
+
+@Injectable()
+export class UserUpdateEffects {
+  constructor(private userService: UserService, private userActions: Actions) {}
+
+  //create form to update a user
+  createFormUpdateUserEffect: Observable<UserActionUnion> = createEffect(() =>
+    this.userActions.pipe(
+      ofType(UserActionTypes.CREATE_FORM_UPDATE_USER),
+      mergeMap((action: UserActionUnion) => {
+        return this.userService.getUserByID(action.payload.userID).pipe(
+          map((user: User) => new CreateFormUpdateUserActionSuccess(user,{})),
+          catchError((err) => of(new CreateFormUpdateUserActionError(err,{})))
+        );
+      })
+    )
+  );
+
+  //update user
+  updateUserEffect : Observable<UserActionUnion> = createEffect(
+    ()=> this.userActions.pipe(
+      ofType(UserActionTypes.UPDATE_USER),
+      mergeMap((action: UserActionUnion) =>{
+        return this.userService.updateUserService(action.payload).pipe(
+          map ((user: User) => new UpdateUserActionSuccess(user)),
+          catchError( err => of(new UpdateUserActionError(err)))
+        )
+      })
+    )
+  )
+}

src/app/ngrx/user/user.reducer.ts

@@ -0,0 +1,150 @@
+import { UserActionUnion } from './user.actions';
+import { UserActionTypes } from './user.action.type';
+import { Action } from '@ngrx/store';
+import { MsgState } from '../msg.state';
+import { UserState } from './user.state';
+import { User } from 'src/app/shared/models/user/user.model';
+
+const userInitiallState: UserState = {
+  currentUser: undefined,
+  usersList: [],
+  msgState: MsgState.INIT_STATE,
+  errorMsg: 'no error',
+};
+
+export function userReducer(
+  state: UserState = userInitiallState,
+  action: Action
+): UserState {
+  switch (action.type) {
+    //get all users
+    case UserActionTypes.GET_ALL_USERS:
+      return {
+        ...state,
+        msgState: MsgState.LOADING,
+      };
+    case UserActionTypes.GET_ALL_USERS_SUCCESS:
+      return {
+        ...state,
+        msgState: MsgState.LOADED,
+        usersList: (<UserActionUnion>action).payload,
+      };
+    case UserActionTypes.GET_ALL_USERS_ERROR:
+      return {
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg: (<UserActionUnion>action).payload,
+      };
+
+    //create form to add new user
+    case UserActionTypes.CREATE_FORM_ADD_USER:
+      return{
+        ...state,
+        msgState: MsgState.FORM_LOADING
+      };
+    case UserActionTypes.CREATE_FORM_ADD_USER_SUCCESS:
+      return{
+        ...state,
+        msgState: MsgState.FORM_LOADED
+      };
+    case UserActionTypes.CREATE_FORM_ADD_USER_ERROR:
+      return{
+        ...state,
+        msgState: MsgState.FORM_LOAD_ERR,
+        errorMsg: (<UserActionUnion>action).payload,
+      };
+
+    // save new user
+    case UserActionTypes.SAVE_NEW_USER:
+      return{
+        ...state,
+        msgState:MsgState.ADD
+      }
+    case UserActionTypes.SAVE_NEW_USER_SUCCESS:
+      let newUser: User = (<UserActionUnion> action).payload;
+      let usersListCopy1: Array<User> = [...state.usersList];
+      usersListCopy1.push(newUser);
+      return{
+        ...state,
+        msgState: MsgState.ADDED,
+        usersList: usersListCopy1
+      };
+    case UserActionTypes.SAVE_NEW_USER_ERROR:
+      return{
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg:(<UserActionUnion> action).payload
+      }
+
+    //delete user
+    case UserActionTypes.DELETE_USER:
+      return{
+        ...state,
+        msgState: MsgState.DELETE
+      };
+    case UserActionTypes.DELETE_USER_SUCCCESS:
+      let deletedUser : User = (<UserActionUnion> action).payload;
+      let deletedUserIndex = state.usersList.indexOf(deletedUser);
+      let usersListCopy2: Array<User> = [...state.usersList];
+      usersListCopy2.splice(deletedUserIndex,1);
+      return{
+        ...state,
+        msgState: MsgState.DELETED,
+        usersList:usersListCopy2,
+        currentUser: deletedUser
+      };
+    case UserActionTypes.DELETE_USER_ERROR:
+      return{
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg: (<UserActionUnion> action).payload
+      };
+
+    // create form to update user
+    case UserActionTypes.CREATE_FORM_UPDATE_USER:
+      return{
+        ...state,
+        msgState:MsgState.FORM_LOADING
+      };
+    case UserActionTypes.CREATE_FORM_UPDATE_USER_SUCCESS:
+      let userToUpdate = (<UserActionUnion> action).payload;
+      return{
+        ...state,
+        msgState:MsgState.FORM_LOADED,
+        currentUser:userToUpdate
+      };
+    case UserActionTypes.CREATE_FORM_UPDATE_USER_ERROR:
+      return{
+        ...state,
+        msgState: MsgState.ERR,
+        errorMsg: (<UserActionUnion> action).payload
+      };
+
+
+    // update user
+    case UserActionTypes.UPDATE_USER:
+      return{
+        ...state,
+        msgState: MsgState.UPDATE
+      };
+    case UserActionTypes.UPDATE_USER_SUCCESS:
+      let updatedUser: User = (<UserActionUnion> action).payload;
+      let usersListCopy3: Array<User> = [...state.usersList];
+      usersListCopy3.map(
+        (user) => (user.userID==updatedUser.userID)?updatedUser:user
+        );
+    return {
+      ...state,
+      msgState: MsgState.UPDATED,
+      usersList: usersListCopy3
+    };
+    case UserActionTypes.UPDATE_USER_ERROR:
+      return {
+        ...state,
+        msgState:MsgState.ERR,
+        errorMsg:(<UserActionUnion> action).payload
+      };
+    default:
+      return { ...state };
+  }
+}

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

@@ -0,0 +1,8 @@
+import { MsgState } from '../msg.state';
+import { User } from './../../shared/models/user/user.model';
+export class UserState{
+  currentUser!: User | undefined;
+  usersList!: User[];
+  msgState!: MsgState;
+  errorMsg!: string;
+}

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

@@ -0,0 +1,17 @@
+.sidenav-container {
+  height: 100%;
+}
+
+.sidenav {
+  width: 200px;
+}
+
+.sidenav .mat-toolbar {
+  background: inherit;
+}
+
+.mat-toolbar.mat-primary {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}

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

@@ -0,0 +1,25 @@
+<mat-sidenav-container class="sidenav-container">
+  <mat-sidenav #drawer class="sidenav bg-light" fixedInViewport
+      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
+      [mode]="(isHandset$ | async) ? 'over' : 'side'"
+      [opened]="(isHandset$ | async) === false">
+    <mat-toolbar>
+      <img src="../assets/images/logo-natan.png" width="100"/>
+    </mat-toolbar>
+
+      <mat-nav-list>
+        <a mat-list-item routerLink='/home'>Home</a>
+        <a mat-list-item routerLink="/addresses-management"> Users' Addresses</a>
+        <a mat-list-item routerLink="/users-management"> User Manager</a>
+        <a mat-list-item routerLink="/companies-management">Company Manager</a>
+        <a mat-list-item routerLink="/projects-management">Project Manager</a>
+      </mat-nav-list>
+  </mat-sidenav>
+
+  <mat-sidenav-content>
+    <mat-toolbar>
+      <span>Projects Management</span>
+    </mat-toolbar>
+    <!-- Add Content Here -->
+  </mat-sidenav-content>
+</mat-sidenav-container>

src/app/pages/base-nav-menu/base-nav-menu.component.spec.ts

@@ -0,0 +1,40 @@
+import { LayoutModule } from '@angular/cdk/layout';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+import { BaseNavMenuComponent } from './base-nav-menu.component';
+
+describe('BaseNavMenuComponent', () => {
+  let component: BaseNavMenuComponent;
+  let fixture: ComponentFixture<BaseNavMenuComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [BaseNavMenuComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BaseNavMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Observable } from 'rxjs';
+import { map, shareReplay } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-base-nav-menu',
+  templateUrl: './base-nav-menu.component.html',
+  styleUrls: ['./base-nav-menu.component.css']
+})
+export class BaseNavMenuComponent {
+
+  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
+    .pipe(
+      map(result => result.matches),
+      shareReplay()
+    );
+
+  constructor(private breakpointObserver: BreakpointObserver) {}
+
+}

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

@@ -0,0 +1,13 @@
+import { BasePageAccueilComponent } from './base-page-accueil/base-page-accueil.component';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {path:"home",component:BasePageAccueilComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BasePageAccueilRoutingModule { }

src/app/pages/base-page-accueil/base-page-accueil.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BasePageAccueilRoutingModule } from './base-page-accueil-routing.module';
+import { BasePageAccueilComponent } from './base-page-accueil/base-page-accueil.component';
+
+
+@NgModule({
+  declarations: [
+    BasePageAccueilComponent
+  ],
+  imports: [
+    CommonModule,
+    BasePageAccueilRoutingModule
+  ]
+})
+export class BasePageAccueilModule { }

src/app/pages/base-page-accueil/base-page-accueil/base-page-accueil.component.html

@@ -0,0 +1,14 @@
+<div class="container">
+  <div class="row d-flex justify-content-left">
+
+    <div>
+      <div class="card-body">
+        <h4 class="card-title p-2">Welcome to Natan</h4>
+        <p class="card-text p-2">NATAN est palindrome</p>
+        <p class="card-text p-2">Ce qui fait de NATAN le meilleur</p>
+        <p class="card-text">For all collaborators, NATAN wishes you the best</p>
+      </div>
+    </div>
+
+  </div>
+</div>

src/app/pages/base-page-accueil/base-page-accueil/base-page-accueil.component.spec.ts

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

src/app/pages/base-page-accueil/base-page-accueil/base-page-accueil.component.ts

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

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

@@ -0,0 +1,63 @@
+<span class="p-input-icon-right">
+  <i class="pi pi-search"></i>
+  <input
+    type="text"
+    class="form-control"
+    pInputText
+    [(ngModel)]="companyName"
+    (ngModelChange)="onSearch()"
+    placeholder="search company by name"
+  />
+</span>
+
+<p-table
+  [value]="inputCompaniesList"
+  responsiveLayout="scroll"
+  *ngIf="inputCompaniesList.length>0"
+  styleClass="p-datatable-striped"
+  [paginator]="true"
+  [rows]="10"
+  [showCurrentPageReport]="true"
+  currentPageReportTemplate="{first} - {last} of {totalRecords} companies"
+  [rowsPerPageOptions]="[10, 15, 20]"
+>
+  <ng-template pTemplate="header">
+    <tr>
+      <th>ID</th>
+      <th>Company name</th>
+      <th>Company type 1</th>
+      <th>Company type 2</th>
+      <th>Connection Date</th>
+      <th>action1</th>
+      <th>action2</th>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="body" let-company>
+    <tr>
+      <td>{{ company.companyID }}</td>
+      <td>{{ company.companyName }}</td>
+      <td>{{ company.companyType1 }}</td>
+      <td>{{ company.companyType2 }}</td>
+      <td>{{ company.connectionDate }}</td>
+
+      <td>
+        <button class="btn">
+          <i
+            class="fa fa-pencil"
+            style="color: mediumturquoise"
+            (click)="onCompanyEdit(company)"
+          ></i>
+        </button>
+      </td>
+      <td>
+        <button class="btn">
+          <i
+            class="fa fa-trash"
+            style="color: red"
+            (click)="onCompanyDelete(company)"
+          ></i>
+        </button>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>

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

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

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

@@ -0,0 +1,47 @@
+import { DeleteCompanyAction, GetAllComapaniesAction } from './../../../../ngrx/company/company.actions';
+import { CompanyState } from './../../../../ngrx/company/company.state';
+import { MsgState } from 'src/app/ngrx/msg.state';
+import { Router } from '@angular/router';
+import { Company } from 'src/app/shared/models/company/company.model';
+import { Component, OnInit, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-companies-list',
+  templateUrl: './companies-list.component.html',
+  styleUrls: ['./companies-list.component.css']
+})
+export class CompaniesListComponent implements OnInit {
+
+  constructor(private router: Router, private store: Store<{companyReducerSelector: CompanyState}>) { }
+
+  @ Input () inputCompaniesList!: Array<Company>
+
+  ngOnInit(): void {
+  }
+
+  onCompanyEdit(company: Company){
+    this.router.navigateByUrl("/company-update/"+company.companyID);
+  }
+
+  onCompanyDelete(company:Company){
+    if(window.confirm(MsgState.CONFIRM_DEL)){
+      this.store.dispatch(new DeleteCompanyAction(company));
+    }
+  }
+
+  companyName!: string;
+
+  onSearch() {
+    if(this.companyName==''){
+      this.store.dispatch(new GetAllComapaniesAction({})); //refresh
+    }
+    else{
+      this.inputCompaniesList = this.inputCompaniesList.filter((company: Company) => {
+        return company.companyName
+          .toLocaleLowerCase()
+          .match(this.companyName.toLocaleLowerCase());
+      });
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+<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 mt-3">
+        <div class="card-header"><h1>New Company</h1></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="type1">Company type 1</label>
+              <select formControlName="companyType1" class="form-control">
+                <option
+                  *ngFor="let companyType of companyTypes1 | keyvalue"
+                  [ngValue]="companyType.value"
+                >
+                  {{ companyType.value }}
+                </option>
+              </select>
+            </div>
+
+            <div class="col-md-auto mb-3">
+              <label for="type2">Company type 2</label>
+              <select formControlName="companyType2" class="form-control">
+                <option
+                  *ngFor="let companyType of companyTypes2 | 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 *ngSwitchCase="msgState.ERR">
+      <div class="alert-danger container p-3 m-3" style="width: 30em">
+        <span> {{ companyState.msgState }}</span>
+      </div>
+    </ng-container>
+
+  </ng-container>
+</div>

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

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

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

@@ -0,0 +1,62 @@
+import { Router } from '@angular/router';
+import { MsgState } from './../../../../ngrx/msg.state';
+import { CompanyType1 } from '../../../../shared/models/company/company.type1';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { CreateFormAddCompanyAction, SaveNewCompanyAction } from './../../../../ngrx/company/company.actions';
+import { CompanyState } from './../../../../ngrx/company/company.state';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { CompanyType2 } from 'src/app/shared/models/company/company.type2';
+
+@Component({
+  selector: 'app-company-create',
+  templateUrl: './company-create.component.html',
+  styleUrls: ['./company-create.component.css'],
+})
+export class CompanyCreateComponent implements OnInit {
+  constructor(
+    private store: Store<{ companyReducerSelector: CompanyState }>,
+    private fb: FormBuilder,
+    private router: Router
+  ) {}
+
+  companyState!: CompanyState;
+  companyFormGroup!: FormGroup;
+  companyTypes1 = CompanyType1;
+  companyTypes2 = CompanyType2;
+  msgState = MsgState;
+
+  ngOnInit(): void {
+    this.store.dispatch(new CreateFormAddCompanyAction({}));
+    this.store.subscribe({
+      next: (state) => {
+        this.companyState = state.companyReducerSelector;
+
+        this.companyFormGroup = this.fb.group({
+          id: [0, Validators.required],
+          companyName: [
+            '',
+            [
+              Validators.required,
+              Validators.minLength(4),
+              Validators.maxLength(20),
+            ],
+          ],
+          companyType1: ['', Validators.required],
+          companyType2: ['', Validators.required],
+          creationDate: [''],
+        });
+      },
+      error: (err) => {},
+    });
+  }
+
+  onCompanyCreate(){
+    if(window.confirm(this.msgState.CONFIRM_ADD)){
+      this.store.dispatch(new SaveNewCompanyAction(this.companyFormGroup.value))
+    }
+  }
+  onSaveOk(){
+    this.router.navigateByUrl("/companies-management")
+  }
+}

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

@@ -0,0 +1,30 @@
+<app-company-navbar></app-company-navbar>
+<div class="container">
+  <ng-container
+    *ngIf="companyState$ | async as companyState"
+    [ngSwitch]="companyState.msgState"
+  >
+    <ng-container *ngSwitchCase="msgState.LOADING">
+      {{ companyState.msgState }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.LOADED">
+      <app-companies-list
+        [inputCompaniesList]="companyState.companiesList"
+      ></app-companies-list>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.ERR">
+      <div class="text-danger">
+        {{ companyState.msgState }}
+      </div>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.DELETED">
+      <div class="alert-success container p-3 m-3" style="width: 30em">
+        <span> {{ companyState.msgState }}</span>
+      </div>
+    </ng-container>
+
+  </ng-container>
+</div>

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

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

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

@@ -0,0 +1,23 @@
+import { Observable } from 'rxjs';
+import { MsgState } from './../../../ngrx/msg.state';
+import { CompanyState } from './../../../ngrx/company/company.state';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-company-management',
+  templateUrl: './company-management.component.html',
+  styleUrls: ['./company-management.component.css']
+})
+export class CompanyManagementComponent implements OnInit {
+
+  constructor(private store: Store<{companyReducerSelector: CompanyState}>) { }
+
+  companyState$!: Observable<CompanyState>;
+  msgState = MsgState;
+
+  ngOnInit(): void {
+    this.companyState$ = this.store.select("companyReducerSelector");
+  }
+
+}

src/app/pages/company-manager/company-management/company-navbar/company-navbar.component.html

@@ -0,0 +1,21 @@
+<div class="container">
+  <nav class="navbar navbar-expand-sm">
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <button
+        pButton
+        type="button"
+        label="create company"
+        class="btn btn-outline-primary"
+        (click)="onCompanyCreate()"
+      ></button>
+      &nbsp;
+      <button
+        pButton
+        type="button"
+        label="all companies"
+        (click)="onCompanyGetAll()"
+        class="btn btn-outline-primary"
+      ></button>
+    </div>
+  </nav>
+</div>

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

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

src/app/pages/company-manager/company-management/company-navbar/company-navbar.component.ts

@@ -0,0 +1,25 @@
+import { GetAllComapaniesAction } from './../../../../ngrx/company/company.actions';
+import { CompanyState } from './../../../../ngrx/company/company.state';
+import { Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-company-navbar',
+  templateUrl: './company-navbar.component.html',
+  styleUrls: ['./company-navbar.component.css'],
+})
+export class CompanyNavbarComponent implements OnInit {
+  constructor(
+    private router: Router,
+    private store: Store<{ companyReducerSelector: CompanyState }>
+  ) {}
+
+  ngOnInit(): void {}
+  onCompanyCreate() {
+    this.router.navigateByUrl('/company-create');
+  }
+  onCompanyGetAll() {
+    this.store.dispatch(new GetAllComapaniesAction({}));
+  }
+}

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

@@ -0,0 +1,96 @@
+<div class="container p-3" *ngIf="companyFormGroup">
+  <ng-container *ngIf="companyState" [ngSwitch]="companyState.msgState">
+    <ng-container *ngSwitchCase="msgState.FORM_LOADING">
+      {{ companyState.msgState }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOAD_ERR">
+      {{ companyState.msgState }}
+    </ng-container>
+
+    <span style="color: red;">Current company ID:{{companyState.currentCompany?.companyID}}</span>
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOADED">
+      <div class="card mt-3">
+        <div class="card-header"><h1>Update Company</h1></div>
+
+        <div class="card-body">
+          <form
+            [formGroup]="companyFormGroup"
+            (ngSubmit)="onCompanyUpdate(); companyFormGroup.reset()"
+          >
+            <div class="col-md-auto mb-3">
+              <label for="companyName">Company name</label>
+              <input
+                type="text"
+                formControlName="companyName"
+                class="form-control"
+                [ngClass]="{
+                  'is-invalid':
+                    companyFormGroup.controls['companyName'].touched &&
+                    !companyFormGroup.controls['companyName'].valid
+                }"
+              />
+              <div class="invalid-feedback">
+                <span
+                  *ngIf="companyFormGroup.controls['companyName'].errors?.['required']"
+                >
+                  required
+                </span>
+                <span
+                  *ngIf="companyFormGroup.controls['companyName'].errors?.['minlength']"
+                >
+                  min nbr chars 5
+                </span>
+              </div>
+            </div>
+
+            <div class="col-md-auto mb-3">
+              <label for="type">Company type</label>
+              <select formControlName="companyType1" class="form-control">
+                <option
+                  *ngFor="let companyType of companyTypes1 | keyvalue"
+                  [ngValue]="companyType.value"
+                >
+                  {{ companyType.value }}
+                </option>
+              </select>
+            </div>
+
+            <div class="col-md-auto mb-3">
+              <label for="type">Company type</label>
+              <select formControlName="companyType2" class="form-control">
+                <option
+                  *ngFor="let companyType of companyTypes2 | 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.UPDATED">
+      <div class="alert-success container p-3 m-3" style="width: 30em">
+        <span> {{ companyState.msgState }}</span> &nbsp;&nbsp;
+        <button class="btn btn-success" (click)="onUpdateOk()">OK</button>
+      </div>
+    </ng-container>
+
+  </ng-container>
+</div>

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

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

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

@@ -0,0 +1,71 @@
+import { CompanyType1 } from '../../../../shared/models/company/company.type1';
+import { MsgState } from 'src/app/ngrx/msg.state';
+import { CreateFormUpdateCompanyAction, UpdateCompanyAction } from './../../../../ngrx/company/company.actions';
+import { CompanyState } from './../../../../ngrx/company/company.state';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { CompanyService } from './../../../../shared/services/company.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { CompanyType2 } from 'src/app/shared/models/company/company.type2';
+
+@Component({
+  selector: 'app-company-update',
+  templateUrl: './company-update.component.html',
+  styleUrls: ['./company-update.component.css'],
+})
+export class CompanyUpdateComponent implements OnInit {
+  companyID: number;
+
+  constructor(
+    activedRoute: ActivatedRoute,
+    private companyService: CompanyService,
+    private store: Store<{companyReducerSelector: CompanyState}>,
+    private fb: FormBuilder,
+    private router: Router
+  ) {
+    this.companyID = activedRoute.snapshot.params["companyID"];
+  }
+
+  companyState!: CompanyState;
+  companyFormGroup!: FormGroup;
+  msgState = MsgState;
+  companyTypes1 = CompanyType1;
+  companyTypes2 = CompanyType2;
+
+  ngOnInit(): void {
+    this.companyService.getCompanyByIDService(this.companyID).subscribe(
+      (company)=>{
+        this.store.dispatch(new CreateFormUpdateCompanyAction(company));
+        this.store.subscribe((state)=>{
+          this.companyState = state.companyReducerSelector;
+
+          this.companyFormGroup = this.fb.group({
+            companyID: [this.companyState.currentCompany?.companyID],
+            companyName: [
+              this.companyState.currentCompany?.companyName,
+              [
+                Validators.required,
+                Validators.minLength(4),
+                Validators.maxLength(20),
+              ],
+            ],
+            companyType1: [this.companyState.currentCompany?.companyType1, Validators.required],
+            companyType2: [this.companyState.currentCompany?.companyType2, Validators.required],
+            creationDate: [this.companyState.currentCompany?.connectionDate],
+          });
+        });
+      }
+    );
+  }
+
+  onCompanyUpdate(){
+    if(window.confirm(this.msgState.CONFIRM_UPDATE)){
+      this.store.dispatch(new UpdateCompanyAction(this.companyFormGroup.value));
+    }
+  }
+
+  onUpdateOk(){
+    this.router.navigateByUrl("/companies-management")
+  }
+}

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

@@ -0,0 +1,17 @@
+import { CompanyUpdateComponent } from './company-management/company-update/company-update.component';
+import { CompanyCreateComponent } from './company-management/company-create/company-create.component';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { CompanyManagementComponent } from './company-management/company-management.component';
+
+const routes: Routes = [
+  { path: 'companies-management', component: CompanyManagementComponent },
+  { path: 'company-create', component: CompanyCreateComponent },
+  { path:'company-update/:companyID', component: CompanyUpdateComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CompanyManagerRoutingModule {}

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

@@ -0,0 +1,34 @@
+import { TableModule } from 'primeng/table';
+import {  FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CompanyManagerRoutingModule } from './company-manager-routing.module';
+import { CompanyManagementComponent } from './company-management/company-management.component';
+import { CompanyNavbarComponent } from './company-management/company-navbar/company-navbar.component';
+import { CompanyCreateComponent } from './company-management/company-create/company-create.component';
+import { CompaniesListComponent } from './company-management/companies-list/companies-list.component';
+import { CompanyUpdateComponent } from './company-management/company-update/company-update.component';
+
+
+@NgModule({
+  declarations: [
+
+
+    CompanyManagementComponent,
+        CompanyNavbarComponent,
+        CompanyCreateComponent,
+        CompaniesListComponent,
+        CompanyUpdateComponent
+  ],
+  imports: [
+    CommonModule,
+    CompanyManagerRoutingModule,
+    ButtonModule,
+    ReactiveFormsModule,
+    TableModule,
+    FormsModule
+  ]
+})
+export class CompanyManagerModule { }

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

@@ -0,0 +1,165 @@
+<div class="container">
+
+  <ng-container *ngIf="projectState" [ngSwitch]="projectState.msgState">
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOADING">
+      {{projectState.msgState}}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOAD_ERR">
+      {{projectState.msgState}}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOADED">
+      {{projectState.msgState}}
+
+      <div class="card mt-3">
+        <div class="card-header bg-light">
+          <h1>New project</h1>
+        </div>
+        <div class="card-body">
+          <form
+            [formGroup]="projectFormGroup"
+            (ngSubmit)="onProjectSave(); projectFormGroup.reset()"
+          >
+            <div class="row">
+              <!-- 1ère colonne -->
+              <div class="col">
+                <div class="col-md-auto mb-3">
+                  <label for="projectName">Project name</label>
+                  <input
+                    type="text"
+                    formControlName="projectName"
+                    class="form-control"
+                    [ngClass]="{
+                      'is-invalid':
+                        projectFormGroup.controls['projectName'].touched &&
+                        !projectFormGroup.controls['projectName'].valid
+                    }"
+                  />
+                  <div class="invalid-feedback">
+                    <span
+                      *ngIf="projectFormGroup.controls['projectName'].errors?.['required']"
+                      >required</span
+                    >
+                    <span
+                      *ngIf="projectFormGroup.controls['projectName'].errors?.['minlength']"
+                      >min nbr chars 5</span
+                    >
+                    <span
+                      *ngIf="projectFormGroup.controls['projectName'].errors?.['maxlength']"
+                      >min nbr chars 20</span
+                    >
+                  </div>
+                </div>
+
+                <div class="col-md-auto mb-3">
+                  <label for="priority">Project priority</label>
+                  <select formControlName="priority" class="form-control">
+
+                    <option
+                      *ngFor="let priority of priorities | keyvalue " [ngValue]="priority.value"
+                    >
+                      {{priority.value}}
+                    </option>
+                  </select>
+                </div>
+
+                <div class="col-md-auto mb-3">
+                  <label for="companyId">Company ID</label>
+                  <select formControlName="companyID" class="form-control">
+
+                    <option
+                      *ngFor="let company of companyState.companiesList" [ngValue]="company.companyID"
+                    >
+                      {{ company.companyID }}
+                    </option>
+                  </select>
+                </div>
+
+              </div>
+
+              <!-- 2ème colonne -->
+
+              <div class="col">
+
+                <div class="col-md-auto mb-3">
+                  <label for="userID">User ID</label>
+                  <select formControlName="userID" class="form-control">
+
+                    <option
+                      *ngFor="let user of userState.usersList" [ngValue]="user.userID"
+                    >
+                      {{ user.userID }}
+                    </option>
+                  </select>
+                </div>
+
+                <div class="col-md-auto mb-3">
+                  <label for="state">Project state</label>
+                  <select formControlName="projState" class="form-control">
+
+                    <option
+                      *ngFor="let projState of projStates | keyvalue"
+                      [ngValue]="projState.value"
+                    >
+                      {{ projState.value }}
+                    </option>
+                  </select>
+                </div>
+
+                <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>
+
+            <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-danger" type="reset">
+                reset
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.ADDED">
+      <div class="alert-success container mb-3 mt-3" style="width: 30em">
+        <span> {{ projectState.msgState }}</span> &nbsp;
+        <button class="btn btn-success" (click)="onSaveSuccess()">OK</button>
+      </div>
+    </ng-container>
+
+  </ng-container>
+</div>

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

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

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

@@ -0,0 +1,98 @@
+import { ProjState } from './../../../../shared/models/project/project.state';
+import { Priority } from 'src/app/shared/models/project/project.priority';
+import { Router } from '@angular/router';
+import { Project } from 'src/app/shared/models/project/project.model';
+import { MsgState } from './../../../../ngrx/msg.state';
+import { GetAllComapaniesAction } from './../../../../ngrx/company/company.actions';
+import { GetAllUsersAction } from './../../../../ngrx/user/user.actions';
+import { CompanyState } from './../../../../ngrx/company/company.state';
+import { UserState } from './../../../../ngrx/user/user.state';
+import { CreateFormAddProjectAction, SaveNewProjectAction } from './../../../../ngrx/project/project.action';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ProjectState } from './../../../../ngrx/project/project.state';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-project-create',
+  templateUrl: './project-create.component.html',
+  styleUrls: ['./project-create.component.css'],
+})
+export class ProjectCreateComponent implements OnInit {
+  constructor(
+    private store: Store<{
+      projectReducerSelector: ProjectState;
+      userReducerSelector: UserState;
+      companyReducerSelector: CompanyState;
+    }>,
+    private formBuilder: FormBuilder,
+    private router: Router
+  ) {}
+
+  userState!: UserState;
+  companyState!: CompanyState;
+
+  projectFormGroup!: FormGroup;
+  projectState!: ProjectState;
+  projStates = ProjState;
+  priorities = Priority;
+  msgState = MsgState;
+
+  ngOnInit(): void {
+    this.store.dispatch(new GetAllUsersAction({}, {}));
+    this.store.dispatch(new GetAllComapaniesAction({}));
+    this.store.subscribe(
+      (state) => (this.userState = state.userReducerSelector)
+    );
+    this.store.subscribe(
+      (state) => (this.companyState = state.companyReducerSelector)
+    );
+
+    this.store.dispatch(new CreateFormAddProjectAction({}, {}, {}));
+    this.store.subscribe((state) => {
+      this.projectState = state.projectReducerSelector;
+
+      this.projectFormGroup = this.formBuilder.group({
+        projectName: [
+          '',
+          [
+            Validators.required,
+            Validators.minLength(5),
+            Validators.maxLength(20),
+          ],
+        ],
+        priority: ['', Validators.required],
+        description: ['', [Validators.required, Validators.minLength(25)]],
+        projState: ['', Validators.required],
+        userID: ['', Validators.required],
+        companyID: ['', Validators.required],
+      });
+    });
+  }
+
+  onProjectSave() {
+    if(window.confirm(this.msgState.CONFIRM_ADD)){
+
+      let formModel = this.projectFormGroup.value;
+      //project model
+      let project: Project = new Project();
+      project.projectName= formModel.projectName;
+      project.priority = formModel.priority;
+      project.createdDate = formModel.createdDate;
+      project.description = formModel.description;
+      project.projState = formModel.projState;
+      project.companyID=formModel.companyID;
+      project.userID = formModel.userID;
+
+      // user and company id needed to create project
+      let userID: number = formModel.userID;
+      let companyID: number = formModel.companyID;
+
+      this.store.dispatch(new SaveNewProjectAction(project));
+    }
+  }
+
+  onSaveSuccess(){
+    this.router.navigateByUrl("/projects-management")
+  }
+}

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

@@ -0,0 +1,21 @@
+<app-project-navbar></app-project-navbar>
+<div class="container">
+  <ng-container
+    *ngIf="projectState$ | async as projState"
+    [ngSwitch]="projState.msgState"
+  >
+    <ng-container *ngSwitchCase="msgState.LOADING">
+      {{ projState.msgState }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.ERR">
+      {{ projState.msgState }}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.LOADED">
+      <app-projects-list
+        [inputProjectsList]="projState.projectsList"
+      ></app-projects-list>
+    </ng-container>
+  </ng-container>
+</div>

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

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

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

@@ -0,0 +1,22 @@
+import { MsgState } from 'src/app/ngrx/msg.state';
+import { Observable } from 'rxjs';
+import { GetAllProjectAction } from './../../../ngrx/project/project.action';
+import { ProjectState } from './../../../ngrx/project/project.state';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-project-management',
+  templateUrl: './project-management.component.html',
+  styleUrls: ['./project-management.component.css'],
+})
+export class ProjectManagementComponent implements OnInit {
+  constructor(private store: Store<{ projectReducerSelector: ProjectState }>) {}
+  projectState$!: Observable<ProjectState>;
+  msgState = MsgState;
+
+  ngOnInit(): void {
+    this.store.dispatch(new GetAllProjectAction());
+    this.projectState$ = this.store.select('projectReducerSelector');
+  }
+}

src/app/pages/project-manager/project-management/project-navbar/project-navbar.component.html

@@ -0,0 +1,21 @@
+  <div class="container">
+    <nav class="navbar navbar-expand-sm">
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <button
+          pButton
+          type="button"
+          label="create project"
+          class="btn btn-outline-primary"
+          (click)="onProjectCreate()"
+        ></button>
+        &nbsp;
+        <button
+          pButton
+          type="button"
+          label="all projects"
+
+          class="btn btn-outline-primary"
+        ></button>
+      </div>
+    </nav>
+  </div>

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

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

src/app/pages/project-manager/project-management/project-navbar/project-navbar.component.ts

@@ -0,0 +1,25 @@
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-project-navbar',
+  templateUrl: './project-navbar.component.html',
+  styleUrls: ['./project-navbar.component.css']
+})
+export class ProjectNavbarComponent implements OnInit {
+
+  formSearch!: FormGroup;
+
+  constructor(private router: Router, private fb: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.formSearch= this.fb.group({
+      userID:['', Validators.required]
+    })
+  }
+
+  onProjectCreate(){
+    this.router.navigateByUrl("/project-create")
+  }
+}

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

@@ -0,0 +1,167 @@
+<div class="container">
+
+  <ng-container *ngIf="projectState" [ngSwitch]="projectState.msgState">
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOADING">
+      {{projectState.msgState}}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOAD_ERR">
+      {{projectState.msgState}}
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.FORM_LOADED">
+      <span style="color: red;">Current project ID: {{projectState.currestProject?.projectID}}</span>
+
+      <div class="card mt-3">
+        <div class="card-header bg-light">
+         <h1>Update Project</h1>
+        </div>
+        <div class="card-body">
+          <form
+            [formGroup]="projectFormGroup"
+            (ngSubmit)="onProjectUpdate(); projectFormGroup.reset()"
+          >
+            <div class="row">
+              <!-- 1ère colonne -->
+              <div class="col">
+                <div class="col-md-auto mb-3">
+                  <label for="projectName">Current 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">Current project priority</label>
+                  <select formControlName="priority" class="form-control">
+                    <option value="" desabled>select project priority</option>
+                    <option
+                      *ngFor="let priority of priorities | keyvalue"
+                      [ngValue]="priority.value"
+                    >
+                      {{ priority.value }}
+                    </option>
+                  </select>
+                </div>
+
+
+                <div class="col-md-auto mb-3">
+                  <label for="companyId">Assing project to a Company</label>
+                  <select formControlName="companyID" class="form-control">
+                    <option value="" disabled> Current company ID</option>
+                    <option
+                      *ngFor="let company of companyState.companiesList" [ngValue]="company.companyID"
+                    >
+                      {{ company.companyID }}
+                    </option>
+                  </select>
+                </div>
+
+              </div>
+
+              <!-- 2ème colonne -->
+
+              <div class="col">
+
+                <div class="col-md-auto mb-3">
+                  <label for="userID">Current user assignd </label>
+                  <select formControlName="userID" class="form-control">
+                    <option value="" disabled>select use ID</option>
+                    <option
+                      *ngFor="let user of userState.usersList" [ngValue]="user.userID"
+                    >
+                      {{ user.userID }}
+                    </option>
+                  </select>
+                </div>
+
+                <div class="col-md-auto mb-3">
+                  <label for="state">Current project state</label>
+                  <select formControlName="projState" class="form-control">
+                    <option value="" desabled>select project state</option>
+                    <option
+                      *ngFor="let projState of projStates | keyvalue"
+                      [ngValue]="projState.value"
+                    >
+                      {{ projState.value }}
+                    </option>
+                  </select>
+                </div>
+
+                <div class="col-md-auto mb-3">
+                  <label for="description">Current 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>
+
+            <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-danger" type="reset">
+                reset
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="msgState.UPDATED">
+      <div class="alert-success container mb-3 mt-3" style="width: 30em">
+        <span> {{ projectState.msgState }}</span> &nbsp;
+        <button class="btn btn-success" (click)="onUpdateSuccess()">OK</button>
+      </div>
+    </ng-container>
+
+  </ng-container>
+</div>

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

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

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

@@ -0,0 +1,123 @@
+import { ProjState } from './../../../../shared/models/project/project.state';
+import { Project } from 'src/app/shared/models/project/project.model';
+import { GetAllComapaniesAction } from './../../../../ngrx/company/company.actions';
+import { GetAllUsersAction } from 'src/app/ngrx/user/user.actions';
+import { CreateFormUpdatedProjectAction, UpdateProjectAction } from './../../../../ngrx/project/project.action';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ProjectState } from './../../../../ngrx/project/project.state';
+import { ProjectService } from './../../../../shared/services/project.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { UserState } from 'src/app/ngrx/user/user.state';
+import { CompanyState } from 'src/app/ngrx/company/company.state';
+import { Priority } from 'src/app/shared/models/project/project.priority';
+import { MsgState } from 'src/app/ngrx/msg.state';
+
+@Component({
+  selector: 'app-project-update',
+  templateUrl: './project-update.component.html',
+  styleUrls: ['./project-update.component.css'],
+})
+export class ProjectUpdateComponent implements OnInit {
+  projectID: number;
+
+  constructor(
+    activatedRoute: ActivatedRoute,
+    private projectService: ProjectService,
+    private store: Store<{
+      projectReducerSelector: ProjectState;
+      userReducerSelector: UserState;
+      companyReducerSelector: CompanyState;
+    }>,
+    private formBuilder: FormBuilder,
+    private router: Router
+  ) {
+    this.projectID = activatedRoute.snapshot.params['projectID'];
+  }
+
+  userState!: UserState;
+  companyState!: CompanyState;
+
+  projectFormGroup!: FormGroup;
+  projectState!: ProjectState;
+  priorities = Priority;
+  projStates = ProjState;
+  msgState = MsgState;
+
+  ngOnInit(): void {
+    this.store.dispatch(new GetAllUsersAction({}, {}));
+    this.store.subscribe((state) => {
+      this.userState = state.userReducerSelector;
+    });
+    this.store.dispatch(new GetAllComapaniesAction({}));
+    this.store.subscribe((state) => {
+      this.companyState = state.companyReducerSelector;
+    });
+
+    this.projectService
+      .getProjectByIDService(this.projectID)
+      .subscribe((project) => {
+        this.store.dispatch(
+          new CreateFormUpdatedProjectAction(project, {}, {})
+        );
+        this.store.subscribe((state) => {
+          this.projectState = state.projectReducerSelector;
+
+          this.projectFormGroup = this.formBuilder.group({
+            projectID: [this.projectState.currestProject?.projectID],
+            projectName: [
+              this.projectState.currestProject?.projectName,
+              [
+                Validators.required,
+                Validators.minLength(5),
+                Validators.maxLength(20),
+              ],
+            ],
+            priority: [
+              this.projectState.currestProject?.priority,
+              Validators.required,
+            ],
+            createdDate: [this.projectState.currestProject?.createdDate],
+            description: [
+              this.projectState.currestProject?.description,
+              [Validators.required, Validators.minLength(25)],
+            ],
+            projState: [
+              this.projectState.currestProject?.projState,
+              Validators.required,
+            ],
+            userID: [
+              this.projectState.currestProject?.user.userID,
+              Validators.required,
+            ],
+            companyID: [
+              this.projectState.currestProject?.company.companyID,
+              Validators.required,
+            ],
+          });
+        });
+      });
+  }
+
+  onProjectUpdate() {
+
+    let projectFormModel = this.projectFormGroup.value;
+    let project : Project = new Project();
+    project.projectID = projectFormModel.projectID;
+    project.projectName = projectFormModel.projectName;
+    project.priority = projectFormModel.priority;
+    project.companyID = projectFormModel.companyID;
+    project.description = projectFormModel.description;
+    project.projState = projectFormModel.projState;
+    project.userID = projectFormModel.userID;
+
+    if(window.confirm(this.msgState.CONFIRM_UPDATE)){
+      this.store.dispatch(new UpdateProjectAction(project));
+    }
+
+  }
+  onUpdateSuccess() {
+    this.router.navigateByUrl("/projects-management");
+  }
+}

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

@@ -0,0 +1,98 @@
+<span class="p-input-icon-right">
+  <i class="pi pi-search"></i>
+  <input
+    type="text"
+    class="form-control"
+    pInputText
+    [(ngModel)]="projectName"
+    (ngModelChange)="onSearch1()"
+    placeholder="search a project by name"
+  />
+</span> &nbsp;
+<span class="p-input-icon-right">
+  <i class="pi pi-search"></i>
+  <input
+    type="text"
+    class="form-control"
+    pInputText
+    [(ngModel)]="userLastname"
+    (ngModelChange)="onSearch2()"
+    placeholder="projects of user lastname"
+  />
+</span>
+
+  &nbsp;
+<span class="p-input-icon-right">
+  <i class="pi pi-search"></i>
+  <input
+    type="text"
+    class="form-control"
+    pInputText
+    [(ngModel)]="companyName"
+    (ngModelChange)="onSearch3()"
+    placeholder="projects of company"
+  />
+</span>
+
+<p-table
+    [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>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Priority</th>
+        <th> Created Date</th>
+        <th>Description</th>
+        <th>state</th>
+        <th>User assigned</th>
+        <th>Company</th>
+        <th>action1</th>
+        <th>action2</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-project>
+      <tr>
+        <td>{{ project.projectID }}</td>
+        <td>{{ project.projectName }}</td>
+        <td>{{ project.priority }}</td>
+        <td>{{project.createdDate}}</td>
+        <td>{{ project.description }}</td>
+        <td>{{ project.state }}</td>
+        <td>
+          <ul>
+            <li>{{ project.user.firstname}} {{ project.user.lastname}}</li>
+            <li>{{ project.user.email}}</li>
+            <li>{{ project.user.address.numHouse }} {{ project.user.address.streetName }}
+            <li>{{ project.user.address.pb }} {{ project.user.address.city }}, {{ project.user.address.country }}</li>
+
+          </ul>
+        </td>
+        <td>
+          <ul>
+            <li>{{project.company.companyName}}</li>
+            <li>{{project.company.companyType}}</li>
+          </ul>
+        </td>
+        <td>
+          <button class="btn">
+            <i class="fa fa-pencil" style="color:mediumturquoise" (click)="onEditProject(project)"></i>
+          </button>
+        </td>
+        <td>
+          <button class="btn">
+            <i class="fa fa-trash" style="color:red" (click)="onProjectDelete(project)"></i>
+          </button>
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>

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

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

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

@@ -0,0 +1,73 @@
+import { DeleteProjectAction, GetAllProjectAction } from './../../../../ngrx/project/project.action';
+import { ProjectState } from './../../../../ngrx/project/project.state';
+import { MsgState } from 'src/app/ngrx/msg.state';
+import { Router } from '@angular/router';
+import { Project } from 'src/app/shared/models/project/project.model';
+import { Component, OnInit, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-projects-list',
+  templateUrl: './projects-list.component.html',
+  styleUrls: ['./projects-list.component.css']
+})
+export class ProjectsListComponent implements OnInit {
+
+  constructor(private router: Router, private store : Store<{projectReducerSelector: ProjectState}>) { }
+
+  @ Input () inputProjectsList!: Array<Project>;
+  ngOnInit(): void {
+  }
+
+  onEditProject(project: Project){
+    this.router.navigateByUrl("/project-update/"+project.projectID);
+  }
+  onProjectDelete(project:Project){
+    if(window.confirm(MsgState.CONFIRM_DEL)){
+      this.store.dispatch(new DeleteProjectAction(project))
+    }
+  }
+
+  projectName!: string;
+
+  onSearch1() {
+    if(this.projectName==''){
+      this.store.dispatch(new GetAllProjectAction()); //refresh
+    }
+    else{
+      this.inputProjectsList = this.inputProjectsList.filter((project: Project) => {
+        return project.projectName
+          .toLocaleLowerCase()
+          .match(this.projectName.toLocaleLowerCase());
+      });
+    }
+  }
+
+  userLastname!:string;
+  onSearch2() {
+    if(this.userLastname==''){
+      this.store.dispatch(new GetAllProjectAction()); //refresh
+    }
+    else{
+      this.inputProjectsList = this.inputProjectsList.filter((project: Project) => {
+        return project.user.lastname
+          .toLocaleLowerCase()
+          .match(this.userLastname.toLocaleLowerCase());
+      });
+    }
+  }
+
+  companyName!:string;
+  onSearch3() {
+    if(this.companyName==''){
+      this.store.dispatch(new GetAllProjectAction()); //refresh
+    }
+    else{
+      this.inputProjectsList = this.inputProjectsList.filter((project: Project) => {
+        return project.company.companyName
+          .toLocaleLowerCase()
+          .match(this.companyName.toLocaleLowerCase());
+      });
+    }
+  }
+}