Added tabs to jobs detail + some basic rendering.

app.json

@@ -3,19 +3,20 @@
     "name": "imexmobile",
     "slug": "imexmobile",
     "version": "1.0.0",
-    "orientation": "portrait",
+    "orientation": "default",
     "icon": "./assets/logo240.png",
     "splash": {
       "image": "./assets/logo1024.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#efefef"
+    },
+    "notification": {
+      "icon": "./assets/logo240.png"
     },
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
+    "assetBundlePatterns": ["**/*"],
-      "**/*"
-    ],
     "ios": {
       "supportsTablet": true
     },

babel-translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -78,6 +78,79 @@
                                     </folder_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>jobdetail</name>
+                                <children>
+                                    <folder_node>
+                                        <name>labels</name>
+                                        <children>
+                                            <concept_node>
+                                                <name>documents</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>job</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>notes</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>
+                                        </children>
+                                    </folder_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>joblist</name>
                                 <children>

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

@@ -1,12 +1,12 @@
-import { Card, CardItem, H3, SwipeRow } from "native-base";
-import React from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { useNavigation } from "@react-navigation/native";
-import Swipeable from "react-native-gesture-handler/Swipeable";
-import { useTranslation } from "react-i18next";
 import { Ionicons } from "@expo/vector-icons";
-import styles from "../styles";
+import { useNavigation } from "@react-navigation/native";
+import { Card, CardItem, H3 } from "native-base";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, Text, View } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
+import Swipeable from "react-native-gesture-handler/Swipeable";
+import styles from "../styles";
 
 const RenderRightAction = (props) => {
   const navigation = useNavigation();
@@ -23,7 +23,6 @@ const RenderRightAction = (props) => {
 };
 
 export default function JobListItem({ item }) {
-  console.log("JobListItem -> item", item);
   const navigation = useNavigation();
 
   const onPress = () => {

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

@@ -0,0 +1,64 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
+import { Card, CardItem, Text, View, Row } from "native-base";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import Swipeable from "react-native-gesture-handler/Swipeable";
+import styles from "../styles";
+import { AntDesign } from "@expo/vector-icons";
+
+export default function NoteListItem({ item }) {
+  const { t } = useTranslation();
+
+  return (
+    <Swipeable renderRightActions={() => <RenderRightAction />}>
+      <Card>
+        <CardItem bordered>
+          <View style={{ display: "flex", flex: 1 }}>
+            <Text>{item.text}</Text>
+            <View
+              style={{
+                flexDirection: "row",
+                alignSelf: "flex-end",
+                alignItems: "center",
+              }}
+            >
+              {item.private && (
+                <AntDesign
+                  name="eyeo"
+                  style={{ margin: 4 }}
+                  size={24}
+                  color="black"
+                />
+              )}
+              {item.critical && (
+                <AntDesign
+                  name="warning"
+                  style={{ margin: 4 }}
+                  size={24}
+                  color="tomato"
+                />
+              )}
+              <Text style={{ fontSize: 12 }}>{item.created_at}</Text>
+            </View>
+          </View>
+        </CardItem>
+      </Card>
+    </Swipeable>
+  );
+}
+
+const RenderRightAction = (props) => {
+  const navigation = useNavigation();
+  const { t } = useTranslation();
+  return (
+    <TouchableOpacity
+      style={[styles.swipe_view, styles.swipe_view_blue]}
+      onPress={() => navigation.push("JobCamera")}
+    >
+      <Ionicons name="ios-camera" size={24} color="white" />
+      <Text style={styles.swipe_text}>{t("joblist.actions.swipecamera")}</Text>
+    </TouchableOpacity>
+  );
+};

components/job-notes/job-notes.component.jsx

@@ -0,0 +1,37 @@
+import Dinero from "dinero.js";
+import {
+  Card,
+  CardItem,
+  H3,
+  Text,
+  View,
+  Container,
+  Content,
+} from "native-base";
+import React from "react";
+import { StyleSheet, RefreshControl, FlatList } from "react-native";
+import JobNotesItem from "../job-notes-item/job-notes-item.component";
+
+export default function JobNotes({ job, loading, refetch }) {
+  if (!!!job) {
+    <Card>
+      <Text>Job is not defined.</Text>
+    </Card>;
+  }
+  console.log("job.notes :>> ", job.notes);
+  const onRefresh = async () => {
+    return refetch();
+  };
+
+  return (
+    <FlatList
+      refreshControl={
+        <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+      }
+      style={{ flex: 1 }}
+      data={job.notes}
+      renderItem={(object) => <JobNotesItem item={object.item} />}
+      //ItemSeparatorComponent={FlatListItemSeparator}
+    />
+  );
+}

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

@@ -0,0 +1,82 @@
+import Dinero from "dinero.js";
+import {
+  Card,
+  CardItem,
+  H3,
+  Text,
+  View,
+  Container,
+  Content,
+} from "native-base";
+import React from "react";
+import { StyleSheet, RefreshControl } from "react-native";
+
+export default function JobTombstone({ job, loading, refetch }) {
+  if (!!!job) {
+    <Card>
+      <Text>Job is not defined.</Text>
+    </Card>;
+  }
+  const onRefresh = async () => {
+    return refetch();
+  };
+
+  return (
+    <Container>
+      <Content
+        padder
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+        }
+      >
+        <Card>
+          <CardItem bordered style={localStyles.status}>
+            <H3>{job.status}</H3>
+          </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>
+          </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>
+      </Content>
+    </Container>
+  );
+}
+
+const localStyles = StyleSheet.create({
+  ins_card: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  status: {
+    textAlign: "center",
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  owner_card: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+  },
+});

components/loading-display/loading-display.component.jsx

@@ -5,7 +5,7 @@ import { Container, Content } from "native-base";
 
 export default function LoadingDisplay({ count = 5 }) {
   return (
-    <View>
+    <View style={{ flex: 1, alignContent: "center", justifyContent: "center" }}>
       <BarIndicator count={count} color="dodgerblue" />
     </View>
   );

components/screen-job-detail/screen-job-detail.component.jsx

@@ -1,10 +1,44 @@
+import { useQuery } from "@apollo/client";
+import { Tab, Tabs } from "native-base";
 import React from "react";
-import { View, Text } from "react-native";
+import { useTranslation } from "react-i18next";
+import { Text } from "react-native";
+import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
+import ErrorDisplay from "../error-display/error-display.component";
+import JobTombstone from "../job-tombstone/job-tombstone.component";
+import LoadingDisplay from "../loading-display/loading-display.component";
+import JobNotes from "../job-notes/job-notes.component";
+export default function ScreenJobDetail({ navigation, route, ...restProps }) {
+  const {
+    params: { jobId },
+  } = route;
+  const { t } = useTranslation();
+
+  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
+    variables: {
+      id: jobId,
+    },
+    skip: !jobId,
+  });
+
+  if (loading) return <LoadingDisplay />;
+  if (error) return <ErrorDisplay errorMessage={error.message} />;
 
-export default function ScreenJobDetail({ navigation, ...restProps }) {
   return (
-    <View>
+    <Tabs>
-      <Text>The is the detail of the job.</Text>
+      <Tab heading={t("jobdetail.labels.job")}>
-    </View>
+        <JobTombstone
+          job={data.jobs_by_pk}
+          loading={loading}
+          refetch={refetch}
+        />
+      </Tab>
+      <Tab heading={t("jobdetail.labels.documents")}>
+        <Text>Tab1</Text>
+      </Tab>
+      <Tab heading={t("jobdetail.labels.notes")}>
+        <JobNotes job={data.jobs_by_pk} loading={loading} refetch={refetch} />
+      </Tab>
+    </Tabs>
   );
 }

components/screen-main/screen-main.component.jsx

@@ -1,36 +1,31 @@
+import { Ionicons } from "@expo/vector-icons";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { createDrawerNavigator } from "@react-navigation/drawer";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
-import { createDrawerNavigator } from "@react-navigation/drawer";
 import i18n from "i18next";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import {
+import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
-  StatusBar as rnStatusBar,
-  StyleSheet,
-  View,
-  Button,
-} from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
+  checkUserSession,
   emailSignInStart,
   signOutStart,
-  checkUserSession,
 } from "../../redux/user/user.actions";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import ScreenCamera from "../screen-camera/screen-camera.component";
 import ScreenJobDetail from "../screen-job-detail/screen-job-detail.component";
 import ScreenJobList from "../screen-job-list/screen-job-list.component";
 import ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component";
 import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.component";
-import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
+import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSplash from "../screen-splash/screen-splash.component";
-import ScreenCamera from "../screen-camera/screen-camera.component";
-import { Ionicons } from "@expo/vector-icons";
 
 const JobStack = createStackNavigator();
 const MessagingStack = createStackNavigator();
@@ -151,11 +146,6 @@ export function ScreenMainComponent({
 
   const { t } = useTranslation();
 
-  useEffect(() => {
-    if (currentUser.authorized) console.log("Authed");
-    //Do the saga shit.
-  }, [currentUser]);
-
   return (
     <NavigationContainer>
       {currentUser.authorized === null ? (

graphql/jobs.queries.js

@@ -396,17 +396,13 @@ export const GET_JOB_BY_PK = gql`
         transactionid
         memo
       }
-      cccontracts {
+      notes(order_by: { created_at: desc }) {
         id
-        status
+        text
-        start
+        critical
-        scheduledreturn
+        private
-        agreementnumber
+        created_at
-      }
+        updated_at
-      cieca_ttl
-      csiinvites {
-        id
-        completedon
       }
     }
   }

package.json

@@ -15,6 +15,7 @@
     "@react-navigation/drawer": "^5.9.0",
     "@react-navigation/native": "^5.7.3",
     "@react-navigation/stack": "^5.9.0",
+    "dinero.js": "^1.8.1",
     "expo": "~38.0.8",
     "expo-camera": "~8.3.1",
     "expo-font": "~8.2.1",

translations/en-US/common.json

@@ -8,6 +8,13 @@
 				"signout": "Sign Out"
 			}
 		},
+		"jobdetail": {
+			"labels": {
+				"documents": "Documents",
+				"job": "Job",
+				"notes": "Notes"
+			}
+		},
 		"joblist": {
 			"actions": {
 				"swipecamera": "Add Pictures/Video"

translations/es-MX/common.json

@@ -8,6 +8,13 @@
 				"signout": ""
 			}
 		},
+		"jobdetail": {
+			"labels": {
+				"documents": "",
+				"job": "",
+				"notes": ""
+			}
+		},
 		"joblist": {
 			"actions": {
 				"swipecamera": ""

translations/fr-CA/common.json

@@ -8,6 +8,13 @@
 				"signout": ""
 			}
 		},
+		"jobdetail": {
+			"labels": {
+				"documents": "",
+				"job": "",
+				"notes": ""
+			}
+		},
 		"joblist": {
 			"actions": {
 				"swipecamera": ""

yarn.lock

@@ -2702,6 +2702,11 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
+dinero.js@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/dinero.js/-/dinero.js-1.8.1.tgz#775a647629b4195af9d02f46e9b7fa1fd81e906d"
+  integrity sha512-AQ09MDKonkGUrhBZZFx4tPTVcVJuHJ0VEA73LvcBoBB2eQSi1DbapeXj4wnUUpx1hVnPdyev1xPNnNMGy/Au0g==
+
 dom-storage@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/dom-storage/-/dom-storage-2.1.0.tgz#00fb868bc9201357ea243c7bcfd3304c1e34ea39"