Added allocation adding + basic pull

client/src/components/allocations-assignment/allocations-assignment.component.jsx

@@ -0,0 +1,76 @@
+import { Select, Button, Popover, InputNumber } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+export default connect(
+  mapStateToProps,
+  null
+)(function AllocationsAssignmentComponent({
+  bodyshop,
+  handleAssignment,
+  assignment,
+  setAssignment,
+  visibilityState,
+  maxHours
+}) {
+  const { t } = useTranslation();
+
+  const onChange = e => {
+    console.log("e", e);
+    setAssignment({ ...assignment, employeeid: e });
+  };
+
+  const [visibility, setVisibility] = visibilityState;
+
+  const popContent = (
+    <div>
+      <Select
+        showSearch
+        style={{ width: 200 }}
+        placeholder="Select a person"
+        optionFilterProp="children"
+        onChange={onChange}
+        filterOption={(input, option) =>
+          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }
+      >
+        {bodyshop.employees.map(emp => (
+          <Select.Option value={emp.id} key={emp.id}>
+            {`${emp.first_name} ${emp.last_name}`}
+          </Select.Option>
+        ))}
+      </Select>
+      <InputNumber
+        defaultValue={assignment.hours}
+        placeholder={t("joblines.fields.mod_lb_hrs")}
+        max={parseFloat(maxHours)}
+        min={0}
+        onChange={e => setAssignment({ ...assignment, hours: e })}
+      />
+
+      <Button
+        type="primary"
+        disabled={!assignment.employeeid}
+        onClick={handleAssignment}
+      >
+        Assign
+      </Button>
+      <Button onClick={() => setVisibility(false)}>Close</Button>
+    </div>
+  );
+
+  return (
+    <Popover content={popContent} visible={visibility}>
+      <Button onClick={() => setVisibility(true)}>
+        {t("allocations.actions.assign")}
+      </Button>
+    </Popover>
+  );
+});

client/src/components/allocations-assignment/allocations-assignment.container.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import AllocationsAssignmentComponent from "./allocations-assignment.component";
+import { useMutation } from "react-apollo";
+import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
+import { useTranslation } from "react-i18next";
+import { notification } from "antd";
+
+export default function AllocationsAssignmentContainer({ jobLineId, hours }) {
+  const visibilityState = useState(false);
+  const { t } = useTranslation();
+  const [assignment, setAssignment] = useState({
+    joblineid: jobLineId,
+    hours: parseFloat(hours),
+    employeeid: null
+  });
+  const [insertAllocation] = useMutation(INSERT_ALLOCATION);
+
+  const handleAssignment = () => {
+    insertAllocation({ variables: { alloc: { ...assignment } } }).then(r => {
+      notification["success"]({
+        message: t("employees.successes.save")
+      });
+      //TODO: Better way to reset the field decorators?
+      visibilityState[1](false);
+      //refetch().then(r => form.resetFields());
+    });
+  };
+
+  return (
+    <AllocationsAssignmentComponent
+      handleAssignment={handleAssignment}
+      maxHours={hours}
+      assignment={assignment}
+      setAssignment={setAssignment}
+      visibilityState={visibilityState}
+    />
+  );
+}