IO-134 Limit shop uploads based on plan.

client/src/components/documents-upload/documents-upload.component.jsx

@@ -1,14 +1,15 @@
 import { UploadOutlined } from "@ant-design/icons";
-import { Upload } from "antd";
-import React from "react";
+import { notification, Progress, Result, Space, Upload } from "antd";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import formatBytes from "../../utils/formatbytes";
 import { handleUpload } from "./documents-upload.utility";
-
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   bodyshop: selectBodyshop,
@@ -22,10 +23,46 @@ export function DocumentsUploadComponent({
   tagsArray,
   billId,
   callbackAfterUpload,
+  totalSize,
 }) {
+  const { t } = useTranslation();
+
+  const pct = useMemo(() => {
+    return parseInt(
+      (totalSize / ((bodyshop && bodyshop.jobsizelimit) || 1)) * 100
+    );
+  }, [bodyshop, totalSize]);
+
+  if (pct > 100)
+    return (
+      <Result
+        status="error"
+        title={t("documents.labels.storageexceeded_title")}
+        subTitle={t("documents.labels.storageexceeded")}
+      ></Result>
+    );
+
   return (
     <Upload.Dragger
       multiple={true}
+      beforeUpload={(file, fileList) => {
+        const newFiles = fileList.reduce((acc, val) => acc + val.size, 0);
+        const shouldStopUpload =
+          (totalSize + newFiles) / ((bodyshop && bodyshop.jobsizelimit) || 1) >=
+          1;
+
+        //Check to see if old files plus newly uploaded ones will be too much.
+        if (shouldStopUpload) {
+          notification.open({
+            key: "cannotuploaddocuments",
+            type: "error",
+            message: t("documents.labels.upload_limitexceeded_title"),
+            description: t("documents.labels.upload_limitexceeded"),
+          });
+          return Upload.LIST_IGNORE;
+        }
+        return true;
+      }}
       customRequest={(ev) =>
         handleUpload(ev, {
           bodyshop: bodyshop,
@@ -39,11 +76,6 @@ export function DocumentsUploadComponent({
       accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
       // showUploadList={false}
     >
-      {
-        // <Button type="primary">
-        //       <UploadOutlined />
-        //     </Button>
-      }
       {children || (
         <>
           <p className="ant-upload-drag-icon">
@@ -52,6 +84,16 @@ export function DocumentsUploadComponent({
           <p className="ant-upload-text">
             Click or drag files to this area to upload.
           </p>
+          <Space wrap className="ant-upload-text">
+            <Progress type="dashboard" percent={pct} size="small" />
+            <span>
+              {t("documents.labels.usage", {
+                percent: pct,
+                used: formatBytes(totalSize),
+                total: formatBytes(bodyshop && bodyshop.jobsizelimit),
+              })}
+            </span>
+          </Space>
         </>
       )}
     </Upload.Dragger>

client/src/components/documents-upload/documents-upload.utility.js

@@ -134,6 +134,7 @@ export const uploadToCloudinary = async (
           type: fileType,
           extension: extension,
           bodyshopid: bodyshop.id,
+          size: file.size || cloudinaryUploadResponse.data.bytes,
         },
       ],
     },

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -16,6 +16,8 @@ function JobsDocumentsComponent({
   refetch,
   billId,
   billsCallback,
+  totalSize,
+  bodyshop,
 }) {
   const [galleryImages, setgalleryImages] = useState({ images: [], other: [] });
   const { t } = useTranslation();
@@ -104,7 +106,7 @@ function JobsDocumentsComponent({
   }, [data, setgalleryImages, t]);
 
   return (
-    <div className="clea rfix">
+    <div>
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Space wrap>
@@ -126,6 +128,7 @@ function JobsDocumentsComponent({
           <Card>
             <DocumentsUploadComponent
               jobId={jobId}
+              totalSize={totalSize}
               billId={billId}
               callbackAfterUpload={billsCallback || refetch}
             />

client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx

@@ -23,6 +23,7 @@ export default function JobsDocumentsContainer({
   return (
     <JobDocuments
       data={(data && data.documents) || documentsList || []}
+      totalSize={data && data.documents_aggregate.aggregate.sum.size}
       billId={billId}
       jobId={jobId}
       refetch={refetch}

client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx

@@ -34,6 +34,15 @@ export function TechClockOffButton({
     (e) => e.id === technician && technician.id
   )[0];
 
+  console.log(
+    "emps :>> ",
+    emps,
+    "e",
+    bodyshop && bodyshop.employees,
+    "tech",
+    technician
+  );
+
   const handleFinish = async (values) => {
     logImEXEvent("tech_clock_out_job");
 

client/src/graphql/bodyshop.queries.js

@@ -81,6 +81,7 @@ export const QUERY_BODYSHOP = gql`
       md_payment_types
       md_hour_split
       sub_status
+      jobsizelimit
       employees {
         id
         first_name
@@ -160,6 +161,7 @@ export const UPDATE_SHOP = gql`
         md_payment_types
         md_hour_split
         sub_status
+        jobsizelimit
         employees {
           id
           first_name

client/src/graphql/documents.queries.js

@@ -2,15 +2,18 @@ import { gql } from "@apollo/client";
 
 export const GET_DOCUMENTS_BY_JOB = gql`
   query GET_DOCUMENTS_BY_JOB($jobId: uuid!) {
-    documents(
-      where: { jobid: { _eq: $jobId } }
-      order_by: { updated_at: desc }
-    ) {
+    documents_aggregate(where: { jobid: { _eq: $jobId } }) {
+      aggregate {
+        sum {
+          size
+        }
+      }
+    }
+    documents(order_by: { updated_at: desc }) {
       id
       name
       key
       type
-      extension
       bill {
         id
         invoice_number

client/src/translations/en_us/common.json

@@ -658,7 +658,12 @@
 				"confirmdelete": "Are you sure you want to delete these documents. This CANNOT be undone.",
 				"doctype": "Document Type",
 				"newjobid": "Assign to Job",
-				"upload": "Upload"
+				"storageexceeded": "You've exceeded your storage limit for this job. Please remove documents, or increase your storage plan.",
+				"storageexceeded_title": "Storage Limit Exceeded",
+				"upload": "Upload",
+				"upload_limitexceeded": "Uploading all selected files will exceed the job storage limit for your shop.  ",
+				"upload_limitexceeded_title": "Unable to upload file(s)",
+				"usage": "of job storage used.  ({{used}} / {{total}})"
 			},
 			"successes": {
 				"delete": "Document deleted successfully.",

client/src/translations/es/common.json

@@ -658,7 +658,12 @@
 				"confirmdelete": "",
 				"doctype": "",
 				"newjobid": "",
-				"upload": "Subir"
+				"storageexceeded": "",
+				"storageexceeded_title": "",
+				"upload": "Subir",
+				"upload_limitexceeded": "",
+				"upload_limitexceeded_title": "",
+				"usage": ""
 			},
 			"successes": {
 				"delete": "Documento eliminado con éxito.",

client/src/translations/fr/common.json

@@ -658,7 +658,12 @@
 				"confirmdelete": "",
 				"doctype": "",
 				"newjobid": "",
-				"upload": "Télécharger"
+				"storageexceeded": "",
+				"storageexceeded_title": "",
+				"upload": "Télécharger",
+				"upload_limitexceeded": "",
+				"upload_limitexceeded_title": "",
+				"usage": ""
 			},
 			"successes": {
 				"delete": "Le document a bien été supprimé.",

client/src/utils/formatbytes.js

@@ -0,0 +1,10 @@
+export default function formatBytes(a, b = 2) {
+  if (0 === a || !a) return "0 Bytes";
+  const c = 0 > b ? 0 : b,
+    d = Math.floor(Math.log(a) / Math.log(1024));
+  return (
+    parseFloat((a / Math.pow(1024, d)).toFixed(c)) +
+    " " +
+    ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d]
+  );
+}