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

Merge branch 'resources-page' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2023-07-06 10:21:44 +00:00
committed by Gogs
parent 1682a2221f abef3bec01
commit f6fc004a06
5 changed files with 220 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Cards/AvailableJobsCard.jsx
+142 -130
View File
@@ -9,7 +9,7 @@ export default function AvailableJobsCard({
className, className,
datas, datas,
hidden = false, hidden = false,
contentDisplay contentDisplay,
}) { }) {
//debugger; //debugger;
const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} }); const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
@@ -27,121 +27,136 @@ export default function AvailableJobsCard({
}, []); }, []);
return ( return (
<> <>
{contentDisplay == 'grid' ? {contentDisplay == "grid" ? (
<div <div
className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${ className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
className || "" className || ""
}`} }`}
> >
<div className="flex flex-col justify-between w-full h-full"> <div
<Link to="/shop-details" className="mb-2.5"> onClick={() => {
setMarketPopUp({ show: true, data: datas });
}}
className="flex flex-col justify-between w-full h-full"
>
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"> <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
{datas.title} {datas.title}
</h1> </h1>
</Link>
<div className="card-two-info flex justify-between items-center"> <div className="card-two-info flex justify-between items-center">
<div className="owned-by flex space-x-2 items-center"> <div className="owned-by flex space-x-2 items-center">
<div>
<p className="text-thin-light-gray text-sm leading-3">Added</p>
<p className="text-base text-dark-gray dark:text-white">
{datas.offer_added}
</p>
</div>
</div>
<div className="w-[1px] bg-light-purple dark:bg-dark-light-purple h-7"></div>
<div className="created-by flex space-x-2 items-center flex-row-reverse">
<div>
<p className="text-thin-light-gray text-sm leading-3 text-right">
Expires
</p>
<p className="text-base text-dark-gray dark:text-white text-right">
{datas.expire}
</p>
</div>
</div>
</div>
<div className="thumbnail-area w-full">
<div
className="w-full h-[236px] p-6 rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
style={{
backgroundImage: `url('${imageUrl}')`,
}}
>
<div className="flex justify-center">{datas.description}</div>
</div>
</div>
<div className="details-area">
<div className="product-two-options flex justify-between mb-5 relative">
{/* <div className="status">*/}
{/* {datas.isActive && (*/}
{/* <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
{/* Active*/}
{/*</span>*/}
{/* )}*/}
{/* </div>*/}
{/*<div className=" review flex space-x-2">*/}
{/* <button*/}
{/* onClick={favoriteHandler}*/}
{/* type="button"*/}
{/* className={`w-7 h-7 bg-white rounded-full flex justify-center items-center ${*/}
{/* addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
{/* }`}*/}
{/* >*/}
{/* <Icons name="star" />*/}
{/* </button>*/}
{/*</div>*/}
</div>
<div className="flex justify-between">
<div className="flex items-center space-x-2">
<div> <div>
<p className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white"> <p className="text-thin-light-gray text-sm leading-3">
{/* {thePrice} | {datas.timeline_days} day(s) */} Added
{thePrice}
</p> </p>
<p className="text-sm text-lighter-gray"> <p className="text-base text-dark-gray dark:text-white">
( {datas.offer_code}) | {datas.offer_added}
<span className="italic ml-1">
{datas.timeline_days} day(s)
</span>
</p> </p>
</div> </div>
</div> </div>
<div> <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple h-7"></div>
<button <div className="created-by flex space-x-2 items-center flex-row-reverse">
type="button" <div>
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide" <p className="text-thin-light-gray text-sm leading-3 text-right">
onClick={() => { Expires
setMarketPopUp({ show: true, data: datas }); </p>
}} <p className="text-base text-dark-gray dark:text-white text-right">
> {datas.expire}
View </p>
</button> </div>
</div>
</div>
<div className="thumbnail-area w-full">
<div
className="w-full h-[236px] p-6 rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
style={{
backgroundImage: `url('${imageUrl}')`,
}}
>
<div className="flex justify-center">{datas.description}</div>
</div>
</div>
<div className="details-area">
<div className="product-two-options flex justify-between mb-5 relative">
{/* <div className="status">*/}
{/* {datas.isActive && (*/}
{/* <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
{/* Active*/}
{/*</span>*/}
{/* )}*/}
{/* </div>*/}
{/*<div className=" review flex space-x-2">*/}
{/* <button*/}
{/* onClick={favoriteHandler}*/}
{/* type="button"*/}
{/* className={`w-7 h-7 bg-white rounded-full flex justify-center items-center ${*/}
{/* addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
{/* }`}*/}
{/* >*/}
{/* <Icons name="star" />*/}
{/* </button>*/}
{/*</div>*/}
</div>
<div className="flex justify-between">
<div className="flex items-center space-x-2">
<div>
<p className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white">
{/* {thePrice} | {datas.timeline_days} day(s) */}
{thePrice}
</p>
<p className="text-sm text-lighter-gray">
( {datas.offer_code}) |
<span className="italic ml-1">
{datas.timeline_days} day(s)
</span>
</p>
</div>
</div>
<div>
<button
type="button"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
onClick={() => {
setMarketPopUp({ show: true, data: datas });
}}
>
View
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> ) : (
: <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
<div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow"> <div className="flex gap-5 items-center w-full">
<div className="flex gap-5 items-center w-full"> <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]"> <img src={dataImage2} alt="data" className="w-full h-full" />
<img src={dataImage2} alt="data" className="w-full h-full" /> </div>
</div> <div className="flex flex-col flex-[0.9]">
<div className="flex flex-col flex-[0.9]"> <h1
<Link to="/shop-details" className=""> onClick={() => {
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"> setMarketPopUp({ show: true, data: datas });
}}
className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
>
{datas?.title} {datas?.title}
</h1> </h1>
</Link>
<div className="my-2"> <div
<p className="text-dark-gray dark:text-white">{datas?.description}</p> onClick={() => {
</div> setMarketPopUp({ show: true, data: datas });
}}
className="my-2"
>
<p className="text-dark-gray dark:text-white">
{datas?.description}
</p>
</div>
{/* <div className="card-two-info flex gap-2 items-center"> {/* <div className="card-two-info flex gap-2 items-center">
<div className="owned-by flex space-x-2 items-center"> <div className="owned-by flex space-x-2 items-center">
<div> <div>
<p className="text-thin-light-gray text-sm leading-3">Added</p> <p className="text-thin-light-gray text-sm leading-3">Added</p>
@@ -162,40 +177,37 @@ export default function AvailableJobsCard({
</div> </div>
</div> </div>
</div> */} </div> */}
<div className="block sm:flex flex-wrap gap-4"> <div className="block sm:flex flex-wrap gap-4">
<p className="text-sm text-thin-light-gray flex flext-start gap-1"> <p className="text-sm text-thin-light-gray flex flext-start gap-1">
Price: <span className="text-purple">{thePrice}</span> Price: <span className="text-purple">{thePrice}</span>
</p> </p>
<p className="text-sm text-thin-light-gray"> <p className="text-sm text-thin-light-gray">
Duration:{" "} Duration:{" "}
<span className="text-purple italic"> <span className="text-purple italic">
{" "} {" "}
{datas?.timeline_days} day(s) {datas?.timeline_days} day(s)
</span> </span>
</p> </p>
<p className="text-sm text-thin-light-gray"> <p className="text-sm text-thin-light-gray">
Code:{" "} Code:{" "}
<span className="text-purple"> <span className="text-purple"> {datas?.offer_code}</span>
{" "} </p>
{datas?.offer_code} </div>
</span>
</p>
</div> </div>
</div> </div>
<div className="">
<button
type="button"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
onClick={() => {
setMarketPopUp({ show: true, data: datas });
}}
>
View
</button>
</div>
</div> </div>
<div className=""> )}
<button
type="button"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
onClick={() => {
setMarketPopUp({ show: true, data: datas });
}}
>
View
</button>
</div>
</div>
}
{marketPopUp.show && ( {marketPopUp.show && (
<MarketPopUp <MarketPopUp
details={datas} details={datas}
src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx
+8 -1
View File
@@ -2,10 +2,12 @@ import { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import { handlePagingFunc, PaginatedList } from "../../Pagination"; import { handlePagingFunc, PaginatedList } from "../../Pagination";
import LoadingSpinner from "../../Spinners/LoadingSpinner"; import LoadingSpinner from "../../Spinners/LoadingSpinner";
import SuggestTask from "../../FamilyPopup/SuggestTask";
const FamilyWaitlist = ({ familyData, className, loader }) => { const FamilyWaitlist = ({ familyData, className, loader }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const { pathname } = useLocation(); const { pathname } = useLocation();
const [popUp, setPopUp] = useState({ show: false, data: {} });
const [currentPage, setCurrentPage] = useState(0); const [currentPage, setCurrentPage] = useState(0);
const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE); const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
@@ -18,6 +20,10 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
const handlePagination = (e) => handlePagingFunc(e, setCurrentPage); const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
const popUpHandler = () => {
setPopUp((prev) => !prev);
};
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-[450px] overflow-hidden rounded-2xl section-shadow ${
@@ -75,7 +81,7 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
</td> </td>
<td className="text-right py-4 px-2"> <td className="text-right py-4 px-2">
<button <button
type="button" onClick={() => setPopUp({ show: true, data: value })}
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"
> >
View View
@@ -100,6 +106,7 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
)} )}
</> </>
)} )}
{popUp.show && <SuggestTask details={popUp.data} onClose={() => {setPopUp({ show: false, data: {} })}} situation={popUp.show} />}
</div> </div>
); );
}; };
src/components/FamilyPopup/SuggestTask.jsx
+39 -23
View File
@@ -1,4 +1,5 @@
import React, { useMemo, useState } from "react"; import { useState } from "react";
import { useLocation } from "react-router-dom";
import ModalCom from "../Helpers/ModalCom"; import ModalCom from "../Helpers/ModalCom";
import { Form, Formik } from "formik"; import { Form, Formik } from "formik";
import InputCom from "../Helpers/Inputs/InputCom"; import InputCom from "../Helpers/Inputs/InputCom";
@@ -6,6 +7,7 @@ import usersService from "../../services/UsersService";
const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg"); const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
const SuggestTask = ({ details, onClose, situation }) => { const SuggestTask = ({ details, onClose, situation }) => {
const { pathname, state } = useLocation();
const [submitTask, setSubmitTask] = useState({ const [submitTask, setSubmitTask] = useState({
loading: false, loading: false,
msg: "", msg: "",
@@ -16,16 +18,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
const initialValues = { const initialValues = {
title: details?.title || "", title: details?.title || "",
description: details?.description || "", description: details?.description || "",
banner: details?.banner banner: details?.banner,
}; };
const apiCall = new usersService(); const apiCall = new usersService();
const handleSubmit = async (values) => { const handleSubmit = async (values) => {
if(!values.title && !values.description) return; if (!values.title && !values.description) return;
try { try {
setSubmitTask({ loading: true }); setSubmitTask({ loading: true });
const reqData = { ...values, }; const reqData = { ...values };
const res = await apiCall.sendFamilySuggestedTasks(reqData); const res = await apiCall.sendFamilySuggestedTasks(reqData);
if (res.internal_return < 0) { if (res.internal_return < 0) {
setSubmitTask({ loading: false, msg: res.status, state: "bad" }); setSubmitTask({ loading: false, msg: res.status, state: "bad" });
@@ -40,12 +42,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
throw new Error("Error Occurred", error); throw new Error("Error Occurred", error);
} }
}; };
// console.log("state >-->>", state);
return ( return (
<ModalCom action={onClose} situation={situation}> <ModalCom action={onClose} situation={situation}>
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto"> <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple"> <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide"> <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
Suggest to Parent {pathname === "/manage-family"
? `${state?.firstname}'s Suggested Task`
: "Suggest to Parent"}
</h1> </h1>
<button <button
type="button" type="button"
@@ -93,10 +99,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
{/* Title */} {/* Title */}
<div className="field w-full mb-[15px]"> <div className="field w-full mb-[15px]">
<InputCom <InputCom
fieldClass="px-6" fieldClass={
pathname === "/manage-family" ? "px-2" : "px-6"
}
label="Title" label="Title"
labelClass="tracking-wide" labelClass="tracking-wide"
inputBg="bg-slate-100" inputBg={
pathname === "/manage-family"
? "bg-white"
: "bg-slate-100"
}
inputClass="disabled:cursor-default" inputClass="disabled:cursor-default"
type="text" type="text"
name="title" name="title"
@@ -129,7 +141,11 @@ const SuggestTask = ({ details, onClose, situation }) => {
<textarea <textarea
id="description" id="description"
rows="5" rows="5"
className={`input-field px-3 pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`} className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] ${
pathname === "/manage-family"
? "px-2"
: "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]"
}`}
style={{ resize: "none" }} style={{ resize: "none" }}
name="description" name="description"
value={props.values.description} value={props.values.description}
@@ -148,21 +164,21 @@ const SuggestTask = ({ details, onClose, situation }) => {
> >
<span className="text-gradient"> Cancel</span> <span className="text-gradient"> Cancel</span>
</button> </button>
{pathname !== "/manage-family" && (
<button <button
type="submit" type="submit"
disabled={props.isSubmitting} disabled={props.isSubmitting}
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full" className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
> >
{submitTask.loading {submitTask.loading
? "Submitting Task" ? "Submitting Task"
: submitTask.state == "success" : submitTask.state == "success"
? "Task Submitted" ? "Task Submitted"
: submitTask.state == "bad" : submitTask.state == "bad"
? "An Error Occurred" ? "An Error Occurred"
: "Send to Parents"} : "Send to Parents"}
</button> </button>
{/* )} */} )}
</div> </div>
</div> </div>
</Form> </Form>
src/components/Helpers/Inputs/InputCom/index.jsx
+1 -1
View File
@@ -76,7 +76,7 @@ export default function InputCom({
)} )}
</div> </div>
<div <div
className={`input-wrapper border w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`} className={`input-wrapper w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-base ${inputClass ? inputClass : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] border"}`}
> >
<input <input
placeholder={placeholder} placeholder={placeholder}
src/components/MarketPlace/MainSection.jsx
+28 -15
View File
@@ -1,8 +1,8 @@
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import DataIteration from "../Helpers/DataIteration"; import DataIteration from "../Helpers/DataIteration";
import AvailableJobsCard from "../Cards/AvailableJobsCard"; import AvailableJobsCard from "../Cards/AvailableJobsCard";
import ListView from '../../assets/images/list-view.png' import ListView from "../../assets/images/list-view.png";
import GridView from '../../assets/images/grid-view.svg' import GridView from "../../assets/images/grid-view.svg";
import SelectBox from "../Helpers/SelectBox"; import SelectBox from "../Helpers/SelectBox";
export default function MainSection({ export default function MainSection({
@@ -17,7 +17,7 @@ export default function MainSection({
); );
const [tab, setTab] = useState(Object.keys(marketCategories)[0]); const [tab, setTab] = useState(Object.keys(marketCategories)[0]);
let [contentDisplay, setContentDisplay] = useState('grid') // STATE TO HOLD LIST VIEW STYLE let [contentDisplay, setContentDisplay] = useState("grid"); // STATE TO HOLD LIST VIEW STYLE
// Convert to array in order to map // Convert to array in order to map
const mappedArray = Object.entries(marketCategories).map(([key, value]) => { const mappedArray = Object.entries(marketCategories).map(([key, value]) => {
@@ -29,8 +29,8 @@ export default function MainSection({
setTab(value); setTab(value);
}; };
// Handles the category selection on mobile view // Handles the category selection on mobile view
const handleSetCategory = (value) => { const handleSetCategory = (value) => {
for (let i in marketCategories) { for (let i in marketCategories) {
if (marketCategories[i] == value) { if (marketCategories[i] == value) {
setTab(i); setTab(i);
@@ -57,7 +57,7 @@ export default function MainSection({
<div className="hidden lg:flex md:space-x-8 space-x-2"> <div className="hidden lg:flex md:space-x-8 space-x-2">
{mappedArray.map(({ key, value }) => ( {mappedArray.map(({ key, value }) => (
<span <span
key={key} key={key}
onClick={() => tabHandler(key)} onClick={() => tabHandler(key)}
className={`md:text-[18px] text-md text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${ className={`md:text-[18px] text-md text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
tab === key tab === key
@@ -76,30 +76,43 @@ export default function MainSection({
datas={Object.values(marketCategories)} datas={Object.values(marketCategories)}
className="Update-table-dropdown" className="Update-table-dropdown"
contentBodyClasses="w-auto min-w-max" contentBodyClasses="w-auto min-w-max"
position='left' position="left"
/> />
</div> </div>
</div> </div>
{/* contentDisplay toggler */} {/* contentDisplay toggler */}
<div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg"> <div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
<img <img
title={contentDisplay=='grid'? 'list view' : 'grid view'} title={contentDisplay == "grid" ? "list view" : "grid view"}
onClick={()=>setContentDisplay((prev)=>prev=='grid'? 'list' : 'grid')} onClick={() =>
src={contentDisplay=='grid'? ListView : GridView} setContentDisplay((prev) => (prev == "grid" ? "list" : "grid"))
className="w-full h-full cursor-pointer" alt="view" }
/> src={contentDisplay == "grid" ? ListView : GridView}
className="w-full h-full cursor-pointer"
alt="view"
/>
</div> </div>
{/* end of contentDisplay toggler */} {/* end of contentDisplay toggler */}
</div> </div>
<div className="filter-navigate-content w-full min-h-screen"> <div className="filter-navigate-content w-full min-h-screen">
<div className={contentDisplay == 'grid' ? 'grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]' : 'w-full'}> <div
className={
contentDisplay == "grid"
? "grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]"
: "w-full"
}
>
<DataIteration <DataIteration
datas={products} datas={products}
startLength={process.env.REACT_APP_ZERO_STATE} startLength={process.env.REACT_APP_ZERO_STATE}
endLength={products?.length} endLength={products?.length}
> >
{({ datas }) => ( {({ datas }) => (
<AvailableJobsCard contentDisplay={contentDisplay} key={datas.id} datas={datas} /> <AvailableJobsCard
contentDisplay={contentDisplay}
key={datas.id}
datas={datas}
/>
)} )}
</DataIteration> </DataIteration>
</div> </div>