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

refactor(FE): Refactor filter modal into form and adjust UI

Browse Source
This commit is contained in:
rstubryan
2026-01-30 10:37:11 +07:00
parent 2b6676b4eb
commit 06c4631ca5
1 changed files with 120 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/production/uniformity/UniformityTable.tsx
+120 -118
View File
@@ -1242,156 +1242,158 @@ const UniformityTable = () => {
ref={filterModal.ref} ref={filterModal.ref}
className={{ className={{
modal: 'p-0', modal: 'p-0',
modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm', modalBox: 'p-0 rounded-[0.875rem]',
}} }}
> >
<div className='space-y-6'> <div className='flex flex-col'>
{/* Modal Header */} {/* Modal Header */}
<div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'> <div className='flex items-center justify-between p-4 border-b border-base-content/10'>
<div className='flex items-center gap-2 text-primary'> <div className='flex items-center gap-2 text-primary'>
<Icon icon='heroicons:funnel' width={20} height={20} /> <Icon icon='heroicons:funnel' width={20} height={20} />
<h3 className='font-semibold'>Filter Data</h3> <h3 className='font-medium text-sm'>Filter Data</h3>
</div> </div>
<Button <Button
variant='link' variant='link'
onClick={filterModal.closeModal} onClick={filterModal.closeModal}
className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer' className='text-gray-500 hover:text-gray-700'
> >
<Icon icon='heroicons:x-mark' width={20} height={20} /> <Icon icon='heroicons:x-mark' width={20} height={20} />
</Button> </Button>
</div> </div>
<div className='space-y-1.5 px-4'> <form
<div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-1.5'> className='flex flex-col'
onSubmit={handleFormSubmit}
onReset={handleResetFilters}
>
<div className='flex flex-col p-4 gap-1.5'>
{/* Rentang Waktu */}
<div> <div>
<DateInput <label className='flex text-xs items-center gap-2 py-2 font-semibold'>
Tanggal
</label>
<div className='flex items-center gap-2'>
<DateInput
name='start_date'
placeholder='Tanggal Mulai'
value={filterFormik.values.start_date}
errorMessage={filterFormik.errors.start_date}
onChange={handleFilterStartDateChange}
isError={
filterFormik.touched.start_date &&
Boolean(filterFormik.errors.start_date)
}
/>
<hr className='w-full max-w-3 h-px border-base-content/10'></hr>
<DateInput
name='end_date'
placeholder='Tanggal Akhir'
value={filterFormik.values.end_date}
errorMessage={filterFormik.errors.end_date}
onChange={handleFilterEndDateChange}
isError={
filterFormik.touched.end_date &&
Boolean(filterFormik.errors.end_date)
}
/>
</div>
</div>
<div>
<SelectInput
required required
label='Tanggal mulai' label='Lokasi'
name='start_date' placeholder='Pilih Lokasi...'
value={filterFormik.values.start_date} value={filterFormik.values.location}
onChange={handleFilterStartDateChange} onChange={(value) => {
onBlur={filterFormik.handleBlur} handleFilterLocationChange(value);
}}
options={filterLocationOptions}
onInputChange={setFilterLocationInputValue}
isLoading={isLoadingFilterLocations}
onMenuScrollToBottom={loadMoreFilterLocations}
isError={ isError={
filterFormik.touched.start_date && filterFormik.touched.location &&
Boolean(filterFormik.errors.start_date) Boolean(filterFormik.errors.location)
} }
errorMessage={filterFormik.errors.start_date} errorMessage={filterFormik.errors.location}
isClearable
className={{ wrapper: 'w-full' }} className={{ wrapper: 'w-full' }}
/> />
</div> </div>
<div> <div>
<DateInput <SelectInput
required required
label='Tanggal akhir' label='Project Flock'
name='end_date' placeholder='Pilih Project Flock...'
value={filterFormik.values.end_date} value={filterFormik.values.project_flock}
onChange={handleFilterEndDateChange} onChange={(value) => {
onBlur={filterFormik.handleBlur} handleFilterProjectFlockChange(value);
}}
options={filterProjectFlockOptions}
onInputChange={setFilterProjectFlockSearchValue}
isLoading={isLoadingFilterProjectFlocks}
onMenuScrollToBottom={loadMoreFilterProjectFlocks}
isDisabled={!filterFormik.values.location}
isError={ isError={
filterFormik.touched.end_date && filterFormik.touched.project_flock &&
Boolean(filterFormik.errors.end_date) Boolean(filterFormik.errors.project_flock)
} }
errorMessage={filterFormik.errors.end_date} errorMessage={filterFormik.errors.project_flock}
isClearable
className={{ wrapper: 'w-full' }} className={{ wrapper: 'w-full' }}
/> />
</div> </div>
</div>
<div> <div>
<SelectInput <SelectInput
required required
label='Lokasi' label='Kandang'
placeholder='Pilih Lokasi...' placeholder='Pilih Kandang...'
value={filterFormik.values.location} value={filterFormik.values.kandang}
onChange={(value) => { onChange={(value) => {
handleFilterLocationChange(value); handleFilterKandangChange(value);
}} }}
options={filterLocationOptions} options={filterKandangOptions}
onInputChange={setFilterLocationInputValue} isDisabled={!filterFormik.values.project_flock}
isLoading={isLoadingFilterLocations} isError={
onMenuScrollToBottom={loadMoreFilterLocations} filterFormik.touched.kandang &&
isError={ Boolean(filterFormik.errors.kandang)
filterFormik.touched.location && }
Boolean(filterFormik.errors.location) errorMessage={filterFormik.errors.kandang}
} isClearable
errorMessage={filterFormik.errors.location} className={{ wrapper: 'w-full' }}
isClearable />
className={{ wrapper: 'w-full' }}
/>
</div>
<div>
<SelectInput
required
label='Project Flock'
placeholder='Pilih Project Flock...'
value={filterFormik.values.project_flock}
onChange={(value) => {
handleFilterProjectFlockChange(value);
}}
options={filterProjectFlockOptions}
onInputChange={setFilterProjectFlockSearchValue}
isLoading={isLoadingFilterProjectFlocks}
onMenuScrollToBottom={loadMoreFilterProjectFlocks}
isDisabled={!filterFormik.values.location}
isError={
filterFormik.touched.project_flock &&
Boolean(filterFormik.errors.project_flock)
}
errorMessage={filterFormik.errors.project_flock}
isClearable
className={{ wrapper: 'w-full' }}
/>
</div>
<div>
<SelectInput
required
label='Kandang'
placeholder='Pilih Kandang...'
value={filterFormik.values.kandang}
onChange={(value) => {
handleFilterKandangChange(value);
}}
options={filterKandangOptions}
isDisabled={!filterFormik.values.project_flock}
isError={
filterFormik.touched.kandang &&
Boolean(filterFormik.errors.kandang)
}
errorMessage={filterFormik.errors.kandang}
isClearable
className={{ wrapper: 'w-full' }}
/>
</div>
</div>
<div className='w-full'>
{/* Error List Alert */}
{formErrorList.length > 0 && (
<div className='w-full px-4'>
<AlertErrorList formErrorList={formErrorList} onClose={close} />
</div> </div>
)}
</div>
{/* Action Buttons */} {formErrorList.length > 0 && (
<div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'> <div className='w-full'>
<Button <AlertErrorList
variant='soft' formErrorList={formErrorList}
className='ms-4 min-w-36 rounded-lg' onClose={close}
onClick={handleResetFilters} />
> </div>
Reset Filter )}
</Button> </div>
<Button
className='me-4 min-w-36 rounded-lg' {/* Action Buttons */}
onClick={handleApplyFilters} <div className='flex justify-between gap-4 p-4 border-t border-base-content/10 bg-gray-100'>
> <Button
Apply Filter type='reset'
</Button> variant='soft'
</div> className='rounded-lg p-3 bg-gray-100 border-gray-100 text-base-content/65 hover:bg-base-content/10'
>
Reset Filter
</Button>
<Button
type='submit'
className='min-w-40 text-sm p-3 text-white rounded-lg'
>
Apply Filter
</Button>
</div>
</form>
</div> </div>
</Modal> </Modal>