IO-2992 Bill Line column Width with Word Breaks

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

client/src/components/bill-form/bill-form.lines.component.jsx

@@ -7,10 +7,10 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CiecaSelect from "../../utils/Ciecaselect";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
 import BilllineAddInventory from "../billline-add-inventory/billline-add-inventory.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -72,7 +72,14 @@ export function BillEnterModalLinesComponent({
           <BillLineSearchSelect
             disabled={disabled}
             options={lineData}
-            style={{ width: "100%", minWidth: "10rem" }}
+            style={{
+              width: "20rem",
+              maxWidth: "20rem",
+              minWidth: "10rem",
+              whiteSpace: "normal",
+              height: "auto",
+              minHeight: "32px" // default height of Ant Design inputs
+            }}
             allowRemoved={form.getFieldValue("is_credit_memo") || false}
             onSelect={(value, opt) => {
               setFieldsValue({
@@ -105,7 +112,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.line_desc"),
         dataIndex: "line_desc",
         editable: true,
-
+        width: "20rem",
         formItemProps: (field) => {
           return {
             key: `${field.index}line_desc`,
@@ -119,7 +126,7 @@ export function BillEnterModalLinesComponent({
             ]
           };
         },
-        formInput: (record, index) => <Input disabled={disabled} />
+        formInput: (record, index) => <Input.TextArea disabled={disabled} autoSize />
       },
       {
         title: t("billlines.fields.quantity"),

client/src/components/bill-line-search-select/bill-line-search-select.component.jsx

@@ -11,7 +11,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
       disabled={disabled}
       ref={ref}
       showSearch
-      popupMatchSelectWidth={false}
+      popupMatchSelectWidth={true}
       optionLabelProp={"name"}
       //  optionFilterProp="line_desc"
       filterOption={(inputValue, option) => {
@@ -43,7 +43,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
             item.oem_partno ? ` - ${item.oem_partno}` : ""
           }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim(),
           label: (
-            <>
+            <div style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>
               <span>
                 {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
                   item.oem_partno ? ` - ${item.oem_partno}` : ""
@@ -57,7 +57,7 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
               <span style={{ float: "right", paddingleft: "1rem" }}>
                 {item.act_price ? `$${item.act_price && item.act_price.toFixed(2)}` : ``}
               </span>
-            </>
+            </div>
           )
         }))
       ]}

client/src/components/contract-form/contract-form.component.jsx

@@ -1,17 +1,15 @@
 import { WarningFilled } from "@ant-design/icons";
 import { Form, Input, InputNumber, Space } from "antd";
+import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { DateFormatter } from "../../utils/DateFormatter";
-import dayjs from "../../utils/day";
 //import ContractLicenseDecodeButton from "../contract-license-decode-button/contract-license-decode-button.component";
 import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
 import ContractsRatesChangeButton from "../contracts-rates-change-button/contracts-rates-change-button.component";
 import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component";
-import {
+import FormDateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
-  default as DateTimePicker,
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
-  default as FormDateTimePicker
-} from "../form-date-time-picker/form-date-time-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import InputPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
@@ -20,10 +18,10 @@ import ContractFormJobPrefill from "./contract-form-job-prefill.component";
 export default function ContractFormComponent({ form, create = false, selectedJobState, selectedCar }) {
   const { t } = useTranslation();
   return (
-    <>
+    <div>
-      {!create && <FormFieldsChanged form={form} />}
+      <FormFieldsChanged form={form} />
       <LayoutFormRow>
-        {!create && (
+        {create ? null : (
           <Form.Item
             label={t("contracts.fields.status")}
             name="status"
@@ -52,7 +50,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
         <Form.Item label={t("contracts.fields.scheduledreturn")} name="scheduledreturn">
           <FormDateTimePicker />
         </Form.Item>
-        {!create && (
+        {create ? null : (
           <Form.Item label={t("contracts.fields.actualreturn")} name="actualreturn">
             <FormDateTimePicker />
           </Form.Item>
@@ -124,7 +122,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
             }}
           </Form.Item>
         )}
-        {!create && (
+        {create ? null : (
           <Form.Item label={t("contracts.fields.kmend")} name="kmend">
             <InputNumber />
           </Form.Item>
@@ -147,21 +145,25 @@ export default function ContractFormComponent({ form, create = false, selectedJo
         >
           <CourtesyCarFuelSlider />
         </Form.Item>
-        {!create && (
+        {create ? null : (
           <Form.Item label={t("contracts.fields.fuelin")} name="fuelin" span={8}>
             <CourtesyCarFuelSlider />
           </Form.Item>
         )}
       </LayoutFormRow>
-      <LayoutFormRow header={t("contracts.labels.driverinformation")}>
+      <div>
         <Space wrap>
-          {create && selectedJobState && (
+          {selectedJobState && (
-            <ContractFormJobPrefill jobId={selectedJobState && selectedJobState[0]} form={form} />
+            <div>
+              <ContractFormJobPrefill jobId={selectedJobState && selectedJobState[0]} form={form} />
+            </div>
           )}
-          {/* {<ContractLicenseDecodeButton form={form} />} */}
+          {
+            //<ContractLicenseDecodeButton form={form} />
+          }
         </Space>
-      </LayoutFormRow>
+      </div>
-      <LayoutFormRow noDivider={true}>
+      <LayoutFormRow header={t("contracts.labels.driverinformation")}>
         <Form.Item
           label={t("contracts.fields.driver_dlnumber")}
           name="driver_dlnumber"
@@ -181,8 +183,9 @@ export default function ContractFormComponent({ form, create = false, selectedJo
             const dlExpiresBeforeReturn = dayjs(form.getFieldValue("driver_dlexpiry")).isBefore(
               dayjs(form.getFieldValue("scheduledreturn"))
             );
+
             return (
-              <>
+              <div>
                 <Form.Item
                   label={t("contracts.fields.driver_dlexpiry")}
                   name="driver_dlexpiry"
@@ -201,10 +204,11 @@ export default function ContractFormComponent({ form, create = false, selectedJo
                     <span>{t("contracts.labels.dlexpirebeforereturn")}</span>
                   </Space>
                 )}
-              </>
+              </div>
             );
           }}
         </Form.Item>
+
         <Form.Item label={t("contracts.fields.driver_dlst")} name="driver_dlst">
           <Input />
         </Form.Item>
@@ -311,6 +315,6 @@ export default function ContractFormComponent({ form, create = false, selectedJo
           <InputNumber precision={2} />
         </Form.Item>
       </LayoutFormRow>
-    </>
+    </div>
   );
 }