From 1bb3a0530d898ac23248cccc5dfa9acfb167150c Mon Sep 17 00:00:00 2001 From: Anggara MAG Date: Mon, 11 Jul 2022 21:55:22 +0700 Subject: [PATCH] bug fixing (project charter) --- .../SimproV2/CreatedProyek/DialogForm.js | 300 ++++--- .../CreatedProyek/DialogFormProyek.js | 781 ++++++++++++------ 2 files changed, 705 insertions(+), 376 deletions(-) diff --git a/src/views/SimproV2/CreatedProyek/DialogForm.js b/src/views/SimproV2/CreatedProyek/DialogForm.js index ae6b7cb..b09b127 100644 --- a/src/views/SimproV2/CreatedProyek/DialogForm.js +++ b/src/views/SimproV2/CreatedProyek/DialogForm.js @@ -1,91 +1,107 @@ -import React, { useEffect, useState } from 'react' -import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; -import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap'; -import { DatePicker, Tooltip, Select } from 'antd'; +import React, { useEffect, useState } from "react"; +import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"; +import { Button, Form, FormGroup, Label, Input, Col, Row } from "reactstrap"; +import { DatePicker, Tooltip, Select } from "antd"; // import { Language } from 'src/const/LanguageConst'; -import axios from "../../../const/interceptorApi" -import moment from 'moment'; -import { NotificationContainer, NotificationManager } from 'react-notifications'; -import 'antd/dist/antd.css'; -import { formatNumber } from '../../../const/CustomFunc'; -import { TYPE_PROYEK, USER_LIST, BASE_SIMPRO_LUMEN } from '../../../const/ApiConst'; +import axios from "../../../const/interceptorApi"; +import moment from "moment"; +import { + NotificationContainer, + NotificationManager, +} from "react-notifications"; +import "antd/dist/antd.css"; +import { formatNumber } from "../../../const/CustomFunc"; +import { + TYPE_PROYEK, + USER_LIST, + BASE_SIMPRO_LUMEN, +} from "../../../const/ApiConst"; -const { Option } = Select +const { Option } = Select; // import DialogMap from './DialogMap'; -const DialogForm = ({ openDialog, closeDialog, toggleDialog, idTask, dataTypeProyek, dataPM }) => { - const token = localStorage.getItem("token") +const DialogForm = ({ + openDialog, + closeDialog, + toggleDialog, + idTask, + dataTypeProyek, + 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 [sdm, setSdm] = useState(0) - const [pic, setPic] = useState(null) - const [startDate, setStartDate] = useState(moment()) - const [endDate, setEndDate] = useState(moment()) + 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 [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 handleGetdataIdproyek = async (id) => { - const URL = `${BASE_SIMPRO_LUMEN}/project/edit/${id}` - const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) - console.log("proyek by id", result) + const URL = `${BASE_SIMPRO_LUMEN}/project/edit/${id}`; + const result = await axios + .get(URL, HEADER) + .then((res) => res) + .catch((err) => err.response); + console.log("proyek by id", result); 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) + 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); } else { NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); } - } + }; const handleCLearData = () => { - setName('') - setShortName('') - setBiaya('') - setTypeproject(null) - setPic(null) - setStartDate(moment()) - setEndDate(moment()) - setDescription("") - setInvestor("") - setFinance("") - setWorkArea("") - setCompany("") - } + setName(""); + setShortName(""); + setBiaya(""); + setTypeproject(null); + setPic(null); + setStartDate(moment()); + setEndDate(moment()); + setDescription(""); + setInvestor(""); + setFinance(""); + setWorkArea(""); + setCompany(""); + }; useEffect(() => { if (idTask && idTask > 0) { - console.log("cel data Edit") - handleGetdataIdproyek(idTask) - + console.log("cel data Edit"); + handleGetdataIdproyek(idTask); } else { - handleCLearData() + handleCLearData(); } - }, [openDialog]) + }, [openDialog]); const handleSave = () => { - let data = ''; + let data = ""; if (idTask) { data = { id: idTask, @@ -100,11 +116,10 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, idTask, dataTypePro finance, company, area_kerja: workArea, - keterangan: description - - } + keterangan: description, + }; - closeDialog('edit', data); + closeDialog("edit", data); } else { data = { nama: name, @@ -118,36 +133,35 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, idTask, dataTypePro finance, company, area_kerja: workArea, - keterangan: description - } - console.log(data) - closeDialog('add', data); + keterangan: description, + }; + console.log(data); + closeDialog("add", data); } - handleCLearData() - } + handleCLearData(); + }; const handleCancel = () => { - closeDialog('cancel', 'none') - handleCLearData() - } + closeDialog("cancel", "none"); + handleCLearData(); + }; const onChangeTypeProject = (val) => { - setTypeproject(val) - } - + setTypeproject(val); + }; const onChangePm = (val) => { - console.log("chnage pm", val) - setPic(val) - } + console.log("chnage pm", val); + setPic(val); + }; const handleDatePickerStart = (date, dateString) => { - setStartDate(date) - } + setStartDate(date); + }; const handleDatePickerEnd = (date, dateString) => { - setEndDate(date) - } + setEndDate(date); + }; const renderForm = () => { return ( @@ -156,13 +170,23 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, idTask, dataTypePro - setName(e.target.value)} placeholder={`Input project name...`} /> + setName(e.target.value)} + placeholder={`Input project name...`} + /> - setShortName(e.target.value)} placeholder={`Input code / short name...`} /> + setShortName(e.target.value)} + placeholder={`Input code / short name...`} + /> @@ -170,9 +194,18 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, idTask, dataTypePro - + {dataTypeProyek.map((res) => ( + ))} @@ -180,9 +213,18 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, idTask, dataTypePro - + {dataPM.map((res) => ( + ))} @@ -192,13 +234,21 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, idTask, dataTypePro - + - + @@ -206,13 +256,23 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, idTask, dataTypePro - setWorkArea(e.target.value)} placeholder={`Input work area...`} /> + setWorkArea(e.target.value)} + placeholder={`Input work area...`} + /> - setCompany(e.target.value)} placeholder={`Input company...`} /> + setCompany(e.target.value)} + placeholder={`Input company...`} + /> @@ -220,36 +280,52 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, idTask, dataTypePro - setBiaya(formatNumber(e.target.value))} placeholder={`Input planning cost...`} /> + setBiaya(formatNumber(e.target.value))} + placeholder={`Input planning cost...`} + /> - setDescription(e.target.value)} placeholder={`Input description...`} /> + setDescription(e.target.value)} + placeholder={`Input description...`} + /> - ) - } - + ); + }; return ( <> - {idTask ? `Update` : "Add"} Project - - {renderForm()} - + + {idTask ? `Update` : "Add"} Project + + {renderForm()} - {' '} - + {" "} + - ) - -} + ); +}; -export default DialogForm; \ No newline at end of file +export default DialogForm; diff --git a/src/views/SimproV2/CreatedProyek/DialogFormProyek.js b/src/views/SimproV2/CreatedProyek/DialogFormProyek.js index 2a3a86b..827e068 100644 --- a/src/views/SimproV2/CreatedProyek/DialogFormProyek.js +++ b/src/views/SimproV2/CreatedProyek/DialogFormProyek.js @@ -1,55 +1,72 @@ -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 } from 'antd'; +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 } from "antd"; // import { Language } from 'src/const/LanguageConst'; -import axios from "../../../const/interceptorApi" -import moment from 'moment'; -import { 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 } from '../../../const/ApiConst'; - -const { Option } = Select +import axios from "../../../const/interceptorApi"; +import moment from "moment"; +import { + 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, +} from "../../../const/ApiConst"; + +const { Option } = Select; // import DialogMap from './DialogMap'; -const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataTypeProyek, dataPM }) => { - const token = localStorage.getItem("token") +const DialogFormProyek = ({ + openDialog, + closeDialog, + toggleDialog, + idTask, + dataTypeProyek, + 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 [sdm, setSdm] = useState(0) - const [pic, setPic] = useState(null) - const [startDate, setStartDate] = useState(moment()) - const [endDate, setEndDate] = useState(moment()) + 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 [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 [currency, setCurrency] = useState(""); // merge of code | symbol | name + const [currencyCode, setCurrencyCode] = useState(""); const [currencySymbol, setCurrencySymbol] = useState(null); - const [currencyName, setCurrencyName] = useState(''); + const [currencyName, setCurrencyName] = useState(""); // project charter - const [objectives, setObjectives] = useState('') - const [projectIsConsideredSuccessful, setProjectIsConsideredSuccessful] = 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 [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); @@ -57,39 +74,46 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT 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) - console.log("proyek by id", result) + const result = await axios + .get(`${PROYEK_GET_ID(id)}`, HEADER) + .then((res) => res) + .catch((err) => err.response); + console.log("proyek by id", result); 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 ? 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) - + 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 ? 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) + 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) @@ -103,7 +127,7 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT // setWorkArea(val.area_kerja) // setInvestor(val.investor) // setCompany(val.company) - // setFinance(val.finance) + // setFinance(val.finance) // setObjectives(val.project_objectives) // setTestingEnv(val.testing_environment) // setPotentialRisks(val.potential_risk) @@ -112,13 +136,16 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT // } 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) + 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) @@ -132,7 +159,7 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT // setWorkArea(val.area_kerja) // setInvestor(val.investor) // setCompany(val.company) - // setFinance(val.finance) + // setFinance(val.finance) // setObjectives(val.project_objectives) // setTestingEnv(val.testing_environment) // setPotentialRisks(val.potential_risk) @@ -141,12 +168,15 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT // } 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) + 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) @@ -160,7 +190,7 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT // setWorkArea(val.area_kerja) // setInvestor(val.investor) // setCompany(val.company) - // setFinance(val.finance) + // setFinance(val.finance) // setObjectives(val.project_objectives) // setTestingEnv(val.testing_environment) // setPotentialRisks(val.potential_risk) @@ -169,45 +199,48 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT // } 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 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) - setPic(null) - setStartDate(moment()) - setEndDate(moment()) - setDescription("") - setInvestor("") - setFinance("") - setWorkArea("") - setCompany("") - setCurrency(''); - setCurrencyCode(''); + setName(""); + setShortName(""); + setBiaya(""); + setTypeproject(null); + setPic(null); + setStartDate(moment()); + setEndDate(moment()); + setDescription(""); + setInvestor(""); + setFinance(""); + setWorkArea(""); + setCompany(""); + setCurrency(""); + setCurrencyCode(""); setCurrencySymbol(null); - setCurrencyName(''); + setCurrencyName(""); // project charter - setObjectives('') - setProjectIsConsideredSuccessful('') + setObjectives(""); + setProjectIsConsideredSuccessful(""); setParticipants([]); - setAvailableResources('') - setMilestones([]) - setPotentialRisks('') - setApproval([]) - setTestingEnv('') + setAvailableResources(""); + setMilestones([]); + setPotentialRisks(""); + setApproval([]); + setTestingEnv(""); setLastIdxParticipants(0); setLastIdxMilestones(0); setLastIdxApproval(0); - setStep(1) - } + setStep(1); + }; useEffect(() => { if (openDialog) { @@ -215,19 +248,19 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT } if (idTask && idTask > 0) { - console.log("cel data Edit") - handleGetdataIdproyek(idTask) - handleGetDataParticipants(idTask) - handleGetDataMileStone(idTask) - handleGetDataApproval(idTask) + console.log("cel data Edit"); + handleGetdataIdproyek(idTask); + handleGetDataParticipants(idTask); + handleGetDataMileStone(idTask); + handleGetDataApproval(idTask); } else { - handleClearData() + handleClearData(); } - }, [openDialog]) + }, [openDialog]); const handleSave = () => { // console.log('participants', participants); - let data = ''; + let data = ""; if (idTask) { data = { id: idTask, @@ -250,10 +283,10 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT testing_environment: testingEnv, currency_symbol: currencySymbol, currency_code: currencyCode, - currency_name: currencyName - } - data.projectCharter = { participants, milestones, approval} - closeDialog('edit', data); + currency_name: currencyName, + }; + data.projectCharter = { participants, milestones, approval }; + closeDialog("edit", data); } else { data = { nama: name, @@ -275,76 +308,83 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT testing_environment: testingEnv, currency_symbol: currencySymbol, currency_code: currencyCode, - currency_name: currencyName - } + currency_name: currencyName, + }; // console.log({ participants, milestones, approval, testingEnv, objectives, projectIsConsideredSuccessful, potentialRisks }) - data.projectCharter = { participants, milestones, approval} - console.log(data) - closeDialog('add', data); + data.projectCharter = { participants, milestones, approval }; + console.log(data); + closeDialog("add", data); } - handleClearData() - } + handleClearData(); + }; const handleCancel = () => { - closeDialog('cancel', 'none') - handleClearData() - } + closeDialog("cancel", "none"); + handleClearData(); + }; const onChangeTypeProject = (val) => { - setTypeproject(val) - } - + setTypeproject(val); + }; const onChangePm = (val) => { - console.log("chnage pm", val) - setPic(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); + console.log("curr", curr); setCurrencyCode(curr[0]); setCurrencySymbol(curr[1]); setCurrencyName(curr[2]); - } + }; const handleDatePickerStart = (date, dateString) => { - setStartDate(date) - } + setStartDate(date); + }; const handleDatePickerEnd = (date, dateString) => { - setEndDate(date) - } + setEndDate(date); + }; const nextStep = () => { - if (!name || name === '') { - alert('Please input Project Name before continue'); + if (!name || name === "") { + alert("Please input Project Name before continue"); return false; } - if (!typeProject || typeProject === '') { - alert('Please set Project Type before continue'); + if (!typeProject || typeProject === "") { + alert("Please set Project Type before continue"); return false; } - if (!startDate || startDate === '') { - alert('Please set Start Date before continue'); + if (!startDate || startDate === "") { + alert("Please set Start Date before continue"); return false; } - if (!endDate || endDate === '') { - alert('Please set End Date before continue'); + if (!endDate || endDate === "") { + alert("Please set End Date before continue"); return false; } - if (!biaya || biaya === '') { - alert('Please input Budget before continue'); + if (!biaya || biaya === "") { + alert("Please input Budget before continue"); return false; } - setStep(2) - } + setStep(2); + }; const previousStep = () => { - setStep(1) - } + setStep(1); + }; const addParticipant = () => { // add object @@ -355,14 +395,14 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT // } participants.push({ id: lastIdxParticipants + 1, - title: '', - name: '' + title: "", + name: "", }); setParticipants(participants); setLastIdxParticipants(lastIdxParticipants + 1); - console.log('participants', participants); - } + console.log("participants", participants); + }; // update participant array const handleInputChangeParticipants = (e, index) => { @@ -375,13 +415,13 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT // remove participant from array const deleteParticipant = (id) => { if (participants && participants.length > 0) { - let parIdx = participants.findIndex(o => o.id === id); + 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 @@ -393,13 +433,13 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT // } milestones.push({ id: lastIdxMilestones + 1, - status: '', + status: "", due: moment(), - deadline: moment() + deadline: moment(), }); setMilestones(milestones); setLastIdxMilestones(lastIdxMilestones + 1); - } + }; // update participant array const handleInputChangeMilestones = (e, index) => { @@ -413,18 +453,18 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT 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); + 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 @@ -436,13 +476,13 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT // } approval.push({ id: lastIdxApproval + 1, - title: '', - name: '', + title: "", + name: "", date: moment(), }); setApproval(approval); setLastIdxApproval(lastIdxApproval + 1); - } + }; // update participant array const handleInputChangeApproval = (e, index) => { @@ -457,18 +497,18 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT // 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); + let mileIdx = approval.findIndex((o) => o.id === id); if (mileIdx > -1) { approval.splice(mileIdx, 1); setApproval(approval.filter((_, i2) => i2 !== id)); } } - } + }; const renderForm = () => { return ( @@ -476,24 +516,47 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT - - setName(e.target.value)} placeholder={`Input project name...`} /> + + setName(e.target.value)} + placeholder={`Input project name...`} + /> - setShortName(e.target.value)} placeholder={`Input code / short name...`} /> + setShortName(e.target.value)} + placeholder={`Input code / short name...`} + /> - - + {dataTypeProyek.map((res) => ( + ))} @@ -501,9 +564,18 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT - + {dataPM.map((res) => ( + ))} @@ -512,14 +584,33 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT - - + + - - + + { + 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} + /> @@ -527,30 +618,57 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT - setWorkArea(e.target.value)} placeholder={`Input work area...`} /> + setWorkArea(e.target.value)} + placeholder={`Input work area...`} + /> - setCompany(e.target.value)} placeholder={`Input company...`} /> + setCompany(e.target.value)} + placeholder={`Input company...`} + /> - + - + {currencyList && + currencyList.map((res) => ( + + ))} - setBiaya(formatNumber(e.target.value))} placeholder={`Input planning cost...`} /> + setBiaya(formatNumber(e.target.value))} + placeholder={`Input planning cost...`} + /> @@ -558,21 +676,24 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT - setDescription(e.target.value)} placeholder={`Input description...`} /> + setDescription(e.target.value)} + placeholder={`Input description...`} + /> -
- Notes: -
+
Notes:
* means required fields - ) - } + ); + }; const renderFormCharter = () => { return ( @@ -583,7 +704,12 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT - setObjectives(e.target.value)} placeholder={`The project objective is to...`} /> + setObjectives(e.target.value)} + placeholder={`The project objective is to...`} + /> @@ -593,7 +719,15 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT - setProjectIsConsideredSuccessful(e.target.value)} placeholder={`List of indicators that consider the success of this project`} rows={5} /> + + setProjectIsConsideredSuccessful(e.target.value) + } + placeholder={`List of indicators that consider the success of this project`} + rows={5} + /> @@ -618,7 +752,13 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT Action - +
{RenderParticipants()}
@@ -630,7 +770,13 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT - setTestingEnv(e.target.value)} placeholder={`The testing environment of this project`} rows={5} /> + setTestingEnv(e.target.value)} + placeholder={`The testing environment of this project`} + rows={5} + /> @@ -658,7 +804,13 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT Action - +
{RenderMilestones()}
@@ -670,7 +822,13 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT - setPotentialRisks(e.target.value)} placeholder={`The potential risks of this project`} rows={5} /> + setPotentialRisks(e.target.value)} + placeholder={`The potential risks of this project`} + rows={5} + /> @@ -698,15 +856,17 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT Action - +
{RenderApproval()}
- ) - } + ); + }; const RenderParticipants = () => { if (participants.length > 0) { @@ -716,22 +876,50 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT {/* updateParticipantsArr(item.id, 'title', e.target.value)} placeholder={`Input participant title...`} /> */} - handleInputChangeParticipants(e, index)} placeholder={`Input participant title...`} /> + handleInputChangeParticipants(e, index)} + placeholder={`Input participant title...`} + /> - handleInputChangeParticipants(e, index)} placeholder={`Input participant name...`} /> + handleInputChangeParticipants(e, index)} + placeholder={`Input participant name...`} + /> - + - ) + ); }); + } else if (participants.length < 1) { + return ( +
+ No participants found +
+ ); } - else if (participants.length < 1) { - return (
No participants found
); - } - } + }; const RenderMilestones = () => { if (milestones.length > 0) { @@ -740,25 +928,54 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT return ( - handleInputChangeMilestones(e, index)} placeholder={`Input milestones status...`} /> + handleInputChangeMilestones(e, index)} + placeholder={`Input milestones status...`} + /> {/* handleInputChangeMilestonesDate(date, 'due', index)} /> */} - handleInputChangeMilestonesDate(date, 'deadline', index)} /> + + handleInputChangeMilestonesDate(date, "deadline", index) + } + /> - + - ) + ); }); + } else if (milestones.length < 1) { + return ( +
+ No milestones found +
+ ); } - else if (milestones.length < 1) { - return (
No milestones found
); - } - } + }; const RenderApproval = () => { if (approval.length > 0) { @@ -767,64 +984,100 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT return ( - handleInputChangeApproval(e, index)} placeholder={`Input person title...`} /> + handleInputChangeApproval(e, index)} + placeholder={`Input person title...`} + /> - handleInputChangeApproval(e, index)} placeholder={`Input person name...`} /> + handleInputChangeApproval(e, index)} + placeholder={`Input person name...`} + /> - handleInputChangeApprovalDate(date, 'date', index)} /> + + handleInputChangeApprovalDate(date, "date", index) + } + /> - + - ) + ); }); + } else if (approval.length < 1) { + return ( +
+ No approval found +
+ ); } - else if (approval.length < 1) { - return (
No approval found
); - } - } - + }; return ( <> - { - step === 1 ? idTask ? "Update Project" : "Add Project" : "Project Charter" - } - + {step === 1 + ? idTask + ? "Update Project" + : "Add Project" + : "Project Charter"} - - { - step === 1 ? renderForm() : renderFormCharter() - } - + {step === 1 ? renderForm() : renderFormCharter()} - { - step === 1 ? - <> - - {' '} - - - : - <> - - {' '} - - - - - } - + {step === 1 ? ( + <> + {" "} + + + ) : ( + <> + {" "} + + + )} - ) - -} + ); +}; -export default DialogFormProyek; \ No newline at end of file +export default DialogFormProyek;