Added sync button to job header IO-544

bodyshop_translations.babel

@@ -14077,6 +14077,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>sync</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>viewdetail</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/job-sync-button/job-sync-button.component.jsx

@@ -0,0 +1,23 @@
+import { Button } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { SyncOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+
+export default function JobSyncButton({ job }) {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const handleClick = () => {
+    history.push(
+      `/manage/available?availableJobId=${job.available_jobs[0].id}&clm_no=${job.clm_no}`
+    );
+  };
+  if (job && job.available_jobs && job.available_jobs.length > 0)
+    return (
+      <Button onClick={handleClick}>
+        <SyncOutlined />
+        {t("jobs.actions.sync")}
+      </Button>
+    );
+  else return null;
+}

client/src/components/jobs-available-table/jobs-available-table.container.jsx

@@ -9,10 +9,10 @@ import Axios from "axios";
 import Dinero from "dinero.js";
 import gql from "graphql-tag";
 import _ from "lodash";
-import React, { useState } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
@@ -35,6 +35,8 @@ import HeaderFields from "./jobs-available-supplement.headerfields";
 import JobsAvailableTableComponent from "./jobs-available-table.component";
 import moment from "moment";
 import { INSERT_NEW_NOTE } from "../../graphql/notes.queries";
+import queryString from "query-string";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   currentUser: selectCurrentUser,
@@ -44,7 +46,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser }) {
   const { loading, error, data, refetch } = useQuery(QUERY_AVAILABLE_JOBS, {
     fetchPolicy: "network-only",
   });
-
+  const { clm_no, availableJobId } = queryString.parse(useLocation().search);
   const history = useHistory();
   const { t } = useTranslation();
 
@@ -302,11 +304,17 @@ export function JobsAvailableContainer({ bodyshop, currentUser }) {
     setOwnerModalVisible(true);
   };
 
-  const addJobAsSupp = (record) => {
+  const addJobAsSupp = useCallback((record) => {
     loadEstData({ variables: { id: record.id } });
     modalSearchState[1](record.clm_no);
     setJobModalVisible(true);
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (availableJobId && clm_no)
+      addJobAsSupp({ id: availableJobId, clm_no: clm_no });
+  }, [addJobAsSupp, availableJobId, clm_no]);
 
   if (error) return <AlertComponent type="error" message={error.message} />;
   return (

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -9,6 +9,7 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
+import JobSyncButton from "../job-sync-button/job-sync-button.component";
 import JobsChangeStatus from "../jobs-change-status/jobs-change-status.component";
 import JobsConvertButton from "../jobs-convert-button/jobs-convert-button.component";
 import JobsDetailHeaderActions from "../jobs-detail-header-actions/jobs-detail-header-actions.component";
@@ -47,7 +48,7 @@ export function JobsDetailHeader({
   const menuExtra = (
     <div className="imex-flex-row">
       <JobsChangeStatus job={job} />
-
+      <JobSyncButton job={job} />
       <Button
         className="imex-flex-row__margin"
         onClick={() => {

client/src/graphql/jobs.queries.js

@@ -359,6 +359,9 @@ export const GET_JOB_BY_PK = gql`
         v_make_desc
         v_color
       }
+      available_jobs {
+        id
+      }
       ins_co_id
       policy_no
       loss_date

client/src/translations/en_us/common.json

@@ -902,6 +902,7 @@
 				"removefromproduction": "Remove from Production",
 				"schedule": "Schedule",
 				"sendcsi": "Send CSI",
+				"sync": "Sync",
 				"viewdetail": "View Details"
 			},
 			"errors": {

client/src/translations/es/common.json

@@ -902,6 +902,7 @@
 				"removefromproduction": "",
 				"schedule": "Programar",
 				"sendcsi": "",
+				"sync": "",
 				"viewdetail": ""
 			},
 			"errors": {

client/src/translations/fr/common.json

@@ -902,6 +902,7 @@
 				"removefromproduction": "",
 				"schedule": "Programme",
 				"sendcsi": "",
+				"sync": "",
 				"viewdetail": ""
 			},
 			"errors": {