WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'Family-Tabs-Size-Fix' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2023-07-25 10:39:45 +00:00
committed by Gogs
parent b69e2ff53b 16afd4f90c
commit aef082ac60
7 changed files with 76 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/FamilyManageTabs.jsx
+13 -10
View File
@@ -10,10 +10,10 @@ import React, {
} from "react"; } from "react";
import { useReactToPrint } from "react-to-print"; import { useReactToPrint } from "react-to-print";
import profile from "../../assets/images/profile-info-profile.png"; import profile from "../../assets/images/profile-info-profile.png";
import localImgLoad from "../../lib/localImgLoad";
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import LoadingSpinner from "../Spinners/LoadingSpinner"; import LoadingSpinner from "../Spinners/LoadingSpinner";
import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout"; import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
import localImgLoad from "../../lib/localImgLoad";
// Lazy Imports for components // Lazy Imports for components
const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist")); const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
@@ -181,6 +181,8 @@ export default function FamilyManageTabs({
const selectedTabComponent = tabComponents[tab] || defaultTabComponent; const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
console.log(details)
useEffect(() => { useEffect(() => {
let __manageFamily = true; let __manageFamily = true;
if (__manageFamily) { if (__manageFamily) {
@@ -193,19 +195,19 @@ export default function FamilyManageTabs({
return ( return (
<div <div
className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${ className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
className || "" className || ""
}`} }`}
> >
<div className="relative w-full overflow-x-auto sm:rounded-lg"> <div className="relative w-full sm:rounded-lg overflow-x-auto">
<Suspense <Suspense
fallback={ fallback={
<div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center"> <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
<LoadingSpinner size="16" color="sky-blue" /> <LoadingSpinner size="16" color="sky-blue" />
</div> </div>
} }
> >
<div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[520px]"> <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[575px]">
<div className="border-r border-[#E3E4FE] dark:border-[#a7a9b533] p-6 h-full flex flex-col justify-between"> <div className="border-r border-[#E3E4FE] dark:border-[#a7a9b533] p-6 h-full flex flex-col justify-between">
<ProfileInfo <ProfileInfo
profileImg={profileImg} profileImg={profileImg}
@@ -239,10 +241,10 @@ export default function FamilyManageTabs({
</button> </button>
</div> </div>
</div> </div>
<div className="col-span-3 justify-self-end h-full w-full"> <div className="col-span-3 h-full w-full">
<div className="flex flex-col w-full"> <div className="flex flex-col w-full">
<div className="w-full pr-8 flex items-center gap-1"> <div className="w-full pr-8 flex items-center gap-1 border-b border-b-[#FAFAF]">
<ul className="flex gap-2 items-center border-b border-b-[#FAFAF] w-full"> <ul className="flex gap-2 items-center w-full">
{tabs.map(({ name, id }) => ( {tabs.map(({ name, id }) => (
<li <li
onClick={() => tabHandler(name)} onClick={() => tabHandler(name)}
@@ -265,8 +267,9 @@ export default function FamilyManageTabs({
Add task Add task
</button> </button>
</div> </div>
<div className="flex-[0.9] lg:min-h-[450px] h-full">
<div className="h-full p-4 border border-[#dbd9d9] relative overflow-y-auto"> <div className="flex-[0.9] h-full">
<div className="h-full relative overflow-y-auto">
<Suspense <Suspense
fallback={<LoadingSpinner size="16" color="sky-blue" />} fallback={<LoadingSpinner size="16" color="sky-blue" />}
> >
src/components/FamilyAcc/FamilyTable.jsx
+1 -1
View File
@@ -23,7 +23,7 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
return ( return (
<div <div
className={`update-table w-full h-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] ${ className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] ${
className || "" className || ""
}`} }`}
> >
src/components/FamilyAcc/Tabs/FamilyAccount.jsx
+2 -2
View File
@@ -4,7 +4,7 @@ import QRCode from "react-qr-code";
const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint }, ref) => { const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint }, ref) => {
return ( return (
<div <div
className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center" className="w-full lg:min-h-[538px] p-3 h-full flex flex-col items-center justify-center"
ref={myRef} ref={myRef}
> >
<div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow "> <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
@@ -53,4 +53,4 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint }, ref) => {
); );
}); });
export default FamilyAccount; export default FamilyAccount;
src/components/FamilyAcc/Tabs/FamilyPending.jsx
+8 -7
View File
@@ -1,9 +1,8 @@
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { PaginatedList, handlePagingFunc } from "../../Pagination";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
import dataImage2 from "../../../assets/images/data-table-user-2.png";
import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
import localImgLoad from "../../../lib/localImgLoad"; import localImgLoad from "../../../lib/localImgLoad";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
import { PaginatedList, handlePagingFunc } from "../../Pagination";
import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
export default function FamilyPending({ export default function FamilyPending({
familyData, familyData,
@@ -37,7 +36,7 @@ export default function FamilyPending({
return ( return (
<div <div
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${ className={`update-table w-full p-3 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] ${
className || "" className || ""
}`} }`}
> >
@@ -125,8 +124,10 @@ export default function FamilyPending({
); );
}) })
) : ( ) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"> <tr>
<td className="p-2">No Pending Task!</td> <td className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap text-center py-4 px-2">
No Pending Task!
</td>
</tr> </tr>
)} )}
</> </>
src/components/FamilyAcc/Tabs/FamilyProfile.jsx
+11 -3
View File
@@ -1,3 +1,11 @@
export default function FamilyProfile() { export default function FamilyProfile({ className }) {
return <>Profile</>; return (
} <div
className={`update-table w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
className || ""
}`}
>
<h1>Profile</h1>
</div>
);
}
src/components/FamilyAcc/Tabs/FamilyTasks.jsx
+40 -18
View File
@@ -1,20 +1,30 @@
import React, { useState } from "react"; import React, { useMemo, useState } from "react";
import dataImage2 from "../../../assets/images/data-table-user-2.png"; import { useLocation, useNavigate } from "react-router-dom";
import { useNavigate, useLocation } from "react-router-dom"; import localImgLoad from "../../../lib/localImgLoad";
import Icons from "../../Helpers/Icons";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
import { handlePagingFunc } from "../../Pagination/HandlePagination"; import { handlePagingFunc } from "../../Pagination/HandlePagination";
import PaginatedList from "../../Pagination/PaginatedList"; import PaginatedList from "../../Pagination/PaginatedList";
import LoadingSpinner from "../../Spinners/LoadingSpinner"; import LoadingSpinner from "../../Spinners/LoadingSpinner";
import Icons from "../../Helpers/Icons";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
import ModalCom from "../../Helpers/ModalCom";
import Detail from "../../jobPopout/popoutcomponent/Detail";
import localImgLoad from "../../../lib/localImgLoad";
export default function FamilyTasks({
export default function FamilyTasks({ familyData, className, loader, accountDetails }) { familyData,
className,
loader,
accountDetails,
}) {
let navigate = useNavigate(); let navigate = useNavigate();
let { pathname } = useLocation(); let { pathname } = useLocation();
// ...
const filteredFamilyData = useMemo(
() =>
familyData?.result_list?.filter(
(data) => data?.family_uid === accountDetails?.family_uid
),
[familyData, accountDetails]
);
const [currentPage, setCurrentPage] = useState(0); const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage); const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = const indexOfLastItem =
@@ -26,9 +36,10 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
const handlePagination = (e) => handlePagingFunc(e, setCurrentPage); const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
return ( return (
<div <div
className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${ className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] overflow-hidden rounded-2xl section-shadow p-3 ${
className || "" className || ""
}`} }`}
> >
@@ -45,8 +56,8 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
{ {
<> <>
{familyData && {familyData &&
familyData?.result_list && familyData?.result_list &&
familyData.result_list.length > 0 && familyData.result_list.length > 0 ? (
currentTask.map((value, index) => { currentTask.map((value, index) => {
// find due date // find due date
const dueDate = value?.delivery_date.split(" ")[0]; const dueDate = value?.delivery_date.split(" ")[0];
@@ -56,7 +67,9 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
value?.currency_code, value?.currency_code,
value?.currency value?.currency
); );
let image = value.banner ? value.banner : 'default.jpg' let image = value.banner
? value.banner
: "default.jpg";
return ( return (
<tr <tr
key={index} key={index}
@@ -66,7 +79,9 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
<div className="flex space-x-2 items-center w-full"> <div className="flex space-x-2 items-center w-full">
<div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center"> <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
<img <img
src={localImgLoad(`images/taskbanners/${image}`)} src={localImgLoad(
`images/taskbanners/${image}`
)}
alt="data" alt="data"
className="w-full h-full rounded-full" className="w-full h-full rounded-full"
/> />
@@ -109,8 +124,8 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
state: { state: {
...value, ...value,
pathname, pathname,
accountDetails accountDetails,
} },
}); });
}} }}
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white" className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
@@ -120,7 +135,14 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
</td> </td>
</tr> </tr>
); );
})} })
) : (
<tr>
<td colSpan="2" className="text-center py-4 font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
No Family Task
</td>
</tr>
)}
</> </>
} }
</tbody> </tbody>
src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
+1 -1
View File
@@ -48,7 +48,7 @@ const FamilyWaitlist = memo(
return ( return (
<div <div
className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${ className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] p-3 overflow-hidden rounded-2xl section-shadow ${
className || "" className || ""
}`} }`}
> >