@applica-software-guru/react-admin 1.0.35 → 1.0.37

package/dist/themes/overrides/Autocomplete.d.ts

@@ -1,4 +1,4 @@
-export default function Autocomplete(): {
+export default function Autocomplete(theme: any): {
     MuiAutocomplete: {
         styleOverrides: {
             root: {
@@ -10,6 +10,9 @@ export default function Autocomplete(): {
                 width: string;
                 height: string;
             };
+            popper: {
+                border: string;
+            };
             clearIndicator: {
                 width: string;
                 height: string;

package/dist/themes/overrides/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/themes/overrides/Autocomplete.jsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;EAoBC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/themes/overrides/Autocomplete.jsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;EAuBC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "private": false,
   "repository": {
     "type": "git",

package/playground/src/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 140,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "useTabs": false
+}

package/playground/src/App.js

@@ -1,20 +1,20 @@
-import '@applica-software-guru/react-admin/style.css'
+import '@applica-software-guru/react-admin/style.css';
 
-import * as resourceConfig from './resource'
+import * as entities from './entities';
 
-import { API_URL, FILE_FIELDS } from './config'
-import { ApplicaAdmin, HttpError, Resource } from '@applica-software-guru/react-admin'
-import { createAttachmentsParser, createDataProvider } from '@applica-software-guru/crud-client'
+import { API_URL, FILE_FIELDS } from './config';
+import { ApplicaAdmin, HttpError, Resource } from '@applica-software-guru/react-admin';
+import { createAttachmentsParser, createDataProvider } from '@applica-software-guru/crud-client';
 
-import { CustomPage } from 'components/pages'
-import { CustomRoutes } from 'ra-core'
-import { Route } from 'react-router-dom'
-import build from './build.json'
-import { createAuthProvider } from '@applica-software-guru/iam-client'
-import menu from './menu'
-import theme from './theme'
+import { CustomPage } from 'components/pages';
+import { CustomRoutes } from 'ra-core';
+import { Route } from 'react-router-dom';
+import build from './build.json';
+import { createAuthProvider } from '@applica-software-guru/iam-client';
+import menu from './menu';
+import theme from './theme';
 
-const authProvider = createAuthProvider({ apiUrl: API_URL })
+const authProvider = createAuthProvider({ apiUrl: API_URL });
 const dataProvider = createDataProvider({
   apiUrl: API_URL,
   authProvider,
@@ -22,7 +22,7 @@ const dataProvider = createDataProvider({
   getToken: () => authProvider.getToken(),
   attachmentsParser: createAttachmentsParser(FILE_FIELDS),
   HttpErrorClass: HttpError
-})
+});
 const App = () => {
   return (
     <ApplicaAdmin
@@ -35,15 +35,15 @@ const App = () => {
       name="RA"
       version={build.version}
     >
-      <Resource name="entities/notification" {...resourceConfig.notification} />
-      <Resource name="entities/user" {...resourceConfig.user} />
-      <Resource name="entities/i18n-message" {...resourceConfig.i18nMessage} />
-      <Resource name="entities/device" {...resourceConfig.device} />
+      <Resource name="entities/notification" {...entities.notification} />
+      <Resource name="entities/user" {...entities.user} />
+      <Resource name="entities/i18n-message" {...entities.i18nMessage} />
+      <Resource name="entities/device" {...entities.device} />
       <CustomRoutes>
         <Route path="/custom-page" element={<CustomPage />} />
       </CustomRoutes>
     </ApplicaAdmin>
-  )
-}
+  );
+};
 
-export default App
+export default App;

package/playground/src/components/pages/CustomPage.jsx

@@ -1,7 +1,7 @@
-import { Typography } from "@mui/material"
+import { Typography } from '@mui/material';
 
 const CustomPage = () => {
-	return <Typography>Hello, Custom Page!</Typography>
-}
+  return <Typography>Hello, Custom Page!</Typography>;
+};
 
-export default CustomPage;
+export default CustomPage;

package/playground/src/components/pages/index.jsx

@@ -1,2 +1,2 @@
-import CustomPage from "./CustomPage";
-export { CustomPage }
+import CustomPage from './CustomPage';
+export { CustomPage };

package/playground/src/components/ra-forms/DeviceForm.js

@@ -1,17 +1,10 @@
-import {
-  ReadonlyField,
-  SimpleForm,
-  TextInput,
-  required,
-  useRecordContext,
-  useThemeConfig
-} from '@applica-software-guru/react-admin'
+import { ReadonlyField, SimpleForm, TextInput, required, useRecordContext, useThemeConfig } from '@applica-software-guru/react-admin';
 
-import { Grid } from '@mui/material'
+import { Grid } from '@mui/material';
 
 const DeviceForm = () => {
-  const { spacing } = useThemeConfig()
-  const record = useRecordContext()
+  const { spacing } = useThemeConfig();
+  const record = useRecordContext();
   return (
     <SimpleForm>
       <Grid container spacing={spacing}>
@@ -30,7 +23,7 @@ const DeviceForm = () => {
         )}
       </Grid>
     </SimpleForm>
-  )
-}
+  );
+};
 
-export default DeviceForm
+export default DeviceForm;

package/playground/src/components/ra-forms/UserForm.js

@@ -1,17 +1,10 @@
-import {
-  BooleanInput,
-  ImageInput,
-  SelectArrayInput,
-  SimpleForm,
-  TextInput,
-  useThemeConfig
-} from '@applica-software-guru/react-admin'
+import { BooleanInput, ImageInput, SelectArrayInput, SimpleForm, TextInput, useThemeConfig } from '@applica-software-guru/react-admin';
 
-import { Grid } from '@mui/material'
-import PropTypes from 'prop-types'
+import { Grid } from '@mui/material';
+import PropTypes from 'prop-types';
 
 const UserForm = ({ configuredRoles }) => {
-  const { spacing } = useThemeConfig()
+  const { spacing } = useThemeConfig();
   return (
     <SimpleForm defaultValues={{ active: true }}>
       <Grid container spacing={spacing}>
@@ -25,12 +18,7 @@ const UserForm = ({ configuredRoles }) => {
           <TextInput source="name" fullWidth />
         </Grid>
         <Grid item lg={12} xs={12}>
-          <SelectArrayInput
-            source="roles"
-            label="ra.user.roles"
-            choices={configuredRoles}
-            fullWidth
-          />
+          <SelectArrayInput source="roles" label="ra.user.roles" choices={configuredRoles} fullWidth />
         </Grid>
         <Grid item lg={12} xs={12}>
           <ImageInput source="image" accept="image/*" multiple={false} fullWidth />
@@ -39,13 +27,11 @@ const UserForm = ({ configuredRoles }) => {
 
       <BooleanInput source="active" />
     </SimpleForm>
-  )
-}
+  );
+};
 
 UserForm.propTypes = {
-  configuredRoles: PropTypes.arrayOf(
-    PropTypes.shape({ id: PropTypes.string, name: PropTypes.string })
-  ).isRequired
-}
+  configuredRoles: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string, name: PropTypes.string })).isRequired
+};
 
-export default UserForm
+export default UserForm;

package/playground/src/components/ra-forms/index.js

@@ -1,5 +1,4 @@
-import DeviceForm from './DeviceForm'
-import I18nMessageForm from './I18nMessageForm'
-import UserForm from './UserForm'
-
-export { DeviceForm, I18nMessageForm, UserForm }
+import DeviceForm from './DeviceForm';
+import I18nMessageForm from './I18nMessageForm';
+import UserForm from './UserForm';
+export { DeviceForm, I18nMessageForm, UserForm };

package/playground/src/components/ra-lists/DeviceList.js

@@ -1,24 +1,16 @@
-import {
-  Datagrid,
-  DateField,
-  List,
-  SearchInput,
-  TextField,
-  useThemeConfig,
-  useTranslate
-} from '@applica-software-guru/react-admin'
+import { Datagrid, DateField, List, SearchInput, TextField, useThemeConfig, useTranslate } from '@applica-software-guru/react-admin';
 
-import { Alert } from '@mui/material'
+import { Alert } from '@mui/material';
 
 const AlertBox = () => {
-  const { spacing } = useThemeConfig()
-  const translate = useTranslate()
+  const { spacing } = useThemeConfig();
+  const translate = useTranslate();
   return (
     <Alert sx={{ p: spacing, m: spacing }} severity="info">
       {translate('resources.entities/device.alert')}
     </Alert>
-  )
-}
+  );
+};
 const DeviceList = () => (
   <List perPage={25} filters={[<SearchInput source="keyword" alwaysOn />]}>
     <AlertBox />
@@ -28,6 +20,6 @@ const DeviceList = () => (
       <DateField source="registrationDate" showTime />
     </Datagrid>
   </List>
-)
+);
 
-export default DeviceList
+export default DeviceList;

package/playground/src/components/ra-lists/UserList.js

@@ -12,51 +12,35 @@ import {
   SelectInput,
   SimpleList,
   TextField
-} from '@applica-software-guru/react-admin'
-import { Chip, useMediaQuery } from '@mui/material'
+} from '@applica-software-guru/react-admin';
+import { Chip, useMediaQuery } from '@mui/material';
 
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
 const sortRoles = (roles, configuredRoles) => {
   return roles
     ?.filter((r) => configuredRoles.find((cr) => cr.id === r))
     .sort((a, b) => {
-      const aIndex = configuredRoles.findIndex((r) => r.id === a)
-      const bIndex = configuredRoles.findIndex((r) => r.id === b)
+      const aIndex = configuredRoles.findIndex((r) => r.id === a);
+      const bIndex = configuredRoles.findIndex((r) => r.id === b);
 
-      return aIndex - bIndex
-    })
-}
+      return aIndex - bIndex;
+    });
+};
 const UserList = ({ configuredRoles }) => {
-  const isSmall = useMediaQuery((theme) => theme.breakpoints.down('sm'))
+  const isSmall = useMediaQuery((theme) => theme.breakpoints.down('sm'));
   return (
     <List
       perPage={25}
       filters={[
         <SearchInput key="keyword" source="keyword" alwaysOn fullWidth />,
-        <SelectInput
-          key="role"
-          source="role"
-          choices={configuredRoles}
-          alwaysOn
-          emptyText="ra.action.view_all"
-          display="legend"
-        />,
+        <SelectInput key="role" source="role" choices={configuredRoles} alwaysOn emptyText="ra.action.view_all" display="legend" />,
         <BooleanInput key="active" source="active" display="legend" />
       ]}
     >
       {isSmall ? (
         <SimpleList
-          leftAvatar={(record) => (
-            <CoverField
-              source="image"
-              circle
-              width={50}
-              height={50}
-              justify="flex-end"
-              record={record}
-            />
-          )}
+          leftAvatar={(record) => <CoverField source="image" circle width={50} height={50} justify="flex-end" record={record} />}
           primaryText={(record) => record.name}
           secondaryText={(record) => record.email}
         />
@@ -71,12 +55,7 @@ const UserList = ({ configuredRoles }) => {
             label="ra.user.roles"
             render={(record) =>
               sortRoles(record?.roles, configuredRoles)?.map((role) => (
-                <Chip
-                  label={configuredRoles.find((r) => r.id === role)?.name}
-                  key={role}
-                  sx={{ mr: 1, mt: 1 }}
-                  color="secondary"
-                />
+                <Chip label={configuredRoles.find((r) => r.id === role)?.name} key={role} sx={{ mr: 1, mt: 1 }} color="secondary" />
               ))
             }
           />
@@ -84,13 +63,11 @@ const UserList = ({ configuredRoles }) => {
         </Datagrid>
       )}
     </List>
-  )
-}
+  );
+};
 
 UserList.propTypes = {
-  configuredRoles: PropTypes.arrayOf(
-    PropTypes.shape({ id: PropTypes.string, name: PropTypes.string })
-  ).isRequired
-}
+  configuredRoles: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string, name: PropTypes.string })).isRequired
+};
 
-export default UserList
+export default UserList;

package/playground/src/components/ra-lists/index.js

@@ -1,4 +1,4 @@
-import DeviceList from './DeviceList'
-import I18nMessageList from './I18nMessageList'
-import UserList from './UserList'
-export { DeviceList, I18nMessageList, UserList }
+import DeviceList from './DeviceList';
+import I18nMessageList from './I18nMessageList';
+import UserList from './UserList';
+export { DeviceList, I18nMessageList, UserList };

package/playground/src/contexts/index.js

@@ -1 +1 @@
-export {}
+export {};

package/playground/src/{resource → entities}/device.js

@@ -1,15 +1,15 @@
-import { Create, Edit } from '@applica-software-guru/react-admin'
-import { DeviceForm, DeviceList } from 'components'
+import { Create, Edit } from '@applica-software-guru/react-admin';
+import { DeviceForm, DeviceList } from 'components';
 const DeviceCreate = () => (
   <Create>
     <DeviceForm />
   </Create>
-)
+);
 const DeviceEdit = () => (
   <Edit>
     <DeviceForm />
   </Edit>
-)
+);
 
 const config = {
   list: DeviceList,
@@ -18,6 +18,6 @@ const config = {
   options: {
     group: 'control-panel'
   }
-}
+};
 
-export default config
+export default config;

package/playground/src/{resource → entities}/i18n-message.js

@@ -21,8 +21,7 @@ const config = {
   create: MessageCreate,
   options: {
     group: 'control-panel',
-    icon: FlagOutlined,
-    roles: ['superuser']
+    icon: FlagOutlined
   }
 };
 

package/playground/src/entities/index.js

@@ -0,0 +1,4 @@
+export { default as user } from './user';
+export { default as notification } from './notification';
+export { default as i18nMessage } from './i18n-message';
+export { default as device } from './device';

package/playground/src/{resource → entities}/notification.js

@@ -1,6 +1,5 @@
 import { NotificationList as BaseNotificationList, List } from '@applica-software-guru/react-admin';
 
-import { MessageOutlined } from '@ant-design/icons';
 import React from 'react';
 
 const NotificationList = () => (
@@ -11,7 +10,6 @@ const NotificationList = () => (
 const config = {
   list: NotificationList,
   options: {
-    icon: MessageOutlined,
     group: 'dashboard'
   }
 };

package/playground/src/menu.js

@@ -1,10 +1,4 @@
-import {
-  DashboardOutlined,
-  FlagOutlined,
-  NotificationOutlined,
-  TableOutlined,
-  UserOutlined
-} from '@ant-design/icons'
+import { DashboardOutlined, FlagOutlined, NotificationOutlined, TableOutlined, UserOutlined } from '@ant-design/icons';
 
 const config = [
   {
@@ -19,6 +13,14 @@ const config = [
         type: 'item',
         url: '/entities/notification',
         icon: NotificationOutlined
+      },
+      {
+        id: 'entities/bom',
+        title: 'ra.menu.item.entities/bom',
+        type: 'item',
+        url: '/entities/bom',
+        resource: true,
+        icon: TableOutlined
       }
     ]
   },
@@ -64,9 +66,16 @@ const config = [
         type: 'item',
         url: '/entities/device',
         icon: TableOutlined
+      },
+      {
+        id: 'entities/work-cycle',
+        title: 'ra.menu.item.entities/work-cycle',
+        type: 'item',
+        url: '/entities/work-cycle',
+        icon: TableOutlined
       }
     ]
   }
-]
+];
 
-export default config
+export default config;

package/playground/src/theme.js

@@ -1,3 +1,11 @@
-const theme = () => ({});
+const theme = (theme) => ({
+  components: {
+    MuiPaper: {
+      styleOverrides: {
+        backgroundColor: 'yellow'
+      }
+    }
+  }
+})
 
-export default theme;
+export default theme

package/react-admin.code-workspace

@@ -0,0 +1,9 @@
+{
+	"folders": [
+		{
+			"path": ".",
+			"name": "React Admin"
+		}
+	],
+	"settings": {}
+}

package/src/AdminContext.jsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { CoreAdminContext } from 'react-admin'
 import PropTypes from 'prop-types'
 import { ScrollTop } from './components'
@@ -13,14 +11,14 @@ const AdminContext = ({ children, theme, ...props }) => (
   </CoreAdminContext>
 )
 
-AdminContext.displayName = 'AdminContext'
+AdminContext.displayName = 'ApplicaAdminContext'
 AdminContext.defaultProps = {
-  ...CoreAdminContext.defaultProps,
+  ...CoreAdminContext.defaultProps
 }
 AdminContext.propTypes = {
   ...CoreAdminContext.propTypes,
   children: PropTypes.node.isRequired,
-  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
 }
 
 export default AdminContext

package/src/components/ActionsMenu.tsx

@@ -0,0 +1,91 @@
+import { IconButton, MenuItem, styled } from '@mui/material';
+import React, { Children, useState } from 'react';
+
+import MenuPopover from './MenuPopover/MenuPopover';
+import { MoreVert } from '@mui/icons-material';
+import PropTypes from 'prop-types';
+
+const StyledRoot = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'variant' && prop !== 'sx',
+  slot: 'root',
+  overridesResolver: (props, styles) => [styles.root]
+})(() => ({
+  textAlign: 'right'
+}));
+
+const StyledMenuPopover = styled(MenuPopover, {
+  name: 'ApplicaActionsMenuPopover',
+  slot: 'root'
+})(({ theme }) => ({
+  '& .MuiMenuItem-root': {
+    padding: 0,
+    margin: 0,
+    backgroundColor: theme.palette.background.paper,
+    '& .MuiButton-startIcon': {
+      marginRight: theme.spacing(0)
+    }
+  }
+}));
+export type ActionsMenuProps = {
+  children: React.ReactNode;
+};
+
+/**
+ * Consente di disegnare un menu di azioni raggruppate all'interno di un popover.
+ * All'interno del menu è possibile inserire uno o più componenti che, è suggeribile, siano bottoni.
+ *
+ * @example
+ * <ActionsMenu>
+ *  <DeleteButton />
+ *  <EditButton />
+ * </ActionsMenu>
+ *
+ * @param {ActionsMenuProps}
+ * @returns {React.ReactElement}
+ */
+const ActionsMenu = ({ children }: ActionsMenuProps): React.ReactElement | null => {
+  const [open, setOpen] = useState(null);
+  const handleClick = (e: any) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setOpen(e.currentTarget);
+  };
+  const handleClose = () => {
+    setOpen(null);
+  };
+
+  if (
+    !children ||
+    React.Children.count(children) === 0 ||
+    // @ts-ignore
+    (children?.filter && children?.filter((c) => React.isValidElement(c)).length === 0)
+  ) {
+    return null;
+  }
+
+  return (
+    <StyledRoot>
+      <IconButton aria-label="more" aria-haspopup="true" onClick={handleClick} color={open ? 'inherit' : 'default'}>
+        <MoreVert />
+      </IconButton>
+      <StyledMenuPopover open={open} onClose={handleClose} arrow="right-top">
+        {Children.map(
+          children,
+          (action, index) =>
+            React.isValidElement(action) && (
+              <MenuItem key={index} onClick={handleClose}>
+                {React.cloneElement(action)}
+              </MenuItem>
+            )
+        )}
+      </StyledMenuPopover>
+    </StyledRoot>
+  );
+};
+
+ActionsMenu.propTypes = {
+  ...MenuPopover.propTypes,
+  children: PropTypes.node.isRequired
+};
+
+export default ActionsMenu;