target-detail
error property 0
unknown
jsx
4 years ago
22 kB
8
Indexable
import React, { Fragment, useEffect, useState } from "react";
import { Link, useHistory, useParams } from "react-router-dom";
import { SectionFlex, Section } from "components/Element/Section";
import { MarginTop } from "components/Element/Margin";
import IconTaskDetail from "images/Task/icontaskdetail.png";
import ellipse from "images/group/ellipse.svg";
import Progress from "images/Task/progress.png";
import DateImage from "images/Task/date.png";
import Profile from "images/group/groupprofile.png";
import Button from "components/Element/Button";
import { MarginBottom } from "components/Element/Margin";
import axios from "axios";
import Cookie from "universal-cookie";
import { useDispatch, useSelector } from "react-redux";
let cookie = new Cookie();
export default function TargetDetails() {
const dispatch = useDispatch();
const renderReducer = useSelector(state => state.render);
const [target, setTarget] = useState({});
const [satuan, setSatuan] = useState({});
const [tasks, setTasks] = useState([]);
const [sub_target, setSubTarget] = useState([
// { id_target: 1, title: 'testing target', sub_target: [{ id_target: 3, title: 'testing target', sub_target: [{ id_target: 3, title: 'testing target', sub_target: [{ id_target: 3, title: 'testing target' }] }] }] }
]);
const [isEdit, setIsEdit] = useState(false);
const [editTitle, setEditTitle] = useState(false);
const [editDesc, setEditDesc] = useState(false);
const [titleChg, setTitleChg] = useState('');
const [descChg, setDescChg] = useState('');
const [editTargetPlan, setEditTargetPlan] = useState(false);
const [editBudgetPlan, setEditBudgetPlan] = useState(false);
const [targetPlanChg, setTargetPlanChg] = useState('');
const [budgetPlanChg, setBudgetPlanChg] = useState('');
const [editDate, setEditDate] = useState(false);
const [startDateChg, setStartDateChg] = useState('');
const [endDateChg, setEndDateChg] = useState('');
const history = useHistory();
const { id } = useParams();
const getTarget = async () => {
const url = `/targets/${id}`;
try {
const response = await axios.get(url, { headers: { 'Authorization': `Bearer ${cookie.get('token')}` } });
setTitleChg(response.data.data.title)
setDescChg(response.data.data.desc)
setTargetPlanChg(response.data.data.target_plan);
setBudgetPlanChg(response.data.data.budget_plan);
setStartDateChg(response.data.data.start_date.slice(0, 10));
setEndDateChg(response.data.data.end_date.slice(0, 10));
setTarget(response.data.data);
setSatuan(response.data.data.satuan);
if (response.data.data.sub_target.length > 0) {
setSubTarget(response.data.data.sub_target);
}
console.log(`response`, response);
if (response.data.data.sub_task.length > 0) {
setTasks(response.data.data.sub_task);
}
} catch (e) {
if (e.response?.data) {
console.log(`error get target: `, e.response.data);
} else {
console.error('error get target: Something went wrong');
}
}
}
function addCommas(nStr) {
nStr += '';
let x = nStr.split('.');
let x1 = x[0];
let x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
const getDate = (start_date, end_date) => {
let start = new Date(start_date);
let end = new Date(end_date);
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
return `${start.getDate()} ${months[start.getMonth()]} - ${end.getDate()} ${months[end.getMonth()]}`;
}
const updateTarget = async () => {
if (descChg === target.desc && titleChg === target.title && targetPlanChg === target.target_plan && budgetPlanChg === target.budget_plan && startDateChg === target.start_date.slice(0, 10) && endDateChg === target.end_date.slice(0, 10)) {
setIsEdit(false);
setEditTitle(false);
setEditDesc(false);
setEditTargetPlan(false);
setEditBudgetPlan(false);
setStartDateChg(false);
setEndDateChg(false);
return;
}
const url = `/targets/${id}`;
let body = {}
// if (target.title !== titleChg && titleChg) body = { ...body, title: titleChg }
// if (target.desc !== descChg && descChg) body = { ...body, desc: descChg }
// if (target.target_plan !== targetPlanChg && targetPlanChg) body = { ...body, target_plan: targetPlanChg }
// if (target.budget_plan !== budgetPlanChg && budgetPlanChg) body = { ...body, budget_plan: budgetPlanChg }
// if (target.start_date.slice(0, 10) !== startDateChg && startDateChg) body = { ...body, start_date: startDateChg }
// if (target.end_date.slice(0, 10) !== endDateChg && endDateChg) body = { ...body, end_date: endDateChg }
body = { ...body, group_id: id, title: titleChg, desc: descChg, target_plan: targetPlanChg, budget_plan: budgetPlanChg, start_date: startDateChg, end_date: endDateChg };
let header = { 'Authorization': `Bearer ${cookie.get('token')}` }
console.log(`body`, body);
try {
const response = await axios.put(url, body, { headers: header });
setIsEdit(false);
setEditDesc(false);
dispatch({ type: "ALERT", isOpen: true, message: response.data.message, error: false });
dispatch({ type: "RENDER" });
} catch (e) {
if (e.response?.data) {
console.log(`error update task`, e.response.data)
dispatch({ type: "ALERT", isOpen: true, message: e.response.data.message, error: true });
} else {
console.log(`error update task`, e)
dispatch({ type: "ALERT", isOpen: true, message: "error updating group... try again later", error: true });
}
}
}
useEffect(() => {
getTarget();
}, [renderReducer.render]);
return (
<React.Fragment>
<h1 className="mb-4 text-gray90 font-semibold mt-5">Target Details</h1>
<MarginTop />
<SectionFlex className="h-full">
<Section className="w-8/12" >
<Section className="w-full h-full ">
<Section className="lg:h-1/7 xl:h-2/10 relative ">
<p className="text-xs flex items-center ">
<span className="flex items-center">
<img
className="w-3 h-2 mr-2"
src={IconTaskDetail}
alt={IconTaskDetail}
/>{" "}
Important
</span>
</p>
<MarginTop sm={3} lg={4} />
<Section className="flex w-7/12 items-center relative">
{!editTitle ? (
<h2 className="text-2xl font-bold text-gray90">
{target.title}
</h2>
) : (
<textarea onChange={e => setTitleChg(e.target.value)} name="name" id="name" style={{ resize: "none" }} className="text-lg lg:text-2xl font-poppins font-bold text-gray90 overflow-hidden" defaultValue={titleChg}></textarea>
)}
{isEdit && !editTitle && (
<button className="absolute top-0 right-0 focus:outline-none" onClick={() => setEditTitle(true)}>
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 bg-white rounded-md text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
)}
</Section>
</Section>
<MarginTop sm={5} lg={1} />
<Section className=" lg:h-6/7 xl:h-8/10 w-5/6 scroll mr-0 lg:mr-4 mt-8 relative">
<h4 className="font-bold text-gray90">Details :</h4>
<MarginTop sm={2} lg={5} />
<Section id="scroll" className="pr-1 h-full pb-24 lg:pr-10 overflow-auto text-xs relative">
{!editDesc ? (
<p className="whitespace-pre-wrap">{target.desc}</p>
) : (
<textarea onChange={e => setDescChg(e.target.value)} name="desc" id="desc" className="w-full mt-4 text-sm bg-transparent" defaultValue={descChg}></textarea>
)}
{isEdit && !editDesc && (
<button className="absolute top-0 right-0 focus:outline-none" onClick={() => setEditDesc(true)}>
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
)}
</Section>
<div className="absolute w-full bottom-1">
{isEdit ? (
<button onClick={updateTarget} className="w-full rounded-lg h-11 bg-oldBlueBtn font-medium text-white">Save</button>
) : (
<button onClick={() => setIsEdit(true)} className="w-full rounded-lg h-11 bg-oldBlueBtn font-medium text-white">Edit</button>
)}
</div>
</Section>
</Section>
</Section>
<Section className="bg-white lg:bg-grayforbg w-full lg:w-4/12 relative rounded-xl py-5 px-10">
<img className="absolute w-40 h-40 rounded-full -left-36 top-2 shadow-xl" src={Profile} />
<Section>
{console.log(`target`, target)}
<ul>
<li className="flex items-center justify-between">
<div className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4.5 w-4.5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
{!editTargetPlan ? (
<p className="text-xs ml-3">{target.target_plan} {satuan.simbol} - Target Plan</p>
) : (
<input type="number" onChange={e => setTargetPlanChg(e.target.value)} className="spin-number-none bg-transparent text-xs ml-3" autoFocus defaultValue={targetPlanChg} />
)}
</div>
{isEdit && !editTargetPlan && (
<button className="focus:outline-none" onClick={() => setEditTargetPlan(true)}>
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 rounded-md text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
)}
</li>
<MarginTop sm={2} lg={2} />
<li className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
</svg>
<p className="text-xs ml-2.5">{target.target_realization} - Target Realization</p>
</li>
<MarginTop sm={2} lg={2} />
<li className="flex items-center justify-between">
<div className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
{!editBudgetPlan ? (
<p className="text-xs ml-2.5">{addCommas(target.budget_plan)} - Budget Plan</p>
) : (
<input type="number" onChange={e => setBudgetPlanChg(e.target.value)} className="spin-number-none bg-transparent text-xs ml-2.5" autoFocus defaultValue={budgetPlanChg} />
)}
</div>
{isEdit && !editBudgetPlan && (
<button className="focus:outline-none" onClick={() => setEditBudgetPlan(true)}>
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 rounded-md text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
)}
</li>
<MarginTop sm={2} lg={2} />
<li className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4.5 w-4.5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
<p className="text-xs ml-2.5">{addCommas(target.budget_realization)} - Budget Realization</p>
</li>
<MarginTop sm={2} lg={2} />
<li className="flex items-center justify-between">
<div className="flex items-center">
<img className="w-4 h-4" src={DateImage} alt={DateImage} />
{!editDate ? (
<p className="text-xs ml-3">{target ? getDate(target.start_date, target.end_date) : ''}</p>
) : (
<div className="flex ml-3 flex-col bg-transparent">
<input type="date" className="text-xs bg-transparent" defaultValue={startDateChg} onChange={(e) => setStartDateChg(e.target.value)} />
<span className="text-xs">to</span>
<input className="text-xs bg-transparent" type="date" defaultValue={endDateChg} onChange={(e) => setEndDateChg(e.target.value)} />
</div>
)}
</div>
{isEdit && !editDate && (
<button className="focus:outline-none" onClick={() => setEditDate(true)}>
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 rounded-md text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
)}
</li>
<MarginTop sm={2} lg={2} />
<li className="flex items-center">
<img className="w-4 h-4" src={Progress} alt={Progress} />
<p className="text-xs ml-3">{target.status}</p>
</li>
</ul>
{/* / */}
<MarginBottom />
</Section>
<Section className="lg:h-2/10">
<h3 className="text-gray90 text-center text-2xl mt-5 lg:mt-7 font-medium">
{sub_target.length > 0 ? 'Target Tree' : 'Task List'}
</h3>
<MarginTop sm={5} lg={5} />
{sub_target.length > 0 ? (
sub_target.map((trget) =>
trget.sub_target && (
<div className="w-full relative overflow-x-auto overflow-y-auto text-sm horizontal-scroll">
<Link to={`/target/details/${trget.id_target}`} className="flex">
<div className="w-6 h-6 overflow-hidden">
<img src={ellipse} className="w-full" alt="." />
</div>
<span>{trget.title} {trget.id_target === id && <span className="text-gray-400">(here)</span>}</span>
</Link>
<div className="w-full ml-2.5">
{trget.sub_target.map((sub_trget) => (
<Fragment>
<div className="w-full flex child-group-wrapper">
<div className="flex-col">
<div className="child-group"></div>
<div className="child-group" style={{ borderLeft: '0px !important' }} id="left-none"></div>
</div>
<div className="w-6 h-6 overflow-hidden">
<img src={ellipse} className="w-full" alt="." />
</div>
<Link to={`/target/details/${sub_trget.id_target}`}>{sub_trget.title} {sub_trget.id_target === id && <span className="text-gray-400">(here)</span>}</Link>
</div>
<div className="w-full ml-12">
{trget.sub_target.map((sub_trget) =>
<div className="w-full flex child-group-wrapper">
<div className="flex-col">
<div className="child-group"></div>
<div className="child-group"></div>
</div>
<div className="w-6 h-6 overflow-hidden">
<img src={ellipse} className="w-full" alt="." />
</div>
<Link to={`/target/details/${sub_trget.id_target}`}>{sub_trget.title} {sub_trget.id_target === id && <span className="text-gray-400">(here)</span>}</Link>
</div>
)}
</div>
</Fragment>
)
)}
</div>
</div>
)
)
) : (
<ul id="task-list" className="h-full overflow-y-auto z-10">
{tasks.length > 0 ? tasks.map((task, idx) =>
<li key={idx} className={`${idx !== 0 ? 'mt-3' : ''}`}>
<Link to={`/task/details/${task.id_task}`} className="flex items-start cursor-pointer">
<input className="mt-1 task-check checked:text-red-500 checked:border-transparent" type="checkbox" checked={task.status === 'done'} />
<p className="ml-3 text-gray90 text-sm leading-5 line-clamp-1">{task.title}</p>
</Link>
</li>
) : (
<div className="text-xs text-center">There is no task</div>
)}
</ul>
)}
</Section>
<div className="w-full">
<div className="text-center bg-grayforbg rounded-xl z-50 w-full absolute left-0 bottom-0">
{sub_target.length < 1 ? (
<Button
onClick={() => history.push("/task/create-new-task")}
px={3}
py={3}
mb="mb-5"
fontWeight="font-normal"
className="bg-oldBlueBtn w-9/12 text-xs"
>
Add New Task
</Button>
) : (
<Button
onClick={() => history.push(`/target/details/${sub_target[0].sub_target[0].id_target}`)}
px={3}
py={3}
mb="mb-5"
fontWeight="font-normal"
className="bg-oldBlueBtn w-9/12 text-xs"
>
Go to next child target
</Button>
)}
{/* <Button
onClick={() => history.push("/target/target-reporting")}
px={3}
py={3}
fontWeight="font-normal"
className="bg-green w-9/12 text-xs"
>
Create Report
</Button> */}
</div>
</div>
</Section>
</SectionFlex>
</React.Fragment>
);
}
Editor is loading...