ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update CRUD in project charter and add dependencies CKEditor 5

pull/2/head
wahyuun 1 year ago
parent
1f3f820af6
commit
53eb2b0a1e
5 changed files with 1234 additions and 1082 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 6
      src/const/ApiConst.js
  3. 2146
      src/views/SimproV2/CreatedProyek/DialogFormProyek.js
  4. 80
      src/views/SimproV2/CreatedProyek/ViewProject.js
  5. 82
      src/views/SimproV2/CreatedProyek/index.js

2
package.json
Unescape View File

@ -13,6 +13,8 @@
},
"dependencies": {
"@ant-design/plots": "^1.1.1",
"@ckeditor/ckeditor5-build-classic": "^39.0.2",
"@ckeditor/ckeditor5-react": "^6.1.0",
"@coreui/coreui": "^2.1.12",
"@coreui/icons": "0.3.0",
"@coreui/react": "^2.5.1",

6
src/const/ApiConst.js
Unescape View File

@ -677,3 +677,9 @@ export const HIERARCHY_FTTH_TREE = (id) => {
return `${BASE_SIMPRO_LUMEN}/hierarchy-ftths/tree/${id}`;
};
export const WAYPOINT_SEARCH = `${BASE_SIMPRO_LUMEN}/waypoint/search`;
export const IMAGE_UPLOAD = `${BASE_SIMPRO_LUMEN}/image/upload`;
export const IMAGE_DELETE = (id, category) => {
return `${BASE_SIMPRO_LUMEN}/image/delete/${id}/${category}`;
}

2146
src/views/SimproV2/CreatedProyek/DialogFormProyek.js
View File

File diff suppressed because it is too large Load Diff

80
src/views/SimproV2/CreatedProyek/ViewProject.js
Unescape View File

@ -6,21 +6,28 @@ import 'antd/dist/antd.css';
import _ from 'underscore'
import './style.css'
import { formatThousand, sortBy } from '../../../const/CustomFunc';
import { BASE_OSPRO } from "../../../const/ApiConst";
const createMarkup = (element) => {
return {__html: element};
}
const ViewProject = ({ openDialog, closeDialog, toggleDialog, projectCharter, projectParticipant, projectMilestone, projectApproval, projectManager, projectK3, assignHR }) => {
const ViewProject = ({ openDialog, closeDialog, toggleDialog, projectCharter, projectParticipant, 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 [image, setImage] = useState("")
const [budget, setBudget] = useState("")
const [currency, setCurrency] = useState("")
const [testing, setTesting] = useState("")
@ -39,11 +46,17 @@ const createMarkup = (element) => {
setLokasiKantor("")
setDurasiProyek("")
setMulaiProyek("")
setValueProyek("")
setScoupeProyek("")
setSponsorProyek("")
setLateConsequenceProyek("")
setAssumtionProyek("")
setObjective("")
setProjectSuccess("")
setParticipants([])
setDataK3Search([])
setAssignHR([])
setImage("")
setBudget("")
setCurrency("")
setTesting("")
@ -61,6 +74,11 @@ const createMarkup = (element) => {
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);
@ -70,6 +88,12 @@ const createMarkup = (element) => {
}
}, [projectCharter]);
useEffect(() => {
if (projectImage && projectImage != {}) {
setImage(projectImage.image)
}
}, [projectImage]);
useEffect(() => {
if(projectParticipant && projectParticipant.length > 0){
setParticipants(projectParticipant)
@ -232,6 +256,7 @@ const createMarkup = (element) => {
const tdStyle = {
border: '1px solid black',
width: "250px"
};
const pStyle = {
marginLeft: '5pt',
@ -254,17 +279,6 @@ const createMarkup = (element) => {
padding: '0',
};
const redStyle = {
fontFamily: 'Arial',
fontSize: '10pt',
color: '#FF0000',
};
const boldItalicStyle = {
...pStyle,
fontWeight: 'bold',
fontStyle: 'italic',
};
const renderForm = () => {
return (
<div>
@ -328,7 +342,7 @@ const createMarkup = (element) => {
<p style={ pStyle }>Nilai Kontrak Proyek</p>
</td>
<td colSpan="2" style={tdStyle}>
<p>&nbsp;</p>
<p>&nbsp;{valueProyek ?? '-'}</p>
</td>
</tr>
<tr>
@ -344,7 +358,9 @@ const createMarkup = (element) => {
<p style={ pStyle }>Sponsor Proyek</p>
</td>
<td>
<p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>Adalah Divisi yang memiliki akun atas proyek ini berikut nama GM nya</p>
<p style={{ ...pStyle, fontWeight: 'normal', fontStyle: 'italic' }}>
{sponsorProyek ?? '-'}
</p>
</td>
<td>
<p>&nbsp;</p>
@ -378,7 +394,7 @@ const createMarkup = (element) => {
</tr>
<tr>
<td style={tdStyle}>
<p style={italicStyle}>{objectives}</p>
<p style={italicStyle}>{objectives ?? '-'}</p>
</td>
</tr>
</tbody>
@ -394,10 +410,7 @@ const createMarkup = (element) => {
<tr>
<td style={tdStyle}>
<ul>
<li style={pStyle}>Jasa</li>
<li style={pStyle}>Material</li>
<li style={pStyle}>Implementasi</li>
<li style={pStyle}>dll</li>
<li style={pStyle}>{ scoupeProyek ?? '-' }</li>
</ul>
</td>
</tr>
@ -435,7 +448,13 @@ const createMarkup = (element) => {
</tr>
<tr>
<th style={emptyCellStyle}>
<p>&nbsp;</p>
<p>&nbsp;
{image ? (
<img src={`${BASE_OSPRO}/assets/image/` + image} style={{ width: "50px" }}></img>
) : (
'-'
)}
</p>
</th>
</tr>
</tbody>
@ -515,7 +534,7 @@ const createMarkup = (element) => {
</tr>
<tr>
<td>
<p dangerouslySetInnerHTML={createMarkup(potentialRisks)}></p>
<p dangerouslySetInnerHTML={createMarkup(potentialRisks ?? '-')}></p>
</td>
</tr>
</tbody>
@ -530,11 +549,7 @@ const createMarkup = (element) => {
</th>
</tr>
<tr>
<th>
<p style={italicStyle}>Adalah dampak dari jika terjadi keterlambatan atas implementasi proyek.</p>
<p style={italicStyle}>Sampaikan berapa besar kerugian jika dikenakan dengan denda maksimal.</p>
<p style={italicStyle}>Apa dampak pada potensi repeat order untuk proyek berikutnya.</p>
</th>
<p dangerouslySetInnerHTML={createMarkup(lateProyek ?? '-')}></p>
</tr>
</tbody>
</table>
@ -548,10 +563,7 @@ const createMarkup = (element) => {
</tr>
<tr>
<th>
<p style={pStyle}>Waktu</p>
<p style={pStyle}>Biaya</p>
<p style={pStyle}>Benefit bagi customer: misalkan bisa memberikan layanan publik sebelum hari raya</p>
<p style={redStyle}>Zero accident Report: (tidak adanya kejadian yang memberikan dampak negative kepada Kesehatan tim dan warga sekitar)</p>
<p style={pStyle}>{projectSuccess ?? '-'}</p>
</th>
</tr>
</tbody>
@ -566,9 +578,7 @@ const createMarkup = (element) => {
</tr>
<tr>
<td>
<p style={pStyle}>
Disebutkan SDM/Tools apa yang bisa dan mandatory diperlukan untuk menunjang lancarnya implementasi, dan jika hal tersebut tidak terpenuhi maka potensi akan terjadinya kondisi yang tidak diinginkan akan menjadi semakin besar. Misalkan; harus tersedia 4 orang drafter yang sudah memahami alur proyek dengan baik.
</p>
<p dangerouslySetInnerHTML={createMarkup(assumtionProyek ?? '-')}></p>
</td>
</tr>
</tbody>
@ -669,10 +679,10 @@ const createMarkup = (element) => {
</td>
</tr>
<tr>
<td style={thStyle}>
<td style={tdStyle}>
<p style={pStyle}>NO</p>
</td>
<td style={thStyle}>
<td style={tdStyle}>
<p style={pStyle}>ITEM</p>
</td>
</tr>

82
src/views/SimproV2/CreatedProyek/index.js
Unescape View File

@ -55,6 +55,9 @@ import {
PHASE_PROYEK,
DIVISI_LIST,
BASE_OSPRO,
IMAGE_UPLOAD,
IMAGE_GET_BY_ID,
IMAGE_DELETE,
} from "../../../const/ApiConst";
import {
formatNumber,
@ -96,6 +99,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("");
@ -136,6 +146,7 @@ const CreatedProyek = ({ params, ...props }) => {
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);
@ -431,9 +442,10 @@ const CreatedProyek = ({ params, ...props }) => {
setidTask(id);
};
const handleOpenDialogProyek = (id) => {
const handleOpenDialogProyek = async (id) => {
setOpenDialogProyek(true);
setidTask(id);
await getProjectImage(id);
};
const handleOpenDialogGantt = (data) => {
@ -504,6 +516,7 @@ const CreatedProyek = ({ params, ...props }) => {
await getProjectApproval(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);
@ -571,8 +584,8 @@ const CreatedProyek = ({ params, ...props }) => {
.catch((error) => error.response);
if (result && result.data && result.data.code == 200) {
const {kode_sortname,nama,mulai_proyek,rencana_biaya,keterangan,durasi_proyek,project_objectives,potential_risk,currency_symbol} = result.data.data;
const dataToSend = { kode_sortname, nama, mulai_proyek, rencana_biaya, keterangan, durasi_proyek, project_objectives, potential_risk, currency_symbol };
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");
@ -647,6 +660,17 @@ const CreatedProyek = ({ params, ...props }) => {
}
};
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: [
@ -720,6 +744,7 @@ const CreatedProyek = ({ params, ...props }) => {
setProjectCharter(null);
setK3Search(null);
setProjectAssignHR(null);
setProjectImage(null);
setOpenDialogViewDetail(false);
};
@ -733,6 +758,7 @@ const CreatedProyek = ({ params, ...props }) => {
setProjectCharter(null);
setK3Search(null);
setProjectAssignHR(null);
setProjectImage(null);
}
setOpenDialogViewDetail(!openDialogViewDetail);
};
@ -746,7 +772,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!!");
@ -766,6 +793,7 @@ const CreatedProyek = ({ params, ...props }) => {
.catch((error) => error.response);
if (result && result.data && result.data.code === 200) {
const { participants, milestones, approval } = data.projectCharter;
const imageObject = data.imageStructureOrg;
const resultParticipant = await saveParticipant(
result.data.data_result.id,
participants
@ -778,12 +806,18 @@ const CreatedProyek = ({ params, ...props }) => {
result.data.data_result.id,
approval
);
if (imageObject) {
await saveImage(
result.data.data_result.id,
imageObject
);
}
if (
resultParticipant === "berhasil" &&
resultMilestone === "berhasil" &&
resultApproval === "berhasil"
) {
// getDataProyek();
NotificationManager.success(
`Data proyek berhasil ditambah`,
"Success!!"
@ -860,8 +894,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 imageObject = data.imageStructureOrg;
let urlEdit = PROYEK_EDIT(data.id);
const formData = data;
@ -872,6 +931,15 @@ 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);
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!!");
@ -882,7 +950,6 @@ const CreatedProyek = ({ params, ...props }) => {
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),
@ -1432,6 +1499,7 @@ const CreatedProyek = ({ params, ...props }) => {
dataPhaseProject={dataPhaseProject}
dataDivisions={dataDivisions}
dataPM={dataPm}
projectImage={image}
/>
),
[
@ -1441,6 +1509,7 @@ const CreatedProyek = ({ params, ...props }) => {
dataPhaseProject,
dataTypeProyek,
idTask,
image
]
);
@ -1559,6 +1628,7 @@ const CreatedProyek = ({ params, ...props }) => {
projectManager={projectPM}
projectK3={projectK3Search}
assignHR={projectAssignHR}
projectImage={image}
/>
),
[openDialogViewDetail]

Write Preview
Loading…
Cancel
Save