muffin-admin 6.2.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "6.2.0",
+  "version": "7.0.0",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",
@@ -23,10 +23,11 @@
   },
   "homepage": "https://github.com/klen/muffin-admin#readme",
   "dependencies": {
+    "@mui/x-date-pickers": "^7.22.3",
     "js-cookie": "^3.0.5",
     "ra-language-russian": "^4.14.2",
     "react": "^18.3.1",
-    "react-admin": "^5.0.3",
+    "react-admin": "^5.4.0",
     "react-dom": "^18.3.1",
     "validator": "^13.12.0"
   },

package/src/MuffinResourceList.tsx

@@ -15,25 +15,27 @@ import {
   SelectColumnsButton,
   TopToolbar,
 } from "react-admin"
-import { buildRA } from "./buildRA"
+import { buildRA, buildRAComponent } from "./buildRA"
 import { BulkActionButton, ListActionButton } from "./buttons"
 import { HelpLink } from "./common/HelpLink"
 import { useMuffinResourceOpts } from "./hooks"
+import { AdminInput } from "./types"
 import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
 export function MuffinList({ children }: PropsWithChildren) {
   const { name, list } = useMuffinResourceOpts()
-  const { limit, limitMax, limitTotal, filters, sort } = list
+  const { limit, limitMax, limitTotal, sort, filters } = list
 
   const DataGrid = findBuilder(["list-grid", name])
   const Toolbar = findBuilder(["list-toolbar", name])
+  const raFilters = buildAdmin(["list-filters", name], filters)
 
   return limitTotal ? (
     <List
       sort={sort}
       perPage={limit}
+      filters={raFilters}
       actions={<Toolbar />}
-      filters={buildAdmin(["list-filters", name], filters)}
       pagination={
         <Pagination rowsPerPageOptions={sortBy(uniq([10, 25, 50, 100, limit, limitMax]))} />
       }
@@ -42,12 +44,7 @@ export function MuffinList({ children }: PropsWithChildren) {
       <DataGrid />
     </List>
   ) : (
-    <InfiniteList
-      sort={sort}
-      perPage={limit}
-      actions={<Toolbar />}
-      filters={buildAdmin(["list-filters", name], filters)}
-    >
+    <InfiniteList sort={sort} perPage={limit} actions={<Toolbar />} filters={raFilters}>
       {children}
       <DataGrid />
     </InfiniteList>
@@ -56,7 +53,17 @@ export function MuffinList({ children }: PropsWithChildren) {
 
 setupAdmin(["list"], MuffinList)
 setupAdmin(["list-fields"], buildRA)
-setupAdmin(["list-filters"], buildRA)
+
+function muffinListFilters(filters: AdminInput[]) {
+  return filters.map((props) => {
+    const [rtype, opts] = props
+    return buildRAComponent(rtype, {
+      ...opts,
+      variant: "outlined",
+    })
+  })
+}
+setupAdmin(["list-filters"], muffinListFilters)
 
 function MuffinListDatagrid() {
   const { name, list } = useMuffinResourceOpts()
@@ -125,7 +132,3 @@ function MuffinListActions() {
 }
 
 setupAdmin(["list-actions"], MuffinListActions)
-
-function MuffinPagination() {
-  return null
-}

package/src/buildRA.tsx

@@ -25,17 +25,18 @@ import {
   ReferenceField,
   ReferenceInput,
   ReferenceManyField,
+  required,
   RichTextField,
+  SelectArrayInput,
   SelectField,
   SelectInput,
   TextField,
   TextInput,
   UrlField,
-  required,
 } from "react-admin"
 
 import { AvatarField, EditableBooleanField, FKField, JsonField } from "./fields"
-import { FKInput, JsonInput } from "./inputs"
+import { FilterInput, FKInput, JsonInput } from "./inputs"
 
 const UI: Record<string, JSX.ElementType> = {
   // Fields
@@ -60,25 +61,27 @@ const UI: Record<string, JSX.ElementType> = {
   JsonField,
 
   // Inputs
+  ArrayInput,
+  AutocompleteArrayInput,
+  AutocompleteInput,
   BooleanInput,
-  NullableBooleanInput,
+  CheckboxGroupInput,
   DateInput,
+  FilterInput,
   DateTimeInput,
-  ImageInput,
+  FKInput,
   FileInput,
+  ImageInput,
+  JsonInput,
+  NullableBooleanInput,
   NumberInput,
   PasswordInput,
-  TextInput,
-  AutocompleteInput,
   RadioButtonGroupInput,
-  SelectInput,
-  ArrayInput,
-  AutocompleteArrayInput,
-  CheckboxGroupInput,
   ReferenceArrayInput,
   ReferenceInput,
-  JsonInput,
-  FKInput,
+  SelectInput,
+  TextInput,
+  SelectArrayInput,
 }
 
 export function buildRAComponent(name: string, props: any) {

package/src/dataprovider.ts

@@ -13,7 +13,14 @@ export function MuffinDataprovider(apiUrl: string) {
     getList: async (resource: string, params: any) => {
       const { filter, pagination, sort } = params
       const query: APIParams["query"] = {}
-      if (filter) query.where = JSON.stringify(filter)
+      if (filter) {
+        query.where = JSON.stringify(
+          Object.entries(filter).reduce((acc, [key, value]) => {
+            acc[key] = Array.isArray(value) ? { $in: value } : value
+            return acc
+          }, {})
+        )
+      }
       if (pagination) {
         const { page, perPage: limit } = pagination
         query.limit = limit
@@ -85,7 +92,7 @@ export function MuffinDataprovider(apiUrl: string) {
       return await methods.getList(resource, { filter, ...opts })
     },
 
-    runAction: async (resource: string, action: string, props: TActionProps) => {
+    runAction: async (_: string, action: string, props: TActionProps) => {
       const { payload, ids, record } = props
       action = action.replace(/^\/+/, "")
       if (record) {

package/src/i18n/ru.ts

@@ -1,12 +1,12 @@
 import { TranslationMessages } from "ra-core"
 import raRussianMessages from "ra-language-russian"
 
-const muffinRussianMessages: TranslationMessages = {
+const muffinRussianMessages = {
   ...raRussianMessages,
   muffin: {
     instructions: "Инструкции",
     how_to_use_admin: "Как использовать админку?",
   },
-}
+} as unknown as TranslationMessages
 
 export default muffinRussianMessages

package/src/inputs/FilterInput.tsx

@@ -0,0 +1,67 @@
+import Button from "@mui/material/Button"
+import FormGroup from "@mui/material/FormGroup"
+import Menu from "@mui/material/Menu"
+import MenuItem from "@mui/material/MenuItem"
+import TextField from "@mui/material/TextField"
+import { useState } from "react"
+import { useInput } from "react-admin"
+
+const OPERATORS = {
+  $eq: "=",
+  $ne: "≠",
+  $gt: ">",
+  $ge: "≥",
+  $lt: "<",
+  $le: "≤",
+}
+
+export function FilterInput({ type = "text", ...props }: any) {
+  const { field } = useInput({
+    format: (value: any) => (value ? value[Object.keys(value)[0]] : ""),
+    ...props,
+  })
+  const [op, setOp] = useState((field.value && Object.keys(field.value)[0]) || "$eq")
+
+  const onChange = function(e: any) {
+    field.onChange({ [op]: e.target.value })
+  }
+
+  const [menuEl, setMenuEl] = useState(null)
+  const open = Boolean(menuEl)
+  return (
+    <>
+      <FormGroup row sx={{ flexWrap: "nowrap" }}>
+        <Button
+          size="small"
+          disableElevation
+          sx={{ minWidth: 30 }}
+          onClick={(e) => setMenuEl(e.currentTarget)}
+        >
+          <span style={{ fontSize: "1.5em" }}>{OPERATORS[op]}</span>
+        </Button>
+        <TextField
+          {...field}
+          onChange={onChange}
+          value={field.value}
+          variant="outlined"
+          type={type}
+        />
+      </FormGroup>
+      <Menu open={open} onClose={() => setMenuEl(null)} anchorEl={menuEl}>
+        {Object.entries(OPERATORS).map(([key, value]) => (
+          <MenuItem
+            key={key}
+            selected={op === value}
+            onClick={() => {
+              setOp(key)
+              setMenuEl(null)
+              field.onChange({ [key]: field.value })
+            }}
+          >
+            {value}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  )
+}

package/src/inputs/index.ts

@@ -1,2 +1,3 @@
+export * from "./FilterInput"
 export * from "./FKInput"
 export * from "./JsonInput"

package/src/types.ts

@@ -55,7 +55,7 @@ export type AdminAction = {
 }
 
 export type AdminField = [string, { source: string }]
-export type AdminInput = [string, { required: boolean; source: string;[key: string]: any }]
+export type AdminInput = [string, { required: boolean; source: string; [key: string]: any }]
 
 export type AdminShowLink = {
   label: string
@@ -86,11 +86,11 @@ export type AdminResourceProps = {
   actions: AdminAction[]
   create: AdminInput[] | false
   edit:
-  | {
-    inputs: AdminInput[]
-    remove?: boolean
-  }
-  | false
+    | {
+        inputs: AdminInput[]
+        remove?: boolean
+      }
+    | false
   list: {
     limit: number
     limitMax: number