Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into edit-job

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -1,28 +1,56 @@
 import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import ModalCom from "../Helpers/ModalCom";
 import Layout from "../Partials/Layout";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import ActiveJobMessage from "./ActiveJobMessage";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+import usersService from "../../services/UsersService";
+
+function ActiveJobs(props) {
+  const ApiCall = new usersService()
 
-function ActiveJobs() {
   let { userDetails } = useSelector((state) => state.userDetails);
   let navigate = useNavigate()
-  let {state} = useLocation()
 
-  let [details, setDetails] = useState({})
+  let [messageToSend, setMessageToSend] = useState('') // State to hold the value of message to be sent
 
-  // console.log(state, userDetails);
+  let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''})
 
-  useEffect(()=>{
+  // FUNCTION TO HANDLE MESSAGE CHANGE
-    if(!state){
+  const handleMessageChange = ({target:{value}}) => {
-      navigate('/my-active-jobs', {replace: true})
+    setMessageToSend(value)
+  }
+
+  // FUNCTION TO SEND TASK MESSAGE
+  const sendTaskMessage = () => {
+    let reqData={message: messageToSend, msg_type: 'TEXT', contract:props.details.contract}
+    if(!reqData.message){
+      setRequestStatus({loading: false, status: false, message: 'Message is empty'})
+      return setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: ''})
+      }, 5000)
     }
-    setDetails(state)
+    setRequestStatus({loading: true, status: false, message: ''})
-  },[])
+    ApiCall.sendTaskMessage(reqData).then((res)=>{
+      if(res.status != 200 || res.data.internal_return < 0){
+        setRequestStatus({loading: false, status: false, message: 'Message could not be sent, try again later'})
+        return
+      }
+      setRequestStatus({loading: false, status: true, message: 'Message Sent Successfully'})
+      props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+      setMessageToSend('') // SENDS MESSAGE TO SEND BACK TO EMPTY STRINGS
+    }).catch(error => {
+      setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
+    }).finally(()=>{
+      setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: ''})
+      }, 5000)
+    })
+  }
+
   return (
     <Layout>
-      {/* <div className="logout-modal-wrapper min-w-[850px] h-full lg:h-auto lg:rounded-2xl overflow-y-auto"> */}
 
         <div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
           <div className="w-full lg:w-1/2">
@@ -45,7 +73,7 @@ function ActiveJobs() {
                   </svg>
                 </button>
                 <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
-                  {details.title && details.title}
+                  {props.details?.title && props.details.title}
                 </h1>
               </div>
               {/* END of back btn and title */}
@@ -53,11 +81,11 @@ function ActiveJobs() {
               <div className="mt-2 w-full lg:flex lg:justify-between lg:items-center lg:space-x-2">
                 <div className="my-2 lg:my-0">
                   <p className="text-base text-slate-700 dark:text-black">
-                    {details.contract && details.contract}
+                    {props.details?.contract && props.details.contract}
                   </p>
                   <p className="text-base text-slate-700 dark:text-black">
                     <span className="font-semibold">Description: </span>
-                    {details.description && details.description}
+                    {props.details?.description && props.details.description}
                   </p>
                   <p className="text-base text-sky-blue">Delivery Detail</p>
                 </div>
@@ -67,15 +95,15 @@ function ActiveJobs() {
                   </p>
                   <p className="text-base text-slate-700 dark:text-black">
                     <span className="font-semibold">Due: </span>
-                    {details.delivery_date &&
+                    {props.details?.delivery_date &&
-                      details.delivery_date.split(" ")[0]}
+                      props.details.delivery_date.split(" ")[0]}
                   </p>
                   <p className="text-base text-slate-700 dark:text-black">
-                    {details.delivery_date &&
+                    {props.details?.delivery_date &&
-                      details.delivery_date.split(" ")[1]}
+                      props.details.delivery_date.split(" ")[1]}
                   </p>
                   <p className="text-base text-slate-700 dark:text-black">
-                    {details.timeline_days && details.timeline_days} day(s)
+                    {props.details?.timeline_days && props.details.timeline_days} day(s)
                   </p>
                 </div>
               </div>
@@ -88,14 +116,39 @@ function ActiveJobs() {
                   className="p-4 w-full text-base text-slate-600 border-y border-slate-300 outline-none"
                   rows="10"
                   style={{ resize: "none" }}
+                  name='message'
+                  onChange={handleMessageChange}
+                  value={messageToSend}
                 />
               </div>
 
+              {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+              <div className="w-full">
+                {/* error or success display */}
+                {requestStatus.message != "" &&
+                  (!requestStatus.status ? (
+                    <div
+                      className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                    >
+                      {requestStatus.message}
+                    </div>
+                  ) : (
+                    requestStatus.status && (
+                      <div
+                        className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                      >
+                        {requestStatus.message}
+                      </div>
+                    )
+                  ))}
+                </div>
+                {/* End of error or success display */}
+
               {/* Buttons Sections */}
               <div className="py-2 mb-8 sm:flex sm:justify-center sm:items-center">
-                <div className="w-full sm:w-3/4 mb-5 sm:mb-0">
+                <div className="w-full sm:w-2/4 mb-5 sm:mb-0">
                   <button
-                    onClick={()=> console.log('working')}
+                    onClick={()=>{console.log('working')}}
                     type="button"
                     className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
                   >
@@ -107,7 +160,7 @@ function ActiveJobs() {
                   </button>
                 </div>
 
-                <div className="w-full sm:w-1/4 flex justify-between items-center space-x-2">
+                <div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
                   <button
                       type="button"
                       className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
@@ -115,10 +168,15 @@ function ActiveJobs() {
                       <span className="text-white">Clear</span>
                   </button>
                   <button
+                    onClick={sendTaskMessage}
                       type="button"
                       className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
                   >
+                      {requestStatus.loading ? 
+                      <LoadingSpinner size='6' color='sky-blue' />
+                      :
                       <span className="text-white">Send</span>
+                      }
                   </button>
                 </div>
 
@@ -140,14 +198,17 @@ function ActiveJobs() {
             <div className="mt-5 bg-white p-4 rounded-md shadow-md">
               <div className="">
                 <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
-                <ActiveJobMessage />
+                {props.activeJobMesList.loading ?
+                <LoadingSpinner size='16' color='sky-blue' />
+                :
+                <ActiveJobMessage activeJobMesList={props.activeJobMesList} />
+                }
               </div>
             </div>
 
           </div>
         </div>
 
-      {/* </div> */}
     </Layout>
   );
 }

src/components/Pagination/PaginatedList.jsx

@@ -3,7 +3,7 @@ import { createRoutesFromChildren } from 'react-router-dom';
 
 const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
 
-  if(data.length){
+  if(data.length > process.env.REACT_APP_ITEM_PER_PAGE){
     return (
       <div className='p-3 flex justify-center items-center space-x-2 border-t-2'>
         {/* Render pagination buttons */}

src/services/UsersService.js

@@ -472,6 +472,32 @@ class usersService {
         return this.postAuxEnd("/jobmanagerupdatejob", postData);
     }
 
+    // FUNCTION TO GET ACTIVE JOB MESSAGE LIST
+    activeJobMesList(reqData) {
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            limit: 30,
+            action: 14011,
+            offset: 0,
+            ...reqData
+        };
+        return this.postAuxEnd("/activejobmsglist", postData);
+    }
+
+    // FUNCTION TO SEND ACTIVE JOB TASK MESSAGE
+    sendTaskMessage(reqData) {
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            action: 14010,
+            ...reqData
+        };
+        return this.postAuxEnd("/sendtaskmessage", postData);
+    }
+
     // END POINT TO DELETE  A JOB
     deleteJob(reqData) {
         var postData = {

src/views/ManageActiveJobs.jsx

@@ -1,9 +1,45 @@
-import React from 'react'
+import React, {useState, useEffect} from 'react'
 import ActiveJobs from '../components/MyActiveJobs/ActiveJobs'
+import { useLocation, useNavigate } from 'react-router-dom'
+import usersService from '../services/UsersService'
 
 function ManageActiveJobs() {
+
+  const ApiCall = new usersService()
+
+  let navigate = useNavigate()
+  let {state} = useLocation()
+
+  let [details, setDetails] = useState({}) // to hold state values
+
+  let [activeJobMesList, setActiveJobMesList] = useState({loading: true, error: false, data: []})
+
+  let [activeJobMesListReload, setActiveJobMesListReload] = useState(false)// state to determine when ACTIVE JOB MESSAGE LIST RELOADS/RE-RENDERS
+
+  const getActiveJobMesList = () => { // FUNCTION TO GET ACTIVE JOB MESSAGE LIST
+    setActiveJobMesList({loading: true, error: false, data: []})
+    let contract = {contract: state.contract}
+    ApiCall.activeJobMesList(contract).then((res)=>{
+      if(res.status != 200 || res.data.internal_return < 0){
+        setActiveJobMesList({loading: false, error: false, data: []})
+        return
+      }
+      setActiveJobMesList({loading: false, error: false, data: res.data.result_list})
+    }).catch((error)=>{
+      setActiveJobMesList({loading: false, error: true, data: []})
+    })
+  }
+
+  useEffect(()=>{
+    if(!state){
+      navigate('/my-active-jobs', {replace: true})
+    }
+    setDetails(state)
+    getActiveJobMesList()
+  },[activeJobMesListReload])
+
   return (
-    <ActiveJobs />
+    <ActiveJobs details={state} activeJobMesList={activeJobMesList} reloadActiveJobList={setActiveJobMesListReload} />
   )
 }