|
|
|
@ -1,7 +1,7 @@ |
|
|
|
import React, { useEffect, useState, useMemo } from "react"; |
|
|
|
import React, { useEffect, useState, useMemo } from "react"; |
|
|
|
import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"; |
|
|
|
import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"; |
|
|
|
import { Button, Form, FormGroup, Label, Input, Col, Row } from "reactstrap"; |
|
|
|
import { Button, Form, FormGroup, Label, Input, Col, Row } from "reactstrap"; |
|
|
|
import { DatePicker, Tooltip, Select, Divider } from "antd"; |
|
|
|
import { DatePicker, Tooltip, Select, Divider, Spin } from "antd"; |
|
|
|
import axios from "../../../const/interceptorApi"; |
|
|
|
import axios from "../../../const/interceptorApi"; |
|
|
|
import moment from "moment"; |
|
|
|
import moment from "moment"; |
|
|
|
import { CKEditor } from '@ckeditor/ckeditor5-react'; |
|
|
|
import { CKEditor } from '@ckeditor/ckeditor5-react'; |
|
|
|
@ -88,8 +88,9 @@ const DialogFormProyek = ({ |
|
|
|
const [lastIdxRisks, setLastIdxRisks] = useState(0); |
|
|
|
const [lastIdxRisks, setLastIdxRisks] = useState(0); |
|
|
|
const [lastIdxMilestones, setLastIdxMilestones] = useState(0); |
|
|
|
const [lastIdxMilestones, setLastIdxMilestones] = useState(0); |
|
|
|
const [lastIdxApproval, setLastIdxApproval] = useState(0); |
|
|
|
const [lastIdxApproval, setLastIdxApproval] = useState(0); |
|
|
|
|
|
|
|
const [loading, setLoading] = useState(true); |
|
|
|
const handleGetdataIdproyek = async (id) => { |
|
|
|
const handleGetdataIdproyek = async (id) => { |
|
|
|
|
|
|
|
setLoading(true) |
|
|
|
const result = await axios |
|
|
|
const result = await axios |
|
|
|
.get(`${PROYEK_GET_ID(id)}`, HEADER) |
|
|
|
.get(`${PROYEK_GET_ID(id)}`, HEADER) |
|
|
|
.then((res) => res) |
|
|
|
.then((res) => res) |
|
|
|
@ -122,6 +123,7 @@ const DialogFormProyek = ({ |
|
|
|
setCurrencyCode(val.currency_code); |
|
|
|
setCurrencyCode(val.currency_code); |
|
|
|
setCurrencySymbol(val.currency_symbol); |
|
|
|
setCurrencySymbol(val.currency_symbol); |
|
|
|
setCurrencyName(val.currency_name); |
|
|
|
setCurrencyName(val.currency_name); |
|
|
|
|
|
|
|
setLoading(false) |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); |
|
|
|
NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -457,8 +459,7 @@ const DialogFormProyek = ({ |
|
|
|
const handleInputChangeParticipants = (e, index) => { |
|
|
|
const handleInputChangeParticipants = (e, index) => { |
|
|
|
const { name, value } = e.target; |
|
|
|
const { name, value } = e.target; |
|
|
|
const existingParticipant = participants.find((participant) => participant.tittle === "PM"); |
|
|
|
const existingParticipant = participants.find((participant) => participant.tittle === "PM"); |
|
|
|
if(value.toLowerCase() === "pm" && name === "tittle" && existingParticipant) |
|
|
|
if (value.toLowerCase() === "pm" && name === "tittle" && existingParticipant) { |
|
|
|
{ |
|
|
|
|
|
|
|
alert('PM is already exist!'); |
|
|
|
alert('PM is already exist!'); |
|
|
|
setParticipants((prevParticipants) => |
|
|
|
setParticipants((prevParticipants) => |
|
|
|
prevParticipants.map((participant, i) => { |
|
|
|
prevParticipants.map((participant, i) => { |
|
|
|
@ -494,7 +495,7 @@ const DialogFormProyek = ({ |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleInputChangeIssues = (e, index) => { |
|
|
|
const handleInputChangeIssues = (e, index) => { |
|
|
|
if (e === 1 || e === 2|| e === 3|| e === 4|| e === 5|| e === 6|| e === 7) { |
|
|
|
if (e === 1 || e === 2 || e === 3 || e === 4 || e === 5 || e === 6 || e === 7) { |
|
|
|
const value = e; |
|
|
|
const value = e; |
|
|
|
const name = "level_issue"; |
|
|
|
const name = "level_issue"; |
|
|
|
const newIssues = [...issue]; |
|
|
|
const newIssues = [...issue]; |
|
|
|
@ -845,7 +846,7 @@ const DialogFormProyek = ({ |
|
|
|
accept="image/*" |
|
|
|
accept="image/*" |
|
|
|
onChange={(e) => setProjectStructureOrg(e.target.files[0])} |
|
|
|
onChange={(e) => setProjectStructureOrg(e.target.files[0])} |
|
|
|
/> |
|
|
|
/> |
|
|
|
<small>{projectImage ? projectImage.image : <p style={{ color: "red" }}>Not found image</p> }</small> |
|
|
|
<small>{projectImage ? projectImage.image : <p style={{ color: "red" }}>Not found image</p>}</small> |
|
|
|
</FormGroup> |
|
|
|
</FormGroup> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
<Col md={6}> |
|
|
|
<Col md={6}> |
|
|
|
@ -863,31 +864,31 @@ const DialogFormProyek = ({ |
|
|
|
<Col md={12}> |
|
|
|
<Col md={12}> |
|
|
|
<Label className="capitalize" style={{ fontWeight: "bold" }}>Late Consequence</Label> |
|
|
|
<Label className="capitalize" style={{ fontWeight: "bold" }}>Late Consequence</Label> |
|
|
|
<CKEditor |
|
|
|
<CKEditor |
|
|
|
editor={ ClassicEditor } |
|
|
|
editor={ClassicEditor} |
|
|
|
data={ late } |
|
|
|
data={late} |
|
|
|
config={editorConfig} |
|
|
|
config={editorConfig} |
|
|
|
onChange={ ( event, editor ) => { |
|
|
|
onChange={(event, editor) => { |
|
|
|
const data = editor.getData(); |
|
|
|
const data = editor.getData(); |
|
|
|
setLateConsequence(data); |
|
|
|
setLateConsequence(data); |
|
|
|
} } |
|
|
|
}} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
<Row style={{ marginTop: "20px"}}> |
|
|
|
<Row style={{ marginTop: "20px" }}> |
|
|
|
<Col md={12}> |
|
|
|
<Col md={12}> |
|
|
|
<Label className="capitalize" style={{ fontWeight: "bold" }}>Assumtion</Label> |
|
|
|
<Label className="capitalize" style={{ fontWeight: "bold" }}>Assumtion</Label> |
|
|
|
<CKEditor |
|
|
|
<CKEditor |
|
|
|
editor={ClassicEditor} |
|
|
|
editor={ClassicEditor} |
|
|
|
data={assumtion} |
|
|
|
data={assumtion} |
|
|
|
config={editorConfig} |
|
|
|
config={editorConfig} |
|
|
|
onChange={ ( event, editor ) => { |
|
|
|
onChange={(event, editor) => { |
|
|
|
const data = editor.getData(); |
|
|
|
const data = editor.getData(); |
|
|
|
setAssumtion(data); |
|
|
|
setAssumtion(data); |
|
|
|
} } |
|
|
|
}} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
<Row style={{ marginTop: "20px"}}> |
|
|
|
<Row style={{ marginTop: "20px" }}> |
|
|
|
<Col md={12}> |
|
|
|
<Col md={12}> |
|
|
|
<Label className="capitalize" style={{ fontWeight: "bold" }}>Project Checklist</Label> |
|
|
|
<Label className="capitalize" style={{ fontWeight: "bold" }}>Project Checklist</Label> |
|
|
|
<Row> |
|
|
|
<Row> |
|
|
|
@ -999,10 +1000,10 @@ const DialogFormProyek = ({ |
|
|
|
editor={ClassicEditor} |
|
|
|
editor={ClassicEditor} |
|
|
|
data={objectives} |
|
|
|
data={objectives} |
|
|
|
config={editorConfig} |
|
|
|
config={editorConfig} |
|
|
|
onChange={ ( event, editor ) => { |
|
|
|
onChange={(event, editor) => { |
|
|
|
const data = editor.getData(); |
|
|
|
const data = editor.getData(); |
|
|
|
setObjectives(data); |
|
|
|
setObjectives(data); |
|
|
|
} } |
|
|
|
}} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
@ -1015,14 +1016,14 @@ const DialogFormProyek = ({ |
|
|
|
editor={ClassicEditor} |
|
|
|
editor={ClassicEditor} |
|
|
|
data={projectIsConsideredSuccessful} |
|
|
|
data={projectIsConsideredSuccessful} |
|
|
|
config={editorConfig} |
|
|
|
config={editorConfig} |
|
|
|
onChange={ ( event, editor ) => { |
|
|
|
onChange={(event, editor) => { |
|
|
|
const data = editor.getData(); |
|
|
|
const data = editor.getData(); |
|
|
|
setProjectIsConsideredSuccessful(data); |
|
|
|
setProjectIsConsideredSuccessful(data); |
|
|
|
} } |
|
|
|
}} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
<Row style={{ marginTop:"20px" }}> |
|
|
|
<Row style={{ marginTop: "20px" }}> |
|
|
|
<Col md={3}> |
|
|
|
<Col md={3}> |
|
|
|
<b>Project Participants</b> |
|
|
|
<b>Project Participants</b> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
@ -1052,7 +1053,7 @@ const DialogFormProyek = ({ |
|
|
|
<div style={{ marginBottom: 50 }}>{RenderParticipants()}</div> |
|
|
|
<div style={{ marginBottom: 50 }}>{RenderParticipants()}</div> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
<Row style={{ marginTop:"20px" }}> |
|
|
|
<Row style={{ marginTop: "20px" }}> |
|
|
|
<Col md={3}> |
|
|
|
<Col md={3}> |
|
|
|
<b>Testing Environment</b> |
|
|
|
<b>Testing Environment</b> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
@ -1061,14 +1062,14 @@ const DialogFormProyek = ({ |
|
|
|
editor={ClassicEditor} |
|
|
|
editor={ClassicEditor} |
|
|
|
data={testingEnv} |
|
|
|
data={testingEnv} |
|
|
|
config={editorConfig} |
|
|
|
config={editorConfig} |
|
|
|
onChange={ ( event, editor ) => { |
|
|
|
onChange={(event, editor) => { |
|
|
|
const data = editor.getData(); |
|
|
|
const data = editor.getData(); |
|
|
|
setTestingEnv(data); |
|
|
|
setTestingEnv(data); |
|
|
|
} } |
|
|
|
}} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
<Row style={{ marginTop:"20px" }}> |
|
|
|
<Row style={{ marginTop: "20px" }}> |
|
|
|
<Col md={3}> |
|
|
|
<Col md={3}> |
|
|
|
<b>Milestones</b> |
|
|
|
<b>Milestones</b> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
@ -1098,7 +1099,7 @@ const DialogFormProyek = ({ |
|
|
|
<div style={{ marginBottom: 50 }}>{RenderMilestones()}</div> |
|
|
|
<div style={{ marginBottom: 50 }}>{RenderMilestones()}</div> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
<Row style={{ marginTop:"20px" }}> |
|
|
|
<Row style={{ marginTop: "20px" }}> |
|
|
|
<Col md={3}> |
|
|
|
<Col md={3}> |
|
|
|
<b>Potential Risk</b> |
|
|
|
<b>Potential Risk</b> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
@ -1131,7 +1132,7 @@ const DialogFormProyek = ({ |
|
|
|
<div style={{ marginBottom: 50 }}>{RenderRisk()}</div> |
|
|
|
<div style={{ marginBottom: 50 }}>{RenderRisk()}</div> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
<Row style={{ marginTop:"20px" }}> |
|
|
|
<Row style={{ marginTop: "20px" }}> |
|
|
|
<Col md={3}> |
|
|
|
<Col md={3}> |
|
|
|
<b>Approval</b> |
|
|
|
<b>Approval</b> |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
@ -1166,7 +1167,7 @@ const DialogFormProyek = ({ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const RenderChecklist = () => { |
|
|
|
const RenderChecklist = () => { |
|
|
|
if (checklist.length > 0) { |
|
|
|
if (checklist?.length > 0) { |
|
|
|
return checklist.map((item, index) => { |
|
|
|
return checklist.map((item, index) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Row key={index} style={{ marginBottom: 10 }}> |
|
|
|
<Row key={index} style={{ marginBottom: 10 }}> |
|
|
|
@ -1280,7 +1281,7 @@ const DialogFormProyek = ({ |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const RenderRisk = () => { |
|
|
|
const RenderRisk = () => { |
|
|
|
if (potentialRisks.length > 0) { |
|
|
|
if (potentialRisks?.length > 0) { |
|
|
|
return potentialRisks.map((item, index) => { |
|
|
|
return potentialRisks.map((item, index) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Row key={index} style={{ marginBottom: 10 }}> |
|
|
|
<Row key={index} style={{ marginBottom: 10 }}> |
|
|
|
@ -1348,7 +1349,7 @@ const DialogFormProyek = ({ |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const RenderParticipants = () => { |
|
|
|
const RenderParticipants = () => { |
|
|
|
if (participants.length > 0) { |
|
|
|
if (participants?.length > 0) { |
|
|
|
return participants.map((item, index) => { |
|
|
|
return participants.map((item, index) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Row key={index} style={{ marginBottom: 10 }}> |
|
|
|
<Row key={index} style={{ marginBottom: 10 }}> |
|
|
|
@ -1516,7 +1517,11 @@ const DialogFormProyek = ({ |
|
|
|
: "Add Project" |
|
|
|
: "Add Project" |
|
|
|
: "Project Charter"} |
|
|
|
: "Project Charter"} |
|
|
|
</ModalHeader> |
|
|
|
</ModalHeader> |
|
|
|
<ModalBody>{ RenderFormProject() }</ModalBody> |
|
|
|
<ModalBody> |
|
|
|
|
|
|
|
<Spin tip="Loading..." spinning={loading}> |
|
|
|
|
|
|
|
{RenderFormProject()} |
|
|
|
|
|
|
|
</Spin> |
|
|
|
|
|
|
|
</ModalBody> |
|
|
|
<ModalFooter> |
|
|
|
<ModalFooter> |
|
|
|
{step === 1 ? ( |
|
|
|
{step === 1 ? ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
|
root
1 year ago