mostly done

cdalton713 · Nov 29, 2020 · f8ca3dc · f8ca3dc
1 parent f7e40a1
commit f8ca3dc
Show file tree

Hide file tree

Showing 16 changed files with 272 additions and 182 deletions.
diff --git a/client/src/api/reducers.js b/client/src/api/reducers.js
@@ -52,7 +52,7 @@ export const dataFetchReducer = (state, action) => {
     case "FETCH_ASSIGN_LOG_SUCCESS":
       return {
         ...state,
-        assignLog: action.payload,
+        assignLogData: action.payload,
         assignLogLoading: false,
       };
     default:

diff --git a/client/src/components/app/app.js b/client/src/components/app/app.js
@@ -10,4 +10,4 @@ export const App = () => {
   );
 };
 
-export const DEBUG_ON = true;
+export const DEBUG_ON = false;
diff --git a/client/src/components/form/ManageTechnicianForm/fields.js b/client/src/components/form/ManageTechnicianForm/fields.js
@@ -4,6 +4,7 @@ export const selectTechnicianOptions_default = [
     options: [{ value: "", text: "" }],
   },
 ];
+
 export const fields = [
   {
     name: "technician",

diff --git a/client/src/components/form/ManageTicketForm/adminView.js b/client/src/components/form/ManageTicketForm/adminView.js
@@ -12,21 +12,52 @@ import {
 } from "@elastic/eui";
 import React, { useState } from "react";
 import { MySelectField } from "../MySelectField";
-import { errorMessages } from "./fields";
+import { errorMessages, workLogFields } from "./fields";
 import {
   handleDateChange,
   handleFormFieldBlur,
   handleFormFieldChange,
+  handleFormSubmit,
 } from "./handlers";
 import { selectOptions } from "../selectOptions";
-import { TimeLogTable } from "../../table/TimeLogTable";
+import { WorkLogTable } from "../../table/WorkLogTable";
+import { TicketAssignmentTable } from "../../table/TicketAssignmentTable";
+import { AddTechnicianPopover } from "../../popover/TechnicianPopover";
+import { MyDatePicker } from "../MyDatePicker";
 
 var _ = require("lodash");
 
 export const AdminView = (
-  { data, dispatch, workLogData, assignLogData },
+  {
+    technician,
+    selectedTicket,
+    data,
+    dispatch,
+    workLogData,
+    workLogLoading,
+    assignLogData,
+    assignLogLoading,
+    assignmentRefresh,
+    setAssignmentRefresh,
+    workRefresh,
+    setWorkRefresh,
+  },
   ...props
 ) => {
+  const internalFormSubmit = async (e, data) => {
+    const d = [];
+    d.push({ name: "start_datetime", value: data[0].value });
+    d.push({ name: "end_datetime", value: data[1].value });
+    d.push({ name: "ticket_id", value: selectedTicket.ticket_id });
+    d.push({ name: "lsu_id", value: technician[0].value });
+
+    const response = await handleFormSubmit(e, d, "/work");
+    if (response != null) {
+      const w = !workRefresh;
+      setWorkRefresh(w);
+    }
+  };
+  const [timeData, setTimeData] = useState(workLogFields);
   return (
     <>
       <EuiSpacer />
@@ -91,10 +122,20 @@ export const AdminView = (
         <EuiFlexItem style={{ maxWidth: 500 }}>
           <EuiFormRow hasEmptyLabelSpace={true}>
             <>
-              {/*  TODO: WAITING ON BACKEND*/}
-              {/*<TicketAssignmentTable />*/}
-              {/*<EuiSpacer size={"s"} />*/}
-              {/*<AddTechnicianPopover />*/}
+              {assignLogLoading === true ? null : (
+                <>
+                  <TicketAssignmentTable
+                    items={assignLogData}
+                    isLoading={assignLogLoading}
+                  />
+                  <EuiSpacer size={"s"} />
+                  <AddTechnicianPopover
+                    selectedTicket={selectedTicket}
+                    assignmentRefresh={assignmentRefresh}
+                    setAssignmentRefresh={setAssignmentRefresh}
+                  />
+                </>
+              )}
             </>
           </EuiFormRow>
         </EuiFlexItem>
@@ -104,40 +145,43 @@ export const AdminView = (
         <h2>Work Log</h2>
       </EuiTitle>
       <EuiFlexGroup style={{ maxWidth: 1000 }}>
-        <EuiFlexItem style={{ maxWidth: 400 }}>
-          <TimeLogTable />
+        <EuiFlexItem>
+          {workLogLoading === true ? null : (
+            <WorkLogTable items={workLogData} isLoading={workLogLoading} />
+          )}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexGroup style={{ maxWidth: 1000 }}>
+        <EuiFlexItem style={{ maxWidth: 200 }}>
+          <EuiFormRow>
+            <MyDatePicker
+              data={timeData}
+              name={"start_datetime"}
+              handleChange={(date) =>
+                handleDateChange(date, "start_datetime", timeData, setTimeData)
+              }
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem style={{ maxWidth: 200 }}>
+          <EuiFormRow>
+            <MyDatePicker
+              data={timeData}
+              name={"end_datetime"}
+              handleChange={(e) =>
+                handleDateChange(e, "end_datetime", timeData, setTimeData)
+              }
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow hasEmptyLabelSpace={true}>
+            <EuiButton onClick={(e) => internalFormSubmit(e, timeData)}>
+              Add Time Entry
+            </EuiButton>
+          </EuiFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
-      {/*  TODO: WAITING ON BACKEND*/}
-      {/*<EuiFlexGroup style={{ maxWidth: 1000 }}>*/}
-      {/*  <EuiFlexItem style={{ maxWidth: 200 }}>*/}
-      {/*    <EuiFormRow>*/}
-      {/*      <MyDatePicker*/}
-      {/*        data={workLogData}*/}
-      {/*        name={"start_datetime"}*/}
-      {/*        handleChange={(date) =>*/}
-      {/*          handleDateChange(date, "start_datetime", data, dispatch)*/}
-      {/*        }*/}
-      {/*      />*/}
-      {/*    </EuiFormRow>*/}
-      {/*  </EuiFlexItem>*/}
-      {/*  <EuiFlexItem style={{ maxWidth: 200 }}>*/}
-      {/*    <EuiFormRow>*/}
-      {/*      <MyDatePicker*/}
-      {/*        data={workLogData}*/}
-      {/*        name={"end_datetime"}*/}
-      {/*        handleChange={(e) =>*/}
-      {/*          handleDateChange(e, "end_datetime", data, dispatch)*/}
-      {/*        }*/}
-      {/*      />*/}
-      {/*    </EuiFormRow>*/}
-      {/*  </EuiFlexItem>*/}
-      {/*  <EuiFlexItem>*/}
-      {/*    <EuiFormRow hasEmptyLabelSpace={true}>*/}
-      {/*      <EuiButton>Add Time Entry</EuiButton>*/}
-      {/*    </EuiFormRow>*/}
-      {/*  </EuiFlexItem>*/}
-      {/*</EuiFlexGroup>*/}
       <EuiFlexGroup style={{ maxWidth: 1000 }}>
         <EuiFlexItem>
           <EuiFormRow>

diff --git a/client/src/components/form/ManageTicketForm/handlers.js b/client/src/components/form/ManageTicketForm/handlers.js
@@ -28,7 +28,7 @@ export const handleFormSubmit = async (e, data, endpoint, put) => {
     }
 
     addToast({
-      title: "Ticket Submitted!",
+      title: "Saved!",
       color: "success",
     });
 

diff --git a/client/src/components/form/MySelectField.js b/client/src/components/form/MySelectField.js
@@ -14,7 +14,7 @@ export const MySelectField = (
         name={item.name}
         id={item.name}
         options={selectOptions.options}
-        value={item.value}
+        value={item.value === null ? "" : item.value}
         onChange={(e) => handleChange(e)}
         onBlur={(e) => handleBlur(e)}
         hasNoInitialSelection={true}

diff --git a/client/src/components/popover/TechnicianPopover.js b/client/src/components/popover/TechnicianPopover.js
@@ -16,69 +16,99 @@ import {
 import {
   handleFormFieldBlur,
   handleFormFieldChange,
+  handleFormSubmit,
 } from "../form/ManageTicketForm/handlers";
 import { dataFetchReducer } from "../../api/reducers";
 import axios from "../../api/api";
+import { personFields } from "../form/person/fields";
 
-export const AddTechnicianPopover = () => {
+export const AddTechnicianPopover = (
+  { selectedTicket, assignmentRefresh, setAssignmentRefresh },
+  ...props
+) => {
   const [state, dispatch] = useReducer(dataFetchReducer, {
     isLoading: false,
     isError: false,
-    data: null,
+    data: fields,
+    selectTechnicianOptions: selectTechnicianOptions_default,
   });
-
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   useEffect(() => {
     const fetchData = async () => {
       dispatch({ type: "FETCH_INIT" });
-      // TODO: ONCE BACKEND IS SET UP, FORMAT AND IMPLEMENT DATA FOR TABLE
       try {
-        const result = await axios.get("ticket");
-        dispatch({ type: "FETCH_SUCCESS", payload: result.data });
+        const result = await axios.get("/user/admin");
+        const final = {
+          name: "technician",
+          options: result.data.map((o) => ({
+            ...o,
+            value: o.lsu_id,
+            text: o.first_name + " " + o.last_name,
+          })),
+        };
+        dispatch({ type: "FETCH_TECHNICIANS_SUCCESS", payload: final });
       } catch (error) {
         dispatch({ type: "FETCH_FAILURE" });
       }
     };
     fetchData();
   }, []);
 
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
   const onButtonClick = () =>
     setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
   const closePopover = () => setIsPopoverOpen(false);
 
+  const internalFormSubmit = async (e, data) => {
+    const d = [];
+    d.push({ name: "lsu_id", value: data[0].value });
+    d.push({ name: "ticket_id", value: selectedTicket.ticket_id });
+
+    const response = await handleFormSubmit(e, d, "/assign");
+    if (response != null) {
+      setIsPopoverOpen(false);
+      setAssignmentRefresh(!assignmentRefresh);
+    }
+  };
   const button = (
     <EuiButton color={"secondary"} size={"s"} onClick={onButtonClick}>
       Add
     </EuiButton>
   );
 
   return (
-    <EuiPopover
-      button={button}
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-    >
-      <div>
-        <EuiFlexGroup>
-          <EuiFlexItem style={{ minWidth: 250 }}>
-            <MySelectField
-              name={"technician"}
-              data={state.data}
-              selectOptions={selectTechnicianOptions_default}
-              handleChange={(e) =>
-                handleFormFieldChange(e, state.data, dispatch)
-              }
-              handleBlur={(e) => handleFormFieldBlur(e, state.data, dispatch)}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFormRow hasEmptyLabelSpace={true}>
-              <EuiButton>Add</EuiButton>
-            </EuiFormRow>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </div>
-    </EuiPopover>
+    <>
+      {state.isLoading === true ? null : (
+        <EuiPopover
+          button={button}
+          isOpen={isPopoverOpen}
+          closePopover={closePopover}
+        >
+          <EuiForm>
+            <EuiFlexGroup>
+              <EuiFlexItem style={{ minWidth: 250 }}>
+                <MySelectField
+                  name={"technician"}
+                  data={state.data}
+                  selectOptions={state.selectTechnicianOptions}
+                  handleChange={(e) => {
+                    handleFormFieldChange(e, state.data, dispatch);
+                  }}
+                  handleBlur={(e) =>
+                    handleFormFieldBlur(e, state.data, dispatch)
+                  }
+                />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiFormRow hasEmptyLabelSpace={true}>
+                  <EuiButton onClick={(e) => internalFormSubmit(e, state.data)}>
+                    Add
+                  </EuiButton>
+                </EuiFormRow>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiForm>
+        </EuiPopover>
+      )}
+    </>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,4 +10,4 @@ export const App = () => { @@
       );
     };
-    export const DEBUG_ON = true;
+    export const DEBUG_ON = false;