(Ft)Add ability to update stock sources (#43)

src/stock-sources/add-stock-source-button.component.tsx

@@ -2,13 +2,13 @@ import { Button } from "@carbon/react";
 import React, { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { launchOverlay } from "../core/components/overlay/hook";
-import AddStockSourceItem from "./add-stock-sources/add-stock-sources.component";
+import StockSourcesAddOrUpdate from "./add-stock-sources/add-stock-sources.component";
 
 const AddStockSourceActionButton: React.FC = () => {
   const { t } = useTranslation();
 
   const handleClick = useCallback(() => {
-    launchOverlay("Add Stock Source", <AddStockSourceItem />);
+    launchOverlay("Add Stock Source", <StockSourcesAddOrUpdate />);
   }, []);
 
   return (

src/stock-sources/add-stock-sources/add-stock-sources.component.tsx

@@ -18,7 +18,11 @@ import { showNotification, showToast } from "@openmrs/esm-framework";
 import { useTranslation } from "react-i18next";
 import { closeOverlay } from "../../core/components/overlay/hook";
 
-const StockSourcesAddOrCreate: React.FC = () => {
+interface AddStockSourceProps {
+  model?: StockSource;
+}
+
+const StockSourcesAddOrUpdate: React.FC<AddStockSourceProps> = ({ model }) => {
   const { t } = useTranslation();
 
   // get stock sources
@@ -27,10 +31,12 @@ const StockSourcesAddOrCreate: React.FC = () => {
   const [formModel, setFormModel] = useState<StockSource>();
 
   const onNameChanged = (evt: React.ChangeEvent<HTMLInputElement>): void => {
+    model ? (model.name = evt.target.value) : "";
     setFormModel({ ...formModel, name: evt.target.value });
   };
 
   const onAcronymChanged = (evt: React.ChangeEvent<HTMLInputElement>): void => {
+    model ? (model.acronym = evt.target.value) : "";
     setFormModel({ ...formModel, acronym: evt.target.value });
   };
 
@@ -44,6 +50,9 @@ const StockSourcesAddOrCreate: React.FC = () => {
   const onFormSubmit = useCallback(
     (event) => {
       event.preventDefault();
+      if (model) {
+        formModel.uuid = model.uuid;
+      }
       createOrUpdateStockSource(formModel)
         .then(
           () => {
@@ -83,6 +92,7 @@ const StockSourcesAddOrCreate: React.FC = () => {
               labelText={t("fullName", "Full Name")}
               size="md"
               onChange={onNameChanged}
+              value={model?.name}
               placeholder="e.g National Medical Stores"
             />
           </section>
@@ -93,6 +103,7 @@ const StockSourcesAddOrCreate: React.FC = () => {
               size="md"
               placeholder="e.g NMS"
               onChange={onAcronymChanged}
+              value={model?.acronym}
               labelText={t("acronym", "Acronym/Code")}
             />
           </section>
@@ -134,4 +145,4 @@ const StockSourcesAddOrCreate: React.FC = () => {
   );
 };
 
-export default StockSourcesAddOrCreate;
+export default StockSourcesAddOrUpdate;

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

@@ -1,5 +1,4 @@
-import React, { useMemo } from "react";
-
+import React, { useCallback, useMemo } from "react";
 import {
   DataTable,
   Pagination,
@@ -17,14 +16,19 @@ import {
   TableToolbarMenu,
   DataTableSkeleton,
   TableToolbarSearch,
+  Button,
+  Tooltip,
 } from "@carbon/react";
 import { isDesktop } from "@openmrs/esm-framework";
+import { Edit } from "@carbon/react/icons";
 import useStockSourcesPage from "./stock-sources-items-table.resource";
 import { ResourceRepresentation } from "../core/api/api";
 import AddStockSourceActionButton from "./add-stock-source-button.component";
 import StockSourcesFilter from "./stock-sources-filter/stock-sources-filter.component";
 import styles from "./stock-sources.scss";
 import { useTranslation } from "react-i18next";
+import { launchOverlay } from "../core/components/overlay/hook";
+import StockSourcesAddOrUpdate from "./add-stock-sources/add-stock-sources.component";
 
 function StockSourcesItems() {
   const { t } = useTranslation();
@@ -45,6 +49,29 @@ function StockSourcesItems() {
     totalCount: true,
   });
 
+  const handleClick = useCallback((data: any) => {
+    launchOverlay(
+      "Edit Stock Source",
+      <StockSourcesAddOrUpdate model={data} />
+    );
+  }, []);
+
+  if (items) {
+    items.forEach((row) => {
+      row["actions"] = (
+        <Tooltip align="bottom" label="Edit Stock Item">
+          <Button
+            kind="ghost"
+            size="md"
+            onClick={() => handleClick(row)}
+            iconDescription={t("editStockItem", "Edit Stock Item")}
+            renderIcon={(props) => <Edit size={16} {...props} />}
+          ></Button>
+        </Tooltip>
+      );
+    });
+  }
+
   const tableRows = useMemo(() => {
     return items?.map((entry) => {
       return {

src/stock-sources/stock-sources-items-table.resource.ts

@@ -34,6 +34,7 @@ export default function useStockSourcesPage(filter: StockOperationFilter) {
       {
         id: 4,
         header: "actions",
+        key: "actions",
       },
     ],
     []