feature/IO-3688-Searchable-Referral-Source - Implement

client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx

@@ -193,6 +193,9 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
                 </Form.Item>
                 <Form.Item label={t("jobs.fields.referralsource")} name="referral_source">
                   <Select
+                    showSearch={{
+                      optionFilterProp: "label"
+                    }}
                     options={bodyshop.md_referral_sources.map((s) => ({
                       value: s,
                       label: s

client/src/components/jobs-detail-general/jobs-detail-general.component.jsx

@@ -43,19 +43,25 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
           <Input disabled={jobRO} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
-          <Select disabled={jobRO} options={[
-            { value: "W", label: t("jobs.labels.deductible.waived") },
-            { value: "Y", label: t("jobs.labels.deductible.stands") }
-          ]} />
+          <Select
+            disabled={jobRO}
+            options={[
+              { value: "W", label: t("jobs.labels.deductible.waived") },
+              { value: "Y", label: t("jobs.labels.deductible.stands") }
+            ]}
+          />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
           <CurrencyInput disabled={jobRO} min={0} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ded_note")} name="ded_note">
-          <Select disabled={jobRO} options={bodyshop.md_ded_notes.map((n) => ({
-            value: n,
-            label: n
-          }))} />
+          <Select
+            disabled={jobRO}
+            options={bodyshop.md_ded_notes.map((n) => ({
+              value: n,
+              label: n
+            }))}
+          />
         </Form.Item>
         <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
           <Input disabled={jobRO} />
@@ -65,10 +71,14 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
         </Form.Item>
 
         <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
-          <Select disabled={jobRO} onChange={handleInsCoChange} options={bodyshop.md_ins_cos.map((s) => ({
-            value: s.name,
-            label: s.name
-          }))} />
+          <Select
+            disabled={jobRO}
+            onChange={handleInsCoChange}
+            options={bodyshop.md_ins_cos.map((s) => ({
+              value: s.name,
+              label: s.name
+            }))}
+          />
         </Form.Item>
         <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
           <Input disabled={jobRO} />
@@ -119,19 +129,30 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
             }
           ]}
         >
-          <Select disabled={jobRO} allowClear options={bodyshop.md_referral_sources.map((s) => ({
-            value: s,
-            label: s
-          }))} />
+          <Select
+            disabled={jobRO}
+            allowClear
+            showSearch={{
+              optionFilterProp: "label"
+            }}
+            options={bodyshop.md_referral_sources.map((s) => ({
+              value: s,
+              label: s
+            }))}
+          />
         </Form.Item>
         <Form.Item label={t("jobs.fields.referral_source_extra")} name="referral_source_extra">
           <Input disabled={jobRO} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.alt_transport")} name="alt_transport">
-          <Select disabled={jobRO} allowClear options={bodyshop.appt_alt_transport.map((s) => ({
-            value: s,
-            label: s
-          }))} />
+          <Select
+            disabled={jobRO}
+            allowClear
+            options={bodyshop.appt_alt_transport.map((s) => ({
+              value: s,
+              label: s
+            }))}
+          />
         </Form.Item>
       </FormRow>
       <Row gutter={[16, 16]}>
@@ -233,10 +254,14 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
       </FormRow>
       <FormRow header={t("jobs.forms.other")}>
         <Form.Item label={t("jobs.fields.category")} name="category">
-          <Select disabled={jobRO} allowClear options={bodyshop.md_categories.map((s) => ({
-            value: s,
-            label: s
-          }))} />
+          <Select
+            disabled={jobRO}
+            allowClear
+            options={bodyshop.md_categories.map((s) => ({
+              value: s,
+              label: s
+            }))}
+          />
         </Form.Item>
         <Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">
           <Input disabled={jobRO} />

client/src/pages/jobs-admin/jobs-admin.page.jsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@apollo/client/react";
 import { Button, Card, Col, Form, Input, Modal, Result, Row, Select, Space, Switch, Typography } from "antd";
-import { useEffect, useState, useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
@@ -23,9 +23,8 @@ import LoadingSpinner from "../../components/loading-spinner/loading-spinner.com
 import NotFound from "../../components/not-found/not-found.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import RREarlyROModal from "../../components/dms-post-form/rr-early-ro-modal";
-import { GET_JOB_BY_PK, CONVERT_JOB_TO_RO } from "../../graphql/jobs.queries";
-import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
-import { insertAuditTrail } from "../../redux/application/application.actions";
+import { CONVERT_JOB_TO_RO, GET_JOB_BY_PK } from "../../graphql/jobs.queries";
+import { insertAuditTrail, setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { createStructuredSelector } from "reselect";
 import { useSocket } from "../../contexts/SocketIO/useSocket";
@@ -302,7 +301,11 @@ export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader, bodyshop
                   }
                 ]}
               >
-                <Select>
+                <Select
+                  showSearch={{
+                    optionFilterProp: "children"
+                  }}
+                >
                   {bodyshop?.md_referral_sources?.map((s) => (
                     <Select.Option key={s} value={s}>
                       {s}
@@ -379,7 +382,13 @@ export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader, bodyshop
           </Form.Item>
 
           <Space wrap style={{ marginTop: 16 }}>
-            <Button disabled={submitDisabled()} type="primary" danger onClick={() => form.submit()} loading={convertLoading}>
+            <Button
+              disabled={submitDisabled()}
+              type="primary"
+              danger
+              onClick={() => form.submit()}
+              loading={convertLoading}
+            >
               {t("jobs.actions.convert")}
             </Button>
             <Button onClick={() => setShowConvertModal(false)}>{t("general.actions.close")}</Button>