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

Added image picker and cleaned up main and job list screens.

Browse Source
This commit is contained in:
Patrick Fic
2021-02-09 23:12:52 -08:00
parent 2437808c33
commit 29bd2bc03e
29 changed files with 703 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
App.js
View File

@@ -4,6 +4,7 @@ import AppLoading from "expo-app-loading";
import * as FileSystem from "expo-file-system";
import * as Font from "expo-font";
import React from "react";
import { SafeAreaView } from "react-native";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import * as Sentry from "sentry-expo";
@@ -54,7 +55,9 @@ export default class App extends React.Component {
<Provider store={store}>
<PersistGate persistor={persistor}>
<ApolloProvider client={client}>
<ScreenMainComponent />
<SafeAreaView style={{ flex: 1 }}>
<ScreenMainComponent />
</SafeAreaView>
</ApolloProvider>
</PersistGate>
</Provider>

78
babel-translations.babel
View File

@@ -1015,6 +1015,84 @@
</folder_node>
</children>
</folder_node>
<folder_node>
<name>mediabrowser</name>
<children>
<folder_node>
<name>actions</name>
<children>
<concept_node>
<name>upload</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>
<folder_node>
<name>labels</name>
<children>
<concept_node>
<name>deleteafterupload</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>selectjob</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>mediacache</name>
<children>

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

@@ -1,7 +1,7 @@
import { useQuery } from "@apollo/client";
import { Picker } from "native-base";
import React from "react";
import { View } from "react-native";
import { Text, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
@@ -10,6 +10,7 @@ import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ErrorDisplay from "../error-display/error-display.component";
import LoadingDisplay from "../loading-display/loading-display.component";
import { useTranslation } from "react-i18next";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -27,17 +28,13 @@ export function CameraSelectJob({
setCameraJobId,
setCameraJob,
}) {
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
const { loading, error, data } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
variables: {
statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
},
skip: !bodyshop,
});
const onRefresh = async () => {
return refetch();
};
const { t } = useTranslation();
if (loading) return <LoadingDisplay />;
if (error) return <ErrorDisplay errorMessage={error.message} />;
@@ -45,19 +42,14 @@ export function CameraSelectJob({
return (
<View
style={{
backgroundColor: "rgba(35,35,35, 0.4)",
paddingTop: 30,
//textShadow: "tomato 0px 0px 10px",
fontColor: "black",
fontSize: 20,
fontWeight: "bold",
}}
>
{!cameraJobId && <Text>{t("mediabrowser.labels.selectjob")}</Text>}
<Picker
note
selectedValue={cameraJobId}
onValueChange={(value, idx) => {
console.log(value, idx);
setCameraJobId(value);
setCameraJob(data.jobs[idx]);
}}

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

@@ -1,9 +1,9 @@
import { DateTime } from "luxon";
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
});

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

@@ -1,14 +1,11 @@
import { Container, Content, Thumbnail } from "native-base";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import {
FlatList,
SafeAreaView,
RefreshControl,
StyleSheet,
Text,
TouchableOpacity,
View,
RefreshControl,
} from "react-native";
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
@@ -17,7 +14,6 @@ const REACT_APP_CLOUDINARY_IMAGE_ENDPOINT =
const REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS = "c_fill,f_auto,h_250,w_250";
export default function JobDocumentsComponent({ job, loading, refetch }) {
const { t } = useTranslation();
const [previewVisible, setPreviewVisible] = useState(false);
const [imgIndex, setImgIndex] = useState(0);
const onRefresh = async () => {

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

@@ -6,7 +6,7 @@ import Dinero from "dinero.js";
export default function JobLines({ job, loading, refetch }) {
const { t } = useTranslation();
if (!!!job) {
if (!job) {
<Card>
<Text>Job is not defined.</Text>
</Card>;

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

@@ -1,9 +1,10 @@
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import * as ImagePicker from "expo-image-picker";
import { Body, H3, Icon, ListItem, Right } from "native-base";
import React from "react";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Text } from "react-native";
import { Animated, Platform, Text } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import Swipeable from "react-native-gesture-handler/Swipeable";
import { connect } from "react-redux";
@@ -23,9 +24,40 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
const { t } = useTranslation();
const navigation = useNavigation();
const RenderRightAction = () => {
const navigation = useNavigation();
const { t } = useTranslation();
useEffect(() => {
(async () => {
if (Platform.OS !== "web") {
const {
status,
} = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== "granted") {
alert("Sorry, we need camera roll permissions to make this work!");
}
}
})();
}, []);
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
console.log(result);
if (!result.cancelled) {
// setImage(result.uri);
}
};
const RenderRightAction = (progress, dragX) => {
const scale = dragX.interpolate({
inputRange: [-100, 0],
outputRange: [0.7, 0],
});
return (
<TouchableOpacity
style={[styles.swipe_view, styles.swipe_view_blue]}
@@ -35,10 +67,46 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
navigation.navigate("CameraTab");
}}
>
<Ionicons name="ios-camera" size={24} color="white" />
{/* <Text style={styles.swipe_text}>
{t("joblist.actions.swipecamera")}
</Text> */}
<Animated.View
style={{
// color: "white",
// paddingHorizontal: 10,
// fontWeight: "600",
transform: [{ scale }],
}}
>
<Ionicons name="ios-camera" size={24} color="white" />
</Animated.View>
</TouchableOpacity>
);
};
const RenderLeftAction = (progress, dragX) => {
const scale = dragX.interpolate({
inputRange: [0, 100],
outputRange: [0, 1],
extrapolate: "clamp",
});
return (
<TouchableOpacity
style={[styles.swipe_view, styles.swipe_view_blue]}
onPress={() => {
setCameraJobId(item.id);
setCameraJob(item);
navigation.push("MediaBrowser");
//pickImage(item.id);
}}
>
<Animated.Text
style={{
// color: "white",
// paddingHorizontal: 10,
// fontWeight: "600",
transform: [{ scale }],
}}
>
Add
</Animated.Text>
</TouchableOpacity>
);
};
@@ -51,7 +119,10 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
};
return (
<Swipeable renderRightActions={() => <RenderRightAction />}>
<Swipeable
renderLeftActions={RenderLeftAction}
renderRightActions={RenderRightAction}
>
<TouchableOpacity onPress={onPress}>
<ListItem>
<H3>{item.ro_number || t("general.labels.na")}</H3>

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

@@ -1,16 +1,14 @@
import { Ionicons } from "@expo/vector-icons";
import { AntDesign, Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { Card, CardItem, Text, View, Row } from "native-base";
import { DateTime } from "luxon";
import { Card, CardItem, Text, View } 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";
import { DateTime } from "luxon";
export default function NoteListItem({ item }) {
const { t } = useTranslation();
export default function NoteListItem({ item }) {
return (
<Swipeable renderRightActions={() => <RenderRightAction />}>
<Card>

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

@@ -6,7 +6,7 @@ import JobNotesItem from "../job-notes-item/job-notes-item.component";
export default function JobNotes({ job, loading, refetch }) {
const { t } = useTranslation();
if (!!!job) {
if (!job) {
<Card>
<Text>Job is not defined.</Text>
</Card>;

73
components/screen-camera/screen-camera.jsx
View File

@@ -2,7 +2,7 @@ import { useFocusEffect } from "@react-navigation/native";
import { Camera } from "expo-camera";
import * as FileSystem from "expo-file-system";
import React, { useEffect, useRef, useState } from "react";
import { SafeAreaView, Text, View } from "react-native";
import { Text, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
@@ -45,10 +45,8 @@ export function ScreenCamera({ cameraJobId, addPhoto }) {
useEffect(() => {
(async () => {
const { status: cameraStatus } = await Camera.requestPermissionsAsync();
setHasPermission(cameraStatus === "granted");
console.log("Camera Perms:", await Camera.getPermissionsAsync());
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === "granted");
})();
}, []);
@@ -77,13 +75,6 @@ export function ScreenCamera({ cameraJobId, addPhoto }) {
to: newUri,
});
setState({ ...state, capturing: false });
console.log("Add Photo Object", {
...photo,
id: filename,
uri: newUri,
jobId: cameraJobId,
video: false,
});
addPhoto({
...photo,
id: filename,
@@ -107,7 +98,13 @@ export function ScreenCamera({ cameraJobId, addPhoto }) {
to: newUri,
});
setState({ ...state, capturing: false });
console.log("Adding Photo", {
...video,
id: filename,
uri: newUri,
jobId: cameraJobId,
video: true,
});
addPhoto({
...video,
id: filename,
@@ -129,34 +126,32 @@ export function ScreenCamera({ cameraJobId, addPhoto }) {
const { flashMode, cameraType, capturing } = state;
return (
<SafeAreaView style={{ display: "flex", flex: 1 }}>
<Camera
style={{ flex: 1, display: "flex" }}
type={state.cameraType}
ref={cameraRef}
ratio={"16:9"}
<Camera
style={{ flex: 1, display: "flex" }}
type={state.cameraType}
ref={cameraRef}
ratio={"16:9"}
>
<View
style={{
flex: 1,
}}
>
<View
style={{
flex: 1,
}}
>
<CameraSelectJob />
<CameraSelectJob />
<CameraControls
capturing={capturing}
flashMode={flashMode}
cameraType={cameraType}
setFlashMode={setFlashMode}
setCameraType={setCameraType}
onCaptureIn={handleCaptureIn}
onCaptureOut={handleCaptureOut}
onLongCapture={handleLongCapture}
onShortCapture={handleShortCapture}
/>
</View>
</Camera>
</SafeAreaView>
<CameraControls
capturing={capturing}
flashMode={flashMode}
cameraType={cameraType}
setFlashMode={setFlashMode}
setCameraType={setCameraType}
onCaptureIn={handleCaptureIn}
onCaptureOut={handleCaptureOut}
onLongCapture={handleLongCapture}
onShortCapture={handleShortCapture}
/>
</View>
</Camera>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(ScreenCamera);

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

@@ -25,6 +25,7 @@ import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.
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 ScreenMediaBrowser from "../screen-media-browser/screen-media-browser.component";
const JobStack = createStackNavigator();
const CameraStack = createStackNavigator();
@@ -63,6 +64,15 @@ const JobStackNavigator = () => (
i18n.t("joblist.labels.detail"),
})}
/>
<JobStack.Screen
name="MediaBrowser"
component={ScreenMediaBrowser}
// options={({ route }) => ({
// title:
// (route.params && route.params.title) ||
// i18n.t("joblist.labels.detail"),
// })}
/>
</JobStack.Navigator>
);

162
components/screen-media-browser/screen-media-browser.component.jsx Normal file
View File

@@ -0,0 +1,162 @@
import { Ionicons } from "@expo/vector-icons";
import { AssetsSelector } from "expo-images-picker";
import _ from "lodash";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, Text, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
selectCurrentCameraJobId,
selectDeleteAfterUpload,
} from "../../redux/app/app.selectors";
import {
selectBodyshop,
selectCurrentUser,
} from "../../redux/user/user.selectors";
import { handleUpload } from "../../util/document-upload.utility";
import CameraSelectJob from "../camera-select-job/camera-select-job.component";
import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
import UploadProgress from "../upload-progress/upload-progress.component";
import * as FileSystem from "expo-file-system";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
bodyshop: selectBodyshop,
selectedCameraJobId: selectCurrentCameraJobId,
deleteAfterUpload: selectDeleteAfterUpload,
});
export default connect(mapStateToProps, null)(ImageBrowserScreen);
export function ImageBrowserScreen({
currentUser,
bodyshop,
selectedCameraJobId,
deleteAfterUpload,
}) {
const { t } = useTranslation();
const [uploads, setUploads] = useState({});
function handleOnProgress(uri, percent) {
setUploads((prevUploads) => ({ ...prevUploads, [uri]: { percent } }));
}
function handleOnSuccess(uri) {
console.log("onSucces!", uri);
setTimeout(async function () {
setUploads((prevUploads) => _.omit(prevUploads, uri));
if (deleteAfterUpload) {
await FileSystem.deleteAsync(uri);
}
}, 1000);
}
const onDone = async (data) => {
const actions = [];
console.log("Assets :>> ", data);
data.forEach(function (p) {
const uri = p.uri.split("/").pop();
actions.push(
handleUpload(
{
uri: p.uri,
onError: handleOnError,
onProgress: ({ percent }) => handleOnProgress(uri, percent),
onSuccess: () => handleOnSuccess(uri),
},
{
bodyshop: bodyshop,
jobId: selectedCameraJobId,
uploaded_by: currentUser.email,
photo: p,
}
)
);
});
Promise.all(actions);
};
return (
<View style={[styles.flex, styles.container]}>
<CameraSelectJob />
<UploadDeleteSwitch />
{selectedCameraJobId && (
<AssetsSelector
style={{ flex: 9 }}
options={{
// manipulate: {
// //width: 512,
// compress: 0.7,
// base64: false,
// saveTo: "jpeg",
// },
assetsType: ["photo", "video"],
//maxSelections: 5,
margin: 3,
portraitCols: 4,
landscapeCols: 5,
widgetWidth: 100,
widgetBgColor: "white",
selectedBgColor: "#adadad",
spinnerColor: "#c8c8c8",
videoIcon: {
Component: Ionicons,
iconName: "ios-videocam",
color: "white",
size: 20,
},
selectedIcon: {
Component: Ionicons,
iconName: "ios-checkmark-circle-outline",
color: "white",
bg: "rgba(35,35,35, 0.75)",
size: 32,
},
defaultTopNavigator: {
continueText: t("mediabrowser.actions.upload"),
//goBackText: "Back",
buttonStyle: styles.buttonStyle,
textStyle: styles.textStyle,
backFunction: (props) => {
console.log("Back Function", props);
},
doneFunction: onDone,
},
noAssets: {
Component: function NoAsset() {
return (
<View>
<Text>Looks like nothing here</Text>
</View>
);
},
},
}}
/>
)}
<UploadProgress uploads={uploads} />
</View>
);
}
const styles = StyleSheet.create({
flex: {
flex: 1,
},
container: {
display: "flex",
// position: "relative",
},
buttonStyle: {
//backgroundColor: "tomato",
},
// eslint-disable-next-line react-native/no-color-literals
textStyle: {
color: "dodgerblue",
},
});
function handleOnError(...props) {
console.log("HandleOnError", props);
}

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

@@ -1,9 +1,11 @@
import { Button, Container, Spinner, Text as NBText, View } from "native-base";
import _ from "lodash";
import { Button, Spinner, Text as NBText, View } from "native-base";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import {
FlatList,
Image,
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity,
@@ -38,24 +40,14 @@ export function ScreenMediaCache({
const { t } = useTranslation();
const [previewVisible, setPreviewVisible] = useState(false);
const [imgIndex, setImgIndex] = useState(0);
const [imagesInDir, setImagesInDir] = useState([]);
console.log("Photos", photos);
return (
<Container>
<View style={styles.actions}>
<Button onPress={() => removeAllPhotos()}>
<NBText>{t("mediacache.actions.deleteall")}</NBText>
</Button>
<Button onPress={() => uploadAllphotos()}>
<NBText>{t("mediacache.actions.uploadall")}</NBText>
{uploadInProgress && <Spinner />}
</Button>
</View>
const groupedPhotos = _.groupBy(photos, "jobId");
const RenderJobPictures = ({ jobId, jobPhotos }) => (
<View>
<Text>{jobId}</Text>
<FlatList
data={photos}
data={jobPhotos}
style={{ flex: 1 }}
contentContainerStyle={styles.listContentContainer}
keyExtractor={(item) => item.id}
@@ -83,6 +75,32 @@ export function ScreenMediaCache({
)
}
/>
</View>
);
return (
<SafeAreaView style={styles.container}>
<View style={styles.actions}>
<Button onPress={() => removeAllPhotos()}>
<NBText>{t("mediacache.actions.deleteall")}</NBText>
</Button>
<Button onPress={() => uploadAllphotos()}>
<NBText>{t("mediacache.actions.uploadall")}</NBText>
{uploadInProgress && <Spinner />}
</Button>
</View>
<FlatList
data={groupedPhotos ? Object.keys(groupedPhotos) : []}
style={{ flex: 1 }}
contentContainerStyle={styles.listContentContainer}
keyExtractor={(item) => item}
renderItem={(object) => (
<RenderJobPictures
jobPhotos={groupedPhotos[object.item]}
jobId={object.item}
/>
)}
/>
<MediaCacheOverlay
imgIndex={imgIndex}
setImgIndex={setImgIndex}
@@ -90,7 +108,7 @@ export function ScreenMediaCache({
setPreviewVisible={setPreviewVisible}
/>
<Text>{`${photos.length} Photos`}</Text>
</Container>
</SafeAreaView>
);
}

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

@@ -1,10 +1,10 @@
import { Container, Content, H1 } from "native-base";
import React from "react";
import { StyleSheet, Image } from "react-native";
import Logo from "../../assets/logo192.png";
import { useTranslation } from "react-i18next";
import { H1, Container, Content } from "native-base";
import styles from "../styles";
import { Image, StyleSheet } from "react-native";
import { BarIndicator } from "react-native-indicators";
import Logo from "../../assets/logo192.png";
import styles from "../styles";
export default function ScreenSplash() {
const { t } = useTranslation();

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

@@ -1,10 +1,11 @@
import React, { useState, useEffect } from "react";
import { Text } from "native-base";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Container, Content, Text } from "native-base";
import { View, StyleSheet } from "react-native";
import { StyleSheet, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectSignInError } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
signInError: selectSignInError,
});

1
components/styles.js
View File

@@ -1,5 +1,4 @@
import { StyleSheet } from "react-native";
import { Row } from "native-base";
export default StyleSheet.create({
contentContainer__centered: {

48
components/upload-delete-switch/upload-delete-switch.component.jsx Normal file
View File

@@ -0,0 +1,48 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, Switch, Text, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { toggleDeleteAfterUpload } from "../../redux/app/app.actions";
import { selectDeleteAfterUpload } from "../../redux/app/app.selectors";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
deleteAfterUpload: selectDeleteAfterUpload,
});
const mapDispatchToProps = (dispatch) => ({
toggleDeleteAfterUpload: () => dispatch(toggleDeleteAfterUpload()),
});
export default connect(mapStateToProps, mapDispatchToProps)(UploadDeleteSwitch);
export function UploadDeleteSwitch({
deleteAfterUpload,
toggleDeleteAfterUpload,
}) {
const { t } = useTranslation();
return (
<View style={styles.container}>
<Text style={styles.text}>
{t("mediabrowser.labels.deleteafterupload")}
</Text>
<Switch
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={deleteAfterUpload ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={() => toggleDeleteAfterUpload()}
value={deleteAfterUpload}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "row",
alignItems: "center",
},
text: {
flex: 1,
},
});

46
components/upload-progress/upload-progress.component.jsx Normal file
View File

@@ -0,0 +1,46 @@
import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import * as Progress from "react-native-progress";
export default function UploadProgress({ uploads }) {
return (
<View style={styles.container}>
<ScrollView>
{Object.keys(uploads).map((key) => (
<View key={key} style={styles.progressItem}>
<Text style={styles.progressText}>{key}</Text>
<View style={styles.progressBarContainer}>
<Progress.Bar
style={styles.progress}
height={10}
width={null}
progress={uploads[key].percent}
color={uploads[key].percent === 1 ? "green" : "blue"}
/>
</View>
</View>
))}
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
display: "flex",
//flex: 1,
},
progressItem: {
display: "flex",
flexDirection: "row",
alignItems: "center",
marginBottom: 12,
},
progressText: {
flex: 1,
},
progressBarContainer: {
flex: 1,
marginLeft: 12,
marginRight: 12,
},
});

6
graphql/jobs.queries.js
View File

@@ -269,7 +269,7 @@ export const GET_JOB_BY_PK = gql`
date_open
date_scheduled
date_invoiced
date_closed
date_exported
status
owner_owing
@@ -370,7 +370,7 @@ export const QUERY_JOB_CARD_DETAILS = gql`
date_invoiced
date_open
date_exported
date_closed
date_scheduled
date_estimated
@@ -426,7 +426,7 @@ export const QUERY_TECH_JOB_DETAILS = gql`
date_invoiced
date_open
date_exported
date_closed
date_scheduled
date_estimated
employee_body

125
package-lock.json generated
View File

@@ -1108,6 +1108,29 @@
"@types/hammerjs": "^2.0.36"
}
},
"@emotion/is-prop-valid": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
"requires": {
"@emotion/memoize": "0.7.4"
}
},
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
"@emotion/stylis": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
},
"@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
"@eslint/eslintrc": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz",
@@ -2529,6 +2552,16 @@
"resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
"integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
},
"@react-native-community/art": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@react-native-community/art/-/art-1.2.0.tgz",
"integrity": "sha512-a+ZcRGl/BzLa89yi33Mbn5SHavsEXqKUMdbfLf3U8MDLElndPqUetoJyGkv63+BcPO49UMWiQRP1YUz6/zfJ+A==",
"requires": {
"art": "^0.10.3",
"invariant": "^2.2.4",
"prop-types": "^15.7.2"
}
},
"@react-native-community/async-storage": {
"version": "1.12.1",
"resolved": "https://registry.npmjs.org/@react-native-community/async-storage/-/async-storage-1.12.1.tgz",
@@ -3905,6 +3938,11 @@
"function-bind": "^1.1.1"
}
},
"art": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/art/-/art-0.10.3.tgz",
"integrity": "sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ=="
},
"asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -4007,6 +4045,22 @@
"resolved": "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.13.18.tgz",
"integrity": "sha512-f8pAxyKqXBNRIh8l4Sqju055BNec+DQlItdtutByYxULU0iJ1F7evIYE3skPKAkTB/xJH17l+n3Z8dVabGIIGg=="
},
"babel-plugin-styled-components": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
"integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
"requires": {
"@babel/helper-annotate-as-pure": "^7.0.0",
"@babel/helper-module-imports": "^7.0.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"lodash": "^4.17.11"
}
},
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
},
"babel-plugin-syntax-trailing-function-commas": {
"version": "7.0.0-beta.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz",
@@ -4338,6 +4392,11 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
},
"camelize": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
},
"caniuse-lite": {
"version": "1.0.30001185",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001185.tgz",
@@ -4692,6 +4751,11 @@
"resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
"integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
},
"css-color-keywords": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
},
"css-in-js-utils": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
@@ -4701,6 +4765,16 @@
"isobject": "^3.0.1"
}
},
"css-to-react-native": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
"requires": {
"camelize": "^1.0.0",
"css-color-keywords": "^1.0.0",
"postcss-value-parser": "^4.0.2"
}
},
"dayjs": {
"version": "1.10.4",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.4.tgz",
@@ -5608,6 +5682,11 @@
"fontfaceobserver": "^2.1.0"
}
},
"expo-image-manipulator": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/expo-image-manipulator/-/expo-image-manipulator-9.0.0.tgz",
"integrity": "sha512-hziIcUONz7JtsonEehuYvXk8xCSGDHR6A4ynZcUTbZQCzxWYu7Xq2wahREz/DBdu0vz0LBw38wFLuSpfgaFojQ=="
},
"expo-image-picker": {
"version": "9.2.1",
"resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-9.2.1.tgz",
@@ -5624,6 +5703,16 @@
}
}
},
"expo-images-picker": {
"version": "git+https://github.com/snaptsoft/expo-images-picker.git#9a423d67e4986742bb68b6d3e3118df262b68599",
"from": "git+https://github.com/snaptsoft/expo-images-picker.git",
"requires": {
"expo-image-manipulator": "^9.0.0",
"expo-media-library": "~10.0.0",
"expo-permissions": "~10.0.0",
"styled-components": "^5.1.1"
}
},
"expo-keep-awake": {
"version": "8.4.0",
"resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-8.4.0.tgz",
@@ -9424,6 +9513,11 @@
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
"integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
},
"postcss-value-parser": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
},
"pouchdb-collections": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/pouchdb-collections/-/pouchdb-collections-1.0.1.tgz",
@@ -10066,6 +10160,15 @@
"resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
"integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg=="
},
"react-native-progress": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/react-native-progress/-/react-native-progress-4.1.2.tgz",
"integrity": "sha512-sFHs6k6npWDOyvQoL2NeyOyHb+q1s8iOAOeyzoObN77zkxOAsgJt9FcSJLRq70Mw7qSGNJMFDqCgvYR1huYRwQ==",
"requires": {
"@react-native-community/art": "^1.1.2",
"prop-types": "^15.7.2"
}
},
"react-native-reanimated": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.13.2.tgz",
@@ -10596,6 +10699,11 @@
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
},
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -11000,6 +11108,23 @@
"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
"dev": true
},
"styled-components": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
"integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/traverse": "^7.4.5",
"@emotion/is-prop-valid": "^0.8.8",
"@emotion/stylis": "^0.8.4",
"@emotion/unitless": "^0.7.4",
"babel-plugin-styled-components": ">= 1",
"css-to-react-native": "^3.0.0",
"hoist-non-react-statics": "^3.0.0",
"shallowequal": "^1.1.0",
"supports-color": "^5.5.0"
}
},
"subscriptions-transport-ws": {
"version": "0.9.18",
"resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.18.tgz",

5
package.json
View File

@@ -35,6 +35,7 @@
"formik": "^2.2.5",
"graphql": "^15.4.0",
"i18next": "^19.8.4",
"lodash": "^4.17.20",
"luxon": "^1.25.0",
"native-base": "^2.13.15",
"react": "16.13.1",
@@ -45,6 +46,7 @@
"react-native-gesture-handler": "~1.8.0",
"react-native-image-zoom-viewer": "^3.0.1",
"react-native-indicators": "^0.17.0",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.0",
"react-native-web": "~0.13.12",
@@ -55,7 +57,8 @@
"redux-saga": "^1.1.3",
"reselect": "^4.0.0",
"sentry-expo": "^3.0.4",
"subscriptions-transport-ws": "^0.9.18"
"subscriptions-transport-ws": "^0.9.18",
"expo-images-picker": "https://github.com/snaptsoft/expo-images-picker/"
},
"devDependencies": {
"@babel/core": "^7.12.13",

3
redux/app/app.actions.js
View File

@@ -24,3 +24,6 @@ export const documentUploadFailure = (error) => ({
type: AppActionTypes.DOCUMENT_UPLOAD_FAILURE,
payload: error,
});
export const toggleDeleteAfterUpload = () => ({
type: AppActionTypes.TOGGLE_DLETE_AFTER_UPLOAD,
});

6
redux/app/app.reducer.js
View File

@@ -5,6 +5,7 @@ const INITIAL_STATE = {
cameraJob: null,
documentUploadInProgress: null,
documentUploadError: null,
deleteAfterUpload: true,
};
const appReducer = (state = INITIAL_STATE, action) => {
@@ -37,6 +38,11 @@ const appReducer = (state = INITIAL_STATE, action) => {
documentUploadError: action.payload,
documentUploadInProgress: null,
};
case AppActionTypes.TOGGLE_DLETE_AFTER_UPLOAD:
return {
...state,
deleteAfterUpload: !state.deleteAfterUpload,
};
default:
return state;
}

8
redux/app/app.selectors.js
View File

@@ -6,15 +6,23 @@ export const selectCurrentCameraJobId = createSelector(
[selectApp],
(app) => app.cameraJobId
);
export const selectCurrentCameraJob = createSelector(
[selectApp],
(app) => app.cameraJob
);
export const selectDocumentUploadInProgress = createSelector(
[selectApp],
(app) => app.documentUploadInProgress
);
export const selectDocumentUploadError = createSelector(
[selectApp],
(app) => app.documentUploadError
);
export const selectDeleteAfterUpload = createSelector(
[selectApp],
(app) => app.deleteAfterUpload
);

1
redux/app/app.types.js
View File

@@ -4,5 +4,6 @@ const AppActionTypes = {
DOCUMENT_UPLOAD_START: "DOCUMENT_UPLOAD_START",
DOCUMENT_UPLOAD_SUCCESS: "DOCUMENT_UPLOAD_SUCCESS",
DOCUMENT_UPLOAD_FAILURE: "DOCUMENT_UPLOAD_FAILURE",
TOGGLE_DLETE_AFTER_UPLOAD: "TOGGLE_DLETE_AFTER_UPLOAD",
};
export default AppActionTypes;

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

@@ -72,6 +72,15 @@
"jobtab": "Jobs"
}
},
"mediabrowser": {
"actions": {
"upload": "Upload"
},
"labels": {
"deleteafterupload": "Delete After Upload",
"selectjob": "Please select a job."
}
},
"mediacache": {
"actions": {
"deleteall": "Delete All",

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

@@ -72,6 +72,15 @@
"jobtab": ""
}
},
"mediabrowser": {
"actions": {
"upload": ""
},
"labels": {
"deleteafterupload": "",
"selectjob": ""
}
},
"mediacache": {
"actions": {
"deleteall": "",

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

@@ -72,6 +72,15 @@
"jobtab": ""
}
},
"mediabrowser": {
"actions": {
"upload": ""
},
"labels": {
"deleteafterupload": "",
"selectjob": ""
}
},
"mediacache": {
"actions": {
"deleteall": "",

15
util/document-upload.utility.js
View File

@@ -10,7 +10,6 @@ var cleanAxios = axios.create();
cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);
export const handleUpload = async (ev, context) => {
console.log("ev,context", ev, context);
const { onError, onSuccess, onProgress } = ev;
const { bodyshop, jobId } = context;
@@ -74,7 +73,7 @@ export const uploadToCloudinary = async (
if (signedURLResponse.status !== 200) {
console.log("Error Getting Signed URL", signedURLResponse.statusText);
if (!!onError) onError(signedURLResponse.statusText);
if (onError) onError(signedURLResponse.statusText);
return { success: false, error: signedURLResponse.statusText };
}
@@ -84,7 +83,7 @@ export const uploadToCloudinary = async (
var options = {
headers: { "X-Requested-With": "XMLHttpRequest" },
onUploadProgress: (e) => {
if (!!onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
if (onProgress) onProgress({ percent: e.loaded / e.total });
},
};
const formData = new FormData();
@@ -94,7 +93,7 @@ export const uploadToCloudinary = async (
type: fileType,
name: file.data.name,
});
console.log("Applying lower quality transforms.");
formData.append("upload_preset", "incoming_upload");
formData.append("api_key", env.REACT_APP_CLOUDINARY_API_KEY);
@@ -113,7 +112,7 @@ export const uploadToCloudinary = async (
...options,
}
);
console.log("Cloudinary Upload Response", cloudinaryUploadResponse.data);
// console.log("Cloudinary Upload Response", cloudinaryUploadResponse.data);
} catch (error) {
console.log("CLOUDINARY error", error, cloudinaryUploadResponse);
return { success: false, error: error };
@@ -125,7 +124,7 @@ export const uploadToCloudinary = async (
cloudinaryUploadResponse.statusText,
cloudinaryUploadResponse
);
if (!!onError) onError(cloudinaryUploadResponse.statusText);
if (onError) onError(cloudinaryUploadResponse.statusText);
return { success: false, error: cloudinaryUploadResponse.statusText };
}
@@ -145,7 +144,7 @@ export const uploadToCloudinary = async (
},
});
if (!documentInsert.errors) {
if (!!onSuccess)
if (onSuccess)
onSuccess({
uid: documentInsert.data.insert_documents.returning[0].id,
name: documentInsert.data.insert_documents.returning[0].name,
@@ -159,7 +158,7 @@ export const uploadToCloudinary = async (
callback();
}
} else {
if (!!onError) onError(JSON.stringify(documentInsert.errors));
if (onError) onError(JSON.stringify(documentInsert.errors));
// notification["error"]({
// message: i18n.t("documents.errors.insert", {
// message: JSON.stringify(JSON.stringify(documentInsert.errors)),