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/production-board-kanban/production-board-kanban.component.jsx

@@ -1,14 +1,12 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { PageHeader } from "@ant-design/pro-layout";
 import { useApolloClient } from "@apollo/client";
+import Board from "./trello-board/index";
 import { Button, notification, Skeleton, Space } from "antd";
-import cloneDeep from "lodash/cloneDeep";
-import isEqual from "lodash/isEqual";
+import { PageHeader } from "@ant-design/pro-layout";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import NoteUpsertModal from "../../components/note-upsert-modal/note-upsert-modal.container";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { generate_UPDATE_JOB_KANBAN } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
@@ -17,13 +15,14 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import IndefiniteLoading from "../indefinite-loading/indefinite-loading.component";
 import ProductionBoardFilters from "../production-board-filters/production-board-filters.component";
 import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
-import ProductionListPrint from "../production-list-table/production-list-print.component.jsx";
 import CardColorLegend from "./production-board-kanban-card-color-legend.component.jsx";
 import "./production-board-kanban.styles.scss";
 import { createBoardData } from "./production-board-kanban.utils.js";
-import { defaultFilters, mergeWithDefaults } from "./settings/defaultKanbanSettings.js";
 import ProductionBoardKanbanSettings from "./settings/production-board-kanban.settings.component.jsx";
-import Board from "./trello-board/index";
+import cloneDeep from "lodash/cloneDeep";
+import isEqual from "lodash/isEqual";
+import { defaultFilters, mergeWithDefaults } from "./settings/defaultKanbanSettings.js";
+import NoteUpsertModal from "../../components/note-upsert-modal/note-upsert-modal.container";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -215,7 +214,6 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
               bodyshop={bodyshop}
               data={data}
             />
-            <ProductionListPrint />
           </Space>
         }
       />

client/src/components/production-list-table/production-list-table.component.jsx

@@ -77,7 +77,7 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
 
   const matchingColumnConfig = useMemo(() => {
     return bodyshop?.production_config?.find((p) => p.name === defaultView);
-  }, [bodyshop.production_config, defaultView]);
+  }, [bodyshop.production_config]);
 
   useEffect(() => {
     const newColumns =

client/src/translations/en_us/common.json

@@ -3044,7 +3044,6 @@
         "production_by_target_date": "Production by Target Date",
         "production_by_technician": "Production by Technician",
         "production_by_technician_one": "Production filtered by Technician",
-        "production_not_production_status": "Production not in Production Status",
         "production_over_time": "Production Level over Time",
         "psr_by_make": "Percent of Sales by Vehicle Make",
         "purchase_return_ratio_grouped_by_vendor_detail": "Purchase & Return Ratio by Vendor (Detail)",

client/src/translations/es/common.json

@@ -3044,7 +3044,6 @@
         "production_by_target_date": "",
         "production_by_technician": "",
         "production_by_technician_one": "",
-        "production_not_production_status": "",
         "production_over_time": "",
         "psr_by_make": "",
         "purchase_return_ratio_grouped_by_vendor_detail": "",

client/src/utils/TemplateConstants.js

@@ -2333,14 +2333,6 @@ export const TemplateList = (type, context) => {
             key: "production_by_technician",
             //idtype: "vendor",
             disabled: false
-          },
-          production_not_production_status: {
-            title: i18n.t("reportcenter.templates.production_not_production_status"),
-            description: "",
-            subject: i18n.t("reportcenter.templates.production_not_production_status"),
-            key: "production_not_production_status",
-            //idtype: "vendor",
-            disabled: false
           }
         }
       : {}),