Merge pull request #5894 from msupply-foundation/5804-update-actions-…

…footer-across-all-tables 5804 PR 1 update actions footer across all detail view tables
msupply-foundation · Jan 6, 2025 · d36246d · d36246d
2 parents d9b6993 + 6fbbf29
commit d36246d
Show file tree

Hide file tree

Showing 27 changed files with 482 additions and 442 deletions.
diff --git a/client/packages/common/src/ui/layout/tables/columns/PaginationRow/PaginationRow.tsx b/client/packages/common/src/ui/layout/tables/columns/PaginationRow/PaginationRow.tsx
@@ -51,6 +51,8 @@ export const PaginationRow: FC<PaginationRowProps> = ({
   };
 
   const t = useTranslation();
+
+  // Is this now needed since the actions footer shows number of selected lines?
   const getNumberSelectedLabel = () =>
     !!numberSelected && `(${numberSelected} ${t('label.selected')})`;
 

diff --git a/client/packages/inventory/src/Stocktake/DetailView/ContentArea/columns.tsx b/client/packages/inventory/src/Stocktake/DetailView/ContentArea/columns.tsx
@@ -69,6 +69,7 @@ export const useStocktakeColumns = ({
   const columns: ColumnDescription<
     StocktakeLineFragment | StocktakeSummaryItem
   >[] = [
+    GenericColumnKey.Selection,
     [
       'itemCode',
       {
@@ -251,7 +252,6 @@ export const useStocktakeColumns = ({
         ]),
     },
     expandColumn,
-    GenericColumnKey.Selection,
   ];
 
   return useColumns(columns, { sortBy, onChangeSortBy }, [

diff --git a/client/packages/inventory/src/Stocktake/DetailView/Footer/Footer.tsx b/client/packages/inventory/src/Stocktake/DetailView/Footer/Footer.tsx
@@ -5,11 +5,19 @@ import {
   useTranslation,
   AppFooterPortal,
   StocktakeNodeStatus,
+  ArrowRightIcon,
+  RewindIcon,
+  Action,
+  DeleteIcon,
+  useEditModal,
+  ActionsFooter,
 } from '@openmsupply-client/common';
 import { stocktakeStatuses, getStocktakeTranslator } from '../../../utils';
 import { StocktakeFragment, useStocktake } from '../../api';
 import { StatusChangeButton } from './StatusChangeButton';
 import { StocktakeLockButton } from './StocktakeLockButton';
+import { ReduceLinesToZeroConfirmationModal } from '../ReduceLinesToZeroModal';
+import { ChangeLocationConfirmationModal } from '../ChangeLocationModal';
 
 const createStatusLog = (stocktake: StocktakeFragment) => {
   return {
@@ -21,30 +29,82 @@ const createStatusLog = (stocktake: StocktakeFragment) => {
 export const Footer = () => {
   const t = useTranslation();
   const { data: stocktake } = useStocktake.document.get();
+  const isDisabled = useStocktake.utils.isDisabled();
+  const onDelete = useStocktake.line.deleteSelected();
+
+  const reduceModal = useEditModal();
+  const changeLocationModal = useEditModal();
+
+  const selectedRows = useStocktake.utils.selectedRows();
+
+  const actions: Action[] = [
+    {
+      label: t('button.delete-lines'),
+      icon: <DeleteIcon />,
+      onClick: onDelete,
+      disabled: isDisabled,
+    },
+    {
+      label: t('button.change-location'),
+      icon: <ArrowRightIcon />,
+      onClick: changeLocationModal.onOpen,
+      disabled: isDisabled,
+    },
+    {
+      label: t('button.reduce-lines-to-zero'),
+      icon: <RewindIcon />,
+      onClick: reduceModal.onOpen,
+      disabled: isDisabled,
+    },
+  ];
 
   return (
     <AppFooterPortal
       Content={
-        stocktake && (
-          <Box
-            gap={2}
-            display="flex"
-            flexDirection="row"
-            alignItems="center"
-            height={64}
-          >
-            <StocktakeLockButton />
-            <StatusCrumbs
-              statuses={stocktakeStatuses}
-              statusLog={createStatusLog(stocktake)}
-              statusFormatter={getStocktakeTranslator(t)}
-            />
+        <>
+          {selectedRows.length !== 0 && (
+            <>
+              {
+                <ActionsFooter
+                  actions={actions}
+                  selectedRowCount={selectedRows.length}
+                />
+              }
+              {reduceModal.isOpen && (
+                <ReduceLinesToZeroConfirmationModal
+                  isOpen={reduceModal.isOpen}
+                  onCancel={reduceModal.onClose}
+                />
+              )}
+              {changeLocationModal.isOpen && (
+                <ChangeLocationConfirmationModal
+                  isOpen={changeLocationModal.isOpen}
+                  onCancel={changeLocationModal.onClose}
+                />
+              )}
+            </>
+          )}
+          {stocktake && selectedRows.length === 0 && (
+            <Box
+              gap={2}
+              display="flex"
+              flexDirection="row"
+              alignItems="center"
+              height={64}
+            >
+              <StocktakeLockButton />
+              <StatusCrumbs
+                statuses={stocktakeStatuses}
+                statusLog={createStatusLog(stocktake)}
+                statusFormatter={getStocktakeTranslator(t)}
+              />
 
-            <Box flex={1} display="flex" justifyContent="flex-end" gap={2}>
-              <StatusChangeButton />
+              <Box flex={1} display="flex" justifyContent="flex-end" gap={2}>
+                <StatusChangeButton />
+              </Box>
             </Box>
-          </Box>
-        )
+          )}
+        </>
       }
     />
   );

diff --git a/client/packages/inventory/src/Stocktake/DetailView/Toolbar.tsx b/client/packages/inventory/src/Stocktake/DetailView/Toolbar.tsx
@@ -2,9 +2,6 @@ import React from 'react';
 import {
   AppBarContentPortal,
   Grid,
-  DropdownMenu,
-  DropdownMenuItem,
-  DeleteIcon,
   useTranslation,
   BufferedTextInput,
   useBufferState,
@@ -15,22 +12,14 @@ import {
   DateUtils,
   Alert,
   useUrlQuery,
-  RewindIcon,
-  useEditModal,
-  useNotification,
-  ArrowRightIcon,
 } from '@openmsupply-client/common';
 import { useStocktake } from '../api';
-import { ReduceLinesToZeroConfirmationModal } from './ReduceLinesToZeroModal';
-import { ChangeLocationConfirmationModal } from './ChangeLocationModal';
 
 export const Toolbar = () => {
-  const { info } = useNotification();
   const isDisabled = useStocktake.utils.isDisabled();
   const t = useTranslation();
   const { isLocked, stocktakeDate, description, update } =
     useStocktake.document.fields(['isLocked', 'description', 'stocktakeDate']);
-  const onDelete = useStocktake.line.deleteSelected();
   const [descriptionBuffer, setDescriptionBuffer] = useBufferState(description);
 
   const infoMessage = isLocked
@@ -44,33 +33,6 @@ export const Toolbar = () => {
   const setItemFilter = (itemFilter: string) =>
     updateQuery({ itemCodeOrName: itemFilter });
 
-  const reduceModal = useEditModal();
-  const changeLocationModal = useEditModal();
-
-  const selectedRows = useStocktake.utils.selectedRows();
-
-  const checkSelected = () => {
-    if (!selectedRows.length) {
-      const selectRowsSnack = info(t('messages.no-lines-selected'));
-      selectRowsSnack();
-      return;
-    }
-    if (isDisabled) {
-      const isLockedSnack = info(t('error.is-locked'));
-      isLockedSnack();
-      return;
-    }
-    return true;
-  };
-
-  const openReduceToZeroModal = () => {
-    if (checkSelected()) reduceModal.onOpen();
-  };
-
-  const openChangeLocationModal = () => {
-    if (checkSelected()) changeLocationModal.onOpen();
-  };
-
   return (
     <AppBarContentPortal sx={{ display: 'flex', flex: 1, marginBottom: 1 }}>
       <Grid
@@ -80,18 +42,6 @@ export const Toolbar = () => {
         flex={1}
         alignItems="flex-end"
       >
-        {reduceModal.isOpen && (
-          <ReduceLinesToZeroConfirmationModal
-            isOpen={reduceModal.isOpen}
-            onCancel={reduceModal.onClose}
-          />
-        )}
-        {changeLocationModal.isOpen && (
-          <ChangeLocationConfirmationModal
-            isOpen={changeLocationModal.isOpen}
-            onCancel={changeLocationModal.onClose}
-          />
-        )}
         <Grid item display="flex" flex={1} flexDirection="column" gap={1}>
           <InputWithLabelRow
             label={t('heading.description')}
@@ -137,25 +87,6 @@ export const Toolbar = () => {
               setItemFilter(newValue);
             }}
           />
-          <DropdownMenu disabled={isDisabled} label={t('label.actions')}>
-            <>
-              <DropdownMenuItem
-                IconComponent={ArrowRightIcon}
-                onClick={openChangeLocationModal}
-              >
-                {t('button.change-location')}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                IconComponent={RewindIcon}
-                onClick={openReduceToZeroModal}
-              >
-                {t('button.reduce-lines-to-zero')}
-              </DropdownMenuItem>
-            </>
-            <DropdownMenuItem IconComponent={DeleteIcon} onClick={onDelete}>
-              {t('button.delete-lines')}
-            </DropdownMenuItem>
-          </DropdownMenu>
         </Grid>
       </Grid>
     </AppBarContentPortal>

diff --git a/client/packages/inventory/src/Stocktake/api/hooks/utils/useSelectedRows.ts b/client/packages/inventory/src/Stocktake/api/hooks/utils/useSelectedRows.ts
@@ -2,16 +2,10 @@ import { useTableStore } from '@openmsupply-client/common';
 import { useStocktakeRows } from '../line/useStocktakeRows';
 
 export const useSelectedRows = () => {
-  const { items, lines } = useStocktakeRows();
+  const { lines } = useStocktakeRows();
   const selectedRows =
     useTableStore(state => {
-      const { isGrouped } = state;
-
-      return isGrouped
-        ? items
-            ?.filter(({ id }) => state.rowState[id]?.isSelected)
-            .flatMap(({ lines }) => lines)
-        : lines?.filter(({ id }) => state.rowState[id]?.isSelected);
+      return lines?.filter(({ id }) => state.rowState[id]?.isSelected);
     }) || [];
 
   return selectedRows;

diff --git a/client/packages/invoices/src/InboundShipment/DetailView/DetailView.tsx b/client/packages/invoices/src/InboundShipment/DetailView/DetailView.tsx
@@ -118,11 +118,11 @@ export const DetailView: FC = () => {
         >
           <AppBarButtons onAddItem={() => onOpen()} />
 
-          <Toolbar onReturnLines={onReturn} />
+          <Toolbar />
 
           <DetailTabs tabs={tabs} />
 
-          <Footer />
+          <Footer onReturnLines={onReturn} />
           <SidePanel />
 
           {isOpen && (