From 6b61f220699be838511099c6281a3d7a3d006d48 Mon Sep 17 00:00:00 2001 From: Muhammad Sulaiman Yusuf Date: Mon, 5 Sep 2022 11:59:58 +0700 Subject: [PATCH] Improve ux --- .../CreatedProyek/DialogFormProyek.js | 2114 ++++++++--------- 1 file changed, 993 insertions(+), 1121 deletions(-) diff --git a/src/views/SimproV2/CreatedProyek/DialogFormProyek.js b/src/views/SimproV2/CreatedProyek/DialogFormProyek.js index 57c74a9..cd69583 100644 --- a/src/views/SimproV2/CreatedProyek/DialogFormProyek.js +++ b/src/views/SimproV2/CreatedProyek/DialogFormProyek.js @@ -2,1140 +2,1012 @@ import React, { useEffect, useState, useMemo } from "react"; import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"; import { Button, Form, FormGroup, Label, Input, Col, Row } from "reactstrap"; import { DatePicker, Tooltip, Select, Divider } from "antd"; -// import { Language } from 'src/const/LanguageConst'; import axios from "../../../const/interceptorApi"; import moment from "moment"; import { - NotificationContainer, - NotificationManager, + NotificationContainer, + NotificationManager, } from "react-notifications"; import "antd/dist/antd.css"; import { formatNumber } from "../../../const/CustomFunc"; import { - PROYEK_GET_ID, - PROJECT_MILESTONE_WHERE_CUSTOM, - PROJECT_PARTICIPANT_WHERE_CUSTOM, - PROJECT_APPROVAL_WHERE_CUSTOM, - CURRENCY_LIST, + PROYEK_GET_ID, + PROJECT_MILESTONE_WHERE_CUSTOM, + PROJECT_PARTICIPANT_WHERE_CUSTOM, + PROJECT_APPROVAL_WHERE_CUSTOM, + CURRENCY_LIST, } from "../../../const/ApiConst"; const { Option } = Select; -// import DialogMap from './DialogMap'; const DialogFormProyek = ({ - openDialog, - closeDialog, - toggleDialog, - idTask, - dataTypeProyek, - dataPhaseProject, - dataPM, + openDialog, + closeDialog, + toggleDialog, + idTask, + dataTypeProyek, + dataPhaseProject, + dataPM, }) => { - const token = localStorage.getItem("token"); - const HEADER = { - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${token}`, - }, - }; - const [id, setId] = useState(0); - const [name, setName] = useState(""); - const [shortName, setShortName] = useState(""); - const [description, setDescription] = useState(""); - const [biaya, setBiaya] = useState(""); - const [typeProject, setTypeproject] = useState(null); - const [phaseProject, setPhaseProject] = useState(null); - const [budgetHealth, setHealthBudget] = useState(null); - const [sdm, setSdm] = useState(0); - const [pic, setPic] = useState(null); - const [startDate, setStartDate] = useState(moment()); - const [endDate, setEndDate] = useState(moment()); - const [workArea, setWorkArea] = useState(""); - const [finance, setFinance] = useState(""); - const [investor, setInvestor] = useState(""); - const [company, setCompany] = useState(""); - const [step, setStep] = useState(1); - const [currencyList, setCurrencyList] = useState(null); - const [currency, setCurrency] = useState(""); // merge of code | symbol | name - const [currencyCode, setCurrencyCode] = useState(""); - const [currencySymbol, setCurrencySymbol] = useState(null); - const [currencyName, setCurrencyName] = useState(""); - // project charter - const [objectives, setObjectives] = useState(""); - const [projectIsConsideredSuccessful, setProjectIsConsideredSuccessful] = useState(""); - const [participants, setParticipants] = useState([]); - const [availableResources, setAvailableResources] = useState(""); - const [milestones, setMilestones] = useState([]); - const [potentialRisks, setPotentialRisks] = useState(""); - const [approval, setApproval] = useState([]); - const [testingEnv, setTestingEnv] = useState(""); - - const [lastIdxParticipants, setLastIdxParticipants] = useState(0); - const [lastIdxMilestones, setLastIdxMilestones] = useState(0); - const [lastIdxApproval, setLastIdxApproval] = useState(0); - - const handleGetdataIdproyek = async (id) => { - // const URL = `${BASE_SIMPRO_LUMEN}/project/edit/${id}` - const result = await axios - .get(`${PROYEK_GET_ID(id)}`, HEADER) - .then((res) => res) - .catch((err) => err.response); - if (result && result.data && result.data.code === 200) { - const val = result.data.data; - setName(val.nama); - setShortName(val.kode_sortname); - setDescription(val.keterangan); - setBiaya(val.rencana_biaya ? formatNumber(val.rencana_biaya) : ""); - setTypeproject(val.type_proyek_id); - setPhaseProject(val.phase_id); - setHealthBudget(val.budget_health); - setPic(val.pm_id); - setStartDate(moment(val.mulai_proyek)); - setEndDate(moment(val.akhir_proyek)); - setWorkArea(val.area_kerja); - setInvestor(val.investor); - setCompany(val.company); - setFinance(val.finance); - setObjectives(val.project_objectives ? val.project_objectives : ""); - setTestingEnv(val.testing_environment); - setPotentialRisks(val.potential_risk); - setProjectIsConsideredSuccessful( - val.considered_success_when ? val.considered_success_when : "" - ); - setCurrencyCode(val.currency_code); - setCurrencySymbol(val.currency_symbol); - setCurrencyName(val.currency_name); - } else { - NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); - } - }; - - const handleGetDataApproval = async (id) => { - const result = await axios - .get(`${PROJECT_APPROVAL_WHERE_CUSTOM("proyek_id", id)}`, HEADER) - .then((res) => res) - .catch((err) => err.response); - console.log("handleGetDataApproval by id", result); - setApproval(result.data.data); - // if (result && result.data && result.data.code === 200) { - // const val = result.data.data - // setName(val.nama) - // setShortName(val.kode_sortname) - // setDescription(val.keterangan) - // setBiaya(val.rencana_biaya ? formatNumber(val.rencana_biaya) : '') - // setTypeproject(val.type_proyek_id) - // setPic(val.pm_id) - // setStartDate(moment(val.mulai_proyek)) - // setEndDate(moment(val.akhir_proyek)) - // setWorkArea(val.area_kerja) - // setInvestor(val.investor) - // setCompany(val.company) - // setFinance(val.finance) - // setObjectives(val.project_objectives) - // setTestingEnv(val.testing_environment) - // setPotentialRisks(val.potential_risk) - // setProjectIsConsideredSuccessful(val.considered_success_when) - - // } else { - // NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); - // } - }; - - const handleGetDataMileStone = async (id) => { - // const URL = `${BASE_SIMPRO_LUMEN}/project/edit/${id}` - const result = await axios - .get(`${PROJECT_MILESTONE_WHERE_CUSTOM("proyek_id", id)}`, HEADER) - .then((res) => res) - .catch((err) => err.response); - console.log("handleGetDataMileStone by id", result); - setMilestones(result.data.data); - // if (result && result.data && result.data.code === 200) { - // const val = result.data.data - // setName(val.nama) - // setShortName(val.kode_sortname) - // setDescription(val.keterangan) - // setBiaya(val.rencana_biaya ? formatNumber(val.rencana_biaya) : '') - // setTypeproject(val.type_proyek_id) - // setPic(val.pm_id) - // setStartDate(moment(val.mulai_proyek)) - // setEndDate(moment(val.akhir_proyek)) - // setWorkArea(val.area_kerja) - // setInvestor(val.investor) - // setCompany(val.company) - // setFinance(val.finance) - // setObjectives(val.project_objectives) - // setTestingEnv(val.testing_environment) - // setPotentialRisks(val.potential_risk) - // setProjectIsConsideredSuccessful(val.considered_success_when) - - // } else { - // NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); - // } - }; - - const handleGetDataParticipants = async (id) => { - const result = await axios - .get(`${PROJECT_PARTICIPANT_WHERE_CUSTOM("proyek_id", id)}`, HEADER) - .then((res) => res) - .catch((err) => err.response); - console.log("handleGetDataParticipants by id", result); - setParticipants(result.data.data); - // if (result && result.data && result.data.code === 200) { - // const val = result.data.data - // setName(val.nama) - // setShortName(val.kode_sortname) - // setDescription(val.keterangan) - // setBiaya(val.rencana_biaya ? formatNumber(val.rencana_biaya) : '') - // setTypeproject(val.type_proyek_id) - // setPic(val.pm_id) - // setStartDate(moment(val.mulai_proyek)) - // setEndDate(moment(val.akhir_proyek)) - // setWorkArea(val.area_kerja) - // setInvestor(val.investor) - // setCompany(val.company) - // setFinance(val.finance) - // setObjectives(val.project_objectives) - // setTestingEnv(val.testing_environment) - // setPotentialRisks(val.potential_risk) - // setProjectIsConsideredSuccessful(val.considered_success_when) - - // } else { - // NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); - // } - }; - - const handleGetDataCurrency = async () => { - const result = await axios - .get(CURRENCY_LIST, HEADER) - .then((res) => res) - .catch((err) => err.response); - console.log("handleGetDataCurrency", result); - setCurrencyList(result.data.data); - }; - - const handleClearData = () => { - setName(""); - setShortName(""); - setBiaya(""); - setTypeproject(null); - setPhaseProject(null); - setHealthBudget(null); - setPic(null); - setStartDate(moment()); - setEndDate(moment()); - setDescription(""); - setInvestor(""); - setFinance(""); - setWorkArea(""); - setCompany(""); - setCurrency(""); - setCurrencyCode(""); - setCurrencySymbol(null); - setCurrencyName(""); - // project charter - setObjectives(""); - setProjectIsConsideredSuccessful(""); - setParticipants([]); - setAvailableResources(""); - setMilestones([]); - setPotentialRisks(""); - setApproval([]); - setTestingEnv(""); - setLastIdxParticipants(0); - setLastIdxMilestones(0); - setLastIdxApproval(0); - setStep(1); - }; - - useEffect(() => { - if (openDialog) { - handleGetDataCurrency(); - } - - if (idTask && idTask > 0) { - console.log("cel data Edit"); - handleGetdataIdproyek(idTask); - handleGetDataParticipants(idTask); - handleGetDataMileStone(idTask); - handleGetDataApproval(idTask); - } else { - handleClearData(); - } - }, [openDialog]); - - const handleSave = () => { - // console.log('participants', participants); - let data = ""; - if (idTask) { - data = { - id: idTask, - nama: name, - kode_sortname: shortName, - rencana_biaya: biaya.replaceAll(".", ""), - // rencana_biaya: biaya.replace(/./g, ""), - mulai_proyek: startDate, - akhir_proyek: endDate, - type_proyek_id: parseInt(typeProject), - phase_id: parseInt(phaseProject), - budget_health: budgetHealth, - pm_id: pic, - investor, - finance, - company, - area_kerja: workArea, - keterangan: description, - project_objectives: objectives, - considered_success_when: projectIsConsideredSuccessful, - potential_risk: potentialRisks, - testing_environment: testingEnv, - currency_symbol: currencySymbol, - currency_code: currencyCode, - currency_name: currencyName, - }; - data.projectCharter = { participants, milestones, approval }; - closeDialog("edit", data); - } else { - data = { - nama: name, - kode_sortname: shortName, - rencana_biaya: biaya.replaceAll(".", ""), - // rencana_biaya: biaya.replace(/./g, ""), - mulai_proyek: startDate, - akhir_proyek: endDate, - type_proyek_id: parseInt(typeProject), - phase_id: parseInt(phaseProject), - health_budget: budgetHealth, - pm_id: pic, - investor, - finance, - company, - area_kerja: workArea, - keterangan: description, - project_objectives: objectives, - considered_success_when: projectIsConsideredSuccessful, - potential_risk: potentialRisks, - testing_environment: testingEnv, - currency_symbol: currencySymbol, - currency_code: currencyCode, - currency_name: currencyName, - }; - // console.log({ participants, milestones, approval, testingEnv, objectives, projectIsConsideredSuccessful, potentialRisks }) - data.projectCharter = { participants, milestones, approval }; - console.log(data); - closeDialog("add", data); - } - handleClearData(); - }; - - const handleCancel = () => { - closeDialog("cancel", "none"); - handleClearData(); - }; - - const onChangeTypeProject = (val) => { - setTypeproject(val); - }; - - const onChangePhaseProject = (val) => { - setPhaseProject(val); - }; - - const onChangeBudgetHealth = (val) => { - setHealthBudget(val); - }; - - const onChangePm = (val) => { - let data = [...dataPM]; - var item = data.find((item) => item.id === val); - participants.push({ - id: lastIdxParticipants + 1, - title: "PM", - name: item.name, - }); - setParticipants(participants); - setLastIdxParticipants(lastIdxParticipants + 1); - setPic(val); - }; - - const onChangeCurrency = (val) => { - console.log("onchange currency", val); - let curr = val.split("|"); // code|symbol|name - // setCurrency(); - console.log("curr", curr); - setCurrencyCode(curr[0]); - setCurrencySymbol(curr[1]); - setCurrencyName(curr[2]); - }; - - const handleDatePickerStart = (date, dateString) => { - setStartDate(date); - }; - - const handleDatePickerEnd = (date, dateString) => { - setEndDate(date); - }; - - const nextStep = () => { - if (!name || name === "") { - alert("Please input Project Name before continue"); - return false; - } - if (!typeProject || typeProject === "") { - alert("Please set Project Type before continue"); - return false; - } - if (!startDate || startDate === "") { - alert("Please set Start Date before continue"); - return false; - } - if (!endDate || endDate === "") { - alert("Please set End Date before continue"); - return false; - } - if (!biaya || biaya === "") { - alert("Please input Budget before continue"); - return false; - } - setStep(2); - }; - - const previousStep = () => { - setStep(1); - }; - - const addParticipant = () => { - // add object - // { - // id: 0, - // title: '', - // name: '' - // } - participants.push({ - id: lastIdxParticipants + 1, - title: "", - name: "", - }); - setParticipants(participants); - setLastIdxParticipants(lastIdxParticipants + 1); - - console.log("participants", participants); - }; - - const handleInputChangeParticipants = (e, index) => { - const { name, value } = e.target; - const newParticipants = [...participants]; - newParticipants[index][name] = value; - setParticipants(newParticipants); - }; - - // remove participant from array - const deleteParticipant = (id) => { - if (participants && participants.length > 0) { - let parIdx = participants.findIndex((o) => o.id === id); - if (parIdx > -1) { - participants.splice(parIdx, 1); - setParticipants(participants.filter((_, i2) => i2 !== id)); - } - } - }; - - const addMilestone = () => { - // add object - // { - // id: 0, - // status: 'the activity', - // due: 'due date', - // deadline: 'deadline date' - // } - milestones.push({ - id: lastIdxMilestones + 1, - status: "", - due: moment(), - deadline: moment(), - }); - setMilestones(milestones); - setLastIdxMilestones(lastIdxMilestones + 1); - }; - - const handleInputChangeMilestones = (e, index) => { - const { name, value } = e.target; - const newMilestones = [...milestones]; - newMilestones[index][name] = value; - setMilestones(newMilestones); - }; - - const handleInputChangeMilestonesDate = (date, name, index) => { - const newMilestones = [...milestones]; - newMilestones[index][name] = date; - setMilestones(newMilestones); - }; - - // remove participant from array - const deleteMilestones = (id) => { - if (milestones && milestones.length > 0) { - let mileIdx = milestones.findIndex((o) => o.id === id); - if (mileIdx > -1) { - milestones.splice(mileIdx, 1); - setMilestones(milestones.filter((_, i2) => i2 !== id)); - } - } - }; - - const addApproval = () => { - // add object - // { - // id: 0, - // title: 'title person', - // name: 'the person', - // date: 'sign date', - // } - approval.push({ - id: lastIdxApproval + 1, - title: "", - name: "", - date: moment(), - }); - setApproval(approval); - setLastIdxApproval(lastIdxApproval + 1); - }; - - const handleInputChangeApproval = (e, index) => { - const { name, value } = e.target; - const newApproval = [...approval]; - newApproval[index][name] = value; - setApproval(newApproval); - }; - - const handleInputChangeApprovalDate = (date, name, index) => { - const newApproval = [...approval]; - // console.log("cek approval", name) - newApproval[index][name] = date; - setApproval(newApproval); - }; - - // remove participant from array - const deleteApproval = (id) => { - if (approval && approval.length > 0) { - let mileIdx = approval.findIndex((o) => o.id === id); - if (mileIdx > -1) { - approval.splice(mileIdx, 1); - setApproval(approval.filter((_, i2) => i2 !== id)); - } - } - }; - - const renderForm = () => { - return ( -
- - - * Wajib diisi. - - - - - - - setName(e.target.value)} - placeholder={`Input project name...`} - /> - - - - - - setShortName(e.target.value)} - placeholder={`Input code / short name...`} - /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - { - let currentDate = moment(current).format("YYYY-MM-DD"); - let customDate = moment(startDate) - .add(1, "days") - .format("YYYY-MM-DD"); - return current && currentDate < customDate; - }} - style={{ width: "100%" }} - value={endDate} - onChange={handleDatePickerEnd} - /> - - - - - - - - setWorkArea(e.target.value)} - placeholder={`Input work area...`} - /> - - - - - - setCompany(e.target.value)} - placeholder={`Input company...`} - /> - - - - - - - - - - - - - setBiaya(formatNumber(e.target.value))} - placeholder={`Input planning cost...`} - /> - - - - - - - - setDescription(e.target.value)} - placeholder={`Input description...`} - /> - - - - - Info Dashboard - - - - - - - - - - - - - - - -
- ); - }; - - const renderFormCharter = () => { - return ( -
- - - Project Objectives - - - - setObjectives(e.target.value)} - placeholder={`The project objective is to...`} - /> - - - - - - Project is considered successful when - - - - - setProjectIsConsideredSuccessful(e.target.value) - } - placeholder={`List of indicators that consider the success of this project`} - rows={5} - /> - - - - - - Project Participants - - - {/* - - - - */} - - - Title - - - Name - - - Action - - - - - -
{RenderParticipants()}
- - - - - Testing Environment - - - - setTestingEnv(e.target.value)} - placeholder={`The testing environment of this project`} - rows={5} - /> - - - - - - Milestones - - - {/* - - - - */} - - - Status - - {/* - Due - */} - - Deadline - - - Action - - - - - -
{RenderMilestones()}
- - - - - Potential risks - - - - setPotentialRisks(e.target.value)} - placeholder={`The potential risks of this project`} - rows={5} - /> - - - - - - Approval - - - {/* - - - - */} - - - Title - - - Name - - - Date - - - Action - - - - - -
{RenderApproval()}
- - -
- ); - }; - - const RenderParticipants = () => { - if (participants.length > 0) { - return participants.map((item, index) => { - // console.log('item participants', item); - return ( - - - {/* updateParticipantsArr(item.id, 'title', e.target.value)} placeholder={`Input participant title...`} /> */} - handleInputChangeParticipants(e, index)} - placeholder={`Input participant title...`} - /> - - - handleInputChangeParticipants(e, index)} - placeholder={`Input participant name...`} - /> - - - - - - ); - }); - } else if (participants.length < 1) { - return ( -
- No participants found -
- ); - } - }; - - const RenderMilestones = () => { - if (milestones.length > 0) { - return milestones.map((item, index) => { - // console.log('item milestones', item); - return ( - - - handleInputChangeMilestones(e, index)} - placeholder={`Input milestones status...`} - /> - - {/* - handleInputChangeMilestonesDate(date, 'due', index)} /> - */} - - - handleInputChangeMilestonesDate(date, "deadline", index) - } - /> - - - - - - ); - }); - } else if (milestones.length < 1) { - return ( -
- No milestones found -
- ); - } - }; - - const RenderApproval = () => { - if (approval.length > 0) { - return approval.map((item, index) => { - // console.log('item approval', item); - return ( - - - handleInputChangeApproval(e, index)} - placeholder={`Input person title...`} - /> - - - handleInputChangeApproval(e, index)} - placeholder={`Input person name...`} - /> - - - - handleInputChangeApprovalDate(date, "date", index) - } - /> - - - - - - ); - }); - } else if (approval.length < 1) { - return ( -
- No approval found -
- ); - } - }; - - return ( - <> - - - {step === 1 - ? idTask - ? "Update Project" - : "Add Project" - : "Project Charter"} - - {step === 1 ? renderForm() : renderFormCharter()} - - {step === 1 ? ( - <> - {" "} - - - ) : ( - <> - {" "} - - - )} - - - - ); + const token = localStorage.getItem("token"); + const HEADER = { + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + }; + const [id, setId] = useState(0); + const [name, setName] = useState(""); + const [shortName, setShortName] = useState(""); + const [description, setDescription] = useState(""); + const [biaya, setBiaya] = useState(""); + const [typeProject, setTypeproject] = useState(null); + const [phaseProject, setPhaseProject] = useState(null); + const [budgetHealth, setHealthBudget] = useState(null); + const [sdm, setSdm] = useState(0); + const [pic, setPic] = useState(null); + const [startDate, setStartDate] = useState(moment()); + const [endDate, setEndDate] = useState(moment()); + const [workArea, setWorkArea] = useState(""); + const [finance, setFinance] = useState(""); + const [investor, setInvestor] = useState(""); + const [company, setCompany] = useState(""); + const [step, setStep] = useState(1); + const [currencyList, setCurrencyList] = useState(null); + const [currency, setCurrency] = useState(""); // merge of code | symbol | name + const [currencyCode, setCurrencyCode] = useState(""); + const [currencySymbol, setCurrencySymbol] = useState(null); + const [currencyName, setCurrencyName] = useState(""); + const [objectives, setObjectives] = useState(""); + const [projectIsConsideredSuccessful, setProjectIsConsideredSuccessful] = useState(""); + const [participants, setParticipants] = useState([]); + const [availableResources, setAvailableResources] = useState(""); + const [milestones, setMilestones] = useState([]); + const [potentialRisks, setPotentialRisks] = useState(""); + const [approval, setApproval] = useState([]); + const [testingEnv, setTestingEnv] = useState(""); + + const [lastIdxParticipants, setLastIdxParticipants] = useState(0); + const [lastIdxMilestones, setLastIdxMilestones] = useState(0); + const [lastIdxApproval, setLastIdxApproval] = useState(0); + + const handleGetdataIdproyek = async (id) => { + const result = await axios + .get(`${PROYEK_GET_ID(id)}`, HEADER) + .then((res) => res) + .catch((err) => err.response); + if (result && result.data && result.data.code === 200) { + const val = result.data.data; + setName(val.nama); + setShortName(val.kode_sortname); + setDescription(val.keterangan); + setBiaya(val.rencana_biaya ? formatNumber(val.rencana_biaya) : ""); + setTypeproject(val.type_proyek_id); + setPhaseProject(val.phase_id); + setHealthBudget(val.budget_health); + setPic(val.pm_id); + setStartDate(moment(val.mulai_proyek)); + setEndDate(moment(val.akhir_proyek)); + setWorkArea(val.area_kerja); + setInvestor(val.investor); + setCompany(val.company); + setFinance(val.finance); + setObjectives(val.project_objectives ? val.project_objectives : ""); + setTestingEnv(val.testing_environment); + setPotentialRisks(val.potential_risk); + setProjectIsConsideredSuccessful( + val.considered_success_when ? val.considered_success_when : "" + ); + setCurrencyCode(val.currency_code); + setCurrencySymbol(val.currency_symbol); + setCurrencyName(val.currency_name); + } else { + NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); + } + }; + + const handleGetDataApproval = async (id) => { + const result = await axios + .get(`${PROJECT_APPROVAL_WHERE_CUSTOM("proyek_id", id)}`, HEADER) + .then((res) => res) + .catch((err) => err.response); + setApproval(result.data.data); + }; + + const handleGetDataMileStone = async (id) => { + const result = await axios + .get(`${PROJECT_MILESTONE_WHERE_CUSTOM("proyek_id", id)}`, HEADER) + .then((res) => res) + .catch((err) => err.response); + setMilestones(result.data.data); + }; + + const handleGetDataParticipants = async (id) => { + const result = await axios + .get(`${PROJECT_PARTICIPANT_WHERE_CUSTOM("proyek_id", id)}`, HEADER) + .then((res) => res) + .catch((err) => err.response); + setParticipants(result.data.data); + }; + + const handleGetDataCurrency = async () => { + const result = await axios + .get(CURRENCY_LIST, HEADER) + .then((res) => res) + .catch((err) => err.response); + setCurrencyList(result.data.data); + }; + + const handleClearData = () => { + setName(""); + setShortName(""); + setBiaya(""); + setTypeproject(null); + setPhaseProject(null); + setHealthBudget(null); + setPic(null); + setStartDate(moment()); + setEndDate(moment()); + setDescription(""); + setInvestor(""); + setFinance(""); + setWorkArea(""); + setCompany(""); + setCurrency(""); + setCurrencyCode(""); + setCurrencySymbol(null); + setCurrencyName(""); + setObjectives(""); + setProjectIsConsideredSuccessful(""); + setParticipants([]); + setAvailableResources(""); + setMilestones([]); + setPotentialRisks(""); + setApproval([]); + setTestingEnv(""); + setLastIdxParticipants(0); + setLastIdxMilestones(0); + setLastIdxApproval(0); + setStep(1); + }; + + useEffect(() => { + if (openDialog) { + handleGetDataCurrency(); + } + + if (idTask && idTask > 0) { + handleGetdataIdproyek(idTask); + handleGetDataParticipants(idTask); + handleGetDataMileStone(idTask); + handleGetDataApproval(idTask); + } else { + handleClearData(); + } + }, [openDialog]); + + const handleSave = () => { + let data = ""; + if (idTask) { + data = { + id: idTask, + nama: name, + kode_sortname: shortName, + rencana_biaya: biaya.replaceAll(".", ""), + mulai_proyek: startDate, + akhir_proyek: endDate, + type_proyek_id: parseInt(typeProject), + phase_id: parseInt(phaseProject), + budget_health: budgetHealth, + pm_id: pic, + investor, + finance, + company, + area_kerja: workArea, + keterangan: description, + project_objectives: objectives, + considered_success_when: projectIsConsideredSuccessful, + potential_risk: potentialRisks, + testing_environment: testingEnv, + currency_symbol: currencySymbol, + currency_code: currencyCode, + currency_name: currencyName, + }; + data.projectCharter = { participants, milestones, approval }; + closeDialog("edit", data); + } else { + data = { + nama: name, + kode_sortname: shortName, + rencana_biaya: biaya.replaceAll(".", ""), + mulai_proyek: startDate, + akhir_proyek: endDate, + type_proyek_id: parseInt(typeProject), + phase_id: parseInt(phaseProject), + health_budget: budgetHealth, + pm_id: pic, + investor, + finance, + company, + area_kerja: workArea, + keterangan: description, + project_objectives: objectives, + considered_success_when: projectIsConsideredSuccessful, + potential_risk: potentialRisks, + testing_environment: testingEnv, + currency_symbol: currencySymbol, + currency_code: currencyCode, + currency_name: currencyName, + }; + data.projectCharter = { participants, milestones, approval }; + closeDialog("add", data); + } + handleClearData(); + }; + + const handleCancel = () => { + closeDialog("cancel", "none"); + handleClearData(); + }; + + const onChangeTypeProject = (val) => { + setTypeproject(val); + }; + + const onChangePhaseProject = (val) => { + setPhaseProject(val); + }; + + const onChangeBudgetHealth = (val) => { + setHealthBudget(val); + }; + + const onChangePm = (val) => { + let data = [...dataPM]; + var item = data.find((item) => item.id === val); + participants.push({ + id: lastIdxParticipants + 1, + title: "PM", + name: item.name, + }); + setParticipants(participants); + setLastIdxParticipants(lastIdxParticipants + 1); + setPic(val); + }; + + const onChangeCurrency = (val) => { + let curr = val.split("|"); // code|symbol|name + setCurrencyCode(curr[0]); + setCurrencySymbol(curr[1]); + setCurrencyName(curr[2]); + }; + + const handleDatePickerStart = (date, dateString) => { + setStartDate(date); + }; + + const handleDatePickerEnd = (date, dateString) => { + setEndDate(date); + }; + + const nextStep = () => { + if (!name || name === "") { + alert("Project Name cannot be empty!"); + return false; + } + if (!shortName || shortName === "") { + alert("Project Code cannot be empty!"); + return false; + } + if (!typeProject || typeProject === "") { + alert("Project Type cannot be empty!"); + return false; + } + if (!startDate || startDate === "") { + alert("Start Date cannot be empty!"); + return false; + } + if (!endDate || endDate === "") { + alert("End Date cannot be empty!"); + return false; + } + if (!biaya || biaya === "") { + alert("Budget cannot be empty!"); + return false; + } + setStep(2); + }; + + const previousStep = () => { + setStep(1); + }; + + const addParticipant = () => { + participants.push({ + id: lastIdxParticipants + 1, + title: "", + name: "", + }); + setParticipants(participants); + setLastIdxParticipants(lastIdxParticipants + 1); + }; + + const handleInputChangeParticipants = (e, index) => { + const { name, value } = e.target; + const newParticipants = [...participants]; + newParticipants[index][name] = value; + setParticipants(newParticipants); + }; + + const deleteParticipant = (id) => { + if (participants && participants.length > 0) { + let parIdx = participants.findIndex((o) => o.id === id); + if (parIdx > -1) { + participants.splice(parIdx, 1); + setParticipants(participants.filter((_, i2) => i2 !== id)); + } + } + }; + + const addMilestone = () => { + milestones.push({ + id: lastIdxMilestones + 1, + status: "", + due: moment(), + deadline: moment(), + }); + setMilestones(milestones); + setLastIdxMilestones(lastIdxMilestones + 1); + }; + + const handleInputChangeMilestones = (e, index) => { + const { name, value } = e.target; + const newMilestones = [...milestones]; + newMilestones[index][name] = value; + setMilestones(newMilestones); + }; + + const handleInputChangeMilestonesDate = (date, name, index) => { + const newMilestones = [...milestones]; + newMilestones[index][name] = date; + setMilestones(newMilestones); + }; + + const deleteMilestones = (id) => { + if (milestones && milestones.length > 0) { + let mileIdx = milestones.findIndex((o) => o.id === id); + if (mileIdx > -1) { + milestones.splice(mileIdx, 1); + setMilestones(milestones.filter((_, i2) => i2 !== id)); + } + } + }; + + const addApproval = () => { + approval.push({ + id: lastIdxApproval + 1, + title: "", + name: "", + date: moment(), + }); + setApproval(approval); + setLastIdxApproval(lastIdxApproval + 1); + }; + + const handleInputChangeApproval = (e, index) => { + const { name, value } = e.target; + const newApproval = [...approval]; + newApproval[index][name] = value; + setApproval(newApproval); + }; + + const handleInputChangeApprovalDate = (date, name, index) => { + const newApproval = [...approval]; + newApproval[index][name] = date; + setApproval(newApproval); + }; + + const deleteApproval = (id) => { + if (approval && approval.length > 0) { + let mileIdx = approval.findIndex((o) => o.id === id); + if (mileIdx > -1) { + approval.splice(mileIdx, 1); + setApproval(approval.filter((_, i2) => i2 !== id)); + } + } + }; + + const renderForm = () => { + return ( +
+ + + * Wajib diisi. + + + + + + + setName(e.target.value)} + /> + + + + + + setShortName(e.target.value)} + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + let currentDate = moment(current).format("YYYY-MM-DD"); + let customDate = moment(startDate) + .add(1, "days") + .format("YYYY-MM-DD"); + return current && currentDate < customDate; + }} + style={{ width: "100%" }} + value={endDate} + onChange={handleDatePickerEnd} + /> + + + + + + + + setWorkArea(e.target.value)} + /> + + + + + + setCompany(e.target.value)} + /> + + + + + + + + + + + + + setBiaya(formatNumber(e.target.value))} + /> + + + + + + + + setDescription(e.target.value)} + /> + + + + + Info Dashboard + + + + + + + + + + + + + + + +
+ ); + }; + + const renderFormCharter = () => { + return ( +
+ + + Project Objectives + + + + setObjectives(e.target.value)} + /> + + + + + + Project is considered successful when + + + + + setProjectIsConsideredSuccessful(e.target.value) + } + placeholder={`List of indicators`} + rows={5} + /> + + + + + + Project Participants + + + {/* + + + + */} + + + Title + + + Name + + + Action + + + + + +
{RenderParticipants()}
+ + + + + Testing Environment + + + + setTestingEnv(e.target.value)} + rows={5} + /> + + + + + + Milestones + + + {/* + + + + */} + + + Status + + {/* + Due + */} + + Deadline + + + Action + + + + + +
{RenderMilestones()}
+ + + + + Potential risks + + + + setPotentialRisks(e.target.value)} + placeholder={`List of risks`} + rows={5} + /> + + + + + + Approval + + + {/* + + + + */} + + + Title + + + Name + + + Date + + + Action + + + + + +
{RenderApproval()}
+ + +
+ ); + }; + + const RenderParticipants = () => { + if (participants.length > 0) { + return participants.map((item, index) => { + return ( + + + handleInputChangeParticipants(e, index)} + /> + + + handleInputChangeParticipants(e, index)} + /> + + + + + + ); + }); + } else if (participants.length < 1) { + return ( +
+ No participants found +
+ ); + } + }; + + const RenderMilestones = () => { + if (milestones.length > 0) { + return milestones.map((item, index) => { + return ( + + + handleInputChangeMilestones(e, index)} + /> + + + + handleInputChangeMilestonesDate(date, "deadline", index) + } + /> + + + + + + ); + }); + } else if (milestones.length < 1) { + return ( +
+ No milestones found +
+ ); + } + }; + + const RenderApproval = () => { + if (approval.length > 0) { + return approval.map((item, index) => { + return ( + + + handleInputChangeApproval(e, index)} + /> + + + handleInputChangeApproval(e, index)} + /> + + + + handleInputChangeApprovalDate(date, "date", index) + } + /> + + + + + + ); + }); + } else if (approval.length < 1) { + return ( +
+ No approval found +
+ ); + } + }; + + return ( + <> + + + {step === 1 + ? idTask + ? "Update Project" + : "Add Project" + : "Project Charter"} + + {step === 1 ? renderForm() : renderFormCharter()} + + {step === 1 ? ( + <> + {" "} + + + ) : ( + <> + {" "} + + + )} + + + + ); }; export default DialogFormProyek;