feature/IO-3497-Ant-Design-v5-to-v6 - Update

2026-01-12 13:06:10 -05:00
parent 766848989d
commit a0ae6a30a9
21 changed files with 86 additions and 79 deletions
--- a/client/src/components/allocations-assignment/allocations-assignment.component.jsx
+++ b/client/src/components/allocations-assignment/allocations-assignment.component.jsx
@@ -28,12 +28,13 @@ export function AllocationsAssignmentComponent({
    <div>
      <Select
        id="employeeSelector"
-        showSearch
+        showSearch={{
+          optionFilterProp: "children",
+          filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }}
        style={{ width: 200 }}
        placeholder="Select a person"
-        optionFilterProp="children"
        onChange={onChange}
-        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
      >
        {bodyshop.employees.map((emp) => (
          <Select.Option value={emp.id} key={emp.id}>
--- a/client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx
+++ b/client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.component.jsx
@@ -30,12 +30,13 @@ export default connect(
  const popContent = (
    <div>
      <Select
-        showSearch
+        showSearch={{
+          optionFilterProp: "children",
+          filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }}
        style={{ width: 200 }}
        placeholder="Select a person"
-        optionFilterProp="children"
        onChange={onChange}
-        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
      >
        {bodyshop.employees.map((emp) => (
          <Select.Option value={emp.id} key={emp.id}>
--- a/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx
+++ b/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx
@@ -10,18 +10,19 @@ const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps },
    <Select
      disabled={disabled}
      ref={ref}
-      showSearch
+      showSearch={{
+        filterOption: (inputValue, option) => {
+          return (
+            (option.line_desc && option.line_desc.toLowerCase().includes(inputValue.toLowerCase())) ||
+            (option.oem_partno && option.oem_partno.toLowerCase().includes(inputValue.toLowerCase())) ||
+            (option.alt_partno && option.alt_partno.toLowerCase().includes(inputValue.toLowerCase())) ||
+            (option.act_price && option.act_price.toString().startsWith(inputValue.toString()))
+          );
+        }
+      }}
      popupMatchSelectWidth={true}
      optionLabelProp={"name"}
      //  optionFilterProp="line_desc"
-      filterOption={(inputValue, option) => {
-        return (
-          (option.line_desc && option.line_desc.toLowerCase().includes(inputValue.toLowerCase())) ||
-          (option.oem_partno && option.oem_partno.toLowerCase().includes(inputValue.toLowerCase())) ||
-          (option.alt_partno && option.alt_partno.toLowerCase().includes(inputValue.toLowerCase())) ||
-          (option.act_price && option.act_price.toString().startsWith(inputValue.toString()))
-        );
-      }}
      notFoundContent={"Removed."}
      options={[
        { value: "noline", label: t("billlines.labels.other"), name: t("billlines.labels.other") },
--- a/client/src/components/chat-tag-ro/chat-tag-ro.component.jsx
+++ b/client/src/components/chat-tag-ro/chat-tag-ro.component.jsx
@@ -10,12 +10,13 @@ export default function ChatTagRoComponent({ roOptions, loading, handleSearch, h
    <Space>
      <div style={{ width: "15rem" }}>
        <Select
-          showSearch
+          showSearch={{
+            filterOption: false,
+            onSearch: handleSearch
+          }}
          autoFocus
          popupMatchSelectWidth
          placeholder={t("general.labels.search")}
-          filterOption={false}
-          onSearch={handleSearch}
          onSelect={handleInsertTag}
          notFoundContent={loading ? <LoadingOutlined /> : <Empty />}
        >
--- a/client/src/components/employee-search-select/employee-search-select-email.component.jsx
+++ b/client/src/components/employee-search-select/employee-search-select-email.component.jsx
@@ -9,12 +9,13 @@ const EmployeeSearchSelectEmail = ({ options, ...props }) => {

  return (
    <Select
-      showSearch
+      showSearch={{
+        optionFilterProp: "search"
+      }}
      // value={option}
      style={{
        width: 400
      }}
-      optionFilterProp="search"
      {...props}
    >
      {options
--- a/client/src/components/employee-search-select/employee-search-select.component.jsx
+++ b/client/src/components/employee-search-select/employee-search-select.component.jsx
@@ -9,12 +9,13 @@ const EmployeeSearchSelect = ({ options, showEmail, ...props }) => {

  return (
    <Select
-      showSearch
+      showSearch={{
+        optionFilterProp: "search"
+      }}
      // value={option}
      style={{
        width: 400
      }}
-      optionFilterProp="search"
      {...props}
    >
      {options
--- a/client/src/components/global-search/global-search-os.component.jsx
+++ b/client/src/components/global-search/global-search-os.component.jsx
@@ -46,7 +46,7 @@ export default function GlobalSearchOs() {
                value: job.ro_number || "N/A",
                label: (
                  <Link to={`/manage/jobs/${job.id}`}>
-                    <Space size="small" split={<Divider orientation="vertical" />}>
+                    <Space size="small" separator={<Divider orientation="vertical" />}>
                      <strong>{job.ro_number || t("general.labels.na")}</strong>
                      <span>{`${job.status || ""}`}</span>
                      <span>
@@ -69,7 +69,7 @@ export default function GlobalSearchOs() {
                value: OwnerNameDisplayFunction(owner),
                label: (
                  <Link to={`/manage/owners/${owner.id}`}>
-                    <Space size="small" split={<Divider orientation="vertical" />} wrap>
+                    <Space size="small" separator={<Divider orientation="vertical" />} wrap>
                      <span>
                        <OwnerNameDisplay ownerObject={owner} />
                      </span>
@@ -89,7 +89,7 @@ export default function GlobalSearchOs() {
                value: `${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`,
                label: (
                  <Link to={`/manage/vehicles/${vehicle.id}`}>
-                    <Space size="small" split={<Divider orientation="vertical" />}>
+                    <Space size="small" separator={<Divider orientation="vertical" />}>
                      <span>
                        {`${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`}
                      </span>
@@ -111,7 +111,7 @@ export default function GlobalSearchOs() {
                value: `${payment.job?.ro_number} ${payment.amount}`,
                label: (
                  <Link to={`/manage/jobs/${payment.job?.id}`}>
-                    <Space size="small" split={<Divider orientation="vertical" />}>
+                    <Space size="small" separator={<Divider orientation="vertical" />}>
                      <span>{payment.paymentnum}</span>
                      <span>{payment.job?.ro_number}</span>
                      <span>{payment.memo || ""}</span>
@@ -131,7 +131,7 @@ export default function GlobalSearchOs() {
                value: `${bill.invoice_number} - ${bill.vendor.name}`,
                label: (
                  <Link to={`/manage/bills?billid=${bill.id}`}>
-                    <Space size="small" split={<Divider orientation="vertical" />}>
+                    <Space size="small" separator={<Divider orientation="vertical" />}>
                      <span>{bill.invoice_number}</span>
                      <span>{bill.vendor.name}</span>
                      <span>{bill.date}</span>
@@ -151,7 +151,7 @@ export default function GlobalSearchOs() {
          //       }`,
          //       label: (
          //         <Link to={`/manage/phonebook?phonebookentry=${pb.id}`}>
-          //           <Space size="small" split={<Divider orientation="vertical" />}>
+          //           <Space size="small" separator={<Divider orientation="vertical" />}>
          //             <span>{`${pb.firstname || ""} ${pb.lastname || ""} ${
          //               pb.company || ""
          //             }`}</span>
--- a/client/src/components/global-search/global-search.component.jsx
+++ b/client/src/components/global-search/global-search.component.jsx
@@ -37,7 +37,7 @@ export default function GlobalSearch() {
              value: job.ro_number || "N/A",
              label: (
                <Link to={`/manage/jobs/${job.id}`}>
-                  <Space size="small" split={<Divider orientation="vertical" />}>
+                  <Space size="small" separator={<Divider orientation="vertical" />}>
                    <strong>{job.ro_number || t("general.labels.na")}</strong>
                    <span>{`${job.status || ""}`}</span>
                    <span>
@@ -59,7 +59,7 @@ export default function GlobalSearch() {
              value: OwnerNameDisplayFunction(owner),
              label: (
                <Link to={`/manage/owners/${owner.id}`}>
-                  <Space size="small" split={<Divider orientation="vertical" />} wrap>
+                  <Space size="small" separator={<Divider orientation="vertical" />} wrap>
                    <span>
                      <OwnerNameDisplay ownerObject={owner} />
                    </span>
@@ -79,7 +79,7 @@ export default function GlobalSearch() {
              value: `${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`,
              label: (
                <Link to={`/manage/vehicles/${vehicle.id}`}>
-                  <Space size="small" split={<Divider orientation="vertical" />}>
+                  <Space size="small" separator={<Divider orientation="vertical" />}>
                    <span>
                      {`${vehicle.v_model_yr || ""} ${vehicle.v_make_desc || ""} ${vehicle.v_model_desc || ""}`}
                    </span>
@@ -101,7 +101,7 @@ export default function GlobalSearch() {
              value: `${payment.job.ro_number} ${payment.payer} ${payment.amount}`,
              label: (
                <Link to={`/manage/jobs/${payment.job.id}`}>
-                  <Space size="small" split={<Divider orientation="vertical" />}>
+                  <Space size="small" separator={<Divider orientation="vertical" />}>
                    <span>{payment.paymentnum}</span>
                    <span>{payment.job.ro_number}</span>
                    <span>{payment.memo || ""}</span>
@@ -121,7 +121,7 @@ export default function GlobalSearch() {
              value: `${bill.invoice_number} - ${bill.vendor.name}`,
              label: (
                <Link to={`/manage/bills?billid=${bill.id}`}>
-                  <Space size="small" split={<Divider orientation="vertical" />}>
+                  <Space size="small" separator={<Divider orientation="vertical" />}>
                    <span>{bill.invoice_number}</span>
                    <span>{bill.vendor.name}</span>
                    <span>{bill.date}</span>
@@ -139,7 +139,7 @@ export default function GlobalSearch() {
              value: `${pb.firstname || ""} ${pb.lastname || ""} ${pb.company || ""}`,
              label: (
                <Link to={`/manage/phonebook?phonebookentry=${pb.id}`}>
-                  <Space size="small" split={<Divider orientation="vertical" />}>
+                  <Space size="small" separator={<Divider orientation="vertical" />}>
                    <span>{`${pb.firstname || ""} ${pb.lastname || ""} ${pb.company || ""}`}</span>
                    <PhoneNumberFormatter>{pb.phone1}</PhoneNumberFormatter>
                    <span>{pb.email}</span>
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -66,7 +66,6 @@ export function ScheduleEventComponent({
  const [form] = Form.useForm();
  const [popOverVisible, setPopOverVisible] = useState(false);
  const [getJobDetails] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
-    variables: { id: event.job?.id },
    onCompleted: (data) => {
      if (data?.jobs_by_pk) {
        const totalHours =
@@ -409,7 +408,7 @@ export function ScheduleEventComponent({
              onClick={(e) => {
                if (event.job?.id) {
                  e.stopPropagation();
-                  getJobDetails();
+                  getJobDetails({ variables: { id: event.job.id } });
                }
              }}
              getPopupContainer={(trigger) => trigger.parentNode}
--- a/client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx
@@ -18,9 +18,7 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = () => ({});

-export default connect(mapStateToProps, mapDispatchToProps)(JobDetailCardsPartsComponent);
-
-export function JobDetailCardsPartsComponent({ loading, data, jobRO }) {
+function JobDetailCardsPartsComponent({ loading, data, jobRO }) {
  const { t } = useTranslation();
  const { joblines_status } = data;

@@ -103,8 +101,10 @@ export function JobDetailCardsPartsComponent({ loading, data, jobRO }) {
    <div>
      <CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
        <PartsStatusPie joblines_status={joblines_status} />
-        <Table key="id" columns={columns} dataSource={filteredJobLines || []} />
+        <Table rowKey="id" columns={columns} dataSource={filteredJobLines || []} />
      </CardTemplate>
    </div>
  );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobDetailCardsPartsComponent);
--- a/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
+++ b/client/src/components/job-employee-assignments/job-employee-assignments.component.jsx
@@ -46,11 +46,12 @@ export function JobEmployeeAssignments({
      <Col span={24}>
        <Select
          id="employeeSelector"
-          showSearch
+          showSearc={{
+            optionFilterProp: "children",
+            filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }}
          style={{ width: 200 }}
-          optionFilterProp="children"
          onChange={onChange}
-          filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        >
          {bodyshop.employees
            .filter((emp) => emp.active)
--- a/client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx
+++ b/client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx
@@ -89,10 +89,11 @@ export function JoblineBulkAssign({ setSelectedLines, selectedLines, insertAudit
          ]}
        >
          <Select
-            showSearch
+            showSearch={{
+              optionFilterProp: "children",
+              filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }}
            style={{ width: 200 }}
-            optionFilterProp="children"
-            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          >
            {bodyshop.employee_teams.map((team) => (
              <Select.Option value={team.id} key={team.id} name={team.name}>
--- a/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
+++ b/client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx
@@ -122,7 +122,7 @@ export function JobLineConvertToLabor({
            }
          ]}
        >
-          <Select allowClear optionFilterProp="children" showSearch>
+          <Select allowClear showSearch={{ optionFilterProp: "children" }}>
            <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
            <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
            <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
--- a/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx
+++ b/client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx
@@ -116,10 +116,11 @@ export function JobLineDispatchButton({
          ]}
        >
          <Select
-            showSearch
+            showSearch={{
+              optionFilterProp: "children",
+              filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }}
            style={{ width: 200 }}
-            optionFilterProp="children"
-            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          >
            {bodyshop.employees
              .filter((emp) => emp.active)
--- a/client/src/components/job-search-select/job-search-select.component.jsx
+++ b/client/src/components/job-search-select/job-search-select.component.jsx
@@ -62,14 +62,15 @@ const JobSearchSelect = (
      <Select
        ref={ref}
        disabled={disabled}
-        showSearch
+        showSearch={{
+          filterOption: false,
+          onSearch: handleSearch
+        }}
        autoFocus
        allowClear={!loading}
        style={{
          width: "100%"
        }}
-        filterOption={false}
-        onSearch={handleSearch}
        //loading={loading || idLoading}
        suffixIcon={(loading || idLoading) && <Spin />}
        notFoundContent={loading ? <LoadingOutlined /> : null}
--- a/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
+++ b/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx
@@ -131,12 +131,12 @@ export function JobsCloseLines({ bodyshop, job, jobRO }) {
                      >
                        <Select
                          allowClear
-                          optionFilterProp="children"
-                          showSearch
+                          showSearch={{
+                            optionFilterProp: "children",
+                            filterOption: (input, option) =>
+                              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                          }}
                          disabled={jobRO}
-                          filterOption={(input, option) =>
-                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                          }
                        >
                          {bodyshop.md_responsibility_centers.profits.map((p) => (
                            <Select.Option key={p.name} value={p.name}>
@@ -161,12 +161,12 @@ export function JobsCloseLines({ bodyshop, job, jobRO }) {
                      >
                        <Select
                          allowClear
-                          optionFilterProp="children"
-                          showSearch
+                          showSearch={{
+                            optionFilterProp: "children",
+                            filterOption: (input, option) =>
+                              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                          }}
                          disabled={jobRO}
-                          filterOption={(input, option) =>
-                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                          }
                        >
                          {bodyshop.md_responsibility_centers.profits.map((p) => (
                            <Select.Option key={p.name} value={p.name}>
--- a/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
+++ b/client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
@@ -178,10 +178,11 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
            ]}
          >
            <Select
-              showSearch
+              showSearch={{
+                optionFilterProp: "children",
+                filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }}
              style={{ width: 200 }}
-              optionFilterProp="children"
-              filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
              {bodyshop.employees
                .filter((emp) => emp.active)
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx
@@ -42,7 +42,6 @@ export function JobsDetailHeaderActionsToggleProduction({
  const notification = useNotification();

  const [getJobDetails, { loading: jobDetailsLoading }] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
-    variables: { id: job.id },
    onCompleted: (data) => {
      if (data?.jobs_by_pk) {
        const totalHours =
@@ -204,7 +203,7 @@ export function JobsDetailHeaderActionsToggleProduction({
      open={popOverVisible}
      onOpenChange={setPopOverVisible}
      onClick={(e) => {
-        getJobDetails();
+        getJobDetails({ variables: { id: job.id } });
        e.stopPropagation();
      }}
      getPopupContainer={(trigger) => trigger.parentNode}
--- a/client/src/components/owner-find-modal/owner-find-modal.container.jsx
+++ b/client/src/components/owner-find-modal/owner-find-modal.container.jsx
@@ -22,11 +22,7 @@ export default function OwnerFindModalContainer({
  const { t } = useTranslation();
  const [searchText, setSearchText] = useState(null);

-  const [callSearchowners, ownersList] = useLazyQuery(QUERY_SEARCH_OWNER_BY_IDX, {
-    variables: {
-      search: searchText
-    }
-  });
+  const [callSearchowners, ownersList] = useLazyQuery(QUERY_SEARCH_OWNER_BY_IDX);

  useEffect(() => {
    if (modalProps.open && owner) {
--- a/client/src/components/production-list-columns/production-list-columns.empassignment.component.jsx
+++ b/client/src/components/production-list-columns/production-list-columns.empassignment.component.jsx
@@ -102,11 +102,12 @@ export function ProductionListEmpAssignment({ insertAuditTrail, bodyshop, record
      <Col span={24}>
        <Select
          id="employeeSelector"
-          showSearch
+          showSearch={{
+            optionFilterProp: "children",
+            filterOption: (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }}
          style={{ width: 200 }}
-          optionFilterProp="children"
          onChange={onChange}
-          filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        >
          {bodyshop.employees
            .filter((emp) => emp.active)
--- a/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
+++ b/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
@@ -58,14 +58,15 @@ const VehicleSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
      <Select
        ref={ref}
        disabled={disabled}
-        showSearch
+        showSearch={{
+          filterOption: false,
+          onSearch: handleSearch
+        }}
        autoFocus
        value={option}
        style={{
          width: "100%"
        }}
-        filterOption={false}
-        onSearch={handleSearch}
        //     onChange={setOption}
        onChange={handleSelect}
        onSelect={handleSelect}