fix(frontend): custom tms url input (hotosm#998)

* fix (projectDetails): generateProjectTiles - textfield label renamed * fix (projectDeatils): generateProjectTiles - UI changes, tile source moved before output format
naxa-developers · Dec 8, 2023 · e392b2e · e392b2e
1 parent d031e31
commit e392b2e
Showing 1 changed file with 48 additions and 44 deletions.
diff --git a/src/frontend/src/components/GenerateBasemap.jsx b/src/frontend/src/components/GenerateBasemap.jsx
@@ -100,46 +100,6 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
         </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} md={4}>
             <CoreModules.FormControl fullWidth>
@@ -178,14 +138,14 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
             )}
           </CoreModules.Grid>
           {selectedTileSource === 'tms' && (
-            <CoreModules.Grid item xs={12} sm={12} md={4}>
+            <CoreModules.Grid item xs={12} sm={6} md={4}>
               <CoreModules.FormControl fullWidth>
                 <CoreModules.TextField
                   // labelId="tms_url-label"
                   id="tms_url"
                   variant="outlined"
                   value={tmsUrl}
-                  label="Enter Tile Source"
+                  label="Enter TMS URL"
                   fullWidth
                   color="black"
                   sx={{
@@ -201,10 +161,54 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI
                   onChange={handleTmsUrlChange}
                 />
               </CoreModules.FormControl>
-              {error.includes('tmsUrl') && <p className="fmtm-text-sm fmtm-text-red-500">Tile Source is Required.</p>}
+              {error.includes('tmsUrl') && <p className="fmtm-text-sm fmtm-text-red-500">TMS URL is Required.</p>}
             </CoreModules.Grid>
           )}
-          <CoreModules.Grid item xs={12} sm={12} md={selectedTileSource === 'tms' ? 12 : 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>
+          <CoreModules.Grid
+            item
+            xs={12}
+            sm={selectedTileSource === 'tms' ? 6 : 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>