create form risk, issue, checklist

src/views/SimproV2/CreatedProyek/DialogFormProyek.js

@@ -16,6 +16,9 @@ import {
 	PROYEK_GET_ID,
 	PROJECT_MILESTONE_WHERE_CUSTOM,
 	PROJECT_PARTICIPANT_WHERE_CUSTOM,
+	PROJECT_CHECKLIST_WHERE_CUSTOM,
+	PROJECT_ISSUE_WHERE_CUSTOM,
+  PROJECT_RISK_WHERE_CUSTOM,
 	PROJECT_APPROVAL_WHERE_CUSTOM,
 	CURRENCY_LIST,
 } from "../../../const/ApiConst";
@@ -70,14 +73,19 @@ const DialogFormProyek = ({
 	const [objectives, setObjectives] = useState("");
 	const [projectIsConsideredSuccessful, setProjectIsConsideredSuccessful] = useState("");
 	const [participants, setParticipants] = useState([]);
+	const [checklist, setChecklist] = useState([]);
+	const [issue, setIssue] = useState([]);
   const [image, setImage] = useState("")
 	const [availableResources, setAvailableResources] = useState("");
 	const [milestones, setMilestones] = useState([]);
-	const [potentialRisks, setPotentialRisks] = useState("");
+	const [potentialRisks, setPotentialRisks] = useState([]);
 	const [approval, setApproval] = useState([]);
 	const [testingEnv, setTestingEnv] = useState("");
 
 	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 [lastIdxApproval, setLastIdxApproval] = useState(0);
 
@@ -108,7 +116,6 @@ const DialogFormProyek = ({
 			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 : ""
 			);
@@ -141,7 +148,31 @@ const DialogFormProyek = ({
 			.get(`${PROJECT_PARTICIPANT_WHERE_CUSTOM("proyek_id", id)}`, HEADER)
 			.then((res) => res)
 			.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 () => {
@@ -179,12 +210,15 @@ const DialogFormProyek = ({
 		setImage("");
 		setProjectIsConsideredSuccessful("");
 		setParticipants([]);
+		setChecklist([]);
+		setIssue([]);
 		setAvailableResources("");
 		setMilestones([]);
-		setPotentialRisks("");
+		setPotentialRisks([]);
 		setApproval([]);
 		setTestingEnv("");
 		setLastIdxParticipants(0);
+		setLastIdxChecklists(0);
 		setLastIdxMilestones(0);
 		setLastIdxApproval(0);
 		setStep(1);
@@ -198,6 +232,9 @@ const DialogFormProyek = ({
 		if (idTask && idTask > 0) {
 			handleGetdataIdproyek(idTask);
 			handleGetDataParticipants(idTask);
+			handleGetDataChecklist(idTask);
+			handleGetDataIssue(idTask);
+			handleGetDataRisk(idTask);
 			handleGetDataMileStone(idTask);
 			handleGetDataApproval(idTask);
 		} else {
@@ -230,13 +267,12 @@ const DialogFormProyek = ({
 				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 };
+			data.projectCharter = { checklist, issue, potentialRisks, participants, milestones, approval };
       data.imageStructureOrg = organization ? organization : null;
 			closeDialog("edit", data);
 		} else {
@@ -261,13 +297,12 @@ const DialogFormProyek = ({
 				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 };
+      data.projectCharter = { checklist, issue, potentialRisks, participants, milestones, approval };
       data.imageStructureOrg = organization ? organization : null;
 
     closeDialog("add", data);
@@ -370,11 +405,87 @@ const DialogFormProyek = ({
 		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 { name, value } = e.target;
 		const newParticipants = [...participants];
 		newParticipants[index][name] = value;
 		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) => {
@@ -385,6 +496,36 @@ const DialogFormProyek = ({
 				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 = () => {
@@ -657,7 +798,7 @@ const DialogFormProyek = ({
           <Row>
             <Col md={6}>
               <FormGroup>
-                <Label className="capitalize">organizational Structure</Label>
+                <Label className="capitalize">Organizational Structure</Label>
                 <Input
                   type="file"
                   accept="image/*"
@@ -705,6 +846,63 @@ const DialogFormProyek = ({
               />
             </Col>
           </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>
             Info Dashboard
           </Divider>
@@ -798,15 +996,17 @@ const DialogFormProyek = ({
 							<Col md={2}>
 								<b>Action</b>
 							</Col>
-							<Col md={1}>
-								<Button
-									size="sm"
-									color="primary"
-									onClick={() => addParticipant()}
-								>
-									<i className="fa fa-plus"></i>
-								</Button>
-							</Col>
+              <Col md={1}>
+                <Tooltip title="Add row">
+                  <Button
+                    size="sm"
+                    color="primary"
+                    onClick={() => addParticipant()}
+                  >
+                    <i className="fa fa-plus"></i>
+                  </Button>
+                </Tooltip>
+              </Col>
 						</Row>
 						<div style={{ marginBottom: 50 }}>{RenderParticipants()}</div>
 					</Col>
@@ -842,34 +1042,53 @@ const DialogFormProyek = ({
 								<b>Action</b>
 							</Col>
 							<Col md={1}>
-								<Button
-									size="sm"
-									color="primary"
-									onClick={() => addMilestone()}
-								>
-									<i className="fa fa-plus"></i>
-								</Button>
+                <Tooltip title="Add row">
+                  <Button
+                    size="sm"
+                    color="primary"
+                    onClick={() => addMilestone()}
+                  >
+                    <i className="fa fa-plus"></i>
+                  </Button>
+                </Tooltip>
 							</Col>
 						</Row>
 						<div style={{ marginBottom: 50 }}>{RenderMilestones()}</div>
 					</Col>
 				</Row>
-				<Row>
-					<Col md={3}>
-						<b>Potential risks</b>
-					</Col>
-					<Col md={9}>
-						<FormGroup>
-							<Input
-								type="textarea"
-								value={potentialRisks}
-								onChange={(e) => setPotentialRisks(e.target.value)}
-								placeholder={`List of risks`}
-								rows={5}
-							/>
-						</FormGroup>
+        <Row>
+          <Col md={3}>
+						<b>Potential Risk</b>
 					</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>
 					<Col md={3}>
 						<b>Approval</b>
@@ -887,12 +1106,14 @@ const DialogFormProyek = ({
 							</Col>
 							<Col md={2}>
 								<b>Action</b>
-							</Col>
-							<Col md={1}>
-								<Button size="sm" color="primary" onClick={() => addApproval()}>
-									<i className="fa fa-plus"></i>
-								</Button>
-							</Col>
+                </Col>
+              <Tooltip title="Add row">
+                <Col md={1}>
+                  <Button size="sm" color="primary" onClick={() => addApproval()}>
+                    <i className="fa fa-plus"></i>
+                  </Button>
+                </Col>
+              </Tooltip>
 						</Row>
 						<div style={{ marginBottom: 50 }}>{RenderApproval()}</div>
 					</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 = () => {
 		if (participants.length > 0) {
 			return participants.map((item, index) => {
@@ -910,7 +1313,7 @@ const DialogFormProyek = ({
 						<Col md={4}>
 							<Input
 								type="text"
-								value={item.tittle ? item.tittle : item.title}
+								value={item.tittle ? item.tittle : "-"}
 								name="title"
 								onChange={(e) => handleInputChangeParticipants(e, index)}
 							/>