From dd027bc7bb0addb424fb7b11bdb2a1a718eb3dd5 Mon Sep 17 00:00:00 2001 From: Redet Getachew Date: Wed, 20 Nov 2024 12:03:07 +0300 Subject: [PATCH] feat: #118 adds a input element to the request form --- src/Components/RequestForm.js | 435 ++++++++++++++++++++++++++++++---- 1 file changed, 387 insertions(+), 48 deletions(-) diff --git a/src/Components/RequestForm.js b/src/Components/RequestForm.js index 90ebffe..1525bee 100644 --- a/src/Components/RequestForm.js +++ b/src/Components/RequestForm.js @@ -28,24 +28,7 @@ import Chart from "./Chart"; import SecondaryListItems from "./SecondaryListItems"; import ReactGA from "react-ga4"; import Footer from "./Footer"; - -function Copyright(props) { - return ( - - {"Copyright © "} - - HABTech Solution - {" "} - {new Date().getFullYear()} - {"."} - - ); -} +import { Select, MenuItem, Checkbox, FormControlLabel } from "@mui/material"; const drawerWidth = 240; @@ -109,11 +92,85 @@ export default function RequestForm() { const [affiliation, setAffiliation] = React.useState(""); const [request, setRequest] = React.useState(""); const [showChart, setShowChart] = React.useState(false); + const [requester, setRequester] = React.useState(""); + const [position, setPosition] = React.useState(""); + const [dataType, setDataType] = React.useState(""); + const [formatOfDataRequested, setFormatOfDataRequested] = React.useState(""); + const [requestingOrganaization, setRequestingOrganization] = + React.useState(""); + const [age, setAge] = React.useState(""); + const [sex, setSex] = React.useState(""); + const [academicBackground, setAcademicBackground] = React.useState(""); + const [profession, setProfession] = React.useState(""); + const [purpose, setPurpose] = React.useState(""); + const [datasetName, setDatasetName] = React.useState(""); + const [geographicDisaggregation, setGeographicDisaggregation] = + React.useState(""); + const [ageDisaggration, setAgeDisaggration] = React.useState(""); + const [sexDisaggration, setSexDisaggration] = React.useState(""); + const [phone, setPhone] = React.useState(""); + + const handlePhoneChange = (event) => { + setPhone(event.target.value); + }; + const handleSexDisaggrationChange = (event) => { + setSexDisaggration(event.target.value); + }; + const handleAgeDisaggrationChange = (event) => { + setAgeDisaggration(event.target.value); + }; + + const handleGeographicDisaggregationChange = (event) => { + setGeographicDisaggregation(event.target.value); + }; + + const handleDatasetNameChange = (event) => { + setDatasetName(event.target.value); + }; + + const handlePurposeChange = (event) => { + setPurpose(event.target.value); + }; + const handleProfessionChange = (event) => { + setProfession(event.target.value); + }; + + const handleSexChange = (event) => { + setSex(event.target.value); + }; + + const handleAcademicBackgroundChange = (event) => { + setAcademicBackground(event.target.value); + }; + + const handleAgeChange = (event) => { + setAge(event.target.value); + }; + + const handleRequestingOrganizationChange = (event) => { + setRequestingOrganization(event.target.value); + }; const handleNameChange = (event) => { setName(event.target.value); }; + const handleFormatOfDataRequestedChange = (event) => { + setFormatOfDataRequested(event.target.value); + }; + + const handleDataTypeChange = (event) => { + setDataType(event.target.value); + }; + + const handelPositionChange = (event) => { + setPosition(event.target.value); + }; + + const handleRequesterChange = (event) => { + setRequester(event.target.value); + }; + const handleEmailChange = (event) => { setEmail(event.target.value); }; @@ -231,7 +288,6 @@ export default function RequestForm() { setSelectedSavedChart={setSelectedSavedChart} /> - ) : ( Request Form @@ -256,19 +312,234 @@ export default function RequestForm() { + + + + + Requester + + + + + + + + Type of data reqeusted + + + + + + + + Requesting Organization + + + + + + + + Format of data + + + + + + + Requesting Person + + + + + + + + + + + Sex of requesting person + + + + + + + + + + + + Academic Background of requesting person + + + + + + + + Profession of requesting person + + + + + + + + + + + Purpose of data request * + + + + + + + + + + Particulars/ Disaggregation of data requested + + + + + - + + + - Request - - + fullWidth + value={sexDisaggration} + onChange={handleSexDisaggrationChange} + /> + + + + + + + Consent + + I/we the undersigned solemnly agree that I/we use the + data only for the purpose I/we requested for. I/we + appropriately acknowledge the data owner/source that + provided me/us access to this data in any publication or + communication. I/we will not share the data to a third + party without the consent of the data owner. I/we agree + to be held accountable by any legal or administrative + measures if I breach any of the above vows.
+ } + label="I/we agree to the above vows." + /> +
+ Note: All the variables with asterisk (*) are mandatory + fields. + + Submit Request