.
This commit is contained in:
Ebube
@@ -1,26 +1,26 @@
|
||||
import React, { useState } from 'react'
|
||||
import Detail from './popoutcomponent/Detail'
|
||||
import ModalCom from '../Helpers/ModalCom'
|
||||
import InputCom from '../Helpers/Inputs/InputCom/index'
|
||||
import React, { useState } from "react";
|
||||
import Detail from "./popoutcomponent/Detail";
|
||||
import ModalCom from "../Helpers/ModalCom";
|
||||
import InputCom from "../Helpers/Inputs/InputCom/index";
|
||||
|
||||
function JobListPopout({ details, onClose, situation }) {
|
||||
let [inputs, setInputs] = useState({
|
||||
family: "",
|
||||
public: "",
|
||||
individual: "",
|
||||
group: "",
|
||||
});
|
||||
|
||||
function JobListPopout({details, onClose, situation}) {
|
||||
let [inputs, setInputs] = useState({
|
||||
public: '',
|
||||
individual: '',
|
||||
group: '',
|
||||
})
|
||||
|
||||
const handleInputChange = ({target:{name, value}}) => {
|
||||
setInputs(prev => ({...prev, [name]:value}))
|
||||
}
|
||||
const handleInputChange = ({ target: { name, value } }) => {
|
||||
setInputs((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
return (
|
||||
<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">
|
||||
<ModalCom action={onClose} situation={situation} className="edit-popup">
|
||||
<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">
|
||||
<h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{details.title}
|
||||
{details.title}
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
@@ -48,130 +48,112 @@ function JobListPopout({details, onClose, situation}) {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className='md:flex bg-white rounded-lg shadow-lg'>
|
||||
<div className='p-4 w-full md:w-2/4 md:border-r-2'>
|
||||
<div className="md:flex bg-white rounded-lg shadow-lg">
|
||||
<div className="p-4 w-full md:w-2/4 md:border-r-2">
|
||||
{/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
|
||||
|
||||
|
||||
{/* INPUT SECTION */}
|
||||
<div className='my-3 md:flex'>
|
||||
<Detail
|
||||
label='Description'
|
||||
value={details.description}
|
||||
/>
|
||||
<div className="my-3 md:flex">
|
||||
<Detail label="Description" value={details.description} />
|
||||
</div>
|
||||
|
||||
<div className='my-3 md:flex'>
|
||||
<Detail
|
||||
label='Price'
|
||||
value={`${details.price*0.01} Naira`}
|
||||
/>
|
||||
|
||||
<div className="my-3 md:flex">
|
||||
<Detail label="Price" value={`${details.price * 0.01} Naira`} />
|
||||
</div>
|
||||
|
||||
<div className='my-3 md:flex'>
|
||||
<Detail
|
||||
label='Timeline'
|
||||
value={`${details.timeline_days} day(s)`}
|
||||
|
||||
<div className="my-3 md:flex">
|
||||
<Detail
|
||||
label="Timeline"
|
||||
value={`${details.timeline_days} day(s)`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='my-3 md:flex'>
|
||||
<Detail
|
||||
label='Created'
|
||||
value={`Dummy, no value found for created!`}
|
||||
<div className="my-3 md:flex">
|
||||
<Detail
|
||||
label="Created"
|
||||
value={`Dummy, no value found for created!`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='my-3'>
|
||||
<label className='w-full text-slate-900 tracking-wide font-semibold'>Delivery Detail</label>
|
||||
<textarea
|
||||
className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
|
||||
rows='5'
|
||||
name='details'
|
||||
style={{resize: 'none'}}
|
||||
value={details.job_detail}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
<div className="my-3">
|
||||
<label className="w-full text-slate-900 tracking-wide font-semibold">
|
||||
Delivery Detail
|
||||
</label>
|
||||
<textarea
|
||||
className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
|
||||
rows="5"
|
||||
name="details"
|
||||
style={{ resize: "none" }}
|
||||
value={details.job_detail}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* ACTION SECTION */}
|
||||
<div className='p-4 w-full md:w-2/4 h-full'>
|
||||
<div className="p-4 w-full md:w-2/4 h-full">
|
||||
{/* Assign to Family */}
|
||||
<JobFieldInput
|
||||
label="Assign to family"
|
||||
inputName="family"
|
||||
inputHandler={handleInputChange}
|
||||
value={inputs.family}
|
||||
btnText="Assign to family"
|
||||
/>
|
||||
|
||||
{/* Offer this job to public input */}
|
||||
<div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Offer this job to public"
|
||||
labelClass='tracking-wide'
|
||||
type="text"
|
||||
name="public"
|
||||
placeholder=""
|
||||
value={inputs.public}
|
||||
inputHandler={handleInputChange}
|
||||
/>
|
||||
|
||||
{/* btn */}
|
||||
<div className='my-1 flex justify-end items-center'>
|
||||
<button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Show Task to Public</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Offer this job to public input */}
|
||||
<JobFieldInput
|
||||
label="Offer this job to public"
|
||||
inputName="public"
|
||||
inputHandler={handleInputChange}
|
||||
value={inputs.public}
|
||||
btnText="Show Task to Public"
|
||||
/>
|
||||
|
||||
{/* Offer this job to individual input */}
|
||||
<div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Offer this job to individual"
|
||||
labelClass='tracking-wide'
|
||||
type="text"
|
||||
name="individual"
|
||||
placeholder=""
|
||||
value={inputs.individual}
|
||||
inputHandler={handleInputChange}
|
||||
/>
|
||||
|
||||
{/* btn */}
|
||||
<div className='my-1 flex justify-end items-center'>
|
||||
<button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Send Offer to Individual</button>
|
||||
</div>
|
||||
</div>
|
||||
<JobFieldInput
|
||||
label="Offer this job to individual"
|
||||
inputName="individual"
|
||||
inputHandler={handleInputChange}
|
||||
value={inputs.individual}
|
||||
btnText="Send Offer to Individual"
|
||||
/>
|
||||
|
||||
{/* Offer this job to your group input */}
|
||||
<div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Offer this job to your Group"
|
||||
labelClass='tracking-wide'
|
||||
type="text"
|
||||
name="group"
|
||||
placeholder=""
|
||||
value={inputs.group}
|
||||
inputHandler={handleInputChange}
|
||||
/>
|
||||
|
||||
{/* btn */}
|
||||
<div className='my-1 flex justify-end items-center'>
|
||||
<button className='px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md'>Send Order to Group</button>
|
||||
</div>
|
||||
</div>
|
||||
<JobFieldInput
|
||||
label="Offer this job to your Group"
|
||||
inputName="group"
|
||||
inputHandler={handleInputChange}
|
||||
value={inputs.group}
|
||||
btnText="Send Order to Group"
|
||||
/>
|
||||
</div>
|
||||
{/* END OF ACTION SECTION */}
|
||||
</div>
|
||||
|
||||
{/* close button */}
|
||||
{/* <div className="p-6 flex justify-center">
|
||||
<button
|
||||
onClick={onClose}
|
||||
type="button"
|
||||
className=" border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
|
||||
>
|
||||
<span className="text-gradient">Close</span>
|
||||
</button>
|
||||
</div> */}
|
||||
{/* end of close button */}
|
||||
</div>
|
||||
</ModalCom>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</ModalCom>
|
||||
);
|
||||
}
|
||||
|
||||
export default JobListPopout
|
||||
export default JobListPopout;
|
||||
|
||||
const JobFieldInput = ({ value, inputHandler, inputName, label, btnText }) => (
|
||||
<div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label={label}
|
||||
labelClass="tracking-wide"
|
||||
type="text"
|
||||
name={inputName}
|
||||
placeholder=""
|
||||
value={value}
|
||||
inputHandler={inputHandler}
|
||||
/>
|
||||
{/* btn */}
|
||||
<div className="my-1 flex justify-end items-center">
|
||||
<button className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md">
|
||||
{btnText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
Reference in New Issue
Block a user