Add job status changer.

components/job-tombstone/job-tombstone.jsx

@@ -7,15 +7,15 @@ import { useTranslation } from "react-i18next";
 import { RefreshControl, ScrollView, StyleSheet, View } from "react-native";
 import {
   ActivityIndicator,
-  Button,
   Card,
-  Menu,
+  Chip,
   Text,
   useTheme,
 } from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import DataLabelComponent from "../data-label/data-label";
+import { JobStatusSelector } from "../job-status-selector/JobStatusSelector";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -31,10 +31,7 @@ function JobTombstone({ bodyshop }) {
     },
     skip: !jobId,
   });
-  const [visible, setVisible] = useState(false);
-  const openMenu = () => setVisible(true);
-  const closeMenu = () => setVisible(false);
-  console.log("JobTombstone render", visible);
+  console.log("JobTombstone render");
 
   const theme = useTheme();
 
@@ -44,6 +41,8 @@ function JobTombstone({ bodyshop }) {
   };
 
   const [availableStatuses, setAvailableStatuses] = useState([]);
+  const job = data?.jobs_by_pk;
+
   useEffect(() => {
     if (!job || !bodyshop) return;
 
@@ -88,7 +87,7 @@ function JobTombstone({ bodyshop }) {
       </Card>
     );
   }
-  const job = data.jobs_by_pk;
+
   return (
     <ScrollView
       contentContainerStyle={{
@@ -105,23 +104,33 @@ function JobTombstone({ bodyshop }) {
           titleVariant="titleLarge"
         />
         <Card.Content>
-          <Text>{job.status}</Text>
-          <Menu
-            visible={visible}
-            onDismiss={closeMenu}
-            anchor={<Button onPress={openMenu}>{job.status}</Button>}
-          >
-            {availableStatuses.map((status) => (
-              <Menu.Item key={status} onPress={() => {}} title={status} />
-            ))}
-          </Menu>
+          <DataLabelComponent
+            label={t("objects.jobs.fields.status")}
+            content={
+              <JobStatusSelector
+                statuses={availableStatuses}
+                currentStatus={job.status}
+                label={t("jobdetail.labels.jobstatus")}
+              />
+            }
+          />
           {job.inproduction && (
-            <Text>{t("objects.jobs.labels.inproduction")}</Text>
+            <DataLabelComponent
+              label={t("objects.jobs.fields.inproduction")}
+              content={
+                <Chip mode="outlined">
+                  {t("objects.jobs.labels.inproduction")}
+                </Chip>
+              }
+            />
           )}
           {job.inproduction &&
             job.production_vars &&
             !!job.production_vars.note && (
-              <Text>{job.production_vars.note}</Text>
+              <DataLabelComponent
+                label={t("objects.jobs.fields.production_note")}
+                content={<Text>{job.production_vars.note}</Text>}
+              />
             )}
         </Card.Content>
       </Card>