apps/khata-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Admin filter fixes

Browse Source
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2026-05-24 14:09:41 +05:30
parent 6fc24001a7
commit e1b8f4e0c3
1 changed files with 20 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
react-openapi/components/FilterBar.tsx
View File

@@ -71,26 +71,11 @@ function renderFilterInput(
if (filterType === "number-range") {
const rangeVal = (value as { min?: string; max?: string }) || {};
return (
<Box key={fieldName} sx={{ display: "flex", gap: 1, alignItems: "center" }}>
<Typography variant="caption" sx={{ minWidth: 80, color: "text.secondary" }}>
{field.label}
</Typography>
<TextField
type="number"
placeholder="Min"
size="small"
value={rangeVal.min ?? ""}
onChange={(e) => onChange("min", e.target.value || undefined)}
sx={{ width: 120 }}
/>
<TextField
type="number"
placeholder="Max"
size="small"
value={rangeVal.max ?? ""}
onChange={(e) => onChange("max", e.target.value || undefined)}
sx={{ width: 120 }}
/>
<Box sx={{ display: "flex", gap: 1 }}>
<TextField type="number" placeholder="Min" size="small" value={rangeVal.min ?? ""}
onChange={(e) => onChange("min", e.target.value || undefined)} sx={{ width: 100 }} />
<TextField type="number" placeholder="Max" size="small" value={rangeVal.max ?? ""}
onChange={(e) => onChange("max", e.target.value || undefined)} sx={{ width: 100 }} />
</Box>
);
}
@@ -98,64 +83,25 @@ function renderFilterInput(
if (filterType === "date-range") {
const rangeVal = (value as { start?: string; end?: string }) || {};
return (
<Box key={fieldName} sx={{ display: "flex", gap: 1, alignItems: "center" }}>
<Typography variant="caption" sx={{ minWidth: 80, color: "text.secondary" }}>
{field.label}
</Typography>
<TextField
type="datetime-local"
placeholder="From"
size="small"
value={rangeVal.start ?? ""}
onChange={(e) => onChange("start", e.target.value || undefined)}
InputLabelProps={{ shrink: true }}
sx={{ width: 190 }}
/>
<TextField
type="datetime-local"
placeholder="To"
size="small"
value={rangeVal.end ?? ""}
onChange={(e) => onChange("end", e.target.value || undefined)}
InputLabelProps={{ shrink: true }}
sx={{ width: 190 }}
/>
<Box sx={{ display: "flex", gap: 1 }}>
<TextField type="datetime-local" placeholder="From" size="small" value={rangeVal.start ?? ""}
onChange={(e) => onChange("start", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
<TextField type="datetime-local" placeholder="To" size="small" value={rangeVal.end ?? ""}
onChange={(e) => onChange("end", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
</Box>
);
}
if (filterType === "multiselect") {
const selected = Array.isArray(value) ? value : [];
return (
<Autocomplete
key={fieldName}
multiple
options={options}
value={selected}
onChange={(_, val) => onChange("value", val.length > 0 ? val : undefined)}
renderInput={(params) => (
<TextField {...params} label={field.label} size="small" />
)}
sx={{ minWidth: 220 }}
size="small"
/>
);
}
const selected = Array.isArray(value) ? value : [];
return (
<Autocomplete
key={fieldName}
multiple
freeSolo
options={options}
value={selected}
onChange={(_, val) => onChange("value", val.length > 0 ? val : undefined)}
ChipProps={{ size: 'small' }}
renderInput={(params) => (
<TextField {...params} label={field.label} size="small" />
)}
sx={{ minWidth: 220 }}
size="small"
renderInput={(params) => <TextField {...params} placeholder={`Add ${field.label}...`} />}
sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
/>
);
}
@@ -249,20 +195,23 @@ export default function FilterBar({
const raw = draft[fieldName];
return (
<React.Fragment key={fieldName}>
<Box key={fieldName} sx={{ display: "flex", flexDirection: "column", flex: 1, minWidth: { sm: 200 } }}>
<Box sx={{ typography: "caption", mb: 0.5, color: "text.secondary" }}>
{field.label}
</Box>
{renderFilterInput(fieldName, field, options, raw, (key, val) =>
updateDraft(fieldName, key, val)
)}
</React.Fragment>
</Box>
);
})}
</Box>
<Box sx={{ mt: 2, display: "flex", gap: 1 }}>
<Button variant="contained" size="small" onClick={handleApply}>
<Button variant="contained" onClick={handleApply}>
Apply
</Button>
<Button variant="outlined" size="small" onClick={handleClear}>
<Button variant="outlined" onClick={handleClear}>
Clear
</Button>
</Box>