@applica-software-guru/react-admin 1.3.142 → 1.3.144

package/package.json

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

package/src/components/Layout/Provider.tsx

@@ -1,5 +1,5 @@
 import { Dialog, useMediaQuery, useTheme } from '@mui/material';
-import { UseGetIdentityResult, useGetIdentity } from 'ra-core';
+import { UseGetIdentityResult, useGetIdentity, useAuthProvider } from 'ra-core';
 import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useReducer, useState } from 'react';
 import { useMenuConfig, useThemeConfig } from '../../hooks';
 
@@ -130,6 +130,7 @@ const DefaultState: ILayoutState = {
   LayoutContext = createContext<ILayoutContext | undefined>(undefined);
 
 function LayoutProvider(props: ILayoutProviderProps) {
+  const authProvider = useAuthProvider();
   const identity = useGetIdentity() as UseGetIdentityResult,
     theme = useTheme(),
     downMd = useMediaQuery(theme.breakpoints.down('md')),
@@ -215,8 +216,10 @@ function LayoutProvider(props: ILayoutProviderProps) {
   }, [theme.palette.mode]);
 
   useEffect(() => {
-    setNeedToChangePassword(identity?.data?.needToChangePassword === true);
-  }, [identity?.data?.needToChangePassword]);
+    authProvider.isImpersonating().then((isImpersonating: boolean) => {
+      setNeedToChangePassword(!isImpersonating && identity?.data?.needToChangePassword === true);
+    });
+  }, [identity?.data?.needToChangePassword, authProvider]);
 
   return (
     <LayoutContext.Provider value={value}>

package/src/components/ra-forms/LongForm/Form.tsx

@@ -12,11 +12,12 @@ type IFormProps = IProviderProps &
     spacing?: number;
     tabsDisposition: Disposition;
     contentDisposition: Disposition;
+    errorCount: boolean;
   };
 
 function Form(props: IFormProps) {
   const { tabsDisposition, contentDisposition, spacing = 2 } = props,
-    providerProps = _.pick(props, ['syncWithLocation']),
+    providerProps = _.pick(props, ['syncWithLocation', 'errorCount']),
     baseFormProps = _.omit(props, ['tabsDisposition', 'contentDisposition', 'syncWithLocation']),
     { top: sidebarTop, bottom: sidebarBottom } = useSidebarChildren(props),
     contentChildren = useBaseItemChildren(props);

package/src/components/ra-forms/LongForm/NavMenu.tsx

@@ -1,6 +1,17 @@
 import _ from 'lodash';
 import { Avatar } from '../../@extended';
-import { Card, Collapse, List, ListItem, ListItemProps, ListItemIcon, ListItemText, ListItemButton, ListItemAvatar } from '@mui/material';
+import {
+  Card,
+  Collapse,
+  List,
+  ListItem,
+  ListItemProps,
+  ListItemIcon,
+  ListItemText,
+  ListItemButton,
+  ListItemAvatar,
+  Badge
+} from '@mui/material';
 import { useSetActiveItem, useSyncWithLocation } from './Provider';
 import { IItem } from './types';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -44,7 +55,7 @@ function NavMenu() {
 function NavMenuItem(props: INavMenuItemProps) {
   const translate = useTranslate() ?? _.identity,
     navMenuItemProps = useNavMenuItem(props),
-    { selected, label, icon, onClick: _onClick, badge, items, isGroup, level } = navMenuItemProps,
+    { selected, label, icon, onClick: _onClick, badge, items, isGroup, level, errors = 0 } = navMenuItemProps,
     { spacing } = useThemeConfig(),
     [open, setOpen] = useState(selected),
     onClick = useCallback(
@@ -68,7 +79,18 @@ function NavMenuItem(props: INavMenuItemProps) {
       <ListItem {...listItemProps} disablePadding>
         <ListItemButton selected={selected && !isGroup} onClick={onClick} sx={{ pl: spacing * level }}>
           {hasIcon && <ListItemIcon>{icon}</ListItemIcon>}
-          <ListItemText inset={!hasIcon} primary={translate(label)} />
+          <ListItemText
+            inset={!hasIcon}
+            primary={
+              errors === 0 ? (
+                translate(label)
+              ) : (
+                <Badge variant="dot" color="error" sx={{ '& > .MuiBadge-badge': { transform: 'scale(1) translate(125%, 0)' } }}>
+                  {translate(label)}
+                </Badge>
+              )
+            }
+          />
           {badge && (
             <ListItemAvatar>
               <Avatar type="filled" size="xs" color={badge.color ?? 'default'}>

package/src/components/ra-forms/LongForm/Provider.tsx

@@ -10,16 +10,19 @@ enum ActionType {
   SET_SYNC_WITH_LOCATION = 'setSyncWithLocation',
   SET_ACTIVE_ITEM = 'setActiveItem',
   ADD_ITEM = 'addItem',
-  REMOVE_ITEM = 'removeItem'
+  REMOVE_ITEM = 'removeItem',
+  SET_ERROR_COUNT = 'setErrorCount'
 }
 
 type IProviderProps = React.PropsWithChildren<{
   syncWithLocation?: boolean;
   rootMatchString?: string;
+  errorCount?: boolean;
 }>;
 type IState = {
   formRootPath?: string;
   syncWithLocation: boolean;
+  errorCount: boolean;
   items: Array<IItem>;
   activeItem?: string;
 };
@@ -32,6 +35,10 @@ type IAction =
       type: ActionType.SET_SYNC_WITH_LOCATION;
       payload: boolean;
     }
+  | {
+      type: ActionType.SET_ERROR_COUNT;
+      payload: boolean;
+    }
   | {
       type: ActionType.SET_ACTIVE_ITEM;
       payload?: string;
@@ -58,6 +65,8 @@ function reducer(state: IState, action: IAction): IState {
       return _.extend(newState, { formRootPath: payload });
     case ActionType.SET_SYNC_WITH_LOCATION:
       return _.extend(newState, { syncWithLocation: payload });
+    case ActionType.SET_ERROR_COUNT:
+      return _.extend(newState, { errorCount: payload });
     case ActionType.SET_ACTIVE_ITEM:
       return _.includes(getItemsIds(state.items), payload) ? _.extend(newState, { activeItem: payload }) : newState;
     case ActionType.ADD_ITEM: {
@@ -91,6 +100,7 @@ function reducer(state: IState, action: IAction): IState {
 
 const DefaultState: IState = {
   syncWithLocation: true,
+  errorCount: true,
   items: [],
   activeItem: undefined
 };
@@ -99,6 +109,7 @@ const Context = createContext<IContext | undefined>(undefined);
 
 function Provider(props: IProviderProps) {
   const syncWithLocation = Boolean(props.syncWithLocation ?? true),
+    errorCount = Boolean(props.errorCount ?? true),
     { rootMatchString } = props,
     { pathname } = useLocation(),
     [state, dispatch] = useReducer(reducer, _.cloneDeep(DefaultState)),
@@ -140,6 +151,13 @@ function Provider(props: IProviderProps) {
     });
   }, [syncWithLocation, dispatch]);
 
+  useEffect(() => {
+    dispatch({
+      type: ActionType.SET_ERROR_COUNT,
+      payload: Boolean(errorCount)
+    });
+  }, [errorCount, dispatch]);
+
   useEffect(() => {
     if (syncWithLocation && formRootPath !== undefined) {
       let locationItem = pathname.replace(formRootPath, '').replace(new RegExp(/^\/?/), '');
@@ -201,6 +219,11 @@ function useSyncWithLocation(): boolean {
   return state.syncWithLocation;
 }
 
+function useErrorCount(): boolean {
+  const state = useFormState();
+  return state.errorCount;
+}
+
 function useSetActiveItem(): (activeItem: string) => void {
   const dispatch = useFormDispatch(),
     setActiveItem = useCallback(
@@ -246,5 +269,15 @@ function useRemoveItem(): (item: string | IItem) => void {
   return removeItem;
 }
 
-export { Provider, useItems, useSyncWithLocation, useFormRootPath, useActiveItem, useSetActiveItem, useAddItem, useRemoveItem };
+export {
+  Provider,
+  useItems,
+  useSyncWithLocation,
+  useFormRootPath,
+  useActiveItem,
+  useSetActiveItem,
+  useAddItem,
+  useRemoveItem,
+  useErrorCount
+};
 export type { IProviderProps };

package/src/components/ra-forms/LongForm/Tab.tsx

@@ -1,22 +1,53 @@
 import _ from 'lodash';
 import { Box } from '@mui/material';
-import React, { Children, cloneElement, isValidElement, useEffect, useMemo } from 'react';
-import { useAddItem, useRemoveItem } from './Provider';
+import React, { Children, ReactElement, ReactNode, cloneElement, isValidElement, useEffect, useMemo } from 'react';
+import { useAddItem, useRemoveItem, useErrorCount } from './Provider';
 import { Optional } from 'src/types';
 import { IItem } from './types';
 import { useIsActive } from './hooks';
 import { getId } from './utils';
+import { useFormState } from 'react-hook-form';
 
-type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id' | 'index'>>;
+type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id' | 'index'> & { sources: Array<string> }>;
 type ITabProps = IBaseItemProps;
 type IGroupProps = IBaseItemProps;
 
+function walkChildren(children: ReactNode = [], callback: (el: ReactElement) => void) {
+  const _children = _.isArray(children) ? children : [children],
+    validChildren = _.filter(_children, (child) => isValidElement(child));
+  _.each(validChildren, (child) => {
+    callback(child);
+    walkChildren(child?.props?.children ?? [], callback);
+  });
+}
+
 function BaseItem(props: IBaseItemProps) {
-  const { label, icon, badge, index = 0 } = props,
+  const { errors } = useFormState(),
+    countErrors = useErrorCount(),
+    { label, icon, badge, index = 0, children } = props,
     id = getId(props),
     addItem = useAddItem(),
     removeItem = useRemoveItem(),
-    visible = useIsActive(id);
+    visible = useIsActive(id),
+    sources: Array<string> = [];
+
+  if (countErrors) {
+    if (props.sources !== undefined) {
+      sources.push(...props.sources);
+    } else {
+      walkChildren(children, (el) => {
+        if (el?.props?.source !== undefined) {
+          sources.push(el.props.source);
+        }
+      });
+    }
+  }
+
+  const errorsCount = _.chain(sources)
+    .uniq()
+    .map((s) => _.get(errors, s))
+    .reject((s) => s === undefined)
+    .value().length;
 
   useEffect(() => {
     addItem({
@@ -24,12 +55,13 @@ function BaseItem(props: IBaseItemProps) {
       index: index,
       label: label,
       icon: icon,
-      badge: badge
+      badge: badge,
+      errors: errorsCount
     });
     return () => {
       removeItem(id);
     };
-  }, [addItem, removeItem, label, icon, id, badge, index]);
+  }, [addItem, removeItem, label, icon, id, badge, index, errorsCount]);
 
   /* All tabs are rendered (not only the one in focus), to allow validation
   on tabs not in focus. The tabs receive a `hidden` property, which they'll

package/src/components/ra-forms/LongForm/index.ts

@@ -6,6 +6,7 @@ import {
   useActiveItem,
   useItems,
   useSyncWithLocation,
+  useErrorCount,
   useSetActiveItem,
   useAddItem,
   useRemoveItem,
@@ -21,6 +22,7 @@ type IForm = typeof Form & {
   Provider: typeof Provider;
   useItems: typeof useItems;
   useSyncWithLocation: typeof useSyncWithLocation;
+  useErrorCount: typeof useErrorCount;
   useFormRootPath: typeof useFormRootPath;
   useActiveItem: typeof useActiveItem;
   useSetActiveItem: typeof useSetActiveItem;
@@ -44,6 +46,7 @@ DefaultForm.Content = Content;
 DefaultForm.Provider = Provider;
 DefaultForm.useItems = useItems;
 DefaultForm.useSyncWithLocation = useSyncWithLocation;
+DefaultForm.useErrorCount = useErrorCount;
 DefaultForm.useFormRootPath = useFormRootPath;
 DefaultForm.useActiveItem = useActiveItem;
 DefaultForm.useSetActiveItem = useSetActiveItem;

package/src/components/ra-forms/LongForm/types.ts

@@ -15,6 +15,7 @@ type IItem = {
     content: string | number;
     color?: 'default' | 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'warning';
   };
+  errors?: number;
 };
 
 export type { Disposition, IItem };