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

Almost complete

Browse Source
This commit is contained in:
Ebube
2023-05-09 14:59:25 +01:00
parent 6dea851021
commit e49c7eb779
4 changed files with 106 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/FamilyTable.jsx
+54 -45
View File
@@ -1,8 +1,9 @@
import React, { useState } from "react"; import React, { useState } from "react";
import dataImage1 from "../../assets/images/data-table-user-1.png"; import dataImage1 from "../../assets/images/data-table-user-1.png";
export default function FamilyTable({ className }) { export default function FamilyTable({ className, familyList }) {
const filterCategories = ["All Categories", "Explore", "Featured"]; const filterCategories = ["All Categories", "Explore", "Featured"];
console.log(familyList)
const [selectedCategory, setCategory] = useState(filterCategories[0]); const [selectedCategory, setCategory] = useState(filterCategories[0]);
return ( return (
<div <div
@@ -13,56 +14,64 @@ export default function FamilyTable({ className }) {
<div className="relative w-full overflow-x-auto sm:rounded-lg"> <div className="relative w-full overflow-x-auto sm:rounded-lg">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400"> <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody> <tbody>
<tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29] default-border-b dark:border-[#5356fb29] ottom "> <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29] default-border-bottom ">
<td className="py-4">Name</td> <td className="py-4">Name</td>
<td className="py-4 text-center">Last Login</td> <td className="py-4 text-center">Last Login</td>
<td className="py-4 text-center">No of Tasks</td> <td className="py-4 text-center">No of Tasks</td>
<td className="py-4 text-right">Status</td> <td className="py-4 text-right">Status</td>
</tr> </tr>
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"> {familyList?.length > 0 &&
<td className=" py-4"> familyList?.map(({firstname, lastname, age}, idx) => (
<div className="flex space-x-2 items-center"> <tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50" key={idx}>
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center"> <td className=" py-4">
<img <div className="flex space-x-2 items-center">
src={dataImage1} <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
alt="data" <img
className="w-full h-full" src={dataImage1}
/> alt="data"
</div> className="w-full h-full"
<div className="flex flex-col"> />
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"> </div>
Firstname Lastname (age) <div className="flex flex-col">
</h1> <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<span className="text-sm text-thin-light-gray"> {`${firstname} ${lastname} (${age})`}
Added <span className="text-purple">10-10-2029</span> </h1>
</span> <span className="text-sm text-thin-light-gray">
</div> Added <span className="text-purple">10-10-2029</span>
</div> </span>
</td> </div>
<td className="text-center py-4 px-2"> </div>
<div className="flex space-x-1 items-center justify-center"> </td>
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap"> <td className="text-center py-4 px-2">
10-10-2019 <div className="flex space-x-1 items-center justify-center">
</span> <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
</div> 10-10-2019
</td> </span>
<td className="text-center py-4 px-2"> </div>
<div className="flex space-x-1 items-center justify-center"> </td>
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap"> <td className="text-center py-4 px-2">
100 <div className="flex space-x-1 items-center justify-center">
</span> <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
</div> 100
</td> </span>
</div>
</td>
<td className="text-right py-4 px-2"> <td className="text-right py-4 px-2">
<button <button
type="button" type="button"
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"
> >
Manage Manage
</button> </button>
</td> </td>
</tr> </tr>
))}
{familyList?.length <= 0 && (
<div className="min-h-[400px] flex items-center justify-center text-black text-2xl text-center">
Nothing to see here
</div>
)}
</tbody> </tbody>
</table> </table>
</div> </div>
src/components/FamilyAcc/index.jsx
+45 -8
View File
@@ -1,4 +1,4 @@
import React, { useId, useMemo, useState } from "react"; import React, { useCallback, useEffect, useId, useMemo, useState } from "react";
import CustomPopUp from "../Helpers/CustomPopUp"; import CustomPopUp from "../Helpers/CustomPopUp";
import InputCom from "../Helpers/Inputs/InputCom"; import InputCom from "../Helpers/Inputs/InputCom";
import Layout from "../Partials/Layout"; import Layout from "../Partials/Layout";
@@ -8,6 +8,8 @@ import SiteService from "../../services/SiteService";
export default function FamilyAcc() { export default function FamilyAcc() {
const [selectTab, setValue] = useState("today"); const [selectTab, setValue] = useState("today");
const [selectedAge, setSelectedAge] = useState(undefined); const [selectedAge, setSelectedAge] = useState(undefined);
const [familyList, setFamilyList] = useState([]);
const [isOpen, setIsOpen] = useState(false);
const [loader, setLoader] = useState(false); const [loader, setLoader] = useState(false);
const [msgErr, setMsgErr] = useState(""); const [msgErr, setMsgErr] = useState("");
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
@@ -41,12 +43,13 @@ export default function FamilyAcc() {
setFormData({ ...formData, [name]: value }); setFormData({ ...formData, [name]: value });
}; };
// Add member
const addMember = async () => { const addMember = async () => {
let { first_name, last_name } = formData; const { first_name, last_name } = formData;
setLoader(true); setLoader(true);
try { try {
if (first_name !== "" && last_name !== "") { if (first_name !== "" && last_name !== "") {
const reqData = { let reqData = {
member_id: localStorage.getItem("member_id"), member_id: localStorage.getItem("member_id"),
uid: localStorage.getItem("uid"), uid: localStorage.getItem("uid"),
session_id: localStorage.getItem("session_token"), session_id: localStorage.getItem("session_token"),
@@ -54,11 +57,15 @@ export default function FamilyAcc() {
lastname: last_name, lastname: last_name,
age: selectedAge, age: selectedAge,
}; };
const res = await apiCall.addFamily(reqData); console.log(reqData);
let res = await apiCall.addFamily(reqData);
const { data } = res; const { data } = res;
if (data.internal_return > 0 && data.status == "OK") { if (data?.internal_return > 0 && data?.status == "OK") {
setLoader(false); setLoader(false);
console.log(data); setIsOpen(false);
} else {
setLoader(false);
setMsgErr("Sorry, something went wrong");
} }
} else { } else {
setLoader(false); setLoader(false);
@@ -67,6 +74,7 @@ export default function FamilyAcc() {
} catch (error) { } catch (error) {
setLoader(false); setLoader(false);
setMsgErr("An error occurred"); setMsgErr("An error occurred");
throw new Error(error);
} finally { } finally {
setTimeout(() => { setTimeout(() => {
setMsgErr(null); setMsgErr(null);
@@ -74,6 +82,33 @@ export default function FamilyAcc() {
} }
}; };
useEffect(() => {
// member listing
const memberList = async () => {
try {
let reqData = {
member_id: localStorage.getItem("member_id"),
uid: localStorage.getItem("uid"),
sessionid: localStorage.getItem("session_token"),
limit: 20,
offset: 1,
action: 22010,
};
let res = await apiCall.familyListings(reqData);
const { data } = res;
if (data?.internal_return >= 0 && data?.status == "OK") {
let { result_list } = data;
setFamilyList(result_list);
} else return;
} catch (error) {
throw new Error(error);
}
};
memberList();
}, []);
console.log(familyList);
return ( return (
<Layout> <Layout>
{/*<CommonHead />*/} {/*<CommonHead />*/}
@@ -93,6 +128,8 @@ export default function FamilyAcc() {
btn_class="text-purple" btn_class="text-purple"
key={id} key={id}
title="Add members" title="Add members"
isOpen={isOpen}
setIsOpen={setIsOpen}
> >
<FamilyForm <FamilyForm
value={formData} value={formData}
@@ -114,7 +151,7 @@ export default function FamilyAcc() {
></div> ></div>
</div> </div>
</div> </div>
<FamilyTable /> <FamilyTable familyList={familyList} />
</div> </div>
</div> </div>
</Layout> </Layout>
@@ -187,7 +224,7 @@ const FamilyForm = ({
</div> </div>
</div> </div>
{msgErr && ( {msgErr && (
<div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]"> <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-xs font-light leading-[19.5px]">
{msgErr} {msgErr}
</div> </div>
)} )}
src/components/Helpers/CustomPopUp/index.jsx
+3 -4
View File
@@ -1,7 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
const CustomPopUp = ({ name, btn_class, title, children }) => { const CustomPopUp = ({ name, btn_class, title, children, isOpen, setIsOpen }) => {
const [isOpen, setIsOpen] = useState(false);
const handleOpen = () => { const handleOpen = () => {
setIsOpen(true); setIsOpen(true);
@@ -12,7 +11,7 @@ const CustomPopUp = ({ name, btn_class, title, children }) => {
}; };
return ( return (
<> <div>
<button onClick={handleOpen} className={btn_class}> <button onClick={handleOpen} className={btn_class}>
{name} {name}
</button> </button>
@@ -30,7 +29,7 @@ const CustomPopUp = ({ name, btn_class, title, children }) => {
</div> </div>
</div> </div>
)} )}
</> </div>
); );
}; };
src/services/SiteService.js
+4
View File
@@ -32,6 +32,10 @@ class SiteService {
return this.postAuxEnd('/familyadd', reqData) return this.postAuxEnd('/familyadd', reqData)
} }
familyListings(reqData) {
return this.postAuxEnd('/familylist', reqData)
}
//---------------------------------------- ----- //---------------------------------------- -----
//---------------------------------------- ----- //---------------------------------------- -----
// Unified call below // Unified call below