fix: optimise mobile UI - project info, home, organisation (#903)

* fix (create new project): create new project url updated * fix (create new project): upload area - select a file issue solved * fix (create new project): data extract - select a file issue solved * fix (radiobutton): option selection on label click, UI fix * fix (create new project): initial values for project details form added * feat (select): custom select component added * fix (create new project): data extract - shadcn select replaced with customselect * fix (custom select): updated props * fix (create new project): project detials - shadcn select replaced with customselect * fix (select): shadcn components export removed * fix (create new project): select form - shadcn select replaced with customselect * fix: style fixes on input field * fix radiobutton): - value prop added * fix (create new project): upload area - value prop added to radiobutton, map added * fix (create new project): event cleanup added * fix (create new project): geojson file cleanup added * fix (create new project): upload area - drawgeojson added, geojson file clear when option changed * Feat create new project (#844) * fix (create new project): create new project url updated * fix (create new project): upload area - select a file issue solved * fix (create new project): data extract - select a file issue solved * fix (radiobutton): option selection on label click, UI fix * fix (create new project): initial values for project details form added * feat (select): custom select component added * fix (create new project): data extract - shadcn select replaced with customselect * fix (custom select): updated props * fix (create new project): project detials - shadcn select replaced with customselect * fix (select): shadcn components export removed * fix (create new project): select form - shadcn select replaced with customselect * fix radiobutton): - value prop added * fix (create new project): upload area - value prop added to radiobutton, map added * fix (create new project): event cleanup added * fix (create project): uploadArea/dataExtract - reset and select same file issue solved * feat(select): added responsive * feat(validation) : added validation file on new create project * feat(data-extract): data extract useform integration * fix(dataextract): removed formcategory actions * feat (create project): upload area - total area calculation on upload area drawn * feat: changed step from data extract to select form * feat: changes on steps of create project * feat(File Input): file input component addition * feat(component) : used component for fileinput * feat/fix (create new project): split tasks - radiobutton state changed with redux state, useForm setup * fix (create new project): merge conflict solved * fix (Accordion): custom accordion added * fix (project details): project options accordion added for small screen * fix (project detials): map full screen for small screen on project details section * feat (project details): map legends accordion added for small screen * fix (project details): map legend lock icon size fixed * feat (modal): shadcn modal integrated * feat (project details): map tasks popup replaced with modal * feat (project details): tasks section modal replaced with tasks section popup * feat (project details): map scroll in view added when map clicked * fix (project details): medium device task popup border rounded fixed * fix (project details): map legend hidden for small screens * fix (project details): map section - task section visible on task map click from small and large screen * fix (project-details): project area layer view on grid icon click * fix (project-details): map button icons replaced and made center * fix (project-details): current location marker toggle on map on location button click * fix (project-details): description on dropdown not shown issue solved * fix (project info): mobile responsive design * fix (project info): monitoring - TaskInfo api called in every 3 seconds after successful api call of current api * fix (home page): homepage filters responsive UI * fix (manage organization page): mobile responsive UI --------- Co-authored-by: Varun <[email protected]>
hotosm · Oct 12, 2023 · cffebb9 · cffebb9
1 parent 11b22ae
commit cffebb9
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 45 deletions.
diff --git a/src/frontend/src/components/home/HomePageFilters.tsx b/src/frontend/src/components/home/HomePageFilters.tsx
@@ -106,25 +106,25 @@ const HomePageFilters = ({ onSearch, filteredProjectCount, totalProjectCount })
 
       {/* Create New Project Button  */}
       <div className="fmtm-px-4 fmtm-py-3 ">
-        <div className="fmtm-flex fmtm-items-center fmtm-gap-4">
+        <div className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-items-center fmtm-gap-4">
           <h5 className="fmtm-text-2xl">PROJECTS</h5>
           <CoreModules.Link
             to={'/create-project'}
             style={{
               textDecoration: 'none',
             }}
           >
-            <button className="fmtm-bg-primaryRed fmtm-px-4 fmtm-py-2 fmtm-rounded fmtm-w-auto fmtm-text-white fmtm-uppercase">
+            <button className="fmtm-bg-primaryRed fmtm-text-sm sm:fmtm-text-[1rem] fmtm-px-4 fmtm-py-2 fmtm-rounded fmtm-w-auto fmtm-text-white fmtm-uppercase">
               + Create New Project{' '}
             </button>
           </CoreModules.Link>
         </div>
-        <div className="fmtm-flex fmtm-justify-between">
+        <div className="fmtm-flex fmtm-flex-col fmtm-gap-3 sm:fmtm-flex-row sm:fmtm-justify-between">
           <div className="fmtm-mt-3 fmtm-flex fmtm-items-center fmtm-gap-1">
-            <div className=" fmtm-border-[#E7E2E2] fmtm-border-2 fmtm-w-fit fmtm-flex fmtm-bg-white fmtm-p-2 fmtm-items-center">
+            <div className=" fmtm-border-[#E7E2E2] fmtm-border-2 sm:fmtm-w-fit fmtm-flex fmtm-bg-white fmtm-p-2 fmtm-items-center">
               <input
                 type="search"
-                className="fmtm-h-7 fmtm-p-2"
+                className="fmtm-h-7 fmtm-p-2 fmtm-w-full fmtm-outline-none"
                 placeholder="Search Projects"
                 onChange={(e) => onSearch(e.target.value)}
               ></input>

diff --git a/src/frontend/src/views/Home.jsx b/src/frontend/src/views/Home.jsx
@@ -66,7 +66,7 @@ const Home = () => {
                     className={`fmtm-px-[1rem] fmtm-grid fmtm-gap-5 ${
                       !showMapStatus
                         ? 'fmtm-grid-cols-1 sm:fmtm-grid-cols-2 md:fmtm-grid-cols-3 lg:fmtm-grid-cols-4 xl:fmtm-grid-cols-5 2xl:fmtm-grid-cols-6'
-                        : 'fmtm-grid-cols-1 sm:fmtm-grid-cols-2 md:fmtm-grid-cols-3 lg:fmtm-grid-cols-2 2xl:fmtm-grid-cols-3 lg:fmtm-h-[33rem] lg:fmtm-overflow-y-scroll lg:scrollbar fmtm-pr-1'
+                        : 'fmtm-grid-cols-1 sm:fmtm-grid-cols-2 md:fmtm-grid-cols-3 lg:fmtm-grid-cols-2 2xl:fmtm-grid-cols-3 lg:fmtm-h-[33rem] lg:fmtm-overflow-y-scroll lg:scrollbar'
                     }`}
                   >
                     {filteredProjectCards.map((value, index) => (

diff --git a/src/frontend/src/views/Organization.tsx b/src/frontend/src/views/Organization.tsx
@@ -6,11 +6,6 @@ import { OrganizationDataService } from '../api/OrganizationService';
 
 const Organization = () => {
   const cardStyle = {
-    width: {
-      xs: 350,
-      sm: 440,
-      lg: 862,
-    },
     padding: 2,
     display: 'flex',
     flexDirection: 'row',
@@ -42,17 +37,17 @@ const Organization = () => {
 
   return (
     <CoreModules.Box
-      sx={{ display: 'flex', flexDirection: 'column', background: '#f0efef', flex: 1, gap: 2, paddingLeft: '4.5%' }}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        background: '#f0efef',
+        flex: 1,
+        gap: 2,
+      }}
+      className="fmtm-px-[4.5%]"
     >
-      <CoreModules.Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          paddingTop: '2%',
-          gap: 2,
-        }}
-      >
-        <CoreModules.Typography variant="condensed">MANAGE ORGANIZATIONS</CoreModules.Typography>
+      <CoreModules.Box className="fmtm-flex fmtm-flex-col sm:fmtm-flex-row sm:fmtm-items-center fmtm-pt-5 fmtm-gap-2 sm:fmtm-gap-4">
+        <h1 className="fmtm-text-[1.5rem] lg:fmtm-text-[2.25rem] fmtm-font-bold">MANAGE ORGANIZATIONS</h1>
         <CoreModules.Link to={'/createOrganization'}>
           <CoreModules.Button
             variant="outlined"
@@ -111,17 +106,10 @@ const Organization = () => {
               </CoreModules.InputAdornment>
             ),
           }}
-          sx={{ width: '20%' }}
+          className="fmtm-min-w-[14rem] lg:fmtm-w-[20%]"
         />
       </CoreModules.Box>
-      <CoreModules.Box
-        sx={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          sm: { flexWrap: 'nowrap' },
-          gap: 2,
-        }}
-      >
+      <CoreModules.Box className="fmtm-grid fmtm-grid-cols-1 md:fmtm-grid-cols-2 fmtm-gap-5">
         {filteredCardData?.map((data, index) => (
           <CoreModules.Card key={index} sx={cardStyle}>
             <CoreModules.CardMedia
@@ -134,19 +122,18 @@ const Organization = () => {
               sx={{ width: '150px' }}
             />
             <CoreModules.Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-              <CoreModules.Typography variant="subtitle1" sx={{ textTransform: 'uppercase' }}>
+              <CoreModules.Typography
+                variant="subtitle1"
+                sx={{ textTransform: 'uppercase' }}
+                className="fmtm-line-clamp-1"
+                title={data.name}
+              >
                 {data.name}
               </CoreModules.Typography>
               <CoreModules.Typography
                 variant="subtitle3"
-                sx={{
-                  display: '-webkit-box',
-                  '-webkit-line-clamp': 2,
-                  '-webkit-box-orient': 'vertical',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  maxHeight: '4.5em',
-                }}
+                title={data.description}
+                className="fmtm-max-h-[4.5em] fmtm-line-clamp-2"
               >
                 {data.description}
               </CoreModules.Typography>

diff --git a/src/frontend/src/views/ProjectInfo.tsx b/src/frontend/src/views/ProjectInfo.tsx
@@ -9,6 +9,7 @@ import { ConvertXMLToJOSM, fetchConvertToOsmDetails, fetchInfoTask, getDownloadP
 import AssetModules from '../shared/AssetModules';
 import { ProjectById } from '../api/Project';
 import ProjectInfoCountCard from '../components/ProjectInfo/ProjectInfoCountCard';
+import { CommonActions } from '../store/slices/CommonSlice';
 
 const boxStyles = {
   animation: 'blink 1s infinite',
@@ -98,19 +99,62 @@ const ProjectInfo = () => {
     );
   };
 
+  // useEffect(() => {
+  //   const fetchData = () => {
+  //     dispatch(fetchInfoTask(`${environment.baseApiUrl}/tasks/tasks-features/?project_id=${decodedId}`));
+  //   };
+  //   fetchData();
+  //   let interval;
+  //   if (isMonitoring) {
+  //     interval = setInterval(fetchData, 3000);
+  //   } else {
+  //     clearInterval(interval);
+  //   }
+
+  //   return () => clearInterval(interval);
+  // }, [dispatch, isMonitoring]);
+
   useEffect(() => {
     const fetchData = () => {
       dispatch(fetchInfoTask(`${import.meta.env.VITE_API_URL}/tasks/tasks-features/?project_id=${decodedId}`));
     };
     fetchData();
-    let interval;
+  }, []);
+
+  useEffect(() => {
+    let isFetching = false; // Flag to track whether an API call is in progress
+    const fetchInfoTask = async (url) => {
+      if (!isFetching) {
+        isFetching = true; // Set the flag to true to indicate an API call is in progress
+        dispatch(CoreModules.TaskActions.SetTaskLoading(true));
+        dispatch(CommonActions.SetLoading(true));
+        try {
+          const fetchTaskInfoDetailsResponse = await CoreModules.axios.get(url);
+          dispatch(CommonActions.SetLoading(false));
+          dispatch(CoreModules.TaskActions.SetTaskLoading(false));
+          dispatch(CoreModules.TaskActions.FetchTaskInfoDetails(fetchTaskInfoDetailsResponse.data));
+        } catch (error) {
+          dispatch(CommonActions.SetLoading(false));
+          dispatch(CoreModules.TaskActions.SetTaskLoading(false));
+        } finally {
+          isFetching = false; // Reset the flag after the API call is completed
+        }
+      }
+    };
+
+    const url = `${environment.baseApiUrl}/tasks/tasks-features/?project_id=${decodedId}`;
+
+    let timeout;
+    const fetchData = () => {
+      fetchInfoTask(url);
+      timeout = setTimeout(fetchData, 3000); // Call fetchData again after 3 seconds
+    };
+
     if (isMonitoring) {
-      interval = setInterval(fetchData, 3000);
-    } else {
-      clearInterval(interval);
+      fetchData(); // Initial call to start fetching data
     }
-
-    return () => clearInterval(interval);
+    // Cleanup: Clear any pending setTimeout when component is unmounted
+    return () => clearTimeout(timeout);
   }, [dispatch, isMonitoring]);
 
   const handleMonitoring = () => {