@applica-software-guru/react-admin 1.0.83 → 1.1.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.0.83",
+  "version": "1.1.85",
   "private": false,
   "repository": {
     "type": "git",
@@ -71,7 +71,7 @@
     "simplebar-react": "3.2.4"
   },
   "devDependencies": {
-    "@applica-software-guru/crud-client": "1.0.*",
+    "@applica-software-guru/crud-client": "1.1.*",
     "@applica-software-guru/iam-client": "1.0.*",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",

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

@@ -18,7 +18,7 @@ const StyledRoot = styled('div', {
     [theme.breakpoints.up('sm')]: {
       marginTop: `-${theme.spacing(2)}`,
       marginBottom: theme.spacing(margin ? 0 : 1),
-      marginLeft: theme.spacing(margin ? 1 : 2.5),
+      marginLeft: theme.spacing(margin ? 1 : 2),
       marginRight: theme.spacing(margin ? 1 : 2.5),
       width: margin ? 'auto' : `calc(100% - ${theme.spacing(5)})`
     },
@@ -28,6 +28,7 @@ const StyledRoot = styled('div', {
   },
   '& .RaDatagrid-root': {
     overflowX: 'auto',
+    paddingTop: 48,
     [theme.breakpoints.down('sm')]: {
       width: 'calc(100vw - 34px)'
     }
@@ -43,12 +44,17 @@ const StyledRoot = styled('div', {
     minHeight: 0
   },
   '& .RaBulkActionsToolbar-toolbar': {
-    minHeight: 64,
+    minHeight: 48,
+    bottom: -56,
     '& h6': {
       marginTop: theme.spacing(0.5)
     },
     '& .RaBulkActionsToolbar-topToolbar': {
       marginTop: theme.spacing(1)
+    },
+    [theme.breakpoints.down('sm')]: {
+      bottom: -48,
+      borderRadius: 0
     }
   }
 }));

package/src/components/ra-inputs/{AttachmentInput.jsx → AttachmentInput.tsx}

@@ -1,4 +1,5 @@
-import { FileInput as RaFileInput, useRecordContext } from 'react-admin';
+/* eslint-disable no-console */
+import { FileInputProps, FileInput as RaFileInput, useInput, useRecordContext } from 'react-admin';
 
 import { AttachmentField } from '../ra-fields';
 import LabeledInput from './LabeledInput';
@@ -6,7 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { styled } from '@mui/material/styles';
 
-const removeDeleteIfNecessary = (disabled) => {
+const removeDeleteIfNecessary = (disabled: boolean) => {
   if (disabled) {
     return {
       '& .RaFileInput-removeButton > .RaFileInputPreview-removeButton': {
@@ -25,7 +26,7 @@ const removeDeleteIfNecessary = (disabled) => {
 const StyledFileInput = styled(RaFileInput, {
   name: 'RaApplicaFileInput',
   slot: 'root'
-})(({ disabled, theme }) => ({
+})(({ disabled, theme }: { disabled: boolean; theme: any }) => ({
   '& .previews': {},
   '& .previews>div': {
     marginTop: theme.spacing(1),
@@ -47,12 +48,31 @@ const StyledFileInput = styled(RaFileInput, {
   ...removeDeleteIfNecessary(disabled)
 }));
 
-const AttachmentInput = ({ children, disabled, ...props }) => {
+export type AttachmentInputProps = FileInputProps & {
+  children?: React.ReactNode;
+  disabled?: boolean;
+  source?: string;
+  type?: 'file' | 'image' | 'attachment';
+};
+
+/**
+ * Consente di definire un campo di tipo input all'interno del quale è possibile caricare uno o più file.
+ *
+ * @example
+ * <AttachmentInput source="attachments" title="name" accept="image/*" multiple>
+ *
+ * @param {AttachmentInputProps}
+ * @returns
+ */
+const AttachmentInput = ({ children, disabled, type, ...props }: AttachmentInputProps): JSX.Element => {
   const record = useRecordContext(props);
   const property = props?.source;
   const entityId = record?.id;
+  useInput({ source: `__${type}__${props?.source}`, defaultValue: props?.source });
   return (
+    /** @ts-ignore */
     <LabeledInput {...props}>
+      {/** @ts-ignore */}
       <StyledFileInput disabled={disabled}>{React.cloneElement(children, { ...children.props, entityId, property })}</StyledFileInput>
     </LabeledInput>
   );
@@ -66,9 +86,11 @@ AttachmentInput.propTypes = {
 };
 
 AttachmentInput.defaultProps = {
+  /** @ts-ignore */
   children: <AttachmentField title="name" source="path" />,
   multiple: true,
-  disabled: false
+  disabled: false,
+  type: 'attachment'
 };
 
 export default AttachmentInput;

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

@@ -1,4 +1,4 @@
-import { ImageInput as RaImageInput, useRecordContext } from 'react-admin';
+import { ImageInput as RaImageInput, useInput, useRecordContext } from 'react-admin';
 
 import { CoverField } from '../ra-fields';
 import LabeledInput from './LabeledInput';
@@ -11,6 +11,7 @@ const ImageInput = ({ children, title, ...props }) => {
   const file = useWatch({ name: props.source });
   const record = useRecordContext(props);
   const { source } = props;
+  useInput({ source: `__image__${props?.source}`, defaultValue: props?.source });
   return (
     <LabeledInput {...props}>
       <RaImageInput accept="image/*">

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

@@ -39,13 +39,13 @@ const ApplicaStyledList = styled(RaList, {
       padding: theme.spacing(2),
       paddingTop: 0,
       '& .RaFilterForm-filterFormInput': {
+        marginTop: theme.spacing(1),
         '& .ra-input': {
           alignSelf: 'center'
         },
         [theme.breakpoints.down('sm')]: {
           // Quando lo schermo è piccolo, il filtro viene visualizzato in una colonna.
           // Diamo un margine maggiore in basso per evitare che siano troppo vicini.
-          marginTop: theme.spacing(1),
           marginBottom: theme.spacing(1)
         }
       },

package/src/components/ra-pages/RegisterPage.tsx

@@ -29,7 +29,6 @@ const RegisterPage = ({ name, version }: BaseAuthProps) => {
         redirect('/login');
       })
       .catch((error: any) => {
-        console.log('error:', error);
         notify(error, { type: 'error' });
       })
       .finally(() => setLoading(false));

package/src/playground/App.jsx

@@ -2,7 +2,7 @@
 
 import * as entities from './entities';
 
-import { API_URL, APP_NAME, FILE_FIELDS } from './config';
+import { API_URL, APP_NAME } from './config';
 import { ActivatePage, ApplicaAdmin, HttpError, RecoverPage, RegisterPage, Resource } from '@applica-software-guru/react-admin';
 import { createAttachmentsParser, createDataProvider } from '@applica-software-guru/crud-client';
 
@@ -20,7 +20,7 @@ const dataProvider = createDataProvider({
   authProvider,
   getHeaders: () => authProvider.getHeaders(),
   getToken: () => authProvider.getToken(),
-  attachmentsParser: createAttachmentsParser(FILE_FIELDS),
+  attachmentsParser: createAttachmentsParser(),
   HttpErrorClass: HttpError
 });
 const App = () => {
@@ -44,7 +44,6 @@ const App = () => {
       <CustomRoutes>
         <Route path="/custom-page" element={<CustomPage />} />
       </CustomRoutes>
-
       <Resource name="entities/notification" {...entities.notification} />
       <Resource name="entities/user" {...entities.user} />
       <Resource name="entities/i18n-message" {...entities.i18nMessage} />

package/src/playground/components/ra-forms/OrderForm.jsx

@@ -0,0 +1,48 @@
+import {
+  ArrayInput,
+  AttachmentInput,
+  LongForm,
+  MainCard,
+  SaveButton,
+  SimpleFormIterator,
+  TextInput,
+  Toolbar
+} from '@applica-software-guru/react-admin';
+
+import { Grid } from '@mui/material';
+
+const OrderForm = () => (
+  <LongForm>
+    <LongForm.Tab label="Test">
+      <MainCard title="Foo">
+        <Grid container>
+          <Grid item xs={12}>
+            <TextInput source="name" />
+            <AttachmentInput source="attachment" title="name" multiple={false} />
+            <AttachmentInput source="attachments" title="name" multiple={true} />
+          </Grid>
+          <Grid item xs={12}>
+            <ArrayInput source="items">
+              <SimpleFormIterator>
+                <TextInput source="name" />
+                <AttachmentInput source="attachment" multiple={false} title="attachment.name" />
+                <ArrayInput source="subItems">
+                  <SimpleFormIterator>
+                    <TextInput source="name" />
+                    <AttachmentInput source="attachment" multiple={false} title="attachment.name" />
+                    <AttachmentInput source="subAttachments" multiple title="attachment.name" />
+                  </SimpleFormIterator>
+                </ArrayInput>
+              </SimpleFormIterator>
+            </ArrayInput>
+          </Grid>
+        </Grid>
+        <Toolbar>
+          <SaveButton />
+        </Toolbar>
+      </MainCard>
+    </LongForm.Tab>
+  </LongForm>
+);
+
+export default OrderForm;

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

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

package/src/playground/components/ra-lists/OrderList.jsx

@@ -0,0 +1,12 @@
+import { Datagrid, DateField, EditButton, List, TextField } from '@applica-software-guru/react-admin';
+const OrderList = () => (
+  <List perPage={25}>
+    <Datagrid>
+      <TextField source="name" />
+      <DateField source="updated" showTime />
+      <EditButton />
+    </Datagrid>
+  </List>
+);
+
+export default OrderList;

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

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

package/src/playground/config.jsx

@@ -9,11 +9,6 @@ export const APP_URL = appUrl;
 export const API_URL = `${APP_URL}api`;
 export const ENVIRONMENT = environment;
 
-export const FILE_FIELDS = {
-  images: ['image'],
-  files: ['file'],
-  attachments: ['attachment']
-};
 export const CONFIGURED_ROLES = [
   { id: 'ROLE_ADMIN', name: 'Admin' },
   { id: 'ROLE_USER', name: 'User' }

package/src/playground/entities/index.jsx

@@ -2,3 +2,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';
+// export { default as order } from './order'; # Just for local tests.

package/src/playground/entities/order.jsx

@@ -0,0 +1,24 @@
+import { Create, Edit } from '@applica-software-guru/react-admin';
+import { OrderForm, OrderList } from '../components';
+
+const OrderCreate = () => (
+  <Create>
+    <OrderForm />
+  </Create>
+);
+const EditForm = () => (
+  <Edit mutationMode="pessimistic" redirect={false}>
+    <OrderForm />
+  </Edit>
+);
+
+const config = {
+  list: OrderList,
+  edit: EditForm,
+  create: OrderCreate,
+  options: {
+    group: 'dashboard'
+  }
+};
+
+export default config;

package/src/playground/menu.jsx

@@ -8,11 +8,18 @@ const config = [
     icon: DashboardOutlined,
     children: [
       {
-        id: '/entities/notification',
+        id: 'entities/notification',
         title: 'ra.menu.item.notification',
         type: 'item',
         url: '/entities/notification',
         icon: NotificationOutlined
+      },
+      {
+        id: 'entities/order',
+        title: 'ra.menu.item.order',
+        type: 'item',
+        url: '/entities/order',
+        icon: TableOutlined
       }
     ]
   },

package/src/playground/theme.jsx

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

package/src/playground/types.ts

@@ -0,0 +1,94 @@
+import { CreateParams, DataProvider, HttpError, UpdateManyParams, UpdateParams } from 'ra-core';
+
+export type AttachmentParserConfig = {
+  images: string[];
+  files: string[];
+  attachments?: string[];
+};
+
+export type AttachmentParserResult = {
+  data: any;
+  parts: any[];
+};
+export type ErrorMapperResult = {
+  errors?: any[];
+};
+
+export type CreateHeaderOptions = {
+  headers: Headers | any;
+  body?: any;
+  user?: {
+    token: string;
+  };
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | string;
+};
+
+export type UpdateManyParamsExtended = UpdateManyParams & {
+  rows: any[];
+};
+
+export type ApplicaDataProviderConfig = {
+  apiUrl: string;
+  getHeaders: () => Promise<Headers | any>;
+  getToken: () => Promise<string>;
+  HttpErrorClass: any | HttpError | Error;
+  attachmentsParser: (data: any) => Promise<AttachmentParserResult>;
+  prepareData?: (data: any, resource?: string, params?: CreateParams | UpdateParams | any) => any;
+  /**
+   * Consente di specificare se l'applicazione è in modalità mobile.
+   * In questo caso il dataProvider può adottare comportamenti differenti, in particolar modo
+   * per le chiamate di creazione e modifica dei records in cui l'utilizzo di FormData
+   * è soppiantato dall'utilizzo di chiamate REST pure e l'upload dei file viene gestito
+   * separatamente.
+   */
+  mobile?: boolean;
+};
+
+export type ApplicaDataProviderInterface = DataProvider & {
+  /**
+   * Consente di ottenere l'url del servizio REST.
+   */
+  getApiUrl(): string;
+  /**
+   * Consente di recuperare un singolo file dal server utilizzando eventuali
+   * meccanismi di autenticazione associati al dataProvider (es. JWT passato mediante getHeaders).
+   *
+   * @param {String} resource URL del file da recuperare
+   * @returns {Promise} Restituisce una promise che contiene il file recuperato
+   *
+   * @example Simulazione del download di un file.
+   * const attachment = await dataProvider.getFile(`/attachments/post/1/picture/1}`);
+   * const link = document.createElement('a');
+   * link.href = attachment;
+   * link.download = get(record, props?.title || props?.source);
+   * link.click();
+   *
+   */
+  getFile(resource: string): Promise<string>;
+  /**
+   * Consente di eseguire una chiamata GET generica al servizio REST.
+   * La risposta del servizio deve contenere almeno 'responseCode' cosi come previsto da standard applica.
+   * Response code deve essere uguale ad 'ok' se la chiamata ha avuto successo.
+   *
+   * @example
+   * // Esempio di chiamata: users?name=Roberto
+   * const data = await dataProvider.get("users", { name: "Roberto" })
+   *
+   *
+   * @param resource Risorsa da richiedere
+   * @param params Parametri della query string da inserire
+   */
+  get(resource: string, params: any): Promise<any>;
+  /**
+   * Consente di eseguire una chiamata POST generica al servizio REST.
+   * La risposta del servizio deve contenere almeno 'responseCode' cosi come previsto da standard applica.
+   * Response code deve essere uguale ad 'ok' se la chiamata ha avuto successo.
+   *
+   * @example
+   * const data = await dataProvider.post("users", { name: "Roberto" })
+   *
+   * @param resource Risorsa da richiedere
+   * @param params Parametri della query string da inserire
+   */
+  post(resource: string, params: any): Promise<any>;
+};