Merge pull request #139 from OpenLMIS-Angola/OAM-226-add-missing-tran…

…slations OAM-226: Added missing translaitons to order create component
OpenLMIS-Angola · Jun 24, 2024 · 0f83f43 · 0f83f43
2 parents 4a87089 + 8cf2bf2
commit 0f83f43
Show file tree

Hide file tree

Showing 13 changed files with 193 additions and 41 deletions.
diff --git a/src/react-components/table/messages_en.json b/src/react-components/table/messages_en.json
@@ -0,0 +1,3 @@
+{
+    "react.table.noItems": "Showing no items"
+}
diff --git a/src/react-components/table/table.jsx b/src/react-components/table/table.jsx
@@ -13,13 +13,14 @@
  * http://www.gnu.org/licenses.  For additional information contact [email protected]. 
  */
 
-import React, { useRef, useState, useLayoutEffect } from 'react';
+import React, { useRef, useState, useLayoutEffect, useMemo } from 'react';
 import { useTable, usePagination } from 'react-table';
 
 import PrevPageButton from '../buttons/prev-page-button';
 import NextPageButton from '../buttons/next-page-button';
 import PageButton from '../buttons/page-button';
 
+import getService from '../utils/angular-utils';
 
 const Table = ({
     columns,
@@ -71,6 +72,8 @@ const Table = ({
         usePagination
     );
 
+    const { formatMessage } = useMemo(() => getService('messageService'), []);
+
     const ref = useRef(null);
     // Get width of the table and pass it to the table-empty-message
     const [width, setWidth] = useState(0);
@@ -157,7 +160,7 @@ const Table = ({
                     </table>
                     {!data.length ? (
                         <div className='table-empty-message' style={{ width: width }}>
-                            <span>{!noItemsMessage ? "Showing no items" : noItemsMessage}</span>
+                            <span>{!noItemsMessage ? formatMessage('react.table.noItems') : noItemsMessage}</span>
                         </div>
                     ) : null}
                 </div>

diff --git a/src/requisition-order-create/messages_en.json b/src/requisition-order-create/messages_en.json
@@ -1,5 +1,9 @@
 {
   "requisition.orderCreate": "Create Orders",
+  "requisition.orderCreate.loading": "Loading",
+  "requisition.orderCreate.view": "View",
+  "requisition.orderCreate.printOrder": "Print Order",
+  "requisition.orderCreate.edit": "Edit",
   "requisition.orderCreate.create": "Create Order",
   "requisition.orderCreate.saveDraft": "Save Draft",
   "requisition.orderCreate.submitted": "Orders created successfully",
@@ -18,5 +22,17 @@
   "requisition.orderCreate.reqFacility": "Requesting Facility",
   "requisition.orderCreate.reqFacility.placeholder": "Select Requesting Facility",
   "requisition.orderCreate.supFacility": "Supplying Facility",
-  "requisition.orderCreate.supFacility.placeholder": "Select Supplying Facility"
+  "requisition.orderCreate.supFacility.placeholder": "Select Supplying Facility",
+  "requisition.orderCreate.table.productCode": "Product Code",
+  "requisition.orderCreate.table.product": "Product",
+  "requisition.orderCreate.table.soh": "SOH",
+  "requisition.orderCreate.table.quantity": "Quantity",
+  "requisition.orderCreate.table.actions": "Actions",
+  "requisition.orderCreate.table.facility": "Facility",
+  "requisition.orderCreate.table.addProduct": "Add",
+  "requisition.orderCreate.table.productAlreadyAdded": "This product was already added to the table",
+  "requisition.orderCreate.requisistionInfo.status": "Status",
+  "requisition.orderCreate.requisistionInfo.dateCreated": "Date Created",
+  "requisition.orderCreate.searchSelect.placeholder": "Select an option",
+  "requisition.orderCreate.searchSelect.empty.message": ""
 }
diff --git a/src/requisition-order-create/order-create-form.jsx b/src/requisition-order-create/order-create-form.jsx
@@ -39,7 +39,7 @@ const OrderCreateForm = () => {
     const { formatMessage } = useMemo(() => getService('messageService'), []);
     const facilityService = useMemo(() => getService('facilityService'), []);
     const orderService = useMemo(() => getService('orderCreateService'), []);
-    const columns = useMemo(() => orderCreateFormTableColumns, []);
+    const columns = useMemo(() => orderCreateFormTableColumns(formatMessage), []);
 
     const userId = useMemo(
         () => {

diff --git a/src/requisition-order-create/order-create-page.jsx b/src/requisition-order-create/order-create-page.jsx
@@ -13,23 +13,26 @@
  * http://www.gnu.org/licenses.  For additional information contact [email protected]. 
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { HashRouter as Router, Route, Switch, useLocation } from 'react-router-dom';
 import OrderCreateTable from './order-create-table';
 import OrderCreateForm from './order-create-form';
 import Breadcrumbs from '../react-components/breadcrumbs/breadcrumbs';
+import getService from '../react-components/utils/angular-utils';
 
 const OrderCreateRouting = () => {
     const location = useLocation();
     const queryParams = new URLSearchParams(location.search);
     const isReadOnly = queryParams.get('isReadOnly') === 'true';
+    const { formatMessage } = useMemo(() => getService('messageService'), []);
 
     return (
         <div className="page-responsive">
             <Breadcrumbs
                 routes={[
-                    { path: "/requisitions/orderCreate", breadcrumb: 'Create Order' },
-                    { path: "/requisitions/orderCreate/:orderIds", breadcrumb: isReadOnly ? 'View' : 'Edit' }
+                    { path: "/requisitions/orderCreate", breadcrumb: formatMessage('requisition.orderCreate') },
+                    { path: "/requisitions/orderCreate/:orderIds",
+                        breadcrumb: isReadOnly ? formatMessage('requisition.orderCreate.view') : formatMessage('requisition.orderCreate.edit') }
                 ]}
             />
             <Switch>

diff --git a/src/requisition-order-create/order-create-requisition-info.jsx b/src/requisition-order-create/order-create-requisition-info.jsx
@@ -1,28 +1,31 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { formatDate } from '../react-components/utils/format-utils';
+import getService from '../react-components/utils/angular-utils';
 
 const OrderCreateRequisitionInfo = ({ order }) => {
+    const { formatMessage } = useMemo(() => getService('messageService'), []);
+
     return (
         <aside className="requisition-info">
             <ul>
                 <li>
-                    <strong>Status</strong>
+                    <strong>{ formatMessage('requisition.orderCreate.requisistionInfo.status') }</strong>
                     {order.status}
                 </li>
                 <li>
-                    <strong>Date Created</strong>
+                    <strong>{ formatMessage('requisition.orderCreate.requisistionInfo.dateCreated') }</strong>
                     {formatDate(order.createdDate)}
                 </li>
                 <li>
-                    <strong>Program</strong>
+                    <strong>{ formatMessage('requisition.orderCreate.program') }</strong>
                     {_.get(order, ['program', 'name'])}
                 </li>
                 <li>
-                    <strong>Requesting Facility</strong>
+                    <strong>{ formatMessage('requisition.orderCreate.reqFacility') }</strong>
                     {_.get(order, ['requestingFacility', 'name'])}
                 </li>
                 <li>
-                    <strong>Supplying Facility</strong>
+                    <strong>{ formatMessage('requisition.orderCreate.supFacility') }</strong>
                     {_.get(order, ['supplyingFacility', 'name'])}
                 </li>
             </ul>

diff --git a/src/requisition-order-create/order-create-summary-modal.jsx b/src/requisition-order-create/order-create-summary-modal.jsx
@@ -3,10 +3,11 @@ import Modal from '../react-components/modals/modal';
 import EditableTable from '../react-components/table/editable-table';
 import { orderTableColumns } from './order-create.constant';
 import TabNavigation from '../react-components/tab-navigation/tab-navigation';
-
+import getService from '../react-components/utils/angular-utils';
 
 const OrderCreateSummaryModal = ({ isOpen, orders, onSaveClick, onModalClose }) => {
-    const columns = useMemo(() => orderTableColumns(true), []);
+    const { formatMessage } = useMemo(() => getService('messageService'), []);
+    const columns = useMemo(() => orderTableColumns(true, formatMessage), []);
     const [currentTab, setCurrentTab] = useState(0);
 
     return (

diff --git a/src/requisition-order-create/order-create-tab.jsx b/src/requisition-order-create/order-create-tab.jsx
@@ -21,7 +21,8 @@ const OrderCreateTab = ({ passedOrder,
     const [order, setOrder] = useState({ orderLineItems: [], ...passedOrder });
     const [selectedOrderable, setSelectedOrderable] = useState('');
     const [orderableOptions, setOrderableOptions] = useState(cachedOrderableOptions);
-    const columns = useMemo(() => orderTableColumns(isTableReadOnly), []);
+    const { formatMessage } = useMemo(() => getService('messageService'), []);
+    const columns = useMemo(() => orderTableColumns(isTableReadOnly, formatMessage), []);
     const orderCreatePrintService = useMemo(() => getService('orderCreatePrintService'), []);
 
     useMemo(() => {
@@ -95,11 +96,11 @@ const OrderCreateTab = ({ passedOrder,
                                     onChange={value => setSelectedOrderable(value)}
                                     objectKey={'id'}
                                     disabled={isTableReadOnly}
-                                >Product</SearchSelect>
+                                >{ formatMessage('requisition.orderCreate.table.product') }</SearchSelect>
                             }
                             <div className='buttons-container'>
                                 <Tippy
-                                    content="This product was already added to the table"
+                                    content={formatMessage('')}
                                     disabled={!isProductAdded}
                                 >
                                     {
@@ -109,7 +110,7 @@ const OrderCreateTab = ({ passedOrder,
                                                 className={"add"}
                                                 onClick={addOrderable}
                                                 disabled={!selectedOrderable || isProductAdded}
-                                            >Add</button>
+                                            >{ formatMessage('requisition.orderCreate.table.addProduct') }</button>
                                         </div>
                                     }
                                 </Tippy>
@@ -118,7 +119,7 @@ const OrderCreateTab = ({ passedOrder,
                                     <button
                                         className="order-print"
                                         onClick={printOrder}>
-                                        Print Order
+                                        { formatMessage('requisition.orderCreate.printOrder') }
                                     </button>
                                 }
                             </div>

diff --git a/src/requisition-order-create/order-create-table.jsx b/src/requisition-order-create/order-create-table.jsx
@@ -151,7 +151,7 @@ const OrderCreateTable = ({ isReadOnly }) => {
           });
       });
     };
-    
+
       const onOrderBatchDelete = () => {
         confirmDestroy(
           'requisition.orderCreate.delete.prompt.batch',
@@ -189,7 +189,7 @@ const OrderCreateTable = ({ isReadOnly }) => {
                 />
             }
             <div className="page-header-responsive">
-                <h2>Create Order</h2>
+                <h2>{ formatMessage('requisition.orderCreate') }</h2>
             </div>
             {
                 orders.length > 0 &&
@@ -235,7 +235,7 @@ const OrderCreateTable = ({ isReadOnly }) => {
                             }
                         } />
                 ) : (
-                    <p>Loading...</p>
+                    <p>{ formatMessage('requisition.orderCreate.loading') }...</p>
                 )}
             </div>
             <div className="page-footer">

diff --git a/src/requisition-order-create/order-create.constant.jsx b/src/requisition-order-create/order-create.constant.jsx
@@ -2,22 +2,22 @@ import React from 'react';
 import TrashButton from '../react-components/buttons/trash-button';
 import InputCell from '../react-components/table/input-cell';
 
-const orderTableDefaultColumns = [
+const orderTableDefaultColumns = (formatMessage) => [
     {
-        Header: 'Product Code',
+        Header: formatMessage('requisition.orderCreate.table.productCode'),
         accessor: 'orderable.productCode'
     },
     {
-        Header: 'Product',
+        Header: formatMessage('requisition.orderCreate.table.product'),
         accessor: 'orderable.fullProductName'
     },
     {
-        Header: 'SOH',
+        Header: formatMessage('requisition.orderCreate.table.soh'),
         accessor: 'soh',
         Cell: ({ value }) => (<div className="text-right">{value}</div>)
     },
     {
-        Header: 'Quantity',
+        Header: formatMessage('requisition.orderCreate.table.quantity'),
         accessor: 'orderedQuantity',
         Cell: (props) => (
             <InputCell
@@ -28,7 +28,7 @@ const orderTableDefaultColumns = [
         )
     },
     {
-        Header: 'Actions',
+        Header: formatMessage('requisition.orderCreate.table.actions'),
         accessor: 'id',
         Cell: ({ row: { index }, deleteRow }) => (
             <TrashButton
@@ -37,37 +37,38 @@ const orderTableDefaultColumns = [
     }
 ];
 
-const orderReadonlyTableColumns = [
+const orderReadonlyTableColumns = (formatMessage) => [
     {
-        Header: 'Product Code',
+        Header: formatMessage('requisition.orderCreate.table.productCode'),
         accessor: 'orderable.productCode'
     },
     {
-        Header: 'Product',
+        Header: formatMessage('requisition.orderCreate.table.product'),
         accessor: 'orderable.fullProductName'
     },
     {
-        Header: 'SOH',
+        Header: formatMessage('requisition.orderCreate.table.soh'),
         accessor: 'soh',
         Cell: ({ value }) => (<div className="text-right">{value}</div>)
     },
     {
-        Header: 'Quantity',
+        Header: formatMessage('requisition.orderCreate.table.quantity'),
         accessor: 'orderedQuantity',
     }
 ];
 
-export const orderTableColumns = (isTableReadOnly) => {
-    return isTableReadOnly ? orderReadonlyTableColumns : orderTableDefaultColumns;
+export const orderTableColumns = (isTableReadOnly, formatMessage) => {
+    return isTableReadOnly ? orderReadonlyTableColumns(formatMessage) :
+        orderTableDefaultColumns(formatMessage);
 }
 
-export const orderCreateFormTableColumns = [
+export const orderCreateFormTableColumns = (formatMessage) => [
     {
-        Header: 'Facility',
+        Header: formatMessage('requisition.orderCreate.table.facility'),
         accessor: 'name'
     },
     {
-        Header: 'Actions',
+        Header: formatMessage('requisition.orderCreate.table.actions'),
         accessor: 'value',
         Cell: ({ row: { index }, deleteRow }) => (
             <TrashButton onClick={() => deleteRow(index)} />