Merge pull request #139 from irontec/CDL-62-additional-action-buttons…

…-in-no-items-window Added global actions on empty screen
irontec · Sep 25, 2024 · f101a28 · f101a28
2 parents e8abf20 + c2f0a97
commit f101a28
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/library/package.json b/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",

diff --git a/library/src/components/List/Content/Empty.styles.tsx b/library/src/components/List/Content/Empty.styles.tsx
@@ -22,5 +22,13 @@ export const StyledEmpty = styled(Empty)(() => {
     '& img': {
       maxWidth: '100%',
     },
+
+    '& .empty-actions': {
+      display: 'flex',
+      flexDirection: 'row',
+      '& a': {
+        marginLeft: '8px',
+      },
+    },
   };
 });
diff --git a/library/src/components/List/Content/Empty.tsx b/library/src/components/List/Content/Empty.tsx
@@ -3,8 +3,10 @@ import EntityService from '../../../services/entity/EntityService';
 import _ from '../../../services/translations/translate';
 import { SolidButton } from '../../shared/Button/Button.styles';
 import { useTranslation } from 'react-i18next';
-import { Fade } from '@mui/material';
+import { Box, Fade } from '@mui/material';
 import { useStoreState } from '../../../store';
+import { GlobalFunctionComponent, MultiSelectFunctionComponent } from 'router';
+import { MultiselectMoreChildEntityLinks } from './Shared/MultiselectMoreChildEntityLinks';
 
 export interface EmptyProps {
   entityService: EntityService;
@@ -16,7 +18,6 @@ export const Empty = (props: EmptyProps): JSX.Element => {
   const { t } = useTranslation();
 
   const entity = entityService.getEntity();
-
   const parentRow = useStoreState((state) => state.list.parentRow);
   const acls = entityService.getAcls(parentRow);
   const { create = false } = acls;
@@ -30,6 +31,9 @@ export const Empty = (props: EmptyProps): JSX.Element => {
     singularTitle = t(translationKey, { count: 1 }).toLowerCase();
     pluralTitle = t(translationKey, { count: 2 }).toLowerCase();
   }
+  const globalActions = Object.values(entity.customActions).filter(
+    (action) => action.global
+  );
 
   return (
     <Fade
@@ -48,11 +52,41 @@ export const Empty = (props: EmptyProps): JSX.Element => {
           })}
         </p>
         {create && (
-          <Link to={location.pathname + '/create'}>
-            <SolidButton>
-              {_('New {{entity}}', { entity: singularTitle })}
-            </SolidButton>
-          </Link>
+          <Box className='empty-actions'>
+            {globalActions &&
+              globalActions.length < 2 &&
+              globalActions
+                .map(
+                  (item) =>
+                    item.action as
+                      | MultiSelectFunctionComponent
+                      | GlobalFunctionComponent
+                )
+                .map((Action, key) => {
+                  return (
+                    <Action
+                      key={key}
+                      rows={[]}
+                      selectedValues={[]}
+                      entityService={entityService}
+                    />
+                  );
+                })}
+            {globalActions && globalActions.length > 1 && (
+              <MultiselectMoreChildEntityLinks
+                childActions={globalActions}
+                selectedValues={[]}
+                rows={[]}
+                entityService={entityService}
+              />
+            )}
+
+            <Link to={location.pathname + '/create'}>
+              <SolidButton>
+                {_('New {{entity}}', { entity: singularTitle })}
+              </SolidButton>
+            </Link>
+          </Box>
         )}
       </section>
     </Fade>