second commit

README-COPY.md

+# Partie fronted: application Angular
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.4.
+
+## Introduction
+Dans cette partie fronted, nous avons utilisé le pattern **NgRx** d'Angular et le framework Primeng.
+
+- Le pattern NgRx met en place des modules nécessaires pour la gestion de différents états de l'application dans le store.
+    - La documentation [pattern NgRx](https://ngrx.io/docs) présente en détail ces modules pour mettre en place le pattern NgRx.
+- Pour les différents styles graphiques, Angular possède son propre framework Primeng.
+    - Pour en savoir plus, la documentation [Primeng](https://www.primefaces.org/primeng/setup)
+
+
+## Les dépendances
+
+1. Pour la mise en place du pattern NgRx d'Angular, les modules installés:
+    - store
+    - store-devtools
+    - effects
+2. Pour la gestion des styles:
+    - Primeng. 
+
+3. Toutes ces dépendances et les autres dépendances nécessaires pour exécuter l'application sont recensées dans le fichier **package.json** à la racine du répertoire de l'application
+
+## Lancement de l'application frontend
+1. Récupérer le repository : `git clone` https://gitea.natan.fr/placidenduwayo/projects-management-microservices-frontend.git
+2. Néttoyer l'application et fixer toutes les vulnérabilités en exécutant la ligne de commande `npm audit fix`
+    - Cette ligne de commande va télécharger puis installer dans le package **node_modules** toutes les dépendances nécessaires pour l'application
+
+3. Exécuter l'application avec la ligne de commande :`npm start` ou `ng serve`
+4. Aller à la page d'accueil http:localhost:4200:
+    ![page de présentation de l'application](https://drive.google.com/file/d/1CfXun5Sov_q5f045fJGCv0lk2XUq7_DN/view?usp=sharing)

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

 import { UserActionTypes } from './user.action.type';
 import { Action } from '@ngrx/store';
-import { User } from 'src/app/shared/models/user/user.model';
+import { AppUser } from 'src/app/shared/models/user/user.model';
 import { Project } from 'src/app/shared/models/project/project.model';
 
 //get all user action
 }
 export class GetAllUsersActionSuccess implements Action {
   type: UserActionTypes = UserActionTypes.GET_ALL_USERS_SUCCESS;
-  constructor(public payload: Array<User>, public addressID: any) {}
+  constructor(public payload: Array<AppUser>, public addressID: any) {}
 }
 export class GetAllUsersActionError implements Action {
   type: UserActionTypes = UserActionTypes.GET_ALL_USERS_ERROR;
 // save new user action
 export class SaveNewUserAction implements Action{
   type: UserActionTypes = UserActionTypes.SAVE_NEW_USER;
-  constructor(public payload:User){}
+  constructor(public payload:AppUser){}
 }
 export class SaveNewUserActionSuccess implements Action{
   type: UserActionTypes = UserActionTypes.SAVE_NEW_USER_SUCCESS;
-  constructor(public payload:User){}
+  constructor(public payload:AppUser){}
 }
 export class SaveNewUserActionError implements Action{
   type: UserActionTypes = UserActionTypes.SAVE_NEW_USER_ERROR;
 // delete user action
 export class DeleteUserAction implements Action{
   type: UserActionTypes = UserActionTypes.DELETE_USER;
-  constructor(public payload: User,  public addressID: any){}
+  constructor(public payload: AppUser,  public addressID: any){}
 }
 export class DeleteUserActionSuccess implements Action{
   type: UserActionTypes = UserActionTypes.DELETE_USER_SUCCCESS;
-  constructor(public payload: User,  public addressID: any){}
+  constructor(public payload: AppUser,  public addressID: any){}
 }
 export class DeleteUserActionError implements Action{
   type: UserActionTypes = UserActionTypes.DELETE_USER_ERROR;
 // form to update user action
 export class CreateFormUpdateUserAction implements Action{
   type: UserActionTypes = UserActionTypes.CREATE_FORM_UPDATE_USER;
-  constructor(public payload: User,  public addressID: any){}
+  constructor(public payload: AppUser,  public addressID: any){}
 }
 export class CreateFormUpdateUserActionSuccess implements Action{
   type: UserActionTypes = UserActionTypes.CREATE_FORM_UPDATE_USER_SUCCESS;
-  constructor(public payload: User,  public addressID: any){}
+  constructor(public payload: AppUser,  public addressID: any){}
 }
 export class CreateFormUpdateUserActionError implements Action{
   type: UserActionTypes = UserActionTypes.CREATE_FORM_UPDATE_USER_ERROR;
 //update user
 export class UpdateUserAction implements Action{
   type: UserActionTypes = UserActionTypes.UPDATE_USER;
-  constructor(public payload: User){}
+  constructor(public payload: AppUser){}
 }
 export class UpdateUserActionSuccess implements Action{
   type: UserActionTypes = UserActionTypes.UPDATE_USER_SUCCESS;
-  constructor(public payload: User){}
+  constructor(public payload: AppUser){}
 }
 export class UpdateUserActionError implements Action{
   type: UserActionTypes = UserActionTypes.UPDATE_USER_ERROR;

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

 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';
+import { AppUser } from 'src/app/shared/models/user/user.model';
 
 @Injectable()
 export class UserCreateEffects {
           .createUserService(action.payload)
           .pipe(
             map(
-              (user: User) =>
+              (user: AppUser) =>
                 new SaveNewUserActionSuccess(user)
             ),
             catchError((err) => of(new SaveNewUserActionError(err.message)))

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

 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';
+import { AppUser } from 'src/app/shared/models/user/user.model';
 
 @Injectable()
 export class UserGetAllEffects {
       ofType(UserActionTypes.GET_ALL_USERS),
       mergeMap((action: UserActionUnion) => {
         return this.userservice.geAllUsersService().pipe(
-          map((users: User[]) => new GetAllUsersActionSuccess(users, {})),
+          map((users: AppUser[]) => new GetAllUsersActionSuccess(users, {})),
           catchError((err) => of(new GetAllUsersActionError(err, {})))
         );
       })

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

 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';
+import { AppUser } from 'src/app/shared/models/user/user.model';
 
 @Injectable()
 export class UserUpdateEffects {
       ofType(UserActionTypes.CREATE_FORM_UPDATE_USER),
       mergeMap((action: UserActionUnion) => {
         return this.userService.getUserByID(action.payload.userID).pipe(
-          map((user: User) => new CreateFormUpdateUserActionSuccess(user,{})),
+          map((user: AppUser) => new CreateFormUpdateUserActionSuccess(user,{})),
           catchError((err) => of(new CreateFormUpdateUserActionError(err,{})))
         );
       })
       ofType(UserActionTypes.UPDATE_USER),
       mergeMap((action: UserActionUnion) =>{
         return this.userService.updateUserService(action.payload).pipe(
-          map ((user: User) => new UpdateUserActionSuccess(user)),
+          map ((user: AppUser) => new UpdateUserActionSuccess(user)),
           catchError( err => of(new UpdateUserActionError(err)))
         )
       })

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

 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';
+import { AppUser } from 'src/app/shared/models/user/user.model';
 
 const userInitiallState: UserState = {
   currentUser: undefined,
         msgState:MsgState.ADD
       }
     case UserActionTypes.SAVE_NEW_USER_SUCCESS:
-      let newUser: User = (<UserActionUnion> action).payload;
-      let usersListCopy1: Array<User> = [...state.usersList];
+      let newUser: AppUser = (<UserActionUnion> action).payload;
+      let usersListCopy1: Array<AppUser> = [...state.usersList];
       usersListCopy1.push(newUser);
       return{
         ...state,
         msgState: MsgState.DELETE
       };
     case UserActionTypes.DELETE_USER_SUCCCESS:
-      let deletedUser : User = (<UserActionUnion> action).payload;
+      let deletedUser : AppUser = (<UserActionUnion> action).payload;
       let deletedUserIndex = state.usersList.indexOf(deletedUser);
-      let usersListCopy2: Array<User> = [...state.usersList];
+      let usersListCopy2: Array<AppUser> = [...state.usersList];
       usersListCopy2.splice(deletedUserIndex,1);
       return{
         ...state,
         msgState: MsgState.UPDATE
       };
     case UserActionTypes.UPDATE_USER_SUCCESS:
-      let updatedUser: User = (<UserActionUnion> action).payload;
-      let usersListCopy3: Array<User> = [...state.usersList];
+      let updatedUser: AppUser = (<UserActionUnion> action).payload;
+      let usersListCopy3: Array<AppUser> = [...state.usersList];
       usersListCopy3.map(
         (user) => (user.userID==updatedUser.userID)?updatedUser:user
         );

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

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

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

 import { UserType } from './../../../../shared/models/user/user.type';
 import { Router } from '@angular/router';
-import { User } from 'src/app/shared/models/user/user.model';
+import { AppUser } from 'src/app/shared/models/user/user.model';
 import { MsgState } from './../../../../ngrx/msg.state';
 import {
   CreateFormAddUserAction,
 
   onUserSave() {
     let model: any = this.userFormGroup.value;
-    let user: User = new User();
+    let user: AppUser = new AppUser();
     user.firstname = model.firstname;
     user.lastname = model.lastname;
     user.userType = model.userType;

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

-import { User } from 'src/app/shared/models/user/user.model';
+import { AppUser } from 'src/app/shared/models/user/user.model';
 import { Component, Input, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { GetAllUsersAction } from 'src/app/ngrx/user/user.actions';
 
   constructor(private store: Store<{userReducer: UserState}>, private router: Router) { }
 
-  inputUsersList!: Array<User>
+  inputUsersList!: Array<AppUser>
   ngOnInit(): void {
 
   }

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

 import { UserType } from './../../../../shared/models/user/user.type';
-import { User } from 'src/app/shared/models/user/user.model';
+import { AppUser } from 'src/app/shared/models/user/user.model';
 import { GetAllAddressesAction } from 'src/app/ngrx/user-s-address/address.action';
 import { AddressState } from './../../../../ngrx/user-s-address/address.state';
 import { CreateFormUpdateUserAction, UpdateUserAction } from './../../../../ngrx/user/user.actions';
 
   onUserUpdate(){
     let formModel = this.userFormGroup.value;
-    let user: User = new User();
+    let user: AppUser = new AppUser();
     user.userID = formModel.userID;
     user.firstname= formModel.firstname;
     user.lastname = formModel.lastname;

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

 import { UserState } from './../../../../ngrx/user/user.state';
 import { Store } from '@ngrx/store';
 import { Component, Input } from '@angular/core';
-import { User } from 'src/app/shared/models/user/user.model';
+import { AppUser } from 'src/app/shared/models/user/user.model';
 
 @Component({
   selector: 'app-users-list',
     private store: Store<{ userReducerSelector: UserState }>,
     private router: Router
   ) {}
-  @Input() inputUsersList!: User[];
+  @Input() inputUsersList!: AppUser[];
 
-  onUserEdit(user: User) {
+  onUserEdit(user: AppUser) {
     this.router.navigateByUrl("/user-update/"+user.userID);
   }
 
-  onUserDelete(user: User) {
+  onUserDelete(user: AppUser) {
     if (window.confirm(MsgState.CONFIRM_DEL + ':' + user.email)) {
       this.store.dispatch(new DeleteUserAction(user, {}));
     }
       this.store.dispatch(new GetAllUsersAction({},{})); //refresh
     }
     else{
-      this.inputUsersList = this.inputUsersList.filter((user: User) => {
+      this.inputUsersList = this.inputUsersList.filter((user: AppUser) => {
         return user.firstname
           .toLocaleLowerCase()
           .match(this.firstname.toLocaleLowerCase());

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

 import { Priority } from './project.priority';
 
 import { Company } from './../company/company.model';
-import { User } from '../user/user.model';
+import { AppUser } from '../user/user.model';
 import { ProjState } from './project.state';
 
 export class Project{
   company!: Company;
   description!: string;
   userID!: number;
-  user!: User;
+  user!: AppUser;
   projState!: ProjState;
 }

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

 import { UserType } from './user.type';
 import { Address } from "./address.model";
 
-export class User{
+export class AppUser{
   userID!:number;
   firstname!: string;
   lastname!: string;

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

 import { catchError } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 import { environment } from 'src/environments/environment';
-import { User } from '../models/user/user.model';
+import { AppUser } from '../models/user/user.model';
 import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 
   ) {}
 
 
-  geAllUsersService(): Observable<Array<User>> {
-    let users: Observable<Array<User>> = this.httpClient.get<User[]>(
+  geAllUsersService(): Observable<Array<AppUser>> {
+    let users: Observable<Array<AppUser>> = this.httpClient.get<AppUser[]>(
       environment.USERS_SERVER + '/users'
     );
     return users;
   }
 
-  createUserService(user: User): Observable<any> {
+  createUserService(user: AppUser): Observable<any> {
     return this.httpClient
       .post<any>(environment.USERS_SERVER + '/users/', user)
       .pipe(catchError(this.serverErrorHandler.handleError));
       .pipe(catchError(this.serverErrorHandler.handleError));
   }
 
-  getUserByID(userID: number): Observable<User> {
+  getUserByID(userID: number): Observable<AppUser> {
     return this.httpClient
-      .get<User>(environment.USERS_SERVER + '/users/' + userID)
+      .get<AppUser>(environment.USERS_SERVER + '/users/' + userID)
       .pipe(catchError(this.serverErrorHandler.handleError));
   }
 
-  updateUserService(user: User): Observable<User> {
-    let updatedUser: Observable<User> = this.httpClient.put<User>(
+  updateUserService(user: AppUser): Observable<AppUser> {
+    let updatedUser: Observable<AppUser> = this.httpClient.put<AppUser>(
       environment.USERS_SERVER + '/users/' + user.userID,
       user
     );