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 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"];
console.log(familyList)
const [selectedCategory, setCategory] = useState(filterCategories[0]);
return (
<div
@@ -13,56 +14,64 @@ export default function FamilyTable({ className }) {
<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">
<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 text-center">Last Login</td>
<td className="py-4 text-center">No of Tasks</td>
<td className="py-4 text-right">Status</td>
</tr>
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage1}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
Firstname Lastname (age)
</h1>
<span className="text-sm text-thin-light-gray">
Added <span className="text-purple">10-10-2029</span>
</span>
</div>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
10-10-2019
</span>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
100
</span>
</div>
</td>
{familyList?.length > 0 &&
familyList?.map(({firstname, lastname, age}, idx) => (
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50" key={idx}>
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage1}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
{`${firstname} ${lastname} (${age})`}
</h1>
<span className="text-sm text-thin-light-gray">
Added <span className="text-purple">10-10-2029</span>
</span>
</div>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
10-10-2019
</span>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
100
</span>
</div>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Manage
</button>
</td>
</tr>
<td className="text-right py-4 px-2">
<button
type="button"
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Manage
</button>
</td>
</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>
</table>
</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 InputCom from "../Helpers/Inputs/InputCom";
import Layout from "../Partials/Layout";
@@ -8,6 +8,8 @@ import SiteService from "../../services/SiteService";
export default function FamilyAcc() {
const [selectTab, setValue] = useState("today");
const [selectedAge, setSelectedAge] = useState(undefined);
const [familyList, setFamilyList] = useState([]);
const [isOpen, setIsOpen] = useState(false);
const [loader, setLoader] = useState(false);
const [msgErr, setMsgErr] = useState("");
const [formData, setFormData] = useState({
@@ -41,12 +43,13 @@ export default function FamilyAcc() {
setFormData({ ...formData, [name]: value });
};
// Add member
const addMember = async () => {
let { first_name, last_name } = formData;
const { first_name, last_name } = formData;
setLoader(true);
try {
if (first_name !== "" && last_name !== "") {
const reqData = {
let reqData = {
member_id: localStorage.getItem("member_id"),
uid: localStorage.getItem("uid"),
session_id: localStorage.getItem("session_token"),
@@ -54,11 +57,15 @@ export default function FamilyAcc() {
lastname: last_name,
age: selectedAge,
};
const res = await apiCall.addFamily(reqData);
console.log(reqData);
let res = await apiCall.addFamily(reqData);
const { data } = res;
if (data.internal_return > 0 && data.status == "OK") {
if (data?.internal_return > 0 && data?.status == "OK") {
setLoader(false);
console.log(data);
setIsOpen(false);
} else {
setLoader(false);
setMsgErr("Sorry, something went wrong");
}
} else {
setLoader(false);
@@ -67,6 +74,7 @@ export default function FamilyAcc() {
} catch (error) {
setLoader(false);
setMsgErr("An error occurred");
throw new Error(error);
} finally {
setTimeout(() => {
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 (
<Layout>
{/*<CommonHead />*/}
@@ -93,6 +128,8 @@ export default function FamilyAcc() {
btn_class="text-purple"
key={id}
title="Add members"
isOpen={isOpen}
setIsOpen={setIsOpen}
>
<FamilyForm
value={formData}
@@ -114,7 +151,7 @@ export default function FamilyAcc() {
></div>
</div>
</div>
<FamilyTable />
<FamilyTable familyList={familyList} />
</div>
</div>
</Layout>
@@ -187,7 +224,7 @@ const FamilyForm = ({
</div>
</div>
{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}
</div>
)}
src/components/Helpers/CustomPopUp/index.jsx
+3 -4
View File
@@ -1,7 +1,6 @@
import React, { useState } from "react";
const CustomPopUp = ({ name, btn_class, title, children }) => {
const [isOpen, setIsOpen] = useState(false);
const CustomPopUp = ({ name, btn_class, title, children, isOpen, setIsOpen }) => {
const handleOpen = () => {
setIsOpen(true);
@@ -12,7 +11,7 @@ const CustomPopUp = ({ name, btn_class, title, children }) => {
};
return (
<>
<div>
<button onClick={handleOpen} className={btn_class}>
{name}
</button>
@@ -30,7 +29,7 @@ const CustomPopUp = ({ name, btn_class, title, children }) => {
</div>
</div>
)}
</>
</div>
);
};
src/services/SiteService.js
+4
View File
@@ -32,6 +32,10 @@ class SiteService {
return this.postAuxEnd('/familyadd', reqData)
}
familyListings(reqData) {
return this.postAuxEnd('/familylist', reqData)
}
//---------------------------------------- -----
//---------------------------------------- -----
// Unified call below