fixes for FilterBar.tsx ONLY

2026-06-07 15:35:13 +05:30
parent 4a8ed46c70
commit 4f043f05ab
5 changed files with 50 additions and 62 deletions
--- a/react-openapi/components/FilterBar.tsx
+++ b/react-openapi/components/FilterBar.tsx
@@ -11,7 +11,7 @@ import {
 import DoneIcon from "@mui/icons-material/Done";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import { ResourceField, ResourceMode } from "../types/config";
-import { FilterBarComponents } from "../types/overrides";
+import { FilterBarComponents, FieldComponents } from "../types/overrides";
 import { getFieldOptions, resolveTemplate } from "../utils/options";

 export function FilterAutocomplete({
@@ -158,6 +158,7 @@ function renderFilterInput(
  value: any,
  onChange: (key: string, val: any) => void,
  components?: FilterBarComponents,
+  fieldComponents?: FieldComponents,
 ) {
  const CustomInput = components?.filterInputs?.[fieldName];
  if (CustomInput) {
@@ -167,6 +168,16 @@ function renderFilterInput(
  const filterType = field.filterType;

  if (filterType === "number-range") {
+    const NumberComponent = fieldComponents?.number;
+    if (NumberComponent) {
+      const rangeVal = (value as { min?: string; max?: string }) || {};
+      return (
+        <Box sx={{ display: "flex", gap: 1 }}>
+          <NumberComponent name={`${fieldName}_min`} field={field} value={rangeVal.min ?? ""} onChange={(val: any) => onChange("min", val === "" ? undefined : val)} />
+          <NumberComponent name={`${fieldName}_max`} field={field} value={rangeVal.max ?? ""} onChange={(val: any) => onChange("max", val === "" ? undefined : val)} />
+        </Box>
+      );
+    }
    const rangeVal = (value as { min?: string; max?: string }) || {};
    return (
      <Box sx={{ display: "flex", gap: 1 }}>
@@ -179,17 +190,35 @@ function renderFilterInput(
  }

  if (filterType === "date-range") {
+    const DateComponent = fieldComponents?.date;
+    if (DateComponent) {
+      const rangeVal = (value as { start?: string; end?: string }) || {};
+      const dateField = { ...field, type: 'date' as const };
+      return (
+        <Box sx={{ display: "flex", gap: 1 }}>
+          <DateComponent name={`${fieldName}_start`} field={dateField} value={rangeVal.start ?? ""} onChange={(val: string) => onChange("start", val || undefined)} />
+          <DateComponent name={`${fieldName}_end`} field={dateField} value={rangeVal.end ?? ""} onChange={(val: string) => onChange("end", val || undefined)} />
+        </Box>
+      );
+    }
    const rangeVal = (value as { start?: string; end?: string }) || {};
    return (
      <Box sx={{ display: "flex", gap: 1 }}>
-        <TextField type="datetime-local" placeholder="From" size="small" value={rangeVal.start ?? ""}
+        <TextField type="date" 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 ?? ""}
+        <TextField type="date" placeholder="To" size="small" value={rangeVal.end ?? ""}
          onChange={(e) => onChange("end", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
      </Box>
    );
  }

+  const FormFieldComponent = fieldComponents?.FormField;
+  if (FormFieldComponent) {
+    return (
+      <FormFieldComponent name={fieldName} field={field} value={value} onChange={(val: any) => onChange("value", val)} />
+    );
+  }
+
  const selected = Array.isArray(value) ? value : [];

  return (
@@ -211,6 +240,7 @@ export interface FilterBarProps {
  onApply: (values: Record<string, any>) => void;
  onClear: () => void;
  components?: FilterBarComponents;
+  fieldComponents?: FieldComponents;
 }

 export default function FilterBar({
@@ -221,6 +251,7 @@ export default function FilterBar({
  onApply,
  onClear,
  components: filterComponents,
+  fieldComponents,
 }: FilterBarProps) {
  const [open, setOpen] = React.useState(false);
  const [draft, setDraft] = React.useState<Record<string, any>>(() => ({ ...appliedValues }));
@@ -298,7 +329,7 @@ export default function FilterBar({
                    {field.label}
                  </Box>
                  {renderFilterInput(fieldName, field, options, raw, (key, val) =>
-                    updateDraft(fieldName, key, val), filterComponents
+                    updateDraft(fieldName, key, val), filterComponents, fieldComponents
                  )}
                </Box>
              );
--- a/react-openapi/components/ResourceView.tsx
+++ b/react-openapi/components/ResourceView.tsx
@@ -184,6 +184,7 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
              appliedValues={appliedFilters}
              onApply={setAppliedFilters}
              onClear={() => setAppliedFilters({})}
+              fieldComponents={components}
            />
          )}
          <EnhancedTable
--- a/react-openapi/types/overrides.ts
+++ b/react-openapi/types/overrides.ts
@@ -52,6 +52,8 @@ export type FieldComponents = Partial<Record<FieldType, FieldComponent>> & {
  relation?: FieldComponent;
  image?: FieldComponent;
  default?: FieldComponent;
+  FormField?: React.ComponentType<any>;
+  GenericForm?: React.ComponentType<any>;
 };

 export interface CellRendererProps {
--- a/src/ReportSnapshots.tsx
+++ b/src/ReportSnapshots.tsx
@@ -4,7 +4,6 @@ import {
  Container,
  Paper,
  Typography,
-  TextField,
  Button,
  IconButton,
  CircularProgress,
@@ -15,8 +14,6 @@ import {
  DialogContent,
  DialogContentText,
  DialogActions,
-  Switch,
-  FormControlLabel,
  Chip,
 } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -125,22 +122,17 @@ export default function ReportSnapshots() {
        </Typography>

        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-          {ignoreSelfField && components?.FormField ? (
+          {ignoreSelfField && components?.FormField && (
            <components.FormField
              name="ignore_self"
              field={ignoreSelfField}
              value={ignoreSelf}
              onChange={(val: boolean) => setIgnoreSelf(val)}
            />
-          ) : (
-            <FormControlLabel
-              control={<Switch checked={ignoreSelf} onChange={(e) => setIgnoreSelf(e.target.checked)} />}
-              label="Ignore self-transfers"
-            />
          )}

          <Box sx={{ display: "flex", gap: 2 }}>
-            {startDateField && components?.datetime ? (
+            {startDateField && components?.datetime && (
              <Box sx={{ flex: 1 }}>
                <components.datetime
                  name="start_date"
@@ -149,18 +141,8 @@ export default function ReportSnapshots() {
                  onChange={(val: string) => setStartDate(val)}
                />
              </Box>
-            ) : (
-              <TextField
-                label="Start Date"
-                type="datetime-local"
-                value={startDate}
-                onChange={(e) => setStartDate(e.target.value)}
-                size="small"
-                InputLabelProps={{ shrink: true }}
-                sx={{ flex: 1 }}
-              />
            )}
-            {endDateField && components?.datetime ? (
+            {endDateField && components?.datetime && (
              <Box sx={{ flex: 1 }}>
                <components.datetime
                  name="end_date"
@@ -169,21 +151,11 @@ export default function ReportSnapshots() {
                  onChange={(val: string) => setEndDate(val)}
                />
              </Box>
-            ) : (
-              <TextField
-                label="End Date"
-                type="datetime-local"
-                value={endDate}
-                onChange={(e) => setEndDate(e.target.value)}
-                size="small"
-                InputLabelProps={{ shrink: true }}
-                sx={{ flex: 1 }}
-              />
            )}
          </Box>

          <Box sx={{ display: "flex", gap: 2 }}>
-            {minAmountField && components?.FormField ? (
+            {minAmountField && components?.FormField && (
              <Box sx={{ flex: 1 }}>
                <components.FormField
                  name="min_amount"
@@ -192,17 +164,8 @@ export default function ReportSnapshots() {
                  onChange={(val: string) => setMinAmount(val)}
                />
              </Box>
-            ) : (
-              <TextField
-                label="Min Amount"
-                type="number"
-                value={minAmount}
-                onChange={(e) => setMinAmount(e.target.value)}
-                size="small"
-                sx={{ flex: 1 }}
-              />
            )}
-            {maxAmountField && components?.FormField ? (
+            {maxAmountField && components?.FormField && (
              <Box sx={{ flex: 1 }}>
                <components.FormField
                  name="max_amount"
@@ -211,15 +174,6 @@ export default function ReportSnapshots() {
                  onChange={(val: string) => setMaxAmount(val)}
                />
              </Box>
-            ) : (
-              <TextField
-                label="Max Amount"
-                type="number"
-                value={maxAmount}
-                onChange={(e) => setMaxAmount(e.target.value)}
-                size="small"
-                sx={{ flex: 1 }}
-              />
            )}
          </Box>

--- a/src/openapi-config.ts
+++ b/src/openapi-config.ts
@@ -4,7 +4,7 @@ export const configuration: Record<string, ResourceOverride> = {
  expenses: {
    filterOptions: {
      mode: "client",
-      fields: ["account", "payee", "tags", "occurred_at", "amount"],
+      fields: ["account", "payee.name", "tags", "occurred_at", "amount"],
    },
    fields: {
      payee: {
@@ -57,12 +57,12 @@ export const configuration: Record<string, ResourceOverride> = {
      format: {
        path: 'source.format',
      },
-      account: {
-        refers: 'accounts',
-      },
-      tags: {
-        refers: 'tags',
-      },
+      // account: {
+      //   refers: 'accounts',
+      // },
+      // tags: {
+      //   refers: 'tags',
+      // },
    },
  },
  accounts: {