admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added tabs to jobs detail + some basic rendering.

Browse Source
This commit is contained in:
Patrick Fic
2020-08-17 15:54:15 -07:00
parent 3ea3cd9fce
commit 285d3fd91f
15 changed files with 349 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app.json
View File

@@ -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
},

75
babel-translations.babel
View File

@@ -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>

15
components/job-list-item/job-list-item.component.jsx
View File

@@ -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 = () => {

64
components/job-notes-item/job-notes-item.component.jsx Normal file
View File

@@ -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>
);
};

37
components/job-notes/job-notes.component.jsx Normal file
View File

@@ -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}
/>
);
}

82
components/job-tombstone/job-tombstone.component.jsx Normal file
View File

@@ -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",
},
});

2
components/loading-display/loading-display.component.jsx
View File

@@ -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>
);

44
components/screen-job-detail/screen-job-detail.component.jsx
View File

@@ -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>
<Text>The is the detail of the job.</Text>
</View>
<Tabs>
<Tab heading={t("jobdetail.labels.job")}>
<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>
);
}

22
components/screen-main/screen-main.component.jsx
View File

@@ -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 {
StatusBar as rnStatusBar,
StyleSheet,
View,
Button,
} from "react-native";
import { StatusBar as rnStatusBar, StyleSheet } 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 ? (

16
graphql/jobs.queries.js
View File

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

1
package.json
View File

@@ -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",

7
translations/en-US/common.json
View File

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

7
translations/es-MX/common.json
View File

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

7
translations/fr-CA/common.json
View File

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

5
yarn.lock
View File

@@ -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"