@movalib/movalib-commons 1.1.87 → 1.1.89

package/devIndex.tsx

@@ -143,12 +143,13 @@ const App = () => {
             <div style={{ marginTop: '40px' }} />
 
             <div style={flexCenter}>
-              <ScheduleFields 
-                            schedules={garage?.schedules}
-                            size="small"
-                            timePickerStep={30} 
-                            onChange={handleScheduleChange}          
-                          />
+                <ScheduleFields 
+                  //schedules={undefined}
+                  schedules={garage?.schedules}
+                  size="small"
+                  timePickerStep={15} 
+                  onChange={handleScheduleChange}          
+                />
             </div>
 
             <Box sx={{width:'50%'}}>

package/dist/devIndex.js

@@ -131,7 +131,11 @@ var App = function () {
                                     throw new Error('Function not implemented.');
                                 } }), (0, jsx_runtime_1.jsx)(MovaSignUp_1.default, { headerText: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: 'success', icon: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), style: Tools_1.flexCenter, sx: { width: '100%', textTransform: 'none', textAlign: 'center' } }, { children: (0, jsx_runtime_1.jsx)("b", { children: "NOUVEAU COMPTE UTILISATEUR" }) })) }), darkMode: false, movaAppType: Enums_1.MovaAppType.INDIVIDUAL, onSubmit: function (form) {
                                     alert('Form Submitted !');
-                                } }), (0, jsx_runtime_1.jsx)(GaragePLV_1.default, { url: getQRCodeData() }), (0, jsx_runtime_1.jsx)(QRCode_1.default, { data: getQRCodeData(), showDownload: true, size: 400 }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '40px' } }), (0, jsx_runtime_1.jsx)("div", __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(ScheduleFields_1.default, { schedules: garage === null || garage === void 0 ? void 0 : garage.schedules, size: "small", timePickerStep: 30, onChange: handleScheduleChange }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: { width: '50%' } }, { children: [(0, jsx_runtime_1.jsx)(AddressFields_1.default, { form: {
+                                } }), (0, jsx_runtime_1.jsx)(GaragePLV_1.default, { url: getQRCodeData() }), (0, jsx_runtime_1.jsx)(QRCode_1.default, { data: getQRCodeData(), showDownload: true, size: 400 }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '40px' } }), (0, jsx_runtime_1.jsx)("div", __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(ScheduleFields_1.default
+                                //schedules={undefined}
+                                , { 
+                                    //schedules={undefined}
+                                    schedules: garage === null || garage === void 0 ? void 0 : garage.schedules, size: "small", timePickerStep: 15, onChange: handleScheduleChange }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: { width: '50%' } }, { children: [(0, jsx_runtime_1.jsx)(AddressFields_1.default, { form: {
                                             streetName: {
                                                 value: undefined,
                                                 error: undefined,

package/dist/src/ScheduleFields.js

@@ -33,6 +33,7 @@ var theme_1 = __importDefault(require("../theme")); // Import du thème personna
 var Enums_1 = require("./helpers/Enums");
 var Logger_1 = __importDefault(require("./helpers/Logger"));
 var Tools_1 = require("./helpers/Tools");
+var ContentCopy_1 = __importDefault(require("@mui/icons-material/ContentCopy"));
 var initialSchedules = [
     { day: Enums_1.DayOfWeek.MONDAY, checked: false, allDay: false, intervals: [{ startTime: null, endTime: null, countryCode: 'fr', error: null }] },
     { day: Enums_1.DayOfWeek.TUESDAY, checked: false, allDay: false, intervals: [{ startTime: null, endTime: null, countryCode: 'fr', error: null }] },
@@ -146,11 +147,34 @@ var ScheduleFields = function (_a) {
                 newSchedule[dayIndex].intervals[intervalIndex].error = validateIntervals(newSchedule[dayIndex].intervals);
             }
             setSchedule(newSchedule);
-            // On invoque la callback de mise à jour uniquement sur l'intervalle de fin
-            if (type === 'endTime')
+            if (type === 'endTime') {
+                // On invoque la callback de mise à jour uniquement sur l'intervalle de fin
                 onChange(newSchedule);
+            }
         };
     };
+    var copySchedule = function (dayIndex) { return function () {
+        // On duplique les intervals sur la journée suivante si disponible
+        var newSchedule = __spreadArray([], schedule, true);
+        // Si journée suivante existante, pas d'erreurs sur les intervalles du schedule et au moins un intervalle complet contenant des Date valides
+        if (dayIndex + 1 < schedule.length && !(newSchedule[dayIndex].intervals.filter(function (i) { return Boolean(i.error); }).length > 0)
+            && (newSchedule[dayIndex].intervals.filter(function (i) { return Boolean(i.startTime instanceof Date) && Boolean(i.endTime instanceof Date); }).length > 0)) {
+            // Dupliquer les intervalles vers la journée suivante
+            var nextDayIntervals = newSchedule[dayIndex].intervals.map(function (interval) {
+                var newStartTime = new Date(String(interval.startTime));
+                newStartTime.setDate(newStartTime.getDate() + 1);
+                var newEndTime = new Date(String(interval.endTime));
+                newEndTime.setDate(newEndTime.getDate() + 1);
+                return __assign(__assign({}, interval), { startTime: newStartTime, endTime: newEndTime });
+            });
+            // Ajouter ou remplacer les intervalles du jour suivant
+            newSchedule[dayIndex + 1].intervals = nextDayIntervals;
+            newSchedule[dayIndex + 1].checked = true; // On active automatiquement la journée suivante
+            setSchedule(newSchedule);
+            // On invoque la callback de mise à jour uniquement sur l'intervalle de fin
+            onChange(newSchedule);
+        }
+    }; };
     var addInterval = function (dayIndex) { return function () {
         Logger_1.default.info(dayIndex);
         var newSchedule = __spreadArray([], schedule, true);
@@ -164,7 +188,7 @@ var ScheduleFields = function (_a) {
         onChange(newSchedule);
         setSchedule(newSchedule);
     }; };
-    return ((0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ container: true, spacing: 1, sx: { minWidth: '650px', maxWidth: '800px' } }, { children: schedule.map(function (daySchedule, dayIndex) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: daySchedule.checked, onChange: handleDayChecked(dayIndex) }), label: (0, Tools_1.getDayOfWeekLabel)(daySchedule.day) }) }), dayIndex + 1), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 7 }, { children: daySchedule.intervals.map(function (interval, intervalIndex) { return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, style: { paddingTop: intervalIndex > 0 ? theme_1.default.spacing(1) : 0 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6, sx: { textAlign: 'center' } }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.TimePicker, { views: ['hours', 'minutes'], minutesStep: timePickerStep !== null && timePickerStep !== void 0 ? timePickerStep : 30, disabled: !daySchedule.checked, value: interval.startTime, formatDensity: 'dense', onChange: handleIntervalChange(dayIndex, intervalIndex, 'startTime'), slotProps: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ container: true, spacing: 1, sx: { minWidth: '650px', maxWidth: '800px' } }, { children: schedule.map(function (daySchedule, dayIndex) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: daySchedule.checked, onChange: handleDayChecked(dayIndex) }), label: (0, Tools_1.getDayOfWeekLabel)(daySchedule.day) }) }), dayIndex + 1), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 7 }, { children: daySchedule.intervals.map(function (interval, intervalIndex) { return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, style: { paddingTop: intervalIndex > 0 ? theme_1.default.spacing(1) : 0 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6, sx: { textAlign: 'center' } }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.TimePicker, { views: ['hours', 'minutes'], minutesStep: timePickerStep !== null && timePickerStep !== void 0 ? timePickerStep : 30, disabled: !daySchedule.checked, value: interval.startTime, formatDensity: 'dense', closeOnSelect: false, onAccept: handleIntervalChange(dayIndex, intervalIndex, 'startTime'), slotProps: {
                                         textField: {
                                             size: 'small',
                                             sx: {
@@ -176,21 +200,19 @@ var ScheduleFields = function (_a) {
                                         actionBar: {
                                             sx: { display: 'none' },
                                         },
-                                    } }) }), (intervalIndex + 1) * Math.random()), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ item: true, xs: 6, sx: { display: 'contents' } }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.TimePicker, { minutesStep: timePickerStep !== null && timePickerStep !== void 0 ? timePickerStep : 30, 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 + 1) * Math.random()), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6, sx: { display: 'contents' } }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.TimePicker, { minutesStep: timePickerStep !== null && timePickerStep !== void 0 ? timePickerStep : 30, disabled: !(interval.startTime instanceof Date), value: interval.endTime, formatDensity: 'dense', onAccept: handleIntervalChange(dayIndex, intervalIndex, 'endTime'), closeOnSelect: false, slotProps: {
+                                        textField: {
+                                            size: 'small',
+                                            sx: {
+                                                width: '150px',
+                                                minWidth: '100px',
+                                                padding: 0,
                                             },
-                                        } }), intervalIndex > 0 &&
-                                        (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: deleteInterval(dayIndex, intervalIndex), disabled: !daySchedule.checked, sx: { ml: 2 } }, { children: (0, jsx_runtime_1.jsx)(DeleteRounded_1.default, {}) }))] }), (intervalIndex + 1) * Math.random()), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: interval.error && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, __assign({ error: true, sx: { mb: 1 } }, { children: interval.error })) }), (intervalIndex + 1) * Math.random())] }), intervalIndex + 1)); }) }), (dayIndex + 1) * Math.random()), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 1, sx: { pl: 0 } }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: addInterval(dayIndex), disabled: !daySchedule.checked }, { children: (0, jsx_runtime_1.jsx)(AddRounded_1.default, {}) })) }), (dayIndex + 1) * Math.random()), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 2 })] })); }) })));
+                                        },
+                                        actionBar: {
+                                            sx: { display: 'none' },
+                                        },
+                                    } }) }), (intervalIndex + 1) * Math.random()), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 1, sx: { pl: 0 }, style: { display: 'flex', justifyContent: 'center', alignItems: 'start' } }, { children: intervalIndex > 0 &&
+                                    (0, jsx_runtime_1.jsx)(material_1.Tooltip, __assign({ title: 'Supprimer intervalle', placement: 'top' }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: deleteInterval(dayIndex, intervalIndex), disabled: !daySchedule.checked, sx: { ml: 2 } }, { children: (0, jsx_runtime_1.jsx)(DeleteRounded_1.default, {}) })) })) }), (dayIndex + 1) * Math.random()), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: interval.error && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, __assign({ error: true, sx: { mb: 1 } }, { children: interval.error })) }), (intervalIndex + 1) * Math.random())] }), intervalIndex + 1)); }) }), (dayIndex + 1) * Math.random()), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ item: true, xs: 1, sx: { pl: 0 }, style: { display: 'flex', justifyContent: 'center', alignItems: 'start' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, __assign({ title: 'Dupliquer', placement: 'top' }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: copySchedule(dayIndex), disabled: !daySchedule.checked }, { children: (0, jsx_runtime_1.jsx)(ContentCopy_1.default, {}) })) })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, __assign({ title: 'Ajouter intervalle', placement: 'top' }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: addInterval(dayIndex), disabled: !daySchedule.checked }, { children: (0, jsx_runtime_1.jsx)(AddRounded_1.default, {}) })) }))] }), (dayIndex + 1) * Math.random()), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1 })] })); }) })));
 };
 exports.default = ScheduleFields;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.1.87",
+  "version": "1.1.89",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/ScheduleFields.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FunctionComponent, useEffect, useState } from 'react';
-import { Checkbox, FormControlLabel, Grid, IconButton, FormHelperText, FormControl, RadioGroup, Radio } from '@mui/material';
+import { Checkbox, FormControlLabel, Grid, IconButton, FormHelperText, FormControl, RadioGroup, Radio, Tooltip } from '@mui/material';
 import AddIcon from '@mui/icons-material/AddRounded';
 import DeleteIcon from '@mui/icons-material/DeleteRounded';
 import { TimePicker } from '@mui/x-date-pickers';
@@ -10,6 +10,7 @@ import { DayOfWeek } from './helpers/Enums';
 import Logger from './helpers/Logger';
 import { flexCenter, getDayOfWeekIndex, getDayOfWeekLabel } from './helpers/Tools';
 import { toUTCToLocaleDate } from './helpers/DateUtils';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 
 
 export type DayInterval = {
@@ -44,7 +45,7 @@ interface ScheduleFieldsProps {
 }
 
 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));
@@ -179,9 +180,44 @@ const ScheduleFields: FunctionComponent<ScheduleFieldsProps> = ({ timePickerStep
 
     setSchedule(newSchedule);
 
-    // On invoque la callback de mise à jour uniquement sur l'intervalle de fin
-    if(type === 'endTime')
+    if(type === 'endTime'){
+      // On invoque la callback de mise à jour uniquement sur l'intervalle de fin
       onChange(newSchedule);
+    }
+
+  };
+
+  const copySchedule = (dayIndex: number) => () => {
+      // On duplique les intervals sur la journée suivante si disponible
+      const newSchedule = [...schedule];
+
+      // Si journée suivante existante, pas d'erreurs sur les intervalles du schedule et au moins un intervalle complet contenant des Date valides
+      if (dayIndex + 1 < schedule.length && ! (newSchedule[dayIndex].intervals.filter(i => Boolean(i.error)).length > 0) 
+        && (newSchedule[dayIndex].intervals.filter(i => Boolean(i.startTime instanceof Date) && Boolean(i.endTime instanceof Date)).length > 0)) {
+
+        // Dupliquer les intervalles vers la journée suivante
+        const nextDayIntervals = newSchedule[dayIndex].intervals.map(interval => {
+          const newStartTime = new Date(String(interval.startTime));
+          newStartTime.setDate(newStartTime.getDate() + 1);
+          const newEndTime = new Date(String(interval.endTime));
+          newEndTime.setDate(newEndTime.getDate() + 1);
+
+          return {
+            ...interval,
+            startTime: newStartTime,
+            endTime: newEndTime
+          };
+        });
+
+        // Ajouter ou remplacer les intervalles du jour suivant
+        newSchedule[dayIndex + 1].intervals = nextDayIntervals;
+        newSchedule[dayIndex + 1].checked = true       // On active automatiquement la journée suivante
+
+        setSchedule(newSchedule);
+
+        // On invoque la callback de mise à jour uniquement sur l'intervalle de fin
+        onChange(newSchedule);
+      }
   };
 
   const addInterval = (dayIndex: number) => () => {
@@ -226,8 +262,9 @@ const ScheduleFields: FunctionComponent<ScheduleFieldsProps> = ({ timePickerStep
                       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')}
+                      formatDensity='dense'        
+                      closeOnSelect={false}            
+                      onAccept={handleIntervalChange(dayIndex, intervalIndex, 'startTime')}
                       slotProps={{
                         textField: {
                           size: 'small',                          
@@ -249,8 +286,7 @@ const ScheduleFields: FunctionComponent<ScheduleFieldsProps> = ({ timePickerStep
                       disabled={!(interval.startTime instanceof Date)}
                       value={interval.endTime}
                       formatDensity='dense'
-                      onChange={handleIntervalChange(dayIndex, intervalIndex, 'endTime')}
-                      //onClose={handleIntervalClose}
+                      onAccept={handleIntervalChange(dayIndex, intervalIndex, 'endTime')}
                       closeOnSelect={false}
                       slotProps={{
                         textField: {
@@ -266,12 +302,17 @@ const ScheduleFields: FunctionComponent<ScheduleFieldsProps> = ({ timePickerStep
                         },
                       }}                      
                     />
-                        {intervalIndex > 0 &&
-                        <IconButton onClick={deleteInterval(dayIndex, intervalIndex)} disabled={!daySchedule.checked} sx={{ ml: 2 }}>
-                          <DeleteIcon />
-                        </IconButton>
-                      }
                   </Grid>
+                  <Grid item xs={1} key={(dayIndex+1)*Math.random()} sx={{ pl: 0 }} style={{ display: 'flex', justifyContent: 'center', alignItems: 'start' }}>
+                            {intervalIndex > 0 &&
+                        <Tooltip title='Supprimer intervalle' placement='top' >
+                          <IconButton onClick={deleteInterval(dayIndex, intervalIndex)} disabled={!daySchedule.checked} sx={{ ml: 2 }}>
+                            <DeleteIcon />
+                          </IconButton>
+                        </Tooltip>
+                      }
+                   </Grid>
+                 
                   <Grid item xs={12} key={(intervalIndex+1)*Math.random()} >
                     {interval.error && <FormHelperText error sx={{mb:1}}>{interval.error}</FormHelperText>}
                   </Grid> 
@@ -279,13 +320,20 @@ const ScheduleFields: FunctionComponent<ScheduleFieldsProps> = ({ timePickerStep
               ))}                  
             </Grid>
 
-            <Grid item xs={1} key={(dayIndex+1)*Math.random()} sx={{ pl: 0 }}>
-              <IconButton onClick={addInterval(dayIndex)} disabled={!daySchedule.checked}>
-                <AddIcon />
-              </IconButton>
+            <Grid item xs={1} key={(dayIndex+1)*Math.random()} sx={{ pl: 0 }} style={{ display: 'flex', justifyContent: 'center', alignItems: 'start' }}>
+              <Tooltip title='Dupliquer' placement='top'>
+                <IconButton onClick={copySchedule(dayIndex)} disabled={!daySchedule.checked}>
+                  <ContentCopyIcon />
+                </IconButton>
+                </Tooltip>
+              <Tooltip title='Ajouter intervalle' placement='top'>
+                <IconButton onClick={addInterval(dayIndex)} disabled={!daySchedule.checked}>
+                  <AddIcon />
+                </IconButton>
+              </Tooltip>
             </Grid> 
             
-            <Grid item xs={2} />
+            <Grid item xs={1} />
           </>
         ))}
       </Grid>