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

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

Browse Source
This commit is contained in:
Ebube
2023-05-19 11:29:01 +01:00
parent 688f10e4a4 9bbf5db544
commit e109b2f8e5
5 changed files with 195 additions and 1147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyActiveJobs/ActiveJobMessage.jsx
+44 -1119
View File
File diff suppressed because it is too large Load Diff
src/components/MyActiveJobs/ActiveJobs.jsx
+86 -25
View File
@@ -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(()=>{
if(!state){
navigate('/my-active-jobs', {replace: true})
// FUNCTION TO HANDLE MESSAGE CHANGE
const handleMessageChange = ({target:{value}}) => {
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 &&
details.delivery_date.split(" ")[0]}
{props.details?.delivery_date &&
props.details.delivery_date.split(" ")[0]}
</p>
<p className="text-base text-slate-700 dark:text-black">
{details.delivery_date &&
details.delivery_date.split(" ")[1]}
{props.details?.delivery_date &&
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
+1 -1
View File
@@ -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
+26
View File
@@ -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
+38 -2
View File
@@ -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} />
)
}