feature/New UI for create project

.pre-commit-config.yaml

@@ -27,7 +27,13 @@ repos:
     rev: v3.0.3
     hooks:
       - id: prettier
-        args: [--ignore-unknown, --no-error-on-unmatched-pattern, "!chart/**"]
+        args:
+          [
+            --ignore-unknown,
+            --no-error-on-unmatched-pattern,
+            "!chart/**",
+            "!src/frontend/pnpm-lock.yaml",
+          ]
 
   # Lint: Markdown
   - repo: https://github.com/igorshubovych/markdownlint-cli

src/frontend/package.json

@@ -50,6 +50,7 @@
     "@mui/material": "^5.14.12",
     "@mui/system": "^5.14.12",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@reduxjs/toolkit": "^1.9.1",
@@ -64,6 +65,7 @@
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^5.0.0",
+    "geojson-validation": "^1.0.2",
     "install": "^0.13.0",
     "lucide-react": "^0.276.0",
     "mini-css-extract-plugin": "^2.7.5",

src/frontend/src/api/CreateProjectService.ts

@@ -5,7 +5,6 @@ import {
   FormCategoryListModel,
   OrganisationListModel,
 } from '../models/createproject/createProjectModel';
-import enviroment from '../environment';
 import { CommonActions } from '../store/slices/CommonSlice';
 import { ValidateCustomFormResponse } from 'store/types/ICreateProject';
 
@@ -27,7 +26,7 @@ const CreateProjectService: Function = (
         const resp: ProjectDetailsModel = postNewProjectDetails.data;
         await dispatch(CreateProjectActions.PostProjectDetails(resp));
 
-        if (payload.splitting_algorithm === 'Choose Area as Tasks') {
+        if (payload.splitting_algorithm === 'choose_area_as_task') {
           await dispatch(
             UploadAreaService(`${import.meta.env.VITE_API_URL}/projects/${resp.id}/upload_multi_polygon`, fileUpload),
           );
@@ -163,15 +162,14 @@ const GenerateProjectQRService: Function = (url: string, payload: any, formUploa
       try {
         const isPolygon = payload.data_extractWays === 'Polygon';
         const generateApiFormData = new FormData();
-        if (payload.form_ways === 'Upload a Custom Form') {
+        if (payload.form_ways === 'custom_form') {
           generateApiFormData.append('extract_polygon', isPolygon.toString());
           generateApiFormData.append('upload', formUpload);
           if (dataExtractFile) {
             generateApiFormData.append('data_extracts', dataExtractFile);
           }
         } else {
           generateApiFormData.append('extract_polygon', isPolygon.toString());
-          generateApiFormData.append('upload', '');
           if (dataExtractFile) {
             generateApiFormData.append('data_extracts', dataExtractFile);
           }
@@ -184,7 +182,6 @@ const GenerateProjectQRService: Function = (url: string, payload: any, formUploa
         const resp: string = postNewProjectDetails.data;
         await dispatch(CreateProjectActions.GenerateProjectQRLoading(false));
         dispatch(CommonActions.SetLoading(false));
-        await dispatch(CreateProjectActions.ClearCreateProjectFormData());
         await dispatch(CreateProjectActions.GenerateProjectQRSuccess(resp));
       } catch (error: any) {
         dispatch(CommonActions.SetLoading(false));

src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js

@@ -13,6 +13,7 @@ import { defaultStyles, getStyles } from '../helpers/styleUtils';
 import { isExtentValid } from '../helpers/layerUtils';
 import { Draw, Modify, Select, defaults as defaultInteractions } from 'ol/interaction.js';
 import { getArea } from 'ol/sphere';
+import { valid } from 'geojson-validation';
 
 const selectElement = 'singleselect';
 
@@ -135,6 +136,7 @@ const VectorLayer = ({
   useEffect(() => {
     if (!map) return;
     if (!geojson) return;
+    if (!valid(geojson)) return;
 
     const vectorLyr = new OLVectorLayer({
       source: new VectorSource({

src/frontend/src/components/TasksLayer.jsx

@@ -70,10 +70,14 @@ const TasksLayer = (map, view, feature) => {
         // The extent of the vector layer
         var extent = [minX, minY, maxX, maxY];
 
-        map.getView().fit(extent, {
-          duration: 2000, // Animation duration in milliseconds
-          padding: [50, 50, 50, 200], // Optional padding around the extent
-        });
+        // Checking if Taskboundaries exist if doesn't exist dont throw error window
+        const checkForInfinity = extent.some((ext) => ext === Infinity);
+        if (!checkForInfinity) {
+          map.getView().fit(extent, {
+            duration: 2000, // Animation duration in milliseconds
+            padding: [50, 50, 50, 200], // Optional padding around the extent
+          });
+        }
         map.addLayer(vectorLayer);
         map.on('loadend', function () {
           map.getTargetElement().classList.remove('spinner');

src/frontend/src/components/common/Button.tsx

@@ -1,14 +1,17 @@
+import { Loader2 } from 'lucide-react';
 import React from 'react';
 
 interface IButton {
   btnText: string;
-  btnType: 'primary' | 'secondary' | 'other';
-  type: 'submit' | 'button';
+  btnType: 'primary' | 'secondary' | 'other' | 'disabled';
+  type?: 'submit' | 'button';
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   className?: string;
   count?: number;
   dataTip?: string;
   icon?: React.ReactNode;
+  isLoading?: boolean;
+  disabled?: boolean;
 }
 
 const btnStyle = (btnType, className) => {
@@ -20,26 +23,41 @@ const btnStyle = (btnType, className) => {
 
     case 'other':
       return `fmtm-py-1 fmtm-px-5 fmtm-bg-red-500 fmtm-text-white fmtm-rounded-lg hover:fmtm-bg-red-600`;
+    case 'disabled':
+      return `fmtm-py-1 fmtm-px-5 fmtm-text-white fmtm-rounded-lg fmtm-bg-gray-400 fmtm-cursor-not-allowed`;
 
     default:
       return 'fmtm-primary';
   }
 };
-const Button = ({ btnText, btnType, type, onClick, className, count, dataTip, icon }: IButton) => (
+const Button = ({ btnText, btnType, type, onClick, disabled, className, count, dataTip, icon, isLoading }: IButton) => (
   <div className="fmtm-w-fit">
     <button
-      type={type ? 'submit' : 'button'}
+      type={type === 'submit' ? 'submit' : 'button'}
       onClick={onClick}
-      className={`fmtm-text-lg fmtm-group fmtm-flex fmtm-items-center fmtm-gap-2 ${btnStyle(btnType, className)}`}
+      className={`fmtm-text-lg fmtm-group fmtm-flex fmtm-items-center fmtm-gap-2 ${btnStyle(
+        isLoading ? 'disabled' : btnType,
+        className,
+      )}`}
+      disabled={disabled || isLoading}
       title={dataTip}
     >
-      <p className="fmtm-whitespace-nowrap">{btnText}</p>
-      {count && (
-        <p className="fmtm-flex fmtm-justify-center fmtm-items-center fmtm-text-overline fmtm-ml-2 fmtm-rounded-[40px] fmtm-bg-active_text fmtm-text-white fmtm-w-6 fmtm-h-6">
-          {count}
-        </p>
+      {isLoading ? (
+        <>
+          {type === 'submit' ? 'Submitting...' : 'Loading...'}
+          <Loader2 className="fmtm-mr-2 fmtm-h-6 fmtm-w-6 fmtm-animate-spin" />
+        </>
+      ) : (
+        <>
+          <p className="fmtm-whitespace-nowrap">{btnText}</p>
+          {count && (
+            <p className="fmtm-flex fmtm-justify-center fmtm-items-center fmtm-text-overline fmtm-ml-2 fmtm-rounded-[40px] fmtm-bg-active_text fmtm-text-white fmtm-w-6 fmtm-h-6">
+              {count}
+            </p>
+          )}
+          <div>{icon && icon}</div>
+        </>
       )}
-      <div>{icon && icon}</div>
     </button>
   </div>
 );