Merge pull request #1956 from OneCommunityGlobal/Chengyan-Phase2-Reus…

…ables-List-UI

Chengyan phase2 reusables list UI

src/actions/bmdashboard/reusableActions.js

@@ -0,0 +1,32 @@
+import axios from "axios";
+import {
+  SET_REUSABLES
+} from "constants/bmdashboard/reusableConstants"
+import { GET_ERRORS } from "constants/errors";
+import { ENDPOINTS } from "utils/URL";
+
+export const setReusables = payload => {
+  return {
+    type: SET_REUSABLES,
+    payload
+  }
+}
+
+export const setErrors = payload => {
+  return {
+    type: GET_ERRORS,
+    payload
+  }
+}
+
+export const fetchAllReusables = () => {
+  return async dispatch => {
+    axios.get(ENDPOINTS.BM_REUSABLES)
+      .then(res => {
+        dispatch(setReusables(res.data))
+      })
+      .catch(err => {
+        dispatch(setErrors(err))
+      })
+  }
+}

src/components/BMDashboard/ConsumableList/ConsumableListView.jsx

@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchAllConsumables } from 'actions/bmdashboard/consumableActions';
+import ItemListView from '../ItemList/ItemListView';
+import UpdateConsumableModal from '../UpdateConsumables/UpdateConsumableModal';
+
+function ConsumableListView() {
+  const dispatch = useDispatch();
+  const consumables = useSelector(state => state.bmConsumables.consumableslist);
+  const errors = useSelector(state => state.errors);
+  const postConsumableUpdateResult = useSelector(state => state.bmConsumables.updateConsumables);
+
+  useEffect(() => {
+    dispatch(fetchAllConsumables());
+  }, []);
+
+  useEffect(() => {
+    if (!postConsumableUpdateResult || postConsumableUpdateResult?.result == null)
+      dispatch(fetchAllConsumables());
+  }, [postConsumableUpdateResult?.result]);
+
+  const itemType = 'Consumables';
+
+  const dynamicColumns = [
+    { label: 'Unit', key: 'itemType.unit' },
+    { label: 'Bought', key: 'stockBought' },
+    { label: 'Used', key: 'stockUsed' },
+    { label: 'Available', key: 'stockAvailable' },
+    { label: 'Waste', key: 'stockWasted' },
+  ];
+
+  return (
+    <ItemListView
+      itemType={itemType}
+      items={consumables}
+      errors={errors}
+      UpdateItemModal={UpdateConsumableModal}
+      dynamicColumns={dynamicColumns}
+    />
+  );
+}
+
+export default ConsumableListView;

src/components/BMDashboard/ConsumableList/index.js

@@ -0,0 +1,3 @@
+import ConsumableListView from './ConsumableListView';
+
+export default ConsumableListView;