From b48cb4821387ce44518c48fcf4d8479d3200dd1d Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Fri, 12 Apr 2024 17:41:58 +0100
Subject: [PATCH] added file upload component

---
 .../FamilyPopout/AssignMediaTask.jsx          |  4 +-
 .../FamilyPopout/AssignPrevNewTask.jsx        | 16 +++---
 src/components/attachmentCom/AttachFile.jsx   | 51 +++++++++++++++++++
 src/components/jobPopout/EditJobPopoutNew.jsx |  7 +--
 4 files changed, 64 insertions(+), 14 deletions(-)
 create mode 100644 src/components/attachmentCom/AttachFile.jsx

diff --git a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
index 1741542..7c8d174 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
@@ -88,10 +88,10 @@ export default function AssignMediaTask({
                         <Form>
                             <>
                                 <div
-                                className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid md:grid-cols-2`}
+                                className={`job-action-modal-body w-full h-[500px] overflow-y-auto md:grid md:grid-cols-2`}
                                 >
                                 <div className="p-4 pt-0">
-                                    <div className="p-4 w-full min-h-[410px] max-h-[410px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                                    <div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                                         {commonMedia?.data?.length ? (
                                         commonMedia?.data?.map((item, index) => (
                                             <div
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
index 2b8dcca..0de3e7c 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
@@ -3,6 +3,7 @@ import LoadingSpinner from '../../Spinners/LoadingSpinner'
 import { NewTasks } from './forms'
 import { PriceFormatter } from '../../Helpers/PriceFormatter'
 import { useSelector } from 'react-redux';
+import AttachFile from '../../attachmentCom/AttachFile';
 
 export default function AssignPrevNewTask({
     jobList,
@@ -32,7 +33,7 @@ export default function AssignPrevNewTask({
             ) : (
               <>
                 <div
-                  className={`job-action-modal-body w-full min-h-[450px] max-h-[450px] overflow-y-auto md:grid ${
+                  className={`job-action-modal-body w-full h-[500px] overflow-y-auto md:grid ${
                     taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
                   }`}
                 >
@@ -63,7 +64,7 @@ export default function AssignPrevNewTask({
                     </div>
                     {/* Task Type === select */}
                     {taskType == "select" && (
-                      <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                      <div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
                         {jobList?.data?.length ? (
                           jobList?.data?.map((item, index) => (
                             <div
@@ -162,13 +163,10 @@ export default function AssignPrevNewTask({
                               </div>
                             </div>
                             
-                            {/* Dummy, no value found for created! thus commented*/}
-                            {/* <div className="my-3 sm:flex items-center">
-                              <Detail
-                                label="Created"
-                                value={`Dummy, no value found for created!`}
-                              />
-                            </div> */}
+                            {/* ATTACHMENT SECTION*/}
+                            <div className="w-full max-h-32">
+                                <AttachFile data={activeTask.data} />
+                            </div>
 
                             <div className="my-3">
                               <label className="w-full job-label">
diff --git a/src/components/attachmentCom/AttachFile.jsx b/src/components/attachmentCom/AttachFile.jsx
new file mode 100644
index 0000000..ed294f3
--- /dev/null
+++ b/src/components/attachmentCom/AttachFile.jsx
@@ -0,0 +1,51 @@
+import React, { useRef, useState } from 'react'
+
+export default function AttachFile({data}) {
+
+    const [file, setFile] = useState('')
+
+    const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message:''})
+
+    const inputFile = useRef()
+    console.log('data', data.job_uid)
+
+    let inputs = {
+        file: file,
+        job_uid: data?.job_uid,
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+      };
+
+    const upload = () => {
+        setRequestStatus({loading: true, status:false, message:''})
+        if(!file){
+            setRequestStatus({loading: false, status:false, message:'Please select a file'})
+            setTimeout(()=>{
+                setRequestStatus({loading: false, status:false, message:''})
+            }, 3000)
+            return 
+        }
+        const formData = new FormData()
+        for (let input in inputs) {
+            formData.append(input, inputs[input]);
+        }
+
+        console.log('data', formData, inputs)
+        inputFile.current.value = []
+        inputFile.current.value = null
+        setFile('')
+    }
+
+    return (
+        <div className='p-4 w-full h-full flex flex-col justify-center items-center bg-yellow-500 rounded-md'>
+            <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
+                <input type="file" ref={inputFile} className='file:rounded-full job-label p-1' onChange={(e) => setFile(e.target.files[0])}/>
+                <div className='w-full flex gap-2 items-center'>
+                    <button type="button" className='custom-btn btn-gradient text-white font-medium' onClick={upload}>Upload</button>
+                    {requestStatus.message && <p className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</p>}
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/jobPopout/EditJobPopoutNew.jsx b/src/components/jobPopout/EditJobPopoutNew.jsx
index 0cad41a..b87ed40 100644
--- a/src/components/jobPopout/EditJobPopoutNew.jsx
+++ b/src/components/jobPopout/EditJobPopoutNew.jsx
@@ -9,6 +9,7 @@ import InputCom from "../Helpers/Inputs/InputCom";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { apiConst } from "../../lib/apiConst";
+import AttachFile from "../attachmentCom/AttachFile";
 
 const validationSchema = Yup.object().shape({
   country: Yup.string()
@@ -301,7 +302,7 @@ const EditJobPopoutNew = ({
                                 <Field
                                     component="select"
                                     name="timeline_days"
-                                    className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                                    className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray dark:text-white w-full h-[42px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
                                     props.errors.timeline_days &&
                                     props.touched.timeline_days
                                         ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
@@ -419,7 +420,7 @@ const EditJobPopoutNew = ({
                                 </div>
                                 </div>
                             </div>
-                            <div className="w-full flex items-center gap-2 mb-2">
+                            <div className="w-full flex items-center justify-center gap-2 mb-2">
                                 {/* FOR TASK IMAGE */}
                                 <div className="w-1/3 relative flex flex-col max-h-[130px] min-h-[130px]">
                                 <label
@@ -465,7 +466,7 @@ const EditJobPopoutNew = ({
                                 {/* END OF TASK IMAGE */}
 
                                 <div className="field w-2/3">
-                                {/* PUT SPACE HERE */}
+                                    <AttachFile data={details} />
                                 </div>
 
                             </div>