{
- 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 [description, setDesctription] = useState("")
- const [calculationType, setCalculationType] = useState("detail")
- const handleCLearData = () => {
- setId(0)
- setName("")
- setDesctription("")
- }
-
- useEffect(() => {
- handleCLearData()
- }, [openDialog])
-
- const handleSave = () => {
- saveVersionGantt()
- handleCLearData()
- }
-
- const saveVersionGantt = async () => {
-
- const formData = {
- name_version: name,
- description,
- calculation_type: calculationType,
- proyek_id: idTask,
- hierarchy_ftth_id: parentId
-
- }
- const result = await axios
- .post(VERSION_GANTT_ADD, formData, HEADER)
- .then(res => res)
- .catch((error) => error.response);
-
- if (result && result.status == 200) {
- closeDialog('success')
- } else {
- closeDialog('failed')
- }
- }
-
- const handleCancel = () => {
- closeDialog('cancel')
- handleCLearData()
- }
-
- const renderForm = () => {
- return (
-
- )
- }
-
- return (
- <>
-
- Add Gantt Project
-
- {renderForm()}
-
-
- {' '}
-
-
-
-
- )
-
-}
-
-export default DialogFormGantt;
+import React, { useEffect, useState } from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap';
+import axios from "../../../const/interceptorApi";
+import { VERSION_GANTT_ADD, VERSION_GANTT_EDIT } from '../../../const/ApiConst';
+import { Select } from 'antd';
+import 'antd/dist/antd.css';
+
+const DialogFormGantt = ({ openDialog, closeDialog, toggleDialog, idTask, parentId, dataEdit, typeDialog}) => {
+ 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 [description, setDesctription] = useState("")
+ const [calculationType, setCalculationType] = useState("detail")
+ const handleCLearData = () => {
+ setId(0)
+ setName("")
+ setDesctription("")
+ }
+ const validation = () => {
+ if (!name || name === "") {
+ alert("Gantt Name cannot be empty!");
+ return true;
+ }
+ }
+ useEffect(() => {
+ if(typeDialog === "Edit")
+ {
+ setId(dataEdit.id);
+ setName(dataEdit.name_version);
+ setDesctription(dataEdit.description);
+ setCalculationType(dataEdit.calculation_type);
+ } else {
+ handleCLearData()
+ }
+
+ }, [dataEdit, openDialog])
+
+ const handleSave = () => {
+ let data = '';
+ const err = validation();
+ if (!err) {
+ if (typeDialog === "Edit") {
+ data = {
+ id,
+ name,
+ description,
+ calculationType
+ };
+ editVersionGantt(data)
+ } else {
+ saveVersionGantt()
+ }
+ handleCLearData()
+ }
+ }
+
+ const saveVersionGantt = async () => {
+
+ const formData = {
+ name_version: name,
+ description,
+ calculation_type: calculationType,
+ proyek_id: idTask,
+ hierarchy_ftth_id: parentId
+
+ }
+ const result = await axios
+ .post(VERSION_GANTT_ADD, formData, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.status == 200) {
+ closeDialog('Save')
+ } else {
+ closeDialog('failed')
+ }
+ }
+
+ const editVersionGantt = async (data) => {
+
+ const formData = {
+ name_version: data.name,
+ description:data.description,
+ calculation_type: data.calculationType,
+ proyek_id: idTask,
+ hierarchy_ftth_id: parentId
+
+ }
+ const url = VERSION_GANTT_EDIT(data.id);
+ const result = await axios.put(url, formData, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.status == 200) {
+ closeDialog('Edit')
+ } else {
+ closeDialog('failed')
+ }
+ }
+
+ const handleCancel = () => {
+ closeDialog('cancel')
+ handleCLearData()
+ }
+
+ const renderForm = () => {
+ return (
+
+ )
+ }
+
+ return (
+ <>
+
+ {typeDialog == "Edit" ? "Edit" :"Tambah"} Gantt Project
+
+ {renderForm()}
+
+
+ {' '}
+
+
+
+
+ )
+
+}
+
+export default DialogFormGantt;
diff --git a/src/views/SimproV2/CreatedProyek/DialogFormProyek.js b/src/views/SimproV2/CreatedProyek/DialogFormProyek.js
index 75ec4c7..7dbe82b 100644
--- a/src/views/SimproV2/CreatedProyek/DialogFormProyek.js
+++ b/src/views/SimproV2/CreatedProyek/DialogFormProyek.js
@@ -1,1041 +1,1516 @@
-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 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;
-
-const DialogFormProyek = ({
- openDialog,
- closeDialog,
- toggleDialog,
- idTask,
- dataTypeProyek,
- dataPhaseProject,
- dataDivisions,
- 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 [divisiProject, setDivisiProject] = 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);
- setDivisiProject(val.divisi_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),
- divisi_id: parseInt(divisiProject),
- 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),
- divisi_id: parseInt(divisiProject),
- 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 onChangeDivisiProject = (val) => {
- setDivisiProject(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 (
-
- );
- };
-
- const renderFormCharter = () => {
- return (
-
- );
- };
-
- const RenderParticipants = () => {
- if (participants.length > 0) {
- return participants.map((item, index) => {
- return (
-
-
- );
- });
- } else if (participants.length < 1) {
- return (
-
-
- handleInputChangeMilestonesDate(date, "deadline", index)
- }
- />
-
-
- );
- });
- } else if (milestones.length < 1) {
- return (
-
-
- handleInputChangeApprovalDate(date, "date", index)
- }
- />
-
-
- );
- });
- } else if (approval.length < 1) {
- return (
-
-
- {step === 1
- ? idTask
- ? "Update Project"
- : "Add Project"
- : "Project Charter"}
-
- {step === 1 ? renderForm() : renderFormCharter()}
-
- {step === 1 ? (
- <>
- {" "}
-
-
- ) : (
- <>
- {" "}
-
-
- )}
-
-
-
- );
-};
-
-export default DialogFormProyek;
+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 axios from "../../../const/interceptorApi";
+import moment from "moment";
+import { CKEditor } from '@ckeditor/ckeditor5-react';
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+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_CHECKLIST_WHERE_CUSTOM,
+ PROJECT_ISSUE_WHERE_CUSTOM,
+ PROJECT_RISK_WHERE_CUSTOM,
+ PROJECT_APPROVAL_WHERE_CUSTOM,
+ CURRENCY_LIST,
+} from "../../../const/ApiConst";
+
+const { Option } = Select;
+
+const DialogFormProyek = ({
+ openDialog,
+ closeDialog,
+ toggleDialog,
+ idTask,
+ dataTypeProyek,
+ dataPhaseProject,
+ dataDivisions,
+ dataPM,
+ projectImage
+}) => {
+ 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 [late, setLateConsequence] = useState("");
+ const [assumtion, setAssumtion] = useState("");
+ const [biaya, setBiaya] = useState("");
+ const [typeProject, setTypeproject] = useState(null);
+ const [phaseProject, setPhaseProject] = useState(null);
+ const [divisiProject, setDivisiProject] = 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 [duration, setProjectDuration] = useState("");
+ const [organization, setProjectStructureOrg] = useState(null);
+ 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 [checklist, setChecklist] = useState([]);
+ const [issue, setIssue] = useState([]);
+ const [image, setImage] = 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 [lastIdxChecklists, setLastIdxChecklists] = useState(0);
+ const [lastIdxIssues, setLastIdxIssues] = useState(0);
+ const [lastIdxRisks, setLastIdxRisks] = 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);
+ setLateConsequence(val.late_consequence ? val.late_consequence : "");
+ setAssumtion(val.assumtion ? val.assumtion : "");
+ setBiaya(val.rencana_biaya ? formatNumber(val.rencana_biaya) : "");
+ setTypeproject(val.type_proyek_id);
+ setPhaseProject(val.phase_id);
+ setDivisiProject(val.divisi_id);
+ setHealthBudget(val.budget_health);
+ setPic(val.pm_id);
+ setStartDate(moment(val.mulai_proyek));
+ setEndDate(moment(val.akhir_proyek));
+ setWorkArea(val.area_kerja);
+ setProjectDuration(val.durasi_proyek);
+ setInvestor(val.investor);
+ setCompany(val.company);
+ setFinance(val.finance);
+ setObjectives(val.project_objectives ? val.project_objectives : "");
+ setTestingEnv(val.testing_environment);
+ 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 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 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("");
+ setLateConsequence("");
+ setAssumtion("");
+ setInvestor("");
+ setFinance("");
+ setWorkArea("");
+ setProjectDuration("");
+ setDivisiProject(null);
+ setProjectStructureOrg(null);
+ setCompany("");
+ setCurrency("");
+ setCurrencyCode("");
+ setCurrencySymbol(null);
+ setCurrencyName("");
+ setObjectives("");
+ setImage("");
+ setProjectIsConsideredSuccessful("");
+ setParticipants([]);
+ setChecklist([]);
+ setIssue([]);
+ setAvailableResources("");
+ setMilestones([]);
+ setPotentialRisks([]);
+ setApproval([]);
+ setTestingEnv("");
+ setLastIdxParticipants(0);
+ setLastIdxChecklists(0);
+ setLastIdxMilestones(0);
+ setLastIdxApproval(0);
+ setStep(1);
+ };
+
+ useEffect(() => {
+ if (openDialog) {
+ handleGetDataCurrency();
+ }
+
+ if (idTask && idTask > 0) {
+ handleGetdataIdproyek(idTask);
+ handleGetDataParticipants(idTask);
+ handleGetDataChecklist(idTask);
+ handleGetDataIssue(idTask);
+ handleGetDataRisk(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),
+ divisi_id: parseInt(divisiProject),
+ budget_health: budgetHealth,
+ pm_id: pic,
+ investor,
+ finance,
+ company,
+ area_kerja: workArea,
+ durasi_proyek: parseInt(duration),
+ late_consequence: late,
+ assumtion: assumtion,
+ keterangan: description,
+ project_objectives: objectives,
+ considered_success_when: projectIsConsideredSuccessful,
+ testing_environment: testingEnv,
+ currency_symbol: currencySymbol,
+ currency_code: currencyCode,
+ currency_name: currencyName,
+ };
+ data.projectCharter = { checklist, issue, potentialRisks, participants, milestones, approval };
+ data.imageStructureOrg = organization ? organization : null;
+ 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),
+ divisi_id: parseInt(divisiProject),
+ health_budget: budgetHealth,
+ pm_id: pic,
+ investor,
+ finance,
+ company,
+ area_kerja: workArea,
+ durasi_proyek: parseInt(duration),
+ late_consequence: late,
+ assumtion: assumtion,
+ keterangan: description,
+ project_objectives: objectives,
+ considered_success_when: projectIsConsideredSuccessful,
+ testing_environment: testingEnv,
+ currency_symbol: currencySymbol,
+ currency_code: currencyCode,
+ currency_name: currencyName,
+ };
+ data.projectCharter = { checklist, issue, potentialRisks, participants, milestones, approval };
+ data.imageStructureOrg = organization ? organization : null;
+
+ closeDialog("add", data);
+ }
+ handleClearData();
+ };
+
+ const handleCancel = () => {
+ closeDialog("cancel", "none");
+ handleClearData();
+ };
+
+ const onChangeTypeProject = (val) => {
+ setTypeproject(val);
+ };
+
+ const onChangePhaseProject = (val) => {
+ setPhaseProject(val);
+ };
+
+ const onChangeDivisiProject = (val) => {
+ setDivisiProject(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;
+ }
+ if (!currencySymbol || currencySymbol === "") {
+ alert("Currency Symbol 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 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) => {
+ 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 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 = () => {
+ 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 editorConfig = {
+ height: '900px'
+ };
+
+ const RenderFormProject = () => {
+ return (
+ <>
+
+
+
+
+ )
+ }
+
+ const RenderChecklist = () => {
+ if (checklist.length > 0) {
+ return checklist.map((item, index) => {
+ return (
+
+
+
+
+
+
+ );
+ });
+ } else if (checklist.length < 1) {
+ return (
+
+
+
+
+
+
+
+ );
+ });
+ } else if (issue.length < 1) {
+ return (
+
+
+
+
+
+
+
+ );
+ });
+ } else if (potentialRisks.length < 1) {
+ return (
+
+
+ );
+ });
+ } else if (participants.length < 1) {
+ return (
+
+
+ handleInputChangeMilestonesDate(date, "deadline", index)
+ }
+ />
+
+
+ );
+ });
+ } else if (milestones.length < 1) {
+ return (
+
+
+ handleInputChangeApprovalDate(date, "date", index)
+ }
+ />
+
+
+ );
+ });
+ } else if (approval.length < 1) {
+ return (
+
+
+ {step === 1
+ ? idTask
+ ? "Update Project"
+ : "Add Project"
+ : "Project Charter"}
+
+ { RenderFormProject() }
+
+ {step === 1 ? (
+ <>
+ {" "}
+
+
+ ) : (
+ <>
+ {" "}
+
+
+ )}
+
+
+
+ );
+};
+
+export default DialogFormProyek;
diff --git a/src/views/SimproV2/CreatedProyek/DialogGantt.js b/src/views/SimproV2/CreatedProyek/DialogGantt.js
index 9d2f776..fdce115 100644
--- a/src/views/SimproV2/CreatedProyek/DialogGantt.js
+++ b/src/views/SimproV2/CreatedProyek/DialogGantt.js
@@ -1,276 +1,293 @@
-import React, { useEffect, useState, useMemo } from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter, Breadcrumb, BreadcrumbItem} from 'reactstrap';
-import { Button } from 'reactstrap';
-import { Table, Tooltip } from 'antd';
-import 'antd/dist/antd.css';
-import moment from 'moment';
-import SweetAlert from 'react-bootstrap-sweetalert';
-import { VERSION_GANTT_DELETE, VERSION_GANTT_SEARCH, USER_LIST } from '../../../const/ApiConst';
-import axios from "../../../const/interceptorApi"
-import { NotificationContainer, NotificationManager } from 'react-notifications';
-import DialogForm from './DialogFormGantt';
-import DialogUserGantt from './DialogUserGantt';
-
-import { Link } from 'react-router-dom';
-
-const DialogGantt = ({ openDialog, closeDialog, toggleDialog, idTask, proyekName, hierarchyId, hierarchyName, openDialogHierarchy }) => {
- const token = localStorage.getItem("token")
- const HEADER = {
- headers: {
- "Content-Type": "application/json",
- "Authorization": `Bearer ${token}`
- }
- }
-
- const [openDialogForm, setOpenDialogForm] = useState(false)
- const [openDialogUserGantt, setOpenDialogUserGantt] = useState(false)
- const [dataGantt, setDataGantt] = useState([])
- const [alertDelete, setAlertDelete] = useState(false)
- const [idDelete, setIdDelete] = useState(0)
- const [idGantt, setIdGantt] = useState(0)
- const [humanResource, setHumanResource] = useState([])
-
- useEffect(() => {
- if (openDialog && hierarchyId > 0 || idTask > 0 && !openDialogHierarchy) {
- getdataGantt();
- }
- if (!openDialog) {
- setDataGantt([]);
- }
- }, [hierarchyId, idTask, openDialog])
-
- const getDataHumanResource = async () => {
- const result = await axios
- .get(USER_LIST, HEADER)
- .then(res => res)
- .catch((error) => error.response);
-
- if (result && result.status == 200) {
- setTransferUser(result.data.data);
- } else {
-
- }
- }
-
- const setTransferUser = (data) => {
- const finalData = []
- data.map((val, index) => {
- let data = {
- key: val.id,
- title: val.name
- }
- finalData.push(data)
- });
- setHumanResource(finalData)
- }
-
-
- const getdataGantt = async () => {
- let payload;
- if (hierarchyId) {
- payload = {
- "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
- "columns": [
- { "name": "hierarchy_ftth_id", "logic_operator": "=", "value": hierarchyId, "operator": "AND" }
- ]
- }
- } else {
- payload = {
- "select": ["id", "name_version", "calculation_type", "description", "created_at", "progress"],
- "columns": [
- { "name": "proyek_id", "logic_operator": "=", "value": idTask, "operator": "AND" }
- ]
- }
- }
- const result = await axios
- .post(VERSION_GANTT_SEARCH, payload, HEADER)
- .then(res => res)
- .catch((error) => error.response);
-
- if (result && result.status == 200) {
- setDataGantt(result.data.data);
- } else {
- NotificationManager.error(`Data gantt project gagal terload silahkan coba lagi!`, 'Failed!!');
- }
- }
-
- const handleCancel = () => {
- setDataGantt([]);
- closeDialog('cancel', 'none')
- }
-
- const handleDelete = (id) => {
- setIdDelete(id)
- setAlertDelete(true)
- }
-
- const handleUserGant = (id) => {
- setIdGantt(id)
- setOpenDialogUserGantt(true)
- }
-
- const RenderTable = useMemo(() => {
- const columns = [
- {
- title: 'Action',
- dataIndex: '',
- key: 'id',
- className: "nowrap",
- render: (text, record) =>
- <>
-
-
- {" "}
-
-
- {" "}
-
- {" "}
-
- {" "}
-
-
-
-
-
- {" "}
-
- ,
- },
- { title: 'Nama', dataIndex: 'name_version', key: 'name_version' },
- { title: 'Tipe kalkulasi', dataIndex: 'calculation_type', key: 'calculation_type' },
- { title: 'Deskripsi', dataIndex: 'description', key: 'description' },
- { title: 'Tanggal dibuat', dataIndex: 'created_at', key: 'created_at', render: (text, record) => (
- )
- }, [dataGantt])
-
- const cancelDelete = () => {
- setAlertDelete(false)
- setIdDelete(0)
- }
-
- const onConfirmDelete = async () => {
- let urlDel = VERSION_GANTT_DELETE(idDelete)
- const result = await axios.delete(urlDel, HEADER)
- .then(res => res)
- .catch((error) => error.response);
-
- if (result && result.data && result.data.code === 200) {
- getdataGantt()
- setIdDelete(0)
- setAlertDelete(false)
- NotificationManager.success(`Dokumen project berhasil dihapus`, 'Success!!');
- } else {
- setIdDelete(0)
- setAlertDelete(false)
- NotificationManager.error(`Dokumen project gagal dihapus`, 'Failed!!');
- }
- }
-
- const handleOpenDialogForm = () => {
- setOpenDialogForm(true)
- }
-
- const toggleDialogForm = () => {
- setOpenDialogForm(!openDialogForm)
- }
-
- const closeDialogForm = (status) => {
- if (status == "success") {
- getdataGantt()
- NotificationManager.success(`Gantt berhasil dibuat!`, 'Success!!');
- } else if (status == "failed") {
- NotificationManager.error(`Gantt gagal dibuat!`, 'Failed!!');
- }
- setOpenDialogForm(false)
- }
-
- const toggleDialogUser = () => {
- if (openDialogUserGantt) {
- setIdGantt(0)
- }
- setOpenDialogUserGantt(!openDialogUserGantt)
- }
-
- const closeDialogUser = (status) => {
- if (status == "success") {
- NotificationManager.success(`Gantt Permission berhasil disimpan!`, 'Success!!');
- } else if (status == "failed") {
- NotificationManager.error(`Gantt Permission gagal disimpan!`, 'Failed!!');
- }
- setOpenDialogUserGantt(false)
- setIdGantt(0)
- }
-
- return (
- <>
-
-
- {hierarchyName ?
-
- Project
- {hierarchyName}
-
- :
-
-
-
- {/*
-
- */}
-
- cancelDelete()}
- focusCancelBtn
- >
- Delete this data
-
-
+
+ {" "}
+
+
+ {" "}
+
+
+ {" "}
+
+ {" "}
+
+ {" "}
+
+
+
+
+
+ {" "}
+
+ ,
+ },
+ { title: 'Nama', dataIndex: 'name_version', key: 'name_version' },
+ { title: 'Tipe kalkulasi', dataIndex: 'calculation_type', key: 'calculation_type' },
+ { title: 'Deskripsi', dataIndex: 'description', key: 'description' },
+ { title: 'Tanggal dibuat', dataIndex: 'created_at', key: 'created_at', render: (text, record) => (
+ )
+ }, [dataGantt])
+
+ const cancelDelete = () => {
+ setAlertDelete(false)
+ setIdDelete(0)
+ }
+
+ const onConfirmDelete = async () => {
+ let urlDel = VERSION_GANTT_DELETE(idDelete)
+ const result = await axios.delete(urlDel, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ getdataGantt()
+ setIdDelete(0)
+ setAlertDelete(false)
+ NotificationManager.success(`Dokumen project berhasil dihapus`, 'Success!!');
+ } else {
+ setIdDelete(0)
+ setAlertDelete(false)
+ NotificationManager.error(`Dokumen project gagal dihapus`, 'Failed!!');
+ }
+ }
+
+ const handleOpenDialogForm = async (type) => {
+ await setTypeDialog(type);
+ setOpenDialogForm(true);
+ }
+
+ const toggleDialogForm = () => {
+ setOpenDialogForm(!openDialogForm)
+ }
+
+ const closeDialogForm = (status) => {
+ if (status == "Save") {
+ getdataGantt()
+ NotificationManager.success(`Gantt berhasil dibuat!`, 'Success!!');
+ }else if (status == "Edit") {
+ getdataGantt()
+ NotificationManager.success(`Gantt berhasil dibubah!`, 'Failed!!');
+ }else if (status == "failed") {
+ NotificationManager.error(`Gantt gagal dibuat!`, 'Failed!!');
+ }
+ setDataEdit([])
+ setOpenDialogForm(false)
+ }
+
+ const toggleDialogUser = () => {
+ if (openDialogUserGantt) {
+ setIdGantt(0)
+ }
+ setOpenDialogUserGantt(!openDialogUserGantt)
+ }
+
+ const closeDialogUser = (status) => {
+ if (status == "success") {
+ NotificationManager.success(`Gantt Permission berhasil disimpan!`, 'Success!!');
+ } else if (status == "failed") {
+ NotificationManager.error(`Gantt Permission gagal disimpan!`, 'Failed!!');
+ }
+ setOpenDialogUserGantt(false)
+ setIdGantt(0)
+ }
+
+ return (
+ <>
+
+
+ {hierarchyName ?
+
+ Project
+ {hierarchyName}
+
+ :
+
+
+
+ {/*
+
+ */}
+
+ cancelDelete()}
+ focusCancelBtn
+ >
+ Delete this data
+
+
- {val.tittle ? val.tittle : val.title}
- {val.name}
-
- )
- })
- )
- }else{
- return (
- {val.status}
- {/* {moment(val.due_date).format(formatDate)} */}
- {moment(val.deadline).format(formatDate)}
-
- )
- })
- )
- }else{
- return (
- { (val.tittle ? val.tittle : val.title) +": "+val.name}
{"signature..............."}
- {index==0 ? moment(val.date_approval).format(formatDate) : ""}
-
- )
- })
- )
- }else{
- return (
- Project
-
- {renderForm()}
-
-
-
-
-
-
- )
-
-}
-
-export default ViewProject;
+import React, { useEffect, useState, useRef } from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button } from 'reactstrap';
+import moment from 'moment';
+import 'antd/dist/antd.css';
+import _ from 'underscore'
+import './style.css'
+import { formatThousand, sortBy } from '../../../const/CustomFunc';
+import { BASE_OSPRO, PROYEK_SEARCH} from "../../../const/ApiConst";
+import { Tooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+import axios from "../../../const/interceptorApi"
+import autoTable from "jspdf-autotable";
+import jsPDF from "jspdf";
+
+const createMarkup = (element) => {
+ return {__html: element};
+}
+
+ const ViewProject = ({ idTask, openDialog, closeDialog, toggleDialog, projectCharter, projectParticipant, projectChecklist, projectIssue, projectRisk, projectMilestone, projectApproval, projectManager, projectK3, assignHR, projectImage }) => {
+ const [proyekName, setProyekName] = useState("")
+ const [description, setDescription] = useState("")
+ const [shortname, setKodeShortname] = useState("")
+ const [lokasi, setLokasiKantor] = useState("")
+ const [durasi, setDurasiProyek] = useState("")
+ const [mulaiProyek, setMulaiProyek] = useState("")
+ const [valueProyek, setValueProyek] = useState("")
+ const [scoupeProyek, setScoupeProyek] = useState("")
+ const [sponsorProyek, setSponsorProyek] = useState("")
+ const [lateProyek, setLateConsequenceProyek] = useState("")
+ const [assumtionProyek, setAssumtionProyek] = useState("")
+ const [objectives, setObjective] = useState("")
+ const [projectSuccess, setProjectSuccess] = useState("")
+ const [participants, setParticipants] = useState("")
+ const [checklists, setChecklists] = useState("")
+ const [risks, setRisks] = useState("")
+ const [issues, setIssues] = useState("")
+ const [image, setImage] = useState("")
+ const [budget, setBudget] = useState("")
+ const [currency, setCurrency] = useState("")
+ const [testing, setTesting] = useState("")
+ const [milestone, setMilestone] = useState("")
+ const [potentialRisks, setPotentialRisks] = useState("")
+ const [approval, setApproval] = useState("")
+ const [PM, setDataPM] = useState("")
+ const [K3Search, setDataK3Search] = useState("")
+ const [HR, setAssignHR] = useState("")
+ const formatDate = "DD-MM-YYYY";
+ const reportTemplateRef = useRef(null);
+ const { t } = useTranslation();
+ const token = localStorage.getItem("token");
+
+ const HEADER = {
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ };
+
+ useEffect(() => {
+ if(!openDialog){
+ setProyekName("")
+ setDescription("")
+ setKodeShortname("")
+ setLokasiKantor("")
+ setDurasiProyek("")
+ setMulaiProyek("")
+ setValueProyek("")
+ setScoupeProyek("")
+ setSponsorProyek("")
+ setLateConsequenceProyek("")
+ setAssumtionProyek("")
+ setObjective("")
+ setProjectSuccess("")
+ setParticipants([])
+ setChecklists([])
+ setIssues([])
+ setRisks([])
+ setDataK3Search([])
+ setAssignHR([])
+ setImage("")
+ setBudget("")
+ setCurrency("")
+ setTesting("")
+ setMilestone([])
+ setPotentialRisks("")
+ setApproval([])
+ }
+ }, [openDialog]);
+
+ useEffect(() => {
+ if (projectCharter && projectCharter != {}) {
+ setProyekName(projectCharter.nama);
+ setDescription(projectCharter.keterangan);
+ setKodeShortname(projectCharter.kode_sortname);
+ setLokasiKantor(projectCharter.lokasi_kantor);
+ setDurasiProyek(projectCharter.durasi_proyek);
+ setMulaiProyek(projectCharter.mulai_proyek);
+ setValueProyek(projectCharter.value_proyek);
+ setScoupeProyek(projectCharter.scoupe_of_work);
+ setSponsorProyek(projectCharter.nama_divisi);
+ setLateConsequenceProyek(projectCharter.late_consequence);
+ setAssumtionProyek(projectCharter.assumtion);
+ setObjective(projectCharter.project_objectives);
+ setProjectSuccess(projectCharter.considered_success_when);
+ setBudget(projectCharter.rencana_biaya);
+ setPotentialRisks(projectCharter.potential_risk);
+ setTesting(projectCharter.testing_environment);
+ setCurrency(projectCharter.currency_symbol);
+ }
+ }, [projectCharter]);
+
+ useEffect(() => {
+ if (projectImage && projectImage != {}) {
+ setImage(projectImage.image)
+ }
+ }, [projectImage]);
+
+ useEffect(() => {
+ if(projectParticipant && projectParticipant.length > 0){
+ setParticipants(projectParticipant)
+ }
+ }, [projectParticipant]);
+
+ useEffect(() => {
+ if(projectChecklist && projectChecklist.length > 0){
+ setChecklists(projectChecklist)
+ }
+ }, [projectChecklist]);
+
+ useEffect(() => {
+ if(projectIssue && projectIssue.length > 0){
+ setIssues(projectIssue)
+ }
+ }, [projectIssue]);
+
+ useEffect(() => {
+ if(projectRisk && projectRisk.length > 0){
+ setRisks(projectRisk)
+ }
+ }, [projectRisk]);
+
+ useEffect(() => {
+ if(projectMilestone && projectMilestone.length > 0){
+ setMilestone(projectMilestone)
+ }
+ }, [projectMilestone]);
+
+ useEffect(() => {
+ if(projectApproval && projectApproval.length > 0){
+ console.log("cek projectApproval", projectApproval)
+ setApproval(projectApproval)
+ }
+ }, [projectApproval]);
+
+ useEffect(() => {
+ if(projectManager && projectManager.length > 0){
+ console.log("cek data PM", projectManager)
+ setDataPM(projectManager)
+ }
+ }, [projectManager]);
+
+ useEffect(() => {
+ if(projectK3 && projectK3.length > 0){
+ setDataK3Search(projectK3)
+ }
+ }, [projectK3]);
+
+ useEffect(() => {
+ if(assignHR && assignHR.length > 0){
+ setAssignHR(assignHR)
+ }
+ }, [assignHR]);
+
+ const handleExportPdf = async () => {
+ const doc = new jsPDF({
+ orientation: 'landscape',
+ unit: 'px',
+ format: [1130, 1000]
+ });
+
+ doc.html(reportTemplateRef.current, {
+ async callback(doc) {
+ await doc.save('Project Charter');
+ },
+ });
+ };
+
+ const RenderParticipant = () => {
+ if(participants && participants.length > 0){
+ return (
+ participants.map((val, index) => {
+ return(
+
+ {val.tittle ? val.tittle : val.title}
+ :
+ {val.name}
+
+ )
+ })
+ )
+ }else{
+ return (
+
+ )
+ })
+ )
+ }else{
+ return (
+
+
+
+ )
+ })
+ )
+ }else{
+ return (
+
+
+
+ )
+ })
+ )
+ }else{
+ return (
+
+
+
+ )
+ })
+ )
+ }else{
+ return (
+
+
+
+
+
+
+
+ )
+ })
+ )
+ }else{
+ return (
+
+
+
+
+
+
+
+ );
+ })
+ );
+ } else {
+ return (
+ { (val.tittle ? val.tittle : val.title) +": "+val.name}
{"signature..............."}
+ {index==0 ? moment(val.date_approval).format(formatDate) : ""}
+
+ )
+ })
+ )
+ }else{
+ return (
+
+
+
+
+
+
+
+
+
+ )
+
+}
+
+export default ViewProject;
diff --git a/src/views/SimproV2/CreatedProyek/index.js b/src/views/SimproV2/CreatedProyek/index.js
index a26c26c..aa85b54 100644
--- a/src/views/SimproV2/CreatedProyek/index.js
+++ b/src/views/SimproV2/CreatedProyek/index.js
@@ -25,6 +25,9 @@ import {
PROJECT_APPROVAL_ADD,
PROJECT_APPROVAL_EDIT,
PROJECT_PARTICIPANT_ADD,
+ PROJECT_CHECKLIST_ADD,
+ PROJECT_ISSUE_ADD,
+ PROJECT_RISK_ADD,
PROJECT_PARTICIPANT_EDIT,
PROJECT_MILESTONE_ADD,
PROJECT_MILESTONE_EDIT,
@@ -37,12 +40,19 @@ import {
PROYEK_SEARCH,
PROYEK_SEARCH_BY_USER,
PROYEK_EDIT,
+ ASSIGN_HR_PROJECT_SEARCH,
+ PROJECT_CHECKLIST_SEARCH,
PROYEK_DELETE,
TOOLS_RESOURCE_SEARCH,
MATERIAL_RESOURCE_SEARCH,
USER_SEARCH,
PROJECT_CHARTER_SEARCH,
HIERARCHY_FTTH_SEARCH,
+ PROJECT_ISSUE_SEARCH,
+ PROJECT_RISK_SEARCH,
+ PROJECT_CHECKLIST_DELETE_BY_PROYEK,
+ PROJECT_ISSUE_DELETE_BY_PROYEK,
+ PROJECT_RISK_DELETE_BY_PROYEK,
TOOLS_RESOURCE_LIST,
MATERIAL_RESOURCE_LIST,
PROYEK_GET_ID,
@@ -54,6 +64,9 @@ import {
PHASE_PROYEK,
DIVISI_LIST,
BASE_OSPRO,
+ IMAGE_UPLOAD,
+ IMAGE_GET_BY_ID,
+ IMAGE_DELETE,
} from "../../../const/ApiConst";
import {
formatNumber,
@@ -95,6 +108,13 @@ const CreatedProyek = ({ params, ...props }) => {
},
};
+ const HEADER_MULTIPART = {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ Authorization: `Bearer ${token}`,
+ },
+ };
+
const [idTask, setidTask] = useState(0);
const [dataTable, setDatatable] = useState([]);
const [search, setSearch] = useState("");
@@ -130,8 +150,15 @@ const CreatedProyek = ({ params, ...props }) => {
// project charter
const [projectCharter, setProjectCharter] = useState(null);
const [projectParticipant, setProjectParticipant] = useState(null);
+ const [projectChecklist, setProjectChecklist] = useState(null);
+ const [projectIssue, setProjectIssue] = useState(null);
+ const [projectRisk, setProjectRisk] = useState(null);
const [projectMilestone, setProjectMilestone] = useState(null);
const [projectApproval, setProjectApproval] = useState(null);
+ const [projectPM, setPM] = useState(null);
+ const [projectK3Search, setK3Search] = useState(null);
+ const [projectAssignHR, setProjectAssignHR] = useState(null);
+ const [image, setProjectImage] = useState(null);
const [loadVersionGantt, setLoadVersionGantt] = useState(false);
const [loadHierarchy, setLoadHierarchy] = useState(false);
@@ -218,17 +245,20 @@ const CreatedProyek = ({ params, ...props }) => {
.then((res) => res)
.catch((err) => err.response);
if (result && result.data && result.data.code === 200) {
- setDataDivisions(result.data.data);
+ const dataRes = result.data.data;
+ const filteredData = dataRes.filter(item => item.parent === null);
+ setDataDivisions(filteredData);
}
};
- const handleGetDataPm = async () => {
+ const handleGetDataPm = async (text) => {
const result = await axios
.get(USER_LIST, HEADER)
.then((res) => res)
.catch((err) => err.response);
if (result && result.data && result.data.code === 200) {
- setDataPM(result.data.data);
+ const dataRes = result.data.data;
+ setDataPM(dataRes);
} else {
}
};
@@ -252,7 +282,7 @@ const CreatedProyek = ({ params, ...props }) => {
return;
} else if (result.status == 200 && result.data.data) {
history.push(
- `dashboard-customer/${text.id}/${result.data.gantt.last_gantt_id}/1`
+ `dashboard-customer/${text.id}/${result.data.gantt}/1`
);
}
};
@@ -426,9 +456,10 @@ const CreatedProyek = ({ params, ...props }) => {
setidTask(id);
};
- const handleOpenDialogProyek = (id) => {
+ const handleOpenDialogProyek = async (id) => {
setOpenDialogProyek(true);
setidTask(id);
+ await getProjectImage(id);
};
const handleOpenDialogGantt = (data) => {
@@ -496,8 +527,15 @@ const CreatedProyek = ({ params, ...props }) => {
await getDataProject(data.id);
await getProjectMilestone(data.id);
await getProjectParticipant(data.id);
+ await getProjectChecklist(data.id);
+ await getProjectIssue(data.id);
+ await getProjectRisk(data.id);
await getProjectApproval(data.id);
- // await getDataProjectCharter(data.id);
+ await getK3toProject(data.id);
+ await getProjectAssignHR(data.id);
+ await getProjectImage(data.id);
+ // await handleGetDataPm(data.id);
+ setPM(data.join_first_name);
setOpenDialogViewDetail(true);
};
@@ -520,11 +558,37 @@ const CreatedProyek = ({ params, ...props }) => {
return;
} else if (result.status == 200 && result.data.data) {
history.push(
- `/dashboard-project/${id}/${result.data.gantt.last_gantt_id}/1`
+ `/dashboard-project/${id}/${result.data.gantt}/1`
);
}
};
+ const getK3toProject = async (id) => {
+ const payload = {
+ "select": [
+ "id",
+ "proyek_id",
+ "checklist_k3_id"
+ ],
+ "columns": [
+ { "name": "proyek_id", "logic_operator": "=", "value": id, "operator": "AND" }
+ ]
+ }
+ const URL = `${BASE_OSPRO}/api/project-to-checklist-k3/search`;
+ const result = await axios
+ .post(URL, payload, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if(result && result.status==200){
+ console.log("cek get project to checklist k3",result.data.data)
+ let dataRes = result.data.data;
+ if (dataRes.length > 0) {
+ setK3Search(dataRes);
+ }
+ }
+ }
+
const handleSCurve = async (data) => {
getProjectDetail(data.id);
};
@@ -537,8 +601,9 @@ const CreatedProyek = ({ params, ...props }) => {
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
- let dataRes = result.data.data;
- setProjectCharter(dataRes);
+ const {kode_sortname,nama,mulai_proyek,rencana_biaya,keterangan,durasi_proyek,project_objectives,potential_risk,currency_symbol, nama_divisi, late_consequence, assumtion, considered_success_when} = result.data.data;
+ const dataToSend = {kode_sortname, nama, mulai_proyek, rencana_biaya, keterangan, durasi_proyek, project_objectives, potential_risk, currency_symbol, nama_divisi, late_consequence, assumtion, considered_success_when};
+ setProjectCharter(dataToSend);
} else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
@@ -546,6 +611,13 @@ const CreatedProyek = ({ params, ...props }) => {
const getProjectMilestone = async (id) => {
const payload = {
+ select: [
+ 'id',
+ 'proyek_id',
+ 'status',
+ 'due_date',
+ 'deadline'
+ ],
columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
joins: [],
orders: { columns: ["id"], ascending: true },
@@ -559,20 +631,76 @@ const CreatedProyek = ({ params, ...props }) => {
if (result && result.data && result.data.code == 200) {
let dataRes = result.data.data;
- setProjectMilestone(dataRes);
+ const filteredData = dataRes.filter(item => item.proyek_id === parseInt(id));
+ setProjectMilestone(filteredData);
} else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
};
+ const getProjectAssignHR = async (id) => {
+ const payload = {
+ select: [
+ "id",
+ "proyek_id",
+ "user_id",
+ "project_role"
+ ],
+ columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
+ joins: [
+ {
+ name: "m_users",
+ column_join: "user_id",
+ column_results: ["name"],
+ },
+ {
+ name: "m_role_proyek",
+ column_join: "project_role",
+ column_results: ["name", "description"],
+ }
+ ],
+ orders: { columns: ["id"], ascending: true },
+ paging: { start: 0, length: -1 },
+ };
+ // const url = PROJECT_MI(proyek_id)
+ const result = await axios
+ .post(ASSIGN_HR_PROJECT_SEARCH, payload, HEADER)
+ .then((res) => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code == 200) {
+ let dataRes = result.data.data;
+ const filteredData = dataRes.filter(item => item.proyek_id === parseInt(id));
+ setProjectAssignHR(filteredData);
+ } else {
+ NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+ }
+ };
+
+ const getProjectImage = async (id) => {
+ const url = IMAGE_GET_BY_ID(id, "project_structure_organization");
+ const result = await axios
+ .get(url, HEADER)
+ .then((res) => res)
+ .catch((err) => err.response);
+ if (result && result.data && result.data.code === 200) {
+ setProjectImage(result.data.data);
+ }
+ }
+
const getProjectParticipant = async (id) => {
const payload = {
+ select: [
+ "id",
+ "proyek_id",
+ "tittle",
+ "name"
+ ],
columns: [{ name: "proyek_id", logic_operator: "=", value: id }],
joins: [],
orders: { columns: ["id"], ascending: true },
paging: { start: 0, length: -1 },
};
- // const url = PROJECT_MI(proyek_id)
const result = await axios
.post(PROJECT_PARTICIPANT_SEARCH, payload, HEADER)
.then((res) => res)
@@ -580,7 +708,90 @@ const CreatedProyek = ({ params, ...props }) => {
if (result && result.data && result.data.code == 200) {
let dataRes = result.data.data;
- setProjectParticipant(dataRes);
+ const filteredData = dataRes.filter(item => item.proyek_id === parseInt(id));
+ setProjectParticipant(filteredData);
+ } else {
+ NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+ }
+ };
+
+ const getProjectChecklist = async (id) => {
+ const payload = {
+ select: [
+ "id",
+ "proyek_id",
+ "item",
+ "status_exist"
+ ],
+ columns: [{ name: "proyek_id", logic_operator: "=", value: parseInt(id) }],
+ joins: [],
+ orders: { columns: ["id"], ascending: true },
+ paging: { start: 0, length: -1 },
+ };
+ const result = await axios
+ .post(PROJECT_CHECKLIST_SEARCH, payload, HEADER)
+ .then((res) => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code == 200) {
+ let dataRes = result.data.data;
+ const filteredData = dataRes.filter(item => item.proyek_id === parseInt(id));
+ setProjectChecklist(filteredData);
+ } else {
+ NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+ }
+ };
+
+ const getProjectIssue = async (id) => {
+ const payload = {
+ select: [
+ "id",
+ "proyek_id",
+ "description",
+ "level_issue"
+ ],
+ columns: [{ name: "proyek_id", logic_operator: "=", value: parseInt(id) }],
+ joins: [],
+ orders: { columns: ["id"], ascending: true },
+ paging: { start: 0, length: -1 },
+ };
+ const result = await axios
+ .post(PROJECT_ISSUE_SEARCH, payload, HEADER)
+ .then((res) => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code == 200) {
+ let dataRes = result.data.data;
+ const filteredData = dataRes.filter(item => item.proyek_id === parseInt(id));
+ setProjectIssue(filteredData);
+ } else {
+ NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+ }
+ };
+
+ const getProjectRisk = async (id) => {
+ const payload = {
+ select: [
+ "id",
+ "proyek_id",
+ "description",
+ "preventive_risk",
+ "level_risk"
+ ],
+ columns: [{ name: "proyek_id", logic_operator: "=", value: parseInt(id) }],
+ joins: [],
+ orders: { columns: ["id"], ascending: true },
+ paging: { start: 0, length: -1 },
+ };
+ const result = await axios
+ .post(PROJECT_RISK_SEARCH, payload, HEADER)
+ .then((res) => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code == 200) {
+ let dataRes = result.data.data;
+ const filteredData = dataRes.filter(item => item.proyek_id === parseInt(id));
+ setProjectRisk(filteredData);
} else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
@@ -601,7 +812,8 @@ const CreatedProyek = ({ params, ...props }) => {
if (result && result.data && result.data.code == 200) {
let dataRes = result.data.data;
- setProjectApproval(dataRes);
+ const filteredData = dataRes.filter(item => item.proyek_id === parseInt(id));
+ setProjectApproval(filteredData);
} else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed");
}
@@ -626,8 +838,14 @@ const CreatedProyek = ({ params, ...props }) => {
const handleCloseDialogView = () => {
setProjectApproval(null);
setProjectParticipant(null);
+ setProjectChecklist(null);
+ setProjectIssue(null);
+ setProjectRisk(null);
setProjectMilestone(null);
setProjectCharter(null);
+ setK3Search(null);
+ setProjectAssignHR(null);
+ setProjectImage(null);
setOpenDialogViewDetail(false);
};
@@ -637,8 +855,14 @@ const CreatedProyek = ({ params, ...props }) => {
if (openDialogViewDetail) {
setProjectApproval(null);
setProjectParticipant(null);
+ setProjectChecklist(null);
+ setProjectIssue(null);
+ setProjectRisk(null);
setProjectMilestone(null);
setProjectCharter(null);
+ setK3Search(null);
+ setProjectAssignHR(null);
+ setProjectImage(null);
}
setOpenDialogViewDetail(!openDialogViewDetail);
};
@@ -652,7 +876,8 @@ const CreatedProyek = ({ params, ...props }) => {
if (result && result.data && result.data.code === 200) {
role_id !== "44" ? getDataProyek() : getDataProyekByCustomer();
-
+ getProjectImage(idDelete);
+ deleteImage(idDelete);
setIdDelete(0);
setAlertDelete(false);
NotificationManager.success(`Data proyek berhasil dihapus`, "Success!!");
@@ -671,11 +896,25 @@ const CreatedProyek = ({ params, ...props }) => {
.then((res) => res)
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
- const { participants, milestones, approval } = data.projectCharter;
+ const { checklist, issue, potentialRisks, participants, milestones, approval } = data.projectCharter;
+ const imageObject = data.imageStructureOrg;
const resultParticipant = await saveParticipant(
result.data.data_result.id,
participants
);
+ const resultChecklist = await saveChecklist(
+ result.data.data_result.id,
+ checklist
+ );
+ const resultIssue = await saveIssue(
+ result.data.data_result.id,
+ issue
+ );
+
+ const resultRisk = await saveRisk(
+ result.data.data_result.id,
+ potentialRisks
+ );
const resultMilestone = await saveMilestone(
result.data.data_result.id,
milestones
@@ -684,12 +923,21 @@ const CreatedProyek = ({ params, ...props }) => {
result.data.data_result.id,
approval
);
+ if (imageObject) {
+ await saveImage(
+ result.data.data_result.id,
+ imageObject
+ );
+ }
+
if (
+ resultChecklist === "berhasil" &&
+ resultIssue === "berhasil" &&
+ resultRisk === "berhasil" &&
resultParticipant === "berhasil" &&
resultMilestone === "berhasil" &&
resultApproval === "berhasil"
) {
- // getDataProyek();
NotificationManager.success(
`Data proyek berhasil ditambah`,
"Success!!"
@@ -724,6 +972,67 @@ const CreatedProyek = ({ params, ...props }) => {
return "berhasil";
};
+ const saveChecklist = async (id, data) => {
+ const request = data.map((res) => {
+ const payload = {
+ proyek_id: parseInt(id),
+ item: res.item,
+ status_exist: res.status_exist,
+ };
+ return axios.post(PROJECT_CHECKLIST_ADD, payload, HEADER);
+ });
+ const arr = await Promise.all(request)
+ .then((values) => values)
+ .catch((err) => err.response);
+ const result = arr.map((res) => res.data.code == 200);
+ if (result.length > 0) {
+ return "gagal";
+ }
+
+ return "berhasil";
+ };
+
+ const saveIssue = async (id, data) => {
+ const request = data.map((res) => {
+ const payload = {
+ proyek_id: parseInt(id),
+ description: res.description,
+ level_issue: res.level_issue,
+ };
+ return axios.post(PROJECT_ISSUE_ADD, payload, HEADER);
+ });
+ const arr = await Promise.all(request)
+ .then((values) => values)
+ .catch((err) => err.response);
+ const result = arr.map((res) => res.data.code == 200);
+ if (result.length > 0) {
+ return "gagal";
+ }
+
+ return "berhasil";
+ };
+
+ const saveRisk = async (id, data) => {
+ const request = data.map((res) => {
+ const payload = {
+ proyek_id: parseInt(id),
+ level_risk: res.level_risk,
+ description: res.description,
+ preventive_risk: res.preventive_risk,
+ };
+ return axios.post(PROJECT_RISK_ADD, payload, HEADER);
+ });
+ const arr = await Promise.all(request)
+ .then((values) => values)
+ .catch((err) => err.response);
+ const result = arr.map((res) => res.data.code == 200);
+ if (result.length > 0) {
+ return "gagal";
+ }
+
+ return "berhasil";
+ };
+
const saveMilestone = async (id, data) => {
const request = data.map((res) => {
const payload = {
@@ -766,8 +1075,33 @@ const CreatedProyek = ({ params, ...props }) => {
return "berhasil";
};
+ const saveImage = async (id, data) => {
+ const formData = new FormData;
+ formData.append('ref_id', id);
+ formData.append('category', 'project_structure_organization');
+ formData.append('files', data);
+
+ await axios
+ .post(IMAGE_UPLOAD, formData, HEADER_MULTIPART)
+ .then(res => res)
+ .catch((error) => error.response);
+ return "berhasil";
+ };
+
+ const deleteImage = async (id) => {
+ const URL = IMAGE_DELETE(id, 'project_structure_organization');
+
+ await axios
+ .delete(URL, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+ return "berhasil";
+ };
+
const editProyek = async (data) => {
- const { participants, milestones, approval } = data.projectCharter;
+ const { checklist, issue, potentialRisks, participants, milestones, approval } = data.projectCharter;
+ const imageObject = data.imageStructureOrg;
+
let urlEdit = PROYEK_EDIT(data.id);
const formData = data;
@@ -778,6 +1112,18 @@ const CreatedProyek = ({ params, ...props }) => {
const resultParticipant = await editParticipant(data.id, participants);
const resultMilestone = await editMilestone(data.id, milestones);
const resultApproval = await editApproval(data.id, approval);
+ const resultChecklist = await editChecklist(data.id, checklist);
+ const resultIssue = await editIssue(data.id, issue);
+ const resultRisk = await editRisk(data.id, potentialRisks);
+ if (imageObject) {
+ await deleteImage(
+ data.id
+ );
+ await saveImage(
+ data.id,
+ imageObject
+ );
+ }
if (result && result.status === 200) {
role_id !== "44" ? getDataProyek() : getDataProyekByCustomer();
NotificationManager.success(`Data proyek berhasil Ubah`, "Success!!");
@@ -786,13 +1132,76 @@ const CreatedProyek = ({ params, ...props }) => {
}
};
+ const editChecklist = async (id, data) => {
+ await axios.delete(PROJECT_CHECKLIST_DELETE_BY_PROYEK(id), HEADER);
+ const request = data.map((res) => {
+ const payload = {
+ proyek_id: parseInt(id),
+ item: res.item ? res.item : res.item,
+ status_exist: res.status_exist,
+ };
+ return axios.post(PROJECT_CHECKLIST_ADD, payload, HEADER);
+ });
+ const arr = await Promise.all(request)
+ .then((values) => values)
+ .catch((err) => err.response);
+ const result = arr.map((res) => res.data.code !== 200);
+ if (result.length > 0) {
+ return "gagal";
+ }
+
+ return "berhasil";
+ };
+
+ const editIssue = async (id, data) => {
+ await axios.delete(PROJECT_ISSUE_DELETE_BY_PROYEK(id), HEADER);
+ const request = data.map((res) => {
+ const payload = {
+ proyek_id: parseInt(id),
+ description: res.description ? res.description : res.description,
+ level_issue: res.level_issue,
+ };
+ return axios.post(PROJECT_ISSUE_ADD, payload, HEADER);
+ });
+ const arr = await Promise.all(request)
+ .then((values) => values)
+ .catch((err) => err.response);
+ const result = arr.map((res) => res.data.code !== 200);
+ if (result.length > 0) {
+ return "gagal";
+ }
+
+ return "berhasil";
+ };
+
+ const editRisk = async (id, data) => {
+ await axios.delete(PROJECT_RISK_DELETE_BY_PROYEK(id), HEADER);
+ const request = data.map((res) => {
+ const payload = {
+ proyek_id: parseInt(id),
+ level_risk: res.level_risk,
+ description: res.description ? res.description : res.description,
+ preventive_risk: res.preventive_risk ? res.preventive_risk : res.preventive_risk
+ };
+ return axios.post(PROJECT_RISK_ADD, payload, HEADER);
+ });
+ const arr = await Promise.all(request)
+ .then((values) => values)
+ .catch((err) => err.response);
+ const result = arr.map((res) => res.data.code !== 200);
+ if (result.length > 0) {
+ return "gagal";
+ }
+
+ return "berhasil";
+ };
+
const editParticipant = async (id, data) => {
await axios.delete(PROJECT_PARTICIPANT_DELETE_BY_PROYEK(id), HEADER);
- // if (restDelete){
const request = data.map((res) => {
const payload = {
proyek_id: parseInt(id),
- tittle: res.tittle ? res.tittle : res.title,
+ tittle: res.tittle ? res.tittle : res.tittle,
name: res.name,
};
return axios.post(PROJECT_PARTICIPANT_ADD, payload, HEADER);
@@ -1081,12 +1490,16 @@ const CreatedProyek = ({ params, ...props }) => {
Request Tools
*/}
{/* */}
+ {
+ /*text.type_proyek_id != 9 ?*/
- No participants found
-
- );
- }
- };
-
- const RenderMilestones = () => {
- if (milestones.length > 0) {
- return milestones.map((item, index) => {
- return (
-
- No milestones found
-
- );
- }
- };
-
- const RenderApproval = () => {
- if (approval.length > 0) {
- return approval.map((item, index) => {
- return (
-
- No approval found
-
- );
- }
- };
-
- return (
- <>
-
+ No checklist found
+
+ );
+ }
+ };
+
+ const RenderIssue = () => {
+ if (issue.length > 0) {
+ return issue.map((item, index) => {
+ return (
+
+ No Issue found
+
+ );
+ }
+ };
+
+ const RenderRisk = () => {
+ if (potentialRisks.length > 0) {
+ return potentialRisks.map((item, index) => {
+ return (
+
+ No Risk found
+
+ );
+ }
+ };
+
+ const RenderParticipants = () => {
+ if (participants.length > 0) {
+ return participants.map((item, index) => {
+ return (
+
+ No participants found
+
+ );
+ }
+ };
+
+ const RenderMilestones = () => {
+ if (milestones.length > 0) {
+ return milestones.map((item, index) => {
+ return (
+
+ No milestones found
+
+ );
+ }
+ };
+
+ const RenderApproval = () => {
+ if (approval.length > 0) {
+ return approval.map((item, index) => {
+ return (
+
+ No approval found
+
+ );
+ }
+ };
+
+ return (
+ <>
+ {text ? moment(text).format("D-M-YYYY") : "-"}
) },
- { title: 'Progress', dataIndex: 'progress', key: 'progress' }
-
- ];
-
- return (
- Gantt Project {proyekName}
- }
- {!hierarchyId && (<>
-
- )}
-
- {RenderTable}
-
- {text ? moment(text).format("D-M-YYYY") : "-"}
) },
+ { title: 'Progress', dataIndex: 'progress', key: 'progress' }
+
+ ];
+
+ return (
+ Gantt Project {proyekName}
+ }
+ {!hierarchyId && (<>
+
+ )}
+
+ {RenderTable}
+
+ {"signature..............."}
-
-
-
-
- )
- }
-
- return (
- <>
- | - Project name: - | -
- {proyekName}
- |
- |||
| - Project description: - | -
- {description}
- |
- |||
| - Project objectives: - | -
- {objectives}
- |
- |||
| - Project is considered successful when: - | -
- {projectSuccess}
- |
- |||
| - Project participants: - | -
-
|
- |||
| - Budget: - | -
- {currency} {formatThousand(budget)}
- |
- |||
| - Testing Environment: - | -- - | -|||
| - Milestones: - | -
-
|
- |||
| - Potential risks: - | -- - | -|||
| - Approval: - | -
-
|
-
{ K3Number }
{val.checklist_k3_name ? val.checklist_k3_name : "-"}
{ ChecklistNumber }
{val.item ? val.item : "-"}
+ {val.status_exist === true ? "Tersedia" : "Tidak tersedia"} +
++ {val.level_issue ? val.level_issue : "-"} +
+{val.description ? val.description : "-"}
+ {val.level_risk ? val.level_risk : "-"} +
+{val.description ? val.description : "-"}
{val.preventive_risk ? val.preventive_risk : "-"}
{val.join_first_name ? val.join_first_name : val.join_first_name}
+{val.join_second_name ? val.join_second_name : val.join_second_name}
+{val.join_second_description ? val.join_second_description : val.join_second_description}
+{milestoneLetter}
+{val.status}
+{moment(val.deadline).format(formatDate)}
+{"signature..............."}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ return (
+ <>
+ |
+ 1.0 Identifikasi PROYEK + |
+ ||
|
+ Nama Proyek + |
+
+ {proyekName ?? '-'} + |
+ |
|
+ Project description + |
+
+ {description ?? '-'} + |
+ |
|
+ Nomor Proyek + |
+
+ {shortname ?? '-'} + |
+ |
|
+ Lokasi Proyek + |
+
+ {lokasi ?? '-' } + |
+ |
|
+ Durasi Proyek + |
+
+ {durasi ?? '-'} + |
+ |
|
+ Tanggal Mulai Proyek + |
+
+ {moment(mulaiProyek).format(formatDate) ?? "-"} + |
+ |
|
+ Nilai Kontrak Proyek + |
+
+ {valueProyek ?? '-'} + |
+ |
|
+ Anggaran Proyek + |
+
+ {currency}. {formatThousand(budget)} + |
+ |
|
+ Sponsor Proyek + |
+
+ + {sponsorProyek ?? '-'} + + |
+
+ + |
+
|
+ Project Manager + |
+
+ {PM} + |
+ |
|
+ Sumber Daya Manusia Untuk Proyek + |
+
+ |
+ |
+
|
+ 2.0 OBJEKTIF PROYEK (TUJUAN) + |
+
|
+ {objectives ?? '-'} + |
+
+
|
+ 3.0 RUANG LINGKUP PROYEK + |
+
|---|
+
|
+
+
|
+ 4.0 ANGGOTA PROYEK + |
+ ||
|
+ Nama + |
+
+ Posisi + |
+
+ Tugas dan Tanggung Jawab + |
+
+
|
+ 5.0 STRUKTUR ORGANISASI + |
+
|---|
|
+
+ {image ? (
+ |
+
+ ) : (
+ '-'
+ )}
+ +
|
+ 6.0 TARGET UTAMA & MILESTONE PENCAPAIAN + |
+ ||
|---|---|---|
|
+ Item + |
+
+ Event Besar / Milestone + |
+
+ Tanggal + |
+
+
|
+ 7.0 ISU & HAMBATAN UTAMA + |
+ |
|
+ Tingkat Kepelikan Isu + |
+
+ Penjelasan + |
+
*Skala 1 ke 7 (1 = kecil, 7 = besar)
++
|
+ 8.0 RESIKO + |
+ ||
|
+ Tingkat Dampak Resiko + |
+
+ Penjelasan + |
+
+ Pencegahan + |
+
*Skala 1 ke 7 (1 = kecil, 7 = besar)
++
|
+ 9.0 KONSEKUENSI DARI KETERLAMBATAN + |
+
|---|
+
|
+ 10.0 KRITERIA SUSKSES DARI PROYEK (HARUS TERUKUR) + |
+
|---|
|
+ {projectSuccess ?? '-'} + |
+
+
|
+ 11.0 ASUMSI (SUMBERDAYA UTAMA) + |
+
|---|
| + + | +
+
|
+ 12.0 CHECK LIST KESIAPAN PROYEK** item utama yang paling kritikal + |
+ ||
|
+ NO + |
+
+ ITEM + |
+
+ KETERSEDIAAN + |
+
+
|
+ 13.0 KESEHATAN & KESELAMATAN KERJA (K3) + |
+ ||
|
+ NO + |
+
+ ITEM + |
+ |
+
|
+ 13.0 KOMITMEN DISEPAKATI OLEH + |
+
|---|
+
+
+ Project
+
+
+
+
+
+
+
+ {renderForm()}
+
+ handleOpenDialogGantt(text)}>
Gantt
+ /*: null*/
+ }
handleSCurve(text)}>
@@ -1338,6 +1751,7 @@ const CreatedProyek = ({ params, ...props }) => {
dataPhaseProject={dataPhaseProject}
dataDivisions={dataDivisions}
dataPM={dataPm}
+ projectImage={image}
/>
),
[
@@ -1347,6 +1761,7 @@ const CreatedProyek = ({ params, ...props }) => {
dataPhaseProject,
dataTypeProyek,
idTask,
+ image
]
);
@@ -1460,8 +1875,16 @@ const CreatedProyek = ({ params, ...props }) => {
toggleDialog={toggleAddDialogView}
projectCharter={projectCharter}
projectParticipant={projectParticipant}
+ projectChecklist={projectChecklist}
+ projectIssue={projectIssue}
+ projectRisk={projectRisk}
projectMilestone={projectMilestone}
projectApproval={projectApproval}
+ projectManager={projectPM}
+ projectK3={projectK3Search}
+ assignHR={projectAssignHR}
+ projectImage={image}
+ idTask={idTask}
/>
),
[openDialogViewDetail]
diff --git a/src/views/SimproV2/Divisi/DialogForm.js b/src/views/SimproV2/Divisi/DialogForm.js
index 249e58b..dfced74 100644
--- a/src/views/SimproV2/Divisi/DialogForm.js
+++ b/src/views/SimproV2/Divisi/DialogForm.js
@@ -1,117 +1,137 @@
-import React, { useEffect, useState } from 'react'
-import {
- Modal, ModalHeader, ModalBody, ModalFooter,
- Button, Form, FormGroup, Label, Input, Col, Row
-} from 'reactstrap';
-import { Select } from 'antd';
-import 'antd/dist/antd.css';
-import { useTranslation } from 'react-i18next';
-const { Option } = Select
-const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataDivisions }) => {
- const [id, setId] = useState(0)
- const [name, setName] = useState('')
- const [parent, setParent] = useState(null)
- const [description, setDescription] = useState('')
- const { t } = useTranslation()
-
- const onChangeParent = (val) => {
- setParent(val)
- }
-
- useEffect(() => {
- if (typeDialog === "Edit") {
- setId(dataEdit.id)
- setDescription(dataEdit.description)
- setName(dataEdit.name)
- setParent(dataEdit.parent)
- } else {
- setId(0)
- }
- }, [dataEdit, openDialog])
-
- const handleSave = () => {
- let data = '';
- if (typeDialog === "Save") {
- data = {
- name: name,
- description,
- parent
- }
- closeDialog('save', data);
- } else {
- data = {
- id,
- name: name,
- description,
- parent
- }
- closeDialog('edit', data);
- }
- setId(0)
- setDescription('')
- }
- const handleCancel = () => {
- closeDialog('cancel', 'none')
- setId(0)
- setDescription('')
- }
-
- const renderForm = () => {
- return (
-
- )
- }
-
-
- return (
- <>
-
- {typeDialog == "Save" ? `Add` : "Edit"} {t('division')}
-
- {renderForm()}
-
-
- {' '}
-
-
-
-
- )
-
-}
-
-export default DialogForm;
+import React, { useEffect, useState } from 'react'
+import {
+ Modal, ModalHeader, ModalBody, ModalFooter,
+ Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+import { Select } from 'antd';
+import 'antd/dist/antd.css';
+import { useTranslation } from 'react-i18next';
+const { Option } = Select
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataDivisions }) => {
+ const [id, setId] = useState(0)
+ const [name, setName] = useState('')
+ const [parent, setParent] = useState(null)
+ const [description, setDescription] = useState('')
+ const { t } = useTranslation()
+
+ const onChangeParent = (val) => {
+ setParent(val)
+ }
+
+ useEffect(() => {
+ if (typeDialog === "Edit") {
+ setId(dataEdit.id)
+ setDescription(dataEdit.description)
+ setName(dataEdit.name)
+ setParent(dataEdit.parent)
+ } else {
+ setId(0)
+ }
+ }, [dataEdit, openDialog])
+
+ const validation = () => {
+ if (!name || name === "") {
+ alert("Division Name cannot be empty!");
+ return true;
+ }
+ }
+ const handleSave = () => {
+ let data = '';
+ const err = validation();
+
+ if (!err) {
+ if (typeDialog === "Save") {
+ data = {
+ name: name,
+ description,
+ parent
+ }
+ closeDialog('save', data);
+ } else {
+ data = {
+ id,
+ name: name,
+ description,
+ parent
+ }
+ closeDialog('edit', data);
+ }
+ setId(0)
+ setDescription('')
+ setName('')
+ }
+ }
+ const handleCancel = () => {
+ closeDialog('cancel', 'none')
+ setId(0)
+ setDescription('')
+ setName('')
+ }
+
+ const renderForm = () => {
+ return (
+
+ )
+ }
+
+
+ return (
+ <>
+
+ {typeDialog == "Save" ? `Add` : "Edit"} {t('division')}
+
+ {renderForm()}
+
+
+ {' '}
+
+
+
+
+ )
+
+}
+
+export default DialogForm;
diff --git a/src/views/SimproV2/Divisi/index.js b/src/views/SimproV2/Divisi/index.js
index 703f8f2..9ab06d3 100644
--- a/src/views/SimproV2/Divisi/index.js
+++ b/src/views/SimproV2/Divisi/index.js
@@ -1,369 +1,363 @@
-import * as XLSX from 'xlsx';
-import DialogForm from './DialogForm';
-import React, { useState, useEffect } from 'react';
-import SweetAlert from 'react-bootstrap-sweetalert';
-import axios from "../../../const/interceptorApi"
-import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap';
-import { DIVISI_LIST, DIVISI_ADD, DIVISI_EDIT, DIVISI_DELETE, DIVISI_SEARCH } from '../../../const/ApiConst';
-import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { Pagination, Button, Tooltip } from 'antd';
-import { useTranslation } from 'react-i18next';
-
-const url = "";
-const proyek_id = localStorage.getItem('proyek_id');
-const role_id = localStorage.getItem('role_id');
-const format = "DD-MM-YYYY";
-const token = window.localStorage.getItem('token');
-const config = {
- headers:
- {
- Authorization: `Bearer ${token}`,
- "Content-type": `application/json`
- }
-};
-
-const column = [
- { name: "Nama" },
- { name: "Deskripsi" },
-]
-
-const ProjectType = ({ params }) => {
- const token = localStorage.getItem("token")
- const HEADER = {
- headers: {
- "Content-Type": "application/json",
- "Authorization": `Bearer ${token}`
- }
- }
- const pageName = params.name;
-
- const [alertDelete, setAlertDelete] = useState(false)
- const [allDataMenu, setAllDataMenu] = useState([])
- const [clickOpenModal, setClickOpenModal] = useState(false)
- const [currentPage, setCurrentPage] = useState(1)
- const [dataEdit, setDataEdit] = useState([])
- const [dataExport, setDataExport] = useState([])
- const [dataTable, setDatatable] = useState([])
- const [idDelete, setIdDelete] = useState(0)
- const [openDialog, setOpenDialog] = useState(false)
- const [rowsPerPage, setRowsPerPage] = useState(10)
- const [search, setSearch] = useState('')
- const [totalPage, setTotalPage] = useState(0)
- const [typeDialog, setTypeDialog] = useState('Save')
- const [dataDivisions, setDataDivisions] = useState([])
- const { t } = useTranslation()
-
- useEffect(() => {
- getListDivision()
- }, [])
-
- useEffect(() => {
- getDataProjectType()
- }, [currentPage, rowsPerPage, search])
-
- useEffect(() => {
- const cekData = dataExport || []
- if (cekData.length > 0) {
- exportExcel()
- }
- }, [dataExport])
-
- const getListDivision = async () => {
- const listDivions = await axios
- .get(DIVISI_LIST, HEADER)
- .then(res => res)
- .catch((error) => error.response);
-
- if (listDivions && listDivions.data && listDivions.data.code == 200) {
- let arr = []
- for (const v in listDivions.data.data) {
- arr.push(listDivions.data.data[v])
- }
- setDataDivisions(arr);
- } else {
- NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
- }
- }
- const getDataProjectType = async () => {
- let start = 0;
- if (currentPage !== 1 && currentPage > 1) {
- start = (currentPage * rowsPerPage) - rowsPerPage
- }
- const payload = {
- "columns": [
- {
- "name": "name",
- "logic_operator": "ilike",
- "value": search,
- "operator": "AND"
- }
- ],
- "orders": {
- "ascending": true,
- "columns": [
- 'id'
- ]
- },
- "paging": {
- "length": rowsPerPage,
- "start": start
- }
- }
- const result = await axios
- .post(DIVISI_SEARCH, payload, HEADER)
- .then(res => res)
- .catch((error) => error.response);
-
- if (result && result.data && result.data.code == 200) {
- result.data.data.map((res) => {
- res.key = res.id.toString()
- });
- setDatatable(result.data.data);
- setTotalPage(result.data.totalRecord);
- } else {
- NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
- }
- }
- const handleExportExcel = async () => {
- let start = 0;
-
- if (currentPage !== 1 && currentPage > 1) {
- start = (currentPage * rowsPerPage) - rowsPerPage
- }
-
- const payload = {
- "columns": [
- {
- "name": "name",
- "logic_operator": "like",
- "value": search,
- "operator": "AND"
- }
- ],
- "orders": {
- "ascending": true,
- "columns": [
- 'id'
- ]
- },
- "paging": {
- "length": rowsPerPage,
- "start": start
- }
- }
-
- const result = await axios
- .post(DIVISI_SEARCH, payload, HEADER)
- .then(res => res)
- .catch((error) => error.response);
- if (result && result.data && result.data.code == 200) {
- let resData = result.data.data;
- const excelData = [];
- resData.map((val, index) => {
- let dataRow = {
- "Nama Divisi": val.name,
- "Deskripsi": val.description,
- }
- excelData.push(dataRow)
- })
- await setDataExport(excelData)
- } else {
- NotificationManager.error('Gagal Export Data!!', 'Failed');
- }
- }
-
- const exportExcel = () => {
- const dataExcel = dataExport || [];
- const fileName = `Data ${pageName}.xlsx`;
- const ws = XLSX.utils.json_to_sheet(dataExcel);
- const wb = XLSX.utils.book_new();
- XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`);
- XLSX.writeFile(wb, fileName);
- setDataExport([])
- }
-
- const handleSearch = e => {
- const value = e.target.value
- setSearch(value);
- setCurrentPage(1)
- };
-
- const handleOpenDialog = (type) => {
- setOpenDialog(true)
- setTypeDialog(type)
- }
-
- const handleEdit = (data) => {
- setDataEdit(data)
- handleOpenDialog('Edit');
- }
-
- const handleDelete = async (id) => {
- await setAlertDelete(true)
- await setIdDelete(id)
- }
-
- const handleCloseDialog = (type, data) => {
- if (type === "save") {
- saveProjectType(data);
- } else if (type === "edit") {
- editMaterialR(data);
- }
- setDataEdit([])
- setOpenDialog(false)
- }
-
- const saveProjectType = async (data) => {
- const formData = data
- const result = await axios.post(DIVISI_ADD, formData, HEADER)
- .then(res => res)
- .catch((error) => error.response);
- if (result && result.data && result.data.code === 200) {
- getDataProjectType()
- NotificationManager.success(`Data berhasil ditambah`, 'Success!!');
- } else {
- NotificationManager.error(`${result.data.message}`, 'Failed!!');
- }
- }
-
- const editMaterialR = async (data) => {
- let urlEdit = DIVISI_EDIT(data.id)
- const formData = data
- const result = await axios.put(urlEdit, formData, HEADER)
- .then(res => res)
- .catch((error) => error.response);
- if (result && result.data && result.data.code === 200) {
- getDataProjectType();
- NotificationManager.success(`Data berhasil diedit`, 'Success!!');
- } else {
- NotificationManager.error(`Data gagal di edit`, `Failed!!`);
- }
- }
-
- const toggleAddDialog = () => {
- setOpenDialog(!openDialog)
- }
-
- const onConfirmDelete = async () => {
- let url = DIVISI_DELETE(idDelete);
- const result = await axios.delete(url, config)
- .then(res => res)
- .catch((error) => error.response);
-
- if (result && result.data && result.data.code === 200) {
- getDataProjectType()
- setIdDelete(0)
- setAlertDelete(false)
- NotificationManager.success(`Data berhasil dihapus!`, 'Success!!');
- } else {
- setIdDelete(0)
- setAlertDelete(false)
- NotificationManager.error(`Data gagal dihapus!}`, 'Failed!!');
- }
- }
-
- const cancelDelete = () => {
- setAlertDelete(false)
- setIdDelete(0)
- }
-
- const onShowSizeChange = (current, pageSize) => {
- setRowsPerPage(pageSize)
- }
-
- const onPagination = (current, pageSize) => {
- setCurrentPage(current)
- }
-
- const dataNotAvailable = () => {
- if (dataTable.length === 0) {
- return (
-
- {t('noData')}
-
- )
- }
- }
-
- return (
-
+ {t('noData')}
+
+ )
+ }
+ }
+
+ return (
+
-
-
- this.handleEdit(n)}>
-
-
- this.handleMap(n)}>
-
-
- {n.created_date !== null ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}
- {n.join_first_name !== null ? n.join_first_name : "-"}
- {n.status_response !== null ? n.status_response : "-"}
-
- )
- }) :
- No Data Available
-
- }
-
- )
- }
-
- handleChangeDay = (e) => {
- const val = e.target.value;
- this.setState({ currentDay: val });
- if (val === "today") {
- this.setState({
- startDate: moment(moment().format("YYYY-M-D")),
- endDate: moment(moment().format("YYYY-M-D")),
- currentPage: 1
- })
- } else if (val === "3 day") {
- this.setState({
- startDate: moment(moment().subtract(3, "days").format("YYYY-M-D")),
- endDate: moment(moment().format("YYYY-M-D")),
- currentPage: 1
- })
- } else if (val === "7 day") {
- this.setState({
- startDate: moment(moment().subtract(7, "days").format("YYYY-M-D")),
- endDate: moment(moment().format("YYYY-M-D")),
- currentPage: 1
- })
- } else {
- this.setState({
- startDate: moment(moment().format("YYYY-M-D")),
- endDate: moment(moment().format("YYYY-M-D")),
- currentPage: 1
- })
- }
- }
-
- render() {
- const column = [
- { name: this.props.t('action') },
- { name: this.props.t('date') },
- { name: this.props.t('nameHR') },
- { name: this.props.t('statusResponse') },
- ]
- const t = this.props;
- const { tooltipExport, dataTable, openDialogEdit, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipMap, tooltipDelete } = this.state
- return (
-
+
+
+ this.handleEdit(n)}>
+
+
+ this.handleMap(n)}>
+
+
+ {n.created_at !== null ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}
+ {n.join_first_name !== null ? n.join_first_name : "-"}
+ {n.status_response !== null ? n.status_response : "-"}
+
+ )
+ }) :
+ No Data Available
+
+ }
+
+ )
+ }
+
+ handleChangeDay = (e) => {
+ const val = e.target.value;
+ this.setState({ currentDay: val });
+ if (val === "today") {
+ this.setState({
+ startDate: moment(moment().format("YYYY-M-D")),
+ endDate: moment(moment().format("YYYY-M-D")),
+ currentPage: 1
+ })
+ } else if (val === "3 day") {
+ this.setState({
+ startDate: moment(moment().subtract(3, "days").format("YYYY-M-D")),
+ endDate: moment(moment().format("YYYY-M-D")),
+ currentPage: 1
+ })
+ } else if (val === "7 day") {
+ this.setState({
+ startDate: moment(moment().subtract(7, "days").format("YYYY-M-D")),
+ endDate: moment(moment().format("YYYY-M-D")),
+ currentPage: 1
+ })
+ } else {
+ this.setState({
+ startDate: moment(moment().format("YYYY-M-D")),
+ endDate: moment(moment().format("YYYY-M-D")),
+ currentPage: 1
+ })
+ }
+ }
+
+ render() {
+ const column = [
+ { name: this.props.t('action') },
+ { name: this.props.t('date') },
+ { name: this.props.t('nameHR') },
+ { name: this.props.t('statusResponse') },
+ ]
+ const t = this.props;
+ const { tooltipExport, dataTable, openDialogEdit, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipMap, tooltipDelete } = this.state
+ return (
+
-
- {t('deleteMsg')}
-
- toggleAddDialog}
- typeDialog={typeDialog}
- dataEdit={dataEdit}
- clickOpenModal={clickOpenModal}
- dataParent={allDataMenu}
- dataDivisions={dataDivisions}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default ProjectType;
+import * as XLSX from 'xlsx';
+import DialogForm from './DialogForm';
+import React, { useState, useEffect } from 'react';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import axios from "../../../const/interceptorApi"
+import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap';
+import { DIVISI_LIST, DIVISI_ADD, DIVISI_EDIT, DIVISI_DELETE, DIVISI_SEARCH } from '../../../const/ApiConst';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import { Pagination, Button, Tooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+const url = "";
+const proyek_id = localStorage.getItem('proyek_id');
+const role_id = localStorage.getItem('role_id');
+const format = "DD-MM-YYYY";
+const token = window.localStorage.getItem('token');
+const config = {
+ headers:
+ {
+ Authorization: `Bearer ${token}`,
+ "Content-type": `application/json`
+ }
+};
+
+const column = [
+ { name: "Nama" },
+ { name: "Deskripsi" },
+]
+
+const ProjectType = ({ params }) => {
+ const token = localStorage.getItem("token")
+ const HEADER = {
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${token}`
+ }
+ }
+ const pageName = params.name;
+
+ const [alertDelete, setAlertDelete] = useState(false)
+ const [allDataMenu, setAllDataMenu] = useState([])
+ const [clickOpenModal, setClickOpenModal] = useState(false)
+ const [currentPage, setCurrentPage] = useState(1)
+ const [dataEdit, setDataEdit] = useState([])
+ const [dataExport, setDataExport] = useState([])
+ const [dataTable, setDatatable] = useState([])
+ const [idDelete, setIdDelete] = useState(0)
+ const [openDialog, setOpenDialog] = useState(false)
+ const [rowsPerPage, setRowsPerPage] = useState(10)
+ const [search, setSearch] = useState("")
+ const [totalPage, setTotalPage] = useState(0)
+ const [typeDialog, setTypeDialog] = useState('Save')
+ const [dataDivisions, setDataDivisions] = useState([])
+ const { t } = useTranslation()
+
+ useEffect(() => {
+ getDataProjectType();
+ }, [currentPage, rowsPerPage, search])
+
+ useEffect(() => {
+ const cekData = dataExport || []
+ if (cekData.length > 0) {
+ exportExcel()
+ }
+ }, [dataExport])
+
+ const getListDivision = async () => {
+ const listDivions = await axios
+ .get(DIVISI_LIST, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (listDivions && listDivions.data && listDivions.data.code == 200) {
+ let arr = []
+ for (const v in listDivions.data.data) {
+ arr.push(listDivions.data.data[v])
+ }
+ setDataDivisions(arr);
+ } else {
+ NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+ }
+ }
+ const getDataProjectType = async () => {
+ let start = 0;
+ if (currentPage !== 1 && currentPage > 1) {
+ start = currentPage * rowsPerPage - rowsPerPage;
+ }
+ const payload = {
+ columns: [
+ {
+ name: "name",
+ logic_operator: "ilike",
+ value: search,
+ operator: "AND"
+ }
+ ],
+ "orders": {
+ "ascending": true,
+ "columns": [
+ 'id'
+ ]
+ },
+ "paging": {
+ "length": rowsPerPage,
+ "start": start
+ }
+ }
+ const result = await axios
+ .post(DIVISI_SEARCH, payload, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code == 200) {
+ let dataRes = result.data.data || [];
+ setDatatable(dataRes);
+ setTotalPage(result.data.totalRecord);
+ } else {
+ NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+ }
+ }
+ const handleExportExcel = async () => {
+ let start = 0;
+
+ if (currentPage !== 1 && currentPage > 1) {
+ start = (currentPage * rowsPerPage) - rowsPerPage
+ }
+
+ const payload = {
+ "columns": [
+ {
+ "name": "name",
+ "logic_operator": "like",
+ "value": search,
+ "operator": "AND"
+ }
+ ],
+ "orders": {
+ "ascending": true,
+ "columns": [
+ 'id'
+ ]
+ },
+ "paging": {
+ "length": rowsPerPage,
+ "start": start
+ }
+ }
+
+ const result = await axios
+ .post(DIVISI_SEARCH, payload, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+ if (result && result.data && result.data.code == 200) {
+ let resData = result.data.data;
+ const excelData = [];
+ resData.map((val, index) => {
+ let dataRow = {
+ "Nama Divisi": val.name,
+ "Deskripsi": val.description,
+ }
+ excelData.push(dataRow)
+ })
+ await setDataExport(excelData)
+ } else {
+ NotificationManager.error('Gagal Export Data!!', 'Failed');
+ }
+ }
+
+ const exportExcel = () => {
+ const dataExcel = dataExport || [];
+ const fileName = `Data ${pageName}.xlsx`;
+ const ws = XLSX.utils.json_to_sheet(dataExcel);
+ const wb = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`);
+ XLSX.writeFile(wb, fileName);
+ setDataExport([])
+ }
+
+ const handleSearch = e => {
+ const value = e.target.value
+ setSearch(value);
+ setCurrentPage(1)
+ };
+
+ const handleOpenDialog = (type) => {
+ setOpenDialog(true)
+ setTypeDialog(type)
+ }
+
+ const handleEdit = (data) => {
+ setDataEdit(data)
+ handleOpenDialog('Edit');
+ }
+
+ const handleDelete = async (id) => {
+ await setAlertDelete(true)
+ await setIdDelete(id)
+ }
+
+ const handleCloseDialog = (type, data) => {
+ if (type === "save") {
+ saveProjectType(data);
+ } else if (type === "edit") {
+ editMaterialR(data);
+ }
+ setDataEdit([])
+ setOpenDialog(false)
+ }
+
+ const saveProjectType = async (data) => {
+ const formData = data
+ const result = await axios.post(DIVISI_ADD, formData, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+ if (result && result.data && result.data.code === 200) {
+ getDataProjectType()
+ NotificationManager.success(`Data berhasil ditambahkan`, 'Success!!');
+ } else {
+ NotificationManager.error(`Data gagal ditambahkan`, 'Failed!!');
+ }
+ }
+
+ const editMaterialR = async (data) => {
+ let urlEdit = DIVISI_EDIT(data.id)
+ const formData = data
+ const result = await axios.put(urlEdit, formData, HEADER)
+ .then(res => res)
+ .catch((error) => error.response);
+ if (result && result.data && result.data.code === 200) {
+ getDataProjectType();
+ NotificationManager.success(`Data berhasil diubah`, 'Success!!');
+ } else {
+ NotificationManager.error(`Data gagal diubah`, `Failed!!`);
+ }
+ }
+
+ const toggleAddDialog = () => {
+ setOpenDialog(!openDialog)
+ }
+
+ const onConfirmDelete = async () => {
+ let url = DIVISI_DELETE(idDelete);
+ const result = await axios.delete(url, config)
+ .then(res => res)
+ .catch((error) => error.response);
+
+ if (result && result.data && result.data.code === 200) {
+ getDataProjectType()
+ setIdDelete(0)
+ setAlertDelete(false)
+ NotificationManager.success(`Data berhasil dihapus!`, 'Success!!');
+ } else {
+ setIdDelete(0)
+ setAlertDelete(false)
+ NotificationManager.error(`Data gagal dihapus!}`, 'Failed!!');
+ }
+ }
+
+ const cancelDelete = () => {
+ setAlertDelete(false)
+ setIdDelete(0)
+ }
+
+ const onShowSizeChange = (current, pageSize) => {
+ setRowsPerPage(pageSize)
+ }
+
+ const onPagination = (current, pageSize) => {
+ setCurrentPage(current)
+ }
+
+ const dataNotAvailable = () => {
+ if (dataTable.length === 0) {
+ return (
+ {pageName}
-| Aksi | - {column.map((i, index) => { - return ( -{i.name} | - ) - })} -|
|---|---|---|
|
- |
- {n.name} | -{n.description} | -
+
+ {t('deleteMsg')}
+
+ toggleAddDialog}
+ typeDialog={typeDialog}
+ dataEdit={dataEdit}
+ clickOpenModal={clickOpenModal}
+ dataParent={allDataMenu}
+ dataDivisions={dataDivisions}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default ProjectType;
diff --git a/src/views/SimproV2/PanicButton/index.js b/src/views/SimproV2/PanicButton/index.js
index aa2510c..00d2dd8 100644
--- a/src/views/SimproV2/PanicButton/index.js
+++ b/src/views/SimproV2/PanicButton/index.js
@@ -1,399 +1,399 @@
-import * as XLSX from 'xlsx';
-import DialogEdit from './DialogEdit';
-import DialogForm from './DialogForm';
-import React, { Component } from 'react';
-import SweetAlert from 'react-bootstrap-sweetalert';
-import axios from 'axios';
-import moment from 'moment';
-import { Button } from 'reactstrap';
-import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup } from 'reactstrap';
-import { DatePicker } from 'antd';
-import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { PANIC_BUTTON_UPDATE, PANIC_BUTTON_SEARCH } from '../../../const/ApiConst';
-import { Pagination, Tooltip } from 'antd';
-import { withTranslation } from 'react-i18next';
-
-const id_org = window.localStorage.getItem('id_org');
-const roleName = window.localStorage.getItem('role_name');
-
-const token = window.localStorage.getItem('token');
-const config = {
- headers:
- {
- Authorization: `Bearer ${token}`,
- "Content-type": `application/json`
- }
-};
-
-const { RangePicker } = DatePicker;
-
-const momentFormat = 'HH:mm';
-
-
-
-const LENGTH_DATA = 10
-
-class index extends Component {
- constructor(props) {
- super(props)
- this.state = {
- alertDelete: false,
- currentDay: 'today',
- currentPage: 1,
- dataEdit: null,
- dataExport: [],
- dataGs: [],
- dataIdHo: [],
- dataMap: "",
- dataTable: [],
- endDate: moment(moment().format("YYYY-M-D")),
- idDelete: 0,
- openDialog: false,
- openDialogEdit: false,
- page: 0,
- rowsPerPage: LENGTH_DATA,
- search: "",
- startDate: moment(moment().format("YYYY-M-D")),
- tooltipDelete: false,
- tooltipExport: false,
- tooltipMap: false,
- totalPage: 0,
- typeClock: "All",
- typeDialog: 'Save',
- }
- }
-
- async componentDidMount() {
- this.getDataPanicButton();
- }
-
- async componentDidUpdate(prevProps, prevState) {
- const { search, startDate } = this.state
- if (search !== prevState.search) this.getDataPanicButton()
- if (startDate !== prevState.startDate) this.getDataPanicButton()
- }
-
- handleSearch = e => {
- const value = e.target.value
- this.setState({ search: value, currentPage: 1 })
- };
-
- getDataPanicButton = async () => {
- let start = 0;
- if (this.state.currentPage !== 1) {
- start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
- }
-
- let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00");
- let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59");
-
- const payload = {
- "paging": {
- "start": start,
- "length": this.state.rowsPerPage
- },
- "filter_columns": [
- {
- "name": "name",
- "value": "",
- "table_name": "m_users"
- }
- ],
- "columns": [
- { "name": "created_at", "logic_operator": "range", "value": dateStart, "value1": dateEnd, "operator": "AND" },
- { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND", "table_name": "m_users" }
- ],
- "joins": [
- {
- "name": "m_users",
- "column_join": "user_id",
- "column_results": [
- "name",
- ]
- }
- ],
- "orders": {
- "columns": [
- "id"
- ],
- "ascending": false
- }
- }
-
- const result = await axios
- .post(PANIC_BUTTON_SEARCH, payload, config)
- .then(res => res)
- .catch((error) => error.response);
- if (result && result.data) {
- if (result && result.data && result.data.code == 200) {
- this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord, dataExport: result.data.data_export });
- } else {
- NotificationManager.error('Gagal Menerima Data!!', 'Failed');
- }
- }
- }
-
- handleOpenDialog = (type) => {
- if (type === "Map") {
- this.setState({ openDialog: true })
- this.showChildDialog();
- } else {
- this.setState({ openDialogEdit: true })
- this.showDialogEdit();
- }
-
- }
-
- handleCloseDialog = () => {
- this.setState({ openDialog: false })
- }
-
- handleCloseDialogEdit = (type, data) => {
- if (type === "save") {
- this.updateStatusResponse(data);
- }
- this.setState({ openDialogEdit: false })
- }
-
- toggleMapDialog = () => {
- this.setState({ openDialog: !this.state.openDialog })
- }
-
- toggleEditDialog = () => {
- this.setState({ openDialogEdit: !this.state.openDialogEdit });
- }
-
- handleMap = data => {
- this.setState({ dataMap: data });
- this.handleOpenDialog('Map');
- }
-
- handleEdit = data => {
- this.setState({ dataEdit: data });
- this.handleOpenDialog('Edit');
- }
-
- handleDelete = (id) => {
- this.setState({ alertDelete: true, idDelete: id });
- }
-
- onShowSizeChange = (current, pageSize) => {
- this.setState({ rowsPerPage: pageSize }, () => {
- this.getDataPanicButton();
- })
- }
-
- onPagination = (current, pageSize) => {
- this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
- this.getDataPanicButton();
- })
- }
-
- toggle = (param) => {
- if (param === "map") {
- this.setState(prevState => ({ tooltipMap: !prevState.tooltipMap }))
- } else if (param === "edit") {
- this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
- } else if (param === "delete") {
- this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
- } else if (param === "export") {
- this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
- }
- }
-
- handleDatePicker = (date, dateString) => {
- this.setState({ startDate: date[0], endDate: date[1] }, () => {
- this.getDataPanicButton();
- })
- }
-
- handleTipe = (e) => {
- this.setState({ typeClock: e.target.value }, () => {
- this.getDataPanicButton();
- });
- }
-
- handleExportExcel = () => {
- const dataExcel = this.state.dataTable || [];
- const fileName = "Panic Button.xlsx";
- let dataExport = [];
- dataExcel.map((val) => {
- let row = {
- "Tanggal": moment(val.created_date).format("DD-MM-YYYY HH:MM:SS"),
- "Nama Karyawan": val.join_first_name,
- "Latitude": val.lat,
- "Longitude": val.lon,
- "Status": val.status_response
- }
- dataExport.push(row);
- })
- const ws = XLSX.utils.json_to_sheet(dataExport);
- const wb = XLSX.utils.book_new();
- XLSX.utils.book_append_sheet(wb, ws, 'Panic Button');
-
- XLSX.writeFile(wb, fileName);
- }
-
- updateStatusResponse = async (data) => {
- let url = PANIC_BUTTON_UPDATE(data.id);
- let payload = {
- "user_id": data.user_id,
- "lat": data.lat,
- "lon": data.lon,
- "status_response": data.status_response,
- "description": "update data panic"
-
- }
-
- const result = await axios
- .put(url, payload, config)
- .then(res => res)
- .catch((error) => error.response);
- if (result && result.data) {
- if (result.data.code == 200) {
- this.getDataPanicButton()
- NotificationManager.success('Berhasil update status response!!', 'Success!');
- } else {
- NotificationManager.error('Gagal update status response!!', 'Failed');
- }
- }
- }
-
- renderTable = () => {
- const t = this.props;
- const dataTable2 = this.state.dataTable || [];
- return (
-
- {dataTable2.length !== 0 ? dataTable2.map((n) => {
- return (
- {pageName}
+| Aksi | + {column.map((i, index) => { + return ( +{i.name} | + ) + })} +|
|---|---|---|
|
+ |
+ {n.name} | +{n.description} | +
- this.toggleMapDialog}
- dataMap={this.state.dataMap}
- showDialog={showDialog => this.showChildDialog = showDialog}
- />
- this.toggleEditDialog}
- dataEdit={this.state.dataEdit}
- showDialog={showDialog => this.showDialogEdit = showDialog}
- />
-
-
-
-
-
-
-
-
-
-
- )
- }
-}
-export default withTranslation()(index);
+import * as XLSX from 'xlsx';
+import DialogEdit from './DialogEdit';
+import DialogForm from './DialogForm';
+import React, { Component } from 'react';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import axios from 'axios';
+import moment from 'moment';
+import { Button } from 'reactstrap';
+import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup } from 'reactstrap';
+import { DatePicker } from 'antd';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import { PANIC_BUTTON_UPDATE, PANIC_BUTTON_SEARCH } from '../../../const/ApiConst';
+import { Pagination, Tooltip } from 'antd';
+import { withTranslation } from 'react-i18next';
+
+const id_org = window.localStorage.getItem('id_org');
+const roleName = window.localStorage.getItem('role_name');
+
+const token = window.localStorage.getItem('token');
+const config = {
+ headers:
+ {
+ Authorization: `Bearer ${token}`,
+ "Content-type": `application/json`
+ }
+};
+
+const { RangePicker } = DatePicker;
+
+const momentFormat = 'HH:mm';
+
+
+
+const LENGTH_DATA = 10
+
+class index extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ alertDelete: false,
+ currentDay: 'today',
+ currentPage: 1,
+ dataEdit: null,
+ dataExport: [],
+ dataGs: [],
+ dataIdHo: [],
+ dataMap: "",
+ dataTable: [],
+ endDate: moment(moment().format("YYYY-M-D")),
+ idDelete: 0,
+ openDialog: false,
+ openDialogEdit: false,
+ page: 0,
+ rowsPerPage: LENGTH_DATA,
+ search: "",
+ startDate: moment(moment().format("YYYY-M-D")),
+ tooltipDelete: false,
+ tooltipExport: false,
+ tooltipMap: false,
+ totalPage: 0,
+ typeClock: "All",
+ typeDialog: 'Save',
+ }
+ }
+
+ async componentDidMount() {
+ this.getDataPanicButton();
+ }
+
+ async componentDidUpdate(prevProps, prevState) {
+ const { search, startDate } = this.state
+ if (search !== prevState.search) this.getDataPanicButton()
+ if (startDate !== prevState.startDate) this.getDataPanicButton()
+ }
+
+ handleSearch = e => {
+ const value = e.target.value
+ this.setState({ search: value, currentPage: 1 })
+ };
+
+ getDataPanicButton = async () => {
+ let start = 0;
+ if (this.state.currentPage !== 1) {
+ start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
+ }
+
+ let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00");
+ let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59");
+
+ const payload = {
+ "paging": {
+ "start": start,
+ "length": this.state.rowsPerPage
+ },
+ "filter_columns": [
+ {
+ "name": "name",
+ "value": "",
+ "table_name": "m_users"
+ }
+ ],
+ "columns": [
+ { "name": "created_at", "logic_operator": "range", "value": dateStart, "value1": dateEnd, "operator": "AND" },
+ { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND", "table_name": "m_users" }
+ ],
+ "joins": [
+ {
+ "name": "m_users",
+ "column_join": "user_id",
+ "column_results": [
+ "name",
+ ]
+ }
+ ],
+ "orders": {
+ "columns": [
+ "id"
+ ],
+ "ascending": false
+ }
+ }
+
+ const result = await axios
+ .post(PANIC_BUTTON_SEARCH, payload, config)
+ .then(res => res)
+ .catch((error) => error.response);
+ if (result && result.data) {
+ if (result && result.data && result.data.code == 200) {
+ this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord, dataExport: result.data.data_export });
+ } else {
+ NotificationManager.error('Gagal Menerima Data!!', 'Failed');
+ }
+ }
+ }
+
+ handleOpenDialog = (type) => {
+ if (type === "Map") {
+ this.setState({ openDialog: true })
+ this.showChildDialog();
+ } else {
+ this.setState({ openDialogEdit: true })
+ this.showDialogEdit();
+ }
+
+ }
+
+ handleCloseDialog = () => {
+ this.setState({ openDialog: false })
+ }
+
+ handleCloseDialogEdit = (type, data) => {
+ if (type === "save") {
+ this.updateStatusResponse(data);
+ }
+ this.setState({ openDialogEdit: false })
+ }
+
+ toggleMapDialog = () => {
+ this.setState({ openDialog: !this.state.openDialog })
+ }
+
+ toggleEditDialog = () => {
+ this.setState({ openDialogEdit: !this.state.openDialogEdit });
+ }
+
+ handleMap = data => {
+ this.setState({ dataMap: data });
+ this.handleOpenDialog('Map');
+ }
+
+ handleEdit = data => {
+ this.setState({ dataEdit: data });
+ this.handleOpenDialog('Edit');
+ }
+
+ handleDelete = (id) => {
+ this.setState({ alertDelete: true, idDelete: id });
+ }
+
+ onShowSizeChange = (current, pageSize) => {
+ this.setState({ rowsPerPage: pageSize }, () => {
+ this.getDataPanicButton();
+ })
+ }
+
+ onPagination = (current, pageSize) => {
+ this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
+ this.getDataPanicButton();
+ })
+ }
+
+ toggle = (param) => {
+ if (param === "map") {
+ this.setState(prevState => ({ tooltipMap: !prevState.tooltipMap }))
+ } else if (param === "edit") {
+ this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
+ } else if (param === "delete") {
+ this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
+ } else if (param === "export") {
+ this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
+ }
+ }
+
+ handleDatePicker = (date, dateString) => {
+ this.setState({ startDate: date[0], endDate: date[1] }, () => {
+ this.getDataPanicButton();
+ })
+ }
+
+ handleTipe = (e) => {
+ this.setState({ typeClock: e.target.value }, () => {
+ this.getDataPanicButton();
+ });
+ }
+
+ handleExportExcel = () => {
+ const dataExcel = this.state.dataTable || [];
+ const fileName = "Panic Button.xlsx";
+ let dataExport = [];
+ dataExcel.map((val) => {
+ let row = {
+ "Tanggal": moment(val.created_at).format("DD-MM-YYYY HH:MM:SS"),
+ "Nama Karyawan": val.join_first_name,
+ "Latitude": val.lat,
+ "Longitude": val.lon,
+ "Status": val.status_response
+ }
+ dataExport.push(row);
+ })
+ const ws = XLSX.utils.json_to_sheet(dataExport);
+ const wb = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(wb, ws, 'Panic Button');
+
+ XLSX.writeFile(wb, fileName);
+ }
+
+ updateStatusResponse = async (data) => {
+ let url = PANIC_BUTTON_UPDATE(data.id);
+ let payload = {
+ "user_id": data.user_id,
+ "lat": data.lat,
+ "lon": data.lon,
+ "status_response": data.status_response,
+ "description": "update data panic"
+
+ }
+
+ const result = await axios
+ .put(url, payload, config)
+ .then(res => res)
+ .catch((error) => error.response);
+ if (result && result.data) {
+ if (result.data.code == 200) {
+ this.getDataPanicButton()
+ NotificationManager.success('Berhasil update status response!!', 'Success!');
+ } else {
+ NotificationManager.error('Gagal update status response!!', 'Failed');
+ }
+ }
+ }
+
+ renderTable = () => {
+ const t = this.props;
+ const dataTable2 = this.state.dataTable || [];
+ return (
+
+ {dataTable2.length !== 0 ? dataTable2.map((n) => {
+ return (
+ {this.props.t('panicButton')}
-
-
-
-
-
-
-
-
-
-
- this.handleChangeDay(e)} defaultValue={this.state.currentDay}>
-
-
-
-
-
-
-
- | {i.name} | - ) - })} -
|---|
+ this.toggleMapDialog}
+ dataMap={this.state.dataMap}
+ showDialog={showDialog => this.showChildDialog = showDialog}
+ />
+ this.toggleEditDialog}
+ dataEdit={this.state.dataEdit}
+ showDialog={showDialog => this.showDialogEdit = showDialog}
+ />
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
+export default withTranslation()(index);
diff --git a/src/views/SimproV2/ResourceWorker/DialogForm.js b/src/views/SimproV2/ResourceWorker/DialogForm.js
index 0c2ec55..5c4bb67 100644
--- a/src/views/SimproV2/ResourceWorker/DialogForm.js
+++ b/src/views/SimproV2/ResourceWorker/DialogForm.js
@@ -135,6 +135,10 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
alert("Password doesn't match");
return;
}
+ if (password.length < 8) {
+ alert("Password minimum 8 character");
+ return;
+ }
data = {
id,
username,
@@ -199,7 +203,10 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
)
}
-
+ const isValidEmail = (email) => {
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ return emailRegex.test(email);
+ };
const renderForm = () => {
return (
{this.props.t('panicButton')}
+
+
+
+
+
+
+
+
+
+
+ this.handleChangeDay(e)} defaultValue={this.state.currentDay}>
+
+
+
+
+
+
+
+ | {i.name} | + ) + })} +
|---|