Added delete option , style changes (#31)

* Added example env * Style changes * Added scroll to document list * Added scroll to document list * Added delete option , style changes , added dialog * Fix-Sonar issue * API Integration of delete API * Example env change * Added preview document option
tekdi · Dec 16, 2024 · e818fd9 · e818fd9
1 parent d7644d8
commit e818fd9
Show file tree

Hide file tree

Showing 6 changed files with 356 additions and 144 deletions.
diff --git a/.env.example b/.env.example
@@ -1 +1,3 @@
-VITE_APP_API_URL=backend_url
+VITE_APP_API_URL=""
+VITE_PARENT_APP_ORIGIN=""
+VITE_SUNBIRD_RC_URL_VCDATA=""
diff --git a/src/components/BottomNavigationBar.jsx b/src/components/BottomNavigationBar.jsx
@@ -1,50 +1,81 @@
-import React from 'react';
-import { Box, Grid, IconButton, Typography } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
-import HistoryIcon from '@mui/icons-material/History';
-import GroupIcon from '../assets/action_key.svg';
-import { useNavigate } from 'react-router-dom';
+import { Box, Grid, IconButton, Typography } from "@mui/material";
+import HomeIcon from "@mui/icons-material/Home";
+import HistoryIcon from "@mui/icons-material/History";
+import GroupIcon from "../assets/action_key.svg";
+import { useNavigate } from "react-router-dom";
 const BottomNavigationBar = () => {
-  const navigate= useNavigate();
+  const navigate = useNavigate();
   return (
-    <Box sx={{
-      position: 'fixed',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      bgcolor: 'background.paper',
-      borderTop: '1px solid #ddd', 
-      boxShadow: 3, 
-      paddingY: 1,
-      display: 'flex',
-      justifyContent: 'space-around',
-      alignItems: 'center',
-    }}>
+    <Box
+      sx={{
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        bgcolor: "background.paper",
+        borderTop: "1px solid #ddd",
+        boxShadow: 3,
+        paddingY: 1,
+        display: "flex",
+        justifyContent: "space-around",
+        alignItems: "center",
+        height: "80px",
+      }}
+    >
       <Grid container justifyContent="space-around" alignItems="center">
         {/* Home Icon */}
         <Grid item>
-          <IconButton onClick={() => navigate('/home')} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
-            <HomeIcon sx={{ fontSize: 26 }}/>
-            <Typography variant="caption" sx={{ fontFamily: 'Poppins, sans-serif' }}>
+          <IconButton
+            onClick={() => navigate("/home")}
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <HomeIcon sx={{ fontSize: 26 }} />
+            <Typography
+              variant="caption"
+              sx={{ fontFamily: "Poppins, sans-serif" }}
+            >
               Home
             </Typography>
           </IconButton>
         </Grid>
-        
+
         {/* History Icon */}
         <Grid item>
-          <IconButton sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <IconButton
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
             <HistoryIcon sx={{ fontSize: 26 }} />
-            <Typography variant="caption" sx={{ fontFamily: 'Poppins, sans-serif' }}>
+            <Typography
+              variant="caption"
+              sx={{ fontFamily: "Poppins, sans-serif" }}
+            >
               History
             </Typography>
           </IconButton>
         </Grid>
-        
+
         {/* Group Icon */}
         <Grid item>
-          <IconButton sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <img src={GroupIcon} alt="Group" style={{ width: '30px', height: '30px' }} />
+          <IconButton
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <img
+              src={GroupIcon}
+              alt="Group"
+              style={{ width: "30px", height: "30px" }}
+            />
             {/* <Typography variant="caption" sx={{ fontFamily: 'Poppins, sans-serif' }}>
               Group
             </Typography> */}

diff --git a/src/components/DocumentSelector.jsx b/src/components/DocumentSelector.jsx
@@ -1,16 +1,27 @@
-import React, { useState, useEffect } from 'react';
-import Header from './Header';
-import BottomNavigationBar from './BottomNavigationBar';
-import { useNavigate } from 'react-router-dom';
-import { Box, Container, Typography, TextField, List, ListItem, ListItemText, Checkbox, Button, Paper } from '@mui/material';
-import { Search as SearchIcon } from '@mui/icons-material';
-import { styled } from '@mui/material/styles';
+import { useState, useEffect } from "react";
+import Header from "./Header";
+import BottomNavigationBar from "./BottomNavigationBar";
+import { useNavigate } from "react-router-dom";
+import {
+  Box,
+  Container,
+  Typography,
+  TextField,
+  List,
+  ListItem,
+  ListItemText,
+  Checkbox,
+  Button,
+  Paper,
+} from "@mui/material";
+import { Search as SearchIcon } from "@mui/icons-material";
+import { styled } from "@mui/material/styles";
 
 const StyledSearchBox = styled(Paper)(({ theme }) => ({
-  padding: '2px 4px',
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
+  padding: "2px 4px",
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
   backgroundColor: "#E9E7EF",
   marginBottom: theme.spacing(2),
   borderRadius: 9,
@@ -20,7 +31,7 @@ const DocumentSelector = () => {
   const navigate = useNavigate();
   const [selectedDocs, setSelectedDocs] = useState([]);
   const [documents, setDocuments] = useState([]);
-  const [authToken, setAuthToken] = useState(localStorage.getItem('authToken'));
+  const [authToken, setAuthToken] = useState(localStorage.getItem("authToken"));
   const [isTokenReceived, setIsTokenReceived] = useState(false);
   const isEmbedded = window.self !== window.top;
   const handleToggle = (id) => {
@@ -37,12 +48,14 @@ const DocumentSelector = () => {
   };
 
   const handleImportClick = () => {
-    const selectedDocuments = documents.filter(doc => selectedDocs.includes(doc.doc_id));
+    const selectedDocuments = documents.filter((doc) =>
+      selectedDocs.includes(doc.doc_id)
+    );
     const parentAppOrigin = import.meta.env.VITE_PARENT_APP_ORIGIN;
 
-    console.log('Selected Documents:', selectedDocuments);
+    console.log("Selected Documents:", selectedDocuments);
     window.parent.postMessage(
-      { type: 'selected-docs', data: selectedDocuments },
+      { type: "selected-docs", data: selectedDocuments },
       parentAppOrigin
     );
   };
@@ -52,7 +65,9 @@ const DocumentSelector = () => {
       const apiUrl = `${import.meta.env.VITE_APP_API_URL}/user-docs/fetch`;
 
       if (!authToken) {
-        console.warn("Auth token not found, waiting for parent app to provide token...");
+        console.warn(
+          "Auth token not found, waiting for parent app to provide token..."
+        );
         return;
       }
 
@@ -61,7 +76,7 @@ const DocumentSelector = () => {
           method: "GET",
           headers: {
             "Content-Type": "application/json",
-            "Authorization": `Bearer ${authToken}`,
+            Authorization: `Bearer ${authToken}`,
           },
         });
 
@@ -86,41 +101,40 @@ const DocumentSelector = () => {
 
     const messageListener = (event) => {
       const data = event.data;
-      if (data.type === 'JWT_TOKEN' && data.payload) {
+      if (data.type === "JWT_TOKEN" && data.payload) {
         const jwtToken = data.payload;
         console.log("Received JWT Token from parent:", jwtToken);
-        localStorage.setItem('authToken', jwtToken);
+        localStorage.setItem("authToken", jwtToken);
         setAuthToken(jwtToken);
         setIsTokenReceived(true);
       }
     };
 
-    window.addEventListener('message', messageListener);
+    window.addEventListener("message", messageListener);
 
     return () => {
-      window.removeEventListener('message', messageListener);
+      window.removeEventListener("message", messageListener);
     };
   }, [isEmbedded]);
 
   useEffect(() => {
     if (isEmbedded) return;
     if (!authToken && !isTokenReceived) {
       localStorage.setItem("login-redirect", window.location.pathname);
-      navigate('/login');
+      navigate("/login");
     }
   }, [authToken, isTokenReceived, isEmbedded, navigate]);
 
   return (
     <Box
       sx={{
-        pb: 7,
-        bgcolor: "#F8F9FA",
-        minHeight: "100vh",
-        fontFamily: "Poppins, sans-serif",
+        overflowY: "auto", // Enables vertical scrolling
+        height: "calc(100vh - 160px)", // Adjust height dynamically based on fixed header/footer
+        mt: "80PX",
       }}
     >
       <Header />
-      <Container maxWidth="sm" sx={{ mt: 2 }}>
+      <Container maxWidth="sm">
         {/* Search Box */}
         <StyledSearchBox>
           <TextField
@@ -136,12 +150,16 @@ const DocumentSelector = () => {
             sx={{ ml: 1 }}
           />
         </StyledSearchBox>
-
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          sx={{ mb: 2, mt: 1 }}
+        >
           Please choose your required document.
         </Typography>
 
         {/* Document List */}
+
         <List>
           {documents.map((doc) => (
             <ListItem key={doc.doc_id} disablePadding sx={{ mb: 1 }}>
@@ -168,7 +186,6 @@ const DocumentSelector = () => {
             </ListItem>
           ))}
         </List>
-
         {/* Import Button */}
         <Button
           variant="contained"
@@ -185,7 +202,7 @@ const DocumentSelector = () => {
           + Import Documents ({selectedDocs.length})
         </Button>
       </Container>
-      <BottomNavigationBar/>
+      <BottomNavigationBar />
     </Box>
   );
 };

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,30 +1,31 @@
-import React, { useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useState } from "react";
 import {
   AppBar,
   Toolbar,
   Typography,
   FormControl,
   Select,
-  MenuItem,  
+  MenuItem,
 } from "@mui/material";
 import { languages } from "../config";
 import SlideMenu from "./SlideMenu";
 const Header = () => {
   // Define the state to store selected language
   const [language, setLanguage] = useState("EN");
-  const shouldShowSlideMenu = !['/signup', '/login'].includes(location.pathname);
+  const shouldShowSlideMenu = !["/signup", "/login"].includes(
+    location.pathname
+  );
 
   const handleLanguageChange = (event) => {
     setLanguage(event.target.value);
   };
 
   return (
     <AppBar
-      position="static"
+      position="fixed"
       color="transparent"
       elevation={0}
-      sx={{ bgcolor: "#EDEFFF" }}
+      sx={{ height: "80px" }}
     >
       <Toolbar>
         {/* Menu */}
@@ -47,7 +48,7 @@ const Header = () => {
         <FormControl
           sx={{
             m: 1,
-            px:2,
+            px: 2,
             minWidth: 30,
             border: "2px solid black",
             borderRadius: "8px",

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -1,26 +1,26 @@
 // Home.jsx
-import React from 'react';
-import { Box } from '@mui/material';
-import Header from './Header';
-import MainContent from './MainContent';
-import FloatingActionButton from './FloatingActionButton';
-import BottomNavigationBar from './BottomNavigationBar';
+import { Box } from "@mui/material";
+import Header from "./Header";
+import MainContent from "./MainContent";
+import BottomNavigationBar from "./BottomNavigationBar";
 
 const Home = () => {
   return (
-    <Box sx={{
-      minHeight: '100vh',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-between'
-    }}>
+    <>
       <Header />
-      <Box sx={{ flexGrow: 1 }}>
+      <Box
+        sx={{
+          flexGrow: 1,
+          overflowY: "auto", // Enables vertical scrolling
+          height: "calc(100vh - 160px)", // Adjust height dynamically based on fixed header/footer
+          mt: "80PX",
+        }}
+      >
         <MainContent />
       </Box>
-      <FloatingActionButton />
+
       <BottomNavigationBar />
-    </Box>
+    </>
   );
 };