IO-946 Adjust bill lines form layout.

client/src/components/bill-detail-edit/bill-detail-edit.container.jsx

@@ -59,9 +59,9 @@ export function BillDetailEditcontainer({ setPartsOrderContext }) {
     xs: "100%",
     sm: "100%",
     md: "100%",
-    lg: "80%",
+    lg: "100%",
     xl: "80%",
-    xxl: "70%",
+    xxl: "80%",
   };
   const drawerPercentage = selectedBreakpoint
     ? bpoints[selectedBreakpoint[0]]

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

@@ -42,7 +42,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.jobline"),
         dataIndex: "joblineid",
         editable: true,
-        width: "25%",
+
         formItemProps: (field) => {
           return {
             key: `${field.index}joblinename`,
@@ -59,6 +59,7 @@ export function BillEnterModalLinesComponent({
           <BillLineSearchSelect
             disabled={disabled}
             options={lineData}
+            style={{ width: "100%", minWidth: "10rem" }}
             onSelect={(value, opt) => {
               setFieldsValue({
                 billlines: getFieldsValue(["billlines"]).billlines.map(
@@ -88,7 +89,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.line_desc"),
         dataIndex: "line_desc",
         editable: true,
-        width: "12%",
+
         formItemProps: (field) => {
           return {
             key: `${field.index}line_desc`,
@@ -107,7 +108,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.quantity"),
         dataIndex: "quantity",
         editable: true,
-        width: "5rem",
+        width: "4rem",
         formItemProps: (field) => {
           return {
             key: `${field.index}quantity`,
@@ -127,7 +128,7 @@ export function BillEnterModalLinesComponent({
       {
         title: t("billlines.fields.actual_price"),
         dataIndex: "actual_price",
-        width: "6rem",
+        width: "8rem",
         editable: true,
         formItemProps: (field) => {
           return {
@@ -184,7 +185,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.actual_cost"),
         dataIndex: "actual_cost",
         editable: true,
-        width: "7rem",
+        width: "8rem",
         formItemProps: (field) => {
           return {
             key: `${field.index}actual_cost`,
@@ -233,7 +234,7 @@ export function BillEnterModalLinesComponent({
           };
         },
         formInput: (record, index) => (
-          <Select style={{ width: "150px" }} disabled={disabled}>
+          <Select style={{ minWidth: "3rem" }} disabled={disabled}>
             {responsibilityCenters.costs.map((item) => (
               <Select.Option key={item.name}>{item.name}</Select.Option>
             ))}
@@ -252,7 +253,7 @@ export function BillEnterModalLinesComponent({
           };
         },
         formInput: (record, index) => (
-          <Select style={{ width: "150px" }} disabled={disabled}>
+          <Select disabled={disabled}>
             {bodyshop.md_parts_locations.map((loc, idx) => (
               <Select.Option key={idx} value={loc}>
                 {loc}
@@ -359,7 +360,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.federal_tax_applicable"),
         dataIndex: "applicable_taxes.federal",
         editable: true,
-        width: "3rem",
+
         formItemProps: (field) => {
           return {
             key: `${field.index}fedtax`,
@@ -374,7 +375,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.state_tax_applicable"),
         dataIndex: "applicable_taxes.state",
         editable: true,
-        width: "3rem",
+
         formItemProps: (field) => {
           return {
             key: `${field.index}statetax`,
@@ -388,7 +389,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.local_tax_applicable"),
         dataIndex: "applicable_taxes.local",
         editable: true,
-        width: "3rem",
+
         formItemProps: (field) => {
           return {
             key: `${field.index}localtax`,

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

@@ -1,37 +1,19 @@
-import { Select, Tag } from "antd";
+import { Select } from "antd";
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
 
 //To be used as a form element only.
 const { Option } = Select;
-const BillLineSearchSelect = (
+const BillLineSearchSelect = ({ options, disabled, ...restProps }, ref) => {
-  { value, onChange, options, onBlur, onSelect, disabled },
-  ref
-) => {
-  const [option, setOption] = useState(value);
   const { t } = useTranslation();
 
-  useEffect(() => {
-    if (value !== option && onChange) {
-      onChange(option);
-    }
-  }, [value, option, onChange]);
-
   return (
     <Select
       disabled={disabled}
       ref={ref}
       showSearch
-      autoFocus
-      value={option}
-      style={{
-        width: "100%",
-      }}
-      onChange={setOption}
       optionFilterProp="line_desc"
-      onBlur={onBlur}
+      {...restProps}
-      onSelect={onSelect}
     >
       <Select.Option key={null} value={"noline"} cost={0} line_desc={""}>
         {t("billlines.labels.other")}
@@ -46,29 +28,9 @@ const BillLineSearchSelect = (
               line_desc={item.line_desc}
               part_qty={item.part_qty}
             >
-              <div
+              {`${item.line_desc}${
-                className="imex-flex-row"
+                item.oem_partno ? ` - ${item.oem_partno}` : ""
-                style={{ flexWrap: "nowrap", width: "100%" }}
+              }`}
-              >
-                <div
-                  style={{
-                    flex: 1,
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                  }}
-                >
-                  {item.line_desc}
-                </div>
-                {item.oem_partno ? (
-                  <Tag color="blue">{item.oem_partno}</Tag>
-                ) : null}
-                {item.act_price ? (
-                  <Tag color="green">
-                    <CurrencyFormatter>{item.act_price || 0}</CurrencyFormatter>
-                  </Tag>
-                ) : null}
-              </div>
             </Option>
           ))
         : null}