Merge pull request openmrs#73 from patryllus/vertical-tabs-toggle

Handle Vertical stock item tables - add index to toggle between them …
jabahum · Jan 17, 2024 · 7c131fa · 7c131fa
2 parents 767b98f + afd7411
commit 7c131fa
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/src/stock-items/add-stock-item/add-stock-item.component.tsx b/src/stock-items/add-stock-item/add-stock-item.component.tsx
@@ -23,8 +23,8 @@ const AddEditStockItem: React.FC<AddStockItemProps> = ({
 }) => {
   const { t } = useTranslation();
   const [selectedTab, setSelectedTab] = useState(0);
-  const handleTabChange = () => {
-    setSelectedTab((prevState) => prevState + 1);
+  const handleTabChange = (index: number) => {
+    setSelectedTab(index);
   };
   const tabs: TabItem[] = [
     {
@@ -40,7 +40,12 @@ const AddEditStockItem: React.FC<AddStockItemProps> = ({
     },
     {
       name: t("packagingUnits", "Packaging Units"),
-      component: <PackagingUnits stockItemUuid={model.uuid} />,
+      component: (
+        <PackagingUnits
+          handleTabChange={handleTabChange}
+          stockItemUuid={model.uuid}
+        />
+      ),
       disabled: !isEditing,
     },
     {
@@ -65,7 +70,13 @@ const AddEditStockItem: React.FC<AddStockItemProps> = ({
     // },
   ];
 
-  return <VerticalTabs tabs={tabs} selectedIndex={selectedTab} />;
+  return (
+    <VerticalTabs
+      onChange={handleTabChange}
+      tabs={tabs}
+      selectedIndex={selectedTab}
+    />
+  );
 };
 
 export default AddEditStockItem;
diff --git a/src/stock-items/add-stock-item/packaging-units/packaging-units.component.tsx b/src/stock-items/add-stock-item/packaging-units/packaging-units.component.tsx
@@ -33,9 +33,13 @@ import { useTranslation } from "react-i18next";
 interface PackagingUnitsProps {
   onSubmit?: () => void;
   stockItemUuid: string;
+  handleTabChange: (index) => void;
 }
 
-const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid }) => {
+const PackagingUnits: React.FC<PackagingUnitsProps> = ({
+  stockItemUuid,
+  handleTabChange,
+}) => {
   const { items, isLoading, tableHeaders, setStockItemUuid } =
     useStockItemPackageUnitsHook();
   useEffect(() => {
@@ -79,6 +83,7 @@ const PackagingUnits: React.FC<PackagingUnitsProps> = ({ stockItemUuid }) => {
         });
       }
     );
+    handleTabChange(0);
   };
 
   if (isLoading)

diff --git a/src/stock-items/add-stock-item/stock-item-details/stock-item-details.component.tsx b/src/stock-items/add-stock-item/stock-item-details/stock-item-details.component.tsx
@@ -27,7 +27,7 @@ interface StockItemDetailsProps {
   model: StockItemDTO;
   onSave: SaveStockItem;
   isEditing?: boolean;
-  handleTabChange: () => void;
+  handleTabChange: (index) => void;
 }
 
 const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
@@ -47,7 +47,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
         // Restore uuid
         item.uuid = model.uuid;
         await onSave(item);
-        handleTabChange();
+        handleTabChange(1);
       } catch (e) {
         // Show notification
       } finally {

diff --git a/src/stock-items/stock-item.utils.tsx b/src/stock-items/stock-item.utils.tsx
@@ -28,9 +28,6 @@ export const addOrEditStockItem = async (
         } Successfully`,
       });
 
-      // Close overlay and open edit overlay
-      // closeOverlay();
-
       if (!isEditing) {
         closeOverlay();