Added status changing information

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

@@ -1,26 +1,41 @@
 import {
   Avatar,
+  Badge,
   Button,
   Checkbox,
   Descriptions,
+  Dropdown,
+  Icon,
+  Menu,
   notification,
   PageHeader,
-  Tag,
-  Badge
+  Tag
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Moment from "react-moment";
+import { connect } from "react-redux";
 import { Link } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import CarImage from "../../assets/car.svg";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 
-export default function JobsDetailHeader({
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+export default connect(
+  mapStateToProps,
+  null
+)(function JobsDetailHeader({
   job,
   mutationConvertJob,
   refetch,
   handleSubmit,
-  scheduleModalState
+  scheduleModalState,
+  bodyshop,
+  updateJobStatus
 }) {
   const { t } = useTranslation();
   const setscheduleModalVisible = scheduleModalState[1];
@@ -60,7 +75,26 @@ export default function JobsDetailHeader({
     </div>
   );
 
+  const statusmenu = (
+    <Menu
+      onClick={e => {
+        updateJobStatus({
+          variables: { jobId: job.id, status: e.key }
+        }).then(r => refetch());
+      }}
+    >
+      {bodyshop.md_ro_statuses.statuses.map(item => (
+        <Menu.Item key={item}>{item}</Menu.Item>
+      ))}
+    </Menu>
+  );
+
   const menuExtra = [
+    <Dropdown overlay={statusmenu} key="changestatus">
+      <Button>
+        {t("jobs.actions.changestatus")} <Icon type="down" />
+      </Button>
+    </Dropdown>,
     <Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
       <Button
         //TODO: Enabled logic based on status.
@@ -138,4 +172,4 @@ export default function JobsDetailHeader({
       </Descriptions>
     </PageHeader>
   );
-}
+});