admin view retrieving data. no put request yet

client/src/api/reducers.js

@@ -17,22 +17,14 @@ export const dataFetchReducer = (state, action) => {
         ...state,
         isLoading: true,
         isError: false,
-        allTickets: {},
-        data: fields,
       };
-    case "FETCH_SUCCESS":
+    case "FETCH_TICKET_SUCCESS":
       return {
         ...state,
         isLoading: false,
         isError: false,
         data: action.payload,
       };
-    case "FETCH_ALL_TICKETS_SUCCESS":
-      return {
-        ...state,
-        isTicketsLoading: false,
-        isError: false,
-      };
     case "FETCH_TECHNICIANS_SUCCESS":
       return {
         ...state,
@@ -55,6 +47,13 @@ export const dataFetchReducer = (state, action) => {
       return {
         ...state,
         workLogData: action.payload,
+        workLogLoading: false,
+      };
+    case "FETCH_ASSIGN_LOG_SUCCESS":
+      return {
+        ...state,
+        assignLog: action.payload,
+        assignLogLoading: false,
       };
     default:
       throw new Error();

client/src/components/form/ManageTicketForm/adminView.js

@@ -29,7 +29,10 @@ import { TimeLogTable } from "../../table/TimeLogTable";
 
 var _ = require("lodash");
 
-export const AdminView = ({ data, dispatch, workLogData }, ...props) => {
+export const AdminView = (
+  { data, dispatch, workLogData, assignLogData },
+  ...props
+) => {
   return (
     <>
       <EuiSpacer />
@@ -93,9 +96,10 @@ export const AdminView = ({ data, dispatch, workLogData }, ...props) => {
         <EuiFlexItem style={{ maxWidth: 500 }}>
           <EuiFormRow hasEmptyLabelSpace={true}>
             <>
-              <TicketAssignmentTable />
-              <EuiSpacer size={"s"} />
-              <AddTechnicianPopover />
+              {/*  TODO: WAITING ON BACKEND*/}
+              {/*<TicketAssignmentTable />*/}
+              {/*<EuiSpacer size={"s"} />*/}
+              {/*<AddTechnicianPopover />*/}
             </>
           </EuiFormRow>
         </EuiFlexItem>
@@ -109,7 +113,7 @@ export const AdminView = ({ data, dispatch, workLogData }, ...props) => {
           <TimeLogTable />
         </EuiFlexItem>
       </EuiFlexGroup>
-
+      {/*  TODO: WAITING ON BACKEND*/}
       {/*<EuiFlexGroup style={{ maxWidth: 1000 }}>*/}
       {/*  <EuiFlexItem style={{ maxWidth: 200 }}>*/}
       {/*    <EuiFormRow>*/}

client/src/components/form/ManageTicketForm/handlers.js

@@ -8,13 +8,25 @@ const postData = async (endpoint, data) => {
   return response;
 };
 
-export const handleFormSubmit = async (e, data, endpoint) => {
+const putData = async (endpoint, data) => {
+  console.log(data);
+  const response = await axios.put(endpoint, data);
+  return response;
+};
+
+export const handleFormSubmit = async (e, data, endpoint, put) => {
   const errors = _.find(data, ["error", true]);
   if (errors === undefined) {
     let d = data.map((o) => ({ [o.name]: o.value }));
     const dd = Object.assign({}, ...d);
 
-    const response = await postData(endpoint, dd);
+    let response;
+    if (put === true) {
+      response = await putData(endpoint, dd);
+    } else {
+      response = await postData(endpoint, dd);
+    }
+
     addToast({
       title: "Ticket Submitted!",
       color: "success",

client/src/components/form/MyTextField.js

@@ -20,6 +20,7 @@ export const MyTextField = (
         name={item.name}
         onChange={(e) => handleChange(e)}
         onBlur={(e) => handleBlur(e)}
+        value={item.value}
       />
     </EuiFormRow>
   );

client/src/components/form/selectOptions.js

@@ -12,8 +12,16 @@ export const selectOptions = [
     name: "problem_category",
     options: [
       { value: "", text: "" },
+
       { value: "general_help", text: "General Help" },
-      { value: "problem_2", text: "Problem 2" },
+      { value: "login_help", text: "Login Help" },
+      { value: "missing_documents", text: "Missing Documents" },
+      { value: "class_access", text: "Can't access your class?" },
+      { value: "view_grades_help", text: "Can't see your grades?" },
+      { value: "upload_help", text: "Upload Help" },
+      { value: "download_help", text: "Download Help" },
+      { value: "tigerware_support", text: "Tigerware support" },
+      { value: "hardware_support", text: "Hardware support" },
     ],
   },
   {
@@ -258,6 +266,11 @@ export const selectOptions = [
       { value: "broken_screen", text: "Broken Screen" },
       { value: "expanded_battery", text: "Expanded Battery" },
       { value: "faulty_ram", text: "Faulty RAM" },
+      { value: "network_problem", text: "Network Problem" },
+      { value: "post_error", text: "Post Error" },
+      { value: "virus_infection", text: "Malware or Spyware Infection" },
+      { value: "system_overheat", text: "System overheating" },
+      { value: "system_crash", text: "System Crash" },
     ],
   },
   {
@@ -269,6 +282,10 @@ export const selectOptions = [
       { value: "storage_device", text: "Storage Device" },
       { value: "power_supply", text: "Power Supply" },
       { value: "gpu", text: "GPU" },
+      { value: "motherboard", text: "Motherboard" },
+      { value: "heatsink", text: "Heatsink" },
+      { value: "case_fans", text: "Case Fans" },
+      { value: "usb_port", text: "USB Port" },
     ],
   },
   {

client/src/routes/admin/ManageTicket.js

@@ -31,58 +31,129 @@ import axios from "../../api/api";
 import { fields } from "../../components/form/ManageTicketForm/fields";
 import { dataFetchReducer } from "../../api/reducers";
 import { MyStat } from "./Stats";
+import { personFields } from "../../components/form/person/fields";
 
 var _ = require("lodash");
 
-const TicketForm = ({ selected }, ...props) => {
-  const [workLogData, setWorkLogData] = useState(null);
-  const [workLogLoading, setWorkLogLoading] = useState(true);
-  const [data, setData] = useState(fields);
+const TicketForm = ({ setSelectedTicket, selectedTicket }, ...props) => {
+  const [state, dispatch] = useReducer(dataFetchReducer, {
+    isLoading: false,
+    isError: false,
+    data: fields,
+    workLogData: null,
+    workLogLoading: true,
+    assignLog: null,
+    assignLogLoading: true,
+  });
 
   useEffect(() => {
-    const fetchWorkLog = async () => {
+    const fetchWorkLog = async (selectedTicket) => {
       try {
-        const result = await axios.get("/ticket/work/" + selected.id);
-        setWorkLogData(result.data);
-        setWorkLogLoading(false);
+        const result = await axios.get(
+          "/ticket/work/" + selectedTicket.ticket_id
+        );
+        dispatch({ type: "FETCH_WORK_LOG_SUCCESS", payload: result.data });
       } catch (error) {
         console.log(error);
       }
     };
 
-    const fetchData = () => {
+    const fetchAssignLog = async (selectedTicket) => {
       try {
-        const ticketFields = axios.get("/ticket/" + selected.id);
-        const userFields = axios.get("/user/" + selected.lsu_id);
+        const result = await axios.get(
+          "/ticket/assign/" + selectedTicket.ticket_id
+        );
+        dispatch({ type: "FETCH_ASSIGN_LOG_SUCCESS", payload: result.data });
       } catch (error) {
         console.log(error);
       }
     };
-    fetchData();
-    fetchWorkLog();
-  }, [selected]);
 
+    const fetchData = async (selectedTicket) => {
+      String.prototype.toProperCase = function () {
+        return this.replace(/\w\S*/g, function (txt) {
+          return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+        });
+      };
+
+      try {
+        const result = await axios.get("/ticket/" + selectedTicket.ticket_id);
+        const userResult = await axios.get("/user/" + selectedTicket.lsu_id);
+        let final = [];
+        for (const [key, value] of Object.entries(result.data)) {
+          console.log(`${key}: ${value}`);
+          final.push({
+            name: key,
+            value: value,
+            error: false,
+            error_type: "none",
+            label: key.replace("_", " ").toProperCase(),
+          });
+        }
+
+        for (const [key, value] of Object.entries(userResult.data)) {
+          console.log(`${key}: ${value}`);
+          final.push({
+            name: key,
+            value: value,
+            error: false,
+            error_type: "none",
+            label: key.replace("_", " ").toProperCase(),
+          });
+        }
+        const union = _.unionBy(final, fields, "name");
+        dispatch({
+          type: "FETCH_TICKET_SUCCESS",
+          payload: union,
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    if (selectedTicket != null) {
+      fetchData(selectedTicket);
+      fetchWorkLog(selectedTicket);
+      fetchAssignLog(selectedTicket);
+    }
+  }, [selectedTicket]);
+
+  const internalFormSubmit = async (e, data) => {
+    const response = await handleFormSubmit(e, data, "/ticket");
+    if (response.status === 201) {
+      dispatch({ type: "CLEAR_FORM" });
+    }
+  };
   return (
     <>
       <EuiForm>
         <EuiTitle size={"s"}>
           <h3>Customer Information</h3>
         </EuiTitle>
-        <UserView data={data} setData={setData} />
-        <AdminView data={data} setData={setData} workLogData={workLogData} />
+        {state.isLoading ? null : (
+          <>
+            <UserView data={state.data} dispatch={dispatch} />
+            <AdminView
+              data={state.data}
+              dispatch={dispatch}
+              workLogData={state.workLogData}
+              assignLogData={state.assignLogData}
+            />
+          </>
+        )}
+
         <EuiSpacer />
         <EuiFlexGroup gutterSize="s" alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiButton
               type={"submit"}
-              onClick={(e) => handleFormSubmit(e, data)}
+              onClick={(e) => internalFormSubmit(e, state.data)}
             >
               Submit
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiForm>
-      <Debug data={data} />
+      <Debug data={state.data} />
     </>
   );
 };
@@ -171,7 +242,10 @@ export const ManageTicket = (props) => {
         {selectedTicket == null ? (
           "Please select ticket."
         ) : (
-          <TicketForm selected={selectedTicket} setData={setSelectedTicket} />
+          <TicketForm
+            selectedTicket={selectedTicket}
+            setSelectedTicket={setSelectedTicket}
+          />
         )}
       </EuiPanel>
     </>

client/src/routes/admin/SelectTechnician.js

@@ -43,7 +43,6 @@ export const SelectTechnician = ({ technician, setTechnician }, ...props) => {
 
   useEffect(() => {
     const fetchData = async () => {
-      dispatch({ type: "FETCH_INIT" });
       try {
         const result = await axios.get("/user/admin");
         const final = {

client/src/routes/admin/admin.js

@@ -21,12 +21,6 @@ import {
   EuiCode,
 } from "@elastic/eui";
 import { NavBar } from "../../components/navbar/navbar";
-import { TicketsTable } from "../../components/table/TicketsTable";
-import { AdminTicketFlyout } from "../../components/flyout/flyout";
-import { UserView } from "../../components/form/ManageTicketForm/userView";
-import { fields } from "../../components/form/ManageTicketForm/fields";
-import { handleFormSubmit } from "../../components/form/ManageTicketForm/handlers";
-import { AdminView } from "../../components/form/ManageTicketForm/adminView";
 import { SelectTechnician } from "./SelectTechnician";
 import { ManageTicket } from "./ManageTicket";