Skip to content

Filter isn't working when it's array #4

Description

@rvieceli

On query string is right
image

But it's send only one value
image

import React from 'react'
import { ca } from 'chakra-admin'
import {
  Button,
  Checkbox,
  List as ChakraList,
  ListItem,
  Stack,
} from '@chakra-ui/react'
import { useGetClientsLightQuery } from '../../../graphql'
import { SearchBox } from '../../../components/search-box/SearchBox'

const ClientsFilterComponent: React.FC<any> = ({ value, onChange }) => {
  const [clients, setClients] = React.useState<string[]>(value || [])
  const [searchString, setSearchString] = React.useState<string>()
  const { data } = useGetClientsLightQuery({
    variables: {
      filters: {
        name: searchString,
      },
    },
  })

  const handleCheck = React.useCallback(
    (ev: React.ChangeEvent<HTMLInputElement>, id: string) => {
      if (ev.target.checked) {
        setClients((clients) => [...clients, id])
      } else {
        setClients((clients) => clients.filter((c) => c !== id))
      }
    },
    [setClients]
  )

  return (
    <Stack>
      <SearchBox doSearch={setSearchString} />
      <ChakraList>
        {data?.clients?.data.map((client) => (
          <ListItem key={client.id}>
            <Checkbox
              size="lg"
              isChecked={clients.includes(client.id)}
              onChange={(ev) => handleCheck(ev, client.id)}
            >
              {client.name}
            </Checkbox>
          </ListItem>
        ))}
      </ChakraList>
      <Button onClick={() => onChange(clients)}>Applica</Button>
    </Stack>
  )
}

export const ClientsFilter = ca.f(ClientsFilterComponent)

and I'm using like that

    <Filters {...props}>
      <Input source="q" label="Cerca scadenze..." alwaysOn />
      <ClientsFilter source="clientIds" label="Tutti i clienti" />
    </Filters>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions