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

improve ui&ux

pull/2/head
Muhammad Sulaiman Yusuf 2 years ago
parent
3443101b76
commit
b5e5da20ae
3 changed files with 723 additions and 781 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. 45
      src/views/SimproV2/CreatedProyek/DialogFormProyek.js
  2. 79
      src/views/SimproV2/CreatedProyek/FormAsignHr.js
  3. 2
      src/views/SimproV2/CreatedProyek/index.js

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

@ -54,7 +54,6 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
const handleGetdataIdproyek = async (id) => { const handleGetdataIdproyek = async (id) => {
const result = await axios.get(`${PROYEK_GET_ID(id)}`, HEADER).then(res => res).catch(err => err.response) const result = await axios.get(`${PROYEK_GET_ID(id)}`, HEADER).then(res => res).catch(err => err.response)
console.log("proyek by id", result)
if (result && result.data && result.data.code === 200) { if (result && result.data && result.data.code === 200) {
const val = result.data.data const val = result.data.data
setName(val.nama) setName(val.nama)
@ -84,29 +83,27 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
const handleGetDataApproval = async (id) => { const handleGetDataApproval = async (id) => {
const result = await axios.get(`${PROJECT_APPROVAL_WHERE_CUSTOM('proyek_id', id)}`, HEADER).then(res => res).catch(err => err.response) const result = await axios.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) setApproval(result.data.data)
} }
const handleGetDataMileStone = async (id) => { const handleGetDataMileStone = async (id) => {
const result = await axios.get(`${PROJECT_MILESTONE_WHERE_CUSTOM('proyek_id', id)}`, HEADER).then(res => res).catch(err => err.response) 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) setMilestones(result.data.data)
} }
const handleGetDataParticipants = async (id) => { const handleGetDataParticipants = async (id) => {
const result = await axios.get(`${PROJECT_PARTICIPANT_WHERE_CUSTOM('proyek_id', id)}`, HEADER).then(res => res).catch(err => err.response) const result = await axios.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) setParticipants(result.data.data)
} }
const handleGetDataCurrency = async () => { const handleGetDataCurrency = async () => {
const result = await axios.get(CURRENCY_LIST, HEADER).then(res => res).catch(err => err.response) const result = await axios.get(CURRENCY_LIST, HEADER).then(res => res).catch(err => err.response)
console.log("handleGetDataCurrency", result) const defaultVal = result.data.data.find(val => val.cc == "IDR")
setCurrencyList(result.data.data) setCurrencyList(result.data.data)
setCurrencySymbol(`${defaultVal.cc}|${defaultVal.symbol}|${defaultVal.name}`)
} }
const handleClearData = () => { const handleClearData = () => {
@ -146,7 +143,6 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
} }
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)
@ -206,7 +202,6 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
currency_name: currencyName currency_name: currencyName
} }
data.projectCharter = { participants, milestones, approval} data.projectCharter = { participants, milestones, approval}
console.log(data)
closeDialog('add', data); closeDialog('add', data);
} }
handleClearData() handleClearData()
@ -223,14 +218,11 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
const onChangePm = (val) => { const onChangePm = (val) => {
console.log("chnage pm", val)
setPic(val) setPic(val)
} }
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
console.log('curr', curr);
setCurrencyCode(curr[0]); setCurrencyCode(curr[0]);
setCurrencySymbol(curr[1]); setCurrencySymbol(curr[1]);
setCurrencyName(curr[2]); setCurrencyName(curr[2]);
@ -281,7 +273,6 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
setParticipants(participants); setParticipants(participants);
setLastIdxParticipants(lastIdxParticipants + 1); setLastIdxParticipants(lastIdxParticipants + 1);
console.log('participants', participants);
} }
const handleInputChangeParticipants = (e, index) => { const handleInputChangeParticipants = (e, index) => {
@ -376,13 +367,13 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Project Name<span style={{ color: "red" }}>*</span></Label> <Label className="capitalize">Project Name<span style={{ color: "red" }}>*</span></Label>
<Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={`Input project name...`} /> <Input type="text" value={name} onChange={(e) => setName(e.target.value)} />
</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</Label>
<Input type="text" value={shortName} onChange={(e) => setShortName(e.target.value)} placeholder={`Input code / short name...`} /> <Input type="text" value={shortName} onChange={(e) => setShortName(e.target.value)} />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
@ -390,7 +381,11 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Project Type<span style={{ color: "red" }}>*</span></Label> <Label className="capitalize">Project Type<span style={{ color: "red" }}>*</span></Label>
<Select showSearch value={typeProject} defaultValue={typeProject} onChange={onChangeTypeProject} placeholder="Select project type" style={{ width: '100%' }}> <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 => ( {dataTypeProyek.map(res => (
<Option key={res.id} value={res.id}>{res.name}</Option> <Option key={res.id} value={res.id}>{res.name}</Option>
))} ))}
@ -400,7 +395,11 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">PM</Label> <Label className="capitalize">PM</Label>
<Select showSearch value={pic} defaultValue={pic} onChange={onChangePm} placeholder="Select PM" style={{ width: '100%' }}> <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 => ( {dataPM.map(res => (
<Option key={res.id} value={res.id}>{res.name}</Option> <Option key={res.id} value={res.id}>{res.name}</Option>
))} ))}
@ -426,13 +425,13 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Work Area</Label> <Label className="capitalize">Work Area</Label>
<Input type="text" value={workArea} onChange={(e) => setWorkArea(e.target.value)} placeholder={`Input work area...`} /> <Input type="text" value={workArea} onChange={(e) => setWorkArea(e.target.value)} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Company</Label> <Label className="capitalize">Company</Label>
<Input type="text" value={company} onChange={(e) => setCompany(e.target.value)} placeholder={`Input company...`} /> <Input type="text" value={company} onChange={(e) => setCompany(e.target.value)} />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
@ -441,15 +440,15 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
<FormGroup> <FormGroup>
<Label className="capitalize">Budget<span style={{ color: "red" }}>*</span></Label> <Label className="capitalize">Budget<span style={{ color: "red" }}>*</span></Label>
<Row> <Row>
<Col md={6}> <Col md={4}>
<Select showSearch value={currencySymbol} onChange={onChangeCurrency} placeholder="Select Currency" style={{ width: '100%' }}> <Select value={currencySymbol} defaultValue="IDR|Rp|Indonesian rupiah" onChange={onChangeCurrency} placeholder="Select Currency" style={{ width: '100%' }}>
{currencyList && currencyList.map(res => ( {currencyList && currencyList.map(res => (
<Option key={res.id} value={`${res.cc}|${res.symbol}|${res.name}`}>{`${res.name}`}</Option> <Option key={res.id} value={`${res.cc}|${res.symbol}|${res.name}`}>{`${res.cc}`}</Option>
))} ))}
</Select> </Select>
</Col> </Col>
<Col md={6}> <Col md={8}>
<Input type="text" value={biaya} onChange={(e) => setBiaya(formatNumber(e.target.value))} placeholder={`Input planning cost...`} /> <Input type="text" value={biaya} onChange={(e) => setBiaya(formatNumber(e.target.value))} placeholder={`Amount`} />
</Col> </Col>
</Row> </Row>
</FormGroup> </FormGroup>
@ -457,7 +456,7 @@ const DialogFormProyek = ({ openDialog, closeDialog, toggleDialog, idTask, dataT
<Col md={6}> <Col md={6}>
<FormGroup> <FormGroup>
<Label className="capitalize">Description</Label> <Label className="capitalize">Description</Label>
<Input type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={`Input description...`} /> <Input type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>

79
src/views/SimproV2/CreatedProyek/FormAsignHr.js
Unescape View File

@ -10,17 +10,17 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
const [id, setId] = useState(null) const [id, setId] = useState(null)
const [typeForm, setTypeForm] = useState('add') const [typeForm, setTypeForm] = useState('add')
const [user, setUser] = useState(null) const [user, setUser] = useState(null)
const [rbs, setRbs] = useState("") //rbs "" const [rbs, setRbs] = useState("")
const [projectRole, setProjectRole] = useState(null) // id const [projectRole, setProjectRole] = useState(null)
const [groupR, setGroupR] = useState("") //group_r "" const [groupR, setGroupR] = useState("")
const [maxUsed, setMaxUsed] = useState("") // max_used int const [maxUsed, setMaxUsed] = useState("")
const [standartRate, setStandartRate] = useState("") //standart_rate int const [standartRate, setStandartRate] = useState("")
const [uomStandartRate, setUomStandartRate] = useState(null) // uom_standart_rate "" const [uomStandartRate, setUomStandartRate] = useState(null)
const [overTimeRate, setOverTimeRate] = useState("") //overtime_rate int const [overTimeRate, setOverTimeRate] = useState("")
const [overTimeRateUom, setOverTimeRateUom] = useState(null) //uom_over_time_rate "" const [overTimeRateUom, setOverTimeRateUom] = useState(null)
const [costPerUsed, setCostPerUsed] = useState("") // cost_per_used int const [costPerUsed, setCostPerUsed] = useState("")
const [accrue, setAccrue] = useState("") // accrue_at "" const [accrue, setAccrue] = useState("")
const [baseCalender, setBaseCalender] = useState("") //base_calender "" const [baseCalender, setBaseCalender] = useState("")
const [listHr, setListHr] = useState([]) const [listHr, setListHr] = useState([])
const handleClearData = () => { const handleClearData = () => {
@ -41,7 +41,6 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
useEffect(() => { useEffect(() => {
let data = dataHr || [] let data = dataHr || []
let availableHr = [] let availableHr = []
console.log("dataCurrentHr", dataCurrentHr)
data.map((val, index) => { data.map((val, index) => {
if(dataEdit && dataEdit.user_id){ if(dataEdit && dataEdit.user_id){
if(parseInt(val.id)===parseInt(dataEdit.user_id)){ if(parseInt(val.id)===parseInt(dataEdit.user_id)){
@ -60,7 +59,6 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
useEffect(() => { useEffect(() => {
if (idTask && idTask > 0) { if (idTask && idTask > 0) {
console.log("data edit", dataEdit)
if(dataEdit && dataEdit!=""){ if(dataEdit && dataEdit!=""){
setTypeForm('edit') setTypeForm('edit')
setId(dataEdit.id) setId(dataEdit.id)
@ -152,46 +150,10 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
<Col> <Col>
<FormGroup> <FormGroup>
<Label>Percentage Available User</Label> <Label>Percentage Available User</Label>
<Input type="text" onChange={(e) => setMaxUsed(formatNumber(e.target.value))} value={maxUsed} placeholder='100%' /> <Input type="text" onChange={(e) => setMaxUsed(formatNumber(e.target.value))} value={maxUsed} placeholder='' required/>
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
{/* <Row>
<Col>
<FormGroup>
<Label>RBS</Label>
<Input type='text' onChange={(e) => setRbs(e.target.value)} value={rbs} placeholder='rbs..' />
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label>Group R</Label>
<Input type='text' onChange={(e) => setGroupR(e.target.value)} value={groupR} placeholder='group r..' />
</FormGroup>
</Col>
</Row> */}
{/* <Row>
<Col>
<FormGroup>
<Label>Max Used</Label>
<Input type='number' onChange={(e) => setMaxUsed(e.target.value)} value={maxUsed} placeholder='10..' />
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label>Cost Per Used</Label>
<Input type='number' onChange={(e) => setCostPerUsed(e.target.value)} value={costPerUsed} placeholder='2000..' />
</FormGroup>
</Col>
</Row> */}
{/* <Row>
<Col>
</Col>
<Col>
</Col>
</Row> */}
<div style={{widht:"100%",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}> <div style={{widht:"100%",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}>
<FormGroup style={{flexBasis:"49%"}}> <FormGroup style={{flexBasis:"49%"}}>
<Label>Standart Rate</Label> <Label>Standart Rate</Label>
@ -206,7 +168,6 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
<Option value={"Day"}>Day</Option> <Option value={"Day"}>Day</Option>
<Option value={"Hour"}>Hour</Option> <Option value={"Hour"}>Hour</Option>
</Select> </Select>
{/* <Input type='text' onChange={(e) => setUomStandartRate(e.target.value)} value={uomStandartRate} placeholder='hari..' /> */}
</FormGroup> </FormGroup>
</div> </div>
@ -224,28 +185,12 @@ const FormAsignHr = ({ openDialog, closeDialog, toggleDialog, idTask, dataEdit,
<Option value={"Day"}>Day</Option> <Option value={"Day"}>Day</Option>
<Option value={"Hour"}>Hour</Option> <Option value={"Hour"}>Hour</Option>
</Select> </Select>
{/* <Input type='text' onChange={(e) => setOverTimeRateUom(e.target.value)} value={overTimeRateUom} placeholder='hari..' /> */}
</FormGroup> </FormGroup>
</div> </div>
{/* <Row>
<Col>
<FormGroup>
<Label>Accrue At</Label>
<Input type='text' onChange={(e) => setAccrue(e.target.value)} value={accrue} placeholder='accrue..' />
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label>Base Calendar</Label>
<Input type='text' onChange={(e) => setBaseCalender(e.target.value)} value={baseCalender} placeholder='base calendar..' />
</FormGroup>
</Col>
</Row> */}
</Form> </Form>
) )
} }
return ( return (
<> <>
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>

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

@ -130,7 +130,6 @@ const CreatedProyek = ({ params, ...props }) => {
const getDataProyek = async () => { const getDataProyek = async () => {
let start = 0; let start = 0;
if (currentPage !== 1 && currentPage > 1) { if (currentPage !== 1 && currentPage > 1) {
@ -960,7 +959,6 @@ const CreatedProyek = ({ params, ...props }) => {
{ViewProyek} {ViewProyek}
{RenderDialogForm} {RenderDialogForm}
{RenderDialogFormProyek} {RenderDialogFormProyek}
{/* {RenderDialogFormResources} */}
{RenderDialogFormMaterial} {RenderDialogFormMaterial}
{RenderDialogTableTools} {RenderDialogTableTools}
{RenderDialogDoc} {RenderDialogDoc}

Write Preview
Loading…
Cancel
Save