From dbc821a80457a1390dd82abd2da0ccee61f7c9ea Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 24 Jan 2024 10:12:06 +0100 Subject: [PATCH] added relative list --- .../FamilySettings/Tabs/InviteRelative.jsx | 231 ++++++++++++++++++ .../FamilySettings/Tabs/RelativeTable.jsx | 72 ++++++ .../FamilySettings/Tabs/Relatives.jsx | 59 ++++- .../FamilyAcc/FamilySettings/index.jsx | 10 +- src/lib/apiConst.js | 3 + src/services/UsersService.js | 24 ++ 6 files changed, 394 insertions(+), 5 deletions(-) create mode 100644 src/components/FamilyAcc/FamilySettings/Tabs/InviteRelative.jsx create mode 100644 src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/InviteRelative.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/InviteRelative.jsx new file mode 100644 index 0000000..0691d73 --- /dev/null +++ b/src/components/FamilyAcc/FamilySettings/Tabs/InviteRelative.jsx @@ -0,0 +1,231 @@ +import React, { useState } from 'react' +import ModalCom from '../../../Helpers/ModalCom'; +import LoadingSpinner from '../../../Spinners/LoadingSpinner'; +import InputCom from '../../../Helpers/Inputs/InputCom/index'; +import { Formik, Form } from 'formik'; +import * as Yup from "yup"; +import usersService from '../../../../services/UsersService'; + +const validationSchema = Yup.object().shape({ + email: Yup.string() + .email("Wrong email format") + .matches( + /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/, + "Invalid email format" + ) + .min(3, "Minimum 3 characters") + .max(50, "Maximum 50 characters") + .required("Email is required"), + firstname: Yup.string() + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("Firstname is required"), + lastname: Yup.string() + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("Lastname is required"), + family_type: Yup.string() + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("Family Type is required"), + }); + + const initialValues = { + firstname: '', + lastname: '', + family_type: '', + email: '' + }; + + +export default function InviteRelative({action, situation, setReloadRelList}) { + + const api = new usersService() + + let [requestStatus, setRequestStatus] = useState({ + loading: false, + status: false, + message: "", + }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER + + const handleInvite = (values) => { + // delete values.firstname + // delete values.lasttname + setRequestStatus({loading: true, status: false, message: ""}) + api.inviteFamilyRelative(values).then(response => { + let {status, data} = response + if(data?.internal_return < 0){ + setRequestStatus({loading: false, status: false, message: "Unable to complete"}) + return setTimeout(()=>{ + setRequestStatus({ loading: false, status: false, message: ""}) + },3000) + } + setRequestStatus({loading: false, status: true, message: "Relative Added"}) + //RELOAD RELATIVE LSIT TABLE + setReloadRelList(prev => !prev) + setTimeout(()=>{ + action() + },3000) + }).catch(error => { + setRequestStatus({loading: false, status: false, message: "Something went wrong, try again!"}) + setTimeout(()=>{ + setRequestStatus({ loading: false, status: false, message: ""}) + },3000) + }) + } + + return ( + +
+
+

+ Invite Parent/Relative +

+ +
+
+
+ + {(props) => { + return ( +
+
+
+ {/* inputs starts here */} + {/* Email */} +
+ +
+ {/* first name and last name */} +
+
+ +
+
+ +
+
+ + {/* Type */} +
+
+ +
+
+
+ {requestStatus.loading ? ( + + ) : ( + + )} +
+
+
+
+
+
+ ); + }} + +
+ + {/* ERROR DISPLAY AND SUBMIT BUTTON */} + {requestStatus.message != "" && + (!requestStatus.status ? ( +
+ {requestStatus.message} +
+ ) : ( + requestStatus.status && ( +
+ {requestStatus.message} +
+ ) + ))} + {/* End of error or success display */} +
+
+ + ) +} diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx new file mode 100644 index 0000000..384d839 --- /dev/null +++ b/src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx @@ -0,0 +1,72 @@ +import React, { useState } from 'react' +import { handlePagingFunc } from '../../../Pagination/HandlePagination'; +import PaginatedList from '../../../Pagination/PaginatedList'; + +export default function RelativeTable({relativeList}) { + + // Handle Pagination + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + + const currentRelativeList = relativeList?.slice(indexOfFirstItem, indexOfLastItem); + + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; + + return ( +
+
+ + + <> + {relativeList && relativeList?.length > 0 ? ( + currentRelativeList.map((value, index) => ( + + + + + + )) + ) : ( + + + + )} + + +
+
+

+ {/* {value.firstname && value.firstname} {value.lastname && value.lastname} */} Firstname Lastname +

+ + {/* {value.email && value.email} */} email.gmail.com + +
+ 		+ family type + + {0} +
No Members Found
+ + {/* PAGINATION BUTTON */} + = + relativeList?.length + ? true + : false + } + data={relativeList} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} +
+
+ ); + }; diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx index 3eeff60..24cc536 100644 --- a/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx +++ b/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx @@ -1,8 +1,63 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' +import RelativeTable from './RelativeTable' +import InviteRelative from './InviteRelative' +import usersService from '../../../../services/UsersService' +import LoadingSpinner from '../../../Spinners/LoadingSpinner' const Relatives = () => { + + const api = new usersService() + + const [reloadRelList, setReloadRelList] = useState(false) + + const [invitePopout, setInvitePopout] = useState(false) + + const [relativeList, setRelativeList] = useState({loading: true, data:[]}) + + const showInviteMemberPopout = () => { + setInvitePopout(true) + } + + const getRelativeList = () => { + setRelativeList(prev => ({...prev, loading: true})) + api.getFamilyRelativeList().then(response => { + setRelativeList({loading:false, data:response.data.family_types}) + // console.log('RESPONSE',response.data) + }).catch(error => { + setRelativeList({loading:false, data:[]}) + }) + } + + useEffect(()=>{ + getRelativeList() + },[reloadRelList]) + return ( -
Relatives
+ <> +
+
+ +
+
+
+ {relativeList.loading ? + + : + + } +
+
+ + {/* INVITE RELATIVE POPOUT */} + {invitePopout && + setInvitePopout(false)} + situation={invitePopout} + setReloadRelList={setReloadRelList} + /> + } + {/* END OF INVITE RELATIVE POPOUT */} + ) } diff --git a/src/components/FamilyAcc/FamilySettings/index.jsx b/src/components/FamilyAcc/FamilySettings/index.jsx index c779e09..252f377 100644 --- a/src/components/FamilyAcc/FamilySettings/index.jsx +++ b/src/components/FamilyAcc/FamilySettings/index.jsx @@ -62,10 +62,14 @@ const FamilySettings = () => { Family Settings - Go Back + + + + + Family + - {/* Something Here */} - {/*
*/} +
diff --git a/src/lib/apiConst.js b/src/lib/apiConst.js index 94bf6dc..dade843 100644 --- a/src/lib/apiConst.js +++ b/src/lib/apiConst.js @@ -143,6 +143,9 @@ export const apiConst = { WRENCHBOARD_RESOURCE_MYFILES: 11307, WRENCHBOARD_MYFILES_LIST: 11309, + WRENCHBOARD_RELATIVE_LIST: 22032, + WRENCHBOARD_RELATIVE_INVITE: 22031, + WRENCHBOARD_USER_DELETEACC: 11990, WRENCHBOARD_ACCOUNT_END: 11999, WRENCHBOARD_JOB_POSTAGREE: 13002, diff --git a/src/services/UsersService.js b/src/services/UsersService.js index 3e6dbc6..bbc858c 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -1225,6 +1225,30 @@ class usersService { return this.postAuxEnd("/groupmemberadd", postData); } + // API FUNCTION TO GET FAMILY RELATIVE + getFamilyRelativeList() { + var postData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + offset: 1, + limit: 20, + action: apiConst.WRENCHBOARD_RELATIVE_LIST, + }; + return this.postAuxEnd("/familyrellist", postData); + } + + // API FUNCTION TO ADD/INVITE FAMILY RELATIVE + inviteFamilyRelative(reqData) { + var postData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + action: apiConst.WRENCHBOARD_RELATIVE_INVITE, + ...reqData + }; + return this.postAuxEnd("/familyrelinvite", postData); + } /* - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username) - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)