muffin-admin 6.1.3 → 7.0.0

package/dist/types.d.ts

@@ -2,7 +2,7 @@ export type TID = string | number;
 export type TProps = {
     [key: string]: any;
 };
-export type TAdminType = "action-form" | "admin" | "appbar" | "auth-provider" | "auth-storage-get" | "auth-storage-set" | "create" | "create-toolbar" | "create-inputs" | "dashboard" | "dashboard-actions" | "dashboard-content" | "data-provider" | "edit" | "edit-actions" | "edit-toolbar" | "edit-inputs" | "layout" | "list" | "list-actions" | "list-toolbar" | "list-grid" | "list-grid-buttons" | "list-filters" | "list-fields" | "locale" | "loginpage" | "resource" | "show" | "show-actions" | "show-toolbar" | "show-fields" | "show-links";
+export type TAdminType = "action-form" | "admin" | "appbar" | "auth-provider" | "auth-storage-get" | "auth-storage-set" | "create" | "create-toolbar" | "create-inputs" | "dashboard" | "dashboard-actions" | "dashboard-content" | "data-provider" | "edit" | "edit-actions" | "edit-toolbar" | "edit-form-toolbar" | "edit-inputs" | "layout" | "list" | "list-actions" | "list-toolbar" | "list-grid" | "list-grid-buttons" | "list-filters" | "list-fields" | "locale" | "loginpage" | "resource" | "show" | "show-actions" | "show-toolbar" | "show-fields" | "show-links";
 export type TAdminPath = [type: TAdminType, ...ids: string[]];
 export type AdminAction = {
     view?: ("show" | "edit" | "list" | "bulk")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "6.1.3",
+  "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/MuffinResource.tsx

@@ -7,15 +7,20 @@ export function MuffinResource({ name, ...props }: ResourceProps) {
   const opts = adminOpts?.resources.find((r) => r.name == name)
   if (!opts) return null
 
+  const Create = findBuilder(["create", name])
+  const Edit = findBuilder(["edit", name])
+  const List = findBuilder(["list", name])
+  const Show = findBuilder(["show", name])
+
   return (
     <Resource
       key={name}
       name={name}
       icon={findIcon(opts.icon)}
-      create={findBuilder(["create", name])}
-      edit={findBuilder(["edit", name])}
-      list={findBuilder(["list", name])}
-      show={findBuilder(["show", name])}
+      create={Create}
+      edit={Edit}
+      list={List}
+      show={Show}
       {...props}
     />
   )

package/src/MuffinResourceEdit.tsx

@@ -13,43 +13,56 @@ import {
 import { buildRA } from "./buildRA"
 import { ActionButton } from "./buttons"
 import { useMuffinAdminOpts, useMuffinResourceOpts } from "./hooks"
-import { buildAdmin, findBuilder, setupAdmin } from "./utils"
+import { findBuilder, setupAdmin } from "./utils"
 
 export function MuffinEdit({ children }: PropsWithChildren) {
   const {
     adminProps: { mutationMode = "optimistic" },
   } = useMuffinAdminOpts()
+
   const { edit, name } = useMuffinResourceOpts()
   if (!edit) return null
 
-  const { inputs, remove } = edit
-  const ActionsToolbar = findBuilder(["edit-toolbar", name])
+  const Actions = findBuilder(["edit-toolbar", name])
+  const Inputs = findBuilder(["edit-inputs", name])
+  const FormToolbar = findBuilder(["edit-form-toolbar", name])
 
   return (
-    <Edit actions={<ActionsToolbar />} mutationMode={mutationMode}>
+    <Edit actions={<Actions />} mutationMode={mutationMode}>
       {children}
-      <SimpleForm
-        toolbar={
-          <Toolbar>
-            <SaveButton />
-            {remove && (
-              <DeleteButton
-                sx={{
-                  marginLeft: "auto",
-                }}
-              />
-            )}
-          </Toolbar>
-        }
-      >
-        {buildAdmin(["edit-inputs", name], inputs)}
+      <SimpleForm toolbar={<FormToolbar />}>
+        <Inputs />
       </SimpleForm>
     </Edit>
   )
 }
 
 setupAdmin(["edit"], MuffinEdit)
-setupAdmin(["edit-inputs"], buildRA)
+
+export function MuffinEditFormToolbar() {
+  const { edit } = useMuffinResourceOpts()
+  if (!edit) return null
+
+  const { remove } = edit
+  return (
+    <Toolbar>
+      <SaveButton />
+      {remove && <DeleteButton sx={{ marginLeft: "auto" }} />}
+    </Toolbar>
+  )
+}
+
+setupAdmin(["edit-form-toolbar"], MuffinEditFormToolbar)
+
+export function MuffinEditInputs() {
+  const { edit } = useMuffinResourceOpts()
+  if (!edit) return null
+
+  const { inputs } = edit
+
+  return <>{buildRA(inputs)}</>
+}
+setupAdmin(["edit-inputs"], MuffinEditInputs)
 
 export function MuffinEditToolbar({ children }: PropsWithChildren) {
   const resource = useResourceContext()

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/MuffinResourceShow.tsx

@@ -8,17 +8,17 @@ import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
 export function MuffinShow({ children }: PropsWithChildren) {
   const { show, name } = useMuffinResourceOpts()
-  const ActionsToolbar = findBuilder(["show-toolbar", name])
+  const ShowToolbar = findBuilder(["show-toolbar", name])
 
   return (
-    <Show actions={<ActionsToolbar />}>
+    <Show actions={<ShowToolbar />}>
       {children}
       <SimpleShowLayout>{buildAdmin(["show-fields", name], show)}</SimpleShowLayout>
     </Show>
   )
 }
 
-setupAdmin(["show"], (props) => <MuffinShow {...props} />)
+setupAdmin(["show"], MuffinShow)
 setupAdmin(["show-fields"], ({ fields }) => buildRA(fields))
 
 export function MuffinShowToolbar({ children }: PropsWithChildren) {

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

@@ -21,6 +21,7 @@ export type TAdminType =
   | "edit"
   | "edit-actions"
   | "edit-toolbar"
+  | "edit-form-toolbar"
   | "edit-inputs"
   | "layout"
   | "list"
@@ -54,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
@@ -85,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