Merge branch 'development' of github.com:hotosm/fmtm into search-proj…

…ects
hotosm · Nov 21, 2023 · 15cf2a3 · 15cf2a3
2 parents a9868df + f73c972
commit 15cf2a3
Show file tree

Hide file tree

Showing 11 changed files with 173 additions and 128 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -16,7 +16,7 @@ repos:
 
   # Lint / autoformat: Python code
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: "v0.1.5"
+    rev: "v0.1.6"
     hooks:
       - id: ruff
         files: ^src/backend/(?:.*/)*.*$

diff --git a/docker-compose.development.yml b/docker-compose.development.yml
@@ -210,7 +210,7 @@ services:
       - "5434:5432"
     networks:
       - fmtm-net
-    restart: "on-failure:3"
+    restart: "unless-stopped"
     healthcheck:
       test: pg_isready -U ${CENTRAL_DB_USER} -d ${CENTRAL_DB_NAME}
       start_period: 5s

diff --git a/src/frontend/src/assets/images/something_went_wrong.png b/src/frontend/src/assets/images/something_went_wrong.png
diff --git a/src/frontend/src/components/GenerateBasemap.jsx b/src/frontend/src/components/GenerateBasemap.jsx
@@ -15,6 +15,7 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
   const [selectedTileSource, setSelectedTileSource] = useState(null);
   const [selectedOutputFormat, setSelectedOutputFormat] = useState(null);
   const [tmsUrl, setTmsUrl] = useState('');
+  const [error, setError] = useState([]);
 
   const modalStyle = (theme) => ({
     width: '90vw', // Responsive modal width using vw
@@ -51,6 +52,35 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
     setTmsUrl(e.target.value);
   };
 
+  const generateProjectTilesValidation = () => {
+    const currentError = [];
+    if (!selectedTileSource) {
+      currentError.push('selectedTileSource');
+    }
+    if (!selectedOutputFormat) {
+      currentError.push('selectedOutputFormat');
+    }
+    if (!tmsUrl && selectedTileSource === 'tms') {
+      currentError.push('tmsUrl');
+    }
+    setError(currentError);
+    return currentError;
+  };
+
+  const generateProjectTiles = () => {
+    const currentErrors = generateProjectTilesValidation();
+    if (currentErrors.length === 0) {
+      dispatch(
+        GenerateProjectTiles(
+          `${
+            import.meta.env.VITE_API_URL
+          }/projects/tiles/${decodedId}?source=${selectedTileSource}&format=${selectedOutputFormat}&tms=${tmsUrl}`,
+          decodedId,
+        ),
+      );
+    }
+  };
+
   return (
     <CoreModules.CustomizedModal
       isOpen={!!toggleGenerateModal}
@@ -69,137 +99,140 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
           </CoreModules.IconButton>
         </CoreModules.Grid>
 
-        {/* Output Format Dropdown */}
-        <CoreModules.Grid item xs={12} sm={6}>
-          <CoreModules.FormControl fullWidth>
-            <CoreModules.InputLabel
-              id="output-format"
-              sx={{
-                '&.Mui-focused': {
-                  color: defaultTheme.palette.black,
-                },
-              }}
-            >
-              Select Output Format
-            </CoreModules.InputLabel>
-            <CoreModules.Select
-              labelId="output-format"
-              id="output_format"
-              value={selectedOutputFormat}
-              label="Form Selection"
-              fullWidth
-              sx={{
-                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                  border: '2px solid black',
-                },
-              }}
-              onChange={(e) => {
-                setSelectedOutputFormat(e.target.value);
-              }}
-            >
-              {environment.tileOutputFormats?.map((form) => (
-                <CoreModules.MenuItem key={form.value} value={form.value}>
-                  {form.label}
-                </CoreModules.MenuItem>
-              ))}
-            </CoreModules.Select>
-          </CoreModules.FormControl>
-        </CoreModules.Grid>
+        <CoreModules.Grid container spacing={2} className="fmtm-px-4 fmtm-mb-4">
+          {/* Output Format Dropdown */}
+          <CoreModules.Grid item xs={12} sm={6} md={4}>
+            <CoreModules.FormControl fullWidth>
+              <CoreModules.InputLabel
+                id="output-format"
+                sx={{
+                  '&.Mui-focused': {
+                    color: defaultTheme.palette.black,
+                  },
+                }}
+              >
+                Select Output Format
+              </CoreModules.InputLabel>
+              <CoreModules.Select
+                labelId="output-format"
+                id="output_format"
+                value={selectedOutputFormat}
+                label="Select Output Format"
+                fullWidth
+                sx={{
+                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    border: '2px solid black',
+                  },
+                }}
+                onChange={(e) => {
+                  setSelectedOutputFormat(e.target.value);
+                }}
+              >
+                {environment.tileOutputFormats?.map((form) => (
+                  <CoreModules.MenuItem key={form.value} value={form.value}>
+                    {form.label}
+                  </CoreModules.MenuItem>
+                ))}
+              </CoreModules.Select>
+            </CoreModules.FormControl>
+            {error.includes('selectedOutputFormat') && (
+              <p className="fmtm-text-sm fmtm-text-red-500">Output Format is Required.</p>
+            )}
+          </CoreModules.Grid>
 
-        {/* Tile Source Dropdown or TMS URL Input */}
-        <CoreModules.Grid item xs={12} sm={6}>
-          <CoreModules.FormControl fullWidth>
-            <CoreModules.InputLabel
-              id="tile-source"
-              sx={{
-                '&.Mui-focused': {
-                  color: defaultTheme.palette.black,
-                },
-              }}
-            >
-              Select Tile Source
-            </CoreModules.InputLabel>
-            <CoreModules.Select
-              labelId="tile-source"
-              id="tile_source"
-              value={selectedTileSource}
-              label="Form Selection"
-              fullWidth
-              sx={{
-                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                  border: '2px solid black',
-                },
-              }}
-              onChange={handleTileSourceChange}
-            >
-              {environment.baseMapProviders?.map((form) => (
-                <CoreModules.MenuItem key={form.value} value={form.value}>
-                  {form.label}
-                </CoreModules.MenuItem>
-              ))}
-            </CoreModules.Select>
-            {selectedTileSource === 'tms' && (
-              <CoreModules.FormControl>
+          {/* Tile Source Dropdown or TMS URL Input */}
+          <CoreModules.Grid item xs={12} sm={6} md={4}>
+            <CoreModules.FormControl fullWidth>
+              <CoreModules.InputLabel
+                id="tile-source"
+                sx={{
+                  '&.Mui-focused': {
+                    color: defaultTheme.palette.black,
+                  },
+                }}
+              >
+                Select Tile Source
+              </CoreModules.InputLabel>
+              <CoreModules.Select
+                labelId="tile-source"
+                id="tile_source"
+                value={selectedTileSource}
+                label="Select Tile Source"
+                fullWidth
+                sx={{
+                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                    border: '2px solid black',
+                  },
+                }}
+                onChange={handleTileSourceChange}
+              >
+                {environment.baseMapProviders?.map((form) => (
+                  <CoreModules.MenuItem key={form.value} value={form.value}>
+                    {form.label}
+                  </CoreModules.MenuItem>
+                ))}
+              </CoreModules.Select>
+            </CoreModules.FormControl>
+            {error.includes('selectedTileSource') && (
+              <p className="fmtm-text-sm fmtm-text-red-500">Tile Source is Required.</p>
+            )}
+          </CoreModules.Grid>
+          {selectedTileSource === 'tms' && (
+            <CoreModules.Grid item xs={12} sm={12} md={4}>
+              <CoreModules.FormControl fullWidth>
                 <CoreModules.TextField
-                  labelId="tms_url-label"
+                  // labelId="tms_url-label"
                   id="tms_url"
+                  variant="outlined"
                   value={tmsUrl}
                   label="Enter Tile Source"
                   fullWidth
+                  color="black"
                   sx={{
-                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                      border: '2px solid black',
+                    '& .MuiOutlinedInput-root': {
+                      '&.Mui-focused fieldset': {
+                        borderColor: 'black',
+                      },
+                    },
+                    '&.Mui-focused .MuiFormLabel-root-MuiInputLabel-root': {
+                      color: 'black',
                     },
                   }}
                   onChange={handleTmsUrlChange}
                 />
               </CoreModules.FormControl>
-            )}
-          </CoreModules.FormControl>
-        </CoreModules.Grid>
-
-        {/* Generate Button */}
-        <CoreModules.Grid item xs={12} sm={6}>
-          <CoreModules.LoadingButton
-            variant="contained"
-            loading={generateProjectTilesLoading}
-            color="error"
-            fullWidth
-            onClick={() => {
-              // Check if 'tms' is selected and tmsUrl is not empty
-              if (selectedTileSource === 'tms' && !tmsUrl) {
-                // Handle error, TMS URL is required
-                console.log('TMS URL is required');
-                return;
-              }
+              {error.includes('tmsUrl') && <p className="fmtm-text-sm fmtm-text-red-500">Tile Source is Required.</p>}
+            </CoreModules.Grid>
+          )}
+          <CoreModules.Grid item xs={12} sm={12} md={selectedTileSource === 'tms' ? 12 : 4}>
+            <div className="fmtm-w-full fmtm-flex fmtm-items-center fmtm-justify-center sm:fmtm-justify-end fmtm-mr-4 fmtm-gap-4 fmtm-h-full">
+              {/* Generate Button */}
+              <div>
+                <CoreModules.LoadingButton
+                  variant="contained"
+                  loading={generateProjectTilesLoading}
+                  color="error"
+                  onClick={() => generateProjectTiles()}
+                >
+                  Generate
+                </CoreModules.LoadingButton>
+              </div>
 
-              dispatch(
-                GenerateProjectTiles(
-                  `${
-                    import.meta.env.VITE_API_URL
-                  }/projects/tiles/${decodedId}?source=${selectedTileSource}&format=${selectedOutputFormat}&tms=${tmsUrl}`,
-                  decodedId,
-                ),
-              );
-            }}
-          >
-            Generate
-          </CoreModules.LoadingButton>
-        </CoreModules.Grid>
-
-        {/* Refresh Button */}
-        <CoreModules.Grid item xs={12} sm={6}>
-          <CoreModules.LoadingButton
-            variant="outlined"
-            loading={generateProjectTilesLoading}
-            color="error"
-            fullWidth
-            onClick={() => {
-              getTilesList();
-            }}
-          >
-            Refresh
-          </CoreModules.LoadingButton>
+              {/* Refresh Button */}
+              <div>
+                <CoreModules.LoadingButton
+                  variant="outlined"
+                  loading={generateProjectTilesLoading}
+                  color="error"
+                  onClick={() => {
+                    getTilesList();
+                  }}
+                >
+                  Refresh
+                </CoreModules.LoadingButton>
+              </div>
+            </div>
+          </CoreModules.Grid>
         </CoreModules.Grid>
 
         {/* Table Content */}

diff --git a/src/frontend/src/components/common/StepSwitcher.tsx b/src/frontend/src/components/common/StepSwitcher.tsx
@@ -4,7 +4,7 @@ import { CommonActions } from '../../store/slices/CommonSlice';
 import CoreModules from '../../shared/CoreModules.js';
 import { useNavigate } from 'react-router-dom';
 
-const StepSwitcher = ({ data, flag }) => {
+const StepSwitcher = ({ data, flag, switchSteps }) => {
   interface IIndividualStep {
     url: string;
     step: number;
@@ -39,7 +39,11 @@ const StepSwitcher = ({ data, flag }) => {
                     } lg:fmtm-w-7 lg:fmtm-h-7 xl:fmtm-w-9 xl:fmtm-h-9 fmtm-rounded-full fmtm-flex fmtm-justify-center fmtm-items-center fmtm-border-[0.15rem] fmtm-border-primaryRed hover:fmtm-cursor-pointer  ${
                       currentStep.step >= index ? 'fmtm-bg-primaryRed' : 'fmtm-bg-transparent'
                     }`}
-                    onClick={() => toggleStep(step)}
+                    onClick={() => {
+                      if (switchSteps) {
+                        toggleStep(step);
+                      }
+                    }}
                   >
                     <AssetModules.DoneIcon
                       className={`${

diff --git a/src/frontend/src/components/createnewproject/DataExtract.tsx b/src/frontend/src/components/createnewproject/DataExtract.tsx
@@ -184,7 +184,7 @@ const DataExtract = ({ flag, customLineUpload, setCustomLineUpload, customPolygo
                 btnText="PREVIOUS"
                 btnType="secondary"
                 type="button"
-                onClick={() => toggleStep(2, '/upload-area')}
+                onClick={() => toggleStep(3, '/select-form')}
                 className="fmtm-font-bold"
               />
               <Button btnText="NEXT" btnType="primary" type="submit" className="fmtm-font-bold" />

diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -110,6 +110,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
       ),
     );
     dispatch(CreateProjectActions.SetIndividualProjectDetailsData({ ...projectDetails, ...formValues }));
+    dispatch(CreateProjectActions.SetCanSwitchCreateProjectSteps(true));
   };
 
   useEffect(() => {
@@ -197,6 +198,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customLineUpload, custo
       dispatch(CreateProjectActions.SetGenerateProjectQRSuccess(null));
       navigate(`/project_details/${encodedProjectId}`);
       dispatch(CreateProjectActions.ClearCreateProjectFormData());
+      dispatch(CreateProjectActions.SetCanSwitchCreateProjectSteps(false));
     }
     if (generateQrSuccess && generateProjectLog?.status === 'PENDING') {
       if (generateProjectLogIntervalCb === null) {

diff --git a/src/frontend/src/store/slices/CreateProjectSlice.ts b/src/frontend/src/store/slices/CreateProjectSlice.ts
@@ -47,6 +47,7 @@ export const initialState: CreateProjectStateTypes = {
   lineGeojson: null,
   createProjectValidations: {},
   isUnsavedChanges: false,
+  canSwitchCreateProjectSteps: false,
 };
 
 const CreateProject = createSlice({
@@ -206,6 +207,9 @@ const CreateProject = createSlice({
     SetIsUnsavedChanges(state, action) {
       state.isUnsavedChanges = action.payload;
     },
+    SetCanSwitchCreateProjectSteps(state, action) {
+      state.canSwitchCreateProjectSteps = action.payload;
+    },
   },
 });
 

diff --git a/src/frontend/src/store/types/ICreateProject.ts b/src/frontend/src/store/types/ICreateProject.ts
@@ -33,6 +33,7 @@ export type CreateProjectStateTypes = {
   lineGeojson: null;
   createProjectValidations: {};
   isUnsavedChanges: boolean;
+  canSwitchCreateProjectSteps: boolean;
 };
 export type ValidateCustomFormResponse = {
   detail: { message: string; possible_reason: string };