IO-1264 IO-1271 Report Center additions & format.

client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx

@@ -161,7 +161,7 @@ export function Jobd3RdPartyModal({ bodyshop, jobId }) {
               <Input />
             </Form.Item>
             <Form.Item
-              label={t("printcenter.jobs.3rdpartyfields.ponumber")}
+              label={t("printcenter.jobs.3rdpartyfields.refnumber")}
               name="ponumber"
             >
               <Input />

client/src/components/report-center-modal/report-center-modal.component.jsx

@@ -1,5 +1,5 @@
 import { useLazyQuery } from "@apollo/client";
-import { Button, DatePicker, Form, Radio } from "antd";
+import { Button, DatePicker, Form, Radio, Space } from "antd";
 import moment from "moment";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +13,7 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
+import "./report-center-modal.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   reportCenterModal: selectReportCenter,
@@ -86,6 +87,7 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
         <Form.Item
           name="key"
           label={t("reportcenter.labels.key")}
+          //  className="radio-group-columns"
           rules={[
             {
               required: true,
@@ -93,12 +95,21 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
             },
           ]}
         >
-          <Radio.Group style={{ columns: "3 auto" }}>
-            {Object.keys(Templates).map((key) => (
-              <Radio key={key} value={key}>
-                {Templates[key].title}
-              </Radio>
-            ))}
+          <Radio.Group>
+            <Space
+              direction="vertical"
+              wrap
+              size="small"
+              style={{
+                maxHeight: "50vh",
+              }}
+            >
+              {Object.keys(Templates).map((key) => (
+                <Radio key={key} value={key}>
+                  {Templates[key].title}
+                </Radio>
+              ))}
+            </Space>
           </Radio.Group>
         </Form.Item>
         <Form.Item dependencies={["key"]}>

client/src/components/report-center-modal/report-center-modal.container.jsx

@@ -31,7 +31,7 @@ export function ReportCenterModalContainer({
       onCancel={() => toggleModalVisible()}
       cancelButtonProps={{ style: { display: "none" } }}
       destroyOnClose
-      width="60%"
+      width="80%"
     >
       <ReportCenterModalComponent />
     </Modal>

client/src/components/report-center-modal/report-center-modal.styles.scss

@@ -0,0 +1,11 @@
+.radio-group-columns {
+  .ant-radio-group {
+    // display: block;
+  }
+  .ant-radio-wrapper {
+    display: block;
+    span {
+      word-wrap: break-word;
+    }
+  }
+}