Merge pull request #20 from cdalton713/react-frontend

frontend mostly done

client/src/api/api.js

@@ -1,5 +1,5 @@
 import axios from "axios";
 
 export default axios.create({
-  baseURL: `http://localhost/`,
+  baseURL: `http://localhost:3000/api/`,
 });

client/src/api/reducers.js

@@ -0,0 +1,61 @@
+import {
+  fields,
+  workLogFields,
+} from "../components/form/ManageTicketForm/fields";
+
+export const dataFetchReducer = (state, action) => {
+  switch (action.type) {
+    case "CLEAR_FORM":
+      const newData = state.data;
+      newData.map((o) => (o.value = ""));
+      return {
+        ...state,
+        data: newData,
+      };
+    case "FETCH_INIT":
+      return {
+        ...state,
+        isLoading: true,
+        isError: false,
+      };
+    case "FETCH_TICKET_SUCCESS":
+      return {
+        ...state,
+        isLoading: false,
+        isError: false,
+        data: action.payload,
+      };
+    case "FETCH_TECHNICIANS_SUCCESS":
+      return {
+        ...state,
+        isLoading: false,
+        isError: false,
+        selectTechnicianOptions: action.payload,
+      };
+    case "FETCH_FAILURE":
+      return {
+        ...state,
+        isLoading: false,
+        isError: true,
+      };
+    case "UPDATE_DATA":
+      return {
+        ...state,
+        data: action.payload,
+      };
+    case "FETCH_WORK_LOG_SUCCESS":
+      return {
+        ...state,
+        workLogData: action.payload,
+        workLogLoading: false,
+      };
+    case "FETCH_ASSIGN_LOG_SUCCESS":
+      return {
+        ...state,
+        assignLogData: action.payload,
+        assignLogLoading: false,
+      };
+    default:
+      throw new Error();
+  }
+};

client/src/components/app/app.js

@@ -10,4 +10,4 @@ export const App = () => {
   );
 };
 
-export const DEBUG_ON = true;
+export const DEBUG_ON = false;

client/src/components/callout/Callout.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+import { EuiCallOut, EuiLink } from "@elastic/eui";
+
+export const ErrorCallout = ({ errMsg }, ...props) => {
+  return (
+    <EuiCallOut
+      title="Sorry, there was an error"
+      color="danger"
+      iconType="alert"
+    >
+      <p>{errMsg}</p>
+    </EuiCallOut>
+  );
+};

client/src/components/form/ManageTechnicianForm/NewTechnicianForm.js

@@ -15,58 +15,61 @@ import {
   handleFormFieldBlur,
   handleFormFieldChange,
 } from "../ManageTicketForm/handlers";
+import { MySelectField } from "../MySelectField";
+import { selectOptions } from "../selectOptions";
 
 var _ = require("lodash");
 
-export const NewTechnicianForm = ({ data, setData }, ...props) => {
+export const NewTechnicianForm = ({ data, dispatch }, ...props) => {
   return (
     <>
       <EuiFlexItem>
         <MyTextField
           name={"first_name"}
           data={data}
-          handleChange={(e) => handleFormFieldChange(e, data, setData)}
-          handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+          handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+          handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
         />
       </EuiFlexItem>
       <EuiFlexItem>
         <MyTextField
           name={"last_name"}
           data={data}
-          handleChange={(e) => handleFormFieldChange(e, data, setData)}
-          handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+          handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+          handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
         />
       </EuiFlexItem>
       <EuiFlexItem>
         <MyTextField
           name={"lsu_id"}
           data={data}
-          handleChange={(e) => handleFormFieldChange(e, data, setData)}
-          handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+          handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+          handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
         />
       </EuiFlexItem>
       <EuiFlexItem>
-        <MyTextField
+        <MySelectField
           name={"department"}
           data={data}
-          handleChange={(e) => handleFormFieldChange(e, data, setData)}
-          handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+          selectOptions={selectOptions.find((o) => o.name === "department")}
+          handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+          handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
         />
       </EuiFlexItem>
       <EuiFlexItem>
         <MyTextField
           name={"email"}
           data={data}
-          handleChange={(e) => handleFormFieldChange(e, data, setData)}
-          handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+          handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+          handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
         />
       </EuiFlexItem>
       <EuiFlexItem>
         <MyTextField
           name={"phone_number"}
           data={data}
-          handleChange={(e) => handleFormFieldChange(e, data, setData)}
-          handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+          handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+          handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
         />
       </EuiFlexItem>
     </>

client/src/components/form/ManageTechnicianForm/fields.js

@@ -1,17 +1,16 @@
-export const selectOptions = [
+export const selectTechnicianOptions_default = [
   {
     name: "technician",
-    options: [
-      { value: "tech_a", text: "Tech A" },
-      { value: "tech_b", text: "Tech B" },
-    ],
+    options: [{ value: "", text: "" }],
   },
 ];
+
 export const fields = [
   {
     name: "technician",
     label: "Technician",
-    value: selectOptions.find((o) => o.name === "technician").options[0].value,
+    value: selectTechnicianOptions_default.find((o) => o.name === "technician")
+      .options[0].value,
     error: false,
     error_type: "required",
   },

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

@@ -11,25 +11,53 @@ import {
   EuiTitle,
 } from "@elastic/eui";
 import React, { useState } from "react";
-import { MyTextField } from "../MyTextField";
 import { MySelectField } from "../MySelectField";
-import { addToast } from "../../toast";
-import { DEBUG } from "../../app/app";
-import { errorMessages } from "./fields";
+import { errorMessages, workLogFields } from "./fields";
 import {
   handleDateChange,
   handleFormFieldBlur,
   handleFormFieldChange,
+  handleFormSubmit,
 } from "./handlers";
 import { selectOptions } from "../selectOptions";
-import { MyDatePicker } from "../MyDatePicker";
-import { TicketAssignmentTable } from "../../table/assignedTo";
+import { WorkLogTable } from "../../table/WorkLogTable";
+import { TicketAssignmentTable } from "../../table/TicketAssignmentTable";
 import { AddTechnicianPopover } from "../../popover/TechnicianPopover";
-import { TimeLogTable } from "../../table/TimeLogTable";
+import { MyDatePicker } from "../MyDatePicker";
 
 var _ = require("lodash");
 
-export const AdminView = ({ data, setData }, ...props) => {
+export const AdminView = (
+  {
+    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 />
@@ -41,18 +69,18 @@ export const AdminView = ({ data, setData }, ...props) => {
           <MySelectField
             data={data}
             name={"core_issue"}
-            selectOptions={selectOptions}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
+            selectOptions={selectOptions.find((o) => o.name === "core_issue")}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
           />
         </EuiFlexItem>
         <EuiFlexItem>
           <MySelectField
             data={data}
             name={"component"}
-            selectOptions={selectOptions}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
+            selectOptions={selectOptions.find((o) => o.name === "component")}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -64,20 +92,21 @@ export const AdminView = ({ data, setData }, ...props) => {
       <EuiFlexGroup style={{ maxWidth: 1000 }}>
         <EuiFlexItem style={{ maxWidth: 1000 }}>
           <EuiFormRow
-            label={_.find(data, ["name", "description"]).label}
+            label={_.find(data, ["name", "notes"]).label}
             error={[
               _.find(errorMessages, [
                 "error_type",
-                _.find(data, ["name", "description"]).error_type,
+                _.find(data, ["name", "notes"]).error_type,
               ]).error_message,
             ]}
-            isInvalid={_.find(data, ["name", "description"]).error}
+            isInvalid={_.find(data, ["name", "notes"]).error}
           >
             <EuiTextArea
               placeholder={"Ticket notes..."}
               name={_.find(data, ["name", "notes"]).name}
-              onChange={(e) => handleFormFieldChange(e, data, setData)}
-              onBlur={(e) => handleFormFieldBlur(e, data, setData)}
+              onChange={(e) => handleFormFieldChange(e, data, dispatch)}
+              onBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
+              value={_.find(data, ["name", "description"]).value}
             />
           </EuiFormRow>
         </EuiFlexItem>
@@ -93,9 +122,20 @@ export const AdminView = ({ data, setData }, ...props) => {
         <EuiFlexItem style={{ maxWidth: 500 }}>
           <EuiFormRow hasEmptyLabelSpace={true}>
             <>
-              <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>
@@ -105,48 +145,50 @@ export const AdminView = ({ data, setData }, ...props) => {
         <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={data}
+              data={timeData}
               name={"start_datetime"}
               handleChange={(date) =>
-                handleDateChange(date, "start_datetime", data, setData)
+                handleDateChange(date, "start_datetime", timeData, setTimeData)
               }
             />
           </EuiFormRow>
         </EuiFlexItem>
         <EuiFlexItem style={{ maxWidth: 200 }}>
           <EuiFormRow>
             <MyDatePicker
-              data={data}
+              data={timeData}
               name={"end_datetime"}
-              // handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
               handleChange={(e) =>
-                handleDateChange(e, "end_datetime", data, setData)
+                handleDateChange(e, "end_datetime", timeData, setTimeData)
               }
             />
           </EuiFormRow>
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiFormRow hasEmptyLabelSpace={true}>
-            <EuiButton>Add Time Entry</EuiButton>
+            <EuiButton onClick={(e) => internalFormSubmit(e, timeData)}>
+              Add Time Entry
+            </EuiButton>
           </EuiFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiFlexGroup style={{ maxWidth: 1000 }}>
         <EuiFlexItem>
           <EuiFormRow>
             <MySelectField
-              handleChange={(e) => handleFormFieldChange(e, data, setData)}
-              handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
-              selectOptions={selectOptions}
+              handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+              handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
+              selectOptions={selectOptions.find((o) => o.name === "status")}
               data={data}
               name={"status"}
             />