From 0f770474aff514668f24f9c9e56f99827bb888ef Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 20 Jul 2024 10:13:12 +0100 Subject: [PATCH] relative popout added --- .../FamilySettings/Tabs/RelativePopout.jsx | 122 ++++++++++++++++++ .../FamilySettings/Tabs/RelativeTable.jsx | 56 +++++++- .../FamilySettings/Tabs/Relatives.jsx | 4 +- .../FamilyAcc/FamilySettings/index.jsx | 12 +- 4 files changed, 186 insertions(+), 8 deletions(-) create mode 100644 src/components/FamilyAcc/FamilySettings/Tabs/RelativePopout.jsx diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/RelativePopout.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/RelativePopout.jsx new file mode 100644 index 0000000..bdb5864 --- /dev/null +++ b/src/components/FamilyAcc/FamilySettings/Tabs/RelativePopout.jsx @@ -0,0 +1,122 @@ +import React, { Suspense, useEffect, useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { useLocation, useOutletContext } from "react-router-dom"; +import usersService from "../../../../services/UsersService"; +import ModalCom from '../../../Helpers/ModalCom'; +import LoadingSpinner from "../../../Spinners/LoadingSpinner"; +import localImgLoad from '../../../../lib/localImgLoad' + +// import { tableReload } from "../../../store/TableReloads"; +// import { PriceFormatter } from "../../Helpers/PriceFormatter"; + + +const RelativePopout = ({ + relativeSelected, + action, + situation, + familyList +}) => { + + const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE + + const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active + + const apiCall = new usersService(); + + let { pathname, state } = useLocation(); + + const dispatch = useDispatch(); + + useEffect(()=>{ + },[]) + + return ( + <> + +
+
+

+ {relativeSelected.firstname && relativeSelected.firstname} {relativeSelected.lastname && relativeSelected.lastname} +

+ +
+
+
+
+ {familyList.loader ? + + : (!familyList.loader && familyList?.familyList?.result_list?.length > 0) ? + familyList?.familyList?.result_list?.map(item => { + const image = localStorage.getItem("session_token") ? `${familyList?.imageServer}${localStorage.getItem("session_token")}/family/${item?.family_uid}` : ""; + return ( +
+
+ +
+
+
+
+ {`Avatar`} +
+
+

+ {`${item?.firstname} ${item?.lastname}`} +

+
+
+
+
+ ) + }) + : +
No records found!
+ } +
+
+ {/* dummy to be filled latter*/} +
+
+
+
+ +
+
+ + + ); +}; + +export default RelativePopout; diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx index 4706be5..105b97a 100644 --- a/src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx +++ b/src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx @@ -2,7 +2,9 @@ import React, { useState } from 'react' import { handlePagingFunc } from '../../../Pagination/HandlePagination'; import PaginatedList from '../../../Pagination/PaginatedList'; -export default function RelativeTable({relativeList}) { +import RelativePopout from './RelativePopout'; + +export default function RelativeTable({relativeList, familyList}) { // Handle Pagination const [currentPage, setCurrentPage] = useState(0); @@ -10,21 +12,36 @@ export default function RelativeTable({relativeList}) { const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); const currentRelativeList = relativeList?.slice(indexOfFirstItem, indexOfLastItem); + + const [relativePopout, setRelativePopout] = useState({show:false, data:null}) + + const closePopout = () => { + setRelativePopout({show:false, data:null}) + } const handlePagination = (e) => { handlePagingFunc(e, setCurrentPage); }; return ( + <>
+ + + + + + + + <> {relativeList && relativeList?.length > 0 ? ( currentRelativeList.map((value, index) => ( - - - + )) ) : ( @@ -69,5 +107,15 @@ export default function RelativeTable({relativeList}) { {/* END OF PAGINATION BUTTON */} + + {relativePopout.show && + + } + ); }; diff --git a/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx b/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx index a662d61..cb8da88 100644 --- a/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx +++ b/src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx @@ -4,7 +4,7 @@ import InviteRelative from './InviteRelative' import usersService from '../../../../services/UsersService' import LoadingSpinner from '../../../Spinners/LoadingSpinner' -const Relatives = () => { +const Relatives = ({familyList}) => { const api = new usersService() @@ -47,7 +47,7 @@ const Relatives = () => { {relativeList.loading ? : - + } diff --git a/src/components/FamilyAcc/FamilySettings/index.jsx b/src/components/FamilyAcc/FamilySettings/index.jsx index 40d3bac..17ccd0d 100644 --- a/src/components/FamilyAcc/FamilySettings/index.jsx +++ b/src/components/FamilyAcc/FamilySettings/index.jsx @@ -1,12 +1,20 @@ import React, { useEffect, useState } from "react"; -import { Link, useLocation } from "react-router-dom"; +import { Link, useLocation, useOutletContext } from "react-router-dom"; import CustomBreadcrumb from "../../Breadcrumb/CustomBreadcrumb"; import Icons from "../../Helpers/Icons"; import Layout from "../../Partials/Layout"; import { AddFamily, FamilyBanner, Relatives } from "./Tabs"; const FamilySettings = () => { + + const {loader, setLoader, familyList, setListReload} = useOutletContext() // CONTEXT VALUES FROM OUTLET TO CHILD + let { state } = useLocation(); + + const imageServer = state?.imageServer + + let relativeFamilyList = {loader, familyList, imageServer} + const tabs = [ { id: 1, @@ -44,7 +52,7 @@ const FamilySettings = () => { const tabComponents = { add_family: , - relatives: , + relatives: , family_banner: , }; -- 2.34.1
Kids
+

{value.firstname && value.firstname} {value.lastname && value.lastname} @@ -34,13 +51,34 @@ export default function RelativeTable({relativeList}) {

+ {/* Family Type */} {value.family_type && value.family_type.toUpperCase()} + {value.status && value.status} + +