From 0958ea5ba641e5a7054a91a436f9c78cac301893 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Wed, 16 Feb 2022 14:22:39 -0800
Subject: [PATCH] IO-1706 Payroll Table

---
 bodyshop_translations.babel                   | 23 ++++++++++-
 .../time-tickets-payroll-table.component.jsx  | 41 +++++++++++++++++++
 .../time-tickets/time-tickets.container.jsx   | 10 ++++-
 client/src/translations/en_us/common.json     |  3 +-
 client/src/translations/es/common.json        |  3 +-
 client/src/translations/fr/common.json        |  3 +-
 client/src/utils/RenderTemplate.js            |  9 +++-
 client/src/utils/TemplateConstants.js         |  7 ++++
 8 files changed, 91 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/time-tickets-payroll-table/time-tickets-payroll-table.component.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index a77e7e73f..33bada3c1 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -35691,6 +35691,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>exported_payroll</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>
                                 </children>
                             </folder_node>
                             <folder_node>
diff --git a/client/src/components/time-tickets-payroll-table/time-tickets-payroll-table.component.jsx b/client/src/components/time-tickets-payroll-table/time-tickets-payroll-table.component.jsx
new file mode 100644
index 000000000..731d94273
--- /dev/null
+++ b/client/src/components/time-tickets-payroll-table/time-tickets-payroll-table.component.jsx
@@ -0,0 +1,41 @@
+import { Button } from "antd";
+import queryString from "query-string";
+import React, { useState } from "react";
+import { useLocation } from "react-router-dom";
+import { GenerateDocument } from "../../utils/RenderTemplate";
+import { TemplateList } from "../../utils/TemplateConstants";
+import { useTranslation } from "react-i18next";
+import moment from "moment";
+const PayrollTemplate = TemplateList("special").exported_payroll;
+export default function TimeTicketsPayrollTable() {
+  const searchParams = queryString.parse(useLocation().search);
+  const { start, end } = searchParams;
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    setLoading(true);
+
+    await GenerateDocument(
+      {
+        name: PayrollTemplate.key,
+        variables: {
+          start: start
+            ? start
+            : moment().startOf("week").subtract(7, "days").format("YYYY-MM-DD"),
+          end: end ? end : moment().endOf("week").format("YYYY-MM-DD"),
+        },
+      },
+      {},
+      "x"
+    );
+
+    setLoading(false);
+  };
+
+  return (
+    <Button loading={loading} onClick={handleClick}>
+      {t("printcenter.payments.exported_payroll")}
+    </Button>
+  );
+}
diff --git a/client/src/pages/time-tickets/time-tickets.container.jsx b/client/src/pages/time-tickets/time-tickets.container.jsx
index c5bbbccbd..222be5117 100644
--- a/client/src/pages/time-tickets/time-tickets.container.jsx
+++ b/client/src/pages/time-tickets/time-tickets.container.jsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Col, Row } from "antd";
+import { Col, Row, Space } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React, { useEffect } from "react";
@@ -11,6 +11,7 @@ import AlertComponent from "../../components/alert/alert.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import TimeTicketsDatesSelector from "../../components/ticket-tickets-dates-selector/time-tickets-dates-selector.component";
 import TimeTicketList from "../../components/time-ticket-list/time-ticket-list.component";
+import TimeTicketsPayrollTable from "../../components/time-tickets-payroll-table/time-tickets-payroll-table.component";
 import TimeTicketsSummaryEmployees from "../../components/time-tickets-summary-employees/time-tickets-summary-employees.component";
 import { QUERY_TIME_TICKETS_IN_RANGE } from "../../graphql/timetickets.queries";
 import {
@@ -68,7 +69,12 @@ export function TimeTicketsContainer({
           <TimeTicketList
             loading={loading}
             timetickets={data ? data.timetickets : []}
-            extra={<TimeTicketsDatesSelector />}
+            extra={
+              <Space wrap>
+                <TimeTicketsPayrollTable />
+                <TimeTicketsDatesSelector />
+              </Space>
+            }
           />
         </Col>
         <Col span={24}>
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index fac0475fa..5fd53e7da 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -2117,7 +2117,8 @@
 				"title": "Print Center"
 			},
 			"payments": {
-				"ca_bc_etf_table": "ICBC ETF Table"
+				"ca_bc_etf_table": "ICBC ETF Table",
+				"exported_payroll": "Payroll Table"
 			},
 			"subjects": {
 				"jobs": {
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 28bddd12a..e3f3cf795 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -2117,7 +2117,8 @@
 				"title": ""
 			},
 			"payments": {
-				"ca_bc_etf_table": ""
+				"ca_bc_etf_table": "",
+				"exported_payroll": ""
 			},
 			"subjects": {
 				"jobs": {
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 6fc35a8a7..51e17ab21 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -2117,7 +2117,8 @@
 				"title": ""
 			},
 			"payments": {
-				"ca_bc_etf_table": ""
+				"ca_bc_etf_table": "",
+				"exported_payroll": ""
 			},
 			"subjects": {
 				"jobs": {
diff --git a/client/src/utils/RenderTemplate.js b/client/src/utils/RenderTemplate.js
index f1559b1e2..969f0adf1 100644
--- a/client/src/utils/RenderTemplate.js
+++ b/client/src/utils/RenderTemplate.js
@@ -17,7 +17,8 @@ const Templates = TemplateList();
 export default async function RenderTemplate(
   templateObject,
   bodyshop,
-  renderAsHtml = false
+  renderAsHtml = false,
+  renderAsExcel = false
 ) {
   //Query assets that match the template name. Must be in format <<templateName>>.query
   let { contextData, useShopSpecificTemplate } = await fetchContextData(
@@ -29,7 +30,8 @@ export default async function RenderTemplate(
       name: useShopSpecificTemplate
         ? `/${bodyshop.imexshopid}/${templateObject.name}`
         : `/${templateObject.name}`,
-      ...(renderAsHtml ? {} : { recipe: "chrome-pdf" }),
+      // ...(renderAsHtml && !renderAsExcel ? {} : { recipe: "chrome-pdf" }),
+      ...(renderAsExcel ? { recipe: "html-to-xlsx" } : {}),
     },
     data: {
       ...contextData,
@@ -182,6 +184,9 @@ export const GenerateDocument = async (
         template,
       })
     );
+  } else if (sendType === "x") {
+    console.log("excel")
+    await RenderTemplate(template, bodyshop, false, true);
   } else {
     await RenderTemplate(template, bodyshop);
   }
diff --git a/client/src/utils/TemplateConstants.js b/client/src/utils/TemplateConstants.js
index 64aebaa7c..b478fd969 100644
--- a/client/src/utils/TemplateConstants.js
+++ b/client/src/utils/TemplateConstants.js
@@ -1635,6 +1635,13 @@ export const TemplateList = (type, context) => {
             key: "ca_bc_etf_table",
             disabled: false,
           },
+          exported_payroll: {
+            title: i18n.t("printcenter.payments.exported_payroll"),
+            description: "Est Detail",
+            subject: i18n.t("printcenter.payments.exported_payroll"),
+            key: "exported_payroll",
+            disabled: false,
+          },
           production_by_technician_one: {
             title: i18n.t(
               "reportcenter.templates.production_by_technician_one"