@applica-software-guru/react-admin 1.0.32 → 1.0.34

package/src/components/ra-lists/NotificationList/field/NotificationField.jsx

@@ -0,0 +1,80 @@
+import { Box, Typography } from '@mui/material'
+import React, { useCallback, useMemo } from 'react'
+import {
+  useLocaleState,
+  useNotify,
+  useRecordContext,
+  useRedirect,
+  useResourceContext,
+  useTranslate,
+  useUpdate
+} from 'react-admin'
+
+import dayjs from 'dayjs'
+
+const NotificationField = (props) => {
+  const record = useRecordContext(props)
+  const resource = useResourceContext(props)
+  const redirect = useRedirect()
+  const notify = useNotify()
+  const translate = useTranslate()
+  const [locale] = useLocaleState()
+  const readed = useMemo(
+    () =>
+      record?.readed
+        ? dayjs(record?.readed).locale(locale).format('ddd, DD MMM YYYY HH:mm:ss')
+        : false,
+    [record?.readed, locale]
+  )
+
+  const [update] = useUpdate(
+    resource,
+    {
+      id: record?.id,
+      data: {
+        ...record,
+        readed: dayjs().format('YYYY-MM-DD HH:mm:ss')
+      }
+    },
+    {
+      onSuccess: () => {
+        if (record?.resource) {
+          if (record?.resource.startsWith('/')) {
+            redirect(record?.resource)
+          } else {
+            document.location.href = record?.resource
+          }
+        }
+      },
+      onFailure: () => {
+        notify('ra.notification.readed_error', 'warning')
+      }
+    }
+  )
+  const handleUpdate = useCallback(() => update(), [update])
+
+  return (
+    <div onClick={handleUpdate} style={{ cursor: 'pointer' }} role="button" tabIndex={0}>
+      <Typography variant="subtitle1">
+        <Box fontWeight={'bold'}> {record?.title}</Box>
+      </Typography>
+      <Typography
+        variant="body1"
+        sx={{
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          whiteSpace: 'break-spaces'
+        }}
+        dangerouslySetInnerHTML={{ __html: record?.content }}
+      />
+      {readed && (
+        <Typography variant="caption" display="block" sx={{ mt: 1 }} color="textSecondary">
+          {translate('ra.notification.readed', { readed })}
+        </Typography>
+      )}
+    </div>
+  )
+}
+export default NotificationField

package/src/components/ra-lists/NotificationList/field/index.jsx

@@ -0,0 +1 @@
+export { default as NotificationField } from './NotificationField'

package/src/components/ra-lists/NotificationList/index.jsx

@@ -0,0 +1,2 @@
+import NotificationList from './NotificationList'
+export default NotificationList

package/src/components/ra-lists/index.jsx

@@ -0,0 +1,5 @@
+import Datagrid from './Datagrid'
+import Empty from './Empty'
+import List from './List'
+import NotificationList from './NotificationList'
+export { Datagrid, Empty, NotificationList, List }

package/src/components/third-party/SimpleBar.jsx

@@ -0,0 +1,61 @@
+import 'simplebar/dist/simplebar.min.css'
+
+import { BrowserView, MobileView } from 'react-device-detect'
+import { alpha, styled } from '@mui/material/styles'
+
+import { Box } from '@mui/material'
+import PropTypes from 'prop-types'
+import SimpleBar from 'simplebar-react'
+
+// root style
+const RootStyle = styled(BrowserView)({
+  flexGrow: 1,
+  height: '100%',
+  overflow: 'hidden'
+})
+
+// scroll bar wrapper
+const SimpleBarStyle = styled(SimpleBar)(({ theme }) => ({
+  maxHeight: '100%',
+  '& .simplebar-scrollbar': {
+    '&:before': {
+      backgroundColor: alpha(theme.palette.grey[500], 0.48)
+    },
+    '&.simplebar-visible:before': {
+      opacity: 1
+    }
+  },
+  '& .simplebar-track.simplebar-vertical': {
+    width: 10
+  },
+  '& .simplebar-track.simplebar-horizontal .simplebar-scrollbar': {
+    height: 6
+  },
+  '& .simplebar-mask': {
+    zIndex: 'inherit'
+  }
+}))
+
+// ==============================|| SIMPLE SCROLL BAR  ||============================== //
+
+export default function SimpleBarScroll({ children, sx, ...other }) {
+  return (
+    <>
+      <RootStyle>
+        <SimpleBarStyle timeout={500} clickOnTrack={false} sx={sx} {...other}>
+          {children}
+        </SimpleBarStyle>
+      </RootStyle>
+      <MobileView>
+        <Box sx={{ overflowX: 'auto', ...sx }} {...other}>
+          {children}
+        </Box>
+      </MobileView>
+    </>
+  )
+}
+
+SimpleBarScroll.propTypes = {
+  children: PropTypes.node,
+  sx: PropTypes.object
+}

package/src/components/third-party/index.jsx

@@ -0,0 +1,3 @@
+import SimpleBar from './SimpleBar'
+
+export { SimpleBar }

package/src/contexts/AppConfigContext.jsx

@@ -0,0 +1,54 @@
+import React, { createContext, useState } from 'react'
+
+import PropTypes from 'prop-types'
+
+const initialState = {
+  /**
+   * This context is necessary to work with react-admin standard forms when executed
+   * inside a dialog and deeper in another resource handled inside a primary form.
+   *
+   * In this case, when using "EditInDialogButton" or "CreateInDialogButton" components,
+   * the dialog is opened and the form is rendered inside it. If the form has a subform
+   * and needs to know the associated resource.
+   */
+  openDialogs: [],
+}
+
+const AppConfigContext = createContext(initialState)
+
+const AppConfigProvider = ({ children }) => {
+  const [config, setConfig] = useState(initialState)
+  const openDialog = (id, callback) => {
+    setConfig((config) => ({ ...config, openDialogs: [...config.openDialogs, id] }))
+    if (callback) callback()
+  }
+  const closeDialog = (id, callback) => {
+    setConfig((config) => ({
+      ...config,
+      openDialogs: config.openDialogs.filter((modalId) => modalId !== id),
+    }))
+    if (callback) callback()
+  }
+
+  const getCurrentDialog = () =>
+    config.openDialogs.length > 0 ? config.openDialogs[config.openDialogs.length - 1] : null
+
+  return (
+    <AppConfigContext.Provider
+      value={{
+        ...config,
+        openDialog,
+        closeDialog,
+        getCurrentDialog,
+      }}
+    >
+      {children}
+    </AppConfigContext.Provider>
+  )
+}
+
+AppConfigProvider.propTypes = {
+  children: PropTypes.node,
+}
+
+export { AppConfigProvider, AppConfigContext }

package/src/contexts/MenuConfigContext.jsx

@@ -0,0 +1,93 @@
+import MenuPropTypes from './MenuPropTypes'
+import PropTypes from 'prop-types'
+import { createContext } from 'react'
+import { useLocalStorage } from '../hooks'
+
+const initialState = {
+  openItem: ['dashboard'],
+  openComponent: 'buttons',
+  selectedID: null,
+  drawerOpen: false,
+  componentDrawerOpen: true,
+  menuDashboard: {},
+  error: null,
+}
+
+const MenuConfigContext = createContext(initialState)
+
+const MenuConfigProvider = ({ menu: groups, children }) => {
+  const [menu, setMenu] = useLocalStorage('menu-config', { ...initialState })
+
+  const activeItem = (openItem) => {
+    setMenu((menu) => ({
+      ...menu,
+      openItem,
+    }))
+  }
+
+  const activeID = (selectedID) => {
+    setMenu((menu) => ({
+      ...menu,
+      selectedID,
+    }))
+  }
+
+  const activeComponent = (openComponent) => {
+    setMenu((menu) => ({
+      ...menu,
+      openComponent,
+    }))
+  }
+
+  const openDrawer = (drawerOpen) => {
+    setMenu((menu) => ({
+      ...menu,
+      drawerOpen,
+    }))
+  }
+
+  const openComponentDrawer = (componentDrawerOpen) => {
+    setMenu((menu) => ({
+      ...menu,
+      componentDrawerOpen,
+    }))
+  }
+
+  const getMenuSuccess = (menuDashboard) => {
+    setMenu((menu) => ({
+      ...menu,
+      menuDashboard,
+    }))
+  }
+
+  const hasError = (error) => {
+    setMenu((menu) => ({
+      ...menu,
+      error,
+    }))
+  }
+  return (
+    <MenuConfigContext.Provider
+      value={{
+        ...menu,
+        groups,
+        activeItem,
+        activeComponent,
+        openDrawer,
+        openComponentDrawer,
+        activeID,
+        getMenuSuccess,
+        hasError,
+      }}
+    >
+      {children}
+    </MenuConfigContext.Provider>
+  )
+}
+
+MenuConfigProvider.propTypes = {
+  children: PropTypes.node,
+  menu: PropTypes.arrayOf(MenuPropTypes),
+}
+
+export { MenuConfigContext, MenuConfigProvider }

package/src/contexts/MenuPropTypes.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+
+const lazy = (f) => {
+  return function () {
+    return f.apply(this, arguments)
+  }
+}
+
+const MenuPropTypes = PropTypes.shape({
+  id: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['group', 'item', 'collapse']),
+  icon: PropTypes.elementType,
+  url: PropTypes.string,
+  parent: PropTypes.shape(lazy(() => MenuPropTypes)),
+  children: PropTypes.arrayOf(lazy(() => MenuPropTypes)),
+})
+
+export default MenuPropTypes

package/src/contexts/ThemeConfigContext.jsx

@@ -0,0 +1,138 @@
+import PropTypes from 'prop-types'
+import { createContext } from 'react'
+import { useLocalStorage } from '../hooks'
+
+const initialState = {
+  /**
+   * The props used for the theme font-style.
+   * We provide static below options -
+   * `'Inter', sans-serif`
+   * `'Poppins', sans-serif`
+   * `'Roboto', sans-serif`
+   * `'Public Sans', sans-serif` (default)
+   */
+  fontFamily: `'Inter', sans-serif`,
+
+  /**
+   * the props used for menu orientation (diffrent theme layout).
+   * we provide static below options -
+   * 'vertical' (default)
+   * 'horizontal'
+   */
+  menuOrientation: 'vertical',
+  /**
+   * the props used for show mini variant drawer
+   * the mini variant is recommended for apps sections that need quick selection access alongside content.
+   * default - false
+   */
+  miniDrawer: false,
+
+  /**
+   * the props used for theme container.
+   * the container centers your content horizontally. It's the most basic layout element.
+   * default - true which show container
+   * false - will show fluid
+   */
+  container: false,
+  /**
+   * the props used for default theme palette mode
+   * explore the default theme
+   * below theme options -
+   * 'light' (default)
+   * 'dark'
+   */
+  mode: 'light',
+
+  /**
+   * the props used for theme primary color variants
+   * we provide static below options thoe s are already defaine in src/themes/theme -
+   * 'default'
+   * 'theme1'
+   * 'theme2'
+   * 'theme3'
+   * 'theme4'
+   * 'theme5'
+   * 'theme6'
+   * 'theme7'
+   * 'theme8'
+   */
+  presetColor: 'theme4',
+
+  /**
+   * the props used for default theme direction
+   * explore the default theme
+   * below theme options -
+   * 'ltr' (default)
+   * 'rtl'
+   */
+  themeDirection: 'ltr',
+
+  /**
+   * default path to redirect after login.
+   */
+  appDefaultPath: '/',
+  /**
+   * default drawer width.
+   */
+  drawerWidth: 260,
+  /**
+   * number of items to show in horizontal.
+   */
+  horizontalMaxItems: 6,
+  /**
+   * Default spacing for elements
+   */
+  spacing: 2,
+}
+
+const ThemeConfigContext = createContext(initialState)
+
+const isVerticalLayout = (layout) => layout === 'vertical'
+const isHorizontalLayout = (layout) => layout === 'horizontal'
+
+const ThemeConfigProvider = ({ children }) => {
+  const [config, setConfig] = useLocalStorage('theme-config', initialState)
+  const setFontFamily = (fontFamily) => setConfig((config) => ({ ...config, fontFamily }))
+  const setMenuOrientation = (menuOrientation) =>
+    setConfig((config) => ({ ...config, menuOrientation }))
+  const setMiniDrawer = (miniDrawer) => setConfig((config) => ({ ...config, miniDrawer }))
+  const setContainer = (container) => setConfig((config) => ({ ...config, container }))
+  const setMode = (mode) => setConfig((config) => ({ ...config, mode }))
+  const setPresetColor = (presetColor) => setConfig((config) => ({ ...config, presetColor }))
+  const setThemeDirection = (themeDirection) =>
+    setConfig((config) => ({ ...config, themeDirection }))
+  const setAppDefaultPath = (appDefaultPath) =>
+    setConfig((config) => ({ ...config, appDefaultPath }))
+  const setDrawerWidth = (drawerWidth) => setConfig((config) => ({ ...config, drawerWidth }))
+  const setHorizontalMaxItems = (horizontalMaxItems) =>
+    setConfig((config) => ({ ...config, horizontalMaxItems }))
+  return (
+    <ThemeConfigContext.Provider
+      value={{
+        ...config,
+
+        setFontFamily,
+        setMenuOrientation,
+        setMiniDrawer,
+        setContainer,
+        setMode,
+        setPresetColor,
+        setThemeDirection,
+        setAppDefaultPath,
+        setDrawerWidth,
+        setHorizontalMaxItems,
+
+        isVerticalLayout,
+        isHorizontalLayout,
+      }}
+    >
+      {children}
+    </ThemeConfigContext.Provider>
+  )
+}
+
+ThemeConfigProvider.propTypes = {
+  children: PropTypes.node,
+}
+
+export { ThemeConfigProvider, ThemeConfigContext }

package/src/contexts/index.jsx

@@ -0,0 +1,5 @@
+import MenuPropTypes from './MenuPropTypes'
+export { MenuPropTypes }
+export * from './ThemeConfigContext'
+export * from './MenuConfigContext'
+export * from './AppConfigContext'

package/src/dev/index.jsx

@@ -0,0 +1,2 @@
+import useCliErrorCatcher, { CatchResult } from './useCliErrorCatcher'
+export { useCliErrorCatcher, CatchResult }

package/src/dev/useCliErrorCatcher.jsx

@@ -0,0 +1,86 @@
+/* eslint-disable no-console */
+import * as React from 'react'
+
+class CatchResult {
+  constructor({ catch: catchErr, display: displayErr, log: logErr, error }) {
+    this.catch = catchErr
+    this.display = displayErr
+    this.log = logErr
+    this.error = error
+  }
+
+  isCatched() {
+    return this.catch
+  }
+
+  logError() {
+    return this.log
+  }
+
+  displayError() {
+    return this.display
+  }
+}
+
+const putError = ({ apiUrl, endpoint, locale, message, bodyBuilder }) =>
+  fetch(`${apiUrl}${endpoint}`, {
+    method: 'PUT',
+    headers: new Headers({
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    }),
+    body: JSON.stringify(bodyBuilder(locale, message)),
+  })
+
+const useCliErrorCatcher = ({
+  enabled = true,
+  apiUrl,
+  endpoint = '/ui-errors/put',
+  loading,
+  catcherFn = (error) => new CatchResult({ catch: error != undefined, display: false, log: false }),
+  bodyBuilder = (locale, message) => ({
+    code: locale,
+    message: {
+      code: message,
+      text: message,
+    },
+  }),
+}) => {
+  React.useMemo(() => {
+    if (loading) {
+      return
+    }
+    if (!enabled) {
+      return
+    }
+
+    const consoleError = console.error
+
+    console.error = function (error, ...args) {
+      if (!error || typeof error !== 'string') {
+        consoleError.apply(console, arguments)
+        return
+      }
+      const message = error.replace(/%s/g, () => args.shift())
+      const catchResult = catcherFn(message)
+      if (!catchResult.isCatched()) {
+        consoleError.apply(console, arguments)
+        return
+      }
+
+      if (catchResult.logError()) {
+        putError({ apiUrl, endpoint, message, bodyBuilder })
+      }
+
+      if (catchResult.displayError()) {
+        consoleError.apply(console, arguments)
+      } else {
+        console.debug.apply(console, arguments)
+      }
+    }
+  }, [apiUrl, loading, bodyBuilder, endpoint, catcherFn, enabled])
+  return true
+}
+export { CatchResult }
+
+export default useCliErrorCatcher

package/src/hooks/index.jsx

@@ -0,0 +1,16 @@
+import useAppConfig from './useAppConfig'
+import useBreadcrumbs from './useBreadcrumbs'
+import useLocalStorage from './useLocalStorage'
+import useMenu from './useMenu'
+import useMenuConfig from './useMenuConfig'
+import useResourceTitle from './useResourceTitle'
+import useThemeConfig from './useThemeConfig'
+export {
+  useAppConfig,
+  useMenu,
+  useBreadcrumbs,
+  useLocalStorage,
+  useThemeConfig,
+  useResourceTitle,
+  useMenuConfig,
+}

package/src/hooks/useAppConfig.jsx

@@ -0,0 +1,6 @@
+import { AppConfigContext } from '../contexts/AppConfigContext'
+import { useContext } from 'react'
+
+const useAppConfig = () => useContext(AppConfigContext)
+
+export default useAppConfig

package/src/hooks/useBreadcrumbs.jsx

@@ -0,0 +1,68 @@
+import { cloneDeep } from 'lodash'
+import { useLocation } from 'react-router-dom'
+import { useMemo } from 'react'
+import useMenu from './useMenu'
+import { useTranslate } from 'react-admin'
+
+const useBreadcrumbs = () => {
+  const translate = useTranslate()
+  const { isLoading, menu: _menu, findInMenu } = useMenu()
+  const { pathname } = useLocation()
+
+  return useMemo(() => {
+    const pathArgs = pathname.split('/').filter((x) => x)
+    let menu = cloneDeep(_menu)
+    let id = pathname
+    let menuItem = findInMenu(menu, pathname)
+    if (!menuItem) {
+      menuItem = findInMenu(menu, pathArgs[pathArgs.length - 1])
+      id = menuItem ? menuItem.id : id
+    }
+    if (!menuItem) {
+      for (let i = pathArgs.length; i >= 0; i--) {
+        let path = pathArgs.slice(0, i).join('/')
+        menuItem = findInMenu(menu, path)
+        if (menuItem) {
+          id = menuItem.id
+          break
+        }
+      }
+    }
+
+    const urlParts = menuItem?.url?.split('/')
+    if (pathArgs.length >= urlParts?.length) {
+      const data = pathArgs[pathArgs.length - 1]
+      if (menuItem) {
+        const context = data === 'create' || pathname === menuItem.url ? 'create' : 'edit'
+        const title = `resources.${id}.breadcrumbs.${context}`
+        const child = {
+          id: `${id}-${context}`,
+          type: 'item',
+          title: translate(title, { _: translate(title, { _: title }) }),
+          url: pathname,
+          breadcrumbs: true,
+          parent: menuItem
+        }
+        menuItem.type = 'collapse'
+        menuItem.breadcrumbs = true
+        menuItem.children = menuItem.children || []
+        menuItem.children.push(child)
+        menuItem = child
+      }
+    }
+
+    let breadcrumbs = []
+    if (menuItem) {
+      let current = { ...menuItem, last: true }
+      while (current) {
+        breadcrumbs.push(current)
+        current = current.parent
+      }
+      breadcrumbs = breadcrumbs.reverse()
+    }
+
+    return { isLoading, navigation: { items: menu }, breadcrumbs }
+  }, [isLoading, pathname, _menu, findInMenu, translate])
+}
+
+export default useBreadcrumbs

package/src/hooks/useLocalStorage.jsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+
+export default function useLocalStorage(key, defaultValue) {
+  const [value, setValue] = useState(() => {
+    const storedValue = typeof window !== 'undefined' ? localStorage.getItem(key) : null
+    return storedValue === null ? defaultValue : JSON.parse(storedValue)
+  })
+
+  useEffect(() => {
+    const listener = (e) => {
+      if (typeof window !== 'undefined' && e.storageArea === localStorage && e.key === key) {
+        setValue(e.newValue ? JSON.parse(e.newValue) : e.newValue)
+      }
+    }
+    window.addEventListener('storage', listener)
+
+    return () => {
+      window.removeEventListener('storage', listener)
+    }
+  }, [key, defaultValue])
+
+  const setValueInLocalStorage = (newValue) => {
+    setValue((currentValue) => {
+      const result = typeof newValue === 'function' ? newValue(currentValue) : newValue
+      if (typeof window !== 'undefined') localStorage.setItem(key, JSON.stringify(result))
+      return result
+    })
+  }
+
+  return [value, setValueInLocalStorage]
+}