OLMIS-7987: Fixed create orders view

src/requisition-order-create/messages_en.json

@@ -29,6 +29,7 @@
   "requisition.orderCreate.table.soh": "SOH",
   "requisition.orderCreate.table.quantity": "Quantity",
   "requisition.orderCreate.table.actions": "Actions",
+  "requisition.orderCreate.summary": "Orders Summary",
   "requisition.orderCreate.table.facility": "Facility",
   "requisition.orderCreate.table.addProduct": "Add",
   "requisition.orderCreate.table.productAlreadyAdded": "This product was already added to the table",

src/requisition-order-create/order-create-form.jsx

@@ -38,7 +38,8 @@ const OrderCreateForm = () => {
     const programService = useMemo(() => getService('programService'), []);
     const facilityService = useMemo(() => getService('facilityService'), []);
     const orderService = useMemo(() => getService('orderCreateService'), []);
-    const columns = useMemo(() => orderCreateFormTableColumns, []);
+    const { formatMessage } = useMemo(() => getService('messageService'), []);
+    const columns = useMemo(() => orderCreateFormTableColumns(formatMessage), []);
 
     const userId = useMemo(
         () => {
@@ -139,25 +140,25 @@ const OrderCreateForm = () => {
     return (
         <div className="page-container">
             <div className="page-header-responsive">
-                <h2>Create Order</h2>
+                <h2>{ formatMessage('requisition.orderCreate.create') }</h2>
             </div>
             <div className="page-content order-create-form">
                 <div className={'section'}>
-                    <div><strong className="is-required">Program</strong></div>
+                    <div><strong className="is-required">{ formatMessage('requisition.orderCreate.program') }</strong></div>
                     <SearchSelect
                         options={programOptions}
                         value={selectedProgram}
                         onChange={value => setSelectedProgram(value)}
-                        placeholder="Select program"
+                        placeholder={ formatMessage('requisition.orderCreate.program.placeholder')}
                     />
                 </div>
                 <div className={'section'}>
-                    <div><strong className="is-required">Requesting Facility</strong></div>
+                    <div><strong className="is-required">{ formatMessage('requisition.orderCreate.reqFacility') }</strong></div>
                     <SearchSelect
                         options={requestingFacilityOptions}
                         value={selectedRequestingFacilities.at(-1)}
                         onChange={value => setSelectedRequestingFacilities(prevState => [...prevState, value])}
-                        placeholder="Select requesting facility"
+                        placeholder={ formatMessage('requisition.orderCreate.reqFacility.placeholder')}
                     />
                     <EditableTable
                         additionalTableClass='facilities-table'
@@ -168,12 +169,12 @@ const OrderCreateForm = () => {
                     />
                 </div>
                 <div className={'section'}>
-                    <div><strong className="is-required">Supplying Facility</strong></div>
+                    <div><strong className="is-required">{ formatMessage('requisition.orderCreate.supFacility') }</strong></div>
                     <SearchSelect
                         options={supplyingFacilityOptions}
                         value={selectedSupplyingFacility}
                         onChange={value => setSelectedSupplyingFacility(value)}
-                        placeholder="Select supplying facility"
+                        placeholder={formatMessage('requisition.orderCreate.supFacility.placeholder')}
                         disabled={!selectedProgram || !selectedRequestingFacilities}
                     />
                 </div>
@@ -185,7 +186,7 @@ const OrderCreateForm = () => {
                         disabled={!selectedProgram || !selectedRequestingFacilities || !selectedSupplyingFacility}
                         onClick={createOrders}
                     >
-                        Create Order
+                        { formatMessage('requisition.orderCreate.create') }
                     </button>
                 </div>
             </div>

src/requisition-order-create/order-create-print.service.js

@@ -0,0 +1,47 @@
+/*
+ * This program is part of the OpenLMIS logistics management information system platform software.
+ * Copyright © 2017 VillageReach
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms
+ * of the GNU Affero General Public License as published by the Free Software Foundation, either
+ * version 3 of the License, or (at your option) any later version.
+ *  
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
+ * See the GNU Affero General Public License for more details. You should have received a copy of
+ * the GNU Affero General Public License along with this program. If not, see
+ * http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
+ */
+
+(function() {
+
+    'use strict';
+
+    /**
+     * @ngdoc service
+     * @name requisition-order-create.orderCreateService
+     *
+     * @description
+     * Communicates with the /api/orders endpoint of the OpenLMIS server.
+     */
+    angular
+        .module('requisition-order-create')
+        .service('orderCreatePrintService', service);
+
+    service.$inject = ['openlmisUrlFactory', 'accessTokenFactory', '$window'];
+
+    function service(openlmisUrlFactory, accessTokenFactory, $window) {
+        this.print = print;
+        this.reportId = '9b8726b9-0de6-46eb-b5d0-d035d400a61e';
+
+        function print(orderId) {
+            var reportUrl = '/api/reports/templates/angola/' +
+                this.reportId + '/pdf?order=' + orderId;
+            var url = accessTokenFactory.addAccessToken(
+                openlmisUrlFactory(reportUrl)
+            );
+
+            $window.open(url, '_blank');
+        }
+    }
+})();

src/requisition-order-create/order-create-summary-modal.jsx

@@ -16,7 +16,7 @@ const OrderCreateSummaryModal = ({ isOpen, orders, onSaveClick, onModalClose })
             body={
                 <>
                     <div className="react-modal-header">
-                        <span className='modal-title'>Orders Summary</span>
+                        <span className='modal-title'>{ formatMessage('requisition.orderCreate.summary') }</span>
                     </div>
                     <div className="react-modal-body">
                         <TabNavigation

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(() => {
@@ -93,11 +94,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}
                                 >
                                     {
@@ -107,7 +108,7 @@ const OrderCreateTab = ({ passedOrder,
                                                 className={"add"}
                                                 onClick={addOrderable}
                                                 disabled={!selectedOrderable || isProductAdded}
-                                            >Add</button>
+                                            >{ formatMessage('requisition.orderCreate.table.addProduct') }</button>
                                         </div>
                                     }
                                 </Tippy>
@@ -116,7 +117,7 @@ const OrderCreateTab = ({ passedOrder,
                                     <button
                                         className="order-print"
                                         onClick={printOrder}>
-                                        Print Order
+                                        { formatMessage('requisition.orderCreate.printOrder') }
                                     </button>
                                 }
                             </div>
@@ -134,7 +135,6 @@ const OrderCreateTab = ({ passedOrder,
                 </div>
             </div>
         </>
-
     );
 };
 

src/requisition-order-create/order-create-table.jsx

@@ -24,6 +24,7 @@ import { saveDraft, createOrder } from './reducers/orders.reducer';
 import { isOrderInvalid } from './order-create-validation-helper-functions';
 import OrderCreateSummaryModal from './order-create-summary-modal';
 import TabNavigation from '../react-components/tab-navigation/tab-navigation';
+import { ORDER_STATUS } from './order-create.constant';
 
 const OrderCreateTable = ({ isReadOnly }) => {
     const [orders, setOrders] = useState([]);
@@ -40,6 +41,8 @@ const OrderCreateTable = ({ isReadOnly }) => {
     const orderService = useMemo(() => getService('orderCreateService'), []);
     const notificationService = useMemo(() => getService('notificationService'), []);
     const offlineService = useMemo(() => getService('offlineService'), []);
+    const { confirmDestroy } = useMemo(() => getService('confirmService'), []);
+    const { formatMessage } = useMemo(() => getService('messageService'), []);
 
     const stockCardSummaryRepositoryImpl = useMemo(
         () => {
@@ -115,6 +118,65 @@ const OrderCreateTable = ({ isReadOnly }) => {
         }
     };
 
+    const onOrderDelete = (index) => {
+      confirmDestroy(
+        'requisition.orderCreate.delete.prompt',
+        'requisition.orderCreate.delete'
+      ).then(() => {
+        const orderToDelete = orders[index];
+
+        orderService
+          .delete([orderToDelete.id])
+          .then(() => {
+            const updatedOrderIds = orderIds
+              .split(',')
+              .filter((orderId) => orderId !== orderToDelete.id)
+              .join(',');
+
+            const updatedOrders = orders.filter((_, i) => i !== index);
+
+            notificationService.success(
+              'requisition.orderCreate.delete.success'
+            );
+            history.push(`/requisitions/orderCreate/${updatedOrderIds}`);
+            setOrders(updatedOrders);
+            setCurrentTab(0);
+          })
+          .catch((error) => {
+            notificationService.error('requisition.orderCreate.delete.error');
+            throw new Error(
+              formatMessage('requisition.orderCreate.delete.error'),
+              error
+            );
+          });
+      });
+    };
+
+      const onOrderBatchDelete = () => {
+        confirmDestroy(
+          'requisition.orderCreate.delete.prompt.batch',
+          'requisition.orderCreate.deleteBatch'
+        ).then(() => {
+          const orderIdsArray = orderIds.split(',');
+
+          orderService
+            .delete(orderIdsArray)
+            .then(() => {
+              notificationService.success(
+                'requisition.orderCreate.delete.success'
+              );
+              history.push('/requisitions/orderCreate');
+            })
+            .catch((error) => {
+              notificationService.error('requisition.orderCreate.delete.error');
+              throw new Error(
+                formatMessage('requisition.orderCreate.delete.error'),
+                error
+              );
+            });
+        });
+      };
+
     return (
         <div className="page-container">
             {
@@ -127,7 +189,7 @@ const OrderCreateTable = ({ isReadOnly }) => {
                 />
             }
             <div className="page-header-responsive">
-                <h2>Create Order</h2>
+                <h2>{ formatMessage('requisition.orderCreate') }</h2>
             </div>
             {
                 orders.length > 0 &&
@@ -138,11 +200,14 @@ const OrderCreateTable = ({ isReadOnly }) => {
                                 data: orders.map((order, index) => ({
                                     header: order.facility.name,
                                     key: order.id,
-                                    isActive: currentTab === index
+                                    isActive: currentTab === index,
+                                    isCreatingStatus: order.status === ORDER_STATUS.CREATING,
                                 })),
                                 onTabChange: (index) => {
                                     setCurrentTab(index);
                                 },
+                                onOrderDelete,
+                                formatMessage,
                                 isTabValidArray: !isReadOnly ? getIsOrderValidArray(orders) : undefined
                             }
                         }
@@ -170,25 +235,31 @@ const OrderCreateTable = ({ isReadOnly }) => {
                             }
                         } />
                 ) : (
-                    <p>Loading...</p>
+                    <p>{ formatMessage('requisition.orderCreate.loading') }...</p>
                 )}
             </div>
             <div className="page-footer">
                 {
                     isReadOnly ||
                     <>
+                        <button
+                            type="button"
+                            className="btn danger"
+                            disabled={!orders.length || orders.length === 0}
+                            onClick={onOrderBatchDelete}
+                        >{formatMessage('requisition.orderCreate.deleteBatch')}</button>
                         <button
                             type="button"
                             className="btn"
                             disabled={saveDraftDisabled(orders)}
                             onClick={() => updateOrders()}
-                        >Save Draft</button>
+                        >{formatMessage('requisition.orderCreate.saveDraft')}</button>
                         <button
                             type="button"
                             className="btn primary"
                             disabled={createOrderDisabled(orders)}
                             onClick={() => setIsSummaryModalOpen(true)}
-                        >Create Order</button>
+                        >{formatMessage('requisition.orderCreate.create')}</button>
                     </>
                 }
             </div>

src/requisition-order-create/order-create.routes.js

@@ -23,7 +23,8 @@
     routes.$inject = ['$stateProvider', 'ADMINISTRATION_RIGHTS'];
 
     function routes($stateProvider, ADMINISTRATION_RIGHTS) {
-        var showRequisitionLessOrder = '@@SHOW_REQUISITION_LESS_ORDER' !== 'false';
+        var showRequisitionLessOrder = true;
+        // '@@SHOW_REQUISITION_LESS_ORDER' !== 'false';
 
         $stateProvider.state('openlmis.requisitions.orderCreate', {
             url: '/orderCreate',