WIP for Job Costing BOD-192

client/src/components/job-costing-modal/job-costing-modal.component.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import JobCostingPartsTable from "../job-costing-parts-table/job-costing-parts-table.component";
+import { Row, Col } from "antd";
+
+const colSpan = {
+  md: { span: 24 },
+  lg: { span: 12 },
+};
+
+export default function JobCostingModalComponent({ job }) {
+  return (
+    <div>
+      <Row gutter={[32, 32]}>
+        <Col {...colSpan}>
+          <JobCostingPartsTable job={job} />
+        </Col>
+        <Col {...colSpan}></Col>
+      </Row>
+    </div>
+  );
+}

client/src/components/job-costing-modal/job-costing-modal.container.jsx

@@ -0,0 +1,57 @@
+import { useQuery } from "@apollo/react-hooks";
+import { Modal } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_JOB_COSTING_DETAILS } from "../../graphql/jobs.queries";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectJobCosting } from "../../redux/modals/modals.selectors";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import JobCostingModalComponent from "./job-costing-modal.component";
+
+const mapStateToProps = createStructuredSelector({
+  jobCostingModal: selectJobCosting,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("jobCosting")),
+});
+
+export function JobCostingModalContainer({
+  jobCostingModal,
+  toggleModalVisible,
+}) {
+  const { t } = useTranslation();
+
+  const { visible, context, actions } = jobCostingModal;
+  const { jobId } = context;
+
+  const { loading, error, data } = useQuery(QUERY_JOB_COSTING_DETAILS, {
+    variables: { id: jobId },
+    skip: !jobId,
+  });
+
+  return (
+    <Modal
+      visible={visible}
+      title={t("jobs.labels.jobcosting")}
+      onCancel={() => toggleModalVisible()}
+      width='90%'
+      destroyOnClose
+      forceRender>
+      {error ? <AlertComponent message={error.message} type='error' /> : null}
+      {loading ? (
+        <LoadingSpinner loading={loading} />
+      ) : (
+        <JobCostingModalComponent job={data && data.jobs_by_pk} />
+      )}
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobCostingModalContainer);