Changed my pending jobs to offers and changed its routes
This commit was merged in pull request #560.
This commit is contained in:
@@ -0,0 +1,201 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import transaction1 from "../../assets/images/recent-transation-1.png";
|
||||
import transaction2 from "../../assets/images/recent-transation-2.png";
|
||||
import transaction3 from "../../assets/images/recent-transation-3.png";
|
||||
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
||||
import PaginatedList from "../Pagination/PaginatedList";
|
||||
import usersService from "../../services/UsersService";
|
||||
import DeleteIcon from '../../assets/images/icon-delete.svg'
|
||||
import DeleteTaskModal from "./DeleteTaskModal";
|
||||
import SendReminderModal from "./SendReminderModal";
|
||||
|
||||
export default function ParentWaitingTable() {
|
||||
// const transationFilterData = [
|
||||
// {
|
||||
// id: 1,
|
||||
// name: "all",
|
||||
// uniqueId: Math.random(),
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: "send",
|
||||
// uniqueId: Math.random(),
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// name: "recent",
|
||||
// uniqueId: Math.random(),
|
||||
// },
|
||||
// ];
|
||||
// const [filterActive, setValue] = useState(transationFilterData[0].id);
|
||||
// const filterHander = (value) => {
|
||||
// setValue(value);
|
||||
// };
|
||||
|
||||
const apiCall = new usersService()
|
||||
|
||||
let [reloadList, setReloadList] = useState(false) // STATE TO DETERMINE WHEN TO RELOAD THE FAMILY SUGGEST LIST
|
||||
|
||||
let [deleteTaskPopout, setDeleteTaskPopout] = useState({show:false, data:{}}) // HOLDS THE INFO OF DELETE TASK POPOUT
|
||||
let [sendReminderPopout, setSendReminderPopout] = useState({show:false, data:{}}) // HOLDS THE INFO OF SEND REMINDER POPOUT
|
||||
|
||||
let [familySuggestList, setFamilySuggestList] = useState({loading: true, data:[]})
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const indexOfFirstItem = Number(currentPage);
|
||||
const indexOfLastItem =
|
||||
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
const currentList = familySuggestList?.data?.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
const handlePagination = (e) => {
|
||||
handlePagingFunc(e, setCurrentPage);
|
||||
};
|
||||
|
||||
useEffect(()=>{
|
||||
apiCall.getFamilySuggestList().then(res => {
|
||||
setFamilySuggestList({loading: false, data:res.data?.result_list})
|
||||
}).catch(err => {
|
||||
setFamilySuggestList({loading: false, data:[]})
|
||||
console.log('ERROR==>Familysuggestlist', err)
|
||||
})
|
||||
},[reloadList])
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl bg-white dark:bg-dark-white flex flex-col justify-between">
|
||||
{/* heading */}
|
||||
{/* <div className="heading sm:flex justify-between items-center">
|
||||
<div>
|
||||
<ul className="flex space-x-5 items-center">
|
||||
{transationFilterData.map((value) => (
|
||||
<li
|
||||
onClick={() => filterHander(value.id)}
|
||||
key={value.uniqueId}
|
||||
className={`text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase ${
|
||||
filterActive === value.id ? "border-purple text-purple" : ""
|
||||
}`}
|
||||
>
|
||||
{value.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* content */}
|
||||
<div className="content min-h-[400px]">
|
||||
{familySuggestList.loading ?
|
||||
<div className="h-full flex justify-center items-center">
|
||||
<LoadingSpinner size='16' color='sky-blue' />
|
||||
</div>
|
||||
:
|
||||
familySuggestList && familySuggestList.length != 0?
|
||||
<ul>
|
||||
{currentList.map((item)=>{
|
||||
// Image
|
||||
let Image = require(`../../assets/images/family/${
|
||||
item.banner || "default.jpg"
|
||||
}`);
|
||||
return (
|
||||
<li key={item.uid} className="content-item py-2 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple">
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={Image} alt="" className="w-full h-full" />
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
|
||||
{item.title}
|
||||
</p>
|
||||
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-[120px] flex justify-start items-end px-2 gap-1">
|
||||
<button
|
||||
type="button"
|
||||
className="p-1 border-2 border-red-400 rounded-md"
|
||||
onClick={() => {
|
||||
setDeleteTaskPopout({
|
||||
show: true,
|
||||
data: { ...item },
|
||||
});
|
||||
}}
|
||||
>
|
||||
<img className="min-w-[21px] h-[21px]" src={DeleteIcon} alt='delete-icon' />
|
||||
</button>
|
||||
|
||||
<div className="">
|
||||
<p className="text-sm font-bold text-dark-gray dark:text-white">
|
||||
{new Date(item.added).toLocaleString().split(',')[0]}
|
||||
|
||||
</p>
|
||||
<p
|
||||
className="text-xs py-1.5 w-[50px] tracking-wide rounded-full bg-gold text-white flex justify-center items-center cursor-pointer"
|
||||
onClick={() => {
|
||||
setSendReminderPopout({
|
||||
show: true,
|
||||
data: { ...item },
|
||||
});
|
||||
}}
|
||||
>{item.status_text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
:
|
||||
<p className="w-full flex items-center justify-center text-xl text-dark-gray dark:text-white">No List Found!</p>
|
||||
}
|
||||
|
||||
{/* Delete Task Popout */}
|
||||
{deleteTaskPopout.show && (
|
||||
<DeleteTaskModal
|
||||
details={deleteTaskPopout.data}
|
||||
onClose={() => {
|
||||
setDeleteTaskPopout({ show: false, data: {} });
|
||||
}}
|
||||
situation={deleteTaskPopout.show}
|
||||
setReloadList={setReloadList}
|
||||
/>
|
||||
)}
|
||||
{/* END of Delete Task Popout */}
|
||||
|
||||
{/* Send Reminder Popout */}
|
||||
{sendReminderPopout.show && (
|
||||
<SendReminderModal
|
||||
details={sendReminderPopout.data}
|
||||
onClose={() => {
|
||||
setSendReminderPopout({ show: false, data: {} });
|
||||
}}
|
||||
situation={sendReminderPopout.show}
|
||||
setReloadList={setReloadList}
|
||||
/>
|
||||
)}
|
||||
{/* END of Send Reminder Popout */}
|
||||
</div>
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
familySuggestList?.data?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={familySuggestList?.data}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user