muffin-admin 8.5.5 → 9.0.0

package/dist/utils.d.ts

@@ -25,3 +25,4 @@ export declare function makeRequest(url: string, params?: APIParams): Promise<{
 export declare function findIcon(icon?: string): any;
 export declare function buildIcon(icon?: string): import("react/jsx-runtime").JSX.Element;
 export declare function deepMerge(target: any, ...sources: any[]): any;
+export declare function prepareFilters(filter: any): string;

package/dist/utils.js

@@ -76,3 +76,9 @@ export function deepMerge(target, ...sources) {
     }
     return deepMerge(target, ...sources);
 }
+export function prepareFilters(filter) {
+    return JSON.stringify(Object.entries(filter).reduce((acc, [key, value]) => {
+        acc[key] = Array.isArray(value) ? { $in: value } : value;
+        return acc;
+    }, {}));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "8.5.5",
+  "version": "9.0.0",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",
@@ -23,10 +23,12 @@
   },
   "homepage": "https://github.com/klen/muffin-admin#readme",
   "dependencies": {
+    "date-fns": "^4.1.0",
     "js-cookie": "^3.0.5",
     "ra-language-russian": "^4.14.2",
     "react": "^18.3.1",
     "react-admin": "^5.4.0",
+    "react-datepicker": "^8.1.0",
     "react-dom": "^18.3.1",
     "validator": "^13.12.0"
   },
@@ -38,6 +40,7 @@
     "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/parser": "^7.12.0",
+    "css-loader": "^7.1.2",
     "dotenv": "^16.4.5",
     "eslint": "^8",
     "eslint-config-prettier": "^9.1.0",
@@ -47,6 +50,7 @@
     "husky": "^9.0.11",
     "prettier": "^3.2",
     "prettier-plugin-organize-imports": "^3.2",
+    "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0",

package/src/MuffinAdmin.tsx

@@ -1,6 +1,7 @@
 import IconButton from "@mui/material/IconButton"
 import SvgIcon from "@mui/material/SvgIcon"
 import Tooltip from "@mui/material/Tooltip"
+
 import Typography from "@mui/material/Typography"
 import {
   AdminContext,
@@ -27,11 +28,11 @@ export function MuffinAdmin(props: AdminProps) {
   const muffinI18nProvider = buildProvider(
     backendLocales
       ? Object.fromEntries(
-          Object.entries(muffinTranslations).map(([locale, messages]) => [
-            locale,
-            deepMerge({}, messages, backendLocales[locale], buildAdmin(["locale", locale]) || {}),
-          ])
-        )
+        Object.entries(muffinTranslations).map(([locale, messages]) => [
+          locale,
+          deepMerge({}, messages, backendLocales[locale], buildAdmin(["locale", locale]) || {}),
+        ])
+      )
       : muffinTranslations
   )
 

package/src/buildRA.tsx

@@ -36,7 +36,8 @@ import {
 } from "react-admin"
 
 import { AvatarField, CopyField, EditableBooleanField, FKField, JsonField } from "./fields"
-import { FilterInput, FKInput, JsonInput, TimestampInput } from "./inputs"
+import { DateRangeFilter, Filter } from "./filters"
+import { FKInput, JsonInput, TimestampInput } from "./inputs"
 
 const UI: Record<string, JSX.ElementType> = {
   // Fields
@@ -68,7 +69,6 @@ const UI: Record<string, JSX.ElementType> = {
   BooleanInput,
   CheckboxGroupInput,
   DateInput,
-  FilterInput,
   DateTimeInput,
   FKInput,
   FileInput,
@@ -84,6 +84,10 @@ const UI: Record<string, JSX.ElementType> = {
   SelectInput,
   TextInput,
   TimestampInput,
+
+  // Filters
+  Filter,
+  DateRangeFilter,
 }
 
 export function buildRAComponent(name: string, props: any) {

package/src/buttons/ActionButton.tsx

@@ -17,7 +17,7 @@ import { HelpLink } from "../common/HelpLink"
 import { useMuffinAdminOpts } from "../hooks"
 import { useAction } from "../hooks/useAction"
 import { AdminAction, AdminPayloadProps } from "../types"
-import { buildIcon, findBuilder, requestHeaders } from "../utils"
+import { buildIcon, findBuilder, prepareFilters, requestHeaders } from "../utils"
 
 export type ActionPayloadProps = {
   active: boolean
@@ -38,9 +38,9 @@ export function ActionButton({ paths, confirm, file, ...props }: AdminAction) {
   const confirmMessage =
     typeof confirm === "string" ? translate(confirm) : "Do you confirm this action?"
 
-  const onHandle = async (payload?) => {
+  const onHandle = async (payload?: any) => {
     const process = confirm ? await confirmation.confirm({ message: confirmMessage }) : true
-    if (process) await mutate({ record, payload })
+    if (process) mutate({ record, payload })
   }
 
   return <ActionButtonBase {...props} isPending={isPending} onHandle={onHandle} />
@@ -200,7 +200,7 @@ function FileButton({
   if (record) url = url.replace("{id}", record.id as string)
   const authorization = requestHeaders["Authorization"]
   if (authorization) url += `&t=${authorization}`
-  if (Object.keys(filterValues).length) url += `&where=${JSON.stringify(filterValues)}`
+  if (Object.keys(filterValues).length) url += `&where=${prepareFilters(filterValues)}`
 
   return (
     <Button href={url} label={label} component={Link}>

package/src/dataprovider.ts

@@ -1,5 +1,5 @@
 import { TID } from "./types"
-import { APIParams, makeRequest, setupAdmin } from "./utils"
+import { APIParams, makeRequest, prepareFilters, setupAdmin } from "./utils"
 
 export function MuffinDataprovider(apiUrl: string) {
   async function request(url: string, options?: APIParams) {
@@ -13,14 +13,7 @@ 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(
-          Object.entries(filter).reduce((acc, [key, value]) => {
-            acc[key] = Array.isArray(value) ? { $in: value } : value
-            return acc
-          }, {})
-        )
-      }
+      if (filter) query.where = prepareFilters(filter)
       if (pagination) {
         const { page, perPage: limit } = pagination
         query.limit = limit

package/src/filters/DateRangeFilter.tsx

@@ -0,0 +1,17 @@
+import { InputProps, useInput } from "react-admin"
+import { DateRangeInput } from "../inputs/DateRangeInput"
+
+export function DateRangeFilter(props: InputProps) {
+  const { field } = useInput(props)
+
+  const onChange = (dates: [Date, Date]) => {
+    field.onChange({
+      $between: dates.map((d) => d?.toISOString() || null),
+    })
+  }
+  let filterValue = field.value.$between ?? [null, null]
+  if (!Array.isArray(filterValue)) filterValue = [null, null]
+  const value = filterValue.map((d: string) => (d ? new Date(d) : d))
+
+  return <DateRangeInput value={value} onChange={onChange} />
+}

package/src/{inputs/FilterInput.tsx → filters/Filter.tsx}

@@ -15,7 +15,7 @@ const OPERATORS = {
   $le: "≤",
 }
 
-export function FilterInput({ type = "text", ...props }: any) {
+export function Filter({ type = "text", ...props }: any) {
   const { field } = useInput({
     format: (value: any) => (value ? value[Object.keys(value)[0]] : ""),
     ...props,

package/src/filters/index.ts

@@ -0,0 +1,2 @@
+export * from "./DateRangeFilter"
+export * from "./Filter"

package/src/i18n/ru.ts

@@ -9,4 +9,6 @@ const muffinRussianMessages = {
   },
 } as unknown as TranslationMessages
 
+muffinRussianMessages.ra.action.edit = "Изменить"
+
 export default muffinRussianMessages

package/src/index.tsx

@@ -36,4 +36,4 @@ export async function initAdmin(prefix = "", containerId: string = "root") {
   )
 }
 
-export const VERSION = "8.5.5"
+export const VERSION = "9.0.0"

package/src/inputs/DateRangeInput.tsx

@@ -0,0 +1,29 @@
+import TextField from "@mui/material/TextField"
+import { enGB, ru } from "date-fns/locale"
+import { useLocale } from "react-admin"
+import DatePicker, { registerLocale } from "react-datepicker"
+import "react-datepicker/dist/react-datepicker.css"
+
+registerLocale("ru", ru)
+registerLocale("en", enGB)
+
+type TProps = {
+  value: [Date, Date]
+  onChange: (value: [Date, Date]) => void
+}
+
+export function DateRangeInput({ value, onChange }: TProps) {
+  const [startDate, endDate] = value
+  const locale = useLocale()
+  return (
+    <DatePicker
+      withPortal
+      locale={locale}
+      selectsRange
+      endDate={endDate}
+      onChange={onChange}
+      startDate={startDate}
+      customInput={<TextField variant="outlined" />}
+    />
+  )
+}

package/src/inputs/index.ts

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

package/src/utils.tsx

@@ -86,3 +86,12 @@ export function deepMerge(target: any, ...sources: any[]): any {
   }
   return deepMerge(target, ...sources)
 }
+
+export function prepareFilters(filter: any) {
+  return JSON.stringify(
+    Object.entries(filter).reduce((acc, [key, value]) => {
+      acc[key] = Array.isArray(value) ? { $in: value } : value
+      return acc
+    }, {})
+  )
+}

package/dist/inputs/FilterInput.d.ts

@@ -1 +0,0 @@
-export declare function FilterInput({ type, ...props }: any): import("react/jsx-runtime").JSX.Element;