gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 07:45:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Refactor InventoryAdjustmentForm layout for better

Browse Source 
responsiveness
This commit is contained in:
rstubryan
2026-02-26 13:32:52 +07:00
parent ee49c91fba
commit a991150262
1 changed files with 78 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
+78 -74
View File
@@ -550,77 +550,80 @@ const InventoryAdjustmentForm = ({
<form <form
onSubmit={handleFormSubmit} onSubmit={handleFormSubmit}
onReset={formik.handleReset} onReset={formik.handleReset}
className='w-full mt-8 flex flex-col gap-6' className='mt-4'
> >
<div className='flex flex-col gap-4'> <div className=''>
{/* Select Input Location */} <div className='grid sm:grid-cols-3 grid-cols-1 sm:gap-4'>
<SelectInput {/* Select Input Location */}
required <SelectInput
label='Lokasi' required
value={selectedLocation} label='Lokasi'
onChange={locationChangeHandler} value={selectedLocation}
onInputChange={setLocationInputValue} onChange={locationChangeHandler}
options={locationOptions} onInputChange={setLocationInputValue}
onMenuScrollToBottom={loadMoreLocations} options={locationOptions}
isLoading={isLoadingLocationOptions} onMenuScrollToBottom={loadMoreLocations}
isError={ isLoading={isLoadingLocationOptions}
formik.touched.location_id && Boolean(formik.errors.location_id) isError={
} formik.touched.location_id &&
errorMessage={formik.errors.location_id as string} Boolean(formik.errors.location_id)
isDisabled={type === 'detail'} }
placeholder='Pilih Lokasi' errorMessage={formik.errors.location_id as string}
isClearable isDisabled={type === 'detail'}
isSearchable placeholder='Pilih Lokasi'
/> isClearable
isSearchable
/>
{/* Select Input Project Flock */} {/* Select Input Project Flock */}
<SelectInput <SelectInput
required required
label='Project Flock' label='Project Flock'
value={selectedProjectFlock} value={selectedProjectFlock}
onChange={projectFlockChangeHandler} onChange={projectFlockChangeHandler}
onInputChange={setProjectFlockInputValue} onInputChange={setProjectFlockInputValue}
options={projectFlockOptions} options={projectFlockOptions}
onMenuScrollToBottom={loadMoreProjectFlocks} onMenuScrollToBottom={loadMoreProjectFlocks}
isLoading={isLoadingProjectFlockOptions} isLoading={isLoadingProjectFlockOptions}
isError={ isError={
formik.touched.project_flock_id && formik.touched.project_flock_id &&
Boolean(formik.errors.project_flock_id) Boolean(formik.errors.project_flock_id)
} }
errorMessage={formik.errors.project_flock_id as string} errorMessage={formik.errors.project_flock_id as string}
isDisabled={type === 'detail' || !selectedLocation} isDisabled={type === 'detail' || !selectedLocation}
placeholder={ placeholder={
selectedLocation selectedLocation
? 'Pilih Project Flock' ? 'Pilih Project Flock'
: 'Pilih Lokasi terlebih dahulu' : 'Pilih Lokasi terlebih dahulu'
} }
isClearable isClearable
isSearchable isSearchable
/> />
{/* Select Input Kandang */} {/* Select Input Kandang */}
<SelectInput <SelectInput
required required
label='Kandang' label='Kandang'
value={selectedKandang} value={selectedKandang}
onChange={kandangChangeHandler} onChange={kandangChangeHandler}
onInputChange={setKandangInputValue} onInputChange={setKandangInputValue}
options={kandangOptions} options={kandangOptions}
onMenuScrollToBottom={loadMoreKandangs} onMenuScrollToBottom={loadMoreKandangs}
isLoading={isLoadingKandangOptions} isLoading={isLoadingKandangOptions}
isError={ isError={
formik.touched.kandang_id && Boolean(formik.errors.kandang_id) formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
} }
errorMessage={formik.errors.kandang_id as string} errorMessage={formik.errors.kandang_id as string}
isDisabled={type === 'detail' || !selectedProjectFlock} isDisabled={type === 'detail' || !selectedProjectFlock}
placeholder={ placeholder={
selectedProjectFlock selectedProjectFlock
? 'Pilih Kandang' ? 'Pilih Kandang'
: 'Pilih Project Flock terlebih dahulu' : 'Pilih Project Flock terlebih dahulu'
} }
isClearable isClearable
isSearchable isSearchable
/> />
</div>
{/* Select Input Product */} {/* Select Input Product */}
<SelectInput <SelectInput
@@ -667,7 +670,7 @@ const InventoryAdjustmentForm = ({
{/* Select Input Transaction Subtype */} {/* Select Input Transaction Subtype */}
<SelectInput <SelectInput
required required
label='Sub Tipe Transaksi' label='Jenis Transaksi'
value={selectedTransactionSubtype} value={selectedTransactionSubtype}
onChange={transactionSubtypeChangeHandler} onChange={transactionSubtypeChangeHandler}
options={transactionSubtypeOptions} options={transactionSubtypeOptions}
@@ -719,6 +722,7 @@ const InventoryAdjustmentForm = ({
isError={formik.touched.price && Boolean(formik.errors.price)} isError={formik.touched.price && Boolean(formik.errors.price)}
errorMessage={formik.errors.price as string} errorMessage={formik.errors.price as string}
readOnly={type === 'detail'} readOnly={type === 'detail'}
inputPrefix={'Rp'}
/> />
{/* Text Area Input Notes */} {/* Text Area Input Notes */}
@@ -735,13 +739,13 @@ const InventoryAdjustmentForm = ({
/> />
</div> </div>
<AlertErrorList formErrorList={formErrorList} onClose={close} /> <AlertErrorList formErrorList={formErrorList} onClose={close} />
<div className='flex flex-row justify-between gap-2 flex-wrap'> <div className='flex flex-col sm:flex-row sm:justify-end gap-2 mt-4'>
{type !== 'detail' && ( {type !== 'detail' && (
<div className='flex flex-row justify-end gap-2'> <>
<Button <Button
type='button' type='button'
color='warning' color='warning'
className='px-4' className='px-4 w-full sm:w-auto'
onClick={resetHandler} onClick={resetHandler}
> >
Reset Reset
@@ -751,11 +755,11 @@ const InventoryAdjustmentForm = ({
color='primary' color='primary'
isLoading={formik.isSubmitting} isLoading={formik.isSubmitting}
disabled={formik.isSubmitting} disabled={formik.isSubmitting}
className='px-4' className='px-4 w-full sm:w-auto'
> >
Submit Submit
</Button> </Button>
</div> </>
)} )}
</div> </div>
{InventoryAdjustmentFormErrorMessage && ( {InventoryAdjustmentFormErrorMessage && (