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

Improve ux

pull/2/head
Muhammad Sulaiman Yusuf 2 years ago
parent
4cb3b201e0
commit
6b61f22069
1 changed files with 993 additions and 1121 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. 174
      src/views/SimproV2/CreatedProyek/DialogFormProyek.js

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

@ -2,7 +2,6 @@ import React, { useEffect, useState, useMemo } from "react";
import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"; import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import { Button, Form, FormGroup, Label, Input, Col, Row } from "reactstrap"; 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 { Language } from 'src/const/LanguageConst';
import axios from "../../../const/interceptorApi"; import axios from "../../../const/interceptorApi";
import moment from "moment"; import moment from "moment";
import { import {
@ -20,7 +19,6 @@ import {
} from "../../../const/ApiConst"; } from "../../../const/ApiConst";
const { Option } = Select; const { Option } = Select;
// import DialogMap from './DialogMap';
const DialogFormProyek = ({ const DialogFormProyek = ({
openDialog, openDialog,
@ -60,7 +58,6 @@ const DialogFormProyek = ({
const [currencyCode, setCurrencyCode] = useState(""); const [currencyCode, setCurrencyCode] = useState("");
const [currencySymbol, setCurrencySymbol] = useState(null); const [currencySymbol, setCurrencySymbol] = useState(null);
const [currencyName, setCurrencyName] = useState(""); const [currencyName, setCurrencyName] = useState("");
// project charter
const [objectives, setObjectives] = useState(""); const [objectives, setObjectives] = useState("");
const [projectIsConsideredSuccessful, setProjectIsConsideredSuccessful] = useState(""); const [projectIsConsideredSuccessful, setProjectIsConsideredSuccessful] = useState("");
const [participants, setParticipants] = useState([]); const [participants, setParticipants] = useState([]);
@ -75,7 +72,6 @@ const DialogFormProyek = ({
const [lastIdxApproval, setLastIdxApproval] = useState(0); const [lastIdxApproval, setLastIdxApproval] = useState(0);
const handleGetdataIdproyek = async (id) => { const handleGetdataIdproyek = async (id) => {
// const URL = `${BASE_SIMPRO_LUMEN}/project/edit/${id}`
const result = await axios const result = await axios
.get(`${PROYEK_GET_ID(id)}`, HEADER) .get(`${PROYEK_GET_ID(id)}`, HEADER)
.then((res) => res) .then((res) => res)
@ -115,62 +111,15 @@ const DialogFormProyek = ({
.get(`${PROJECT_APPROVAL_WHERE_CUSTOM("proyek_id", id)}`, HEADER) .get(`${PROJECT_APPROVAL_WHERE_CUSTOM("proyek_id", id)}`, HEADER)
.then((res) => res) .then((res) => res)
.catch((err) => err.response); .catch((err) => err.response);
console.log("handleGetDataApproval by id", result);
setApproval(result.data.data); setApproval(result.data.data);
// 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)
// 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)
// setTestingEnv(val.testing_environment)
// setPotentialRisks(val.potential_risk)
// setProjectIsConsideredSuccessful(val.considered_success_when)
// } else {
// NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`);
// }
}; };
const handleGetDataMileStone = async (id) => { const handleGetDataMileStone = async (id) => {
// const URL = `${BASE_SIMPRO_LUMEN}/project/edit/${id}`
const result = await axios const result = await axios
.get(`${PROJECT_MILESTONE_WHERE_CUSTOM("proyek_id", id)}`, HEADER) .get(`${PROJECT_MILESTONE_WHERE_CUSTOM("proyek_id", id)}`, HEADER)
.then((res) => res) .then((res) => res)
.catch((err) => err.response); .catch((err) => err.response);
console.log("handleGetDataMileStone by id", result);
setMilestones(result.data.data); setMilestones(result.data.data);
// 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)
// 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)
// setTestingEnv(val.testing_environment)
// setPotentialRisks(val.potential_risk)
// setProjectIsConsideredSuccessful(val.considered_success_when)
// } else {
// NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`);
// }
}; };
const handleGetDataParticipants = async (id) => { const handleGetDataParticipants = async (id) => {
@ -178,30 +127,7 @@ const DialogFormProyek = ({
.get(`${PROJECT_PARTICIPANT_WHERE_CUSTOM("proyek_id", id)}`, HEADER) .get(`${PROJECT_PARTICIPANT_WHERE_CUSTOM("proyek_id", id)}`, HEADER)
.then((res) => res) .then((res) => res)
.catch((err) => err.response); .catch((err) => err.response);
console.log("handleGetDataParticipants by id", result);
setParticipants(result.data.data); setParticipants(result.data.data);
// 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)
// 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)
// setTestingEnv(val.testing_environment)
// setPotentialRisks(val.potential_risk)
// setProjectIsConsideredSuccessful(val.considered_success_when)
// } else {
// NotificationManager.error(`Data proyek gagal di edit`, `Failed!!`);
// }
}; };
const handleGetDataCurrency = async () => { const handleGetDataCurrency = async () => {
@ -209,7 +135,6 @@ const DialogFormProyek = ({
.get(CURRENCY_LIST, HEADER) .get(CURRENCY_LIST, HEADER)
.then((res) => res) .then((res) => res)
.catch((err) => err.response); .catch((err) => err.response);
console.log("handleGetDataCurrency", result);
setCurrencyList(result.data.data); setCurrencyList(result.data.data);
}; };
@ -232,7 +157,6 @@ const DialogFormProyek = ({
setCurrencyCode(""); setCurrencyCode("");
setCurrencySymbol(null); setCurrencySymbol(null);
setCurrencyName(""); setCurrencyName("");
// project charter
setObjectives(""); setObjectives("");
setProjectIsConsideredSuccessful(""); setProjectIsConsideredSuccessful("");
setParticipants([]); setParticipants([]);
@ -253,7 +177,6 @@ const DialogFormProyek = ({
} }
if (idTask && idTask > 0) { if (idTask && idTask > 0) {
console.log("cel data Edit");
handleGetdataIdproyek(idTask); handleGetdataIdproyek(idTask);
handleGetDataParticipants(idTask); handleGetDataParticipants(idTask);
handleGetDataMileStone(idTask); handleGetDataMileStone(idTask);
@ -264,7 +187,6 @@ const DialogFormProyek = ({
}, [openDialog]); }, [openDialog]);
const handleSave = () => { const handleSave = () => {
// console.log('participants', participants);
let data = ""; let data = "";
if (idTask) { if (idTask) {
data = { data = {
@ -272,7 +194,6 @@ const DialogFormProyek = ({
nama: name, nama: name,
kode_sortname: shortName, kode_sortname: shortName,
rencana_biaya: biaya.replaceAll(".", ""), rencana_biaya: biaya.replaceAll(".", ""),
// rencana_biaya: biaya.replace(/./g, ""),
mulai_proyek: startDate, mulai_proyek: startDate,
akhir_proyek: endDate, akhir_proyek: endDate,
type_proyek_id: parseInt(typeProject), type_proyek_id: parseInt(typeProject),
@ -299,7 +220,6 @@ const DialogFormProyek = ({
nama: name, nama: name,
kode_sortname: shortName, kode_sortname: shortName,
rencana_biaya: biaya.replaceAll(".", ""), rencana_biaya: biaya.replaceAll(".", ""),
// rencana_biaya: biaya.replace(/./g, ""),
mulai_proyek: startDate, mulai_proyek: startDate,
akhir_proyek: endDate, akhir_proyek: endDate,
type_proyek_id: parseInt(typeProject), type_proyek_id: parseInt(typeProject),
@ -319,9 +239,7 @@ const DialogFormProyek = ({
currency_code: currencyCode, currency_code: currencyCode,
currency_name: currencyName, currency_name: currencyName,
}; };
// console.log({ participants, milestones, approval, testingEnv, objectives, projectIsConsideredSuccessful, potentialRisks })
data.projectCharter = { participants, milestones, approval }; data.projectCharter = { participants, milestones, approval };
console.log(data);
closeDialog("add", data); closeDialog("add", data);
} }
handleClearData(); handleClearData();
@ -358,10 +276,7 @@ const DialogFormProyek = ({
}; };
const onChangeCurrency = (val) => { const onChangeCurrency = (val) => {
console.log("onchange currency", val);
let curr = val.split("|"); // code|symbol|name let curr = val.split("|"); // code|symbol|name
// setCurrency();
console.log("curr", curr);
setCurrencyCode(curr[0]); setCurrencyCode(curr[0]);
setCurrencySymbol(curr[1]); setCurrencySymbol(curr[1]);
setCurrencyName(curr[2]); setCurrencyName(curr[2]);
@ -377,23 +292,27 @@ const DialogFormProyek = ({
const nextStep = () => { const nextStep = () => {
if (!name || name === "") { if (!name || name === "") {
alert("Please input Project Name before continue"); alert("Project Name cannot be empty!");
return false;
}
if (!shortName || shortName === "") {
alert("Project Code cannot be empty!");
return false; return false;
} }
if (!typeProject || typeProject === "") { if (!typeProject || typeProject === "") {
alert("Please set Project Type before continue"); alert("Project Type cannot be empty!");
return false; return false;
} }
if (!startDate || startDate === "") { if (!startDate || startDate === "") {
alert("Please set Start Date before continue"); alert("Start Date cannot be empty!");
return false; return false;
} }
if (!endDate || endDate === "") { if (!endDate || endDate === "") {
alert("Please set End Date before continue"); alert("End Date cannot be empty!");
return false; return false;
} }
if (!biaya || biaya === "") { if (!biaya || biaya === "") {
alert("Please input Budget before continue"); alert("Budget cannot be empty!");
return false; return false;
} }
setStep(2); setStep(2);
@ -404,12 +323,6 @@ const DialogFormProyek = ({
}; };
const addParticipant = () => { const addParticipant = () => {
// add object
// {
// id: 0,
// title: '',
// name: ''
// }
participants.push({ participants.push({
id: lastIdxParticipants + 1, id: lastIdxParticipants + 1,
title: "", title: "",
@ -417,8 +330,6 @@ const DialogFormProyek = ({
}); });
setParticipants(participants); setParticipants(participants);
setLastIdxParticipants(lastIdxParticipants + 1); setLastIdxParticipants(lastIdxParticipants + 1);
console.log("participants", participants);
}; };
const handleInputChangeParticipants = (e, index) => { const handleInputChangeParticipants = (e, index) => {
@ -428,7 +339,6 @@ const DialogFormProyek = ({
setParticipants(newParticipants); setParticipants(newParticipants);
}; };
// remove participant from array
const deleteParticipant = (id) => { const deleteParticipant = (id) => {
if (participants && participants.length > 0) { if (participants && participants.length > 0) {
let parIdx = participants.findIndex((o) => o.id === id); let parIdx = participants.findIndex((o) => o.id === id);
@ -440,13 +350,6 @@ const DialogFormProyek = ({
}; };
const addMilestone = () => { const addMilestone = () => {
// add object
// {
// id: 0,
// status: 'the activity',
// due: 'due date',
// deadline: 'deadline date'
// }
milestones.push({ milestones.push({
id: lastIdxMilestones + 1, id: lastIdxMilestones + 1,
status: "", status: "",
@ -470,7 +373,6 @@ const DialogFormProyek = ({
setMilestones(newMilestones); setMilestones(newMilestones);
}; };
// remove participant from array
const deleteMilestones = (id) => { const deleteMilestones = (id) => {
if (milestones && milestones.length > 0) { if (milestones && milestones.length > 0) {
let mileIdx = milestones.findIndex((o) => o.id === id); let mileIdx = milestones.findIndex((o) => o.id === id);
@ -482,13 +384,6 @@ const DialogFormProyek = ({
}; };
const addApproval = () => { const addApproval = () => {
// add object
// {
// id: 0,
// title: 'title person',
// name: 'the person',
// date: 'sign date',
// }
approval.push({ approval.push({
id: lastIdxApproval + 1, id: lastIdxApproval + 1,
title: "", title: "",
@ -508,12 +403,10 @@ const DialogFormProyek = ({
const handleInputChangeApprovalDate = (date, name, index) => { const handleInputChangeApprovalDate = (date, name, index) => {
const newApproval = [...approval]; const newApproval = [...approval];
// console.log("cek approval", name)
newApproval[index][name] = date; newApproval[index][name] = date;
setApproval(newApproval); setApproval(newApproval);
}; };
// remove participant from array
const deleteApproval = (id) => { const deleteApproval = (id) => {
if (approval && approval.length > 0) { if (approval && approval.length > 0) {
let mileIdx = approval.findIndex((o) => o.id === id); let mileIdx = approval.findIndex((o) => o.id === id);
@ -542,18 +435,16 @@ const DialogFormProyek = ({
type="text" type="text"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
placeholder={`Input project name...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Code / Short Name</Label> <Label className="capitalize">Code / Short Name<span style={{ color: "red" }}>*</span></Label>
<Input <Input
type="text" type="text"
value={shortName} value={shortName}
onChange={(e) => setShortName(e.target.value)} onChange={(e) => setShortName(e.target.value)}
placeholder={`Input code / short name...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
@ -566,10 +457,12 @@ const DialogFormProyek = ({
</Label> </Label>
<Select <Select
showSearch showSearch
filterOption={(inputValue, option) =>
option.children.toLowerCase().includes(inputValue.toLowerCase())
}
value={typeProject} value={typeProject}
defaultValue={typeProject} defaultValue={typeProject}
onChange={onChangeTypeProject} onChange={onChangeTypeProject}
placeholder="Select project type"
style={{ width: "100%" }} style={{ width: "100%" }}
> >
{dataTypeProyek.map((res) => ( {dataTypeProyek.map((res) => (
@ -585,10 +478,12 @@ const DialogFormProyek = ({
<Label className="capitalize">PM</Label> <Label className="capitalize">PM</Label>
<Select <Select
showSearch showSearch
filterOption={(inputValue, option) =>
option.children.toLowerCase().includes(inputValue.toLowerCase())
}
value={pic} value={pic}
defaultValue={pic} defaultValue={pic}
onChange={onChangePm} onChange={onChangePm}
placeholder="Select PM"
style={{ width: "100%" }} style={{ width: "100%" }}
> >
{dataPM.map((res) => ( {dataPM.map((res) => (
@ -641,7 +536,6 @@ const DialogFormProyek = ({
type="text" type="text"
value={workArea} value={workArea}
onChange={(e) => setWorkArea(e.target.value)} onChange={(e) => setWorkArea(e.target.value)}
placeholder={`Input work area...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
@ -652,7 +546,6 @@ const DialogFormProyek = ({
type="text" type="text"
value={company} value={company}
onChange={(e) => setCompany(e.target.value)} onChange={(e) => setCompany(e.target.value)}
placeholder={`Input company...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
@ -664,29 +557,23 @@ const DialogFormProyek = ({
Budget<span style={{ color: "red" }}>*</span> Budget<span style={{ color: "red" }}>*</span>
</Label> </Label>
<Row> <Row>
<Col md={6}> <Col md={4}>
<Select <Select
showSearch
value={currencySymbol} value={currencySymbol}
onChange={onChangeCurrency} onChange={onChangeCurrency}
placeholder="Select Currency" defaultValue="IDR|Rp|Indonesian rupiah"
style={{ width: "100%" }} style={{ width: "100%" }}
> >
{currencyList && {currencyList && currencyList.map(res => (
currencyList.map((res) => ( <Option key={res.id} value={`${res.cc}|${res.symbol}|${res.name}`}>{`${res.cc}`}</Option>
<Option
key={res.id}
value={`${res.cc}|${res.symbol}|${res.name}`}
>{`${res.name}`}</Option>
))} ))}
</Select> </Select>
</Col> </Col>
<Col md={6}> <Col md={8}>
<Input <Input
type="text" type="text"
value={biaya} value={biaya}
onChange={(e) => setBiaya(formatNumber(e.target.value))} onChange={(e) => setBiaya(formatNumber(e.target.value))}
placeholder={`Input planning cost...`}
/> />
</Col> </Col>
</Row> </Row>
@ -699,7 +586,6 @@ const DialogFormProyek = ({
type="textarea" type="textarea"
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
placeholder={`Input description...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
@ -766,7 +652,6 @@ const DialogFormProyek = ({
type="textarea" type="textarea"
value={objectives} value={objectives}
onChange={(e) => setObjectives(e.target.value)} onChange={(e) => setObjectives(e.target.value)}
placeholder={`The project objective is to...`}
/> />
</FormGroup> </FormGroup>
</Col> </Col>
@ -783,7 +668,7 @@ const DialogFormProyek = ({
onChange={(e) => onChange={(e) =>
setProjectIsConsideredSuccessful(e.target.value) setProjectIsConsideredSuccessful(e.target.value)
} }
placeholder={`List of indicators that consider the success of this project`} placeholder={`List of indicators`}
rows={5} rows={5}
/> />
</FormGroup> </FormGroup>
@ -832,7 +717,6 @@ const DialogFormProyek = ({
type="textarea" type="textarea"
value={testingEnv} value={testingEnv}
onChange={(e) => setTestingEnv(e.target.value)} onChange={(e) => setTestingEnv(e.target.value)}
placeholder={`The testing environment of this project`}
rows={5} rows={5}
/> />
</FormGroup> </FormGroup>
@ -884,7 +768,7 @@ const DialogFormProyek = ({
type="textarea" type="textarea"
value={potentialRisks} value={potentialRisks}
onChange={(e) => setPotentialRisks(e.target.value)} onChange={(e) => setPotentialRisks(e.target.value)}
placeholder={`The potential risks of this project`} placeholder={`List of risks`}
rows={5} rows={5}
/> />
</FormGroup> </FormGroup>
@ -929,17 +813,14 @@ const DialogFormProyek = ({
const RenderParticipants = () => { const RenderParticipants = () => {
if (participants.length > 0) { if (participants.length > 0) {
return participants.map((item, index) => { return participants.map((item, index) => {
// console.log('item participants', item);
return ( return (
<Row key={index} style={{ marginBottom: 10 }}> <Row key={index} style={{ marginBottom: 10 }}>
<Col md={4}> <Col md={4}>
{/* <Input type="text" value={item.title} name="title" onChange={(e) => updateParticipantsArr(item.id, 'title', e.target.value)} placeholder={`Input participant title...`} /> */}
<Input <Input
type="text" type="text"
value={item.tittle ? item.tittle : item.title} value={item.tittle ? item.tittle : item.title}
name="title" name="title"
onChange={(e) => handleInputChangeParticipants(e, index)} onChange={(e) => handleInputChangeParticipants(e, index)}
placeholder={`Input participant title...`}
/> />
</Col> </Col>
<Col md={5}> <Col md={5}>
@ -948,7 +829,6 @@ const DialogFormProyek = ({
value={item.name} value={item.name}
name="name" name="name"
onChange={(e) => handleInputChangeParticipants(e, index)} onChange={(e) => handleInputChangeParticipants(e, index)}
placeholder={`Input participant name...`}
/> />
</Col> </Col>
<Col md={3}> <Col md={3}>
@ -982,7 +862,6 @@ const DialogFormProyek = ({
const RenderMilestones = () => { const RenderMilestones = () => {
if (milestones.length > 0) { if (milestones.length > 0) {
return milestones.map((item, index) => { return milestones.map((item, index) => {
// console.log('item milestones', item);
return ( return (
<Row key={index} style={{ marginBottom: 10 }}> <Row key={index} style={{ marginBottom: 10 }}>
<Col md={4}> <Col md={4}>
@ -991,12 +870,8 @@ const DialogFormProyek = ({
value={item.status} value={item.status}
name="status" name="status"
onChange={(e) => handleInputChangeMilestones(e, index)} onChange={(e) => handleInputChangeMilestones(e, index)}
placeholder={`Input milestones status...`}
/> />
</Col> </Col>
{/* <Col md={3}>
<DatePicker style={{ width: "100%" }} value={moment(item.due)} name="due" onChange={(date, dateString) => handleInputChangeMilestonesDate(date, 'due', index)} />
</Col> */}
<Col md={4}> <Col md={4}>
<DatePicker <DatePicker
style={{ width: "100%" }} style={{ width: "100%" }}
@ -1038,7 +913,6 @@ const DialogFormProyek = ({
const RenderApproval = () => { const RenderApproval = () => {
if (approval.length > 0) { if (approval.length > 0) {
return approval.map((item, index) => { return approval.map((item, index) => {
// console.log('item approval', item);
return ( return (
<Row key={index} style={{ marginBottom: 10 }}> <Row key={index} style={{ marginBottom: 10 }}>
<Col md={3}> <Col md={3}>
@ -1047,7 +921,6 @@ const DialogFormProyek = ({
value={item.tittle ? item.tittle : item.title} value={item.tittle ? item.tittle : item.title}
name="title" name="title"
onChange={(e) => handleInputChangeApproval(e, index)} onChange={(e) => handleInputChangeApproval(e, index)}
placeholder={`Input person title...`}
/> />
</Col> </Col>
<Col md={3}> <Col md={3}>
@ -1056,7 +929,6 @@ const DialogFormProyek = ({
value={item.name} value={item.name}
name="name" name="name"
onChange={(e) => handleInputChangeApproval(e, index)} onChange={(e) => handleInputChangeApproval(e, index)}
placeholder={`Input person name...`}
/> />
</Col> </Col>
<Col md={3}> <Col md={3}>

Write Preview
Loading…
Cancel
Save