@movalib/movalib-commons 1.59.13 → 1.59.15

package/dist/src/style/styled.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ToggleButtonProps } from "@mui/material";
+interface StyledToggleButtonProps extends ToggleButtonProps {
+    customSelectedBackgroundColor?: string;
+    customBackgroundColor?: string;
+    customHoverColor?: string;
+}
+export declare const StyledToggleButton: import("@emotion/styled").StyledComponent<import("@mui/material").ToggleButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "children" | "sx" | "classes" | "className" | "style" | "tabIndex" | "onChange" | "onClick" | "fullWidth" | "size" | "disabled" | "value" | "action" | "selected" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledToggleButtonProps, {}, {}>;
+/**
+ * Personnalisation du style des Toogle Buttons
+ * Note : il n'est posssible de le personnaliser directement au niveau
+ * de l'objet "components" du theme.
+ */
+export declare const StyledToggleButtonGroup: import("@emotion/styled").StyledComponent<import("@mui/material").ToggleButtonGroupProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export {};

package/dist/src/style/styled.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledToggleButtonGroup = exports.StyledToggleButton = void 0;
+var material_1 = require("@mui/material");
+exports.StyledToggleButton = (0, material_1.styled)(material_1.ToggleButton)(function (_a) {
+    var theme = _a.theme, customSelectedBackgroundColor = _a.customSelectedBackgroundColor, customBackgroundColor = _a.customBackgroundColor, customHoverColor = _a.customHoverColor;
+    return ({
+        padding: theme.spacing(1),
+        marginBottom: theme.spacing(2),
+        borderRadius: theme.shape.borderRadius,
+        '&:hover': {
+            backgroundColor: customHoverColor || theme.palette.warning.dark,
+        },
+        '&.Mui-selected': {
+            backgroundColor: customSelectedBackgroundColor || theme.palette.warning.main,
+        },
+        '&.Mui-selected:hover': {
+            backgroundColor: customHoverColor || theme.palette.warning.dark,
+        },
+        '&:not(:first-of-type)': {
+            borderRadius: theme.shape.borderRadius,
+            border: '1px solid rgba(0, 0, 0, 0.12)',
+        },
+        '&:first-of-type': {
+            borderRadius: theme.shape.borderRadius,
+        },
+        '&.Mui-disabled': {
+            border: 0,
+            backgroundColor: theme.palette.grey[100],
+        },
+    });
+});
+/**
+ * Personnalisation du style des Toogle Buttons
+ * Note : il n'est posssible de le personnaliser directement au niveau
+ * de l'objet "components" du theme.
+ */
+exports.StyledToggleButtonGroup = (0, material_1.styled)(material_1.ToggleButtonGroup)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        '& .MuiToggleButtonGroup-grouped': {
+            padding: theme.spacing(1),
+            marginBottom: theme.spacing(2),
+            marginLeft: theme.spacing(1),
+            marginRight: theme.spacing(1),
+            '&.Mui-disabled': {
+                border: 0,
+                backgroundColor: theme.palette.grey[100],
+            },
+            '&.Mui-selected': {
+                backgroundColor: theme.palette.primary.light,
+            },
+            '&:not(:first-of-type)': {
+                borderRadius: theme.shape.borderRadius,
+                border: '1px solid rgba(0, 0, 0, 0.12)',
+            },
+            '&:first-of-type': {
+                borderRadius: theme.shape.borderRadius,
+            },
+            '&:hover': {
+                backgroundColor: (0, material_1.lighten)(theme.palette.primary.light, 0.3), // Modifier la couleur de fond au survol
+            },
+            '&.Mui-selected:hover': {
+                backgroundColor: theme.palette.primary.light, // Modifier la couleur de fond au survol
+            },
+        },
+    });
+});

package/dist/src/style/styled.ts

@@ -0,0 +1,70 @@
+import { ToggleButtonProps, ToggleButton, styled, ToggleButtonGroup, lighten } from "@mui/material";
+
+interface StyledToggleButtonProps extends ToggleButtonProps {
+    customSelectedBackgroundColor?: string;
+    customBackgroundColor?: string;
+    customHoverColor?: string;
+  }
+  
+  export const StyledToggleButton = styled(ToggleButton)<StyledToggleButtonProps>(
+    ({ theme, customSelectedBackgroundColor, customBackgroundColor, customHoverColor }) => ({
+      padding: theme.spacing(1),
+      marginBottom: theme.spacing(2),
+      borderRadius: theme.shape.borderRadius,
+      '&:hover': {
+        backgroundColor: customHoverColor || theme.palette.warning.dark,
+      },
+      '&.Mui-selected': {
+        backgroundColor: customSelectedBackgroundColor || theme.palette.warning.main,
+      },
+      '&.Mui-selected:hover': {
+        backgroundColor: customHoverColor || theme.palette.warning.dark,
+      },
+      '&:not(:first-of-type)': {
+        borderRadius: theme.shape.borderRadius,
+        border: '1px solid rgba(0, 0, 0, 0.12)',
+      },
+      '&:first-of-type': {
+        borderRadius: theme.shape.borderRadius,
+      },
+      '&.Mui-disabled': {
+        border: 0,
+        backgroundColor: theme.palette.grey[100],
+      },
+    }),
+  );
+
+
+/**
+ * Personnalisation du style des Toogle Buttons
+ * Note : il n'est posssible de le personnaliser directement au niveau
+ * de l'objet "components" du theme.
+ */
+export const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+    '& .MuiToggleButtonGroup-grouped': {
+      padding: theme.spacing(1),
+      marginBottom: theme.spacing(2),
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
+      '&.Mui-disabled': {
+        border: 0,
+        backgroundColor: theme.palette.grey[100],
+      },
+      '&.Mui-selected': {
+        backgroundColor: theme.palette.primary.light,
+      },
+      '&:not(:first-of-type)': {
+        borderRadius: theme.shape.borderRadius,
+        border: '1px solid rgba(0, 0, 0, 0.12)',
+      },
+      '&:first-of-type': {
+        borderRadius: theme.shape.borderRadius,
+      },
+      '&:hover': {
+        backgroundColor: lighten(theme.palette.primary.light, 0.3), // Modifier la couleur de fond au survol
+      },
+      '&.Mui-selected:hover': {
+        backgroundColor: theme.palette.primary.light, // Modifier la couleur de fond au survol
+      },
+    },
+  }));

package/index.ts

@@ -6,7 +6,7 @@ export { default as VehicleService } from './src/services/VehicleService';
 export { default as AuthenticationService } from './src/services/AuthenticationService';
 export { default as GarageService } from './src/services/GarageService';
 export { default as UserService } from './src/services/UserService';
-
+export { default as UserConnected } from './src/services/UserConnected';
 // Export des composants
 export { default as DialogForgotPassword } from './src/DialogForgotPassword';
 export { default as IbanInput } from './src/IbanInput';
@@ -14,12 +14,12 @@ export { default as GaragePLV } from './src/GaragePLV';
 export { default as AccountValidation } from './src/AccountValidation';
 export { default as AddressFields } from './src/AddressFields';
 export { default as ScheduleFields } from './src/ScheduleFields';
-export { default as VehicleFullCard } from './src/VehicleFullCard';
+export { default as VehicleFullCard } from './src/components/vehicle/VehicleFullCard';
 export { default as MovaDigitalPassport } from './src/MovaDigitalPassport';
 export { default as Loader } from './src/Loader';
 export { default as MovaDialog } from './src/MovaDialog';
 export { default as QRCode } from './src/QRCode';
-export { default as VehiclePlateField, regexPlate, oldRegexPlate } from './src/VehiclePlateField';
+export { default as VehiclePlateField, regexPlate, oldRegexPlate } from './src/components/vehicle/VehiclePlateField';
 export { default as TestButton } from './src/TestButton';
 export { default as MovaSnackbar } from './src/MovaSnackbar';
 export { default as MovaLogin } from './src/MovaLogin';
@@ -31,6 +31,7 @@ export { default as GenderSelector } from './src/GenderSelector';
 export { default as ActivateAccount } from './src/components/singup/ActivateAccount';
 export { QrCodePLVContainer } from './src/components/QrCodePLVContainer/QrCodePLVContainer';
 export { PLVComponent, PrintSize } from './src/components/QrCodePLVContainer/PLVComponent';
+export {LinkedDocumentDialog} from './src/components/LinkedDocumentDialog';
 // Export des classes
 export { default as Subscription } from './src/models/Subscription';
 export { default as Absence } from './src/models/Absence';
@@ -80,6 +81,7 @@ export {
   findScheduleByDayOfWeek,
   getDayOfWeekLabel,
   isSafariOniOS,
+  iAmOwner,
   getApplicationsShortLabels,
 } from './src/helpers/Tools';
 export { validatePhoneNumber, validateText, validateEmail } from './src/helpers/Validator';
@@ -117,3 +119,6 @@ export {
 
 // Export des utils
 export { openDialogPrint } from './src/utils/DialogPrint';
+
+// Export des styles
+export { StyledToggleButton, StyledToggleButtonGroup} from './src/style/styled';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@movalib/movalib-commons",
-	"version": "1.59.13",
+	"version": "1.59.15",
 	"description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -10,7 +10,8 @@
 		"build": "rm -rf dist && tsc && npm run copy-assets",
 		"copy-assets": "cp -r src/assets/ dist/src/assets/ && cp -r src/style/ dist/src/style/",
 		"test": "echo \"Error: no test specified\" && exit 1",
-		"clean": "rm -rf dist node_modules package-lock.json"
+		"clean": "rm -rf dist node_modules package-lock.json",
+		"build:dev" : "rm -rf dist && tsc && npm run copy-assets && npm pack"
 	},
 	"keywords": [],
 	"author": "",

package/src/VehiclePlateField.tsx

@@ -49,6 +49,7 @@ const VehiclePlateField: FunctionComponent<VehiclePlateFieldProps> = ({ onValidV
     }
   }
 
+  
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 
     let inputValue = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''); // Convertir en majuscules et supprimer les caractères non valides

package/src/components/LinkedDocumentDialog.tsx

@@ -0,0 +1,200 @@
+import Dialog from "@mui/material/Dialog";
+import Toolbar from "@mui/material/Toolbar";
+import theme from "../../theme";
+import DialogTitle from "@mui/material/DialogTitle";
+import Box from "@mui/material/Box";
+import { FindInPage } from "@mui/icons-material";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import CloseRounded from "@mui/icons-material/CloseRounded";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import { DocumentType, MovaAppType } from "../helpers/Enums";
+import { useState } from "react";
+import { ToggleButtonGroup, useMediaQuery } from "@mui/material";
+import { StyledToggleButton } from "../style/styled";
+
+
+type LinkedDocumentDialog = {
+    isShowLinkedDocument: boolean;
+    toggleShowLinkedDocument: (docType: DocumentType | null) => void;
+    isVehicle: boolean;
+    message?: JSX.Element;
+    appType: MovaAppType;
+};
+
+export const LinkedDocumentDialog = ({
+    isShowLinkedDocument,
+    toggleShowLinkedDocument,
+    isVehicle,
+    message,
+    appType,
+}: LinkedDocumentDialog) => {
+
+    const [selectedTypeDocument, setSelectedTypeDocument] = useState<DocumentType | null>(null);
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+    return (
+        <Dialog
+            open={isShowLinkedDocument}
+            fullWidth
+            maxWidth='md'
+            onClose={() => toggleShowLinkedDocument(null)}
+            aria-labelledby='alert-dialog-title'
+            aria-describedby='alert-dialog-description'
+        >
+            <Toolbar
+                disableGutters
+                sx={{
+                    display: 'block',
+                    background: theme.palette.grey[200],
+                    minHeight: 3,
+                    p: 0,
+                }}
+            >
+                <DialogTitle id='search-dialog-title'>
+                    <Box position='relative' sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                        <FindInPage sx={{ height: '30px', width: '30px' }} />
+                        <Typography
+                            variant='h6'
+                            sx={{
+                                textTransform: 'uppercase',
+                                fontStyle: 'bold',
+                                textAlign: 'center',
+                            }}
+                        >
+                            Quel type de document ?
+                        </Typography>
+                        <IconButton
+                            size='small'
+                            aria-label='close'
+                            onClick={() => toggleShowLinkedDocument(null)}
+                            title={'Fermer'}
+                        >
+                            <CloseRounded />
+                        </IconButton>
+                    </Box>
+                </DialogTitle>
+            </Toolbar>
+            <DialogContent sx={{ textAlign: 'center' }}>
+                <ToggleButtonGroup
+                    orientation={isMobile ? 'vertical' : 'horizontal'}
+                    size='small'
+                    value={selectedTypeDocument}
+                    exclusive
+                    onChange={(_, value: DocumentType) => {
+                        setSelectedTypeDocument(value);
+                    }}
+                    aria-label='update-scheduling-alert'
+                    sx={{ gap: 3, flexWrap: 'wrap', justifyContent: 'center' }}
+                >
+                    {isVehicle ? (
+                        <>
+                            <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.VEHICLE_TIRE_PHOTO}
+                                selected={selectedTypeDocument === DocumentType.VEHICLE_TIRE_PHOTO}
+                                aria-label='document tire'
+                            >
+                                <b>Photo pneu</b>
+                            </StyledToggleButton>
+                            {appType === MovaAppType.INDIVIDUAL && (
+                                <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.VEHICLE_MAINTENANCE_INVOICE}
+                                selected={selectedTypeDocument === DocumentType.VEHICLE_MAINTENANCE_INVOICE}
+                                aria-label='invoice document'
+                            >
+                                <b>Facture</b>
+                            </StyledToggleButton>
+                            )}
+                            <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.VEHICLE_INSPECTION}
+                                selected={selectedTypeDocument === DocumentType.VEHICLE_INSPECTION}
+                                aria-label='vehicule inspection docuemnt'
+                            >
+                                <b>Contrôle technique</b>
+                            </StyledToggleButton>
+
+                            <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.VEHICLE_OTHER}
+                                selected={selectedTypeDocument === DocumentType.VEHICLE_OTHER}
+                                aria-label='vehicule document other'
+                            >
+                                <b>Autre</b>
+                            </StyledToggleButton>
+                        </>
+                    ) : (
+                        <>
+                            {/* <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.EVENT_MAINTENANCE}
+                                selected={selectedTypeDocument === DocumentType.EVENT_MAINTENANCE}
+                                aria-label='event visual proof document'
+                            >
+                                <b>Maintenance</b>
+                            </StyledToggleButton> */}
+                            <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.EVENT_VISUAL_PROOFS}
+                                selected={selectedTypeDocument === DocumentType.EVENT_VISUAL_PROOFS}
+                                aria-label='event visual proof document'
+                            >
+                                <b>Photos et Preuves Visuelles</b>
+                            </StyledToggleButton>
+                            <StyledToggleButton
+                                size='small'
+                                sx={{ width: '230px' }}
+                                customSelectedBackgroundColor={theme.palette.primary.main}
+                                customHoverColor={theme.palette.primary.light}
+                                value={DocumentType.EVENT_OTHER}
+                                selected={selectedTypeDocument === DocumentType.EVENT_OTHER}
+                                aria-label='event document other'
+                            >
+                                <b>Autre</b>
+                            </StyledToggleButton>
+                        </>
+                    )}
+                </ToggleButtonGroup>
+                {message && (
+                    <>{message}</>
+                )}
+            </DialogContent>
+            <DialogActions
+                sx={{
+                    py: 1,
+                    backgroundColor: theme.palette.grey[200],
+                }}
+            >
+                <Button color='inherit' onClick={() => toggleShowLinkedDocument(null)}>
+                    Annuler
+                </Button>
+                <Box sx={{ flexGrow: 1 }} />
+                <Button color='primary' autoFocus sx={{ ml: 1 }} disabled={!selectedTypeDocument} onClick={() => toggleShowLinkedDocument(selectedTypeDocument)}>
+                    <b>Valider</b>
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};