(feat) O3-5121: Add ability to edit cashpoints

src/billable-services/billable-service.resource.ts

@@ -99,3 +99,25 @@ export const updateBillableService = (uuid: string, payload: UpdateBillableServi
     },
   });
 };
+
+export const createCashPoint = (payload: any) => {
+  const url = `${apiBasePath}cashPoint`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: payload,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const updateCashPoint = (uuid: string, payload: any) => {
+  const url = `${apiBasePath}/cashPoint/${uuid}`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};

src/billable-services/cash-point/add-cash-point.modal.tsx

@@ -5,6 +5,8 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Button, Dropdown, Form, ModalBody, ModalFooter, ModalHeader, TextInput } from '@carbon/react';
 import { showSnackbar, openmrsFetch, restBaseUrl, getCoreTranslation } from '@openmrs/esm-framework';
+import { type CashPoint } from '../../types';
+import { createCashPoint, updateCashPoint } from '../billable-service.resource';
 
 type CashPointFormValues = {
   name: string;
@@ -13,11 +15,12 @@ type CashPointFormValues = {
 };
 
 interface AddCashPointModalProps {
+  cashPointToEdit?: CashPoint;
   closeModal: () => void;
   onCashPointAdded: () => void;
 }
 
-const AddCashPointModal: React.FC<AddCashPointModalProps> = ({ closeModal, onCashPointAdded }) => {
+const AddCashPointModal: React.FC<AddCashPointModalProps> = ({ cashPointToEdit, closeModal, onCashPointAdded }) => {
   const { t } = useTranslation();
   const [locations, setLocations] = useState([]);
 
@@ -41,9 +44,9 @@ const AddCashPointModal: React.FC<AddCashPointModalProps> = ({ closeModal, onCas
   } = useForm<CashPointFormValues>({
     resolver: zodResolver(cashPointSchema),
     defaultValues: {
-      name: '',
-      uuid: '',
-      location: '',
+      name: cashPointToEdit?.name || '',
+      uuid: cashPointToEdit?.uuid || '',
+      location: cashPointToEdit?.location?.uuid || '',
     },
   });
 
@@ -70,27 +73,29 @@ const AddCashPointModal: React.FC<AddCashPointModalProps> = ({ closeModal, onCas
   }, [fetchLocations]);
 
   const onSubmit = async (data: CashPointFormValues) => {
+    const payload = {
+      name: data.name,
+      uuid: data.uuid,
+      location: { uuid: data.location },
+    };
     try {
-      await openmrsFetch(`${restBaseUrl}/billing/cashPoint`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: {
-          name: data.name,
-          uuid: data.uuid,
-          location: { uuid: data.location },
-        },
-      });
-
       showSnackbar({
         title: t('success', 'Success'),
         subtitle: t('cashPointSaved', 'Cash point was successfully saved.'),
         kind: 'success',
       });
 
       closeModal();
-      reset({ name: '', uuid: '', location: '' });
+      reset({
+        name: cashPointToEdit?.name || '',
+        uuid: cashPointToEdit?.uuid || '',
+        location: cashPointToEdit?.location.uuid || '',
+      });
+      if (cashPointToEdit) {
+        await updateCashPoint(cashPointToEdit.uuid, payload);
+      } else {
+        await createCashPoint(payload);
+      }
       onCashPointAdded();
     } catch (err) {
       showSnackbar({

src/billable-services/cash-point/cash-point-configuration.component.tsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useCallback } from 'react';
 import {
   Button,
   DataTable,
+  OverflowMenu,
+  OverflowMenuItem,
   Table,
   TableBody,
   TableCell,
@@ -12,13 +14,23 @@ import {
 } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { showSnackbar, openmrsFetch, restBaseUrl, showModal, getCoreTranslation } from '@openmrs/esm-framework';
+import {
+  showSnackbar,
+  openmrsFetch,
+  restBaseUrl,
+  showModal,
+  getCoreTranslation,
+  isDesktop,
+  useLayoutType,
+} from '@openmrs/esm-framework';
 import { CardHeader } from '@openmrs/esm-patient-common-lib';
 import styles from './cash-point-configuration.scss';
+import { type CashPoint } from '../../types/index';
 
 const CashPointConfiguration: React.FC = () => {
   const { t } = useTranslation();
   const [cashPoints, setCashPoints] = useState([]);
+  const layout = useLayoutType();
 
   const fetchCashPoints = useCallback(async () => {
     try {
@@ -45,7 +57,15 @@ const CashPointConfiguration: React.FC = () => {
     });
   };
 
-  const rowData = cashPoints.map((point) => ({
+  const handleEditCashPoint = (point: CashPoint) => {
+    const dispose = showModal('add-cash-point-modal', {
+      cashPointToEdit: point,
+      onCashPointAdded: fetchCashPoints,
+      closeModal: () => dispose(),
+    });
+  };
+
+  const rowData = cashPoints.map((point: CashPoint) => ({
     id: point.uuid,
     name: point.name,
     uuid: point.uuid,
@@ -67,7 +87,7 @@ const CashPointConfiguration: React.FC = () => {
           </Button>
         </CardHeader>
         <div>
-          <DataTable rows={rowData} headers={headerData} isSortable size="lg">
+          <DataTable rows={rowData} headers={headerData} isSortable size="lg" overflowMenuOnHover={isDesktop(layout)}>
             {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
               <TableContainer>
                 <Table className={styles.table} {...getTableProps()}>
@@ -78,6 +98,7 @@ const CashPointConfiguration: React.FC = () => {
                           {header.header}
                         </TableHeader>
                       ))}
+                      <TableHeader aria-label={getCoreTranslation('actions')} />
                     </TableRow>
                   </TableHead>
                   <TableBody>
@@ -86,6 +107,15 @@ const CashPointConfiguration: React.FC = () => {
                         {row.cells.map((cell) => (
                           <TableCell key={cell.id}>{cell.value}</TableCell>
                         ))}
+                        <TableCell className="cds--table-column-menu">
+                          <OverflowMenu size="lg" flipped>
+                            <OverflowMenuItem
+                              className={styles.menuItem}
+                              itemText={t('editCashPoint', 'Edit cash point')}
+                              onClick={() => handleEditCashPoint(cashPoints.find((point) => point.uuid === row.id))}
+                            />
+                          </OverflowMenu>
+                        </TableCell>
                       </TableRow>
                     ))}
                   </TableBody>

src/types/index.ts

@@ -33,7 +33,7 @@ interface Location {
   links: LocationLink[];
 }
 
-interface CashPoint {
+export interface CashPoint {
   uuid: string;
   name: string;
   description: string;

translations/en.json

@@ -76,6 +76,7 @@
   "editBillableService": "Edit billable service",
   "editBillableServices": "Edit Billable Services",
   "editBillLineItem": "Edit bill line item",
+  "editCashPoint": "Edit cash point",
   "editThisBillItem": "Edit this bill item",
   "enterAmount": "Enter amount",
   "enterConcept": "Associated concept",