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

Remove all native base dependencies.

Browse Source
This commit is contained in:
Patrick Fic
2021-03-11 11:53:42 -07:00
parent 373f215ffa
commit 59f6605a40
19 changed files with 34349 additions and 7016 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
App.js
View File

@@ -1,9 +1,6 @@
import { ApolloProvider } from "@apollo/client"; import { ApolloProvider } from "@apollo/client";
import { Ionicons } from "@expo/vector-icons";
import AppLoading from "expo-app-loading";
//import * as FileSystem from "expo-file-system";
import * as Font from "expo-font";
import React from "react"; import React from "react";
import { DefaultTheme, Provider as PaperProvider } from "react-native-paper";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react"; import { PersistGate } from "redux-persist/integration/react";
import * as Sentry from "sentry-expo"; import * as Sentry from "sentry-expo";
@@ -24,34 +21,41 @@ Sentry.init({
}); });
Sentry.Native.nativeCrash(); Sentry.Native.nativeCrash();
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: "tomato",
accent: "yellow",
},
};
export default class App extends React.Component { export default class App extends React.Component {
constructor(props) { // constructor(props) {
super(props); // super(props);
this.state = { // this.state = {
isReady: false, // isReady: false,
}; // };
} // }
async componentDidMount() { async componentDidMount() {
logImEXEvent("imexmobile_app_start"); logImEXEvent("imexmobile_app_start");
await Font.loadAsync({ //this.setState({ isReady: true });
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
...Ionicons.font,
});
this.setState({ isReady: true });
} }
render() { render() {
if (!this.state.isReady) { // if (!this.state.isReady) {
return <AppLoading />; // return <AppLoading />;
} // }
return ( return (
<Provider store={store}> <Provider store={store}>
<PersistGate persistor={persistor}> <PersistGate persistor={persistor}>
<ApolloProvider client={client}> <ApolloProvider client={client}>
<ScreenMainComponent /> <PaperProvider theme={theme}>
<ScreenMainComponent />
</PaperProvider>
</ApolloProvider> </ApolloProvider>
</PersistGate> </PersistGate>
</Provider> </Provider>

128
components/camera-select-job/camera-select-job.component.jsx
View File

@@ -1,14 +1,16 @@
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import { Picker } from "native-base";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { View } from "react-native"; import { FlatList, RefreshControl } from "react-native";
import { Button, List, Modal, Portal, Provider } from "react-native-paper";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries"; import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions"; import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
import { selectCurrentCameraJobId } from "../../redux/app/app.selectors"; import {
selectCurrentCameraJob,
selectCurrentCameraJobId,
} from "../../redux/app/app.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors"; import { selectBodyshop } from "../../redux/user/user.selectors";
import ErrorDisplay from "../error-display/error-display.component"; import ErrorDisplay from "../error-display/error-display.component";
import LoadingDisplay from "../loading-display/loading-display.component"; import LoadingDisplay from "../loading-display/loading-display.component";
@@ -16,6 +18,7 @@ import LoadingDisplay from "../loading-display/loading-display.component";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
cameraJobId: selectCurrentCameraJobId, cameraJobId: selectCurrentCameraJobId,
cameraJob: selectCurrentCameraJob,
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
@@ -27,9 +30,10 @@ export function CameraSelectJob({
bodyshop, bodyshop,
cameraJobId, cameraJobId,
setCameraJobId, setCameraJobId,
cameraJob,
setCameraJob, setCameraJob,
}) { }) {
const { loading, error, data } = useQuery(QUERY_ALL_ACTIVE_JOBS, { const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
variables: { variables: {
statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"], statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
}, },
@@ -39,47 +43,83 @@ export function CameraSelectJob({
if (loading) return <LoadingDisplay />; if (loading) return <LoadingDisplay />;
if (error) return <ErrorDisplay errorMessage={error.message} />; if (error) return <ErrorDisplay errorMessage={error.message} />;
console.log("Picker Render"); const [visible, setVisible] = React.useState(false);
const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);
const containerStyle = { backgroundColor: "white", padding: 20 };
const onRefresh = async () => {
return refetch();
};
return ( return (
<View <Provider>
style={{ <Portal>
marginHorizontal: 10, <Modal
}} visible={visible}
> onDismiss={hideModal}
<Picker contentContainerStyle={containerStyle}
selectedValue={cameraJobId} >
onValueChange={(value, idx) => { <FlatList
logImEXEvent("imexmobile_setcamerajobid"); refreshControl={
setCameraJobId(value); <RefreshControl refreshing={loading} onRefresh={onRefresh} />
setCameraJob(data.jobs[idx]); }
}} data={data.jobs}
> keyExtractor={(item) => item.id}
<Picker.Item renderItem={(object) => (
label={t("mediabrowser.labels.selectjob")} <List.Item
value={null} onPress={() => {
key="null" setCameraJobId(object.item.id);
/> setCameraJob(object.item);
<Picker.Item hideModal();
label={t("mediabrowser.labels.temporarystorage")} }}
value="temp" description={`${
key="temp" object.item.ro_number ? `${object.item.ro_number} - ` : ``
/> }${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""} ${
{data.jobs.map((j) => { object.item.ownr_co_nm || ""
return ( } - ${object.item.v_model_yr || ""} ${
<Picker.Item object.item.v_make_desc || ""
label={`${j.ro_number ? `${j.ro_number} - ` : ``}${ } ${object.item.v_model_desc || ""}`}
j.ownr_fn || "" key={object.item.id}
} ${j.ownr_ln || ""} ${j.ownr_co_nm || ""} - ${ />
j.v_model_yr || "" )}
} ${j.v_make_desc || ""} ${j.v_model_desc || ""}`} />
value={j.id} </Modal>
key={j.id} </Portal>
/> <Button style={{ marginTop: 30 }} onPress={showModal}>
); {cameraJobId
})} ? `${cameraJob.ro_number ? `${cameraJob.ro_number} - ` : ``}${
</Picker> cameraJob.ownr_fn || ""
</View> } ${cameraJob.ownr_ln || ""} ${cameraJob.ownr_co_nm || ""} - ${
cameraJob.v_model_yr || ""
} ${cameraJob.v_make_desc || ""} ${cameraJob.v_model_desc || ""}`
: t("mediabrowser.labels.selectjob")}
</Button>
</Provider>
); );
// return (
// <View
// style={{
// marginHorizontal: 10,
// }}
// >
// <Picker
// selectedValue={cameraJobId}
// onValueChange={(value, idx) => {
// logImEXEvent("imexmobile_setcamerajobid");
// setCameraJobId(value);
// setCameraJob(data.jobs[idx]);
// }}
// >
// <Picker.Item
// label={t("mediabrowser.labels.selectjob")}
// value={null}
// key="null"
// />
// </Picker>
// </View>
// );
} }
export default connect(mapStateToProps, mapDispatchToProps)(CameraSelectJob); export default connect(mapStateToProps, mapDispatchToProps)(CameraSelectJob);

26
components/data-label/data-label.component.jsx
View File

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

12
components/job-documents/job-documents.component.jsx
View File

@@ -1,7 +1,7 @@
import { Thumbnail } from "native-base";
import React, { useState } from "react"; import React, { useState } from "react";
import { import {
FlatList, FlatList,
Image,
RefreshControl, RefreshControl,
StyleSheet, StyleSheet,
Text, Text,
@@ -33,15 +33,15 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
renderItem={(object) => ( renderItem={(object) => (
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
// setImgIndex(object.index); setImgIndex(object.index);
// setPreviewVisible(true); setPreviewVisible(true);
}} }}
> >
<Thumbnail <Image
square
large
style={{ margin: 5 }} style={{ margin: 5 }}
source={{ source={{
width: 100,
height: 100,
uri: `${REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${object.item.key}`, uri: `${REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${object.item.key}`,
}} }}
/> />

12
components/job-lines/job-lines.component.jsx
View File

@@ -1,8 +1,8 @@
import Dinero from "dinero.js"; import Dinero from "dinero.js";
import { Card, CardItem, Text } from "native-base";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, StyleSheet, View } from "react-native"; import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
import { Card } from "react-native-paper";
export default function JobLines({ job, loading, refetch }) { export default function JobLines({ job, loading, refetch }) {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -27,7 +27,7 @@ export default function JobLines({ job, loading, refetch }) {
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
renderItem={(object) => ( renderItem={(object) => (
<Card> <Card>
<CardItem style={localStyles.flexRow}> <Card.Content style={localStyles.flexRow}>
<Text style={localStyles.growWithEllipsis}>{`${ <Text style={localStyles.growWithEllipsis}>{`${
object.item.line_desc object.item.line_desc
}${ }${
@@ -43,14 +43,14 @@ export default function JobLines({ job, loading, refetch }) {
amount: Math.round((object.item.act_price || 0) * 100), amount: Math.round((object.item.act_price || 0) * 100),
}).toFormat()} }).toFormat()}
</Text> </Text>
</CardItem> </Card.Content>
<CardItem style={localStyles.flexRow}> <Card.Content style={localStyles.flexRow}>
{object.item.mod_lbr_ty && ( {object.item.mod_lbr_ty && (
<Text> <Text>
{t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)} {t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
</Text> </Text>
)} )}
</CardItem> </Card.Content>
</Card> </Card>
)} )}
/> />

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

@@ -1,11 +1,11 @@
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import { Body, H3, Icon, ListItem, Right } from "native-base";
import React, { useRef } from "react"; import React, { useRef } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Animated, Text } from "react-native"; import { Animated } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler"; import { TouchableOpacity } from "react-native-gesture-handler";
import Swipeable from "react-native-gesture-handler/Swipeable"; import Swipeable from "react-native-gesture-handler/Swipeable";
import { List } from "react-native-paper";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils"; import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -65,22 +65,15 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
renderRightActions={RenderRightAction} renderRightActions={RenderRightAction}
shouldCancelWhenOutside shouldCancelWhenOutside
> >
<TouchableOpacity onPress={onPress}> <List.Item
<ListItem> onPress={onPress}
<H3>{item.ro_number || t("general.labels.na")}</H3> title={item.ro_number || t("general.labels.na")}
description={`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
<Body style={{ marginLeft: 10 }}> item.ownr_co_nm || ""
<Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${ } - ${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
item.ownr_co_nm || "" item.v_model_desc || ""
} - ${item.v_model_yr || ""} ${item.v_make_desc || ""} ${ }`}
item.v_model_desc || "" />
}`}</Text>
</Body>
<Right>
<Icon active name="arrow-forward" />
</Right>
</ListItem>
</TouchableOpacity>
</Swipeable> </Swipeable>
); );
} }

8
components/job-notes-item/job-notes-item.component.jsx
View File

@@ -1,12 +1,12 @@
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { DateTime } from "luxon"; import { DateTime } from "luxon";
import { Card, CardItem, Text, View } from "native-base";
import React from "react"; import React from "react";
import { Text, View } from "react-native";
import { Card } from "react-native-paper";
export default function NoteListItem({ item }) { export default function NoteListItem({ item }) {
return ( return (
<Card> <Card>
<CardItem bordered> <Card.Content>
<View style={{ display: "flex", flex: 1 }}> <View style={{ display: "flex", flex: 1 }}>
<Text>{item.text}</Text> <Text>{item.text}</Text>
<View <View
@@ -40,7 +40,7 @@ export default function NoteListItem({ item }) {
</Text> </Text>
</View> </View>
</View> </View>
</CardItem> </Card.Content>
</Card> </Card>
); );
} }

11
components/job-notes/job-notes.component.jsx
View File

@@ -1,9 +1,8 @@
import { Card, CardItem, H3, Text } from "native-base";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl } from "react-native"; import { FlatList, RefreshControl, Text } from "react-native";
import JobNotesItem from "../job-notes-item/job-notes-item.component"; import JobNotesItem from "../job-notes-item/job-notes-item.component";
import { Card } from "react-native-paper";
export default function JobNotes({ job, loading, refetch }) { export default function JobNotes({ job, loading, refetch }) {
const { t } = useTranslation(); const { t } = useTranslation();
if (!job) { if (!job) {
@@ -18,9 +17,9 @@ export default function JobNotes({ job, loading, refetch }) {
if (job.notes.length === 0) if (job.notes.length === 0)
return ( return (
<Card> <Card>
<CardItem> <Card.Content>
<H3>{t("jobdetail.labels.nojobnotes")}</H3> <Text>{t("jobdetail.labels.nojobnotes")}</Text>
</CardItem> </Card.Content>
</Card> </Card>
); );

275
components/job-tombstone/job-tombstone.component.jsx
View File

@@ -1,16 +1,13 @@
import { import { Card } from "react-native-paper";
Card,
CardItem,
Container,
Content,
Form,
H2,
H3,
Text,
} from "native-base";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { RefreshControl, StyleSheet } from "react-native"; import {
RefreshControl,
StyleSheet,
ScrollView,
Text,
View,
} from "react-native";
import DataLabelComponent from "../data-label/data-label.component"; import DataLabelComponent from "../data-label/data-label.component";
export default function JobTombstone({ job, loading, refetch }) { export default function JobTombstone({ job, loading, refetch }) {
@@ -25,122 +22,116 @@ export default function JobTombstone({ job, loading, refetch }) {
}; };
return ( return (
<Container> <ScrollView
<Content padder
padder refreshControl={
refreshControl={ <RefreshControl refreshing={loading} onRefresh={onRefresh} />
<RefreshControl refreshing={loading} onRefresh={onRefresh} /> }
} >
> <Card>
<Card> <Card.Content bordered style={localStyles.status}>
<CardItem bordered style={localStyles.status}> <Text>{job.status}</Text>
<H2>{job.status}</H2> </Card.Content>
</CardItem> {job.inproduction && (
{job.inproduction && ( <Card.Content bordered style={localStyles.inproduction}>
<CardItem bordered style={localStyles.inproduction}> <Text>{t("objects.jobs.labels.inproduction")}</Text>
<Text>{t("objects.jobs.labels.inproduction")}</Text> </Card.Content>
</CardItem> )}
)} {job.inproduction && job.production_vars && !!job.production_vars.note && (
{job.inproduction && <Card.Content bordered style={localStyles.inproduction}>
job.production_vars && <Text>{job.production_vars.note}</Text>
!!job.production_vars.note && ( </Card.Content>
<CardItem bordered style={localStyles.inproduction}> )}
<Text>{job.production_vars.note}</Text> </Card>
</CardItem> <Card>
)} <Card.Content bordered style={localStyles.status}>
</Card> <Text>{t("jobdetail.labels.claiminformation")}</Text>
<Card> </Card.Content>
<CardItem bordered style={localStyles.status}> <View>
<H3>{t("jobdetail.labels.claiminformation")}</H3> <DataLabelComponent
</CardItem> label={t("objects.jobs.fields.owner")}
<Form> content={`${job.ownr_fn || ""} ${job.ownr_ln || ""} ${
<DataLabelComponent job.ownr_co_nm || ""
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 || ""} ${
<DataLabelComponent job.v_model_desc || ""
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.ins_co_nm")} <DataLabelComponent
content={job.ins_co_nm} label={t("objects.jobs.fields.clm_no")}
/> content={job.clm_no}
<DataLabelComponent />
label={t("objects.jobs.fields.clm_no")} </View>
content={job.clm_no} </Card>
/> <Card>
</Form> <Card.Content bordered style={localStyles.status}>
</Card> <Text>{t("jobdetail.labels.employeeassignments")}</Text>
<Card> </Card.Content>
<CardItem bordered style={localStyles.status}> <View>
<H3>{t("jobdetail.labels.employeeassignments")}</H3> <DataLabelComponent
</CardItem> label={t("objects.jobs.fields.employee_body")}
<Form> content={`${
<DataLabelComponent (job.employee_body_rel && job.employee_body_rel.first_name) || ""
label={t("objects.jobs.fields.employee_body")} } ${
content={`${ (job.employee_body_rel && job.employee_body_rel.last_name) || ""
(job.employee_body_rel && job.employee_body_rel.first_name) || }`}
"" />
} ${ <DataLabelComponent
(job.employee_body_rel && job.employee_body_rel.last_name) || "" label={t("objects.jobs.fields.employee_prep")}
}`} content={`${
/> (job.employee_prep_rel && job.employee_prep_rel.first_name) || ""
<DataLabelComponent } ${
label={t("objects.jobs.fields.employee_prep")} (job.employee_prep_rel && job.employee_prep_rel.last_name) || ""
content={`${ }`}
(job.employee_prep_rel && job.employee_prep_rel.first_name) || />
"" <DataLabelComponent
} ${ label={t("objects.jobs.fields.employee_refinish")}
(job.employee_prep_rel && job.employee_prep_rel.last_name) || "" content={`${
}`} (job.employee_refinish_rel &&
/> job.employee_refinish_rel.first_name) ||
<DataLabelComponent ""
label={t("objects.jobs.fields.employee_refinish")} } ${
content={`${ (job.employee_refinish_rel &&
(job.employee_refinish_rel && job.employee_refinish_rel.last_name) ||
job.employee_refinish_rel.first_name) || ""
"" }`}
} ${ />
(job.employee_refinish_rel && </View>
job.employee_refinish_rel.last_name) || </Card>
"" <Card style={localStyles.twoColumnCard}>
}`} <View style={localStyles.twoColumnCardColumn}>
/> <DataLabelComponent
</Form> label={t("objects.jobs.fields.scheduled_in")}
</Card> content={job.scheduled_in}
<Card style={localStyles.twoColumnCard}> dateTime
<Form style={localStyles.twoColumnCardColumn}> />
<DataLabelComponent <DataLabelComponent
label={t("objects.jobs.fields.scheduled_in")} label={t("objects.jobs.fields.actual_in")}
content={job.scheduled_in} content={job.actual_in}
dateTime dateTime
/> />
<DataLabelComponent </View>
label={t("objects.jobs.fields.actual_in")} <View style={localStyles.twoColumnCardColumn}>
content={job.actual_in} <DataLabelComponent
dateTime label={t("objects.jobs.fields.scheduled_completion")}
/> content={job.scheduled_completion}
</Form> dateTime
<Form style={localStyles.twoColumnCardColumn}> />
<DataLabelComponent <DataLabelComponent
label={t("objects.jobs.fields.scheduled_completion")} label={t("objects.jobs.fields.scheduled_delivery")}
content={job.scheduled_completion} content={job.scheduled_delivery}
dateTime dateTime
/> />
<DataLabelComponent </View>
label={t("objects.jobs.fields.scheduled_delivery")} </Card>
content={job.scheduled_delivery} </ScrollView>
dateTime
/>
</Form>
</Card>
</Content>
</Container>
); );
} }
@@ -159,33 +150,3 @@ const localStyles = StyleSheet.create({
justifyContent: "center", 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>;

3
components/media-cache-overlay/media-cache-overlay.component.jsx
View File

@@ -1,6 +1,5 @@
import { Button, View } from "native-base";
import React from "react"; import React from "react";
import { Alert, Modal, StyleSheet, Text } from "react-native"; import { Alert, Modal, StyleSheet, Text, Button, View } from "react-native";
import ImageViewer from "react-native-image-zoom-viewer"; import ImageViewer from "react-native-image-zoom-viewer";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";

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

@@ -1,7 +1,8 @@
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
import { Tab, Tabs } from "native-base";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useWindowDimensions } from "react-native";
import { SceneMap, TabView } from "react-native-tab-view";
import { GET_JOB_BY_PK } from "../../graphql/jobs.queries"; import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
import ErrorDisplay from "../error-display/error-display.component"; import ErrorDisplay from "../error-display/error-display.component";
import JobDocuments from "../job-documents/job-documents.component"; import JobDocuments from "../job-documents/job-documents.component";
@@ -15,7 +16,7 @@ export default function ScreenJobDetail({ route }) {
params: { jobId }, params: { jobId },
} = route; } = route;
const { t } = useTranslation(); const { t } = useTranslation();
const layout = useWindowDimensions();
const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, { const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
variables: { variables: {
id: jobId, id: jobId,
@@ -23,31 +24,50 @@ export default function ScreenJobDetail({ route }) {
skip: !jobId, skip: !jobId,
}); });
const renderScene = SceneMap({
job: () =>
JobTombstone({
job: data.jobs_by_pk,
loading: loading,
refetch: refetch,
}),
lines: () =>
JobLines({
job: data.jobs_by_pk,
loading: loading,
refetch: refetch,
}),
documents: () =>
JobDocuments({
job: data.jobs_by_pk,
loading: loading,
refetch: refetch,
}),
notes: () =>
JobNotes({
job: data.jobs_by_pk,
loading: loading,
refetch: refetch,
}),
});
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: "job", title: t("jobdetail.labels.job") },
{ key: "lines", title: t("jobdetail.labels.lines") },
{ key: "documents", title: t("jobdetail.labels.documents") },
{ key: "notes", title: t("jobdetail.labels.notes") },
]);
if (loading) return <LoadingDisplay />; if (loading) return <LoadingDisplay />;
if (error) return <ErrorDisplay errorMessage={error.message} />; if (error) return <ErrorDisplay errorMessage={error.message} />;
return ( return (
<Tabs> <TabView
<Tab heading={t("jobdetail.labels.job")}> navigationState={{ index, routes }}
<JobTombstone renderScene={renderScene}
job={data.jobs_by_pk} onIndexChange={setIndex}
loading={loading} initialLayout={{ width: layout.width }}
refetch={refetch} />
/>
</Tab>
<Tab heading={t("jobdetail.labels.lines")}>
<JobLines job={data.jobs_by_pk} loading={loading} refetch={refetch} />
</Tab>
<Tab heading={t("jobdetail.labels.documents")}>
<JobDocuments
job={data.jobs_by_pk}
loading={loading}
refetch={refetch}
/>
</Tab>
<Tab heading={t("jobdetail.labels.notes")}>
<JobNotes job={data.jobs_by_pk} loading={loading} refetch={refetch} />
</Tab>
</Tabs>
); );
} }

3
components/screen-media-browser/screen-media-browser.component.jsx
View File

@@ -2,7 +2,6 @@ import { Ionicons } from "@expo/vector-icons";
import { AssetsSelector } from "expo-images-picker"; import { AssetsSelector } from "expo-images-picker";
import * as MediaLibrary from "expo-media-library"; import * as MediaLibrary from "expo-media-library";
import _ from "lodash"; import _ from "lodash";
import { H3 } from "native-base";
import plimit from "p-limit"; import plimit from "p-limit";
import React, { useCallback, useState } from "react"; import React, { useCallback, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -112,7 +111,7 @@ export function ImageBrowserScreen({
alignItems: "center", alignItems: "center",
}} }}
> >
<H3>{t("mediabrowser.labels.selectjobassetselector")}</H3> <Text>{t("mediabrowser.labels.selectjobassetselector")}</Text>
</View> </View>
)} )}
{selectedCameraJobId && ( {selectedCameraJobId && (

10
components/screen-media-cache/screen-media-cache.component.jsx
View File

@@ -1,15 +1,17 @@
import _ from "lodash"; import _ from "lodash";
import { Button, Spinner, Text as NBText, View } from "native-base";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {
ActivityIndicator,
FlatList, FlatList,
Image, Image,
SafeAreaView, SafeAreaView,
StyleSheet, StyleSheet,
Text, Text,
TouchableOpacity, TouchableOpacity,
View,
} from "react-native"; } from "react-native";
import { Button } from "react-native-paper";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { import {
@@ -82,11 +84,11 @@ export function ScreenMediaCache({
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<View style={styles.actions}> <View style={styles.actions}>
<Button onPress={() => removeAllPhotos()}> <Button onPress={() => removeAllPhotos()}>
<NBText>{t("mediacache.actions.deleteall")}</NBText> <Text>{t("mediacache.actions.deleteall")}</Text>
</Button> </Button>
<Button onPress={() => uploadAllphotos()}> <Button onPress={() => uploadAllphotos()}>
<NBText>{t("mediacache.actions.uploadall")}</NBText> <Text>{t("mediacache.actions.uploadall")}</Text>
{uploadInProgress && <Spinner />} {uploadInProgress && <ActivityIndicator />}
</Button> </Button>
</View> </View>
<FlatList <FlatList

95
components/screen-sign-in/screen-sign-in.component.jsx
View File

@@ -1,17 +1,7 @@
import { Formik } from "formik"; import { Formik } from "formik";
import {
Button,
Container,
Content,
H1,
Input,
Item,
Label,
Text,
} from "native-base";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ActivityIndicator, Image, StyleSheet, View } from "react-native"; import { ActivityIndicator, Image, StyleSheet, View, Text } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import Logo from "../../assets/logo192.png"; import Logo from "../../assets/logo192.png";
@@ -22,6 +12,7 @@ import {
} from "../../redux/user/user.selectors"; } from "../../redux/user/user.selectors";
import SignInErrorAlertComponent from "../sign-in-error-alert/sign-in-error-alert.component"; import SignInErrorAlertComponent from "../sign-in-error-alert/sign-in-error-alert.component";
import styles from "../styles"; import styles from "../styles";
import { TextInput, Button, Subheading } from "react-native-paper";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser, currentUser: selectCurrentUser,
@@ -42,52 +33,46 @@ export function SignIn({ emailSignInStart, signingIn }) {
}; };
return ( return (
<Container> <View
<Content scrollEnabled={false}
scrollEnabled={false} contentContainerStyle={styles.contentContainer__centered}
padder style={localStyles.content}
contentContainerStyle={styles.contentContainer__centered} >
style={localStyles.content} <View style={styles.evenlySpacedRow}>
> <Image style={localStyles.logo} source={Logo} />
<View style={styles.evenlySpacedRow}> <Text>{t("app.title")}</Text>
<Image style={localStyles.logo} source={Logo} /> </View>
<H1>{t("app.title")}</H1> <Formik initialValues={{ email: "", password: "" }} onSubmit={formSubmit}>
</View> {({ handleChange, handleBlur, handleSubmit, values }) => (
<Formik <View>
initialValues={{ email: "", password: "" }}
onSubmit={formSubmit}
>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<View> <View>
<Item> <Subheading>{t("signin.fields.email")}</Subheading>
<Label>{t("signin.fields.email")}</Label> <TextInput
<Input autoCapitalize="none"
autoCapitalize="none" keyboardType="email-address"
keyboardType="email-address" onChangeText={handleChange("email")}
onChangeText={handleChange("email")} onBlur={handleBlur("email")}
onBlur={handleBlur("email")} value={values.email}
value={values.email} />
/>
</Item>
<Item>
<Label>{t("signin.fields.password")}</Label>
<Input
secureTextEntry={true}
onChangeText={handleChange("password")}
onBlur={handleBlur("password")}
value={values.password}
/>
</Item>
<SignInErrorAlertComponent />
<Button full onPress={handleSubmit}>
<Text>{t("signin.actions.signin")}</Text>
{signingIn ? <ActivityIndicator size="large" /> : null}
</Button>
</View> </View>
)} <View>
</Formik> <Subheading>{t("signin.fields.password")}</Subheading>
</Content> <TextInput
</Container> secureTextEntry={true}
onChangeText={handleChange("password")}
onBlur={handleBlur("password")}
value={values.password}
/>
</View>
<SignInErrorAlertComponent />
<Button full onPress={handleSubmit}>
<Text>{t("signin.actions.signin")}</Text>
{signingIn ? <ActivityIndicator size="large" /> : null}
</Button>
</View>
)}
</Formik>
</View>
); );
} }

26
components/screen-splash/screen-splash.component.jsx
View File

@@ -1,26 +1,24 @@
import { Container, Content, H1 } from "native-base";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Image, StyleSheet } from "react-native"; import { Image, StyleSheet, View } from "react-native";
import { BarIndicator } from "react-native-indicators"; import { BarIndicator } from "react-native-indicators";
import { Title } from "react-native-paper";
import Logo from "../../assets/logo192.png"; import Logo from "../../assets/logo192.png";
import styles from "../styles"; import styles from "../styles";
export default function ScreenSplash() { export default function ScreenSplash() {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Container> <View
<Content contentContainerStyle={[
contentContainerStyle={[ styles.contentContainer__centered,
styles.contentContainer__centered, localStyles.middleAlign,
localStyles.middleAlign, ]}
]} >
> <Image style={localStyles.logo} source={Logo} />
<Image style={localStyles.logo} source={Logo} /> <Title>{t("app.title")}</Title>
<H1>{t("app.title")}</H1> <BarIndicator count={5} color="dodgerblue" />
<BarIndicator count={5} color="dodgerblue" /> </View>
</Content>
</Container>
); );
} }
const localStyles = StyleSheet.create({ const localStyles = StyleSheet.create({

4
components/sign-in-error-alert/sign-in-error-alert.component.jsx
View File

@@ -1,4 +1,4 @@
import { Text } from "native-base"; import { Title } from "react-native-paper";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { StyleSheet, View } from "react-native"; import { StyleSheet, View } from "react-native";
@@ -36,7 +36,7 @@ export function SignInErrorAlertComponent({ signInError }) {
}, [signInError, setErrorText]); }, [signInError, setErrorText]);
return ( return (
<View> <View>
{errorText ? <Text style={localStyles.alert}>{errorText}</Text> : null} {errorText ? <Title style={localStyles.alert}>{errorText}</Title> : null}
</View> </View>
); );
} }

27339
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -38,7 +38,6 @@
"i18next": "^19.8.4", "i18next": "^19.8.4",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"luxon": "^1.25.0", "luxon": "^1.25.0",
"native-base": "^2.13.15",
"p-limit": "^3.1.0", "p-limit": "^3.1.0",
"react": "16.13.1", "react": "16.13.1",
"react-dom": "16.13.1", "react-dom": "16.13.1",
@@ -48,9 +47,12 @@
"react-native-gesture-handler": "~1.8.0", "react-native-gesture-handler": "~1.8.0",
"react-native-image-zoom-viewer": "^3.0.1", "react-native-image-zoom-viewer": "^3.0.1",
"react-native-indicators": "^0.17.0", "react-native-indicators": "^0.17.0",
"react-native-pager-view": "^5.1.0",
"react-native-paper": "^4.7.2",
"react-native-progress": "^4.1.2", "react-native-progress": "^4.1.2",
"react-native-reanimated": "~1.13.0", "react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.0", "react-native-screens": "~2.15.0",
"react-native-tab-view": "^3.0.0",
"react-native-web": "~0.13.12", "react-native-web": "~0.13.12",
"react-redux": "^7.2.2", "react-redux": "^7.2.2",
"redux": "^4.0.5", "redux": "^4.0.5",

13268
yarn.lock
View File

File diff suppressed because it is too large Load Diff