First page : rootDirectory creation (#416)

*First Root directory creation
---------

Signed-off-by: maissa SOUISSI <[email protected]>

Author: souissimai

src/components/directory-content.jsx

@@ -52,6 +52,7 @@ import CriteriaBasedEditionDialog from './dialogs/contingency-list/edition/crite
 import ExplicitNamingEditionDialog from './dialogs/contingency-list/edition/explicit-naming/explicit-naming-edition-dialog';
 import ScriptEditionDialog from './dialogs/contingency-list/edition/script/script-edition-dialog';
 import { noSelectionForCopy } from 'utils/constants';
+import NoContentDirectory from './no-content-directory';
 import { useParameterState } from './dialogs/parameters-dialog';
 import { PARAM_LANGUAGE } from '../utils/config-params';
 
@@ -117,6 +118,7 @@ const initialMousePosition = {
 };
 
 const DirectoryContent = () => {
+    const treeData = useSelector((state) => state.treeData);
     const { snackError } = useSnackMessage();
     const dispatch = useDispatch();
 
@@ -840,6 +842,9 @@ const DirectoryContent = () => {
             })),
         [childrenMetadata, currentChildren, getElementTypeTranslation]
     );
+    const handleOpenDialog = useCallback(() => {
+        setOpenDialog(constants.DialogsId.ADD_ROOT_DIRECTORY);
+    }, []);
 
     const renderLoadingContent = () => {
         return (
@@ -968,8 +973,12 @@ const DirectoryContent = () => {
         }
 
         // If no selection or currentChildren = null (first time) render nothing
-        // TODO : Make a beautiful page here
         if (!currentChildren || !selectedDirectory) {
+            if (treeData.rootDirectories.length === 0 && treeData.initialized) {
+                return (
+                    <NoContentDirectory handleOpenDialog={handleOpenDialog} />
+                );
+            }
             return;
         }
 

src/components/icons/circleIcon.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import React, { FC, ReactNode } from 'react';
+import { Box, useTheme } from '@mui/material';
+
+interface CircleIconProps {
+    size: number;
+    iconStyles?: (theme: any) => React.CSSProperties; // Adjust this type based on your theme type
+    children: ReactNode;
+}
+
+const CircleIcon: FC<CircleIconProps> = ({ size, iconStyles, children }) => {
+    const theme = useTheme();
+    const circleStyles: React.CSSProperties = {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        ...(iconStyles && iconStyles(theme)),
+    };
+
+    return <Box sx={circleStyles}>{children}</Box>;
+};
+
+export default CircleIcon;

src/components/no-content-directory.tsx

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import React from 'react';
+import { Box, Button } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import CircleIcon from './icons/circleIcon';
+import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined';
+
+const CIRCLE_SIZE = 200;
+
+const stylesIcon = {
+    circle: (theme: any) => ({
+        backgroundColor: theme.row.primary,
+    }),
+};
+
+interface NoContentDirectoryProps {
+    handleOpenDialog: () => void;
+}
+
+const NoContentDirectory: React.FC<NoContentDirectoryProps> = ({
+    handleOpenDialog,
+}) => {
+    const styles = {
+        noContentContainer: (theme: any) => ({
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            marginTop: theme.spacing(20),
+        }),
+        noContentText: (theme: any) => ({
+            color: theme.row.primary,
+            textAlign: 'center',
+            marginTop: theme.spacing(1),
+        }),
+        noContentButton: {
+            borderRadius: '30px',
+        },
+        iconSize: {
+            fontSize: CIRCLE_SIZE / 2,
+        },
+    };
+
+    return (
+        <Box sx={styles.noContentContainer}>
+            <CircleIcon size={CIRCLE_SIZE} iconStyles={stylesIcon.circle}>
+                <CreateNewFolderOutlinedIcon sx={styles.iconSize} />
+            </CircleIcon>
+            <Box sx={styles.noContentText}>
+                <h1>
+                    <FormattedMessage id={'createFirstDir'} />
+                </h1>
+                <Button
+                    variant="contained"
+                    sx={styles.noContentButton}
+                    onClick={handleOpenDialog}
+                >
+                    <FormattedMessage id={'createFolder'} />
+                </Button>
+            </Box>
+        </Box>
+    );
+};
+
+export default NoContentDirectory;

src/components/tree-views-container.jsx

@@ -287,6 +287,7 @@ const TreeViewsContainer = () => {
                     setTreeData({
                         rootDirectories: nrs,
                         mapData: mdr,
+                        initialized: true,
                     })
                 );
             })

src/redux/reducer.js

@@ -61,7 +61,7 @@ const initialState = {
     selectedFile: null,
     uploadingElements: {},
     directoryUpdated: { force: 0, eventData: {} },
-    treeData: { mapData: {}, rootDirectories: [] },
+    treeData: { mapData: {}, rootDirectories: [], initialized: false },
     selectionForCopy: {
         sourceItemUuid: null,
         typeItem: null,

src/translations/en.json

@@ -17,6 +17,7 @@
   "private": "private",
   "public": "public",
   "emptyDir": "Empty directory",
+  "createFirstDir": "Create your first directory",
   "ID": "ID",
   "createNewStudy": "Create a study",
   "studyCreationError": "Error when creating study: {studyName}",

src/translations/fr.json

@@ -17,6 +17,7 @@
   "private": "privé",
   "public": "public",
   "emptyDir": "Dossier vide",
+  "createFirstDir": "Créer votre premier dossier",
   "ID": "ID",
   "createNewStudy": "Créer une étude",
   "studyCreationError": "Erreur lors de la création de l'étude: {studyName}",