IO-2035 LMS Media.

components/job-documents/job-documents-local.component.jsx

@@ -0,0 +1,115 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  FlatList,
+  Image,
+  RefreshControl,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import env from "../../env";
+import { DetermineFileType } from "../../util/document-upload.utility";
+import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import axios from "axios";
+import cleanAxios from "../../util/CleanAxios";
+import normalizeUrl from "normalize-url";
+
+export default function JobDocumentsLocalComponent({ bodyshop, job }) {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [images, setImages] = useState([]);
+  const [imgIndex, setImgIndex] = useState(0);
+  useEffect(() => {
+    if (job.id) {
+      console.log("Getting Photos!");
+      getPhotos({ bodyshop, jobid: job.id, setImages });
+    }
+  }, [job.id, bodyshop]);
+
+  const onRefresh = async () => {
+    return getPhotos({ bodyshop, jobid: job.id, setImages });
+  };
+  console.log(images);
+  return (
+    <View style={{ flex: 1 }}>
+      <FlatList
+        refreshControl={
+          <RefreshControl refreshing={false} onRefresh={onRefresh} />
+        }
+        data={images}
+        numColumns={4}
+        style={{ flex: 1 }}
+        keyExtractor={(item) => item.id}
+        renderItem={(object) => (
+          <TouchableOpacity
+            style={{ flex: 1 / 4, aspectRatio: 1, margin: 4 }}
+            onPress={async () => {
+              setImgIndex(object.index);
+              setPreviewVisible(true);
+            }}
+          >
+            <Image
+              style={{ flex: 1 }}
+              resizeMode="cover"
+              source={{
+                uri: object.item.thumbUrl,
+                aspectRatio: 1,
+              }}
+            />
+          </TouchableOpacity>
+        )}
+      />
+      <Text>
+        {images?.filter((d) => d.type?.mime?.startsWith("image")).length}
+      </Text>
+
+      <MediaCacheOverlay
+        photos={images}
+        imgIndex={imgIndex}
+        setImgIndex={setImgIndex}
+        previewVisible={previewVisible}
+        setPreviewVisible={setPreviewVisible}
+      />
+    </View>
+  );
+}
+
+async function getPhotos({ bodyshop, jobid, setImages }) {
+  console.log("In Get Photos", bodyshop.localmediatoken);
+  const localmediaserverhttp = bodyshop.localmediaserverhttp.trim();
+  try {
+    const imagesFetch = await cleanAxios.post(
+      `${localmediaserverhttp}/jobs/list`,
+      {
+        jobid,
+      },
+      { headers: { ims_token: bodyshop.localmediatoken } }
+    );
+    console.log(
+      "🚀  ~ file: job-documents-local.component.jsx  ~ line 86  ~ imagesFetch",
+      imagesFetch
+    );
+
+    const normalizedImages = imagesFetch.data
+      .filter((d) => d.type?.mime?.startsWith("image"))
+      .map((d, idx) => {
+        return {
+          ...d,
+          // src: `${bodyshop.localmediaserverhttp}/${d.src}`.replace("//", "/"),
+
+          uri: `${bodyshop.localmediaserverhttp}/${d.src}`.replace("//", "/"),
+          thumbUrl: `${bodyshop.localmediaserverhttp}/${d.thumbnail}`.replace(
+            "//",
+            "/"
+          ),
+          id: idx,
+        };
+      });
+    setImages(normalizedImages);
+  } catch (error) {
+    console.log("error,", error);
+  }
+}

components/screen-job-detail/screen-job-detail.component.jsx

@@ -13,6 +13,7 @@ import LoadingDisplay from "../loading-display/loading-display.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import JobDocumentsLocalComponent from "../job-documents/job-documents-local.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -55,16 +56,21 @@ export function ScreenJobDetail({ bodyshop, route }) {
         loading: loading,
         refetch: refetch,
       }),
-    ...(bodyshop.uselocalmediaserver
-      ? {}
-      : {
-          documents: () =>
-            JobDocuments({
-              job: data.jobs_by_pk,
-              loading: loading,
-              refetch: refetch,
-            }),
-        }),
+
+    documents: () => {
+      return bodyshop.uselocalmediaserver
+        ? JobDocumentsLocalComponent({
+            job: data.jobs_by_pk,
+
+            bodyshop: bodyshop,
+          })
+        : JobDocuments({
+            job: data.jobs_by_pk,
+            loading: loading,
+            refetch: refetch,
+          });
+    },
+
     notes: () =>
       JobNotes({
         job: data.jobs_by_pk,
@@ -77,9 +83,7 @@ export function ScreenJobDetail({ bodyshop, route }) {
   const [routes] = React.useState([
     { key: "job", title: t("jobdetail.labels.job") },
     { key: "lines", title: t("jobdetail.labels.lines") },
-    ...(bodyshop.uselocalmediaserver
-      ? []
-      : [{ key: "documents", title: t("jobdetail.labels.documents") }]),
+    { key: "documents", title: t("jobdetail.labels.documents") },
     { key: "notes", title: t("jobdetail.labels.notes") },
   ]);
 

components/screen-main/screen-main.component.jsx

@@ -193,7 +193,7 @@ export default connect(
 )(ScreenMainComponent);
 
 function HasAccess({ features }) {
-  if (features.mobile === undefined) return true;
+  if (features.mobile === undefined || features.mobile === true) return true;
   if (features.mobile === false) return false;
   const d = moment(moment(features.mobile));
   if (d.isValid()) return d.isAfter(moment());

components/upload-progress/upload-progress.component.jsx

@@ -13,8 +13,10 @@ import {
   View,
 } from "react-native";
 import { Divider, ProgressBar } from "react-native-paper";
+import Toast from "react-native-toast-message";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import * as Sentry from "sentry-expo";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
 import { GET_DOC_SIZE_TOTALS } from "../../graphql/documents.queries";
 import {
@@ -26,8 +28,6 @@ import {
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import { formatBytes, handleUpload } from "../../util/document-upload.utility";
-import Toast from "react-native-toast-message";
-import * as Sentry from "sentry-expo";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -205,16 +205,49 @@ export function UploadProgress({
       try {
         console.log("Trying to Delete", filesToDelete);
         if (Platform.OS === "android") {
-          await Promise.all(
-            filesToDelete.map(async (f) =>
-              MediaLibrary.removeAssetsFromAlbumAsync(f, f.albumId)
-            )
+          //Create a new asset with the first file to delete.
+          console.log("Trying new delete.");
+
+          const delres = await MediaLibrary.removeAssetsFromAlbumAsync(
+            filesToDelete,
+            filesToDelete[0].albumId
           );
+          console.log(
+            "🚀  ~ file: upload-progress.component.jsx  ~ line 220  ~ delres",
+            delres
+          );
+          // const album = await MediaLibrary.createAlbumAsync(
+          //   "Deleted",
+          //   filesToDelete.pop(),
+          //   false
+          // );
+          // console.log(
+          //   "🚀  ~ file: upload-progress.component.jsx  ~ line 215  ~ album",
+          //   album
+          // );
+          // //Move the rest.
+          // const moveResult = await MediaLibrary.addAssetsToAlbumAsync(
+          //   filesToDelete,
+          //   album.id,
+          //   false
+          // );
+          // console.log(
+          //   "🚀  ~ file: upload-progress.component.jsx  ~ line 221  ~ moveResult",
+          //   moveResult
+          // );
+          // //Delete the album.
+
+          // const deleteResult = await MediaLibrary.deleteAlbumsAsync(
+          //   album.id,
+          //   true
+          // );
+          // console.log(
+          //   "🚀  ~ file: upload-progress.component.jsx  ~ line 228  ~ deleteResult",
+          //   deleteResult
+          // );
+        } else {
+          await MediaLibrary.deleteAssetsAsync(filesToDelete.map((f) => f.id));
         }
-        console.log(
-          "Delete Result",
-          await MediaLibrary.deleteAssetsAsync(filesToDelete.map((f) => f.id))
-        );
       } catch (error) {
         console.log("Unable to delete picture.", error);
         Sentry.Native.captureException(error);