From cd55b8b093d81c00626e730d85fec3d5795a068f Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 9 Jun 2021 13:58:34 -0700
Subject: [PATCH] IO-1110 Added Used space to media browser

---
 app.json                                      |  8 ++--
 babel-translations.babel                      | 23 +++++++++-
 .../job-space-available.component.jsx         | 44 +++++++++++++++++++
 .../screen-media-browser.component.jsx        |  2 +
 translations/en-US/common.json                |  1 +
 translations/es-MX/common.json                |  1 +
 translations/fr-CA/common.json                |  1 +
 7 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 components/job-space-available/job-space-available.component.jsx

diff --git a/app.json b/app.json
index 171848b..f83a155 100644
--- a/app.json
+++ b/app.json
@@ -2,19 +2,19 @@
   "expo": {
     "name": "ImEX Mobile",
     "slug": "imexmobile",
-    "version": "1.2.1",
-    "extra": { "expover": "2" },
+    "version": "1.2.2",
+    "extra": { "expover": "1" },
     "orientation": "default",
     "icon": "./assets/logo192noa.png",
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.imex.imexmobile",
-      "buildNumber": "1.2.1",
+      "buildNumber": "1.2.2",
       "googleServicesFile": "./GoogleService-Info.plist"
     },
     "android": {
       "package": "com.imex.imexmobile",
-      "versionCode": 1020100,
+      "versionCode": 1020200,
       "googleServicesFile": "./google-services.json"
     },
     "splash": {
diff --git a/babel-translations.babel b/babel-translations.babel
index fea7fa8..6bdcb8f 100644
--- a/babel-translations.babel
+++ b/babel-translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.7.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.7.1">
     <!--
 
     BabelEdit project file
@@ -1446,6 +1446,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>storageused</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>temporarystorage</name>
                                                 <definition_loaded>false</definition_loaded>
diff --git a/components/job-space-available/job-space-available.component.jsx b/components/job-space-available/job-space-available.component.jsx
new file mode 100644
index 0000000..6b0971e
--- /dev/null
+++ b/components/job-space-available/job-space-available.component.jsx
@@ -0,0 +1,44 @@
+import { useQuery } from "@apollo/client";
+import React from "react";
+import { ProgressBar } from "react-native-paper";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { GET_DOC_SIZE_TOTALS } from "../../graphql/documents.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { View, Text } from "react-native";
+import { useTranslation } from "react-i18next";
+import { formatBytes } from "../../util/document-upload.utility";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(JobSpaceAvailable);
+
+export function JobSpaceAvailable({ bodyshop, style, jobid }) {
+  const { t } = useTranslation();
+  const { data } = useQuery(GET_DOC_SIZE_TOTALS, {
+    variables: { jobId: jobid },
+    skip: !jobid,
+  });
+
+  if (!jobid || !data) return <></>;
+
+  const progress =
+    data.documents_aggregate.aggregate.sum.size /
+    ((bodyshop && bodyshop.jobsizelimit) || 1);
+
+  return (
+    <View style={{ margin: 10 }}>
+      <Text style={{ marginBottom: 5 }}>
+        {t("mediabrowser.labels.storageused", {
+          used: formatBytes(data.documents_aggregate.aggregate.sum.size),
+          total: formatBytes((bodyshop && bodyshop.jobsizelimit) || 1),
+          percent: Math.round(progress * 100),
+        })}
+      </Text>
+      <ProgressBar style={[style]} progress={progress} />
+    </View>
+  );
+}
diff --git a/components/screen-media-browser/screen-media-browser.component.jsx b/components/screen-media-browser/screen-media-browser.component.jsx
index 24e704b..61a6483 100644
--- a/components/screen-media-browser/screen-media-browser.component.jsx
+++ b/components/screen-media-browser/screen-media-browser.component.jsx
@@ -8,6 +8,7 @@ import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
 import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
 import CameraSelectJob from "../camera-select-job/camera-select-job.component";
+import JobSpaceAvailable from "../job-space-available/job-space-available.component";
 import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
 import UploadProgress from "../upload-progress/upload-progress.component";
 
@@ -31,6 +32,7 @@ export function ImageBrowserScreen({ selectedCameraJobId }) {
   return (
     <View style={[styles.flex, styles.container]}>
       <CameraSelectJob />
+      <JobSpaceAvailable jobid={selectedCameraJobId} key={`${tick}-space`} />
       <UploadDeleteSwitch />
       {!selectedCameraJobId && (
         <View
diff --git a/translations/en-US/common.json b/translations/en-US/common.json
index 3915f07..ca835d2 100644
--- a/translations/en-US/common.json
+++ b/translations/en-US/common.json
@@ -96,6 +96,7 @@
 				"selectjobassetselector": "Please select a job to upload media. ",
 				"storageexceeded": "Unable to uploaded selected files because there is not sufficient space available on this job.",
 				"storageexceeded_title": "Unable to upload file(s)",
+				"storageused": "Storage Used: {{used}} / {{total}} ({{percent}}%)",
 				"temporarystorage": "* Temporary Storage *",
 				"uploading": "Uploading"
 			},
diff --git a/translations/es-MX/common.json b/translations/es-MX/common.json
index 82b820e..1efd0ce 100644
--- a/translations/es-MX/common.json
+++ b/translations/es-MX/common.json
@@ -96,6 +96,7 @@
 				"selectjobassetselector": "",
 				"storageexceeded": "",
 				"storageexceeded_title": "",
+				"storageused": "",
 				"temporarystorage": "",
 				"uploading": ""
 			},
diff --git a/translations/fr-CA/common.json b/translations/fr-CA/common.json
index 5939022..b8a59e1 100644
--- a/translations/fr-CA/common.json
+++ b/translations/fr-CA/common.json
@@ -96,6 +96,7 @@
 				"selectjobassetselector": "",
 				"storageexceeded": "",
 				"storageexceeded_title": "",
+				"storageused": "",
 				"temporarystorage": "",
 				"uploading": ""
 			},