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

Write Preview
Loading…
Cancel
Save