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

Improved uploads & handling for temp jobs. IO-399 IO-398 IO-69

Browse Source
This commit is contained in:
Patrick Fic
2021-02-11 15:38:59 -08:00
parent 519e7a347a
commit 3231097b29
13 changed files with 441 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,8 @@
import { useQuery } from "@apollo/client";
import { Picker } from "native-base";
import React from "react";
import { Text, View } from "react-native";
import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
@@ -10,7 +11,6 @@ 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,
@@ -42,11 +42,9 @@ export function CameraSelectJob({
return (
<View
style={{
fontSize: 20,
fontWeight: "bold",
marginHorizontal: 10,
}}
>
{!cameraJobId && <Text>{t("mediabrowser.labels.selectjob")}</Text>}
<Picker
selectedValue={cameraJobId}
onValueChange={(value, idx) => {
@@ -54,6 +52,16 @@ export function CameraSelectJob({
setCameraJob(data.jobs[idx]);
}}
>
<Picker.Item
label={t("mediabrowser.labels.selectjob")}
value={null}
key="null"
/>
<Picker.Item
label={t("mediabrowser.labels.temporarystorage")}
value="temp"
key="temp"
/>
{data.jobs.map((j) => {
return (
<Picker.Item

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

@@ -64,7 +64,7 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
onPress={() => {
setCameraJobId(item.id);
setCameraJob(item);
navigation.navigate("CameraTab");
navigation.navigate("MediaBrowserTab");
}}
>
<Animated.View
@@ -80,36 +80,36 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
</TouchableOpacity>
);
};
const RenderLeftAction = (progress, dragX) => {
const scale = dragX.interpolate({
inputRange: [0, 100],
outputRange: [0, 1],
extrapolate: "clamp",
});
// 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>
);
};
// 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>
// );
// };
const onPress = () => {
navigation.push("JobDetail", {
@@ -120,7 +120,7 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
return (
<Swipeable
renderLeftActions={RenderLeftAction}
// renderLeftActions={RenderLeftAction}
renderRightActions={RenderRightAction}
>
<TouchableOpacity onPress={onPress}>

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

@@ -4,7 +4,6 @@ import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import i18n from "i18next";
import React, { useEffect } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
@@ -16,23 +15,24 @@ import {
selectBodyshop,
selectCurrentUser,
} from "../../redux/user/user.selectors";
import ScreenCamera from "../screen-camera/screen-camera";
//import ScreenCamera from "../screen-camera/screen-camera";
import ScreenJobDetail from "../screen-job-detail/screen-job-detail.component";
import ScreenJobList from "../screen-job-list/screen-job-list.component";
import ScreenMediaCache from "../screen-media-cache/screen-media-cache.component";
import ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component";
import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.component";
import ScreenMediaBrowser from "../screen-media-browser/screen-media-browser.component";
//import ScreenMediaCache from "../screen-media-cache/screen-media-cache.component";
//import ScreenMessagingConversation from "../screen-messaging-conversation/screen-messaging-conversation.component";
//import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.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 ScreenMediaBrowser from "../screen-media-browser/screen-media-browser.component";
const JobStack = createStackNavigator();
const CameraStack = createStackNavigator();
const MessagingStack = createStackNavigator();
const MediaCacheStack = createStackNavigator();
//const CameraStack = createStackNavigator();
//const MessagingStack = createStackNavigator();
//const MediaCacheStack = createStackNavigator();
const MoreStack = createStackNavigator();
const BottomTabs = createBottomTabNavigator();
const MediaBrowserStack = createStackNavigator();
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -51,7 +51,7 @@ const JobStackNavigator = () => (
<JobStack.Screen
name="JobList"
options={() => ({
title: `${i18n.t("joblist.labels.activejobs")}`,
title: i18n.t("joblist.labels.activejobs"),
})}
component={ScreenJobList}
/>
@@ -64,7 +64,7 @@ const JobStackNavigator = () => (
i18n.t("joblist.labels.detail"),
})}
/>
<JobStack.Screen
{/* <JobStack.Screen
name="MediaBrowser"
component={ScreenMediaBrowser}
// options={({ route }) => ({
@@ -72,42 +72,53 @@ const JobStackNavigator = () => (
// (route.params && route.params.title) ||
// i18n.t("joblist.labels.detail"),
// })}
/>
/> */}
</JobStack.Navigator>
);
const CameraStackNavigator = () => (
<CameraStack.Navigator initialRouteName="TabCameraScreen">
<CameraStack.Screen
name="TabCameraScreen"
options={{ headerShown: false }}
component={ScreenCamera}
// const CameraStackNavigator = () => (
// <CameraStack.Navigator initialRouteName="TabCameraScreen">
// <CameraStack.Screen
// name="TabCameraScreen"
// options={{ headerShown: false }}
// component={ScreenCamera}
// />
// </CameraStack.Navigator>
// );
// const MediaCacheStackNavigator = () => (
// <MediaCacheStack.Navigator initialRouteName="TabMediaCache">
// <MediaCacheStack.Screen
// name="MediaCache"
// options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
// component={ScreenMediaCache}
// />
// </MediaCacheStack.Navigator>
// );
const MediaBrowserStackNavigator = () => (
<MediaBrowserStack.Navigator initialRouteName="MediaBrowser">
<MediaBrowserStack.Screen
name="MediaBrowser"
options={{ title: i18n.t("mediabrowser.titles.mediabrowsertab") }}
component={ScreenMediaBrowser}
/>
</CameraStack.Navigator>
</MediaBrowserStack.Navigator>
);
const MediaCacheStackNavigator = () => (
<MediaCacheStack.Navigator initialRouteName="TabMediaCache">
<MediaCacheStack.Screen
name="MediaCache"
options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
component={ScreenMediaCache}
/>
</MediaCacheStack.Navigator>
);
// const MessagingStackNavigator = () => (
// <MessagingStack.Navigator>
// <MessagingStack.Screen
// name="MessagingList"
// component={ScreenMessagingList}
// />
// <MessagingStack.Screen
// name="MessagingConversation"
// component={ScreenMessagingConversation}
// />
// </MessagingStack.Navigator>
// );
const MessagingStackNavigator = () => (
<MessagingStack.Navigator>
<MessagingStack.Screen
name="MessagingList"
component={ScreenMessagingList}
/>
<MessagingStack.Screen
name="MessagingConversation"
component={ScreenMessagingConversation}
/>
</MessagingStack.Navigator>
);
const MoreStackNavigator = () => (
<MoreStack.Navigator>
<MoreStack.Screen
@@ -132,7 +143,10 @@ const BottomTabsNavigator = () => (
iconName = "ios-chatboxes";
} else if (route.name === "CameraTab") {
iconName = "ios-camera";
} else if (route.name === "MediaCacheTab") {
} else if (
route.name === "MediaCacheTab" ||
route.name === "MediaBrowserTab"
) {
iconName = "ios-photos";
} else {
//iconName = "customerservice";
@@ -152,20 +166,24 @@ const BottomTabsNavigator = () => (
component={JobStackNavigator}
/>
<BottomTabs.Screen
name="CameraTab"
options={{ title: i18n.t("camera.titles.cameratab") }}
component={CameraStackNavigator}
name="MediaBrowserTab"
options={{ title: i18n.t("mediabrowser.titles.mediabrowsertab") }}
component={MediaBrowserStackNavigator}
/>
<BottomTabs.Screen
{/* <BottomTabs.Screen
name="MediaCacheTab"
options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
component={MediaCacheStackNavigator}
/>
<BottomTabs.Screen
/> */}
{/* <BottomTabs.Screen
name="CameraTab"
options={{ title: i18n.t("camera.titles.cameratab") }}
component={CameraStackNavigator}
/> <BottomTabs.Screen
name="MessagingTab"
options={{ title: i18n.t("messaging.titles.messagingtab") }}
component={MessagingStackNavigator}
/>
/> */}
<BottomTabs.Screen
name="MoreTab"
options={{ title: i18n.t("more.titles.moretab") }}

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

@@ -0,0 +1,40 @@
import React from "react";
import { Text, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
cameraJobId: selectCurrentCameraJobId,
});
const mapDispatchToProps = (dispatch) => ({
setCameraJobId: (id) => dispatch(setCameraJobId(id)),
setCameraJob: (job) => dispatch(setCameraJob(job)),
});
export function ScreenMediaBrowserTop({
bodyshop,
cameraJobId,
onFinish,
...props
}) {
console.log("Props", props);
return (
<View
style={{
marginHorizontal: 10,
}}
>
<Text>Test</Text>
</View>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ScreenMediaBrowserTop);

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

@@ -1,11 +1,12 @@
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { AssetsSelector } from "expo-images-picker";
import * as MediaLibrary from "expo-media-library";
import _ from "lodash";
import { H3 } from "native-base";
import React, { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
@@ -36,7 +37,6 @@ export function ImageBrowserScreen({
deleteAfterUpload,
}) {
const { t } = useTranslation();
const navigation = useNavigation();
const [uploads, setUploads] = useState({});
function handleOnProgress(uri, percent) {
setUploads((prevUploads) => ({ ...prevUploads, [uri]: { percent } }));
@@ -72,7 +72,7 @@ export function ImageBrowserScreen({
},
{
bodyshop: bodyshop,
jobId: selectedCameraJobId,
jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
uploaded_by: currentUser.email,
photo: p,
}
@@ -85,63 +85,93 @@ export function ImageBrowserScreen({
};
return (
<View style={[styles.flex, styles.container]}>
<CameraSelectJob />
<UploadDeleteSwitch />
{selectedCameraJobId && (
<AssetsSelector
style={{ flex: 1 }}
key={tick}
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: t("mediabrowser.actions.refresh"),
buttonStyle: styles.buttonStyle,
textStyle: styles.textStyle,
<SafeAreaView style={[styles.flex, styles.container]}>
<View style={[styles.flex, styles.container]}>
<CameraSelectJob />
<UploadDeleteSwitch />
{!selectedCameraJobId && (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<H3>{t("mediabrowser.labels.selectjobassetselector")}</H3>
</View>
)}
{selectedCameraJobId && (
<AssetsSelector
style={{ flex: 1 }}
key={tick}
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: t("mediabrowser.actions.refresh"),
buttonStyle: styles.buttonStyle,
textStyle: styles.textStyle,
backFunction: () => {
forceRerender();
},
doneFunction: onDone,
},
backFunction: () => {
forceRerender();
noAssets: {
Component: function NoAsset() {
return (
<View
style={{
display: "flex",
flex: 1,
height: 200,
marginHorizontal: 20,
alignItems: "center",
justifyContent: "center",
}}
>
<Ionicons name="ios-photos" size={72} />
<Text style={{ textAlign: "center", marginTop: 10 }}>
{t("mediabrowser.labels.nomedia")}
</Text>
</View>
);
},
},
doneFunction: onDone,
},
noAssets: {
Component: function NoAsset() {
return <Text>{`Looks like there's nothing here...`}</Text>;
},
},
}}
/>
)}
<UploadProgress uploads={uploads} />
</View>
}}
/>
)}
<UploadProgress uploads={uploads} />
</View>
</SafeAreaView>
);
}

3
components/upload-delete-switch/upload-delete-switch.component.jsx
View File

@@ -27,7 +27,7 @@ export function UploadDeleteSwitch({
</Text>
<Switch
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={deleteAfterUpload ? "#f5dd4b" : "#f4f3f4"}
thumbColor={deleteAfterUpload ? "tomato" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={() => toggleDeleteAfterUpload()}
value={deleteAfterUpload}
@@ -40,6 +40,7 @@ const styles = StyleSheet.create({
display: "flex",
flexDirection: "row",
alignItems: "center",
margin: 10,
},
text: {