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

package/src/components/ra-inputs/ReferenceManyInput.jsx

@@ -0,0 +1,44 @@
+import { ListToolbar, Pagination, ResourceContextProvider } from 'react-admin'
+
+import { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { ReferenceManyField } from '../ra-fields'
+
+const ReferenceManyInput = ({ reference, target, children, filters, actions, ...props }) => {
+  return (
+    <ResourceContextProvider value={reference}>
+      <ReferenceManyField
+        perPage={5}
+        pagination={<Pagination />}
+        {...props}
+        reference={reference}
+        target={target}
+      >
+        <Fragment>
+          <ListToolbar filters={filters} actions={actions} />
+          {children}
+        </Fragment>
+      </ReferenceManyField>
+    </ResourceContextProvider>
+  )
+}
+
+ReferenceManyInput.propTypes = {
+  ...ReferenceManyField.propTypes,
+  children: PropTypes.node.isRequired,
+  reference: PropTypes.string.isRequired,
+  target: PropTypes.string.isRequired,
+  filters: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.func,
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
+  actions: PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.element]),
+}
+
+ReferenceManyInput.defaultProps = {
+  ...ReferenceManyField.defaultProps,
+}
+
+export default ReferenceManyInput

package/src/components/ra-inputs/SearchInput.jsx

@@ -0,0 +1,14 @@
+import { SearchInput as RaSearchInput } from 'react-admin'
+import { styled } from '@mui/material/styles'
+
+/**
+ * @return {React.Component}
+ */
+const ApplicaStyledSearchInput = styled(RaSearchInput, {
+  name: 'RaApplicaSearchInput',
+  slot: 'root',
+})(() => ({}))
+
+const SearchInput = (props) => <ApplicaStyledSearchInput {...props} />
+
+export default SearchInput

package/src/components/ra-inputs/SelectArrayInput.jsx

@@ -0,0 +1,45 @@
+import LabeledInput from './LabeledInput'
+import { SelectArrayInput as RaSelectArrayInput } from 'react-admin'
+import { styled } from '@mui/material/styles'
+
+const ApplicaStyledSelectArrayInput = styled(RaSelectArrayInput, {
+  name: 'RaApplicaSelectArrayInput',
+  slot: 'Root',
+})(({ label }) => ({
+  '& legend': {
+    width: label === false ? 0 : 'auto',
+  },
+  '& .RaSelectArrayInput-chips': {
+    '& .RaSelectArrayInput-chip': {
+      marginTop: 0,
+    },
+  },
+}))
+
+ApplicaStyledSelectArrayInput.propTypes = {
+  ...RaSelectArrayInput.propTypes,
+}
+
+const SelectArrayInput = (props) => {
+  return (
+    <LabeledInput {...props}>
+      <ApplicaStyledSelectArrayInput
+        options={{
+          autoWidth: false,
+        }}
+      />
+    </LabeledInput>
+  )
+}
+
+SelectArrayInput.defaultProps = {
+  optionText: 'name',
+  optionValue: 'id',
+}
+
+SelectArrayInput.propTypes = {
+  ...RaSelectArrayInput.propTypes,
+  ...LabeledInput.propTypes,
+}
+
+export default SelectArrayInput

package/src/components/ra-inputs/SelectInput.jsx

@@ -0,0 +1,24 @@
+import LabeledInput from './LabeledInput'
+import { SelectInput as RaSelectInput } from 'react-admin'
+import { styled } from '@mui/material/styles'
+
+const ApplicaStyledSelectInput = styled(RaSelectInput, {
+  name: 'RaApplicaSelectArrayInput',
+  slot: 'Root',
+})(({ label }) => ({
+  '& legend': {
+    width: label === false ? 0 : 'auto',
+  },
+}))
+const SelectInput = (props) => (
+  <LabeledInput {...props}>
+    <ApplicaStyledSelectInput />
+  </LabeledInput>
+)
+
+SelectInput.propTypes = {
+  ...RaSelectInput.propTypes,
+  ...LabeledInput.propTypes,
+}
+
+export default SelectInput

package/src/components/ra-inputs/SmartTextInput.jsx

@@ -0,0 +1,52 @@
+import { maxLength as maxLengthValidator, useTranslate } from 'react-admin'
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import TextInput from './TextInput'
+import { useController } from 'react-hook-form'
+
+const SmartTextInput = ({ ...props }) => {
+  const translate = useTranslate()
+  const validationFn = maxLengthValidator(props?.maxLength, 'app.input.max_length_error')
+  const value = useController({ name: props?.source })?.field?.value
+
+  let helperText = props.helperText
+  let validate = props.validate
+
+  if (!validate) {
+    validate = [validationFn]
+  } else if (Array.isArray(validate)) {
+    if (validate.indexOf(validationFn) === -1) {
+      validate.push(validationFn)
+    }
+  }
+
+  const usedCharsInfo = translate('app.input.max_length_info', {
+    count: value?.length || 0,
+    max: props?.maxLength,
+  })
+
+  if (props?.maxLength) {
+    helperText =
+      helperText && helperText.length > 0
+        ? `${usedCharsInfo} - ${translate(helperText)}`
+        : usedCharsInfo
+  }
+
+  return <TextInput {...props} validate={validate} helperText={helperText} />
+}
+
+SmartTextInput.displayName = 'SmartTextInput'
+
+SmartTextInput.defaultProps = {
+  multiline: false,
+}
+
+SmartTextInput.propTypes = {
+  ...TextInput.propTypes,
+  maxLength: PropTypes.number,
+  multiline: PropTypes.bool,
+  rows: PropTypes.number,
+}
+
+export default SmartTextInput

package/src/components/ra-inputs/TextInput.jsx

@@ -0,0 +1,20 @@
+import LabeledInput from './LabeledInput'
+import { TextInput as RaTextInput } from 'react-admin'
+import React from 'react'
+
+const TextInput = (props) => (
+  <LabeledInput {...props}>
+    <RaTextInput />
+  </LabeledInput>
+)
+
+TextInput.defaultProps = {
+  ...RaTextInput.defaultProps,
+}
+
+TextInput.propTypes = {
+  ...RaTextInput.propTypes,
+  ...LabeledInput.propTypes,
+}
+
+export default TextInput

package/src/components/ra-inputs/TimeInput.jsx

@@ -0,0 +1,46 @@
+import LabeledInput from './LabeledInput'
+import { TimeInput as RaTimeInput } from 'react-admin'
+import { parseTime } from '../../utils'
+import { styled } from '@mui/material/styles'
+
+const defaultFormatter = (v) => {
+  if (!v) {
+    return ''
+  }
+  const time = parseTime(v)
+  if (time) {
+    return time.format('HH:mm')
+  }
+  return ''
+}
+const defaultParser = (v) => {
+  return v
+}
+
+const ApplicaStyledTimeInput = styled(RaTimeInput, {
+  name: 'RaApplicaTimeInput',
+  slot: 'root',
+})(({ label }) => ({
+  '& legend': {
+    width: label === false ? 0 : 'auto',
+  },
+}))
+
+const TimeInput = (props) => (
+  <LabeledInput {...props}>
+    <ApplicaStyledTimeInput />
+  </LabeledInput>
+)
+
+TimeInput.defaultProps = {
+  ...RaTimeInput.defaultProps,
+  format: defaultFormatter,
+  parse: defaultParser,
+}
+
+TimeInput.propTypes = {
+  ...RaTimeInput.propTypes,
+  ...LabeledInput.propTypes,
+}
+
+export default TimeInput

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

@@ -0,0 +1,42 @@
+import ArrayInput from './ArrayInput'
+import AttachmentInput from './AttachmentInput'
+import AutocompleteArrayInput from './AutocompleteArrayInput'
+import AutocompleteInput from './AutocompleteInput'
+import BooleanInput from './BooleanInput'
+import DateInput from './DateInput'
+import FileInput from './FileInput'
+import ImageInput from './ImageInput'
+import LabeledInput from './LabeledInput'
+import NumberInput from './NumberInput'
+import RecordInput from './RecordInput'
+import ReferenceArrayInput from './ReferenceArrayInput'
+import ReferenceInput from './ReferenceInput'
+import ReferenceManyInput from './ReferenceManyInput'
+import SearchInput from './SearchInput'
+import SelectArrayInput from './SelectArrayInput'
+import SelectInput from './SelectInput'
+import SmartTextInput from './SmartTextInput'
+import TextInput from './TextInput'
+import TimeInput from './TimeInput'
+export {
+  ArrayInput,
+  AttachmentInput,
+  AutocompleteArrayInput,
+  AutocompleteInput,
+  BooleanInput,
+  DateInput,
+  FileInput,
+  ImageInput,
+  LabeledInput,
+  NumberInput,
+  RecordInput,
+  ReferenceArrayInput,
+  ReferenceInput,
+  ReferenceManyInput,
+  SearchInput,
+  SelectArrayInput,
+  SelectInput,
+  SmartTextInput,
+  TextInput,
+  TimeInput,
+}

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

@@ -0,0 +1,42 @@
+import { Datagrid as RaDatagrid } from 'react-admin'
+import { styled } from '@mui/material/styles'
+
+const ApplicaStyledDatagrid = styled(RaDatagrid, {
+  name: 'RaApplicaDatagrid',
+  slot: 'root'
+})(() => ({
+  // Resolve an issue related to the visualization of the bulk actions toolbar.
+  // Padding and margin create a non empty space that allows the toolbar to be displayed when
+  // the selection is empty.
+  '& .RaBulkActionsToolbar-collapsed': {
+    height: 0,
+    paddingTop: 0,
+    paddingBottom: 0
+  },
+  '& .RaBulkActionsToolbar-topToolbar': {
+    backgroundColor: 'transparent'
+  },
+  // Resolve a defect related to the usage of AntDesin icons with Mantis and React-Admin.
+  // These two lines are not needed if you are not using AntDesign icons.
+  '& .icon span': {
+    top: -1,
+    left: -1
+  },
+  '& th': {
+    backgroundColor: 'yellow',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  }
+}))
+
+const Datagrid = (props) => <ApplicaStyledDatagrid {...props} />
+
+Datagrid.propTypes = {
+  ...RaDatagrid.propTypes
+}
+Datagrid.defaultProps = {
+  ...RaDatagrid.defaultProps
+}
+
+export default Datagrid

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

@@ -0,0 +1,94 @@
+/* eslint-disable camelcase */
+import * as React from 'react'
+
+import {
+  useGetResourceLabel,
+  useResourceContext,
+  useResourceDefinition,
+  useTranslate,
+} from 'ra-core'
+
+import { Inbox } from '@mui/icons-material'
+import PropTypes from 'prop-types'
+import { Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+const StyledToolbar = styled('div')(({ theme }) => ({
+  padding: theme.spacing(2),
+}))
+
+const Empty = ({ actions, className, ...props }) => {
+  const { hasCreate } = useResourceDefinition(props)
+  const resource = useResourceContext(props)
+
+  const translate = useTranslate()
+
+  const getResourceLabel = useGetResourceLabel()
+  const resourceName = translate(`resources.${resource}.forcedCaseName`, {
+    smart_count: 0,
+    _: getResourceLabel(resource, 0),
+  })
+
+  const emptyMessage = translate('ra.page.empty', { name: resourceName })
+  const inviteMessage = translate('ra.page.invite')
+
+  return (
+    <Root className={className}>
+      <div className={EmptyClasses.message}>
+        <Inbox className={EmptyClasses.icon} />
+        <Typography variant="h4" paragraph>
+          {translate(`resources.${resource}.empty`, {
+            _: emptyMessage,
+          })}
+        </Typography>
+        {hasCreate && (
+          <Typography variant="body1">
+            {translate(`resources.${resource}.invite`, {
+              _: inviteMessage,
+            })}
+          </Typography>
+        )}
+      </div>
+
+      <StyledToolbar className={EmptyClasses.toolbar}>{actions}</StyledToolbar>
+    </Root>
+  )
+}
+
+const PREFIX = 'RaApplicaEmpty'
+
+export const EmptyClasses = {
+  message: `${PREFIX}-message`,
+  icon: `${PREFIX}-icon`,
+  toolbar: `${PREFIX}-toolbar`,
+}
+
+const Root = styled('span', {
+  name: PREFIX,
+  overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+  flex: 1,
+  [`& .${EmptyClasses.message}`]: {
+    textAlign: 'center',
+    opacity: theme.palette.mode === 'light' ? 0.5 : 0.8,
+    margin: '0 1em',
+    color: theme.palette.mode === 'light' ? 'inherit' : theme.palette.text.primary,
+  },
+
+  [`& .${EmptyClasses.icon}`]: {
+    width: '9em',
+    height: '9em',
+  },
+
+  [`& .${EmptyClasses.toolbar}`]: {
+    textAlign: 'center',
+    marginTop: '2em',
+  },
+}))
+
+Empty.propTypes = {
+  actions: PropTypes.element,
+  className: PropTypes.string,
+}
+
+export default Empty

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

@@ -0,0 +1,81 @@
+import MainCard from '../MainCard'
+import { List as RaList } from 'react-admin'
+import { styled } from '@mui/system'
+
+const ApplicaStyledList = styled(RaList, {
+  name: 'RaApplicaList',
+  slot: 'root'
+})(({ theme }) => ({
+  '& .RaList-main': {
+    overflowX: 'auto',
+    '& .RaBulkActionsToolbar-toolbar': {
+      // La barra delle operazioni massive di react-admin non è perfettamente
+      // compatibile con il tema mantis, peratnto ho dovuto apportare una serie
+      // di correzioni per allinearla correttamente e consentirne l'utilizzo anche
+      // su tabelle con scorrimento orizontale (sopratutto su mobile).
+      height: 36,
+      top: 42,
+      paddingTop: 16,
+      '& .RaBulkActionsToolbar-title': {
+        alignItems: 'end',
+        '& .MuiTypography-root': {
+          alignSelf: 'center'
+        }
+      }
+    },
+    '& .MuiToolbar-root': {
+      '& form': {
+        padding: theme.spacing(2),
+        paddingBottom: theme.spacing(2),
+        alignItems: 'flex-start'
+      },
+      '& .MuiButton-root': {
+        margin: theme.spacing(2)
+      },
+      '& .RaFilterForm-filterFormInput > .ra-input': {
+        alignSelf: 'center'
+      },
+      '& .RaFilterFormInput-hideButton': {
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(0.5),
+        marginRight: theme.spacing(1)
+      }
+    }
+  },
+  '& .RaList-content': {
+    // Resolve an issue related to the visualization of the bulk actions toolbar.
+    // Padding and margin create a non empty space that allows the toolbar to be displayed when
+    // the selection is empty.
+    '& .RaBulkActionsToolbar-collapsed': {
+      height: 0,
+      paddingTop: 0,
+      paddingBottom: 0
+    },
+    // Resolve a defect related to the usage of AntDesin icons with Mantis and React-Admin.
+    // These two lines are not needed if you are not using AntDesign icons.
+    '& .icon span': {
+      top: -1,
+      left: -1
+    }
+  },
+  '& .RaEmpty-toolbar': {
+    margin: theme.spacing(2)
+  }
+}))
+
+const List = (props) => {
+  return (
+    <MainCard content={false}>
+      <ApplicaStyledList {...RaList.defaultProps} {...props} />
+    </MainCard>
+  )
+}
+List.defaultProps = {
+  ...RaList.defaultProps
+}
+
+List.propTypes = {
+  ...RaList.propTypes
+}
+
+export default List

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

@@ -0,0 +1,41 @@
+import { MarkAsReadedButton, MarkAsUnreadedButton } from './button'
+import React, { useCallback, useMemo } from 'react'
+import { darken, lighten, useTheme } from '@mui/material'
+
+import ActionsMenu from '../../ActionsMenu'
+import { Datagrid } from 'react-admin'
+import { DateAgoField } from '../../ra-fields'
+import { NotificationField } from './field'
+
+const NotificationList = ({ ...props }) => {
+  const theme = useTheme()
+  const { mode, colorize, density } = useMemo(
+    () => ({
+      mode: theme.palette.mode,
+      colorize: theme.palette.mode === 'dark' ? darken : lighten,
+      density: theme.palette.mode === 'dark' ? 0.5 : 0.9
+    }),
+    [theme.palette.mode]
+  )
+  const handleRowStyle = useCallback(
+    (record) => ({
+      backgroundColor: record?.readed
+        ? colorize(theme.palette.primary[mode], density)
+        : colorize(theme.palette.secondary[mode], density)
+    }),
+    [theme, mode, colorize, density]
+  )
+
+  return (
+    <Datagrid {...props} rowStyle={handleRowStyle}>
+      <NotificationField source="notification" sortable={false} label="ra.notification" />
+      <DateAgoField source="created" label="ra.notification.created" />
+      <ActionsMenu>
+        <MarkAsReadedButton />
+        <MarkAsUnreadedButton />
+      </ActionsMenu>
+    </Datagrid>
+  )
+}
+
+export default NotificationList

package/src/components/ra-lists/NotificationList/button/MarkAsReadedButton.jsx

@@ -0,0 +1,57 @@
+import {
+  Button,
+  useListContext,
+  useNotify,
+  useRecordContext,
+  useRefresh,
+  useResourceContext,
+  useUnselectAll,
+  useUpdateMany
+} from 'react-admin'
+
+import { Email } from '@mui/icons-material'
+import dayjs from 'dayjs'
+import { useCallback } from 'react'
+
+const MarkAsReadedButton = () => {
+  const refresh = useRefresh()
+  const notify = useNotify()
+  const unselectAll = useUnselectAll()
+  const resource = useResourceContext()
+  const { selectedIds, data: tableRows } = useListContext()
+  const record = useRecordContext()
+  const rows = selectedIds.map((id) => tableRows.find((d) => d.id === id))
+  const [updateMany, { isLoading }] = useUpdateMany(
+    resource,
+    {
+      ids: selectedIds.length > 0 ? selectedIds : [record?.id],
+      data: { readed: dayjs().format('YYYY-MM-DD HH:mm:ss') },
+      rows
+    },
+    {
+      onSuccess: () => {
+        refresh()
+        notify('resources.notifications.messages.readed.done')
+        unselectAll(resource)
+      },
+      onError: () => notify('ra.notification.readed_error', 'warning'),
+
+      onFailure: () => notify('ra.notification.readed_error', 'warning')
+    }
+  )
+  const handleUpdateMany = useCallback(() => {
+    updateMany()
+  }, [updateMany])
+
+  return (
+    <Button
+      label="ra.notification.mark_as_readed"
+      disabled={isLoading || record?.readed !== null}
+      onClick={handleUpdateMany}
+    >
+      <Email />
+    </Button>
+  )
+}
+
+export default MarkAsReadedButton

package/src/components/ra-lists/NotificationList/button/MarkAsUnreadedButton.jsx

@@ -0,0 +1,56 @@
+import {
+  Button,
+  useListContext,
+  useNotify,
+  useRecordContext,
+  useRefresh,
+  useResourceContext,
+  useUnselectAll,
+  useUpdateMany
+} from 'react-admin'
+
+import { Drafts } from '@mui/icons-material'
+import { useCallback } from 'react'
+
+const MarkAsUnreadedButton = () => {
+  const refresh = useRefresh()
+  const notify = useNotify()
+  const unselectAll = useUnselectAll()
+  const { selectedIds, data: tableRows } = useListContext()
+  const record = useRecordContext()
+  const resource = useResourceContext()
+  const rows = selectedIds.map((id) => tableRows.find((d) => d.id === id)).concat([record])
+  const [updateMany, { isLoading }] = useUpdateMany(
+    resource,
+    {
+      ids: selectedIds.length > 0 ? selectedIds : [record?.id],
+      data: { readed: null },
+      rows
+    },
+    {
+      onSuccess: () => {
+        refresh()
+        notify('resources.notifications.messages.unreaded.done')
+        unselectAll('notifications')
+      },
+      onFailure: () => notify('resources.notifications.messages.unreaded.error', 'warning')
+    }
+  )
+
+  const handleUpdateMany = useCallback(() => {
+    updateMany()
+  }, [updateMany])
+
+  return (
+    <Button
+      color="secondary"
+      label="ra.notification.mark_as_unreaded"
+      disabled={isLoading || (record && !record?.readed)}
+      onClick={handleUpdateMany}
+    >
+      <Drafts />
+    </Button>
+  )
+}
+
+export default MarkAsUnreadedButton

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

@@ -0,0 +1,2 @@
+export { default as MarkAsReadedButton } from './MarkAsReadedButton'
+export { default as MarkAsUnreadedButton } from './MarkAsUnreadedButton'