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>
+  );
+});