Fakultas Ilmu Komputer UI

Commit 5c74cf39 authored by Shafiya Adzhani's avatar Shafiya Adzhani
Browse files

[CHORES] add default value to form iumk

parent 4bdbccbc
Pipeline #72595 passed with stages
in 5 minutes and 43 seconds
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
const FormIUMK1 = ({register, errors, handleSubmit, onSubmit, data}) => { const FormIUMK1 = ({
register,
errors,
handleSubmit,
onSubmit,
data,
setValue,
}) => {
return ( return (
<form <form
className="px-4" className="px-4"
...@@ -186,6 +193,7 @@ const FormIUMK1 = ({register, errors, handleSubmit, onSubmit, data}) => { ...@@ -186,6 +193,7 @@ const FormIUMK1 = ({register, errors, handleSubmit, onSubmit, data}) => {
<button <button
className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit" className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
data-testid="lanjut-button" data-testid="lanjut-button"
onClick={() => setValue('page', '2')}
> >
Lanjut Lanjut
</button> </button>
...@@ -200,6 +208,7 @@ FormIUMK1.propTypes = { ...@@ -200,6 +208,7 @@ FormIUMK1.propTypes = {
handleSubmit: PropTypes.func, handleSubmit: PropTypes.func,
onSubmit: PropTypes.func, onSubmit: PropTypes.func,
data: PropTypes.object, data: PropTypes.object,
setValue: PropTypes.func,
} }
export default FormIUMK1 export default FormIUMK1
import EmployeeDropdown from '../Dropdown/EmployeeDropdown' import EmployeeDropdown from '../Dropdown/EmployeeDropdown'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => { const FormIUMK2 = ({
register,
handleSubmit,
onSubmit,
setEmployeeData,
setValue,
data,
}) => {
return ( return (
<form <form
className="bg-white flex flex-col px-4" className="bg-white flex flex-col px-4"
...@@ -33,7 +40,10 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => { ...@@ -33,7 +40,10 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => {
Jumlah Karyawan Jumlah Karyawan
<span className="medium-text text-black ml-1">(opsional)</span> <span className="medium-text text-black ml-1">(opsional)</span>
</label> </label>
<EmployeeDropdown setEmployeeData={setEmployeeData} /> <EmployeeDropdown
setEmployeeData={setEmployeeData}
defaultValue={data.karyawan}
/>
</div> </div>
<div className="flex flex-col pb-6" data-testid="form-iumk-2-kode-kbli"> <div className="flex flex-col pb-6" data-testid="form-iumk-2-kode-kbli">
<label className="mb-2 heading-3 text-black"> <label className="mb-2 heading-3 text-black">
...@@ -47,6 +57,7 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => { ...@@ -47,6 +57,7 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => {
ref={register({ ref={register({
required: false, required: false,
})} })}
defaultValue={data.kbli}
/> />
</div> </div>
<div className="flex flex-col pb-8" data-testid="form-iumk-2-catatan"> <div className="flex flex-col pb-8" data-testid="form-iumk-2-catatan">
...@@ -61,6 +72,7 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => { ...@@ -61,6 +72,7 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => {
ref={register({ ref={register({
required: false, required: false,
})} })}
defaultValue={data.catatan}
/> />
</div> </div>
</div> </div>
...@@ -68,6 +80,7 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => { ...@@ -68,6 +80,7 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => {
<button <button
className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit" className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
data-testid="lanjut-button" data-testid="lanjut-button"
onClick={() => setValue('page', '3')}
> >
Lanjut Lanjut
</button> </button>
...@@ -81,6 +94,8 @@ FormIUMK2.propTypes = { ...@@ -81,6 +94,8 @@ FormIUMK2.propTypes = {
handleSubmit: PropTypes.func, handleSubmit: PropTypes.func,
onSubmit: PropTypes.func, onSubmit: PropTypes.func,
setEmployeeData: PropTypes.func, setEmployeeData: PropTypes.func,
setValue: PropTypes.func,
data: PropTypes.object,
} }
export default FormIUMK2 export default FormIUMK2
...@@ -10,7 +10,7 @@ import {useState} from 'react' ...@@ -10,7 +10,7 @@ import {useState} from 'react'
import {useForm} from 'react-hook-form' import {useForm} from 'react-hook-form'
const FormIUMK = () => { const FormIUMK = () => {
const {register, handleSubmit, errors} = useForm({ const {register, handleSubmit, errors, setValue} = useForm({
mode: 'onChange', mode: 'onChange',
reValidateMode: 'onChange', reValidateMode: 'onChange',
}) })
...@@ -21,6 +21,7 @@ const FormIUMK = () => { ...@@ -21,6 +21,7 @@ const FormIUMK = () => {
const [employeeData, setEmployeeData] = useState(null) const [employeeData, setEmployeeData] = useState(null)
const onSubmit = (input) => { const onSubmit = (input) => {
setPageNumber(input.page)
if (pageNumber != 3) { if (pageNumber != 3) {
if (pageNumber == 1) { if (pageNumber == 1) {
setData({...data, ...input}) setData({...data, ...input})
...@@ -28,14 +29,19 @@ const FormIUMK = () => { ...@@ -28,14 +29,19 @@ const FormIUMK = () => {
setData({...data, ...input, ...{karyawan: employeeData}}) setData({...data, ...input, ...{karyawan: employeeData}})
} }
} }
setPageNumber(pageNumber + 1)
} }
return ( return (
<div> <div>
<Navbar isLoggedIn={loggedIn} name={name} /> <Navbar isLoggedIn={loggedIn} name={name} />
<div className="bg-lightgrey px-10 lg:px-2 xl:px-2 2xl:px-2 py-6"> <div className="bg-lightgrey px-10 lg:px-2 xl:px-2 2xl:px-2 py-6">
<Stepper currentPage={pageNumber} setCurrentPage={setPageNumber} /> <Stepper
currentPage={pageNumber}
handleSubmit={handleSubmit}
onSubmit={onSubmit}
register={register}
setValue={setValue}
/>
<div className="bg-white flex flex-col mx-92 lg:mx-80 xl:mx-80 2xl:mx-80 px-4 lg:px-6 xl:px-6 2xl:px-6 pt-4"> <div className="bg-white flex flex-col mx-92 lg:mx-80 xl:mx-80 2xl:mx-80 px-4 lg:px-6 xl:px-6 2xl:px-6 pt-4">
{pageNumber == 1 && ( {pageNumber == 1 && (
<FormIUMK1 <FormIUMK1
...@@ -46,6 +52,7 @@ const FormIUMK = () => { ...@@ -46,6 +52,7 @@ const FormIUMK = () => {
data={data} data={data}
currentPage={pageNumber} currentPage={pageNumber}
setCurrentPage={setPageNumber} setCurrentPage={setPageNumber}
setValue={setValue}
/> />
)} )}
...@@ -56,6 +63,8 @@ const FormIUMK = () => { ...@@ -56,6 +63,8 @@ const FormIUMK = () => {
handleSubmit={handleSubmit} handleSubmit={handleSubmit}
onSubmit={onSubmit} onSubmit={onSubmit}
setEmployeeData={setEmployeeData} setEmployeeData={setEmployeeData}
data={data}
setValue={setValue}
/> />
)} )}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment