target-detail

error property 0
mail@pastecode.io avatar
unknown
jsx
3 years ago
22 kB
4
Indexable
Never
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>
  );
}