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

package/src/components/ra-fields/AttachmentField.jsx

@@ -0,0 +1,82 @@
+import { Box, Typography } from '@mui/material'
+import {
+  FileField as RaFileField,
+  useDataProvider,
+  useRecordContext,
+  useResourceContext,
+  useTranslate
+} from 'react-admin'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import BaseAttachmentField from './BaseAttachmentField'
+import PropTypes from 'prop-types'
+import dayjs from 'dayjs'
+import { get } from 'lodash'
+
+const AttachmentField = ({ entityId, property, ...props }) => {
+  const [user, setUser] = useState(null)
+  const record = useRecordContext(props)
+  const dataProvider = useDataProvider()
+  const resource = useResourceContext()
+  const handleClick = useCallback(
+    async (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const item = get(record, props?.source)
+      const entity = resource.replace('entities/', '')
+      const attachment = await dataProvider.getFile(
+        `/attachments/${entity}/${entityId || record?.id}/${property || props?.source}/${
+          item?.id || record?.id
+        }`
+      )
+      const link = document.createElement('a')
+      link.href = attachment
+      link.download = get(record, props?.title || props?.source)
+      link.click()
+    },
+    [dataProvider, record, entityId, resource, property, props?.source, props?.title]
+  )
+  const _record = useMemo(
+    () => ({
+      ...record,
+      [props?.source]: record?.src || get(record, props?.source),
+      [props?.title]: record?.title || get(record, props?.title || props?.source)
+    }),
+    [record, props?.source, props?.title]
+  )
+  const translate = useTranslate()
+  useEffect(() => {
+    if (!record || !record?.userId) return
+    dataProvider.getOne('entities/user', { id: record?.userId }).then(({ data }) => setUser(data))
+  }, [record, dataProvider])
+
+  return (
+    <BaseAttachmentField
+      {...props}
+      record={_record}
+      onClick={handleClick}
+      title={
+        <Box sx={{ cursor: 'pointer' }}>
+          <Typography variant="subtitle1">{get(_record, props?.title || props?.source)}</Typography>
+          <Typography variant="caption" color="secondary">
+            {get(_record, 'sizeDescription')}
+            {user && ` | `}
+            {user &&
+              translate('ra.attachment.info', {
+                user: user?.name,
+                created: dayjs(_record?.createdAt).format('DD/MM/YYYY HH:mm')
+              })}
+          </Typography>
+        </Box>
+      }
+    />
+  )
+}
+
+AttachmentField.propTypes = {
+  ...RaFileField.propTypes,
+  source: PropTypes.string,
+  title: PropTypes.string
+}
+
+export default AttachmentField

package/src/components/ra-fields/BaseAttachmentField.jsx

@@ -0,0 +1,72 @@
+import * as React from 'react'
+
+import { useRecordContext, useTranslate } from 'ra-core'
+
+import PropTypes from 'prop-types'
+import Typography from '@mui/material/Typography'
+import get from 'lodash/get'
+import { styled } from '@mui/material/styles'
+
+export const BaseAttachmentField = (props) => {
+  const { className, emptyText, source, title, ...rest } = props
+  const record = useRecordContext(props)
+  const sourceValue = get(record, source)
+  const translate = useTranslate()
+
+  if (!sourceValue) {
+    return emptyText ? (
+      <Typography component="span" variant="body2" className={className} {...rest}>
+        {emptyText && translate(emptyText, { _: emptyText })}
+      </Typography>
+    ) : (
+      <Root className={className} {...rest} />
+    )
+  }
+
+  if (Array.isArray(sourceValue)) {
+    return (
+      <StyledList className={className} {...rest}>
+        {sourceValue.map((file, index) => {
+          const fileTitleValue = get(file, title) || title
+
+          return <li key={index}>{fileTitleValue}</li>
+        })}
+      </StyledList>
+    )
+  }
+
+  const titleValue = get(record, title) || title
+
+  return (
+    <Root className={className} {...rest}>
+      {titleValue}
+    </Root>
+  )
+}
+
+BaseAttachmentField.propTypes = {
+  src: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]),
+  target: PropTypes.string,
+  download: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  ping: PropTypes.string,
+  rel: PropTypes.string,
+  emptyText: PropTypes.string,
+  source: PropTypes.string.isRequired,
+  className: PropTypes.string,
+}
+
+const PREFIX = 'RaApplicaBaseAttachmentField'
+
+const Root = styled('div', {
+  name: PREFIX,
+  overridesResolver: (props, styles) => styles.root,
+})({
+  display: 'inline-block',
+})
+
+const StyledList = styled('ul')({
+  display: 'inline-block',
+})
+
+export default BaseAttachmentField

package/src/components/ra-fields/CoverField.jsx

@@ -0,0 +1,83 @@
+import React, { useMemo } from 'react'
+
+import ImageField from './ImageField'
+import PropTypes from 'prop-types'
+import { useRecordContext } from 'react-admin'
+
+/**
+ * A component that displays an image in a circle or square (with minimum radius).
+ *
+ * @example
+ * // Suppose you have a property, in your record, called 'image' and it contains a base64 string related field called '_image'.
+ * // You can use this component as follows:
+ * import { CoverField } from 'ra-ui-applica';
+ * ...
+ * <CoverField source="image" />
+ *
+ * // If you want the Circle version:
+ * <CoverField source="image" circle />
+ *
+ * // With custom width/height:
+ * <CoverField source="image" width={100} height={100} />
+ */
+const CoverField = ({
+  width: defaultWidth,
+  height: defaultHeight,
+  circle: defaultCircle,
+  justify: defaultJustify,
+  record: _propRecord,
+  ...props
+}) => {
+  const sx = useMemo(
+    () => ({
+      width:
+        typeof defaultWidth === 'number'
+          ? `${defaultWidth}px !important`
+          : `${defaultWidth} !important`,
+      height:
+        typeof defaultHeight === 'number'
+          ? `${defaultHeight}px !important`
+          : `${defaultHeight} !important`,
+      borderRadius: defaultCircle ? '50%' : 1.5,
+    }),
+    [defaultWidth, defaultHeight, defaultCircle],
+  )
+  const _recordContext = useRecordContext()
+  const record = _propRecord || _recordContext
+
+  return (
+    <ImageField
+      sx={(theme) => ({
+        margin: 0,
+        display: 'flex',
+        justifyContent: defaultJustify,
+        '& img': {
+          margin: '0px !important',
+          border: `1px solid ${theme.palette.divider}`,
+          objectFit: 'cover !important',
+          ...sx,
+          minWidth: sx.width,
+          minHeight: sx.height,
+        },
+      })}
+      {...props}
+      record={record}
+    />
+  )
+}
+CoverField.defaultProps = {
+  ...ImageField.defaultProps,
+  width: 150,
+  height: 150,
+  circle: false,
+  justify: 'flex-start',
+}
+CoverField.propTypes = {
+  ...ImageField.propTypes,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  circle: PropTypes.bool,
+  justify: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+}
+
+export default CoverField

package/src/components/ra-fields/DateAgoField.jsx

@@ -0,0 +1,35 @@
+import { DateField, useLocaleState, useRecordContext } from 'react-admin'
+import React, { Fragment, useMemo } from 'react'
+
+import PropTypes from 'prop-types'
+import { Typography } from '@mui/material'
+import dayjs from 'dayjs'
+import { get } from 'lodash'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+dayjs.extend(relativeTime)
+
+const DateAgoField = (props) => {
+  const record = useRecordContext(props)
+  const [locale] = useLocaleState()
+  const fromNow = useMemo(
+    () => dayjs(get(record, props?.source)).locale(locale).fromNow(),
+    [record, props?.source, locale],
+  )
+
+  return (
+    <Fragment>
+      <DateField record={record} source={props.source} showTime />
+      <br />
+      <Typography variant="caption" color="textSecondary">
+        {fromNow}
+      </Typography>
+    </Fragment>
+  )
+}
+DateAgoField.displayName = 'DateAgoField'
+DateAgoField.propTypes = {
+  source: PropTypes.string.isRequired,
+}
+
+export default DateAgoField

package/src/components/ra-fields/DateField.jsx

@@ -0,0 +1,27 @@
+import { DateField as RaDateField } from 'react-admin'
+import React from 'react'
+import { styled } from '@mui/material/styles'
+
+const ApplicaStyledDateField = styled(RaDateField, {
+  name: 'RaApplicaDateField',
+  slot: 'Root',
+})(() => ({}))
+
+ApplicaStyledDateField.propTypes = {
+  ...RaDateField.propTypes,
+}
+
+const DateField = (props) => {
+  return <ApplicaStyledDateField {...props} />
+}
+
+DateField.defaultProps = {
+  ...RaDateField.defaultProps,
+  variant: 'body1',
+}
+
+DateField.propTypes = {
+  ...RaDateField.propTypes,
+}
+
+export default DateField

package/src/components/ra-fields/EmailField.jsx

@@ -0,0 +1,27 @@
+import { EmailField as RaEmailField } from 'react-admin'
+import React from 'react'
+import { styled } from '@mui/material/styles'
+
+const ApplicaStyledEmailField = styled(RaEmailField, {
+  name: 'RaApplicaEmailField',
+  slot: 'Root',
+})(() => ({}))
+
+ApplicaStyledEmailField.propTypes = {
+  ...RaEmailField.propTypes,
+}
+
+const EmailField = (props) => {
+  return <ApplicaStyledEmailField {...props} />
+}
+
+EmailField.defaultProps = {
+  ...RaEmailField.defaultProps,
+  variant: 'body1',
+}
+
+EmailField.propTypes = {
+  ...RaEmailField.propTypes,
+}
+
+export default EmailField

package/src/components/ra-fields/FileField.jsx

@@ -0,0 +1,40 @@
+import { FileField as RaFileField, useRecordContext } from 'react-admin'
+
+import PropTypes from 'prop-types'
+import { get } from 'lodash'
+import { styled } from '@mui/material/styles'
+import { useCallback } from 'react'
+
+const StyledFileField = styled(RaFileField, {
+  name: 'RaApplicaFileField',
+  slot: 'root',
+})(() => ({}))
+
+/**
+ * This component works with Base64 files.
+ */
+const FileField = ({ ...props }) => {
+  const record = useRecordContext(props)
+  const handleClick = useCallback(
+    (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      const base64 = get(record, `_${props?.source}`, get(record, props?.source))
+      const name = get(record, props?.title || props?.source) || props?.title
+      const link = document.createElement('a')
+      link.href = base64
+      link.download = name
+      link.click()
+    },
+    [props?.source, record, props?.title],
+  )
+  return <StyledFileField {...props} record={record} onClick={handleClick} />
+}
+
+FileField.propTypes = {
+  ...RaFileField.propTypes,
+  source: PropTypes.string,
+  title: PropTypes.string,
+}
+
+export default FileField

package/src/components/ra-fields/FunctionField.jsx

@@ -0,0 +1,9 @@
+import { FunctionField as RaFunctionField } from 'react-admin'
+
+const FunctionField = (props) => <RaFunctionField {...props} />
+
+FunctionField.defaultProps = {
+  variant: 'body1',
+}
+
+export default FunctionField

package/src/components/ra-fields/ImageField.jsx

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import { ImageField as RaImageField } from 'react-admin'
+import { styled } from '@mui/material/styles'
+
+const StyledImageField = styled(RaImageField, {
+  name: 'RaApplicaImageField',
+  slot: 'root',
+})(() => ({}))
+
+const ImageField = (props) => {
+  const source = `_${props?.source}`
+  return <StyledImageField {...props} source={source} />
+}
+
+ImageField.propTypes = {
+  ...RaImageField.propTypes,
+  source: PropTypes.string,
+}
+
+export default ImageField

package/src/components/ra-fields/ReadonlyField.jsx

@@ -0,0 +1,107 @@
+import { FieldTitle, useRecordContext, useResourceContext } from 'react-admin'
+import { InputLabel, Tooltip } from '@mui/material'
+import React, { Fragment, useMemo } from 'react'
+
+import PropTypes from 'prop-types'
+import { get } from 'lodash'
+import { styled } from '@mui/material/styles'
+import { useAppConfig } from '../../hooks'
+
+const StyledField = styled('div')(({ theme }) => ({
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  paddingTop: theme.spacing(1),
+  paddingBottom: theme.spacing(1),
+  marginBottom: theme.spacing(1),
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  [theme.breakpoints.down('sm')]: {
+    whiteSpace: 'normal',
+    overflow: 'visible',
+    textOverflow: 'inherit',
+  },
+}))
+
+const BasicField = ({ source, defaultValue, ...props }) => {
+  const record = useRecordContext(props)
+  const value = get(record, source, defaultValue)
+  return (
+    <span dangerouslySetInnerHTML={{ __html: value && value !== null ? value : defaultValue }} />
+  )
+}
+
+BasicField.propTypes = {
+  defaultValue: PropTypes.any,
+  source: PropTypes.string,
+  record: PropTypes.object,
+}
+
+BasicField.defaultProps = {
+  defaultValue: '&nbsp;',
+}
+
+const ContentWrapper = ({ title, children }) => {
+  if (title && title !== false) {
+    return (
+      <Tooltip title={title} placement="top">
+        {children}
+      </Tooltip>
+    )
+  }
+  return children
+}
+
+ContentWrapper.propTypes = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+}
+
+const ReadonlyField = ({ label, source, defaultValue, children, tooltip: _tooltip, ...props }) => {
+  const { getCurrentDialog } = useAppConfig()
+  const record = useRecordContext(props)
+  const resource = useResourceContext(props)
+  const dialogResource = getCurrentDialog()
+
+  const tooltip = useMemo(() => {
+    if (!_tooltip || _tooltip === false) return false
+    if (typeof _tooltip === 'function') return _tooltip(record)
+    if (typeof _tooltip === 'string') {
+      return get(record, _tooltip, _tooltip)
+    }
+    return _tooltip
+  }, [record, _tooltip])
+
+  return (
+    <ContentWrapper title={tooltip}>
+      <Fragment>
+        <InputLabel>
+          <FieldTitle label={label} source={source} resource={dialogResource || resource} />
+        </InputLabel>
+        <StyledField {...props}>
+          {React.cloneElement(children, {
+            source,
+            record,
+            defaultValue,
+            resource: dialogResource || resource,
+          })}
+        </StyledField>
+      </Fragment>
+    </ContentWrapper>
+  )
+}
+
+ReadonlyField.propTypes = {
+  defaultValue: PropTypes.any,
+  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func]),
+  source: PropTypes.string,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  children: PropTypes.element,
+}
+
+ReadonlyField.defaultProps = {
+  defaultValue: '&nbsp;',
+  children: <BasicField />,
+}
+
+export default ReadonlyField

package/src/components/ra-fields/ReferenceManyField.jsx

@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types'
+import { ReferenceManyField as RaReferenceManyField } from 'react-admin'
+import { styled } from '@mui/system'
+const StyledRoot = styled('div', {
+  name: 'RaApplicaReferenceManyField',
+  slot: 'root',
+})(({ theme, margin, border }) => ({
+  marginLeft: !margin ? `-${theme.spacing(2.5)}` : 0,
+  marginRight: !margin ? `-${theme.spacing(2.5)}` : 0,
+  borderBottom: border ? `1px solid ${theme.palette.divider}` : 'none',
+  '& .MuiCardContent-root': {
+    borderTop: border ? `1px solid ${theme.palette.divider}` : 'none',
+  },
+  '& .MuiToolbar-root': {
+    marginTop: `-${theme.spacing(2)}`,
+    marginBottom: theme.spacing(margin ? 0 : 1),
+    marginLeft: theme.spacing(margin ? 1 : 2.5),
+    marginRight: theme.spacing(margin ? 1 : 2.5),
+    width: margin ? 'auto' : `calc(100% - ${theme.spacing(5)})`,
+    [theme.breakpoints.down('md')]: {
+      marginTop: 0,
+    },
+  },
+  '& .RaDatagrid-table': {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+  '& .MuiTablePagination-toolbar': {
+    marginTop: theme.spacing(1),
+    marginBottom: 0,
+  },
+  '& .RaBulkActionsToolbar-collapsed.RaBulkActionsToolbar-toolbar': {
+    minHeight: 0,
+  },
+  '& .RaBulkActionsToolbar-toolbar': {
+    minHeight: 64,
+    '& h6': {
+      marginTop: theme.spacing(0.5),
+    },
+    '& .RaBulkActionsToolbar-topToolbar': {
+      marginTop: theme.spacing(1),
+    },
+  },
+}))
+
+const ReferenceManyField = (props) => (
+  <StyledRoot>
+    <RaReferenceManyField {...props} />
+  </StyledRoot>
+)
+
+ReferenceManyField.defaultProps = {
+  ...RaReferenceManyField.defaultProps,
+  margin: false,
+  border: false,
+}
+
+ReferenceManyField.propTypes = {
+  ...RaReferenceManyField.propTypes,
+  margin: PropTypes.bool,
+  border: PropTypes.bool,
+}
+
+export default ReferenceManyField

package/src/components/ra-fields/SizeField.jsx

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types'
+import { Typography } from '@mui/material'
+import { get } from 'lodash'
+import { useRecordContext } from 'react-admin'
+const SizeField = ({ source, ...props }) => {
+  const record = useRecordContext(props)
+  const size = get(record, source, 0)
+  const sizeInKb = size / 1024
+  const sizeInMb = sizeInKb / 1024
+  const sizeInGb = sizeInMb / 1024
+
+  const value =
+    sizeInGb > 1
+      ? `${sizeInGb.toFixed(2)} GB`
+      : sizeInMb > 1
+      ? `${sizeInMb.toFixed(2)} MB`
+      : sizeInKb > 1
+      ? `${sizeInKb.toFixed(2)} KB`
+      : `${size.toFixed(2)} B`
+  return (
+    <Typography component="span" variant="body1" {...props}>
+      {value}
+    </Typography>
+  )
+}
+
+SizeField.propTypes = {
+  record: PropTypes.object,
+  source: PropTypes.string,
+}
+
+export default SizeField

package/src/components/ra-fields/TextField.jsx

@@ -0,0 +1,27 @@
+import { TextField as RaTextField } from 'react-admin'
+import React from 'react'
+import { styled } from '@mui/material/styles'
+
+const ApplicaStyledTextField = styled(RaTextField, {
+  name: 'RaApplicaTextField',
+  slot: 'Root',
+})(() => ({}))
+
+ApplicaStyledTextField.propTypes = {
+  ...RaTextField.propTypes,
+}
+
+const TextField = (props) => {
+  return <ApplicaStyledTextField {...props} />
+}
+
+TextField.defaultProps = {
+  ...RaTextField.defaultProps,
+  variant: 'body1',
+}
+
+TextField.propTypes = {
+  ...RaTextField.propTypes,
+}
+
+export default TextField

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

@@ -0,0 +1,28 @@
+import ActionsField from './ActionsField'
+import AttachmentField from './AttachmentField'
+import CoverField from './CoverField'
+import DateAgoField from './DateAgoField'
+import DateField from './DateField'
+import EmailField from './EmailField'
+import FileField from './FileField'
+import FunctionField from './FunctionField'
+import ImageField from './ImageField'
+import ReadonlyField from './ReadonlyField'
+import ReferenceManyField from './ReferenceManyField'
+import SizeField from './SizeField'
+import TextField from './TextField'
+export {
+  ActionsField,
+  AttachmentField,
+  CoverField,
+  DateAgoField,
+  DateField,
+  EmailField,
+  FileField,
+  FunctionField,
+  ImageField,
+  ReadonlyField,
+  ReferenceManyField,
+  SizeField,
+  TextField,
+}