From 9e00e6bebcba62ae49c34bd7d4beaedd8eef55a0 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Mon, 5 Feb 2024 17:43:14 +0545 Subject: [PATCH 01/35] feat createEditOrganization: routes/header setup --- .../CreateEditOrganizationHeader.tsx | 26 +++++++++++++++++++ src/frontend/src/routes.jsx | 17 ++++++++++++ .../src/views/CreateEditOrganization.tsx | 18 +++++++++++++ src/frontend/src/views/Organisation.tsx | 2 +- 4 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx create mode 100644 src/frontend/src/views/CreateEditOrganization.tsx diff --git a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx new file mode 100644 index 0000000000..6df615a99f --- /dev/null +++ b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import AssetModules from '@/shared/AssetModules.js'; +import { useNavigate } from 'react-router-dom'; + +const CreateProjectHeader = ({ projectId }) => { + const navigate = useNavigate(); + return ( +
+
+
+

+ {projectId ? 'EDIT YOUR ORGANIZATION' : 'REGISTER YOUR ORGANIZATION'} +

+
+
navigate('/organisation')} + > + +
+
+
+ ); +}; + +export default CreateProjectHeader; diff --git a/src/frontend/src/routes.jsx b/src/frontend/src/routes.jsx index c900c4b48f..0d1fcd4559 100755 --- a/src/frontend/src/routes.jsx +++ b/src/frontend/src/routes.jsx @@ -11,6 +11,7 @@ import ProtectedRoute from '@/utilities/ProtectedRoute'; import NotFoundPage from '@/views/NotFound404'; import Organisation from '@/views/Organisation'; import CreateOrganisation from '@/views/CreateOrganisation'; +import CreateEditOrganization from '@/views/CreateEditOrganization'; import Authorized from '@/views/Authorized'; import SubmissionDetails from '@/views/SubmissionDetails'; import CreateNewProject from '@/views/CreateNewProject'; @@ -54,6 +55,22 @@ const routes = createBrowserRouter([ ), }, + { + path: '/create-organization', + element: ( + + + + ), + }, + { + path: '/edit-organization/:id', + element: ( + + + + ), + }, // { // path: '/explore', // element: , diff --git a/src/frontend/src/views/CreateEditOrganization.tsx b/src/frontend/src/views/CreateEditOrganization.tsx new file mode 100644 index 0000000000..8301d54368 --- /dev/null +++ b/src/frontend/src/views/CreateEditOrganization.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import CoreModules from '@/shared/CoreModules'; +import environment from '@/environment'; +import CreateEditOrganizationHeader from '@/components/CreateEditOrganization/CreateEditOrganizationHeader'; + +const CreateEditOrganization = () => { + const params = CoreModules.useParams(); + const encodedId = params.id; + const decodedId = encodedId ? environment.decode(encodedId) : null; + + return ( +
+ +
+ ); +}; + +export default CreateEditOrganization; diff --git a/src/frontend/src/views/Organisation.tsx b/src/frontend/src/views/Organisation.tsx index 4507371b22..ce0f9447f3 100644 --- a/src/frontend/src/views/Organisation.tsx +++ b/src/frontend/src/views/Organisation.tsx @@ -48,7 +48,7 @@ const Organisation = () => { >

MANAGE ORGANIZATIONS

- + Date: Mon, 5 Feb 2024 17:56:40 +0545 Subject: [PATCH 02/35] feat createEditOrganization: conditionally showing consent/createEdit forms --- .../CreateEditOrganization/ConsentDetailsForm.tsx | 7 +++++++ .../CreateEditOrganization/CreateEditOrganizationForm.tsx | 7 +++++++ src/frontend/src/views/CreateEditOrganization.tsx | 5 +++++ 3 files changed, 19 insertions(+) create mode 100644 src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx create mode 100644 src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx diff --git a/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx b/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx new file mode 100644 index 0000000000..26d51c6056 --- /dev/null +++ b/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const ConsentDetailsForm = () => { + return
ConsentDetailsForm
; +}; + +export default ConsentDetailsForm; diff --git a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx new file mode 100644 index 0000000000..416b916c63 --- /dev/null +++ b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const CreateEditOrganizationForm = () => { + return
CreateEditOrganizationForm
; +}; + +export default CreateEditOrganizationForm; diff --git a/src/frontend/src/views/CreateEditOrganization.tsx b/src/frontend/src/views/CreateEditOrganization.tsx index 8301d54368..9c29e7d889 100644 --- a/src/frontend/src/views/CreateEditOrganization.tsx +++ b/src/frontend/src/views/CreateEditOrganization.tsx @@ -2,6 +2,8 @@ import React from 'react'; import CoreModules from '@/shared/CoreModules'; import environment from '@/environment'; import CreateEditOrganizationHeader from '@/components/CreateEditOrganization/CreateEditOrganizationHeader'; +import ConsentDetailsForm from '@/components/CreateEditOrganization/ConsentDetailsForm'; +import CreateEditOrganizationForm from '@/components/CreateEditOrganization/CreateEditOrganizationForm'; const CreateEditOrganization = () => { const params = CoreModules.useParams(); @@ -11,6 +13,9 @@ const CreateEditOrganization = () => { return (
+
+ {decodedId ? : } +
); }; From 35e94f3084b7481086e6f8cf91a05d87cce6bb8f Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 6 Feb 2024 09:40:06 +0545 Subject: [PATCH 03/35] fix createEditOrganizationHeader: component renamed --- .../CreateEditOrganization/CreateEditOrganizationHeader.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx index 6df615a99f..1fca940204 100644 --- a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx +++ b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx @@ -2,10 +2,10 @@ import React from 'react'; import AssetModules from '@/shared/AssetModules.js'; import { useNavigate } from 'react-router-dom'; -const CreateProjectHeader = ({ projectId }) => { +const CreateEditOrganizationHeader = ({ projectId }) => { const navigate = useNavigate(); return ( -
+

@@ -23,4 +23,4 @@ const CreateProjectHeader = ({ projectId }) => { ); }; -export default CreateProjectHeader; +export default CreateEditOrganizationHeader; From 5adf5b372440a956dbb5916b80948e9f279b2bc7 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 6 Feb 2024 09:41:50 +0545 Subject: [PATCH 04/35] feat consentQuestions: consent questions schema setup in constants --- .../src/constants/ConsentQuestions.ts | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 src/frontend/src/constants/ConsentQuestions.ts diff --git a/src/frontend/src/constants/ConsentQuestions.ts b/src/frontend/src/constants/ConsentQuestions.ts new file mode 100644 index 0000000000..6711e81615 --- /dev/null +++ b/src/frontend/src/constants/ConsentQuestions.ts @@ -0,0 +1,68 @@ +type optionsType = { + id: string; + label: string; +}; + +type consentQuestionsType = { + id: string; + type: 'radio' | 'checkbox'; + required: boolean; + question: string; + description: string | null; + options: optionsType[]; +}; + +export const consentQuestions: consentQuestionsType[] = [ + { + id: 'give_consent', + type: 'radio', + required: true, + question: 'Do you give consent?', + description: null, + options: [ + { id: 'yes', label: 'Yes, I agree to provide consent to collect, store and process information I provide' }, + { id: 'no', label: 'No, I do not agree to provide consent to collect, store and process information I provide' }, + ], + }, + { + id: 'review_documentation', + type: 'checkbox', + required: true, + question: 'Please review the following documentation...? *', + description: 'Check each box after you have reviewed the material', + options: [ + { id: 'code_of_conduct', label: 'HOT Code of Conduct https://www.hotosm.org/code-of-conduct' }, + { id: 'learn_osm', label: 'LearnOSM https://learnosm.org/en/coordination/humanitarian/ and associated modules' }, + { + id: 'compliance_guide', + label: + 'HOT Suggested OEG Compliance Guide https://docs.google.com/document/d/1IIrR75Cmy92giXLa9hCVIur0wJ3HU4nTZoq6zQWyrEU/edit?usp=sharing', + }, + ], + }, + { + id: 'log_into', + type: 'checkbox', + required: true, + question: 'Also, please log-into...?', + description: + 'You do not have to map/take any action - logging in adds your username to the TM database for permissions, etc.', + options: [ + { id: 'staging_site', label: 'The staging site https://stage.fmtm.hotosm.org/' }, + { id: 'main_site', label: 'The main Field Mapping Tasking Manager https://fmtm.hotosm.org/' }, + ], + }, + { + id: 'participated_in', + type: 'checkbox', + required: true, + question: 'Have you participated in...?', + description: null, + options: [ + { id: 'mapathon', label: 'Participated in a Mapathon (in person or remote)' }, + { id: 'field_survey', label: 'Organized or helped facilitate a Field Survey (in person or remote)' }, + { id: 'validation_qa', label: 'Organized or helped coordinate a validation / quality assurance effort' }, + { id: 'tm_josm', label: 'Contributed to OpenStreetMap via different mapping tools such as TM, JOSM' }, + ], + }, +]; From e49f4c85d4afa842180ecc9369f04a40e3477d80 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 6 Feb 2024 09:42:39 +0545 Subject: [PATCH 05/35] feat consentDetailsForm: leftSide container UI add --- .../ConsentDetailsForm.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx b/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx index 26d51c6056..e004b647d5 100644 --- a/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx +++ b/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx @@ -1,7 +1,24 @@ import React from 'react'; +import { consentQuestions } from '@/constants/ConsentQuestions'; const ConsentDetailsForm = () => { - return
ConsentDetailsForm
; + return ( +
+
+
Project Details
+

+ + Fill in your project basic information such as name, description, hashtag, etc. This captures essential + information about your project. + + To complete the first step, you will need the login credentials of ODK Central Server. + + Here are the instructions for setting up a Central ODK Server on Digital Ocean, if you haven’t already. + +

+
+
+ ); }; export default ConsentDetailsForm; From 65d5dfa871c6691fa6671a05973b9d0d56c9e259 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 6 Feb 2024 12:31:49 +0545 Subject: [PATCH 06/35] feat checkbox: custom radixUI checkbox component add --- src/frontend/package.json | 1 + src/frontend/pnpm-lock.yaml | 31 ++++++++++++++ .../src/components/common/Checkbox.tsx | 40 +++++++++++++++++++ 3 files changed, 72 insertions(+) create mode 100644 src/frontend/src/components/common/Checkbox.tsx diff --git a/src/frontend/package.json b/src/frontend/package.json index cfd6e5426b..d0a95eeddb 100755 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -52,6 +52,7 @@ "@mui/lab": "^5.0.0-alpha.134", "@mui/material": "^5.14.12", "@mui/system": "^5.14.12", + "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-select": "^1.2.2", diff --git a/src/frontend/pnpm-lock.yaml b/src/frontend/pnpm-lock.yaml index 9183652277..dd72b48a56 100644 --- a/src/frontend/pnpm-lock.yaml +++ b/src/frontend/pnpm-lock.yaml @@ -32,6 +32,9 @@ dependencies: '@mui/system': specifier: ^5.14.12 version: 5.14.12(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@17.0.67)(react@17.0.2) + '@radix-ui/react-checkbox': + specifier: ^1.0.4 + version: 1.0.4(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2) '@radix-ui/react-dialog': specifier: ^1.0.5 version: 1.0.5(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2) @@ -2223,6 +2226,34 @@ packages: react-dom: 17.0.2(react@17.0.2) dev: false + /@radix-ui/react-checkbox@1.0.4(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.1 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.67)(react@17.0.2) + '@radix-ui/react-context': 1.0.1(@types/react@17.0.67)(react@17.0.2) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.67)(react@17.0.2) + '@radix-ui/react-use-previous': 1.0.1(@types/react@17.0.67)(react@17.0.2) + '@radix-ui/react-use-size': 1.0.1(@types/react@17.0.67)(react@17.0.2) + '@types/react': 17.0.67 + '@types/react-dom': 17.0.21 + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@radix-ui/react-collection@1.0.3(@types/react-dom@17.0.21)(@types/react@17.0.67)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==} peerDependencies: diff --git a/src/frontend/src/components/common/Checkbox.tsx b/src/frontend/src/components/common/Checkbox.tsx new file mode 100644 index 0000000000..f34a73e0aa --- /dev/null +++ b/src/frontend/src/components/common/Checkbox.tsx @@ -0,0 +1,40 @@ +'use client'; + +import * as React from 'react'; +import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; +import { Check } from 'lucide-react'; +import { cn } from '@/utilfunctions/shadcn'; + +type CustomCheckboxType = { + label: string; + checked: boolean; + onCheckedChange: (checked: boolean) => void; +}; + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)); +Checkbox.displayName = CheckboxPrimitive.Root.displayName; + +export const CustomCheckbox = ({ label, checked, onCheckedChange }: CustomCheckboxType) => { + return ( +
+ +

{label}

+
+ ); +}; From 3658856bc7128f26513de257c31eca397ba5d1e4 Mon Sep 17 00:00:00 2001 From: NSUWAL123 Date: Tue, 6 Feb 2024 12:32:39 +0545 Subject: [PATCH 07/35] fix radioButton: className prop add to radioButton --- .../src/components/common/RadioButton.tsx | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/components/common/RadioButton.tsx b/src/frontend/src/components/common/RadioButton.tsx index b3f886862c..2472dfbc9c 100644 --- a/src/frontend/src/components/common/RadioButton.tsx +++ b/src/frontend/src/components/common/RadioButton.tsx @@ -14,13 +14,24 @@ interface RadioButtonProps { onChangeData: (value: string) => void; value: string; errorMsg?: string; + className?: string; } -const RadioButton: React.FC = ({ topic, options, direction, onChangeData, value, errorMsg }) => ( +const RadioButton: React.FC = ({ + topic, + options, + direction, + onChangeData, + value, + errorMsg, + className, +}) => (
-
-

{topic}

-
+ {topic && ( +
+

{topic}

+
+ )}
{options.map((option) => { return ( @@ -38,7 +49,7 @@ const RadioButton: React.FC = ({ topic, options, direction, on />