U4X-264 : Add bulk items import

src/index.ts

@@ -45,6 +45,14 @@ export const deleteStockModal = getAsyncLifecycle(
   }
 );
 
+export const importBulkStockItemsDialog = getAsyncLifecycle(
+  () =>
+    import(
+      "./stock-items/add-bulk-stock-item/stock-items-bulk-import.component"
+    ),
+  options
+);
+
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }

src/routes.json

@@ -19,6 +19,10 @@
       "name": "stock-operation-dialog",
       "component": "stockOperationDialog"
     },
+    {
+      "name": "import-bulk-stock-items",
+      "component": "importBulkStockItemsDialog"
+    },
     {
       "name": "delete-stock-modal",
       "component": "deleteStockModal"

src/stock-items/add-bulk-stock-item/add-stock-items-bulk-import-action-button.component.tsx

@@ -0,0 +1,26 @@
+import { Button } from "@carbon/react";
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { showModal } from "@openmrs/esm-framework";
+
+const AddStockItemsBulktImportActionButton: React.FC = () => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(() => {
+    const dispose = showModal("import-bulk-stock-items", {
+      closeModal: () => dispose(),
+    });
+  }, []);
+
+  return (
+    <Button
+      kind="ghost"
+      onClick={handleClick}
+      iconDescription={t("import", "Import")}
+    >
+      {t("import", "Import")}
+    </Button>
+  );
+};
+
+export default AddStockItemsBulktImportActionButton;

src/stock-items/add-bulk-stock-item/stock-items-bulk-import.component.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  ContentSwitcher,
+  Form,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea,
+  Grid,
+  Checkbox,
+  TextInput,
+  IconButton,
+  FileUploader,
+} from "@carbon/react";
+import { UploadStockItems } from "./stock-items-bulk-import.resource";
+import { showNotification, showToast } from "@openmrs/esm-framework";
+
+export interface ImportDialogPopupProps {
+  closeModal: () => void;
+}
+
+const ImportDialogPopup: React.FC<ImportDialogPopupProps> = ({
+  closeModal,
+}) => {
+  const { t } = useTranslation();
+  const [selectedFile, setSelectedFile] = useState<any>();
+  const [hasHeader, setHasHeader] = useState(true);
+  const [fileNotSelected, setFileNotSelected] = useState(true);
+
+  const onConfirmUpload = () => {
+    if (!selectedFile) {
+      return;
+    }
+    const formData = new FormData();
+    formData.set("file", selectedFile);
+    formData.set("hasHeader", hasHeader ? "true" : "false");
+
+    UploadStockItems(formData).then(
+      (resp) => {
+        showToast({
+          critical: true,
+          title: t("rejectOrder", "Rejected Order"),
+          kind: "success",
+          description: t(
+            "successfullyrejected",
+            `You have successfully uploaded stock items`
+          ),
+        });
+        closeModal();
+      },
+      (err) => {
+        showNotification({
+          title: t(
+            `errorUploadingItems', 'An error occured uploading stock items`
+          ),
+          kind: "error",
+          critical: true,
+          description: err?.message,
+        });
+      }
+    );
+  };
+
+  const onFileChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event?.target?.files?.[0];
+    if (file) {
+      setSelectedFile(file);
+      setFileNotSelected(false);
+    } else {
+      event.preventDefault();
+    }
+  };
+
+  const onFileDeleted = () => {
+    setFileNotSelected(true);
+  };
+
+  return (
+    <div>
+      <Form>
+        <ModalHeader
+          closeModal={closeModal}
+          title={t("importStockItems", "Import Stock Items")}
+        />
+        <ModalBody>
+          <FileUploader
+            accept={[".csv"]}
+            multiple={false}
+            name={"file"}
+            buttonLabel="Select file"
+            labelDescription="Only .csv files at 2mb or less"
+            filenameStatus="edit"
+            labelTitle=""
+            size="small"
+            onChange={onFileChanged}
+            onDelete={onFileDeleted}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button type="submit" onClick={onConfirmUpload}>
+            {t("uploadStockItems", "Upload StockItems")}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </div>
+  );
+};
+
+export default ImportDialogPopup;

src/stock-items/add-bulk-stock-item/stock-items-bulk-import.resource.ts

@@ -0,0 +1,14 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+
+export async function UploadStockItems(body: any) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/stockmanagement/stockitemimport`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    signal: abortController.signal,
+    body: body,
+  });
+}

src/stock-items/stock-items-table.component.tsx

@@ -27,6 +27,7 @@ import FilterStockItems from "./components/filter-stock-items/filter-stock-items
 import { launchAddOrEditDialog } from "./stock-item.utils";
 import { useStockItemsPages } from "./stock-items-table.resource";
 import styles from "./stock-items-table.scss";
+import AddStockItemsBulktImportActionButton from "./add-bulk-stock-item/add-stock-items-bulk-import-action-button.component";
 import EditStockItemActionsMenu from "./edit-stock-item/edit-stock-item-action-menu.component";
 
 interface StockItemsTableProps {
@@ -126,6 +127,7 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
                   filterType={isDrug}
                   changeFilterType={setDrug}
                 />
+                <AddStockItemsBulktImportActionButton />
                 <AddStockItemActionButton />
               </TableToolbarContent>
             </TableToolbar>
@@ -189,7 +191,6 @@ const StockItemsTableComponent: React.FC<StockItemsTableProps> = () => {
                       {t("checkFilters", "Check the filters above")}
                     </p>
                   </div>
-                  <p className={styles.separator}>{t("or", "or")}</p>
                 </Tile>
               </div>
             ) : null}

src/stock-operations/stock-operations-table.component.tsx

@@ -372,7 +372,6 @@ const StockOperations: React.FC<StockOperationsTableProps> = () => {
                       {t("checkFilters", "Check the filters above")}
                     </p>
                   </div>
-                  <p className={styles.separator}>{t("or", "or")}</p>
                 </Tile>
               </div>
             ) : null}

src/stock-sources/stock-sources-items-table.component.tsx

@@ -171,7 +171,6 @@ function StockSourcesItems() {
                       {t("checkFilters", "Check the filters above")}
                     </p>
                   </div>
-                  <p className={styles.separator}>{t("or", "or")}</p>
                 </Tile>
               </div>
             ) : null}