OM-335: label/fields adjustments, change ui/placemenet of action butt…

…ons (#75) * OM-335: label/fields adjustments, change ui/placemenet of action buttons * OM-335: change button label size
openimis · Oct 18, 2024 · d30885a · d30885a
1 parent 1d82ffa
commit d30885a
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 86 deletions.
diff --git a/src/components/MPayBillButton.js b/src/components/MPayBillButton.js
@@ -22,13 +22,12 @@ function MPayBillButton({ bill }) {
   return (
     <Grid item>
       <Button
-        size="small"
         variant="contained"
         color="primary"
         startIcon={<AccountBalanceIcon />}
         onClick={handleOnClick}
       >
-        <Typography variant="subtitle1">{formatMessage('workerVoucher.MPayBillButton')}</Typography>
+        <Typography variant="body2">{formatMessage('workerVoucher.MPayBillButton')}</Typography>
       </Button>
     </Grid>
   );

diff --git a/src/components/VoucherAcquirementForm.js b/src/components/VoucherAcquirementForm.js
@@ -54,12 +54,11 @@ function VoucherAcquirementForm() {
                 <PublishedComponent
                   pubRef="workerVoucher.VoucherAcquirementMethodPicker"
                   label="workerVoucher.acquirement.method"
-                  nullLabel="workerVoucher.acquirement.method.NONE"
                   acquirementMethod={acquirementMethod}
                   setAcquirementMethod={setAcquirementMethod}
                   readOnly={!genericVoucherEnabled}
                   required
-                  withNull
+                  withNull={false}
                   withLabel
                 />
               </Grid>

diff --git a/src/components/VoucherAcquirementGenericVoucher.js b/src/components/VoucherAcquirementGenericVoucher.js
@@ -5,6 +5,7 @@ import {
   Button, Divider, Grid, Tooltip, Typography,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
+import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 
 import {
   coreAlert,
@@ -148,12 +149,13 @@ function VoucherAcquirementGenericVoucher() {
           >
             <span>
               <Button
-                variant="outlined"
-                style={{ border: 0 }}
+                variant="contained"
+                color="primary"
                 onClick={onVoucherAcquire}
+                startIcon={<ShoppingCartIcon />}
                 disabled={acquirementBlocked(voucherAcquirement)}
               >
-                <Typography variant="subtitle1">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
+                <Typography variant="body2">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
               </Button>
             </span>
           </Tooltip>

diff --git a/src/components/VoucherAcquirementSpecificWorker.js b/src/components/VoucherAcquirementSpecificWorker.js
@@ -5,6 +5,7 @@ import {
   Button, Divider, Grid, Tooltip, Typography,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
+import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 
 import {
   coreAlert,
@@ -31,6 +32,12 @@ export const useStyles = makeStyles((theme) => ({
   },
   tableTitle: theme.table.title,
   item: theme.paper.item,
+  listItem: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    marginBottom: theme.spacing(0.5),
+    backgroundColor: theme.palette.background.paper,
+  },
 }));
 
 function VoucherAcquirementSpecificWorker() {
@@ -155,12 +162,13 @@ function VoucherAcquirementSpecificWorker() {
           >
             <span>
               <Button
-                variant="outlined"
-                style={{ border: 0 }}
+                variant="contained"
+                color="primary"
                 onClick={onVoucherAcquire}
+                startIcon={<ShoppingCartIcon />}
                 disabled={acquirementBlocked(voucherAcquirement)}
               >
-                <Typography variant="subtitle1">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
+                <Typography variant="body2">{formatMessage('workerVoucher.acquire.voucher')}</Typography>
               </Button>
             </span>
           </Tooltip>

diff --git a/src/components/VoucherAssignmentForm.js b/src/components/VoucherAssignmentForm.js
@@ -5,6 +5,7 @@ import {
   Divider, Grid, Paper, Typography, Button, Tooltip,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
+import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
 
 import {
   coreAlert, useModulesManager, useTranslations, journalize, historyPush, useHistory,
@@ -24,6 +25,12 @@ export const useStyles = makeStyles((theme) => ({
   },
   tableTitle: theme.table.title,
   item: theme.paper.item,
+  listItem: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    marginBottom: theme.spacing(0.5),
+    backgroundColor: theme.palette.background.paper,
+  },
 }));
 
 function VoucherAssignmentForm() {
@@ -122,12 +129,13 @@ function VoucherAssignmentForm() {
               >
                 <span>
                   <Button
-                    variant="outlined"
-                    style={{ border: 0 }}
+                    variant="contained"
+                    color="primary"
+                    startIcon={<AssignmentIndIcon />}
                     onClick={onVoucherAssign}
                     disabled={assignmentBlocked(voucherAssignment)}
                   >
-                    <Typography variant="subtitle1">{formatMessage('workerVoucher.assign.voucher')}</Typography>
+                    <Typography variant="body2">{formatMessage('workerVoucher.assign.voucher')}</Typography>
                   </Button>
                 </span>
               </Tooltip>

diff --git a/src/components/VoucherDetailsPanel.js b/src/components/VoucherDetailsPanel.js
@@ -72,7 +72,7 @@ function VoucherDetailsPanel({
                     handlePrint(null, () => voucherPrintTemplateRef.current);
                   }}
                 >
-                  <Typography variant="subtitle1">{formatMessage('workerVoucher.printVoucher')}</Typography>
+                  <Typography variant="body2">{formatMessage('workerVoucher.printVoucher')}</Typography>
                 </Button>
               )}
               <Button
@@ -83,7 +83,7 @@ function VoucherDetailsPanel({
                 startIcon={<ReceiptIcon />}
                 onClick={redirectToTheLinkedBill}
               >
-                <Typography variant="subtitle1">{formatMessage('workerVoucher.navigateToTheBill.tooltip')}</Typography>
+                <Typography variant="body2">{formatMessage('workerVoucher.navigateToTheBill.tooltip')}</Typography>
               </Button>
             </Grid>
           )}

diff --git a/src/components/VoucherSearcher.js b/src/components/VoucherSearcher.js
@@ -217,6 +217,7 @@ function VoucherSearcher({ downloadWorkerVoucher, fetchWorkerVouchers, clearWork
         exportFileFormats={EXPORT_FILE_FORMATS}
         exportFileFormat={exportFileFormat}
         setExportFileFormat={setExportFileFormat}
+        downloadWithIconButton
       />
       {failedExport && (
         <Dialog open={failedExport} fullWidth maxWidth="sm">

diff --git a/src/components/WorkerSearcher.js b/src/components/WorkerSearcher.js
@@ -40,7 +40,9 @@ import { useUploadWorkerContext } from '../context/UploadWorkerContext';
 
 const WORKER_SEARCHER_ACTION_CONTRIBUTION_KEY = 'workerVoucher.WorkerSearcherAction.select';
 
-function WorkerSearcher({ downloadWorkers, fetchWorkers: fetchWorkersAction, clearWorkersExport }) {
+function WorkerSearcher({
+  downloadWorkers, fetchWorkers: fetchWorkersAction, clearWorkersExport, searcherActions = [], enableActionButtons,
+}) {
   const history = useHistory();
   const modulesManager = useModulesManager();
   const dispatch = useDispatch();
@@ -285,6 +287,9 @@ function WorkerSearcher({ downloadWorkers, fetchWorkers: fetchWorkersAction, cle
         exportFileFormats={EXPORT_FILE_FORMATS}
         exportFileFormat={exportFileFormat}
         setExportFileFormat={setExportFileFormat}
+        enableActionButtons={enableActionButtons}
+        searcherActions={searcherActions}
+        downloadWithIconButton
       />
       {failedExport && (
         <Dialog open={failedExport} fullWidth maxWidth="sm">

diff --git a/src/components/WorkerSearcherSelectActions.js b/src/components/WorkerSearcherSelectActions.js
@@ -1,24 +1,31 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { MenuItem, Tooltip } from '@material-ui/core';
+import {
+  MenuItem, Tooltip, Typography, Button,
+} from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
+import DeleteIcon from '@material-ui/icons/Delete';
 
 import { SelectDialog, journalize, useTranslations } from '@openimis/fe-core';
 import { deleteWorkersFromEconomicUnit } from '../actions';
 import { MODULE_NAME } from '../constants';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   uppercase: {
     textTransform: 'uppercase',
   },
+  trigger: {
+    marginLeft: theme.spacing(1),
+  },
 }));
 
 function WorkerSearcherSelectActions({
   selection: selectedWorkers,
   refetch: refetchWorkers,
   clearSelected,
   withSelection,
+  downloadWithIconButton = false,
 }) {
   const prevSubmittingMutationRef = useRef();
   const prevEconomicUnitRef = useRef();
@@ -71,9 +78,24 @@ function WorkerSearcherSelectActions({
   return (
     <>
       <Tooltip title={formatMessage('workerVoucher.tooltip.bulkDelete')}>
-        <MenuItem onClick={setIsBulkDeleteDialogOpen} disabled={!isWorkerSelected}>
-          <span className={classes.uppercase}>{formatMessage('workerVoucher.WorkerSearcherSelectActions.delete')}</span>
-        </MenuItem>
+        {downloadWithIconButton ? (
+          <Button
+            onClick={setIsBulkDeleteDialogOpen}
+            disabled={!isWorkerSelected}
+            variant="contained"
+            color="primary"
+            startIcon={<DeleteIcon />}
+            className={classes.trigger}
+          >
+            <Typography variant="body2">{formatMessage('workerVoucher.WorkerSearcherSelectActions.delete')}</Typography>
+          </Button>
+        ) : (
+          <MenuItem onClick={setIsBulkDeleteDialogOpen} disabled={!isWorkerSelected}>
+            <span className={classes.uppercase}>
+              {formatMessage('workerVoucher.WorkerSearcherSelectActions.delete')}
+            </span>
+          </MenuItem>
+        )}
       </Tooltip>
       <SelectDialog
         module={MODULE_NAME}

diff --git a/src/pages/WorkersPage.js b/src/pages/WorkersPage.js
@@ -1,17 +1,12 @@
 import React, { useState } from 'react';
-import clsx from 'clsx';
 import { useSelector } from 'react-redux';
 
-import { Fab } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 import { makeStyles } from '@material-ui/styles';
 
 import {
-  Helmet,
-  historyPush,
-  useHistory,
-  useModulesManager, useTranslations, withTooltip,
+  Helmet, historyPush, useHistory, useModulesManager, useTranslations,
 } from '@openimis/fe-core';
 import WorkerSearcher from '../components/WorkerSearcher';
 import {
@@ -37,7 +32,6 @@ function WorkersPage() {
   const classes = useStyles();
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
   const rights = useSelector((state) => state.core?.user?.i_user?.rights ?? []);
-  const leftPlacement = 'left';
 
   const onAddRedirect = () => {
     historyPush(modulesManager, history, 'workerVoucher.route.worker');
@@ -51,31 +45,28 @@ function WorkersPage() {
     setUploadOpen(false);
   };
 
+  const SEARCHER_ACTIONS = [
+    {
+      label: formatMessage('workerVoucher.WorkersPage.uploadAction'),
+      icon: <CloudUploadIcon />,
+      authorized: rights.includes(RIGHT_WORKER_UPLOAD),
+      onClick: onUploadOpen,
+    },
+    {
+      label: formatMessage('workerVoucher.WorkersPage.addAction'),
+      icon: <AddIcon />,
+      authorized: rights.includes(RIGHT_WORKER_ADD),
+      onClick: onAddRedirect,
+    },
+  ];
+
   return (
     rights.includes(RIGHT_WORKER_SEARCH) && (
       <UploadWorkerProvider>
         <UploadWorkerModal open={uploadOpen} onClose={onUploadClose} />
         <div className={classes.page}>
           <Helmet title={formatMessage('workerVoucher.menu.workersList')} />
-          <WorkerSearcher />
-          <div className={clsx(classes.fab, classes.wrapper)}>
-            {rights.includes(RIGHT_WORKER_UPLOAD)
-              && withTooltip(
-                <Fab color="primary" onClick={onUploadOpen}>
-                  <CloudUploadIcon />
-                </Fab>,
-                formatMessage('workerVoucher.WorkersPage.uploadTooltip'),
-                leftPlacement,
-              )}
-            {rights.includes(RIGHT_WORKER_ADD)
-              && withTooltip(
-                <Fab color="primary" onClick={onAddRedirect}>
-                  <AddIcon />
-                </Fab>,
-                formatMessage('workerVoucher.WorkersPage.addTooltip'),
-                leftPlacement,
-              )}
-          </div>
+          <WorkerSearcher searcherActions={SEARCHER_ACTIONS} enableActionButtons />
         </div>
       </UploadWorkerProvider>
     )

diff --git a/src/pickers/WorkerDateRangePicker.js b/src/pickers/WorkerDateRangePicker.js
@@ -6,7 +6,6 @@ import {
   Button,
   List,
   ListItem,
-  IconButton,
   ListItemText,
   ListItemSecondaryAction,
   Avatar,
@@ -50,7 +49,10 @@ function WorkerDateRangePicker({
 
   return (
     <Grid container>
-      <Grid xs={4}>
+      <Grid xs={5}>
+        <Typography variant="subtitle1" style={{ padding: '10px 0 0 10px' }}>
+          {formatMessage('workerVoucher.WorkerDateRangePicker.selectDate')}
+        </Typography>
         <Grid container direction="row">
           <Grid xs={6} className={classes.item}>
             <PublishedComponent
@@ -82,26 +84,24 @@ function WorkerDateRangePicker({
           </Grid>
         </Grid>
         <Grid className={classes.item}>
-          {
-            !startDate || !endDate ? (
-              <Tooltip title={formatMessage('workerVoucher.WorkerDateRangePicker.noDates')}>
-                <span>
-                  <Button variant="contained" color="primary" onClick={addDateRange} disabled={!startDate || !endDate}>
-                    {formatMessage('workerVoucher.WorkerDateRangePicker.addButton')}
-                  </Button>
-                </span>
-              </Tooltip>
-            ) : (
+          {!startDate || !endDate ? (
+            <Tooltip title={formatMessage('workerVoucher.WorkerDateRangePicker.noDates')}>
               <span>
                 <Button variant="contained" color="primary" onClick={addDateRange} disabled={!startDate || !endDate}>
                   {formatMessage('workerVoucher.WorkerDateRangePicker.addButton')}
                 </Button>
               </span>
-            )
-          }
+            </Tooltip>
+          ) : (
+            <span>
+              <Button variant="contained" color="primary" onClick={addDateRange} disabled={!startDate || !endDate}>
+                {formatMessage('workerVoucher.WorkerDateRangePicker.addButton')}
+              </Button>
+            </span>
+          )}
         </Grid>
       </Grid>
-      <Grid container xs={8} style={{ padding: '0 10px 0 0' }}>
+      <Grid container xs={7} style={{ padding: '0 10px 0 0' }}>
         <Grid xs={12} style={{ margin: '0 0 0 12px' }}>
           <Typography variant="subtitle1" style={{ padding: '10px 0 0 0' }}>
             {formatMessage('workerVoucher.WorkerDateRangePicker.dateRanges')}
@@ -123,14 +123,19 @@ function WorkerDateRangePicker({
                   />
                   <ListItemSecondaryAction>
                     <Tooltip title={formatMessage('workerVoucher.WorkerDateRangePicker.deleteRange')}>
-                      <IconButton
+                      <Button
+                        variant="contained"
+                        color="primary"
                         onClick={() => deleteDateRange(index)}
                         edge="end"
                         aria-label="delete"
                         disabled={readOnly}
+                        startIcon={<DeleteIcon />}
                       >
-                        <DeleteIcon />
-                      </IconButton>
+                        <Typography variant="body2">
+                          {formatMessage('workerVoucher.WorkerDateRangePicker.deleteRange')}
+                        </Typography>
+                      </Button>
                     </Tooltip>
                   </ListItemSecondaryAction>
                 </ListItem>