Merge pull request #165 from hotosm/minor-updates-fixes

Refactor UI and task image uplaod flow

src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx

@@ -77,6 +77,9 @@ const CreateprojectLayout = () => {
   const requireApprovalFromManagerForLocking = useTypedSelector(
     state => state.createproject.requireApprovalFromManagerForLocking,
   );
+  const measurementType = useTypedSelector(
+    state => state.createproject.measurementType,
+  );
 
   const initialState: FieldValues = {
     name: '',
@@ -213,6 +216,8 @@ const CreateprojectLayout = () => {
     if (isNoflyzonePresent === 'no')
       delete refactoredData?.outline_no_fly_zones;
     delete refactoredData?.dem;
+    if (measurementType === 'gsd') delete refactoredData?.altitude_from_ground;
+    else delete refactoredData?.gsd_cm_px;
 
     // make form data with value JSON stringify to combine value on single json / form data with only 2 keys (backend didn't found project_info on non-stringified data)
     const formData = new FormData();

src/frontend/src/components/CreateProject/FormContents/BasicInformation/index.tsx

@@ -1,13 +1,14 @@
 import { FormControl, Label, Input } from '@Components/common/FormUI';
 import ErrorMessage from '@Components/common/FormUI/ErrorMessage';
 import { UseFormPropsType } from '@Components/common/FormUI/types';
+import { Controller } from 'react-hook-form';
 
 export default function BasicInformation({
   formProps,
 }: {
   formProps: UseFormPropsType;
 }) {
-  const { register, errors } = formProps;
+  const { register, errors, control } = formProps;
 
   return (
     <div className="naxatw-px-10 naxatw-py-5">
@@ -23,14 +24,18 @@ export default function BasicInformation({
         <ErrorMessage message={errors?.name?.message as string} />
       </FormControl>
       <FormControl className="naxatw-mt-5 naxatw-gap-1">
-        <Label required>Description of the project</Label>
-        <Input
-          type="text-area"
-          placeholder="Description of the Project"
-          {...register('description', {
-            required: 'Description is Required',
-            setValueAs: (value: string) => value.trim(),
-          })}
+        <Label>Description of the project</Label>
+        <Controller
+          control={control}
+          name="description"
+          render={({ field: { onChange, onBlur, value, ref, ...others } }) => (
+            <textarea
+              className="naxatw-flex naxatw-h-[100px] naxatw-rounded-[4px] naxatw-border naxatw-border-[#555555] naxatw-bg-transparent naxatw-p-2 naxatw-text-body-md file:naxatw-font-medium hover:naxatw-border-red focus:naxatw-border-red focus:naxatw-bg-transparent focus:naxatw-outline-none disabled:naxatw-cursor-not-allowed"
+              placeholder="Description of the Project"
+              ref={ref}
+              {...others}
+            />
+          )}
         />
         <ErrorMessage message={errors?.description?.message as string} />
       </FormControl>

src/frontend/src/components/CreateProject/FormContents/DefineAOI/index.tsx

@@ -10,6 +10,7 @@ import RadioButton from '@Components/common/RadioButton';
 import { FlexColumn, FlexRow } from '@Components/common/Layouts';
 import FileUpload from '@Components/common/UploadArea';
 import hasErrorBoundary from '@Utils/hasErrorBoundary';
+import { m2ToKm2 } from '@Utils/index';
 import {
   setCreateProjectState,
   resetUploadedAndDrawnAreas,
@@ -268,7 +269,7 @@ const DefineAOI = ({ formProps }: { formProps: UseFormPropsType }) => {
                   Reset Project Area
                 </Button>
                 <p className="naxatw-mt-2 naxatw-text-body-md">
-                  Total Area: {Math.trunc(totalProjectArea as number)} m²
+                  Total Area: {m2ToKm2(Math.trunc(totalProjectArea as number))}
                 </p>
                 <div className="naxatw-mt-2">
                   <RadioButton
@@ -304,7 +305,8 @@ const DefineAOI = ({ formProps }: { formProps: UseFormPropsType }) => {
                           Reset No Fly Zone
                         </Button>
                         <p className="naxatw-mt-2 naxatw-text-body-md">
-                          Total Area: {Math.trunc(noFlyZoneArea as number)} m2
+                          Total Area:{' '}
+                          {m2ToKm2(Math.trunc(noFlyZoneArea as number))}
                         </p>
                       </>
                     ) : (

src/frontend/src/components/CreateProject/FormContents/KeyParameters/index.tsx

@@ -1,46 +1,34 @@
 /* eslint-disable camelcase */
 import { useTypedDispatch, useTypedSelector } from '@Store/hooks';
 import { FormControl, Label, Input } from '@Components/common/FormUI';
-// import RadioButton from '@Components/common/RadioButton';
+import RadioButton from '@Components/common/RadioButton';
 import ErrorMessage from '@Components/common/FormUI/ErrorMessage';
 import { UseFormPropsType } from '@Components/common/FormUI/types';
 import { setCreateProjectState } from '@Store/actions/createproject';
 import hasErrorBoundary from '@Utils/hasErrorBoundary';
 // import { terrainOptions } from '@Constants/createProject';
-import orthoPhotoIcon from '@Assets/images/ortho-photo-icon.svg';
-import _3DModal from '@Assets/images/3d-model-icon.svg';
-import DTMIcon from '@Assets/images/DTM-Icon.svg';
-import DSMIcon from '@Assets/images/DSM-icon.svg';
 import { FlexRow } from '@Components/common/Layouts';
 import Switch from '@Components/RadixComponents/Switch';
 import FileUpload from '@Components/common/UploadArea';
+import {
+  FinalOutputOptions,
+  measurementTypeOptions,
+} from '@Constants/createProject';
 import { Controller } from 'react-hook-form';
 import OutputOptions from './OutputOptions';
 
-const FinalOutputOptions = [
-  { label: '2D Orthophoto', value: 'ORTHOPHOTO_2D', icon: orthoPhotoIcon },
-  { label: '3D Model', value: 'ORTHOPHOTO_3D', icon: _3DModal },
-  {
-    label: 'Digital Terrain Model (DTM)',
-    value: 'DIGITAL_TERRAIN_MODEL',
-    icon: DTMIcon,
-  },
-  {
-    label: 'Digital Surface Model (DSM)',
-    value: 'DIGITAL_SURFACE_MODEL',
-    icon: DSMIcon,
-  },
-];
-
 const KeyParameters = ({ formProps }: { formProps: UseFormPropsType }) => {
   const dispatch = useTypedDispatch();
 
-  const { register, errors, watch, control } = formProps;
+  const { register, errors, watch, control, setValue } = formProps;
   const final_output = watch('final_output');
 
   const keyParamOption = useTypedSelector(
     state => state.createproject.keyParamOption,
   );
+  const measurementType = useTypedSelector(
+    state => state.createproject.measurementType,
+  );
   const isTerrainFollow = useTypedSelector(
     state => state.createproject.isTerrainFollow,
   );
@@ -60,18 +48,49 @@ const KeyParameters = ({ formProps }: { formProps: UseFormPropsType }) => {
       /> */}
       {keyParamOption === 'basic' ? (
         <>
-          <FormControl className="naxatw-mt-4 naxatw-gap-1">
-            <Label required>Ground Sampling Distance (meter)</Label>
-            <Input
-              placeholder="Enter GSD in meter"
-              type="number"
-              {...register('gsd_cm_px', {
-                required: 'GSD is required',
-                valueAsNumber: true,
-              })}
+          <FormControl>
+            <Label>Measurement Type</Label>
+            <RadioButton
+              options={measurementTypeOptions}
+              direction="row"
+              onChangeData={val => {
+                dispatch(setCreateProjectState({ measurementType: val }));
+                setValue('gsd_cm_px', '');
+                setValue('altitude_from_ground', '');
+              }}
+              value={measurementType}
             />
-            <ErrorMessage message={errors?.gsd_cm_px?.message as string} />
           </FormControl>
+
+          {measurementType === 'gsd' ? (
+            <FormControl className="naxatw-mt-4 naxatw-gap-1">
+              <Label required>Ground Sampling Distance (meter)</Label>
+              <Input
+                placeholder="Enter GSD in meter"
+                type="number"
+                {...register('gsd_cm_px', {
+                  required: 'GSD is required',
+                  valueAsNumber: true,
+                })}
+              />
+              <ErrorMessage message={errors?.gsd_cm_px?.message as string} />
+            </FormControl>
+          ) : (
+            <FormControl className="naxatw-mt-4 naxatw-gap-1">
+              <Label required>Altitude From Ground (meter)</Label>
+              <Input
+                placeholder="Enter Altitude From Ground in meter"
+                type="number"
+                {...register('altitude_from_ground', {
+                  required: 'Altitude From Round is Required',
+                  valueAsNumber: true,
+                })}
+              />
+              <ErrorMessage
+                message={errors?.altitude_from_ground?.message as string}
+              />
+            </FormControl>
+          )}
           <FlexRow className="naxatw-grid naxatw-grid-cols-2 naxatw-gap-3">
             <FormControl className="naxatw-mt-4 naxatw-gap-1">
               <Label required>Front Overlap in (%)</Label>
@@ -88,7 +107,7 @@ const KeyParameters = ({ formProps }: { formProps: UseFormPropsType }) => {
               <ErrorMessage
                 message={errors?.forward_overlap_percent?.message as string}
               />
-              <p className="naxatw-text-[#68707F]">Recommended - 75%</p>
+              <p className="naxatw-text-[#68707F]">Recommended : 75%</p>
             </FormControl>
             <FormControl className="naxatw-mt-4 naxatw-gap-1">
               <Label required>Side Overlap in (%)</Label>
@@ -105,7 +124,7 @@ const KeyParameters = ({ formProps }: { formProps: UseFormPropsType }) => {
               <ErrorMessage
                 message={errors?.side_overlap_percent?.message as string}
               />
-              <p className="naxatw-text-[#68707F]">Recommended - 60%</p>
+              <p className="naxatw-text-[#68707F]">Recommended : 60%</p>
             </FormControl>
           </FlexRow>
           <FormControl className="naxatw-mt-4 naxatw-gap-1">

src/frontend/src/components/Dashboard/RequestLogs/index.tsx

@@ -3,6 +3,7 @@ import { FlexColumn } from '@Components/common/Layouts';
 import { Button } from '@Components/RadixComponents/Button';
 import { postTaskStatus } from '@Services/project';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import hasErrorBoundary from '@Utils/hasErrorBoundary';
 import { toast } from 'react-toastify';
 
 const RequestLogs = () => {
@@ -79,4 +80,4 @@ const RequestLogs = () => {
     </div>
   );
 };
-export default RequestLogs;
+export default hasErrorBoundary(RequestLogs);

src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx

@@ -1,13 +1,15 @@
 import { useParams } from 'react-router-dom';
 import { useGetIndividualTaskQuery } from '@Api/tasks';
-import { useTypedSelector } from '@Store/hooks';
+import { useState } from 'react';
+// import { useTypedSelector } from '@Store/hooks';
 import { format } from 'date-fns';
 import DescriptionBoxComponent from './DescriptionComponent';
 import QuestionBox from '../QuestionBox';
 
 const DescriptionBox = () => {
-  const secondPageStates = useTypedSelector(state => state.droneOperatorTask);
-  const { secondPage } = secondPageStates;
+  // const secondPageStates = useTypedSelector(state => state.droneOperatorTask);
+  const [flyable, setFlyable] = useState('yes');
+  // const { secondPage } = secondPageStates;
   const { taskId } = useParams();
 
   const { data: taskDescription }: Record<string, any> =
@@ -29,7 +31,7 @@ const DescriptionBox = () => {
               {
                 name: 'Total task area',
                 value: taskData?.task_area
-                  ? `${taskData?.task_area} km²`
+                  ? `${Number(taskData?.task_area)?.toFixed(3)} km²`
                   : null,
               },
               {
@@ -88,7 +90,8 @@ const DescriptionBox = () => {
           />
         ))}
       </div>
-      {!secondPage && <QuestionBox />}
+      {/* {!secondPage && <QuestionBox />} */}
+      <QuestionBox setFlyable={setFlyable} flyable={flyable} />
     </>
   );
 };

src/frontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/ImageBox/ImageCard/index.tsx

@@ -1,14 +1,8 @@
-/* eslint-disable jsx-a11y/interactive-supports-focus */
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import { useState } from 'react';
-
 import {
   setSelectedImage,
   unCheckImages,
 } from '@Store/actions/droneOperatorTask';
 import { useTypedDispatch } from '@Store/hooks';
-import Skeleton from '@Components/RadixComponents/Skeleton';
 
 interface IImageCardProps {
   image: string;
@@ -23,32 +17,33 @@ const ImageCard = ({
   deselectImages,
 }: IImageCardProps) => {
   const dispatch = useTypedDispatch();
-  const [loading, setLoading] = useState(true);
 
-  const handleLoad = () => {
-    setLoading(false);
-  };
   return (
     <>
-      {loading && (
-        <Skeleton className="naxatw-h-[8.75rem] naxatw-w-[8.75rem]" />
-      )}
       <div
-        className={`naxatw-flex naxatw-w-[8.75rem] naxatw-flex-col naxatw-gap-1 ${loading ? 'naxatw-hidden' : 'naxatw-block'}`}
+        className="naxatw-flex naxatw-h-24 naxatw-w-[6.75rem] naxatw-flex-col naxatw-gap-1 naxatw-rounded-lg naxatw-bg-gray-100 naxatw-px-1 hover:naxatw-bg-gray-300"
+        role="presentation"
+        onClick={() => dispatch(setSelectedImage(image))}
       >
-        <div className="naxatw-w-full naxatw-overflow-hidden naxatw-rounded-[0.25rem]">
-          <img
-            src={image}
+        <div className="naxatw-flex naxatw-h-16 naxatw-w-full naxatw-cursor-pointer naxatw-items-center naxatw-justify-center">
+          {/* <img
+            src={image}1
             onLoad={handleLoad}
             alt=""
             className="naxatw-h-[8.75rem] naxatw-w-full naxatw-cursor-pointer naxatw-rounded-[0.25rem] naxatw-transition hover:naxatw-scale-150"
             onClick={() => dispatch(setSelectedImage(image))}
-          />
+          /> */}
+          <i className="material-icons naxatw-text-[65px] naxatw-text-gray-400">
+            image
+          </i>
         </div>
         <div
-          role="button"
+          role="presentation"
           className="naxatw-flex naxatw-w-full naxatw-cursor-pointer naxatw-items-center naxatw-gap-2 naxatw-overflow-hidden"
-          onClick={() => dispatch(unCheckImages(deselectImages))}
+          onClick={e => {
+            e.stopPropagation();
+            dispatch(unCheckImages(deselectImages));
+          }}
         >
           <input
             type="checkbox"

src/frontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/ImageBox/PreviewImage/index.tsx

@@ -1,7 +1,9 @@
 import { useTypedSelector } from '@Store/hooks';
 
 const PreviewImage = () => {
-  const { clickedImage } = useTypedSelector(state => state.droneOperatorTask);
+  const clickedImage = useTypedSelector(
+    state => state.droneOperatorTask.clickedImage,
+  );
   return (
     <img
       src={clickedImage}