Browse Source

create form risk, issue, checklist

pull/2/head
wahyuun 1 year ago
parent
commit
d7ff769b0c
  1. 497
      src/views/SimproV2/CreatedProyek/DialogFormProyek.js

497
src/views/SimproV2/CreatedProyek/DialogFormProyek.js

@ -16,6 +16,9 @@ import {
PROYEK_GET_ID, PROYEK_GET_ID,
PROJECT_MILESTONE_WHERE_CUSTOM, PROJECT_MILESTONE_WHERE_CUSTOM,
PROJECT_PARTICIPANT_WHERE_CUSTOM, PROJECT_PARTICIPANT_WHERE_CUSTOM,
PROJECT_CHECKLIST_WHERE_CUSTOM,
PROJECT_ISSUE_WHERE_CUSTOM,
PROJECT_RISK_WHERE_CUSTOM,
PROJECT_APPROVAL_WHERE_CUSTOM, PROJECT_APPROVAL_WHERE_CUSTOM,
CURRENCY_LIST, CURRENCY_LIST,
} from "../../../const/ApiConst"; } from "../../../const/ApiConst";
@ -70,14 +73,19 @@ const DialogFormProyek = ({
const [objectives, setObjectives] = useState(""); const [objectives, setObjectives] = useState("");
const [projectIsConsideredSuccessful, setProjectIsConsideredSuccessful] = useState(""); const [projectIsConsideredSuccessful, setProjectIsConsideredSuccessful] = useState("");
const [participants, setParticipants] = useState([]); const [participants, setParticipants] = useState([]);
const [checklist, setChecklist] = useState([]);
const [issue, setIssue] = useState([]);
const [image, setImage] = useState("") const [image, setImage] = useState("")
const [availableResources, setAvailableResources] = useState(""); const [availableResources, setAvailableResources] = useState("");
const [milestones, setMilestones] = useState([]); const [milestones, setMilestones] = useState([]);
const [potentialRisks, setPotentialRisks] = useState(""); const [potentialRisks, setPotentialRisks] = useState([]);
const [approval, setApproval] = useState([]); const [approval, setApproval] = useState([]);
const [testingEnv, setTestingEnv] = useState(""); const [testingEnv, setTestingEnv] = useState("");
const [lastIdxParticipants, setLastIdxParticipants] = useState(0); const [lastIdxParticipants, setLastIdxParticipants] = useState(0);
const [lastIdxChecklists, setLastIdxChecklists] = useState(0);
const [lastIdxIssues, setLastIdxIssues] = 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);
@ -108,7 +116,6 @@ const DialogFormProyek = ({
setFinance(val.finance); setFinance(val.finance);
setObjectives(val.project_objectives ? val.project_objectives : ""); setObjectives(val.project_objectives ? val.project_objectives : "");
setTestingEnv(val.testing_environment); setTestingEnv(val.testing_environment);
setPotentialRisks(val.potential_risk);
setProjectIsConsideredSuccessful( setProjectIsConsideredSuccessful(
val.considered_success_when ? val.considered_success_when : "" val.considered_success_when ? val.considered_success_when : ""
); );
@ -141,7 +148,31 @@ const DialogFormProyek = ({
.get(`${PROJECT_PARTICIPANT_WHERE_CUSTOM("proyek_id", id)}`, HEADER) .get(`${PROJECT_PARTICIPANT_WHERE_CUSTOM("proyek_id", id)}`, HEADER)
.then((res) => res) .then((res) => res)
.catch((err) => err.response); .catch((err) => err.response);
setParticipants(result.data.data); setParticipants(result.data.data);
};
const handleGetDataChecklist = async (id) => {
const result = await axios
.get(`${PROJECT_CHECKLIST_WHERE_CUSTOM("proyek_id", id)}`, HEADER)
.then((res) => res)
.catch((err) => err.response);
setChecklist(result.data.data);
};
const handleGetDataIssue = async (id) => {
const result = await axios
.get(`${PROJECT_ISSUE_WHERE_CUSTOM("proyek_id", id)}`, HEADER)
.then((res) => res)
.catch((err) => err.response);
setIssue(result.data.data);
};
const handleGetDataRisk = async (id) => {
const result = await axios
.get(`${PROJECT_RISK_WHERE_CUSTOM("proyek_id", id)}`, HEADER)
.then((res) => res)
.catch((err) => err.response);
setPotentialRisks(result.data.data);
}; };
const handleGetDataCurrency = async () => { const handleGetDataCurrency = async () => {
@ -179,12 +210,15 @@ const DialogFormProyek = ({
setImage(""); setImage("");
setProjectIsConsideredSuccessful(""); setProjectIsConsideredSuccessful("");
setParticipants([]); setParticipants([]);
setChecklist([]);
setIssue([]);
setAvailableResources(""); setAvailableResources("");
setMilestones([]); setMilestones([]);
setPotentialRisks(""); setPotentialRisks([]);
setApproval([]); setApproval([]);
setTestingEnv(""); setTestingEnv("");
setLastIdxParticipants(0); setLastIdxParticipants(0);
setLastIdxChecklists(0);
setLastIdxMilestones(0); setLastIdxMilestones(0);
setLastIdxApproval(0); setLastIdxApproval(0);
setStep(1); setStep(1);
@ -198,6 +232,9 @@ const DialogFormProyek = ({
if (idTask && idTask > 0) { if (idTask && idTask > 0) {
handleGetdataIdproyek(idTask); handleGetdataIdproyek(idTask);
handleGetDataParticipants(idTask); handleGetDataParticipants(idTask);
handleGetDataChecklist(idTask);
handleGetDataIssue(idTask);
handleGetDataRisk(idTask);
handleGetDataMileStone(idTask); handleGetDataMileStone(idTask);
handleGetDataApproval(idTask); handleGetDataApproval(idTask);
} else { } else {
@ -230,13 +267,12 @@ const DialogFormProyek = ({
keterangan: description, keterangan: description,
project_objectives: objectives, project_objectives: objectives,
considered_success_when: projectIsConsideredSuccessful, considered_success_when: projectIsConsideredSuccessful,
potential_risk: potentialRisks,
testing_environment: testingEnv, testing_environment: testingEnv,
currency_symbol: currencySymbol, currency_symbol: currencySymbol,
currency_code: currencyCode, currency_code: currencyCode,
currency_name: currencyName, currency_name: currencyName,
}; };
data.projectCharter = { participants, milestones, approval }; data.projectCharter = { checklist, issue, potentialRisks, participants, milestones, approval };
data.imageStructureOrg = organization ? organization : null; data.imageStructureOrg = organization ? organization : null;
closeDialog("edit", data); closeDialog("edit", data);
} else { } else {
@ -261,13 +297,12 @@ const DialogFormProyek = ({
keterangan: description, keterangan: description,
project_objectives: objectives, project_objectives: objectives,
considered_success_when: projectIsConsideredSuccessful, considered_success_when: projectIsConsideredSuccessful,
potential_risk: potentialRisks,
testing_environment: testingEnv, testing_environment: testingEnv,
currency_symbol: currencySymbol, currency_symbol: currencySymbol,
currency_code: currencyCode, currency_code: currencyCode,
currency_name: currencyName, currency_name: currencyName,
}; };
data.projectCharter = { participants, milestones, approval }; data.projectCharter = { checklist, issue, potentialRisks, participants, milestones, approval };
data.imageStructureOrg = organization ? organization : null; data.imageStructureOrg = organization ? organization : null;
closeDialog("add", data); closeDialog("add", data);
@ -370,11 +405,87 @@ const DialogFormProyek = ({
setLastIdxParticipants(lastIdxParticipants + 1); setLastIdxParticipants(lastIdxParticipants + 1);
}; };
const addChecklist = () => {
checklist.push({
id: lastIdxChecklists + 1,
item: "",
status_exist: "",
});
setChecklist(checklist);
setLastIdxChecklists(lastIdxChecklists + 1);
};
const addIssue = () => {
issue.push({
id: lastIdxIssues + 1,
description: "",
level_issue: "",
});
setIssue(issue);
setLastIdxIssues(lastIdxIssues + 1);
};
const addRisk = () => {
potentialRisks.push({
id: lastIdxRisks + 1,
level_risk: "",
description: "",
preventive_risk: "",
});
setPotentialRisks(potentialRisks);
setLastIdxRisks(lastIdxRisks + 1);
};
const handleInputChangeParticipants = (e, index) => { const handleInputChangeParticipants = (e, index) => {
const { name, value } = e.target; const { name, value } = e.target;
const newParticipants = [...participants]; const newParticipants = [...participants];
newParticipants[index][name] = value; newParticipants[index][name] = value;
setParticipants(newParticipants); setParticipants(newParticipants);
};
const handleInputChangeChecklists = (e, index) => {
if (e === true || e === false) {
const value = e;
const name = "status_exist";
const newChecklists = [...checklist];
newChecklists[index][name] = value;
setChecklist(newChecklists);
} else {
const { name, value } = e.target;
const newChecklists = [...checklist];
newChecklists[index][name] = value;
setChecklist(newChecklists);
}
};
const handleInputChangeIssues = (e, index) => {
if (e === 1 || e === 2|| e === 3|| e === 4|| e === 5|| e === 6|| e === 7) {
const value = e;
const name = "level_issue";
const newIssues = [...issue];
newIssues[index][name] = value;
setIssue(newIssues);
} else {
const { name, value } = e.target;
const newIssues = [...issue];
newIssues[index][name] = value;
setIssue(newIssues);
}
};
const handleInputChangeRisks = (e, index) => {
if (e === 1 || e === 2 || e === 3 || e === 4 || e === 5 || e === 6 || e === 7) {
const value = e;
const name = "level_risk";
const newRisks = [...potentialRisks];
newRisks[index][name] = value;
setPotentialRisks(newRisks);
} else {
const { name, value } = e.target;
const newRisks = [...potentialRisks];
newRisks[index][name] = value;
setPotentialRisks(newRisks);
}
}; };
const deleteParticipant = (id) => { const deleteParticipant = (id) => {
@ -385,6 +496,36 @@ const DialogFormProyek = ({
setParticipants(participants.filter((_, i2) => i2 !== id)); setParticipants(participants.filter((_, i2) => i2 !== id));
} }
} }
};
const deleteChecklists = (id) => {
if (checklist && checklist.length > 0) {
let checkIdx = checklist.findIndex((o) => o.id === id);
if (checkIdx > -1) {
checklist.splice(checkIdx, 1);
setChecklist(checklist.filter((_, i2) => i2 !== id));
}
}
};
const deleteIssues = (id) => {
if (issue && issue.length > 0) {
let issueIdx = issue.findIndex((o) => o.id === id);
if (issueIdx > -1) {
issue.splice(issueIdx, 1);
setIssue(issue.filter((_, i2) => i2 !== id));
}
}
};
const deleteRisks = (id) => {
if (potentialRisks && potentialRisks.length > 0) {
let riskIdx = potentialRisks.findIndex((o) => o.id === id);
if (riskIdx > -1) {
potentialRisks.splice(riskIdx, 1);
setPotentialRisks(potentialRisks.filter((_, i2) => i2 !== id));
}
}
}; };
const addMilestone = () => { const addMilestone = () => {
@ -657,7 +798,7 @@ const DialogFormProyek = ({
<Row> <Row>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">organizational Structure</Label> <Label className="capitalize">Organizational Structure</Label>
<Input <Input
type="file" type="file"
accept="image/*" accept="image/*"
@ -705,6 +846,63 @@ const DialogFormProyek = ({
/> />
</Col> </Col>
</Row> </Row>
<Row>
<Col md={12}>
<Label className="capitalize">Project Checklist</Label>
<Row>
<Col md={5}>
<b>Item</b>
</Col>
<Col md={4}>
<b>Availability</b>
</Col>
<Col md={2}>
<b>Action</b>
</Col>
<Col md={1}>
<Tooltip title="Add row">
<Button
size="sm"
color="primary"
onClick={() => addChecklist()}
>
<i className="fa fa-plus"></i>
</Button>
</Tooltip>
</Col>
</Row>
<div style={{ marginBottom: 50 }}>{RenderChecklist()}</div>
</Col>
</Row>
<Divider orientation="left" plain></Divider>
<Row>
<Col md={12}>
<Label className="capitalize">Issues & Obstacles</Label>
<Row>
<Col md={5}>
<b>Issu Level</b>
</Col>
<Col md={4}>
<b>Description</b>
</Col>
<Col md={2}>
<b>Action</b>
</Col>
<Col md={1}>
<Tooltip title="Add row">
<Button
size="sm"
color="primary"
onClick={() => addIssue()}
>
<i className="fa fa-plus"></i>
</Button>
</Tooltip>
</Col>
</Row>
<div style={{ marginBottom: 50 }}>{RenderIssue()}</div>
</Col>
</Row>
<Divider orientation="left" plain> <Divider orientation="left" plain>
Info Dashboard Info Dashboard
</Divider> </Divider>
@ -798,15 +996,17 @@ const DialogFormProyek = ({
<Col md={2}> <Col md={2}>
<b>Action</b> <b>Action</b>
</Col> </Col>
<Col md={1}> <Col md={1}>
<Button <Tooltip title="Add row">
size="sm" <Button
color="primary" size="sm"
onClick={() => addParticipant()} color="primary"
> onClick={() => addParticipant()}
<i className="fa fa-plus"></i> >
</Button> <i className="fa fa-plus"></i>
</Col> </Button>
</Tooltip>
</Col>
</Row> </Row>
<div style={{ marginBottom: 50 }}>{RenderParticipants()}</div> <div style={{ marginBottom: 50 }}>{RenderParticipants()}</div>
</Col> </Col>
@ -842,34 +1042,53 @@ const DialogFormProyek = ({
<b>Action</b> <b>Action</b>
</Col> </Col>
<Col md={1}> <Col md={1}>
<Button <Tooltip title="Add row">
size="sm" <Button
color="primary" size="sm"
onClick={() => addMilestone()} color="primary"
> onClick={() => addMilestone()}
<i className="fa fa-plus"></i> >
</Button> <i className="fa fa-plus"></i>
</Button>
</Tooltip>
</Col> </Col>
</Row> </Row>
<div style={{ marginBottom: 50 }}>{RenderMilestones()}</div> <div style={{ marginBottom: 50 }}>{RenderMilestones()}</div>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col md={3}> <Col md={3}>
<b>Potential risks</b> <b>Potential Risk</b>
</Col>
<Col md={9}>
<FormGroup>
<Input
type="textarea"
value={potentialRisks}
onChange={(e) => setPotentialRisks(e.target.value)}
placeholder={`List of risks`}
rows={5}
/>
</FormGroup>
</Col> </Col>
</Row> <Col md={9}>
<Row>
<Col md={3}>
<b>Risk Level</b>
</Col>
<Col md={3}>
<b>Description</b>
</Col>
<Col md={3}>
<b>Prevention</b>
</Col>
<Col md={2}>
<b>Action</b>
</Col>
<Col md={1}>
<Tooltip title="Add row">
<Button
size="sm"
color="primary"
onClick={() => addRisk()}
>
<i className="fa fa-plus"></i>
</Button>
</Tooltip>
</Col>
</Row>
<div style={{ marginBottom: 50 }}>{RenderRisk()}</div>
</Col>
</Row>
<Row> <Row>
<Col md={3}> <Col md={3}>
<b>Approval</b> <b>Approval</b>
@ -887,12 +1106,14 @@ const DialogFormProyek = ({
</Col> </Col>
<Col md={2}> <Col md={2}>
<b>Action</b> <b>Action</b>
</Col> </Col>
<Col md={1}> <Tooltip title="Add row">
<Button size="sm" color="primary" onClick={() => addApproval()}> <Col md={1}>
<i className="fa fa-plus"></i> <Button size="sm" color="primary" onClick={() => addApproval()}>
</Button> <i className="fa fa-plus"></i>
</Col> </Button>
</Col>
</Tooltip>
</Row> </Row>
<div style={{ marginBottom: 50 }}>{RenderApproval()}</div> <div style={{ marginBottom: 50 }}>{RenderApproval()}</div>
</Col> </Col>
@ -902,6 +1123,188 @@ const DialogFormProyek = ({
) )
} }
const RenderChecklist = () => {
if (checklist.length > 0) {
return checklist.map((item, index) => {
return (
<Row key={index} style={{ marginBottom: 10 }}>
<Col md={5}>
<Input
type="text"
value={item.item ? item.item : ""}
name="item"
onChange={(e) => handleInputChangeChecklists(e, index)}
/>
</Col>
<Col md={4}>
<FormGroup>
<Select
value={item.status_exist}
name="status_exist"
onChange={(e) => handleInputChangeChecklists(e, index)}
style={{ width: 150 }}
>
<Option value={true}>Tersedia</Option>
<Option value={false}>Tidak tersedia</Option>
</Select>
</FormGroup>
</Col>
<Col md={3}>
<Button
color="danger"
size="sm"
onClick={() => deleteChecklists(item.id)}
>
<i className="fa fa-trash"></i>
</Button>
</Col>
</Row>
);
});
} else if (checklist.length < 1) {
return (
<div
style={{
textAlign: "center",
color: "red",
marginTop: 25,
marginBottom: 25,
}}
>
No checklist found
</div>
);
}
};
const RenderIssue = () => {
if (issue.length > 0) {
return issue.map((item, index) => {
return (
<Row key={index} style={{ marginBottom: 10 }}>
<Col md={4}>
<FormGroup>
<Select
value={item.level_issue === 0 ? "0 (Undefined)" : item.level_issue}
name="level_issue"
onChange={(e) => handleInputChangeIssues(e, index)}
style={{ width: 150 }}
>
<Option value={1}>Level 1</Option>
<Option value={2}>Level 2</Option>
<Option value={3}>Level 3</Option>
<Option value={4}>Level 4</Option>
<Option value={5}>Level 5</Option>
<Option value={6}>Level 6</Option>
<Option value={7}>Level 7</Option>
</Select>
<Label>*Skala 1 ke 7 (1 = Kecil, 7 = Besar)</Label>
</FormGroup>
</Col>
<Col md={5}>
<Input
type="textarea"
value={item.description ? item.description : ""}
name="description"
onChange={(e) => handleInputChangeIssues(e, index)}
/>
</Col>
<Col md={3}>
<Button
color="danger"
size="sm"
onClick={() => deleteIssues(item.id)}
>
<i className="fa fa-trash"></i>
</Button>
</Col>
</Row>
);
});
} else if (issue.length < 1) {
return (
<div
style={{
textAlign: "center",
color: "red",
marginTop: 25,
marginBottom: 25,
}}
>
No Issue found
</div>
);
}
};
const RenderRisk = () => {
if (potentialRisks.length > 0) {
return potentialRisks.map((item, index) => {
return (
<Row key={index} style={{ marginBottom: 10 }}>
<Col md={3}>
<FormGroup>
<Select
value={item.level_risk === 0 ? "0 (Undefined)" : item.level_risk}
name="level_risk"
onChange={(e) => handleInputChangeRisks(e, index)}
style={{ width: 110 }}
>
<Option value={1}>Level 1</Option>
<Option value={2}>Level 2</Option>
<Option value={3}>Level 3</Option>
<Option value={4}>Level 4</Option>
<Option value={5}>Level 5</Option>
<Option value={6}>Level 6</Option>
<Option value={7}>Level 7</Option>
</Select>
<Label>*Skala 1 ke 7 (1 = Kecil, 7 = Besar)</Label>
</FormGroup>
</Col>
<Col md={3}>
<Input
type="textarea"
value={item.description ? item.description : ""}
name="description"
onChange={(e) => handleInputChangeRisks(e, index)}
/>
</Col>
<Col md={3}>
<Input
type="textarea"
value={item.preventive_risk ? item.preventive_risk : ""}
name="preventive_risk"
onChange={(e) => handleInputChangeRisks(e, index)}
/>
</Col>
<Col md={3}>
<Button
color="danger"
size="sm"
onClick={() => deleteRisks(item.id)}
>
<i className="fa fa-trash"></i>
</Button>
</Col>
</Row>
);
});
} else if (potentialRisks.length < 1) {
return (
<div
style={{
textAlign: "center",
color: "red",
marginTop: 25,
marginBottom: 25,
}}
>
No Risk found
</div>
);
}
};
const RenderParticipants = () => { const RenderParticipants = () => {
if (participants.length > 0) { if (participants.length > 0) {
return participants.map((item, index) => { return participants.map((item, index) => {
@ -910,7 +1313,7 @@ const DialogFormProyek = ({
<Col md={4}> <Col md={4}>
<Input <Input
type="text" type="text"
value={item.tittle ? item.tittle : item.title} value={item.tittle ? item.tittle : "-"}
name="title" name="title"
onChange={(e) => handleInputChangeParticipants(e, index)} onChange={(e) => handleInputChangeParticipants(e, index)}
/> />

Loading…
Cancel
Save