自定义过滤器AdminJS (组件+动作)

Question

我正在尝试创建一个自定义过滤器。我在一张桌子上，想按照另一张桌子上的字段进行排序。表间的ManyToMany关系

我还需要创建一个具有匹配设计的自定义过滤器组件。

工作一天后，我的工作解决方案就在答案中，所以如果您有相同的问题，它将节省您的时间:)

Answer 1

这是我的解决方案：

我将组件部分中的ResourceOptions中的组件链接到已经有客户列表包的自定义组件中：

filter: AdminJS.bundle("../../components/generic/filter/FilterSublist"),

以下是自定义的样式：

​

//style so your custom components looks like the basic AdminJS component
const customStyles = {
  menu: (provided, state) => ({
    ...provided,
    borderRadius: 0,
    backgroundColor: "#343F87",
  }),

  control: (provided, state) => ({
    ...provided,
    backgroundColor: "#343F87",
    borderRadius: 0,
    border: '1px solid #525C99',
  }),

  option: (provided, state) => ({
    ...provided,
    '&:hover': {
      backgroundColor: '#2E3974',
    },
    backgroundColor: "#343F87",
  }),
}

​

以下是组件：

​

import {BasePropertyComponent, BasePropertyProps, ApiClient, useRecord} from "adminjs";
import AsyncSelect from 'react-select/async';
import React, {useState, useEffect} from "react";

const FilterSublist = (props: BasePropertyProps) => {
  const [values, setValues] = useState<Array<{label: string, value: any}>>([]);
  const [defaultOptions, setDefaultOptions] = useState<Array<{label: string, value: any}>>([]);
  const api = new ApiClient()

  useEffect(() => {handleGetDefaultValues()}, [])

  const handleGetDefaultValues = async () => {
    const searchResults = await api.searchRecords({resourceId: "ServiceProviderAreaOfAction", query: ""})
    const filteredResults = searchResults.filter(r => r.params.id !== Number(values))
    setDefaultOptions(filteredResults.map(v => ({label: v.title, value: v.params.id})))
  }

  const handleSearch = async (inputValue: string, callback: (options: Array<{ label: string, value: any }>) => void) => {
    const searchResults = await api.searchRecords({resourceId: "ServiceProviderAreaOfAction", query: inputValue})
    const filteredResults = searchResults.filter(r => !values.map(v => Number(v.value.id)).includes(Number(r.params.id)))
    callback(filteredResults.map(v => ({label: v.title, value: v.params.id})))
  }

  //Store values in props.filter so they are sent with all the filters
  const handleChange = (a: Array<{label: string, value: any}>) => {
    setValues(a ? a : [])
      // @ts-ignore
      props.onChange(props.property.propertyPath, (a ? a.map(e => e.value).join(',') : undefined))
  }

  return (
    <div style={{marginBottom: 18}}>
      <p style={{fontSize: 12, marginBottom: 8}}>Area of action</p>
      {/* @ts-ignore */}
      <AsyncSelect className="AsyncSelectBlue" isMulti defaultOptions={defaultOptions} value={values} onChange={handleChange} loadOptions={handleSearch} styles={customStyles}/>
    </div>
  )
}

export default FilterSublist

​

在ResourceOptions中，我再次使用自定义处理程序列出操作，在该处理程序中，我检测到自定义筛选器，将其转换为id数组，然后删除自定义筛选器字段，让普通过滤器完成他的工作，并使用id数组过滤结果。

我希望它有帮助:)