Added job select on Camera

2021-02-08 19:19:23 -08:00
parent 280b8e38b5
commit 3a0c8b9a5a
13 changed files with 12506 additions and 8055 deletions
--- a/components/camera-controls/camera-controls.component.jsx
+++ b/components/camera-controls/camera-controls.component.jsx
@@ -80,6 +80,7 @@ export default function CameraControls({
        onPressOut={onCaptureOut}
        onLongPress={onLongCapture}
        onPress={onShortCapture}
+        disabled={capturing}
      >
        <View style={[styles.captureBtn, capturing && styles.captureBtnActive]}>
          {capturing && <View style={styles.captureBtnInternal} />}
--- a/components/camera-select-job/camera-select-job.component.jsx
+++ b/components/camera-select-job/camera-select-job.component.jsx
@@ -0,0 +1,86 @@
+import { useQuery } from "@apollo/client";
+import { Picker } from "native-base";
+import React from "react";
+import { View } from "react-native";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
+import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
+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";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  cameraJobId: selectCurrentCameraJobId,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setCameraJobId: (id) => dispatch(setCameraJobId(id)),
+  setCameraJob: (job) => dispatch(setCameraJob(job)),
+});
+
+export function CameraSelectJob({
+  bodyshop,
+  cameraJobId,
+  setCameraJobId,
+  setCameraJob,
+}) {
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+    variables: {
+      statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
+    },
+    skip: !bodyshop,
+  });
+
+  const onRefresh = async () => {
+    return refetch();
+  };
+
+  if (loading) return <LoadingDisplay />;
+  if (error) return <ErrorDisplay errorMessage={error.message} />;
+
+  return (
+    <View
+      style={{
+        // display: "flex",
+        // width: "100%",
+        // alignSelf: "flex-start",
+        // alignItems: "center",
+        backgroundColor: "rgba(35,35,35, 0.4)",
+        paddingTop: 30,
+        //textShadow: "tomato 0px 0px 10px",
+        fontColor: "black",
+        fontSize: 20,
+        fontWeight: "bold",
+      }}
+    >
+      <Picker
+        note
+        selectedValue={cameraJobId}
+        onValueChange={(value, idx) => {
+          console.log(value, idx);
+          setCameraJobId(value);
+          setCameraJob(data.jobs[idx]);
+        }}
+      >
+        {data.jobs.map((j) => {
+          return (
+            <Picker.Item
+              label={`${j.ro_number ? `${j.ro_number} - ` : ``}${
+                j.ownr_fn || ""
+              } ${j.ownr_ln || ""} ${j.ownr_co_nm || ""} - ${
+                j.v_model_yr || ""
+              } ${j.v_make_desc || ""} ${j.v_model_desc || ""}`}
+              value={j.id}
+              key={j.id}
+            />
+          );
+        })}
+      </Picker>
+    </View>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CameraSelectJob);
--- a/components/loading-display/loading-display.component.jsx
+++ b/components/loading-display/loading-display.component.jsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 import { BarIndicator } from "react-native-indicators";
-import { Container, Content } from "native-base";

 export default function LoadingDisplay({ count = 5 }) {
  return (
--- a/components/screen-camera-job-search/screen-camera-job-search.component.jsx
+++ b/components/screen-camera-job-search/screen-camera-job-search.component.jsx
@@ -1,10 +0,0 @@
-import React from "react";
-import { Text, View } from "react-native";
-
-export default function ScreenCameraJobSearch() {
-  return (
-    <View>
-      <Text>This is the media cache screen.</Text>
-    </View>
-  );
-}
--- a/components/screen-camera/screen-camera.component.jsx
+++ b/components/screen-camera/screen-camera.component.jsx
@@ -12,6 +12,7 @@ import {
 } from "../../redux/app/app.selectors";
 import { addPhoto } from "../../redux/photos/photos.actions";
 import CameraControls from "../camera-controls/camera-controls.component";
+import CameraSelectJob from "../camera-select-job/camera-select-job.component";

 const mapStateToProps = createStructuredSelector({
  cameraJobId: selectCurrentCameraJobId,
@@ -62,16 +63,14 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
  const handleShortCapture = async () => {
    if (cameraRef.current) {
      const options = {
-        //quality: 0.5,
+        quality: 0.8,
        //base64: true,
-        //skipProcessing: true,
+        skipProcessing: true,
      };

+      console.log("Taking a picture!");
      let photo = await cameraRef.current.takePictureAsync(options);
-
-      console.log("ScreenCamera -> photo", photo);
      const filename = photo.uri.substring(photo.uri.lastIndexOf("/") + 1);
-
      const newUri = FileSystem.documentDirectory + "photos/" + filename;

      await FileSystem.moveAsync({
@@ -79,7 +78,7 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
        to: newUri,
      });
      setState({ ...state, capturing: false });
-
+      console.log("Adding photo to cache...");
      addPhoto({
        ...photo,
        id: filename,
@@ -119,51 +118,27 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
  }

  if (hasPermission === false) {
-    return <Text>No access to camera</Text>;
+    return <Text>No access to camera. Please ensure that you allow it.</Text>;
  }

  const { flashMode, cameraType, capturing } = state;

  return (
-    <View style={{ display: "flex", flex: 1 }}>
+    <SafeAreaView
+      style={{ display: "flex", flex: 1, backgroundColor: "tomato" }}
+    >
      <Camera
        style={{ flex: 1, display: "flex" }}
        type={state.cameraType}
        ref={cameraRef}
+        ratio={"16:9"}
      >
-        <SafeAreaView
+        <View
          style={{
            flex: 1,
          }}
        >
-          <TouchableOpacity
-            onPress={() => navigation.push("CameraJobSearch")}
-            style={{
-              display: "flex",
-              width: "100%",
-              alignSelf: "flex-start",
-              alignItems: "center",
-              backgroundColor: "rgba(112, 128, 144, 0.3)",
-              fontSize: 20,
-              fontWeight: "bold",
-            }}
-          >
-            <Text
-              style={{
-                fontSize: 20,
-                fontWeight: "bold",
-              }}
-            >
-              {cameraJob && cameraJob.ro_number}
-            </Text>
-            <Text>
-              {cameraJob &&
-                `${cameraJob && cameraJob.ownr_fn} ${
-                  cameraJob && cameraJob.ownr_ln
-                }`}
-            </Text>
-            <Text>{cameraJobId}</Text>
-          </TouchableOpacity>
+          <CameraSelectJob />
          <TouchableOpacity
            onPress={() => {
              navigation.push("MediaCache");
@@ -192,9 +167,9 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
            onLongCapture={handleLongCapture}
            onShortCapture={handleShortCapture}
          />
-        </SafeAreaView>
+        </View>
      </Camera>
-    </View>
+    </SafeAreaView>
  );
 }
 export default connect(mapStateToProps, mapDispatchToProps)(ScreenCamera);
--- a/components/screen-main/screen-main.component.jsx
+++ b/components/screen-main/screen-main.component.jsx
@@ -3,10 +3,12 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { createDrawerNavigator } from "@react-navigation/drawer";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
+import Dinero from "dinero.js";
 import i18n from "i18next";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -18,8 +20,7 @@ import {
  selectBodyshop,
  selectCurrentUser,
 } from "../../redux/user/user.selectors";
-import ScreenCameraJobSearch from "../screen-camera-job-search/screen-camera-job-search.component";
-import ScreenCamera from "../screen-camera/screen-camera.component";
+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";
@@ -28,7 +29,6 @@ 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 Dinero from "dinero.js";

 const JobStack = createStackNavigator();
 const CameraStack = createStackNavigator();
@@ -91,19 +91,21 @@ const CameraStackNavigator = ({ navigation }) => (
      options={{ headerShown: false }}
      component={ScreenCamera}
    />
-    <CameraStack.Screen
+    {/* <CameraStack.Screen
      name="CameraJobSearch"
      component={ScreenCameraJobSearch}
-    />
+    /> */}

    <CameraStack.Screen name="MediaCache" component={ScreenMediaCache} />
  </CameraStack.Navigator>
 );
+
 const MediaCacheStackNavigator = ({ navigation }) => (
  <CameraStack.Navigator initialRouteName="TabMediaCache">
    <CameraStack.Screen name="MediaCache" component={ScreenMediaCache} />
  </CameraStack.Navigator>
 );
+
 const MessagingStackNavigator = ({ navigation }) => (
  <MessagingStack.Navigator>
    <MessagingStack.Screen
--- a/components/screen-splash/screen-splash.component.jsx
+++ b/components/screen-splash/screen-splash.component.jsx
@@ -4,6 +4,7 @@ import Logo from "../../assets/logo192.png";
 import { useTranslation } from "react-i18next";
 import { H1, Container, Content } from "native-base";
 import styles from "../styles";
+import { BarIndicator } from "react-native-indicators";

 export default function ScreenSplash() {
  const { t } = useTranslation();
@@ -17,6 +18,7 @@ export default function ScreenSplash() {
      >
        <Image style={localStyles.logo} source={Logo} />
        <H1>{t("app.title")}</H1>
+        <BarIndicator count={5} color="dodgerblue" />
      </Content>
    </Container>
  );