form data display

ohcnetwork · Jun 15, 2020 · 84c2f8b · 84c2f8b
1 parent 01dc316
commit 84c2f8b
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 173 deletions.
diff --git a/src/Components/Facility/AddInventoryForm.tsx b/src/Components/Facility/AddInventoryForm.tsx
@@ -4,24 +4,28 @@ import moment from 'moment';
 import React, { useCallback, useReducer, useState } from "react";
 import { useDispatch } from "react-redux";
 import { statusType, useAbortableEffect } from "../../Common/utils";
-import { createTriageForm, getTriageDetails } from "../../Redux/actions";
+import { getItems } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import { DateInputField, TextInputField } from "../Common/HelperInputFields";
 import { Loading } from "../Common/Loading";
 import PageTitle from "../Common/PageTitle";
-import { PatientStatsModel } from "./models";
+import { InventoryItemsModel } from "./models";
 
 
-const initForm: any = {
-  inventory_name: "",
-  inventory_description: "",
-  inventory_stock: "",
-  inventory_min_stock: "",
+// const initForm: any = {
+//   inventory_id: "",
+//   inventory_description: "",
+//   inventory_stock: "",
+//   inventory_min_stock: "",
+// };
+const initForm = {
+  id: "",
+  quantity: "",
+  unit: "",
+  isIncoming: true,
 };
-
 const initialState = {
-  form: { ...initForm },
-  errors: { ...initForm }
+  form: { ...initForm }
 };
 
 const triageFormReducer = (state = initialState, action: any) => {
@@ -47,19 +51,52 @@ const goBack = () => {
   window.history.go(-1);
 };
 
-export const AddInventoryForm = () => {
+export const AddInventoryForm = (props: any) => {
+  const [state, dispatch] = useReducer(triageFormReducer, initialState);
+  const { facilityId } = props;
   const dispatchAction: any = useDispatch();
   const [isLoading, setIsLoading] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const [data, setData] = useState<Array<InventoryItemsModel>>([]);
+  const [totalCount, setTotalCount] = useState(0);
 
+  const limit = 14;
 
 
+  const [form, setForm] = useState(initForm);
+  const fetchData = useCallback(
+    async (status: statusType) => {
+      setIsLoading(true);
+      const res = await dispatchAction(getItems({ limit, offset }));
+      if (!status.aborted) {
+        if (res && res.data) {
+          setData(res.data.results);
+          setTotalCount(res.data.count);
+        }
+        setIsLoading(false);
+      }
+    },
+    [dispatchAction, offset]
+  );
+  useAbortableEffect(
+    (status: statusType) => {
+      fetchData(status);
+    },
+    [fetchData]
+  );
+  console.log("dataaaa", data);
   const handleSubmit = async (e: any) => {
     e.preventDefault();
   };
 
   const handleChange = (e: any) => {
- //handlechange
-};
+    //handlechange
+    // const { value, name } = e.target;
+    // setForm({ ...form, [name]: value });
+    let form = { ...state.form };
+    form[e.target.name] = e.target.value;
+    dispatchAction({ type: "set_form", form });
+  };
 
 
   if (isLoading) {
@@ -75,51 +112,48 @@ export const AddInventoryForm = () => {
             <div className="mt-2 grid gap-4 grid-cols-1 md:grid-cols-2">
               <div>
                 <InputLabel id="inventory_name_label">Inventory Name</InputLabel>
-                <TextInputField
-                    name="inventory_name"
-                    variant="outlined"
-                    margin="dense"
-                    type="number"
-                    value=""
-                    onChange={handleChange}
-                    errors=""
-                />
+                <select
+                  className="appearance-none focus:shadow-outline w-full py-1 px-5 py-1 text-gray-700 bg-gray-200 rounded"
+                  name="id"
+                  value={form.id}
+                  onChange={handleChange}>
+                  {...data.map((e) => (
+                    <option value={e.id} key={e.name}>{e.name}</option>
+                  ))}
+                </select>
               </div>
               <div>
-                <InputLabel id="inventory_description_label">Inventory Description</InputLabel>
-                <TextInputField
-                  name="inventory_description"
-                  variant="outlined"
-                  margin="dense"
-                  type="number"
-                  value=""
-                  onChange={handleChange}
-                  errors=""
-                />
+                <InputLabel id="inventory_description_label">Status:</InputLabel>
+                <select
+                  className="appearance-none focus:shadow-outline w-full py-1 px-5 py-1 text-gray-700 bg-gray-200 rounded"
+                  name="isIncoming">
+                  <option value="true" >Incoming</option>
+                  <option value="false">Outgoing</option>
+                </select>
               </div>
               <div>
-                <InputLabel id="available_stock_label">Available Stock</InputLabel>
+                <InputLabel id="quantity">Quantity</InputLabel>
                 <TextInputField
-                  name="available_stock"
+                  name="quantity"
                   variant="outlined"
                   margin="dense"
                   type="number"
-                  value=""
+                  value={form.quantity}
                   onChange={handleChange}
                   errors=""
                 />
               </div>
               <div>
-                <InputLabel id="min_stock_label">Minimum Stock Required</InputLabel>
-                <TextInputField
-                  name="min_stock"
-                  variant="outlined"
-                  margin="dense"
-                  type="number"
-                  value=""
-                  onChange={handleChange}
-                  errors=""
-                />
+                <InputLabel id="min_stock_label">Unit</InputLabel>
+                <select
+                  className="appearance-none focus:shadow-outline w-full py-1 px-5 py-1 text-gray-700 bg-gray-200 rounded"
+                  name="id"
+                  value={form.id}
+                  onChange={handleChange}>
+                  {/* {...data.map((e) => (
+                    <option value={e.default_unit[id]} key={e.name}>{e.default_unit[name]}</option>
+                  ))} */}
+                </select>
               </div>
             </div>
             <div className="flex justify-between mt-4">