feat: new UI for create project (#918)

* 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 * feat(FileInput): Component Changes * Feat(RadioBtn): added errorMsg * feat(Select): errormsg added * Feat(DataExtract): Step Changes * feat(SelectForm): Changes on SelectForm * feat(UploadArea): Changes on Step * feat(DataExtractValidation): validation changes * Feat(SelectForm): Validation Changes * Feat(UploadAreaValidation): added * Feat(CreateNewProject): changes with Other * feat(define_task_validation): Validation Fixes * feat(SplitTask): WIP * feat: Change BASEURL of tsconfig.json * feat: new create project setting up * fix: feature count in task features count api * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * task_count passed in the upload multipolygon api * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fix: error on taskboundary not existing * feat: geojson-validation added * feat: setdividedtask geojson fix * feat: button component changes * fix: removed unwanted api call * feat: split Task Step * feat: dataextractvalidation changes * feat: data Extract Step changes * feat: removed multiple api call * fix: splitting drawn geojson state changes * feat: splittedgeojson added on defineareamap * feat: changed new route to normal route for create project * fix: changed formways value * feat: validation on data extract * feat: value changes on post create project * fix: removed persist create project * feat: clearcreateproject form data * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * feat: radix ui progress bar * feat: added progress bar css for animation * fix: submit type bug * fix: prop on button component * feat: Split task added progress bar * fix: removed console log on newdefineareamap * build: update frontend package lock file * ci(pre-commit): add pnpm lock file to ignore files --------- Co-authored-by: NSUWAL123 <[email protected]> Co-authored-by: Nishit Suwal <[email protected]> Co-authored-by: Niraj Adhikari <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: spwoodcock <[email protected]>
hotosm · Oct 17, 2023 · 1ae34f6 · 1ae34f6
1 parent 95491d6
commit 1ae34f6
Show file tree

Hide file tree

Showing 37 changed files with 1,255 additions and 425 deletions.
diff --git a/.pre-commit-config.yaml b/.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

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
diff --git a/src/frontend/package.json b/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",

diff --git a/src/frontend/pnpm-lock.yaml b/src/frontend/pnpm-lock.yaml
diff --git a/src/frontend/src/api/CreateProjectService.ts b/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));

diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/Layers/VectorLayer.js b/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({

diff --git a/src/frontend/src/components/TasksLayer.jsx b/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');

diff --git a/src/frontend/src/components/common/Button.tsx b/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>
 );