IO-1110 Added Used space to media browser

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>
+  );
+}

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