diff --git a/babel-translations.babel b/babel-translations.babel index 62ee034..547658d 100644 --- a/babel-translations.babel +++ b/babel-translations.babel @@ -81,6 +81,32 @@ joblist + + actions + + + swipecamera + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + labels @@ -105,6 +131,27 @@ + + detail + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + diff --git a/components/flat-list-item-separator/flat-list-item-separator.component.jsx b/components/flat-list-item-separator/flat-list-item-separator.component.jsx new file mode 100644 index 0000000..511a779 --- /dev/null +++ b/components/flat-list-item-separator/flat-list-item-separator.component.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import { View, Text } from "react-native"; + +export default function FlatListItemSeparator() { + return ( + + ); +} diff --git a/components/job-list-item/job-list-item.component.jsx b/components/job-list-item/job-list-item.component.jsx new file mode 100644 index 0000000..7554f70 --- /dev/null +++ b/components/job-list-item/job-list-item.component.jsx @@ -0,0 +1,64 @@ +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"; + +const RenderRightAction = (props) => { + const { t } = useTranslation(); + return ( + + + {t("joblist.actions.swipecamera")} + + ); +}; + +export default function JobListItem({ item }) { + console.log("JobListItem -> item", item); + const navigation = useNavigation(); + + const onPress = () => { + navigation.push("JobDetail", { + jobId: item.id, + title: item.ro_number ? item.ro_number : `EST-${item.est_number}`, + }); + }; + + return ( + }> + + + +

+ {item.ro_number ? item.ro_number : `EST-${item.est_number}`} +

+ + {item.clm_no || ""} + + + + + + {`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${ + item.ownr_co_nm || "" + }`} + {`${item.v_model_yr || ""} ${item.v_make_desc || ""} ${ + item.v_model_desc || "" + }`} + + + + + ); +} +const localStyles = StyleSheet.create({ + item_header: { + flexDirection: "row", + alignItems: "center", + }, + item_header_margin: { marginLeft: 10 }, +}); diff --git a/components/job-list/job-list.component.jsx b/components/job-list/job-list.component.jsx index 383e735..81bcc63 100644 --- a/components/job-list/job-list.component.jsx +++ b/components/job-list/job-list.component.jsx @@ -1,30 +1,15 @@ +import { useQuery } from "@apollo/client"; import React from "react"; -import { - View, - Text, - ActivityIndicator, - ListView, - RefreshControl, -} from "react-native"; - +import { RefreshControl } from "react-native"; +import { FlatList } from "react-native-gesture-handler"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; -import { selectBodyshop } from "../../redux/user/user.selectors"; -import { useQuery } from "@apollo/client"; import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries"; -import styles from "../styles"; -import { - Container, - Content, - Card, - CardItem, - Icon, - Right, - H1, -} from "native-base"; -import { FlatList } from "react-native-gesture-handler"; +import { selectBodyshop } from "../../redux/user/user.selectors"; import ErrorDisplay from "../error-display/error-display.component"; import LoadingDisplay from "../loading-display/loading-display.component"; +import JobListItem from "../job-list-item/job-list-item.component"; +import { useNavigation } from "@react-navigation/native"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, @@ -39,7 +24,7 @@ export function JobListComponent({ bodyshop }) { }); const onRefresh = async () => { - await refetch(); + return refetch(); }; if (loading) return ; @@ -52,32 +37,10 @@ export function JobListComponent({ bodyshop }) { } style={{ flex: 1 }} data={data ? data.jobs : []} - renderItem={renderItem} + renderItem={(object) => } + //ItemSeparatorComponent={FlatListItemSeparator} /> ); } -const renderItem = ({ item }) => { - return ( - - -

{`${item.est_number}${ - item.ro_number ? ` ${item.ro_number}` : "" - }`}

- {`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${ - item.ownr_co_nm || "" - }`} - {`${item.v_model_yr || ""} ${item.v_make_desc || ""} ${ - item.v_model_desc || "" - }`} - - - {item.ded_amt} - - - - - - ); -}; export default connect(mapStateToProps, null)(JobListComponent); diff --git a/components/loading-display/loading-display.component.jsx b/components/loading-display/loading-display.component.jsx index 2dc50a1..6c415b0 100644 --- a/components/loading-display/loading-display.component.jsx +++ b/components/loading-display/loading-display.component.jsx @@ -3,12 +3,10 @@ import { View, Text } from "react-native"; import { BarIndicator } from "react-native-indicators"; import { Container, Content } from "native-base"; -export default function LoadingDisplay({ size, count = 5 }) { +export default function LoadingDisplay({ count = 5 }) { return ( - - - - - + + + ); } diff --git a/components/screen-job-list/screen-job-list.component.jsx b/components/screen-job-list/screen-job-list.component.jsx index 303cd82..ca2fd90 100644 --- a/components/screen-job-list/screen-job-list.component.jsx +++ b/components/screen-job-list/screen-job-list.component.jsx @@ -1,4 +1,3 @@ -import { Container, Content } from "native-base"; import React from "react"; import JobListComponent from "../job-list/job-list.component.jsx"; diff --git a/components/screen-main/screen-main.component.jsx b/components/screen-main/screen-main.component.jsx index edfe4b1..d23f8c0 100644 --- a/components/screen-main/screen-main.component.jsx +++ b/components/screen-main/screen-main.component.jsx @@ -5,7 +5,12 @@ 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 } from "react-native"; +import { + StatusBar as rnStatusBar, + StyleSheet, + View, + Button, +} from "react-native"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import { @@ -24,6 +29,7 @@ import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list. import ScreenSignIn from "../screen-sign-in/screen-sign-in.component"; import ScreenSettingsComponent from "../screen-settings/screen-settings.component"; import ScreenSplash from "../screen-splash/screen-splash.component"; +import { Ionicons } from "@expo/vector-icons"; const JobStack = createStackNavigator(); const MessagingStack = createStackNavigator(); @@ -42,20 +48,40 @@ const mapDispatchToProps = (dispatch) => ({ signOutStart: () => dispatch(signOutStart()), }); -const JobStackNavigator = () => ( - +const LeftDrawerButton = (props, navigation) => ( + navigation.toggleDrawer()} + /> +); + +const JobStackNavigator = ({ navigation }) => ( + ({ title: `${i18n.t("joblist.labels.activejobs")}`, + headerLeft: (props) => LeftDrawerButton(props, navigation), })} component={ScreenJobList} /> - + ({ + title: + (route.params && route.params.title) || + i18n.t("joblist.labels.detail"), + })} + /> ); -const MessagingStackNavigator = () => ( +const MessagingStackNavigator = ({ navigation }) => ( ( ); const BottomTabsNavigator = () => ( - + ({ + tabBarIcon: ({ focused, color, size }) => { + let iconName; + if (route.name === "JobTab") { + iconName = "ios-list"; + } else if (route.name === "MessagingTab") { + iconName = "ios-chatboxes"; + } + return ; + }, + })} + tabBarOptions={{ + activeTintColor: "dodgerblue", + inactiveTintColor: "slategrey", + }} + > ( ); -const DrawerNavigator = () => ( +const DrawerNavigator = ({ navigation }) => ( diff --git a/components/screen-sign-in/screen-sign-in.component.jsx b/components/screen-sign-in/screen-sign-in.component.jsx index 797e802..fde702c 100644 --- a/components/screen-sign-in/screen-sign-in.component.jsx +++ b/components/screen-sign-in/screen-sign-in.component.jsx @@ -93,7 +93,7 @@ export function SignIn({ emailSignInStart, signingIn }) { const localStyles = StyleSheet.create({ content: { - paddingBottom: 150, + paddingBottom: 200, }, logo: { width: 100, height: 100 }, }); diff --git a/components/styles.js b/components/styles.js index 8032c61..7190264 100644 --- a/components/styles.js +++ b/components/styles.js @@ -12,4 +12,19 @@ export default StyleSheet.create({ justifyContent: "space-evenly", alignItems: "center", }, + + swipe_view: { + alignItems: "center", + justifyContent: "center", + width: 100, + marginTop: 5, + marginBottom: 5, + }, + swipe_view_blue: { + backgroundColor: "dodgerblue", + }, + swipe_text: { + textAlign: "center", + color: "white", + }, }); diff --git a/translations/en-US/common.json b/translations/en-US/common.json index 3d41e62..079b21f 100644 --- a/translations/en-US/common.json +++ b/translations/en-US/common.json @@ -9,8 +9,12 @@ } }, "joblist": { + "actions": { + "swipecamera": "Add Pictures/Video" + }, "labels": { - "activejobs": "All Active Jobs" + "activejobs": "Jobs", + "detail": "Job Detail" }, "titles": { "jobtab": "Jobs" diff --git a/translations/es-MX/common.json b/translations/es-MX/common.json index d0409db..f093852 100644 --- a/translations/es-MX/common.json +++ b/translations/es-MX/common.json @@ -9,8 +9,12 @@ } }, "joblist": { + "actions": { + "swipecamera": "" + }, "labels": { - "activejobs": "" + "activejobs": "", + "detail": "" }, "titles": { "jobtab": "" diff --git a/translations/fr-CA/common.json b/translations/fr-CA/common.json index d0409db..f093852 100644 --- a/translations/fr-CA/common.json +++ b/translations/fr-CA/common.json @@ -9,8 +9,12 @@ } }, "joblist": { + "actions": { + "swipecamera": "" + }, "labels": { - "activejobs": "" + "activejobs": "", + "detail": "" }, "titles": { "jobtab": ""