EXPO Package Upgrades and added job details fields.

components/data-label/data-label.component.jsx

@@ -0,0 +1,28 @@
+import { Input, Item, Label } from "native-base";
+import React from "react";
+import { StyleSheet } from "react-native";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { DateTime } from "luxon";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = (dispatch) => ({});
+
+export function DataLabelComponent({ label, content, dateTime, ...restProps }) {
+  let theContent = content;
+
+  if (dateTime && content)
+    theContent = DateTime.fromISO(content).toLocaleString(
+      DateTime.DATETIME_SHORT
+    );
+
+  return (
+    <Item stackedLabel {...restProps}>
+      <Label>{label}</Label>
+      <Input disabled placeholder={theContent} />
+    </Item>
+  );
+}
+const localStyles = StyleSheet.create({});
+export default connect(mapStateToProps, mapDispatchToProps)(DataLabelComponent);

components/job-list-item/job-list-item.component.jsx

@@ -50,36 +50,38 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
 
   return (
     <Swipeable renderRightActions={() => <RenderRightAction />}>
-      <Card>
-        <CardItem header bordered first button onPress={onPress}>
-          <View style={localStyles.item_header}>
-            <H3 style={localStyles.item_header_content}>
-              {item.ro_number ? item.ro_number : `EST-${item.est_number}`}
-            </H3>
-            <Text style={localStyles.item_header_margin}>
-              {item.clm_no || ""}
-            </Text>
-          </View>
-        </CardItem>
-        <CardItem bordered last button>
-          <View>
-            <Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
-              item.ownr_co_nm || ""
-            }`}</Text>
-            <Text>{`${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
-              item.v_model_desc || ""
-            }`}</Text>
-          </View>
-          <View style={[{ width: 150 }, localStyles.card_content_margin]}>
-            <Text numberOfLines={1}>{item.ins_co_nm || ""}</Text>
-            <Text>
-              {Dinero({
-                amount: Math.round(item.clm_total * 100),
-              }).toFormat() || ""}
-            </Text>
-          </View>
-        </CardItem>
-      </Card>
+      <TouchableOpacity onPress={onPress}>
+        <Card>
+          <CardItem header bordered first button>
+            <View style={localStyles.item_header}>
+              <H3 style={localStyles.item_header_content}>
+                {item.ro_number ? item.ro_number : `EST-${item.est_number}`}
+              </H3>
+              <Text style={localStyles.item_header_margin}>
+                {item.clm_no || ""}
+              </Text>
+            </View>
+          </CardItem>
+          <CardItem bordered last button>
+            <View>
+              <Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
+                item.ownr_co_nm || ""
+              }`}</Text>
+              <Text>{`${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
+                item.v_model_desc || ""
+              }`}</Text>
+            </View>
+            <View style={[{ width: 150 }, localStyles.card_content_margin]}>
+              <Text numberOfLines={1}>{item.ins_co_nm || ""}</Text>
+              <Text>
+                {Dinero({
+                  amount: Math.round(item.clm_total * 100),
+                }).toFormat() || ""}
+              </Text>
+            </View>
+          </CardItem>
+        </Card>
+      </TouchableOpacity>
     </Swipeable>
   );
 }

components/job-tombstone/job-tombstone.component.jsx

@@ -1,17 +1,20 @@
-import Dinero from "dinero.js";
 import {
   Card,
   CardItem,
-  H3,
-  Text,
-  View,
   Container,
   Content,
+  Form,
+  H2,
+  H3,
+  Text,
 } from "native-base";
 import React from "react";
-import { StyleSheet, RefreshControl } from "react-native";
+import { RefreshControl, StyleSheet } from "react-native";
+import DataLabelComponent from "../data-label/data-label.component";
+import { useTranslation } from "react-i18next";
 
 export default function JobTombstone({ job, loading, refetch }) {
+  const { t } = useTranslation();
   if (!!!job) {
     <Card>
       <Text>Job is not defined.</Text>
@@ -31,34 +34,108 @@ export default function JobTombstone({ job, loading, refetch }) {
       >
         <Card>
           <CardItem bordered style={localStyles.status}>
-            <H3>{job.status}</H3>
+            <H2>{job.status}</H2>
           </CardItem>
-          <CardItem bordered style={localStyles.ins_card}>
-            <View style={{ flex: 3, marginright: 10 }}>
-              <Text numberOfLines={1}>{job.ins_co_nm || ""}</Text>
-              <Text numberOfLines={1}>{job.clm_no || ""}</Text>
-            </View>
-            <View style={{ flex: 1, marginLeft: 10 }}>
-              <Text numberOfLines={1}>{job.ded_status || ""}</Text>
-              <Text numberOfLines={1}>
-                {Dinero({ amount: (job.ded_amt || 0) * 100 }).toFormat()}
-              </Text>
-            </View>
+          {job.inproduction && (
+            <CardItem bordered style={localStyles.inproduction}>
+              <Text>{t("objects.jobs.labels.inproduction")}</Text>
+            </CardItem>
+          )}
+          {job.inproduction && job.production_vars && job.production_vars.note && (
+            <CardItem bordered style={localStyles.inproduction}>
+              <Text>{job.production_vars.note}</Text>
+            </CardItem>
+          )}
+        </Card>
+        <Card>
+          <CardItem bordered style={localStyles.status}>
+            <H3>{t("jobdetail.labels.claiminformation")}</H3>
           </CardItem>
-          <CardItem bordered style={localStyles.owner_card}>
-            <View style={{ flex: 1 }}>
-              <Text numberOfLines={1}>{`${job.ownr_fn || ""} ${
-                job.ownr_ln || ""
-              }${job.ownr_co_nm || ""}`}</Text>
-              <Text>{job.ownr_ph1 || ""}</Text>
-            </View>
-            <View style={{ flex: 1 }}>
-              <Text numberOfLines={2}>{`${job.v_model_yr || ""} ${
-                job.v_make_desc || ""
-              } ${job.v_model_desc || ""} ${job.v_vin || ""}`}</Text>
-            </View>
+          <Form>
+            <DataLabelComponent
+              label={t("objects.jobs.fields.owner")}
+              content={`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
+                job.ownr_co_nm || ""
+              }`}
+            />
+            <DataLabelComponent
+              label={t("objects.jobs.fields.vehicle")}
+              content={`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${
+                job.v_model_desc || ""
+              }`}
+            />
+            <DataLabelComponent
+              label={t("objects.jobs.fields.ins_co_nm")}
+              content={job.ins_co_nm}
+            />
+            <DataLabelComponent
+              label={t("objects.jobs.fields.clm_no")}
+              content={job.clm_no}
+            />
+          </Form>
+        </Card>
+        <Card>
+          <CardItem bordered style={localStyles.status}>
+            <H3>{t("jobdetail.labels.employeeassignments")}</H3>
           </CardItem>
-          <CardItem></CardItem>
+          <Form>
+            <DataLabelComponent
+              label={t("objects.jobs.fields.employee_body")}
+              content={`${
+                (job.employee_body_rel && job.employee_body_rel.first_name) ||
+                ""
+              } ${
+                (job.employee_body_rel && job.employee_body_rel.last_name) || ""
+              }`}
+            />
+            <DataLabelComponent
+              label={t("objects.jobs.fields.employee_prep")}
+              content={`${
+                (job.employee_prep_rel && job.employee_prep_rel.first_name) ||
+                ""
+              } ${
+                (job.employee_prep_rel && job.employee_prep_rel.last_name) || ""
+              }`}
+            />
+            <DataLabelComponent
+              label={t("objects.jobs.fields.employee_refinish")}
+              content={`${
+                (job.employee_refinish_rel &&
+                  job.employee_refinish_rel.first_name) ||
+                ""
+              } ${
+                (job.employee_refinish_rel &&
+                  job.employee_refinish_rel.last_name) ||
+                ""
+              }`}
+            />
+          </Form>
+        </Card>
+        <Card style={localStyles.twoColumnCard}>
+          <Form style={localStyles.twoColumnCardColumn}>
+            <DataLabelComponent
+              label={t("objects.jobs.fields.scheduled_in")}
+              content={job.scheduled_in}
+              dateTime
+            />
+            <DataLabelComponent
+              label={t("objects.jobs.fields.actual_in")}
+              content={job.actual_in}
+              dateTime
+            />
+          </Form>
+          <Form style={localStyles.twoColumnCardColumn}>
+            <DataLabelComponent
+              label={t("objects.jobs.fields.scheduled_completion")}
+              content={job.scheduled_completion}
+              dateTime
+            />
+            <DataLabelComponent
+              label={t("objects.jobs.fields.scheduled_delivery")}
+              content={job.scheduled_delivery}
+              dateTime
+            />
+          </Form>
         </Card>
       </Content>
     </Container>
@@ -66,17 +143,47 @@ export default function JobTombstone({ job, loading, refetch }) {
 }
 
 const localStyles = StyleSheet.create({
-  ins_card: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
+  twoColumnCard: { display: "flex", flexDirection: "row" },
+  twoColumnCardColumn: { flex: 1 },
   status: {
     textAlign: "center",
     flexDirection: "row",
     justifyContent: "center",
   },
-  owner_card: {
+  inproduction: {
+    backgroundColor: "tomato",
+    textAlign: "center",
     flexDirection: "row",
-    justifyContent: "space-around",
+    justifyContent: "center",
   },
 });
+
+// <Card>
+
+//   <CardItem bordered style={localStyles.ins_card}>
+//     <View style={{ flex: 3, marginright: 10 }}>
+//       <Text numberOfLines={1}>{job.ins_co_nm || ""}</Text>
+//       <Text numberOfLines={1}>{job.clm_no || ""}</Text>
+//     </View>
+//     <View style={{ flex: 1, marginLeft: 10 }}>
+//       <Text numberOfLines={1}>{job.ded_status || ""}</Text>
+//       <Text numberOfLines={1}>
+//         {Dinero({ amount: (job.ded_amt || 0) * 100 }).toFormat()}
+//       </Text>
+//     </View>
+//   </CardItem>
+//   <CardItem bordered style={localStyles.owner_card}>
+//     <View style={{ flex: 1 }}>
+//       <Text numberOfLines={1}>{`${job.ownr_fn || ""} ${job.ownr_ln || ""}${
+//         job.ownr_co_nm || ""
+//       }`}</Text>
+//       <Text>{job.ownr_ph1 || ""}</Text>
+//     </View>
+//     <View style={{ flex: 1 }}>
+//       <Text numberOfLines={2}>{`${job.v_model_yr || ""} ${
+//         job.v_make_desc || ""
+//       } ${job.v_model_desc || ""} ${job.v_vin || ""}`}</Text>
+//     </View>
+//   </CardItem>
+//   <CardItem></CardItem>
+// </Card>;