From bb2fdc3249c700a6741bda909e2f56de80146f43 Mon Sep 17 00:00:00 2001 From: ansan johny Date: Sat, 12 Oct 2024 01:43:23 +0530 Subject: [PATCH 1/5] code --- .../Organization/Organization.module.css | 60 +++++ .../pages/Organization/Organization.tsx | 228 ++++++++++++++++++ .../pages/Settings/SettingsHome.module.css | 26 ++ .../Settings/pages/Settings/SettingsHome.tsx | 29 +++ 4 files changed, 343 insertions(+) create mode 100644 src/modules/Dashboard/modules/Settings/pages/Organization/Organization.module.css create mode 100644 src/modules/Dashboard/modules/Settings/pages/Organization/Organization.tsx create mode 100644 src/modules/Dashboard/modules/Settings/pages/Settings/SettingsHome.module.css create mode 100644 src/modules/Dashboard/modules/Settings/pages/Settings/SettingsHome.tsx diff --git a/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.module.css b/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.module.css new file mode 100644 index 000000000..df4cf3591 --- /dev/null +++ b/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.module.css @@ -0,0 +1,60 @@ +@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap"); + +.wrapper { + padding: 1rem; + display: flex; + justify-content: center; + align-items: center; +} + +.tableWrapper { + background-color: white; + border-radius: 10px; + padding: 2rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.wrapper form { + width: 20rem; +} + +.inputBox { + width: 100%; + height: 2.5rem; + margin-top: 1.5rem; +} + +.inputBox span { + color: red; + font-size: small; + margin-left: 15px; +} + +.inputBox input { + width: 100%; + height: 100%; + background: #f3f3f4; + border-radius: 8px; + border: none; + padding: 1rem; +} + +.submit { + display: flex; + justify-content: center; + align-items: center; +} + +.submit button { + width: 100%; + color: white; +} + +.text { + font-weight: 700; +} + +.errorsSpan { + color: red; + font-size: small; +} \ No newline at end of file diff --git a/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.tsx b/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.tsx new file mode 100644 index 000000000..79901008f --- /dev/null +++ b/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.tsx @@ -0,0 +1,228 @@ +import { PowerfulButton } from "@/MuLearnComponents/MuButtons/MuButton"; +import styles from "./Organization.module.css"; +import { Form, Formik } from "formik"; +import * as z from "yup"; +import { FormikTextInputWithoutLabel as SimpleInput } from "@/MuLearnComponents/FormikComponents/FormikComponents"; +import { useEffect, useState } from "react"; +import { + getColleges, + getDepartments, + getRoles, + submitUserData +} from "../../../../../Common/Authentication/services/newOnboardingApis"; +import ReactSelect from "react-select"; +import { useLocation, useNavigate } from "react-router-dom"; + +const inputObject = { + college: "College Name", + department: "Department", + graduationYear: "Graduation Year" +}; + +const scheme = z.object({ + college: z + .string() + .required(`${inputObject.college} is Required`) + .min(3, `${inputObject.college} must be at least 3 characters`) + .max(100, `${inputObject.college} must be at most 100 characters`), + department: z + .string() + .required(`${inputObject.department} is Required`) + .min(2, `${inputObject.department} must be at least 2 characters`) + .max(100, `${inputObject.department} must be at most 100 characters`), + graduationYear: z + .number() + .integer() + .positive() + .when("role", { + is: "student", + then: s => + s + .required(`${inputObject.graduationYear} is Required`) + .min(2000, `${inputObject.graduationYear} > 2000`) + .max(2030, `${inputObject.graduationYear} < 2030`) + }) +}); + +export default function CollegePage({}: {}) { + const navigate = useNavigate(); + const location = useLocation(); + let userData: any = location.state as Object; + + const [isloading, setIsLoading] = useState(true); + const [colleges, setColleges] = useState([{ id: "", title: "" }]); + const [departments, setDepartments] = useState([{ id: "", title: "" }]); + const [roles, setRoles] = useState([{ id: "", title: "" }]); + + const [selectedCollege, setSelectedCollege] = useState({ + id: "", + title: "" + }); + const [selectedDepartment, setSelectedDepartment] = useState({ + id: "", + title: "" + }); + + const getRoleTitle = (id: string) => { + const slice = roles.filter(val => val.id === id); + if (slice[0]) return slice[0].title; + }; + + const CustomFilter = ( + { label, value }: { label: string; value: string }, + string: string + ): boolean => { + if (value === "Others") return true; + if (!string) return true; + return label.toLowerCase().includes(string.toLowerCase()); + }; + + useEffect(() => { + getColleges({ + setIsLoading: setIsLoading, + setColleges: setColleges + }); + getDepartments({ + setIsLoading: setIsLoading, + setDepartments: setDepartments + }); + getRoles().then((res: any) => { + setRoles(res); + setIsLoading(false); + }); + }, []); + + const onSubmit = async (values: any) => { + const newUserData: any = { + user: { + full_name: userData.user.full_name, + email: userData.user.email, + password: userData.user.password, + district: userData.district + }, + organization: { + ...(values.department !== "Others" && { + department: values.department + }), + year_of_graduation: values.graduationYear, + organizations: [ + ...(values.college !== "Others" ? [values.college] : []), + ...userData.communities + ], + verified: true + } + }; + + if (userData.referral) + newUserData["referral"] = { muid: userData.referral.muid }; + + if (userData.role === "Enabler") + delete newUserData.organization.year_of_graduation; + + console.log(newUserData); + + submitUserData({ + setIsLoading: setIsLoading, + userData: newUserData, + navigate: navigate + }); + }; + + return ( + [key, ""]) + )} + validationSchema={scheme} + onSubmit={(value, action) => onSubmit(value)} + > + {formik => ( +
+
+
+ Please enter your college details +
+
+ ({ + value: college.id, + label: college.title + })) + ]} + name="college" + placeholder="College" + value={selectedCollege.title} + filterOption={CustomFilter} + isDisabled={isloading} + onChange={(e: any) => { + setSelectedCollege(e); + formik.setFieldValue("college", e.value); + }} + /> +
+ {formik.touched.college && formik.errors.college && ( + + {formik.errors.college} + + )} +
+ ({ + value: department.id, + label: department.title + })) + ]} + name="department" + placeholder="Department" + value={selectedDepartment.title} + isDisabled={isloading} + filterOption={CustomFilter} + onChange={(e: any) => { + setSelectedDepartment(e); + formik.setFieldValue("department", e.value); + }} + /> +
+ {formik.touched.department && + formik.errors.department && ( + + {formik.errors.department} + + )} +
+ + {formik.touched.graduationYear && + formik.errors.graduationYear && ( + + {formik.errors.graduationYear} + + )} +
+ +
+ + {isloading ? "Please wait..." : "Submit"} + +
+
+
+ )} + + ); +} diff --git a/src/modules/Dashboard/modules/Settings/pages/Settings/SettingsHome.module.css b/src/modules/Dashboard/modules/Settings/pages/Settings/SettingsHome.module.css new file mode 100644 index 000000000..960ac4601 --- /dev/null +++ b/src/modules/Dashboard/modules/Settings/pages/Settings/SettingsHome.module.css @@ -0,0 +1,26 @@ +.container { + display: flex; + justify-content: space-around; + padding: 20px; +} + +.column { + display: flex; + flex-direction: column; + align-items: center; +} + +.button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +.button:hover { + background-color: #0056b3; +} diff --git a/src/modules/Dashboard/modules/Settings/pages/Settings/SettingsHome.tsx b/src/modules/Dashboard/modules/Settings/pages/Settings/SettingsHome.tsx new file mode 100644 index 000000000..ca0072cf2 --- /dev/null +++ b/src/modules/Dashboard/modules/Settings/pages/Settings/SettingsHome.tsx @@ -0,0 +1,29 @@ +import { useNavigate } from "react-router-dom"; +import styles from "./SettingsHome.module.css"; + +export default function SettingsHome(): JSX.Element { + const navigate = useNavigate(); + + return ( +
+
+ +
+ +
+ +
+
+ ); +} + From 8b66edc468f88b0d905dd1df2839b05d8d9e2a88 Mon Sep 17 00:00:00 2001 From: ansan johny Date: Sat, 12 Oct 2024 01:54:59 +0530 Subject: [PATCH 2/5] feat:Settings Page --- src/App.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/App.tsx b/src/App.tsx index 6828ce635..117c1d7e9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -44,6 +44,8 @@ import Refund from "./modules/Public/Donation/pages/Refund"; import DonationSuccess from "./modules/Public/Donation/pages/DonationSuccess"; import OpenGrad from "./modules/Dashboard/modules/OpenGrad"; import UserInterest from "./modules/Common/Authentication/pages/Onboarding/UserInterest/UserInterest"; +import OrganizationSetting from "./modules/Dashboard/modules/Settings/pages/Organization/Organization"; +import SettingsHome from "./modules/Dashboard/modules/Settings/pages/Settings/SettingsHome"; const Profile = lazy( () => import("./modules/Dashboard/modules/Profile/pages/Profile") @@ -731,6 +733,14 @@ function App() { path: "settings", element: , children: [ + { + path: "", + element: + }, + { + path: "organization", + element: + }, { path: "account", element: From 64a68354e502bd22f849fefcedb09b786764bd69 Mon Sep 17 00:00:00 2001 From: ansan johny Date: Sat, 12 Oct 2024 02:02:47 +0530 Subject: [PATCH 3/5] feat:submiticonsapcing --- .../Settings/pages/Organization/Organization.module.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.module.css b/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.module.css index df4cf3591..2d04c5326 100644 --- a/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.module.css +++ b/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.module.css @@ -40,6 +40,7 @@ } .submit { + margin-top: 20px; display: flex; justify-content: center; align-items: center; @@ -57,4 +58,4 @@ .errorsSpan { color: red; font-size: small; -} \ No newline at end of file +} From a26588482a700b14b3f8f8c90ff9fea311e3a04c Mon Sep 17 00:00:00 2001 From: ansan johny Date: Sat, 12 Oct 2024 03:36:51 +0530 Subject: [PATCH 4/5] feat:url fix --- .../Dashboard/components/SideNavBarBody.tsx | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/modules/Dashboard/components/SideNavBarBody.tsx b/src/modules/Dashboard/components/SideNavBarBody.tsx index 434b45f9b..6e2d60a43 100644 --- a/src/modules/Dashboard/components/SideNavBarBody.tsx +++ b/src/modules/Dashboard/components/SideNavBarBody.tsx @@ -54,16 +54,15 @@ const SideNavBarBody = ({ .filter( button => button.hasView && - ((!button.roles || + (!button.roles || button.roles?.some(role => userInfo?.roles?.includes(role) + ) || + button.dynamicType?.some(type => + userInfo?.dynamic_type?.includes( + type as ManagementTypes + ) )) - || - ( - button.dynamicType?.some(type => - userInfo?.dynamic_type?.includes(type as ManagementTypes) - )) - ) ) .map((button, i) => button.children ? ( @@ -87,12 +86,12 @@ const SideNavBarBody = ({ userInfo?.roles?.includes( role ) - ) - || - ( - button.dynamicType?.some(type => - userInfo?.dynamic_type?.includes(type as ManagementTypes) - ))) + ) || + button.dynamicType?.some(type => + userInfo?.dynamic_type?.includes( + type as ManagementTypes + ) + )) ) .map((button, i) => button.children ? ( @@ -110,7 +109,7 @@ const SideNavBarBody = ({ } display={ level2dropDownDisplay === - button.title + button.title ? "max-content" : "0" } @@ -124,12 +123,13 @@ const SideNavBarBody = ({ userInfo?.roles?.includes( role ) - ) - || - ( - button.dynamicType?.some(type => - userInfo?.dynamic_type?.includes(type as ManagementTypes) - ))) + ) || + button.dynamicType?.some( + type => + userInfo?.dynamic_type?.includes( + type as ManagementTypes + ) + )) ) .map((button, i) => ( } - onClick={() => navigate("/dashboard/settings/account")} + onClick={() => navigate("/dashboard/settings")} style={{ color: "#9297AA", backgroundColor: "#fff" From 65ef847ec974ab4030549b565dfd14b788429486 Mon Sep 17 00:00:00 2001 From: ansan johny Date: Sat, 12 Oct 2024 04:05:58 +0530 Subject: [PATCH 5/5] feat:settings bug fix --- .../pages/Organization/Organization.tsx | 66 ++++++++++--------- 1 file changed, 35 insertions(+), 31 deletions(-) diff --git a/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.tsx b/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.tsx index 79901008f..59a125bfe 100644 --- a/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.tsx +++ b/src/modules/Dashboard/modules/Settings/pages/Organization/Organization.tsx @@ -10,9 +10,15 @@ import { getRoles, submitUserData } from "../../../../../Common/Authentication/services/newOnboardingApis"; -import ReactSelect from "react-select"; +import ReactSelect, { SingleValue } from "react-select"; import { useLocation, useNavigate } from "react-router-dom"; +// Define the Option type for ReactSelect +type Option = { + value: string; + label: string; +}; + const inputObject = { college: "College Name", department: "Department", @@ -54,14 +60,8 @@ export default function CollegePage({}: {}) { const [departments, setDepartments] = useState([{ id: "", title: "" }]); const [roles, setRoles] = useState([{ id: "", title: "" }]); - const [selectedCollege, setSelectedCollege] = useState({ - id: "", - title: "" - }); - const [selectedDepartment, setSelectedDepartment] = useState({ - id: "", - title: "" - }); + const [selectedCollege, setSelectedCollege] = useState