OAM-201: add deleting orders

src/react-components/tab-navigation/tab-navigation.jsx

@@ -15,34 +15,42 @@ import React from 'react';
 */
 
 const TabNavigation = ({ config }) => {
-    const getClassName = (isActive, index) => {
-        let className = '';
-        if (config.isTabValidArray && !config.isTabValidArray[index]) {
-            className += 'tab-invalid';
-        }
+  const getClassName = (isActive, index) => {
+    let className = '';
+    if (config.isTabValidArray && !config.isTabValidArray[index]) {
+      className += 'tab-invalid';
+    }
 
-        return isActive ? `${className} active` : className;
-    };
+    return isActive ? `${className} active` : className;
+  };
 
-    return (
-        <ul className="nav nav-tabs">
-            {
-                config.data.map((item, index) => {
-                    return (
-                        <li key={item.key} className={getClassName(item.isActive, index)}>
-                            <a
-                                role='tab'
-                                data-toggle="tab"
-                                onClick={() => config.onTabChange(index)}
-                                className='tabs-link'>
-                                {item.header}
-                            </a>
-                        </li>
-                    );
-                })
-            }
-        </ul>
-    );
+  return (
+    <ul className='nav nav-tabs'>
+      {config.data.map((item, index) => {
+        return (
+          <li key={item.key} className={getClassName(item.isActive, index)}>
+            <a
+              role='tab'
+              data-toggle='tab'
+              onClick={() => config.onTabChange(index)}
+              className='tabs-link'
+            >
+              {item.header}
+              {item.isCreatingStatus && (
+                <i
+                  className='fa fa-times clear-icon'
+                  style={{ marginLeft: '6px', cursor: 'pointer' }}
+                  aria-hidden='true'
+                  onClick={() => config.onOrderDelete(index)}
+                  title={config.formatMessage('requisition.orderCreate.delete')}
+                />
+              )}
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  );
 };
 
 export default TabNavigation;

src/requisition-order-create/messages_en.json

@@ -1,8 +1,16 @@
 {
   "requisition.orderCreate": "Create Orders",
+  "requisition.orderCreate.create": "Create Order",
+  "requisition.orderCreate.saveDraft": "Save Draft",
   "requisition.orderCreate.submitted": "Orders created successfully",
   "requisition.orderCreate.createdOrderSent.success": "Offline created order sent successfully.",
   "requisition.orderCreate.createdOrderSent.error": "Error occurred while sending offline created order.",
   "requisition.orderCreate.draftUpdate.success": "Draft order update success.",
-  "requisition.orderCreate.draftUpdate.error": "Error occurred while updating draft order."
+  "requisition.orderCreate.draftUpdate.error": "Error occurred while updating draft order.",
+  "requisition.orderCreate.delete": "Delete",
+  "requisition.orderCreate.deleteBatch": "Delete Batch",
+  "requisition.orderCreate.delete.prompt": "Are you sure you want to delete this order?",
+  "requisition.orderCreate.delete.prompt.batch": "Are you sure you want to delete available orders?",
+  "requisition.orderCreate.delete.error": "Error occurred while deleting order(s).",
+  "requisition.orderCreate.delete.success": "Order(s) deleted successfully."
 }

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

@@ -158,7 +158,7 @@ const OrderCreateForm = () => {
                         value={selectedRequestingFacilities.at(-1)}
                         onChange={(value) => {
                             setSelectedRequestingFacilities((prevState) => {
-                                if (!prevState.includes(value)) {
+                                if (!prevState.includes(value) && value) {
                                     return [...prevState, value];
                                 }
                                 return prevState;

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">
             {
@@ -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
                             }
                         }
@@ -177,18 +242,24 @@ const OrderCreateTable = ({ isReadOnly }) => {
                 {
                     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.constant.jsx

@@ -74,3 +74,7 @@ export const orderCreateFormTableColumns = [
         )
     }
 ];
+
+export const ORDER_STATUS = {
+    CREATING: 'CREATING',
+};

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

@@ -0,0 +1,90 @@
+/*
+ * 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 [email protected]. 
+ */
+
+(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('orderCreateService', service);
+
+    service.$inject = ['$resource', '$http', 'openlmisUrlFactory'];
+
+    function service($resource, $http, openlmisUrlFactory) {
+
+        var resource = $resource(openlmisUrlFactory('/api/orders/:id'), {}, {
+            update: {
+                method: 'PUT'
+            },
+            create: {
+                url: openlmisUrlFactory('/api/orders/requisitionLess'),
+                method: 'POST'
+            },
+            send: {
+                url: openlmisUrlFactory('/api/orders/:id/requisitionLess/send'),
+                method: 'PUT'
+            }
+        });
+
+        this.get = get;
+        this.create = create;
+        this.update = update;
+        this.send = send;
+        this.delete = deleteOrders;
+
+        function get(orderId) {
+            return resource.get({
+                id: orderId
+            }).$promise;
+        }
+
+        function create(orderId) {
+            return resource.create(orderId).$promise;
+        }
+
+        function update(order) {
+            return resource.update({
+                id: order.id
+            }, order).$promise;
+        }
+
+        function send(order) {
+            return resource.send({
+                id: order.id
+            }, order).$promise;
+        }
+
+        function deleteOrders(orderIds) {
+            return $http({
+                method: 'DELETE',
+                url: openlmisUrlFactory('/api/orders'),
+                data: {
+                    ids: orderIds
+                },
+                headers: {
+                    'Content-Type': 'application/json;charset=utf-8'
+                }
+            });
+        }
+    }
+})();