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

fix(FE): fixing dashboard select input UI component

Browse Source
This commit is contained in:
randy-ar
2026-01-21 15:18:37 +07:00
parent c7ffae68d8
commit 9a1be88bce
3 changed files with 131 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/SelectInput.tsx
+6
View File
@@ -312,6 +312,12 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
}
styles={{
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
multiValue(base) {
return {
...base,
borderRadius: '8px',
};
},
}}
onMenuScrollToBottom={onMenuScrollToBottom}
/>
src/components/input/SelectInputCheckbox.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ const CheckboxOption = <
type='checkbox'
checked={isSelected}
onChange={() => null}
className='checkbox checkbox-sm checkbox-primary pointer-events-none'
className='checkbox checkbox-sm rounded checkbox-primary pointer-events-none'
/>
<label className='cursor-pointer flex-1 select-none'>{label}</label>
</div>
src/components/pages/dashboard/DashboardProduction.tsx
+76 -21
View File
@@ -38,6 +38,8 @@ import Dropdown from '@/components/Dropdown';
import Menu from '@/components/menu/Menu';
import MenuItem from '@/components/menu/MenuItem';
import { useDashboardStore } from '@/stores/dashboard';
import SelectInputRadio from '@/components/input/SelectInputRadio';
import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
// Helper function to normalize values to array
const normalizeToArray = (
@@ -413,7 +415,7 @@ const DashboardProduction = () => {
{formik.values.analysisMode === 'COMPARISON' && (
<div className='px-4'>
<SelectInput
<SelectInputRadio
label='Compared By'
value={comparisonTypeOptions.find(
(option) => option.value === formik.values.comparisonType
@@ -437,7 +439,10 @@ const DashboardProduction = () => {
{/* Location */}
<div className='px-4'>
<SelectInput
{comparisonTypeOptions.find(
(option) => option.value === formik.values.comparisonType
)?.value === 'FARM' ? (
<SelectInputCheckbox
label='Farm'
value={formik.values.location}
onInputChange={setInputValueLocation}
@@ -453,16 +458,34 @@ const DashboardProduction = () => {
errorMessage={formik.errors.location as string}
options={locationOptions}
isLoading={isLoadingLocationOptions}
isMulti={
comparisonTypeOptions.find(
(option) => option.value === formik.values.comparisonType
)?.value === 'FARM'
}
isError={
Boolean(formik.errors.location) &&
Boolean(formik.touched.location)
}
/>
) : (
<SelectInputRadio
label='Farm'
value={formik.values.location as OptionType}
onInputChange={setInputValueLocation}
onMenuScrollToBottom={loadMoreLocation}
onChange={(selected) => {
formik.setFieldValue('location', selected);
// Update selectedLocationIds for kandang filter
setSelectedLocationIds(normalizeToArray(selected));
// Reset dependent fields when location changes
formik.setFieldValue('flock', []);
formik.setFieldValue('kandang', []);
}}
errorMessage={formik.errors.location as string}
options={locationOptions}
isLoading={isLoadingLocationOptions}
isError={
Boolean(formik.errors.location) &&
Boolean(formik.touched.location)
}
/>
)}
</div>
{/* Flock */}
@@ -474,9 +497,12 @@ const DashboardProduction = () => {
)
) && (
<div className='px-4'>
<SelectInput
{comparisonTypeOptions.find(
(option) => option.value === formik.values.comparisonType
)?.value === 'FLOCK' ? (
<SelectInputCheckbox
label='Flock'
value={formik.values.flock}
value={formik.values.flock as OptionType[]}
onChange={(selected) =>
formik.setFieldValue('flock', selected)
}
@@ -485,16 +511,29 @@ const DashboardProduction = () => {
onMenuScrollToBottom={loadMoreFlock}
options={flockOptions}
isLoading={isLoadingFlockOptions}
isMulti={
comparisonTypeOptions.find(
(option) => option.value === formik.values.comparisonType
)?.value === 'FLOCK'
}
isError={
Boolean(formik.errors.flock) &&
Boolean(formik.touched.flock)
}
/>
) : (
<SelectInputRadio
label='Flock'
value={formik.values.flock as OptionType}
onChange={(selected) =>
formik.setFieldValue('flock', selected)
}
errorMessage={formik.errors.flock as string}
onInputChange={setInputValueFlock}
onMenuScrollToBottom={loadMoreFlock}
options={flockOptions}
isLoading={isLoadingFlockOptions}
isError={
Boolean(formik.errors.flock) &&
Boolean(formik.touched.flock)
}
/>
)}
</div>
)}
@@ -504,9 +543,12 @@ const DashboardProduction = () => {
!(formik.values.comparisonType === 'KANDANG')
) && (
<div className='px-4'>
<SelectInput
{comparisonTypeOptions.find(
(option) => option.value === formik.values.comparisonType
)?.value === 'KANDANG' ? (
<SelectInputCheckbox
label='Kandang'
value={formik.values.kandang}
value={formik.values.kandang as OptionType[]}
onChange={(selected) =>
formik.setFieldValue('kandang', selected)
}
@@ -515,16 +557,29 @@ const DashboardProduction = () => {
onMenuScrollToBottom={loadMoreKandang}
options={kandangOptions}
isLoading={isLoadingKandangOptions}
isMulti={
comparisonTypeOptions.find(
(option) => option.value === formik.values.comparisonType
)?.value === 'KANDANG'
}
isError={
Boolean(formik.errors.kandang) &&
Boolean(formik.touched.kandang)
}
/>
) : (
<SelectInputRadio
label='Kandang'
value={formik.values.kandang as OptionType}
onChange={(selected) =>
formik.setFieldValue('kandang', selected)
}
errorMessage={formik.errors.kandang as string}
onInputChange={setInputValueKandang}
onMenuScrollToBottom={loadMoreKandang}
options={kandangOptions}
isLoading={isLoadingKandangOptions}
isError={
Boolean(formik.errors.kandang) &&
Boolean(formik.touched.kandang)
}
/>
)}
</div>
)}