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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 6
      src/const/ApiConst.js
  3. 604
      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": { "dependencies": {
"@ant-design/plots": "^1.1.1", "@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/coreui": "^2.1.12",
"@coreui/icons": "0.3.0", "@coreui/icons": "0.3.0",
"@coreui/react": "^2.5.1", "@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}`; return `${BASE_SIMPRO_LUMEN}/hierarchy-ftths/tree/${id}`;
}; };
export const WAYPOINT_SEARCH = `${BASE_SIMPRO_LUMEN}/waypoint/search`; 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}`;
}

604
src/views/SimproV2/CreatedProyek/DialogFormProyek.js
Unescape View File

@ -4,6 +4,8 @@ import { Button, Form, FormGroup, Label, Input, Col, Row } from "reactstrap";
import { DatePicker, Tooltip, Select, Divider } from "antd"; import { DatePicker, Tooltip, Select, Divider } from "antd";
import axios from "../../../const/interceptorApi"; import axios from "../../../const/interceptorApi";
import moment from "moment"; import moment from "moment";
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { import {
NotificationContainer, NotificationContainer,
NotificationManager, NotificationManager,
@ -29,11 +31,12 @@ const DialogFormProyek = ({
dataPhaseProject, dataPhaseProject,
dataDivisions, dataDivisions,
dataPM, dataPM,
projectImage
}) => { }) => {
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
const HEADER = { const HEADER = {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
}, },
}; };
@ -41,6 +44,8 @@ const DialogFormProyek = ({
const [name, setName] = useState(""); const [name, setName] = useState("");
const [shortName, setShortName] = useState(""); const [shortName, setShortName] = useState("");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
const [late, setLateConsequence] = useState("");
const [assumtion, setAssumtion] = useState("");
const [biaya, setBiaya] = useState(""); const [biaya, setBiaya] = useState("");
const [typeProject, setTypeproject] = useState(null); const [typeProject, setTypeproject] = useState(null);
const [phaseProject, setPhaseProject] = useState(null); const [phaseProject, setPhaseProject] = useState(null);
@ -51,6 +56,8 @@ const DialogFormProyek = ({
const [startDate, setStartDate] = useState(moment()); const [startDate, setStartDate] = useState(moment());
const [endDate, setEndDate] = useState(moment()); const [endDate, setEndDate] = useState(moment());
const [workArea, setWorkArea] = useState(""); const [workArea, setWorkArea] = useState("");
const [duration, setProjectDuration] = useState("");
const [organization, setProjectStructureOrg] = useState(null);
const [finance, setFinance] = useState(""); const [finance, setFinance] = useState("");
const [investor, setInvestor] = useState(""); const [investor, setInvestor] = useState("");
const [company, setCompany] = useState(""); const [company, setCompany] = useState("");
@ -63,6 +70,7 @@ const DialogFormProyek = ({
const [objectives, setObjectives] = useState(""); const [objectives, setObjectives] = useState("");
const [projectIsConsideredSuccessful, setProjectIsConsideredSuccessful] = useState(""); const [projectIsConsideredSuccessful, setProjectIsConsideredSuccessful] = useState("");
const [participants, setParticipants] = useState([]); const [participants, setParticipants] = useState([]);
const [image, setImage] = useState("")
const [availableResources, setAvailableResources] = useState(""); const [availableResources, setAvailableResources] = useState("");
const [milestones, setMilestones] = useState([]); const [milestones, setMilestones] = useState([]);
const [potentialRisks, setPotentialRisks] = useState(""); const [potentialRisks, setPotentialRisks] = useState("");
@ -83,6 +91,8 @@ const DialogFormProyek = ({
setName(val.nama); setName(val.nama);
setShortName(val.kode_sortname); setShortName(val.kode_sortname);
setDescription(val.keterangan); setDescription(val.keterangan);
setLateConsequence(val.late_consequence ? val.late_consequence : "");
setAssumtion(val.assumtion ? val.assumtion : "");
setBiaya(val.rencana_biaya ? formatNumber(val.rencana_biaya) : ""); setBiaya(val.rencana_biaya ? formatNumber(val.rencana_biaya) : "");
setTypeproject(val.type_proyek_id); setTypeproject(val.type_proyek_id);
setPhaseProject(val.phase_id); setPhaseProject(val.phase_id);
@ -92,6 +102,7 @@ const DialogFormProyek = ({
setStartDate(moment(val.mulai_proyek)); setStartDate(moment(val.mulai_proyek));
setEndDate(moment(val.akhir_proyek)); setEndDate(moment(val.akhir_proyek));
setWorkArea(val.area_kerja); setWorkArea(val.area_kerja);
setProjectDuration(val.durasi_proyek);
setInvestor(val.investor); setInvestor(val.investor);
setCompany(val.company); setCompany(val.company);
setFinance(val.finance); setFinance(val.finance);
@ -152,15 +163,20 @@ const DialogFormProyek = ({
setStartDate(moment()); setStartDate(moment());
setEndDate(moment()); setEndDate(moment());
setDescription(""); setDescription("");
setLateConsequence("");
setAssumtion("");
setInvestor(""); setInvestor("");
setFinance(""); setFinance("");
setWorkArea(""); setWorkArea("");
setProjectDuration("");
setProjectStructureOrg(null);
setCompany(""); setCompany("");
setCurrency(""); setCurrency("");
setCurrencyCode(""); setCurrencyCode("");
setCurrencySymbol(null); setCurrencySymbol(null);
setCurrencyName(""); setCurrencyName("");
setObjectives(""); setObjectives("");
setImage("");
setProjectIsConsideredSuccessful(""); setProjectIsConsideredSuccessful("");
setParticipants([]); setParticipants([]);
setAvailableResources(""); setAvailableResources("");
@ -189,7 +205,7 @@ const DialogFormProyek = ({
} }
}, [openDialog]); }, [openDialog]);
const handleSave = () => { const handleSave = () => {
let data = ""; let data = "";
if (idTask) { if (idTask) {
data = { data = {
@ -208,6 +224,9 @@ const DialogFormProyek = ({
finance, finance,
company, company,
area_kerja: workArea, area_kerja: workArea,
durasi_proyek: parseInt(duration),
late_consequence: late,
assumtion: assumtion,
keterangan: description, keterangan: description,
project_objectives: objectives, project_objectives: objectives,
considered_success_when: projectIsConsideredSuccessful, considered_success_when: projectIsConsideredSuccessful,
@ -218,6 +237,7 @@ const DialogFormProyek = ({
currency_name: currencyName, currency_name: currencyName,
}; };
data.projectCharter = { participants, milestones, approval }; data.projectCharter = { participants, milestones, approval };
data.imageStructureOrg = organization ? organization : null;
closeDialog("edit", data); closeDialog("edit", data);
} else { } else {
data = { data = {
@ -235,17 +255,22 @@ const DialogFormProyek = ({
finance, finance,
company, company,
area_kerja: workArea, area_kerja: workArea,
durasi_proyek: parseInt(duration),
late_consequence: late,
assumtion: assumtion,
keterangan: description, keterangan: description,
project_objectives: objectives, project_objectives: objectives,
considered_success_when: projectIsConsideredSuccessful, considered_success_when: projectIsConsideredSuccessful,
potential_risk: potentialRisks, potential_risk: potentialRisks,
testing_environment: testingEnv, testing_environment: testingEnv,
currency_symbol: currencySymbol, currency_symbol: currencySymbol,
currency_code: currencyCode, currency_code: currencyCode,
currency_name: currencyName, currency_name: currencyName,
}; };
data.projectCharter = { participants, milestones, approval }; data.projectCharter = { participants, milestones, approval };
closeDialog("add", data); data.imageStructureOrg = organization ? organization : null;
closeDialog("add", data);
} }
handleClearData(); handleClearData();
}; };
@ -324,6 +349,10 @@ const DialogFormProyek = ({
alert("Budget cannot be empty!"); alert("Budget cannot be empty!");
return false; return false;
} }
if (!currencySymbol || currencySymbol === "") {
alert("Currency Symbol cannot be empty!");
return false;
}
setStep(2); setStep(2);
}; };
@ -425,251 +454,303 @@ const DialogFormProyek = ({
} }
} }
}; };
const editorConfig = {
height: '900px'
};
const renderForm = () => { const RenderFormProject = () => {
return ( return (
<Form> <>
<Row> <Form style={{ display: step === 1 ? 'block' : 'none' }}>
<Col md={12}> <Row>
<span style={{ color: "red" }}>*</span> Wajib diisi. <Col md={12}>
</Col> <span style={{ color: "red" }}>*</span> Wajib diisi.
</Row> </Col>
<Row> </Row>
<Col md={6}> <Row>
<FormGroup> <Col md={6}>
<Label className="capitalize"> <FormGroup>
Project Name<span style={{ color: "red" }}>*</span> <Label className="capitalize">
</Label> Project Name<span style={{ color: "red" }}>*</span>
<Input </Label>
type="text" <Input
value={name} type="text"
onChange={(e) => setName(e.target.value)} value={name}
/> onChange={(e) => setName(e.target.value)}
</FormGroup> />
</Col> </FormGroup>
<Col md={6}> </Col>
<FormGroup> <Col md={6}>
<Label className="capitalize">Code / Short Name<span style={{ color: "red" }}>*</span></Label> <FormGroup>
<Input <Label className="capitalize">Code / Short Name<span style={{ color: "red" }}>*</span></Label>
type="text" <Input
value={shortName} type="text"
onChange={(e) => setShortName(e.target.value)} value={shortName}
/> onChange={(e) => setShortName(e.target.value)}
</FormGroup> />
</Col> </FormGroup>
</Row> </Col>
<Row> </Row>
<Col md={6}> <Row>
<FormGroup> <Col md={6}>
<Label className="capitalize"> <FormGroup>
Project Type<span style={{ color: "red" }}>*</span> <Label className="capitalize">
</Label> Project Type<span style={{ color: "red" }}>*</span>
<Select </Label>
showSearch <Select
filterOption={(inputValue, option) => showSearch
option.children.toLowerCase().includes(inputValue.toLowerCase()) filterOption={(inputValue, option) =>
} option.children.toLowerCase().includes(inputValue.toLowerCase())
value={typeProject} }
defaultValue={typeProject} value={typeProject}
onChange={onChangeTypeProject} defaultValue={typeProject}
style={{ width: "100%" }} onChange={onChangeTypeProject}
> style={{ width: "100%" }}
{dataTypeProyek.map((res) => ( >
<Option key={res.id} value={res.id}> {dataTypeProyek.map((res) => (
{res.name} <Option key={res.id} value={res.id}>
</Option> {res.name}
))} </Option>
</Select> ))}
</FormGroup> </Select>
</Col> </FormGroup>
<Col md={6}> </Col>
<FormGroup> <Col md={6}>
<Label className="capitalize">PM</Label> <FormGroup>
<Select <Label className="capitalize">PM</Label>
showSearch <Select
filterOption={(inputValue, option) => showSearch
option.children.toLowerCase().includes(inputValue.toLowerCase()) filterOption={(inputValue, option) =>
} option.children.toLowerCase().includes(inputValue.toLowerCase())
value={pic} }
defaultValue={pic} value={pic}
onChange={onChangePm} defaultValue={pic}
style={{ width: "100%" }} onChange={onChangePm}
> style={{ width: "100%" }}
{dataPM.map((res) => ( >
<Option key={res.id} value={res.id}> {dataPM.map((res) => (
{res.name} <Option key={res.id} value={res.id}>
</Option> {res.name}
))} </Option>
</Select> ))}
</FormGroup> </Select>
</Col> </FormGroup>
</Row> </Col>
<Row> </Row>
<Col md={6}> <Row>
<FormGroup> <Col md={6}>
<Label className="capitalize"> <FormGroup>
Start Date<span style={{ color: "red" }}>*</span> <Label className="capitalize">
</Label> Start Date<span style={{ color: "red" }}>*</span>
<DatePicker </Label>
format={"DD-MM-YYYY"} <DatePicker
style={{ width: "100%" }} format={"DD-MM-YYYY"}
value={startDate} style={{ width: "100%" }}
onChange={handleDatePickerStart} value={startDate}
/> onChange={handleDatePickerStart}
</FormGroup> />
</Col> </FormGroup>
<Col md={6}> </Col>
<FormGroup> <Col md={6}>
<Label className="capitalize"> <FormGroup>
End Date<span style={{ color: "red" }}>*</span> <Label className="capitalize">
</Label> End Date<span style={{ color: "red" }}>*</span>
<DatePicker </Label>
disabledDate={(current) => { <DatePicker
let currentDate = moment(current).format("YYYY-MM-DD"); disabledDate={(current) => {
let customDate = moment(startDate) let currentDate = moment(current).format("YYYY-MM-DD");
.add(1, "days") let customDate = moment(startDate)
.format("YYYY-MM-DD"); .add(1, "days")
return current && currentDate < customDate; .format("YYYY-MM-DD");
}} return current && currentDate < customDate;
format={"DD-MM-YYYY"} }}
style={{ width: "100%" }} format={"DD-MM-YYYY"}
value={endDate} style={{ width: "100%" }}
onChange={handleDatePickerEnd} value={endDate}
/> onChange={handleDatePickerEnd}
</FormGroup> />
</Col> </FormGroup>
</Row> </Col>
<Row> </Row>
<Col md={6}> <Row>
<FormGroup> <Col md={6}>
<Label className="capitalize">Work Area</Label> <FormGroup>
<Input <Label className="capitalize">Work Area</Label>
type="text" <Input
value={workArea} type="text"
onChange={(e) => setWorkArea(e.target.value)} value={workArea}
/> onChange={(e) => setWorkArea(e.target.value)}
</FormGroup> />
</Col> </FormGroup>
<Col md={6}> </Col>
<FormGroup> <Col md={6}>
<Label className="capitalize">Company</Label> <FormGroup>
<Input <Label className="capitalize">Company</Label>
type="text" <Input
value={company} type="text"
onChange={(e) => setCompany(e.target.value)} value={company}
/> onChange={(e) => setCompany(e.target.value)}
</FormGroup> />
</Col> </FormGroup>
</Row> </Col>
<Row> </Row>
<Col md={6}> <Row>
<FormGroup> <Col md={6}>
<Label className="capitalize"> <FormGroup>
Budget<span style={{ color: "red" }}>*</span> <Label className="capitalize">
</Label> Budget<span style={{ color: "red" }}>*</span>
<Row> </Label>
<Col md={4}> <Row>
<Select <Col md={4}>
value={currencySymbol} <Select
onChange={onChangeCurrency} value={currencySymbol}
defaultValue="IDR|Rp|Indonesian rupiah" onChange={onChangeCurrency}
style={{ width: "100%" }} defaultValue="IDR|Rp|Indonesian rupiah"
> style={{ width: "100%" }}
{currencyList && currencyList.map(res => ( >
<Option key={res.id} value={`${res.cc}|${res.symbol}|${res.name}`}>{`${res.cc}`}</Option> {currencyList && currencyList.map(res => (
))} <Option key={res.id} value={`${res.cc}|${res.symbol}|${res.name}`}>{`${res.cc}`}</Option>
</Select> ))}
</Col> </Select>
<Col md={8}> </Col>
<Input <Col md={8}>
type="text" <Input
value={biaya} type="text"
onChange={(e) => setBiaya(formatNumber(e.target.value))} value={biaya}
/> onChange={(e) => setBiaya(formatNumber(e.target.value))}
</Col> />
</Row> </Col>
</FormGroup> </Row>
</Col> </FormGroup>
<Col md={6}> </Col>
<FormGroup> </Row>
<Label className="capitalize">Description</Label> <Row>
<Input <Col md={6}>
type="textarea" <FormGroup>
value={description} <Label>Handled By Division</Label>
onChange={(e) => setDescription(e.target.value)} <Select
/> value={divisiProject}
</FormGroup> defaultValue={divisiProject}
</Col> onChange={onChangeDivisiProject}
</Row> style={{ width: "100%" }}
<Row> >
<Col md={6}> {dataDivisions.map((res) => (
<FormGroup> <Option key={res.id} value={res.id}>
<Label>Handled By Division</Label> {res.displayName}
<Select </Option>
value={divisiProject} ))}
defaultValue={divisiProject} </Select>
onChange={onChangeDivisiProject} </FormGroup>
style={{ width: "100%" }} </Col>
> <Col md={6}>
{dataDivisions.map((res) => ( <FormGroup>
<Option key={res.id} value={res.id}> <Label className="capitalize">Project Duration</Label>
{res.displayName} <Input
</Option> type="number"
))} min="1"
</Select> value={duration}
</FormGroup> onChange={(e) => setProjectDuration(e.target.value)}
</Col> />
</Row> </FormGroup>
<Divider orientation="left" plain> </Col>
Info Dashboard </Row>
</Divider> <Row>
<Row> <Col md={6}>
<Col md={6}> <FormGroup>
<FormGroup> <Label className="capitalize">organizational Structure</Label>
<Label>Phase</Label> <Input
<Select type="file"
value={phaseProject} accept="image/*"
defaultValue={phaseProject} onChange={(e) => setProjectStructureOrg(e.target.files[0])}
onChange={onChangePhaseProject} />
style={{ width: "100%" }} <small>{projectImage ? projectImage.image : <p style={{ color: "red" }}>Not found image</p> }</small>
> </FormGroup>
{dataPhaseProject.map((res) => ( </Col>
<Option key={res.id} value={res.id}> <Col md={6}>
{res.name} <FormGroup>
</Option> <Label className="capitalize">Description</Label>
))} <Input
</Select> type="textarea"
</FormGroup> value={description}
</Col> onChange={(e) => setDescription(e.target.value)}
<Col md={6}> />
<FormGroup> </FormGroup>
<Label>Cost Health</Label> </Col>
<Select </Row>
value={budgetHealth} <Row>
defaultValue={budgetHealth} <Col md={12}>
onChange={onChangeBudgetHealth} <Label className="capitalize">Late Consequence</Label>
style={{ width: "100%" }} <CKEditor
> editor={ ClassicEditor }
<Option key="on-budget" value="on-budget"> data={ late }
On budget config={editorConfig}
</Option> onChange={ ( event, editor ) => {
<Option key="warning" value="warning"> const data = editor.getData();
Warning setLateConsequence(data);
</Option> } }
<Option key="overrun" value="overrun"> />
Overrun </Col>
</Option> </Row>
</Select> <Row>
</FormGroup> <Col md={12}>
</Col> <Label className="capitalize">Assumtion</Label>
</Row> <CKEditor
</Form> editor={ClassicEditor}
); data={assumtion}
}; config={editorConfig}
onChange={ ( event, editor ) => {
const data = editor.getData();
setAssumtion(data);
} }
/>
</Col>
</Row>
<Divider orientation="left" plain>
Info Dashboard
</Divider>
<Row>
<Col md={6}>
<FormGroup>
<Label>Phase</Label>
<Select
value={phaseProject}
defaultValue={phaseProject}
onChange={onChangePhaseProject}
style={{ width: "100%" }}
>
{dataPhaseProject.map((res) => (
<Option key={res.id} value={res.id}>
{res.name}
</Option>
))}
</Select>
</FormGroup>
</Col>
<Col md={6}>
<FormGroup>
<Label>Cost Health</Label>
<Select
value={budgetHealth}
defaultValue={budgetHealth}
onChange={onChangeBudgetHealth}
style={{ width: "100%" }}
>
<Option key="on-budget" value="on-budget">
On budget
</Option>
<Option key="warning" value="warning">
Warning
</Option>
<Option key="overrun" value="overrun">
Overrun
</Option>
</Select>
</FormGroup>
</Col>
</Row>
</Form>
const renderFormCharter = () => { <Form style={{ display: step === 2 ? 'block' : 'none' }}>
return (
<Form>
<Row> <Row>
<Col md={3}> <Col md={3}>
<b>Project Objectives</b> <b>Project Objectives</b>
@ -707,11 +788,6 @@ const DialogFormProyek = ({
<b>Project Participants</b> <b>Project Participants</b>
</Col> </Col>
<Col md={9}> <Col md={9}>
{/* <Row>
<Col md={12}>
<Button className="pull-right" size="sm" color="primary" onClick={() => addParticipant()}><i className="fa fa-plus"></i></Button>
</Col>
</Row> */}
<Row> <Row>
<Col md={5}> <Col md={5}>
<b>Title</b> <b>Title</b>
@ -755,18 +831,10 @@ const DialogFormProyek = ({
<b>Milestones</b> <b>Milestones</b>
</Col> </Col>
<Col md={9}> <Col md={9}>
{/* <Row>
<Col md={12}>
<Button className="pull-right" size="sm" color="primary" onClick={() => addMilestone()}><i className="fa fa-plus"></i></Button>
</Col>
</Row> */}
<Row> <Row>
<Col md={4}> <Col md={4}>
<b>Status</b> <b>Status</b>
</Col> </Col>
{/* <Col md={3}>
<b>Due</b>
</Col> */}
<Col md={4}> <Col md={4}>
<b>Deadline</b> <b>Deadline</b>
</Col> </Col>
@ -807,11 +875,6 @@ const DialogFormProyek = ({
<b>Approval</b> <b>Approval</b>
</Col> </Col>
<Col md={9}> <Col md={9}>
{/* <Row>
<Col md={12}>
<Button className="pull-right" size="sm" color="primary" onClick={() => addApproval()}><i className="fa fa-plus"></i></Button>
</Col>
</Row> */}
<Row> <Row>
<Col md={3}> <Col md={3}>
<b>Title</b> <b>Title</b>
@ -834,9 +897,10 @@ const DialogFormProyek = ({
<div style={{ marginBottom: 50 }}>{RenderApproval()}</div> <div style={{ marginBottom: 50 }}>{RenderApproval()}</div>
</Col> </Col>
</Row> </Row>
</Form> </Form>
); </>
}; )
}
const RenderParticipants = () => { const RenderParticipants = () => {
if (participants.length > 0) { if (participants.length > 0) {
@ -1007,7 +1071,7 @@ const DialogFormProyek = ({
: "Add Project" : "Add Project"
: "Project Charter"} : "Project Charter"}
</ModalHeader> </ModalHeader>
<ModalBody>{step === 1 ? renderForm() : renderFormCharter()}</ModalBody> <ModalBody>{ RenderFormProject() }</ModalBody>
<ModalFooter> <ModalFooter>
{step === 1 ? ( {step === 1 ? (
<> <>

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

@ -6,21 +6,28 @@ import 'antd/dist/antd.css';
import _ from 'underscore' import _ from 'underscore'
import './style.css' import './style.css'
import { formatThousand, sortBy } from '../../../const/CustomFunc'; import { formatThousand, sortBy } from '../../../const/CustomFunc';
import { BASE_OSPRO } from "../../../const/ApiConst";
const createMarkup = (element) => { const createMarkup = (element) => {
return {__html: 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 [proyekName, setProyekName] = useState("")
const [description, setDescription] = useState("") const [description, setDescription] = useState("")
const [shortname, setKodeShortname] = useState("") const [shortname, setKodeShortname] = useState("")
const [lokasi, setLokasiKantor] = useState("") const [lokasi, setLokasiKantor] = useState("")
const [durasi, setDurasiProyek] = useState("") const [durasi, setDurasiProyek] = useState("")
const [mulaiProyek, setMulaiProyek] = 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 [objectives, setObjective] = useState("")
const [projectSuccess, setProjectSuccess] = useState("") const [projectSuccess, setProjectSuccess] = useState("")
const [participants, setParticipants] = useState("") const [participants, setParticipants] = useState("")
const [image, setImage] = useState("")
const [budget, setBudget] = useState("") const [budget, setBudget] = useState("")
const [currency, setCurrency] = useState("") const [currency, setCurrency] = useState("")
const [testing, setTesting] = useState("") const [testing, setTesting] = useState("")
@ -39,11 +46,17 @@ const createMarkup = (element) => {
setLokasiKantor("") setLokasiKantor("")
setDurasiProyek("") setDurasiProyek("")
setMulaiProyek("") setMulaiProyek("")
setValueProyek("")
setScoupeProyek("")
setSponsorProyek("")
setLateConsequenceProyek("")
setAssumtionProyek("")
setObjective("") setObjective("")
setProjectSuccess("") setProjectSuccess("")
setParticipants([]) setParticipants([])
setDataK3Search([]) setDataK3Search([])
setAssignHR([]) setAssignHR([])
setImage("")
setBudget("") setBudget("")
setCurrency("") setCurrency("")
setTesting("") setTesting("")
@ -61,6 +74,11 @@ const createMarkup = (element) => {
setLokasiKantor(projectCharter.lokasi_kantor); setLokasiKantor(projectCharter.lokasi_kantor);
setDurasiProyek(projectCharter.durasi_proyek); setDurasiProyek(projectCharter.durasi_proyek);
setMulaiProyek(projectCharter.mulai_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); setObjective(projectCharter.project_objectives);
setProjectSuccess(projectCharter.considered_success_when); setProjectSuccess(projectCharter.considered_success_when);
setBudget(projectCharter.rencana_biaya); setBudget(projectCharter.rencana_biaya);
@ -70,6 +88,12 @@ const createMarkup = (element) => {
} }
}, [projectCharter]); }, [projectCharter]);
useEffect(() => {
if (projectImage && projectImage != {}) {
setImage(projectImage.image)
}
}, [projectImage]);
useEffect(() => { useEffect(() => {
if(projectParticipant && projectParticipant.length > 0){ if(projectParticipant && projectParticipant.length > 0){
setParticipants(projectParticipant) setParticipants(projectParticipant)
@ -232,6 +256,7 @@ const createMarkup = (element) => {
const tdStyle = { const tdStyle = {
border: '1px solid black', border: '1px solid black',
width: "250px"
}; };
const pStyle = { const pStyle = {
marginLeft: '5pt', marginLeft: '5pt',
@ -254,17 +279,6 @@ const createMarkup = (element) => {
padding: '0', padding: '0',
}; };
const redStyle = {
fontFamily: 'Arial',
fontSize: '10pt',
color: '#FF0000',
};
const boldItalicStyle = {
...pStyle,
fontWeight: 'bold',
fontStyle: 'italic',
};
const renderForm = () => { const renderForm = () => {
return ( return (
<div> <div>
@ -328,7 +342,7 @@ const createMarkup = (element) => {
<p style={ pStyle }>Nilai Kontrak Proyek</p> <p style={ pStyle }>Nilai Kontrak Proyek</p>
</td> </td>
<td colSpan="2" style={tdStyle}> <td colSpan="2" style={tdStyle}>
<p>&nbsp;</p> <p>&nbsp;{valueProyek ?? '-'}</p>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -344,7 +358,9 @@ const createMarkup = (element) => {
<p style={ pStyle }>Sponsor Proyek</p> <p style={ pStyle }>Sponsor Proyek</p>
</td> </td>
<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>
<td> <td>
<p>&nbsp;</p> <p>&nbsp;</p>
@ -378,7 +394,7 @@ const createMarkup = (element) => {
</tr> </tr>
<tr> <tr>
<td style={tdStyle}> <td style={tdStyle}>
<p style={italicStyle}>{objectives}</p> <p style={italicStyle}>{objectives ?? '-'}</p>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -394,10 +410,7 @@ const createMarkup = (element) => {
<tr> <tr>
<td style={tdStyle}> <td style={tdStyle}>
<ul> <ul>
<li style={pStyle}>Jasa</li> <li style={pStyle}>{ scoupeProyek ?? '-' }</li>
<li style={pStyle}>Material</li>
<li style={pStyle}>Implementasi</li>
<li style={pStyle}>dll</li>
</ul> </ul>
</td> </td>
</tr> </tr>
@ -435,7 +448,13 @@ const createMarkup = (element) => {
</tr> </tr>
<tr> <tr>
<th style={emptyCellStyle}> <th style={emptyCellStyle}>
<p>&nbsp;</p> <p>&nbsp;
{image ? (
<img src={`${BASE_OSPRO}/assets/image/` + image} style={{ width: "50px" }}></img>
) : (
'-'
)}
</p>
</th> </th>
</tr> </tr>
</tbody> </tbody>
@ -515,7 +534,7 @@ const createMarkup = (element) => {
</tr> </tr>
<tr> <tr>
<td> <td>
<p dangerouslySetInnerHTML={createMarkup(potentialRisks)}></p> <p dangerouslySetInnerHTML={createMarkup(potentialRisks ?? '-')}></p>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -530,11 +549,7 @@ const createMarkup = (element) => {
</th> </th>
</tr> </tr>
<tr> <tr>
<th> <p dangerouslySetInnerHTML={createMarkup(lateProyek ?? '-')}></p>
<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>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -548,10 +563,7 @@ const createMarkup = (element) => {
</tr> </tr>
<tr> <tr>
<th> <th>
<p style={pStyle}>Waktu</p> <p style={pStyle}>{projectSuccess ?? '-'}</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>
</th> </th>
</tr> </tr>
</tbody> </tbody>
@ -566,9 +578,7 @@ const createMarkup = (element) => {
</tr> </tr>
<tr> <tr>
<td> <td>
<p style={pStyle}> <p dangerouslySetInnerHTML={createMarkup(assumtionProyek ?? '-')}></p>
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>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -669,10 +679,10 @@ const createMarkup = (element) => {
</td> </td>
</tr> </tr>
<tr> <tr>
<td style={thStyle}> <td style={tdStyle}>
<p style={pStyle}>NO</p> <p style={pStyle}>NO</p>
</td> </td>
<td style={thStyle}> <td style={tdStyle}>
<p style={pStyle}>ITEM</p> <p style={pStyle}>ITEM</p>
</td> </td>
</tr> </tr>

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

@ -55,6 +55,9 @@ import {
PHASE_PROYEK, PHASE_PROYEK,
DIVISI_LIST, DIVISI_LIST,
BASE_OSPRO, BASE_OSPRO,
IMAGE_UPLOAD,
IMAGE_GET_BY_ID,
IMAGE_DELETE,
} from "../../../const/ApiConst"; } from "../../../const/ApiConst";
import { import {
formatNumber, 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 [idTask, setidTask] = useState(0);
const [dataTable, setDatatable] = useState([]); const [dataTable, setDatatable] = useState([]);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
@ -136,6 +146,7 @@ const CreatedProyek = ({ params, ...props }) => {
const [projectPM, setPM] = useState(null); const [projectPM, setPM] = useState(null);
const [projectK3Search, setK3Search] = useState(null); const [projectK3Search, setK3Search] = useState(null);
const [projectAssignHR, setProjectAssignHR] = useState(null); const [projectAssignHR, setProjectAssignHR] = useState(null);
const [image, setProjectImage] = useState(null);
const [loadVersionGantt, setLoadVersionGantt] = useState(false); const [loadVersionGantt, setLoadVersionGantt] = useState(false);
const [loadHierarchy, setLoadHierarchy] = useState(false); const [loadHierarchy, setLoadHierarchy] = useState(false);
@ -431,9 +442,10 @@ const CreatedProyek = ({ params, ...props }) => {
setidTask(id); setidTask(id);
}; };
const handleOpenDialogProyek = (id) => { const handleOpenDialogProyek = async (id) => {
setOpenDialogProyek(true); setOpenDialogProyek(true);
setidTask(id); setidTask(id);
await getProjectImage(id);
}; };
const handleOpenDialogGantt = (data) => { const handleOpenDialogGantt = (data) => {
@ -504,6 +516,7 @@ const CreatedProyek = ({ params, ...props }) => {
await getProjectApproval(data.id); await getProjectApproval(data.id);
await getK3toProject(data.id); await getK3toProject(data.id);
await getProjectAssignHR(data.id); await getProjectAssignHR(data.id);
await getProjectImage(data.id);
// await handleGetDataPm(data.id); // await handleGetDataPm(data.id);
setPM(data.join_first_name); setPM(data.join_first_name);
setOpenDialogViewDetail(true); setOpenDialogViewDetail(true);
@ -571,8 +584,8 @@ const CreatedProyek = ({ params, ...props }) => {
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.data.code == 200) { 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 {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 }; 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); setProjectCharter(dataToSend);
} else { } else {
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); 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 getProjectParticipant = async (id) => {
const payload = { const payload = {
select: [ select: [
@ -720,6 +744,7 @@ const CreatedProyek = ({ params, ...props }) => {
setProjectCharter(null); setProjectCharter(null);
setK3Search(null); setK3Search(null);
setProjectAssignHR(null); setProjectAssignHR(null);
setProjectImage(null);
setOpenDialogViewDetail(false); setOpenDialogViewDetail(false);
}; };
@ -733,6 +758,7 @@ const CreatedProyek = ({ params, ...props }) => {
setProjectCharter(null); setProjectCharter(null);
setK3Search(null); setK3Search(null);
setProjectAssignHR(null); setProjectAssignHR(null);
setProjectImage(null);
} }
setOpenDialogViewDetail(!openDialogViewDetail); setOpenDialogViewDetail(!openDialogViewDetail);
}; };
@ -746,7 +772,8 @@ const CreatedProyek = ({ params, ...props }) => {
if (result && result.data && result.data.code === 200) { if (result && result.data && result.data.code === 200) {
role_id !== "44" ? getDataProyek() : getDataProyekByCustomer(); role_id !== "44" ? getDataProyek() : getDataProyekByCustomer();
getProjectImage(idDelete);
deleteImage(idDelete);
setIdDelete(0); setIdDelete(0);
setAlertDelete(false); setAlertDelete(false);
NotificationManager.success(`Data proyek berhasil dihapus`, "Success!!"); NotificationManager.success(`Data proyek berhasil dihapus`, "Success!!");
@ -766,6 +793,7 @@ const CreatedProyek = ({ params, ...props }) => {
.catch((error) => error.response); .catch((error) => error.response);
if (result && result.data && result.data.code === 200) { if (result && result.data && result.data.code === 200) {
const { participants, milestones, approval } = data.projectCharter; const { participants, milestones, approval } = data.projectCharter;
const imageObject = data.imageStructureOrg;
const resultParticipant = await saveParticipant( const resultParticipant = await saveParticipant(
result.data.data_result.id, result.data.data_result.id,
participants participants
@ -778,12 +806,18 @@ const CreatedProyek = ({ params, ...props }) => {
result.data.data_result.id, result.data.data_result.id,
approval approval
); );
if (imageObject) {
await saveImage(
result.data.data_result.id,
imageObject
);
}
if ( if (
resultParticipant === "berhasil" && resultParticipant === "berhasil" &&
resultMilestone === "berhasil" && resultMilestone === "berhasil" &&
resultApproval === "berhasil" resultApproval === "berhasil"
) { ) {
// getDataProyek();
NotificationManager.success( NotificationManager.success(
`Data proyek berhasil ditambah`, `Data proyek berhasil ditambah`,
"Success!!" "Success!!"
@ -860,8 +894,33 @@ const CreatedProyek = ({ params, ...props }) => {
return "berhasil"; 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 editProyek = async (data) => {
const { participants, milestones, approval } = data.projectCharter; const { participants, milestones, approval } = data.projectCharter;
const imageObject = data.imageStructureOrg;
let urlEdit = PROYEK_EDIT(data.id); let urlEdit = PROYEK_EDIT(data.id);
const formData = data; const formData = data;
@ -872,6 +931,15 @@ const CreatedProyek = ({ params, ...props }) => {
const resultParticipant = await editParticipant(data.id, participants); const resultParticipant = await editParticipant(data.id, participants);
const resultMilestone = await editMilestone(data.id, milestones); const resultMilestone = await editMilestone(data.id, milestones);
const resultApproval = await editApproval(data.id, approval); const resultApproval = await editApproval(data.id, approval);
if (imageObject) {
await deleteImage(
data.id
);
await saveImage(
data.id,
imageObject
);
}
if (result && result.status === 200) { if (result && result.status === 200) {
role_id !== "44" ? getDataProyek() : getDataProyekByCustomer(); role_id !== "44" ? getDataProyek() : getDataProyekByCustomer();
NotificationManager.success(`Data proyek berhasil Ubah`, "Success!!"); NotificationManager.success(`Data proyek berhasil Ubah`, "Success!!");
@ -882,7 +950,6 @@ const CreatedProyek = ({ params, ...props }) => {
const editParticipant = async (id, data) => { const editParticipant = async (id, data) => {
await axios.delete(PROJECT_PARTICIPANT_DELETE_BY_PROYEK(id), HEADER); await axios.delete(PROJECT_PARTICIPANT_DELETE_BY_PROYEK(id), HEADER);
// if (restDelete){
const request = data.map((res) => { const request = data.map((res) => {
const payload = { const payload = {
proyek_id: parseInt(id), proyek_id: parseInt(id),
@ -1432,6 +1499,7 @@ const CreatedProyek = ({ params, ...props }) => {
dataPhaseProject={dataPhaseProject} dataPhaseProject={dataPhaseProject}
dataDivisions={dataDivisions} dataDivisions={dataDivisions}
dataPM={dataPm} dataPM={dataPm}
projectImage={image}
/> />
), ),
[ [
@ -1441,6 +1509,7 @@ const CreatedProyek = ({ params, ...props }) => {
dataPhaseProject, dataPhaseProject,
dataTypeProyek, dataTypeProyek,
idTask, idTask,
image
] ]
); );
@ -1559,6 +1628,7 @@ const CreatedProyek = ({ params, ...props }) => {
projectManager={projectPM} projectManager={projectPM}
projectK3={projectK3Search} projectK3={projectK3Search}
assignHR={projectAssignHR} assignHR={projectAssignHR}
projectImage={image}
/> />
), ),
[openDialogViewDetail] [openDialogViewDetail]

Write Preview
Loading…
Cancel
Save