muffin-admin 1.36.4 → 1.36.6

package/src/fields/FKField.jsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { ReferenceField, TextField } from "react-admin"
+
+const FKField = ({ refSource, refID, link, reference, source, ...props }) => {
+  return (
+    <ReferenceField
+      link={link || "show"}
+      reference={reference}
+      source={source}
+      {...props}
+    >
+      <>
+        <TextField source={refSource} />
+        {" (#"}
+        <TextField source={refID || "id"} />
+        {")"}
+      </>
+    </ReferenceField>
+  )
+}
+
+FKField.displayName = "FKField"
+FKField.defaultProps = {
+  addLabel: true,
+}
+
+export default FKField

package/src/fields/JsonField.jsx

@@ -0,0 +1,26 @@
+import get from "lodash/get"
+
+import React, { useState } from "react"
+import { Button, FunctionField, useRecordContext } from "react-admin"
+
+export default function JsonField({ label, source }) {
+  const [expand, setExpand] = useState(false)
+  const record = useRecordContext()
+  const src = JSON.stringify(get(record, source), null, 2)
+  const retval = (
+    <div>
+      <p></p>
+      {label}
+      <Button
+        variant="contained"
+        color="primary"
+        size="small"
+        label={expand ? "colapse" : "expand"}
+        onClick={() => setExpand(!expand)}
+      />
+      <p>{expand && <pre>{src}</pre>}</p>
+    </div>
+  )
+
+  return <FunctionField render={() => retval} />
+}

package/src/hooks/useAction.js

@@ -0,0 +1,9 @@
+import { useDataProvider } from "react-admin"
+import { useMutation } from "react-query"
+
+export default function useAction(resource, action) {
+  const dataProvider = useDataProvider()
+  return useMutation((params) =>
+    dataProvider.runAction(resource, action, params)
+  )
+}

package/src/index.js

@@ -0,0 +1,14 @@
+import { createRoot } from "react-dom/client"
+
+import "./admin"
+import { processAdmin } from "./utils"
+
+export * from "./utils"
+
+export async function initAdmin(prefix = "") {
+  const response = await fetch(`${prefix}/ra.json`)
+  const props = await response.json()
+  const container = document.getElementById("root")
+  const root = createRoot(container)
+  root.render(processAdmin("admin", props))
+}

package/src/inputs/FKInput.jsx

@@ -0,0 +1,41 @@
+import React from "react"
+import { ReferenceInput, AutocompleteInput } from "react-admin"
+
+const FKInput = ({
+  refProp,
+  refSource,
+  fullWidth,
+  reference,
+  source,
+  ...props
+}) => {
+  let filterToQuery = (search) => {
+    let filters = {}
+    filters[refProp] = search
+    return filters
+  }
+
+  refSource = refSource || "id"
+
+  let renderText = (record) => {
+    let pk = record[refSource]
+    return (pk && `${record[refProp]} (#${pk})`) || ""
+  }
+
+  return (
+    <ReferenceInput
+      reference={reference}
+      source={source}
+      filterToQuery={filterToQuery}
+      {...props}
+    >
+      <AutocompleteInput
+        source={refSource}
+        optionText={renderText}
+        fullWidth={fullWidth}
+      />
+    </ReferenceInput>
+  )
+}
+
+export default FKInput

package/src/inputs/JsonInput.jsx

@@ -0,0 +1,62 @@
+import React from "react"
+import { TextInput } from "react-admin"
+import isJSON from "validator/lib/isJSON"
+
+const DEFAULT_ERRORTEXT = "Invalid JSON"
+
+const parseFunction = (json) => {
+  let retval = json
+  try {
+    retval = JSON.parse(json)
+  } finally {
+    return retval
+  }
+}
+
+/**
+ *
+ * `JsonInput` validates if the entered value is JSON or not. If entered value is not a invalid JSON, `JsonInput` will throw an error.
+ * Default error message is: `Invalid JSON` and can be overridden using `errortext` prop.
+ *
+ * @example
+ * <JsonInput source='config' label='JSON Config' errortext='Enter a valid JSON'/>
+ *
+ * or use translate function:
+ *
+ * @example
+ * <JsonInput source='config' label={translate('resources.resource_name.fields.config')} errortext={translate('myroot.validate.json')}/>
+ *
+ * By default, `JsonInput` parses and returns the entered string as object. Instead, to send string directly, please pass `parse` prop as `false`
+ *
+ * @example
+ * <JsonInput source='config' label='JSON Config' parse={false}/>
+ */
+export default function JsonInput(props) {
+  const {
+    validate = [],
+    errortext = DEFAULT_ERRORTEXT,
+    multiline = true,
+    parse = true,
+    ...rest
+  } = props
+  // const errorobj = { message: errortext }
+
+  const validateJSON = (value) => {
+    if (!value || typeof value === "object") return undefined
+    return isJSON(value) ? undefined : errortext
+  }
+  validate.push(validateJSON)
+  rest.validate = validate
+
+  const formatJSON = (json) => {
+    let retval = json
+    if (retval && typeof retval === "object")
+      retval = JSON.stringify(retval, null, 2)
+    return retval
+  }
+  rest.format = formatJSON
+  //
+  if (parse) rest.parse = parseFunction
+  if (multiline) rest.multiline = true
+  return <TextInput {...rest} />
+}

package/src/resources.jsx

@@ -0,0 +1,36 @@
+import React from "react"
+
+import { Resource } from "react-admin"
+import * as icons from "@mui/icons-material"
+
+import { checkParams, processAdmin, setupAdmin } from "./utils"
+import "./views/list"
+import "./views/show"
+import "./views/edit"
+import "./views/create"
+
+// Initialize Resources Components
+setupAdmin("resources", (resources) =>
+  resources.map((res) => processAdmin("resource", res, res.name))
+)
+
+// Initialize a resource's component
+setupAdmin(
+  "resource",
+  checkParams((props, res) => {
+    let { create, edit, icon, list, name, show, ...resProps } = props
+
+    return (
+      <Resource
+        key={name}
+        name={name}
+        icon={icons[icon]}
+        create={processAdmin("create", create, res)}
+        edit={processAdmin("edit", edit, res)}
+        list={processAdmin("list", list, res)}
+        show={processAdmin("show", show, res)}
+        {...resProps}
+      />
+    )
+  })
+)

package/src/ui.jsx

@@ -0,0 +1,107 @@
+import React from "react"
+
+import { required } from "react-admin"
+import {
+  BooleanField,
+  ChipField,
+  DateField,
+  EmailField,
+  ImageField,
+  FileField,
+  NumberField,
+  RichTextField,
+  TextField,
+  UrlField,
+  SelectField,
+  ArrayField,
+  ReferenceField,
+  ReferenceManyField,
+  ReferenceArrayField,
+} from "react-admin"
+import {
+  BooleanInput,
+  NullableBooleanInput,
+  DateInput,
+  DateTimeInput,
+  ImageInput,
+  FileInput,
+  NumberInput,
+  PasswordInput,
+  TextInput,
+  AutocompleteInput,
+  RadioButtonGroupInput,
+  SelectInput,
+  ArrayInput,
+  AutocompleteArrayInput,
+  CheckboxGroupInput,
+  ReferenceArrayInput,
+  ReferenceInput,
+} from "react-admin"
+
+import AvatarField from "./fields/AvatarField"
+import FKField from "./fields/FKField"
+import FKInput from "./inputs/FKInput"
+import JsonField from "./fields/JsonField"
+import JsonInput from "./inputs/JsonInput"
+
+const ui = {
+  // Fields
+  BooleanField,
+  ChipField,
+  DateField,
+  EmailField,
+  ImageField,
+  FileField,
+  NumberField,
+  RichTextField,
+  TextField,
+  UrlField,
+  SelectField,
+  ArrayField,
+  ReferenceField,
+  ReferenceManyField,
+  ReferenceArrayField,
+  AvatarField,
+  JsonField,
+  FKField,
+
+  // Inputs
+  BooleanInput,
+  NullableBooleanInput,
+  DateInput,
+  DateTimeInput,
+  ImageInput,
+  FileInput,
+  NumberInput,
+  PasswordInput,
+  TextInput,
+  AutocompleteInput,
+  RadioButtonGroupInput,
+  SelectInput,
+  ArrayInput,
+  AutocompleteArrayInput,
+  CheckboxGroupInput,
+  ReferenceArrayInput,
+  ReferenceInput,
+  JsonInput,
+  FKInput,
+}
+
+const initRAItems = (itemsProps) =>
+  itemsProps.map((item) => {
+    const Item = ui[item[0]],
+      props = { ...item[1] }
+
+    if (props.required) {
+      props.validate = required()
+      delete props.required
+    }
+
+    props.fullWidth = props.fullWidth ?? true
+
+    if (props.children) props.children = initRAItems(props.children)[0]
+
+    return <Item key={props.source} {...props} />
+  })
+
+export default initRAItems

package/src/utils.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-console */
+
+import { isValidElement } from "react"
+import { fetchUtils } from "ra-core"
+import { stringify } from "query-string"
+
+const parts = {}
+
+export const setupAdmin = (part, gen) => (parts[part] = gen)
+
+export const checkParams = (fn) => (props, res) => {
+  if (!props || isValidElement(props)) return props
+  return fn(props, res)
+}
+
+export const processAdmin = (type, props, res) => {
+  if (process.env.NODE_ENV == "development")
+    console.log(`${type}${res ? "-" + res : ""}`, props)
+
+  if (parts[`${type}-${res}`]) return parts[`${type}-${res}`](props, res)
+  if (parts[type]) return parts[type](props, res)
+}
+
+export const requestHeaders = {}
+
+export const makeRequest = (url, params) => {
+  let { data, query, ...opts } = params || {}
+
+  if (data) opts.body = JSON.stringify(data)
+  if (query) url = `${url}?${stringify(query)}`
+
+  opts = {
+    ...opts,
+    headers: new Headers({ ...requestHeaders, ...opts.headers }),
+  }
+
+  return fetchUtils.fetchJson(url, opts)
+}

package/src/views/create.jsx

@@ -0,0 +1,30 @@
+import React from "react"
+
+import { Create, SimpleForm, TopToolbar, ListButton } from "react-admin"
+
+import initRAItems from "../ui"
+import { checkParams, processAdmin, setupAdmin } from "../utils"
+
+// Initialize a create component
+setupAdmin(
+  "create",
+  checkParams(
+    (inputs, res) =>
+      function MACreate(props) {
+        const Actions = (
+          <TopToolbar>
+            <ListButton />
+          </TopToolbar>
+        )
+
+        return (
+          <Create actions={Actions} {...props}>
+            <SimpleForm>
+              {processAdmin("create-inputs", inputs, res)}
+            </SimpleForm>
+          </Create>
+        )
+      }
+  )
+)
+setupAdmin("create-inputs", initRAItems)

package/src/views/edit.jsx

@@ -0,0 +1,41 @@
+import React from "react"
+
+import {
+  Edit,
+  ListButton,
+  ShowButton,
+  SimpleForm,
+  TopToolbar,
+} from "react-admin"
+
+import initRAItems from "../ui"
+import { checkParams, processAdmin, setupAdmin } from "../utils"
+import { ActionButton } from "../buttons/ActionButton"
+
+// Initialize an edit component
+setupAdmin(
+  "edit",
+  checkParams(
+    ({ actions, inputs }, res) =>
+      function MAEdit(props) {
+        const Actions = ({ basePath, resource, ...baseProps }) => (
+          <TopToolbar>
+            {actions.map((props, idx) => {
+              let aProps = { resource, basePath, ...baseProps, ...props }
+              return <ActionButton key={idx} {...aProps} />
+            })}
+            <ListButton />
+            <ShowButton />
+          </TopToolbar>
+        )
+
+        return (
+          <Edit actions={<Actions />} {...props}>
+            <SimpleForm>{processAdmin("edit-inputs", inputs, res)}</SimpleForm>
+          </Edit>
+        )
+      }
+  )
+)
+
+setupAdmin("edit-inputs", initRAItems)

package/src/views/list.jsx

@@ -0,0 +1,86 @@
+import React from "react"
+
+import {
+  BulkDeleteButton,
+  Datagrid,
+  EditButton,
+  Filter,
+  List,
+  Pagination,
+} from "react-admin"
+import uniq from "lodash/uniq"
+import sortBy from "lodash/sortBy"
+
+import initRAItems from "../ui"
+import { checkParams, processAdmin, setupAdmin } from "../utils"
+import { BulkActionButton } from "../buttons/ActionButton"
+
+const defaultPagination = <Pagination rowsPerPageOptions={[10, 25, 50, 100]} />
+
+// Initiliaze a list component
+setupAdmin(
+  "list",
+  checkParams((props, res) => {
+    let {
+      children,
+      filters,
+      edit,
+      pagination,
+      show,
+      limit,
+      limitMax,
+      actions,
+      ...listProps
+    } = props
+
+    children = processAdmin("list-fields", children, res)
+    if (edit) children.push(<EditButton key="edit-button" />)
+
+    pagination = pagination || (
+      <Pagination
+        rowsPerPageOptions={sortBy(uniq([10, 25, 50, 100, limit, limitMax]))}
+      />
+    )
+
+    return function MAList(props) {
+      let Filters = (props) => (
+        <Filter {...props}>{processAdmin("list-filters", filters, res)}</Filter>
+      )
+      let Actions = processAdmin("list-bulkActions", actions)
+
+      props = { ...props, ...listProps }
+      return (
+        <List
+          filters={<Filters />}
+          bulkActionButtons={<Actions />}
+          perPage={limit}
+          pagination={pagination || defaultPagination}
+          {...props}
+        >
+          <Datagrid rowClick={show ? "show" : null}>{children}</Datagrid>
+        </List>
+      )
+    }
+  })
+)
+
+setupAdmin(
+  "list-bulkActions",
+  (actions) =>
+    function MABulkActions(props) {
+      let buttons = actions.map((action, idx) => {
+        let aProps = { ...action, ...props }
+        return <BulkActionButton key={idx} {...aProps} />
+      })
+
+      return (
+        <>
+          {buttons}
+          <BulkDeleteButton {...props} />
+        </>
+      )
+    }
+)
+
+setupAdmin("list-filters", initRAItems)
+setupAdmin("list-fields", initRAItems)

package/src/views/show.jsx

@@ -0,0 +1,42 @@
+import React from "react"
+
+import {
+  ListButton,
+  EditButton,
+  Show,
+  SimpleShowLayout,
+  TopToolbar,
+} from "react-admin"
+
+import initRAItems from "../ui"
+import { checkParams, processAdmin, setupAdmin } from "../utils"
+import { ActionButton } from "../buttons/ActionButton"
+
+// Initiliaze a show component
+setupAdmin(
+  "show",
+  checkParams(
+    ({ actions, fields }, resource) =>
+      function MAShow(props) {
+        const Actions = () => (
+          <TopToolbar>
+            {actions.map((props, idx) => {
+              return <ActionButton key={idx} resource={resource} {...props} />
+            })}
+            <ListButton />
+            <EditButton />
+          </TopToolbar>
+        )
+
+        return (
+          <Show actions={<Actions />} {...props}>
+            <SimpleShowLayout>
+              {processAdmin("show-fields", fields, resource)}
+            </SimpleShowLayout>
+          </Show>
+        )
+      }
+  )
+)
+
+setupAdmin("show-fields", initRAItems)

package/src/web.js

@@ -0,0 +1,3 @@
+import { initAdmin } from "."
+
+global.initAdmin = initAdmin

package/.eslintrc.json

@@ -1,44 +0,0 @@
-{
-  "root": true,
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "prettier"
-  ],
-  "parser": "@babel/eslint-parser",
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true,
-      "experimentalObjectRestSpread": true
-    },
-    "ecmaVersion": 2020,
-    "sourceType": "module",
-    "babelOptions": {
-      "presets": [
-        "@babel/preset-react"
-      ],
-      "rootMode": "upward"
-    }
-  },
-  "plugins": [
-    "prettier",
-    "react"
-  ],
-  "env": {
-    "browser": true,
-    "es6": true,
-    "jest": true,
-    "node": true
-  },
-  "rules": {
-    "no-console": "warn",
-    "no-debugger": "warn",
-    "prettier/prettier": "warn",
-    "react/prop-types": "off"
-  }
-}

package/Makefile

@@ -1,18 +0,0 @@
-all: node_modules
-	$(CURDIR)/node_modules/.bin/webpack
-
-node_modules: package.json
-	npm install
-	touch node_modules
-
-npm: node_modules
-	$(CURDIR)/node_modules/.bin/babel src --out-dir dist
-
-pypi:
-	$(CURDIR)/node_modules/.bin/webpack
-
-watch: node_modules
-	$(CURDIR)/node_modules/.bin/webpack --watch
-
-dev: node_modules
-	NODE_ENV=development $(CURDIR)/node_modules/.bin/webpack serve

package/jsconfig.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "noImplicitAny": false,
-    "target": "ESNext",
-    "moduleResolution": "node",
-    "checkJs": true,
-    "jsx": "react-jsx"
-  }
-}

package/webpack.config.js

@@ -1,45 +0,0 @@
-const path = require("path"),
-  webpack = require("webpack"),
-  mode = process.env.NODE_ENV
-
-module.exports = {
-  entry: "./src/web",
-
-  output: {
-    filename: "main.js",
-    path: path.resolve(__dirname, "../muffin_admin"),
-    publicPath: "/admin",
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        use: {
-          loader: "babel-loader",
-        },
-      },
-    ],
-  },
-
-  plugins: [new webpack.EnvironmentPlugin({ NODE_ENV: "production" })],
-
-  mode: mode || "production",
-  devtool: mode == "development" && "inline-source-map",
-
-  resolve: {
-    extensions: [".jsx", ".js"],
-  },
-
-  devServer: {
-    hot: true,
-    open: true,
-    proxy: [
-      {
-        context: ["!*.js"],
-        target: "http://localhost:5555",
-      },
-    ],
-  },
-}