@movalib/movalib-commons 1.0.66 → 1.0.68

package/src/ScheduleFields.tsx

@@ -0,0 +1,301 @@
+import * as React from 'react';
+import { FunctionComponent, useEffect, useState } from 'react';
+import { Checkbox, FormControlLabel, Grid, IconButton, FormHelperText, FormControl, RadioGroup, Radio } from '@mui/material';
+import AddIcon from '@mui/icons-material/AddRounded';
+import DeleteIcon from '@mui/icons-material/DeleteRounded';
+import { TimePicker } from '@mui/x-date-pickers';
+import theme from '../theme'; // Import du thème personnalisé
+import Schedule from './models/Schedule';
+import { DayOfWeek } from './helpers/Enums';
+import Logger from './helpers/Logger';
+import { flexCenter } from './helpers/Tools';
+
+export const FR_WEEK_DAYS: string[] = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'];
+
+type DayInterval = {
+  startTime: Date | '' | null, 
+  endTime: Date | '' | null, 
+  countryCode: string,
+  error: string | null
+}
+
+export type DaySchedule = {
+  day: DayOfWeek,
+  checked: boolean,
+  allDay: boolean,
+  intervals: DayInterval[],
+};
+
+const initialSchedules: DaySchedule[] = [
+  {day: DayOfWeek.MONDAY, checked: false, allDay: false, intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.TUESDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.WEDNESDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.THURSDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.FRIDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.SATURDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+  {day: DayOfWeek.SUNDAY, checked: false, allDay: false,intervals: [{startTime: null, endTime: null, countryCode: 'fr', error: null}]},
+];
+
+interface ScheduleFieldsProps {
+  timePickerStep: number,
+  size: 'small' | 'medium',
+  onChange: (schedules: DaySchedule[]) => void,
+  schedules?: Schedule[] | undefined;
+}
+
+const ScheduleFields: FunctionComponent<ScheduleFieldsProps> = ({ timePickerStep, schedules, size, onChange }) => {
+  
+  const mergeSchedules = (apiSchedules: Schedule[]): DaySchedule[] => {
+      // Créez une copie profonde du tableau initialSchedules pour éviter toute mutation accidentelle
+      const mergedSchedules = JSON.parse(JSON.stringify(initialSchedules));
+      
+      // Parcourez chaque élément de apiSchedules et mettez à jour updatedSchedules
+      const today = new Date().toISOString().substring(0, 10);  
+
+      for (const apiSchedule of apiSchedules) {
+          const dayIndex = mergedSchedules.findIndex((schedule: { day: DayOfWeek; }) => schedule.day === apiSchedule.dayOfWeek);
+          if (dayIndex !== -1) {
+            mergedSchedules[dayIndex].checked = apiSchedule.intervals.length > 0;
+            mergedSchedules[dayIndex].intervals = apiSchedule.intervals.map(interval => ({
+                  ...interval,
+                  // On injecte une date fictive même si nous n'utilisons que l'heure, le Timepicker attend une Date JS Valide
+                  startTime: new Date(`${today}T${interval.startTime!}`),
+                  endTime: new Date(`${today}T${interval.endTime!}`),
+                  error: null,  // Réinitialisez l'erreur car les données sont maintenant mises à jour
+              }));
+            mergedSchedules[dayIndex].allDay = apiSchedule.isAllWorkingDay;
+          }
+      }
+      
+      Logger.info(mergedSchedules);
+
+      return mergedSchedules;
+  }
+
+  /**
+   * Cette fonction renvoie une liste de DaySchedule depuis une liste de Schedule
+   * @returns 
+   */
+  const initializeFromSchedules = () => {
+
+    if (schedules && schedules.length > 0 ){
+
+      return schedules.map(s => {
+        const iList: DayInterval[] = s.intervals.map(i => ({
+          startTime: new Date(i.startTime!),
+          endTime: new Date(i.endTime!),
+          countryCode: i.countryCode,
+          error: null,
+        }));
+      
+        return {
+          day: s.dayOfWeek,
+          checked: iList.length > 0, // le checked est à true si il y a au moins un interval de saisi
+          intervals: iList,
+        };
+      });
+    }
+    return [];
+  }
+
+  // Si des schedules sont transmises on initialise un nouveau tableau de DaySchedule[]
+  const [schedule, setSchedule] = useState<DaySchedule[]>(initialSchedules);
+
+  // Chargement initial des données du garage
+  useEffect(() => {
+
+    if(schedules && schedules.length > 0){
+      setSchedule(mergeSchedules(schedules));      
+    }
+
+  }, [schedules]); // Exécute le hook à chaque fois que les schedules transmis en props changent
+
+  const handleDayChecked = (dayIndex: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newSchedule = [...schedule];
+    newSchedule[dayIndex].checked = event.target.checked;
+    // On réinitialise aussi les intervals
+    newSchedule[dayIndex].intervals = [{startTime: null, endTime: null, countryCode: 'fr', error: null}];
+    onChange(newSchedule);
+    setSchedule(newSchedule);
+  };
+
+  const handleAllDayChecked = (e: React.ChangeEvent<HTMLInputElement>, value: string, dayIndex: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+
+    const newSchedule = [...schedule];
+    newSchedule[dayIndex].allDay = event.target.checked;
+    onChange(newSchedule);
+    setSchedule(newSchedule);
+  };
+
+  const validateInterval = (start: Date | '', end: Date | ''): string | null => {
+    if (start instanceof Date && end instanceof Date && start.getTime() > end.getTime()) {
+        return "L'heure de début doit être antérieure à l'heure de fin";
+    }
+    return null;
+  };
+
+  const validateIntervals = (intervals: DayInterval[]): string | null  => {
+
+    // On tri les intervals par date de début
+    const sortedIntervals = [...intervals].sort((a, b) => 
+      a.startTime && b.startTime ? a.startTime.toISOString().localeCompare(b.startTime.toISOString()) : 0);
+
+  console.log(sortedIntervals)
+    for (let i = 0; i < sortedIntervals.length; i++) {
+        if (
+          sortedIntervals[i].startTime?.toString().localeCompare(sortedIntervals[i].endTime?.toString()!)! >= 0 ||
+          (i < sortedIntervals.length - 1 &&
+            sortedIntervals[i].endTime?.toString().localeCompare(sortedIntervals[i + 1].startTime?.toString()!)! > 0)
+        ) {
+          return 'Attention vos intervales se chevauchent'; // start time is after or equal to end time, or end time of current interval is after start time of next interval
+        }
+    }
+    return null; // all intervals are valid and there are no overlapping intervals
+  }
+  
+
+  const handleIntervalChange = (dayIndex: number, intervalIndex: number, type: 'startTime' | 'endTime') => 
+  (newValue: "" | Date | null) => {
+
+    const newSchedule = [...schedule];
+
+    newSchedule[dayIndex].intervals[intervalIndex][type] = newValue!;
+
+    newSchedule[dayIndex].intervals[intervalIndex].error = validateInterval(
+      newSchedule[dayIndex].intervals[intervalIndex].startTime!, 
+      newSchedule[dayIndex].intervals[intervalIndex].endTime!
+    );
+
+    //Contrôle le chevauchement d'intervales
+    if(type === 'endTime' && intervalIndex > 0 && !newSchedule[dayIndex].intervals[intervalIndex].error){
+      console.log(dayIndex);
+      console.log(newSchedule[dayIndex].intervals);
+      newSchedule[dayIndex].intervals[intervalIndex].error = validateIntervals(
+        newSchedule[dayIndex].intervals);
+    }
+
+    setSchedule(newSchedule);
+    onChange(newSchedule);
+  };
+
+  const addInterval = (dayIndex: number) => () => {
+    Logger.info(dayIndex);
+
+    const newSchedule = [...schedule];
+    newSchedule[dayIndex].intervals.push({startTime: null, endTime: null, countryCode: 'fr', error: null});
+    Logger.info(newSchedule);
+    setSchedule(newSchedule);
+  };
+
+  const deleteInterval = (dayIndex: number, intervalIndex: number) => () => {
+    const newSchedule = [...schedule];
+    newSchedule[dayIndex].intervals.splice(intervalIndex, 1);
+    onChange(newSchedule);
+    setSchedule(newSchedule);
+  }
+
+  const getDayOfWeekIndex = (day: DayOfWeek) => {
+    if(day){      
+      // Convertir les valeurs de l'énumération en un tableau
+      const daysArray = Object.values(DayOfWeek);
+      return daysArray.indexOf(day);
+    }
+    return -1;
+  }
+
+  return (
+      <Grid container spacing={1} sx={{ minWidth: '650px', maxWidth: '800px'}} >
+        {schedule.map((daySchedule, dayIndex) => (
+          <>
+            <Grid item xs={1} />
+
+            <Grid item xs={2} key={dayIndex+1}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={daySchedule.checked}
+                    onChange={handleDayChecked(dayIndex)}
+                  />
+                }
+                label={FR_WEEK_DAYS[getDayOfWeekIndex(daySchedule.day)]}
+              />
+            </Grid>
+
+            <Grid item xs={7} key={(dayIndex+1)*Math.random()}>
+              {daySchedule.intervals.map((interval, intervalIndex) => (
+                <Grid container key={intervalIndex+1} 
+                  style={{ paddingTop: intervalIndex > 0 ? theme.spacing(1) : 0 }}>
+                  <Grid item xs={6} key={(intervalIndex+1)*Math.random()} sx={{ textAlign: 'center' }}>
+                    <TimePicker
+                      views={['hours', 'minutes']}
+                      minutesStep={timePickerStep ?? 30} // Valeur par défaut de 30 minutes au cas ou
+                      disabled={!daySchedule.checked}
+                      value={interval.startTime}  
+                      formatDensity='dense'                    
+                      onChange={handleIntervalChange(dayIndex, intervalIndex, 'startTime')}
+                      slotProps={{
+                        textField: {
+                          size: 'small',                          
+                          sx: {
+                            width:'150px',
+                            minWidth:'100px',
+                            padding: 0,
+                          },
+                        },
+                        actionBar: {
+                          sx: { display: 'none' },
+                        },
+                      }}
+                    />
+                  </Grid>
+                  <Grid item xs={6} key={(intervalIndex+1)*Math.random()} sx={{ display: 'contents'}}>
+                    <TimePicker
+                      minutesStep={timePickerStep ?? 30} // Valeur par défaut de 30 minutes au cas ou
+                      disabled={!(interval.startTime instanceof Date)}
+                      value={interval.endTime}
+                      formatDensity='dense'
+                      onChange={handleIntervalChange(dayIndex, intervalIndex, 'endTime')}
+                      //onClose={handleIntervalClose}
+                      closeOnSelect={false}
+                      slotProps={{
+                        textField: {
+                          size: 'small',                          
+                          sx: {
+                            width:'150px',
+                            minWidth:'100px',
+                            padding: 0,
+                          },
+                        },
+                        actionBar: {
+                          sx: { display: 'none' },
+                        },
+                      }}                      
+                    />
+                        {intervalIndex > 0 &&
+                        <IconButton onClick={deleteInterval(dayIndex, intervalIndex)} disabled={!daySchedule.checked} sx={{ ml: 2 }}>
+                          <DeleteIcon />
+                        </IconButton>
+                      }
+                  </Grid>
+                  <Grid item xs={12} key={(intervalIndex+1)*Math.random()} >
+                    {interval.error && <FormHelperText error sx={{mb:1}}>{interval.error}</FormHelperText>}
+                  </Grid> 
+                </Grid>
+              ))}                  
+            </Grid>
+
+            <Grid item xs={1} key={(dayIndex+1)*Math.random()} sx={{ pl: 0 }}>
+              <IconButton onClick={addInterval(dayIndex)} disabled={!daySchedule.checked}>
+                <AddIcon />
+              </IconButton>
+            </Grid> 
+            
+            <Grid item xs={1} />
+          </>
+        ))}
+      </Grid>
+  );
+}
+
+export default ScheduleFields;

package/src/helpers/ApiHelper.ts

@@ -0,0 +1,95 @@
+import { APIMethod } from "./Enums";
+import { COOKIE_GARAGE_TOKEN, readCookie } from "./CookieUtils";
+import Logger from "./Logger";
+
+export const API_BASE_URL = process.env.REACT_APP_API_URL ?? 'https://localhost:8443/api';
+
+export type APIResponse<T> = {
+    success: boolean;
+    data?: T;
+    error?: string;
+};
+
+export type APIRequest = {
+    url: string,
+    method: APIMethod,
+    body?: string | FormData
+}
+
+function handleError(error: Error): APIResponse<null>  {
+    let msg = error.message.includes('fetch') ? "Connexion impossible" : error.message;
+    return {
+        success: false,
+        error: msg
+    };
+}
+
+function handleResponse(response: Response): Promise<APIResponse<any>> {
+
+    const contentType = response.headers.get("content-type");
+    const isJson = contentType && contentType.includes("application/json");
+
+    const dataPromise = isJson ? response.json() : response.text();
+
+    return dataPromise.then(data => {
+        
+        if (!response.ok) {
+
+            Logger.error(data);
+
+            let errorMsg: string;
+
+            switch(response.status){
+                case 403:
+                    errorMsg = 'Accès non autorisé (403)'; break;
+                case 404:
+                    errorMsg = 'La ressource demandée est introuvable (404)'; break;
+                case 500:
+                    errorMsg = 'Une erreur interne du serveur est survenue (500)'; break;
+                default:
+                    errorMsg = (typeof data === 'string') ? data : `Une erreur est survenue (${response.status})`; break;
+            }
+
+            return { success: false, error: errorMsg };
+        }
+        
+        return { success: true, data };
+    });
+}
+
+
+/**
+ * ATTENTION : cela signifie que toutes les requêtes du Front seront de type "preflight"
+ * Il faut penser à configurer l'API pour autoriser les headers
+ * @param options 
+ * @param dispatch 
+ * @returns 
+ */
+export const request = (options:APIRequest): Promise<APIResponse<any>> => {
+
+    const headers = new Headers();
+
+    // Si le corps est de type FormData, il ne faut pas définir le content-type manuellement (le navigateur prend le relai est injecte un boundary (délimiteur)
+    if (!(options.body instanceof FormData)) {
+        headers.append('Content-Type', 'application/json');
+    }
+
+    // Récupération du TOKEN depuis les cookies et intégration au header
+    if(readCookie(COOKIE_GARAGE_TOKEN)) {
+        headers.append('Authorization', 'Bearer ' + readCookie(COOKIE_GARAGE_TOKEN))
+    }
+
+    // On intègre les headers aux options
+    const defaults = {headers: headers};
+    options = Object.assign({}, defaults, options);
+
+    Logger.info(options);
+
+      // Appel API
+    return fetch(options.url, options)
+        .then(handleResponse)
+        .catch(error => {
+            Logger.error('There has been a problem with your fetch operation : ', error.message);
+            return handleError(error);
+        });
+}

package/src/helpers/CookieUtils.ts

@@ -0,0 +1,23 @@
+import Cookies from "js-cookie";
+
+export const COOKIE_GARAGE_TOKEN: string = 'movalibGarageToken'; 
+export const COOKIE_INDIVIDUAL_TOKEN: string = 'movalibIndividualToken'; 
+export const COOKIE_DEFAULT_EXPIRES: number = 7;
+
+export const createCookie = (name:string, value:string) => {
+  if(name && value){
+    Cookies.set(name, value, { expires: COOKIE_DEFAULT_EXPIRES, sameSite: 'None', secure: true });
+  }
+}
+
+export const deleteCookie = (name:string) => {
+    if(name){
+      Cookies.remove(name);
+    }
+  }
+  
+  export const readCookie = (name:string) => {
+    if(name){
+      return Cookies.get(name);
+    }
+  }

package/src/helpers/Enums.ts

@@ -1,3 +1,10 @@
+export enum APIMethod {
+    GET = 'GET',
+    PUT = 'PUT',
+    PATCH = 'PATCH',
+    POST = 'POST',
+    DELETE = 'DELETE'
+}
 
 export enum DateFormatTypes {
     SHORT_FORMAT_DATE = 'dd/MM/yyyy',
@@ -81,7 +88,7 @@ export enum MovaAppType {
     /**
     * Application Utilisateur (automobiliste)
     */
-    USER = "USER",
+    INDIVIDUAL = "INDIVIDUAL",
     /**
      * Application Administrateur (MovaTeam)
      */

package/src/helpers/Tools.ts

@@ -1,5 +1,23 @@
+import Cookies from "js-cookie";
 import VehicleTire from "../models/VehicleTire";
 import { MovaFormField } from "./Types";
+import { CSSProperties } from "react";
+
+export const flexEnd:CSSProperties = {
+  display: 'flex',
+  justifyContent: 'end',
+  alignItems: 'center'
+}
+
+export const flexCenter:CSSProperties = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+}
+
+export const isEmpty = (data: Object): boolean => {
+  return Object.keys(data).length === 0;
+}
 
 export const formatFrenchVehiclePlate = (input: string | undefined): string => {
   if(input){
@@ -20,7 +38,7 @@ export const formatFrenchVehiclePlate = (input: string | undefined): string => {
   return "";
 };
 
-export function formatVehicleTire(vehicleTire: VehicleTire){
+export const formatVehicleTire = (vehicleTire: VehicleTire) => {
   if(vehicleTire){
     let concatened = `${vehicleTire.width}${vehicleTire.height}${vehicleTire.diameter}${vehicleTire.speedIndex}`;
     return formatVehicleTireStr(concatened);
@@ -28,7 +46,7 @@ export function formatVehicleTire(vehicleTire: VehicleTire){
   return '';
 }
 
-export function formatVehicleTireStr(input: string){
+export const formatVehicleTireStr = (input: string) => {
 
   let formatted = input.toUpperCase().replace(/[^0-9A-QS-Za-qs-z]/g, '').slice(0, 10);
 

package/src/services/AuthenticationService.ts

@@ -0,0 +1,68 @@
+import { APIResponse, API_BASE_URL, request } from "../helpers/ApiHelper";
+import { COOKIE_GARAGE_TOKEN, COOKIE_INDIVIDUAL_TOKEN, createCookie } from "../helpers/CookieUtils";
+import { APIMethod, MovaAppType } from "../helpers/Enums";
+import Logger from "../helpers/Logger";
+import User from "../models/User";
+import UserService from "./UserService";
+
+export default class AuthenticationService {
+
+    static async login(appType: MovaAppType, email: string, password: string): Promise<APIResponse<User>> {
+        try {
+
+            // Contextualisation selon l'application demandeuse
+            let url = '';
+            let tokenCookie = '';
+
+            Logger.info(API_BASE_URL);
+
+            switch(appType){
+                case MovaAppType.GARAGE:
+                    url = `${API_BASE_URL}/garage/login`; 
+                    tokenCookie = COOKIE_GARAGE_TOKEN;
+                    break;
+                case MovaAppType.INDIVIDUAL:
+                    url = `${API_BASE_URL}/login`; 
+                    tokenCookie = COOKIE_INDIVIDUAL_TOKEN;
+                    break;
+            }
+
+            let tokenResponse = await request({
+                url: url,
+                method: APIMethod.POST,
+                body: JSON.stringify({
+                    email : email,
+                    password: password
+                })
+            });
+        
+            if(tokenResponse.success){
+
+                Logger.info(tokenResponse);
+
+                createCookie(tokenCookie, tokenResponse.data.accessToken);
+
+                // Si le login est un succès, on renvoie les infos de l'utilisateur connecté
+                let userResponse =  await UserService.getCurrentUser();
+
+                if(!userResponse || !userResponse.success) {
+                    const errorMsg = 'Erreur au chargement de votre profil';
+                    Logger.error(errorMsg);
+                    return { success: false, error: errorMsg };
+                }
+
+                return { success: true, data: userResponse.data };
+
+            } else {
+
+                return tokenResponse;
+            }
+
+        } catch (error: unknown) {
+            Logger.error('Error occurred during login:', error);
+            let errorMessage = error instanceof Error ? error.message : 'Erreur inconnue';
+
+            return { success: false, error: errorMessage };
+      }
+    } 
+}

package/src/services/GarageService.ts

@@ -0,0 +1,14 @@
+import { APIResponse, API_BASE_URL, request } from "../helpers/ApiHelper";
+import { APIMethod } from "../helpers/Enums";
+import Garage from "../models/Garage";
+
+export default class GarageService {
+
+  static getAdministratedGarages(): Promise<APIResponse<Garage[]>> {
+    return request({
+      url: `${API_BASE_URL}/user/garages`,
+      method: APIMethod.GET,
+    });
+  }
+
+}

package/src/services/UserService.ts

@@ -0,0 +1,25 @@
+import { APIResponse, API_BASE_URL, request } from "../helpers/ApiHelper";
+import { APIMethod } from "../helpers/Enums";
+import Logger from "../helpers/Logger";
+import User from "../models/User";
+
+export default class UserService {
+
+    /**
+     * @param email 
+     * @param password 
+     * @returns 
+     */
+    static async getCurrentUser(): Promise<APIResponse<User>> {
+        try {
+            return await request({
+                url: `${API_BASE_URL}/user/me`,
+                method: APIMethod.GET
+            });
+        } catch (error) {
+            Logger.error('Error occurred during getting user:', error);
+            return Promise.reject(error);
+        }
+    }
+    
+}

package/tsconfig.json

@@ -36,7 +36,7 @@
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    //"types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
     // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */

package/webpack.config.js

@@ -1,10 +1,15 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
+const webpack = require('webpack');
 
 module.exports = {
     mode: 'development', // ou 'production' ou 'none'
     module: {
         rules: [
+          {
+            test: /\.css$/i,
+            use: ['style-loader', 'css-loader'],
+          },
           {
             test: /\.tsx?$/,
             use: 'ts-loader',
@@ -31,5 +36,9 @@ module.exports = {
       new HtmlWebpackPlugin({
         template: path.resolve(__dirname, 'public', 'index.html'), // Chemin vers votre fichier HTML de base
       }),
+      new webpack.DefinePlugin({
+        'REACT_APP_API_URL': JSON.stringify(process.env.REACT_APP_API_URL),
+        'REACT_APP_MOVALIB_APP_URL': JSON.stringify(process.env.REACT_APP_MOVALIB_APP_URL)
+      }),
     ],      
 };