Skip to content

Commit

Permalink
feat: new UI for create project (#918)
Browse files Browse the repository at this point in the history
* 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 <suwalnishit@gmail.com>
Co-authored-by: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Co-authored-by: Niraj Adhikari <nrjadkry@gmail.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: spwoodcock <sam.woodcock@protonmail.com>
  • Loading branch information
6 people authored Oct 17, 2023
1 parent 95491d6 commit 1ae34f6
Show file tree
Hide file tree
Showing 37 changed files with 1,255 additions and 425 deletions.
8 changes: 7 additions & 1 deletion .pre-commit-config.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
44 changes: 34 additions & 10 deletions src/frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions src/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
35 changes: 35 additions & 0 deletions src/frontend/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 2 additions & 5 deletions src/frontend/src/api/CreateProjectService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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),
);
Expand Down Expand Up @@ -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);
}
Expand All @@ -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));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -135,6 +136,7 @@ const VectorLayer = ({
useEffect(() => {
if (!map) return;
if (!geojson) return;
if (!valid(geojson)) return;

const vectorLyr = new OLVectorLayer({
source: new VectorSource({
Expand Down
12 changes: 8 additions & 4 deletions src/frontend/src/components/TasksLayer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
40 changes: 29 additions & 11 deletions src/frontend/src/components/common/Button.tsx
Original file line number Diff line number Diff line change
@@ -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) => {
Expand All @@ -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>
);
Expand Down
Loading

0 comments on commit 1ae34f6

Please sign in to comment.