mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-22 06:15:47 +00:00
refactor(FE): Refactor filter modal into form and adjust UI
This commit is contained in:
rstubryan
@@ -1242,156 +1242,158 @@ const UniformityTable = () => {
|
||||
ref={filterModal.ref}
|
||||
className={{
|
||||
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 */}
|
||||
<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'>
|
||||
<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>
|
||||
<Button
|
||||
variant='link'
|
||||
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} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='space-y-1.5 px-4'>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-1.5'>
|
||||
<form
|
||||
className='flex flex-col'
|
||||
onSubmit={handleFormSubmit}
|
||||
onReset={handleResetFilters}
|
||||
>
|
||||
<div className='flex flex-col p-4 gap-1.5'>
|
||||
{/* Rentang Waktu */}
|
||||
<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
|
||||
label='Tanggal mulai'
|
||||
name='start_date'
|
||||
value={filterFormik.values.start_date}
|
||||
onChange={handleFilterStartDateChange}
|
||||
onBlur={filterFormik.handleBlur}
|
||||
label='Lokasi'
|
||||
placeholder='Pilih Lokasi...'
|
||||
value={filterFormik.values.location}
|
||||
onChange={(value) => {
|
||||
handleFilterLocationChange(value);
|
||||
}}
|
||||
options={filterLocationOptions}
|
||||
onInputChange={setFilterLocationInputValue}
|
||||
isLoading={isLoadingFilterLocations}
|
||||
onMenuScrollToBottom={loadMoreFilterLocations}
|
||||
isError={
|
||||
filterFormik.touched.start_date &&
|
||||
Boolean(filterFormik.errors.start_date)
|
||||
filterFormik.touched.location &&
|
||||
Boolean(filterFormik.errors.location)
|
||||
}
|
||||
errorMessage={filterFormik.errors.start_date}
|
||||
errorMessage={filterFormik.errors.location}
|
||||
isClearable
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<DateInput
|
||||
<SelectInput
|
||||
required
|
||||
label='Tanggal akhir'
|
||||
name='end_date'
|
||||
value={filterFormik.values.end_date}
|
||||
onChange={handleFilterEndDateChange}
|
||||
onBlur={filterFormik.handleBlur}
|
||||
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.end_date &&
|
||||
Boolean(filterFormik.errors.end_date)
|
||||
filterFormik.touched.project_flock &&
|
||||
Boolean(filterFormik.errors.project_flock)
|
||||
}
|
||||
errorMessage={filterFormik.errors.end_date}
|
||||
errorMessage={filterFormik.errors.project_flock}
|
||||
isClearable
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<SelectInput
|
||||
required
|
||||
label='Lokasi'
|
||||
placeholder='Pilih Lokasi...'
|
||||
value={filterFormik.values.location}
|
||||
onChange={(value) => {
|
||||
handleFilterLocationChange(value);
|
||||
}}
|
||||
options={filterLocationOptions}
|
||||
onInputChange={setFilterLocationInputValue}
|
||||
isLoading={isLoadingFilterLocations}
|
||||
onMenuScrollToBottom={loadMoreFilterLocations}
|
||||
isError={
|
||||
filterFormik.touched.location &&
|
||||
Boolean(filterFormik.errors.location)
|
||||
}
|
||||
errorMessage={filterFormik.errors.location}
|
||||
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>
|
||||
<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>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
|
||||
<Button
|
||||
variant='soft'
|
||||
className='ms-4 min-w-36 rounded-lg'
|
||||
onClick={handleResetFilters}
|
||||
>
|
||||
Reset Filter
|
||||
</Button>
|
||||
<Button
|
||||
className='me-4 min-w-36 rounded-lg'
|
||||
onClick={handleApplyFilters}
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
</div>
|
||||
{formErrorList.length > 0 && (
|
||||
<div className='w-full'>
|
||||
<AlertErrorList
|
||||
formErrorList={formErrorList}
|
||||
onClose={close}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className='flex justify-between gap-4 p-4 border-t border-base-content/10 bg-gray-100'>
|
||||
<Button
|
||||
type='reset'
|
||||
variant='soft'
|
||||
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>
|
||||
</Modal>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user