muffin-admin 3.4.2 → 3.6.1

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;
@@ -24,7 +25,6 @@ export type AdminShowLink = {
     field?: string;
 };
 export type AdminShowProps = {
-    actions: AdminAction[];
     fields: AdminField[];
     links: [string, AdminShowLink][];
     edit?: boolean;
@@ -33,16 +33,15 @@ export type AdminResourceProps = {
     name: string;
     icon?: string;
     label: string;
+    actions: AdminAction[];
     create: AdminInput[] | false;
     edit: {
-        actions: AdminAction[];
         inputs: AdminInput[];
         remove?: boolean;
     } | false;
     list: {
         limit: number;
         limitMax: number;
-        actions: AdminAction[];
         create: boolean;
         filters: AdminInput[];
         fields: AdminField[];

package/package.json

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

package/src/MuffinResourceEdit.tsx

@@ -63,9 +63,9 @@ export function MuffinEditToolbar() {
 setupAdmin(["edit-toolbar"], MuffinEditToolbar)
 
 export function MuffinEditActions() {
-  const { edit } = useMuffinResourceOpts()
+  const { edit, actions: baseActions = [] } = useMuffinResourceOpts()
   if (!edit) return null
-  const { actions = [] } = edit
+  const actions = baseActions.filter((a => a.view.includes("edit")))
   return (
     <>
       {actions.map((props, idx) => (

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>
@@ -87,8 +90,10 @@ setupAdmin(["list-toolbar"], MuffinListToolbar)
 
 function MuffinListBulkActions() {
   const {
-    list: { actions, remove },
+    actions: baseActions = [],
+    list: { remove },
   } = useMuffinResourceOpts()
+  const actions = baseActions.filter((a) => a.view.includes("bulk"))
   return (
     <>
       {actions.map((props) => (

package/src/MuffinResourceShow.tsx

@@ -39,8 +39,8 @@ export function MuffinShowToolbar() {
 setupAdmin(["show-toolbar"], MuffinShowToolbar)
 
 export function MuffinShowActions() {
-  const { show } = useMuffinResourceOpts()
-  const { actions } = show
+  const { actions: baseActions = [] } = useMuffinResourceOpts()
+  const actions = baseActions.filter((a) => a.view.includes("show"))
   return actions.map((props) => <ActionButton key={props.id} {...props} />)
 }
 

package/src/buttons/ActionButton.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  Form,
   useListContext,
   useRecordContext,
   useResourceContext,
@@ -7,7 +8,8 @@ import {
 } from "react-admin"
 
 import { useMemo, useState } from "react"
-import { useConfirmation } from "../common"
+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,7 +20,7 @@ export type ActionPayloadProps = {
   onHandle: (payload: any) => void
 }
 
-export function ActionButton({ icon, label, title, action, id, confirm }: AdminAction) {
+export function ActionButton({ icon, label, title, action, id, confirm, schema }: AdminAction) {
   const translate = useTranslate()
   const record = useRecordContext()
   const resource = useResourceContext()
@@ -26,28 +28,26 @@ export function ActionButton({ icon, label, title, action, id, confirm }: AdminA
   const { mutate, isPending } = useAction(action)
 
   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 PayloadBuilder =
+    findBuilder(["action", "payload", id, resource]) || (schema && CommonPayload)
+
   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 (
     <>
       <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({ record, payload })
+          else onHandle()
         }}
         disabled={isPending}
       >
@@ -56,8 +56,10 @@ export function ActionButton({ icon, label, title, action, id, confirm }: AdminA
       {PayloadBuilder && (
         <PayloadBuilder
           active={payloadActive}
-          onHandle={payloadResolver}
+          onHandle={onHandle}
           onClose={() => setPayloadActive(false)}
+          title={title || label}
+          schema={schema}
         />
       )}
     </>
@@ -108,3 +110,26 @@ export function BulkActionButton({ label, icon, title, action, id, confirm }: Ad
     </>
   )
 }
+
+export function CommonPayload({ active, onClose, onHandle, schema, title }) {
+  const inputs = buildRA(schema)
+  const translate = useTranslate()
+  return (
+    <AdminModal
+      maxWidth="sm"
+      open={active}
+      onClose={onClose}
+      title={translate(title, { _: title })}
+    >
+      <Form
+        onSubmit={(data) => {
+          onClose()
+          onHandle(data)
+        }}
+      >
+        {inputs}
+        <PayloadButtons onClose={onClose} />
+      </Form>
+    </AdminModal>
+  )
+}

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 }]
@@ -22,7 +23,6 @@ export type AdminShowLink = {
   field?: string
 }
 export type AdminShowProps = {
-  actions: AdminAction[]
   fields: AdminField[]
   links: [string, AdminShowLink][]
   edit?: boolean
@@ -32,10 +32,10 @@ export type AdminResourceProps = {
   name: string
   icon?: string
   label: string
+  actions: AdminAction[]
   create: AdminInput[] | false
   edit:
     | {
-        actions: AdminAction[]
         inputs: AdminInput[]
         remove?: boolean
       }
@@ -43,7 +43,6 @@ export type AdminResourceProps = {
   list: {
     limit: number
     limitMax: number
-    actions: AdminAction[]
     create: boolean
     filters: AdminInput[]
     fields: AdminField[]