muffin-admin 3.5.0 → 3.6.2

package/dist/types.d.ts

@@ -2,13 +2,14 @@ export type TProps = {
     [key: string]: any;
 };
 export type AdminAction = {
-    view: string[];
+    view: ("show" | "edit" | "list" | "bulk")[];
     id: string;
     label: string;
     title: string;
     icon: string;
     action: string;
     confirm?: string | false;
+    schema?: AdminInput[];
 };
 export type AdminField = [string, {
     source: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "3.5.0",
+  "version": "3.6.2",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",

package/src/MuffinResourceList.tsx

@@ -14,7 +14,7 @@ import {
   TopToolbar,
 } from "react-admin"
 import { buildRA } from "./buildRA"
-import { BulkActionButton } from "./buttons"
+import { ActionButton, BulkActionButton } from "./buttons"
 import { useMuffinResourceOpts } from "./hooks"
 import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
@@ -72,12 +72,15 @@ setupAdmin(["list-grid-buttons"], MuffinListGridButtons)
 
 function MuffinListToolbar() {
   const {
+    actions: baseActions = [],
     list: { create },
   } = useMuffinResourceOpts()
+  const actions = baseActions.filter((a) => a.view.includes("list"))
   return (
     <TopToolbar>
       <SelectColumnsButton />
       <FilterButton />
+      {actions.length && actions.map((props) => <ActionButton key={props.id} {...props} />)}
       {create && <CreateButton />}
       <ExportButton />
     </TopToolbar>
@@ -90,7 +93,7 @@ function MuffinListBulkActions() {
     actions: baseActions = [],
     list: { remove },
   } = useMuffinResourceOpts()
-  const actions = baseActions.filter((a) => a.view.includes("list"))
+  const actions = baseActions.filter((a) => a.view.includes("bulk"))
   return (
     <>
       {actions.map((props) => (

package/src/buttons/ActionButton.tsx

@@ -1,13 +1,15 @@
 import {
   Button,
+  Form,
   useListContext,
   useRecordContext,
   useResourceContext,
   useTranslate,
 } from "react-admin"
 
-import { useMemo, useState } from "react"
-import { useConfirmation } from "../common"
+import { useState } from "react"
+import { buildRA } from "../buildRA"
+import { AdminModal, PayloadButtons, useConfirmation } from "../common"
 import { useAction } from "../hooks/useAction"
 import { AdminAction } from "../types"
 import { buildIcon, findBuilder } from "../utils"
@@ -18,81 +20,89 @@ export type ActionPayloadProps = {
   onHandle: (payload: any) => void
 }
 
-export function ActionButton({ icon, label, title, action, id, confirm }: AdminAction) {
+export function ActionButton({ action, confirm, ...props }: AdminAction) {
   const translate = useTranslate()
   const record = useRecordContext()
-  const resource = useResourceContext()
   const confirmation = useConfirmation()
   const { mutate, isPending } = useAction(action)
 
-  const [payloadActive, setPayloadActive] = useState(false)
-  const [payloadResolver, setPayloadResolver] = useState<(data: any) => void>()
+  const confirmMessage =
+    typeof confirm === "string" ? translate(confirm) : "Do you confirm this action?"
+
+  const onHandle = async (payload?) => {
+    const process = confirm ? await confirmation.confirm({ message: confirmMessage }) : true
+    if (process) await mutate({ record, payload })
+  }
+
+  return <ActionButtonBase {...props} isPending={isPending} onHandle={onHandle} />
+}
+
+export function BulkActionButton({ action, confirm, ...props }: AdminAction) {
+  const translate = useTranslate()
+  const { selectedIds } = useListContext()
+  const { mutate, isPending } = useAction(action)
+  const confirmation = useConfirmation()
 
-  const PayloadBuilder = findBuilder(["action", "payload", id, resource])
-  const buildPayload = useMemo(() => {
-    if (PayloadBuilder) {
-      return new Promise((resolve) => setPayloadResolver(() => resolve))
-    }
-    return Promise.resolve()
-  }, [PayloadBuilder])
   const confirmMessage =
     typeof confirm === "string" ? translate(confirm) : "Do you confirm this action?"
 
+  const onHandle = async (payload?) => {
+    const process = confirm ? await confirmation.confirm({ message: confirmMessage }) : true
+    if (process) await mutate({ ids: selectedIds, payload })
+  }
+
+  return <ActionButtonBase {...props} onHandle={onHandle} isPending={isPending} />
+}
+
+export function CommonPayload({ active, onClose, onHandle, schema, title }) {
+  const inputs = buildRA(schema)
+  const translate = useTranslate()
   return (
-    <>
-      <Button
-        label={label}
-        title={title}
-        onClick={async () => {
-          if (PayloadBuilder) setPayloadActive(true)
-          const payload = await buildPayload
-          const process = confirm ? await confirmation.confirm({ message: confirmMessage }) : true
-          if (process) await mutate({ record, payload })
+    <AdminModal
+      maxWidth="sm"
+      open={active}
+      onClose={onClose}
+      title={translate(title, { _: title })}
+    >
+      <Form
+        onSubmit={(data) => {
+          onClose()
+          onHandle(data)
         }}
-        disabled={isPending}
       >
-        {buildIcon(icon)}
-      </Button>
-      {PayloadBuilder && (
-        <PayloadBuilder
-          active={payloadActive}
-          onHandle={payloadResolver}
-          onClose={() => setPayloadActive(false)}
-        />
-      )}
-    </>
+        {inputs}
+        <PayloadButtons onClose={onClose} />
+      </Form>
+    </AdminModal>
   )
 }
 
-export function BulkActionButton({ label, icon, title, action, id, confirm }: AdminAction) {
-  const translate = useTranslate()
-  const { selectedIds } = useListContext()
-  const { mutate, isPending } = useAction(action)
-  const confirmation = useConfirmation()
+function ActionButtonBase({
+  label,
+  title,
+  onHandle,
+  isPending,
+  icon,
+  schema,
+  id,
+}: Omit<AdminAction, "action"> & {
+  isPending?: boolean
+  onHandle: (payload?: any) => void
+}) {
   const resource = useResourceContext()
   const [payloadActive, setPayloadActive] = useState(false)
-  const [payloadResolver, setPayloadResolver] = useState<(data: any) => void>()
 
-  const PayloadBuilder = findBuilder(["action", "payload", id, resource])
-  const buildPayload = useMemo(() => {
-    if (PayloadBuilder) {
-      return new Promise((resolve) => setPayloadResolver(() => resolve))
-    }
-    return Promise.resolve()
-  }, [PayloadBuilder])
-  const confirmMessage =
-    typeof confirm === "string" ? translate(confirm) : "Do you confirm this action?"
+  const PayloadBuilder =
+    findBuilder(["action", "payload", id, resource]) || (schema && CommonPayload)
 
   return (
     <>
       <Button
         label={label}
         title={title}
-        onClick={async () => {
+        onClick={() => {
           if (PayloadBuilder) setPayloadActive(true)
-          const payload = await buildPayload
-          const process = confirm ? await confirmation.confirm({ message: confirmMessage }) : true
-          if (process) await mutate({ ids: selectedIds, payload })
+          else onHandle()
         }}
         disabled={isPending}
       >
@@ -101,8 +111,10 @@ export function BulkActionButton({ label, icon, title, action, id, confirm }: Ad
       {PayloadBuilder && (
         <PayloadBuilder
           active={payloadActive}
-          onHandle={payloadResolver}
+          onHandle={onHandle}
           onClose={() => setPayloadActive(false)}
+          title={title || label}
+          schema={schema}
         />
       )}
     </>

package/src/common/PayloadButtons.tsx

@@ -0,0 +1,19 @@
+import { Stack } from "@mui/material"
+import { Button } from "react-admin"
+import { useFormContext } from "react-hook-form"
+
+export function PayloadButtons({ onClose }) {
+  const { formState } = useFormContext()
+  return (
+    <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={1}>
+      <Button
+        type="submit"
+        label="ra.action.confirm"
+        variant="contained"
+        disabled={!formState.isValid}
+        size="medium"
+      />
+      <Button label="ra.action.cancel" variant="outlined" size="medium" onClick={onClose} />
+    </Stack>
+  )
+}

package/src/common/index.ts

@@ -1,2 +1,3 @@
 export * from "./AdminModal"
 export * from "./ConfirmationProvider"
+export * from "./PayloadButtons"

package/src/types.ts

@@ -3,13 +3,14 @@ export type TProps = {
 }
 
 export type AdminAction = {
-  view: string[]
+  view: ("show" | "edit" | "list" | "bulk")[]
   id: string
   label: string
   title: string
   icon: string
   action: string
   confirm?: string | false
+  schema?: AdminInput[]
 }
 
 export type AdminField = [string, { source: string }]
@@ -34,11 +35,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