From abc72625843d0ea46b84adb1e30dc2b7ff13bfd9 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Thu, 19 May 2022 10:09:45 -0700
Subject: [PATCH] IO-1886 Handle large numbers of of menu items for notes and
 file handler.

---
 ...bs-detail-change-filehandler.component.jsx | 21 ++++++++++--------
 .../jobs-detail-header.component.jsx          | 22 ++++++++++---------
 .../notes-preset-button.component.jsx         | 12 ++++++++--
 .../parts-queue.page.component.jsx            |  2 ++
 4 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/client/src/components/jobs-detail-change-filehandler/jobs-detail-change-filehandler.component.jsx b/client/src/components/jobs-detail-change-filehandler/jobs-detail-change-filehandler.component.jsx
index 998f74125..ee684994b 100644
--- a/client/src/components/jobs-detail-change-filehandler/jobs-detail-change-filehandler.component.jsx
+++ b/client/src/components/jobs-detail-change-filehandler/jobs-detail-change-filehandler.component.jsx
@@ -16,15 +16,18 @@ export function JobsDetailChangeFilehandler({ disabled, form, bodyshop }) {
   };
 
   const menu = (
-    <div>
-      <Menu onClick={handleClick}>
-        {bodyshop.md_filehandlers.map((est, idx) => (
-          <Menu.Item value={est} key={idx}>
-            {`${est.ins_ct_fn} ${est.ins_ct_ln}`}
-          </Menu.Item>
-        ))}
-      </Menu>
-    </div>
+    <Menu
+      onClick={handleClick}
+      style={{
+        columnCount: Math.floor(bodyshop.md_filehandlers.length / 10) + 1,
+      }}
+    >
+      {bodyshop.md_filehandlers.map((est, idx) => (
+        <Menu.Item value={est} key={idx} style={{ breakInside: "avoid" }}>
+          {`${est.ins_ct_fn} ${est.ins_ct_ln}`}
+        </Menu.Item>
+      ))}
+    </Menu>
   );
 
   return (
diff --git a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
index 8494086a8..763246908 100644
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -216,20 +216,22 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
             <DataLabel label={t("jobs.labels.relatedros")}>
               <JobsRelatedRos jobid={job.id} job={job} />
             </DataLabel>
-            {job.vehicle.notes && (
+            {job.vehicle && job.vehicle.notes && (
               <DataLabel label={t("vehicles.fields.notes")}>
                 <span style={{ whiteSpace: "pre" }}>{job.vehicle.notes}</span>
               </DataLabel>
             )}
-            {job.vehicle.v_paint_codes && (
-              <DataLabel label={t("vehicles.fields.v_paint_codes")}>
-                <span style={{ whiteSpace: "pre" }}>
-                  {Object.keys(job.vehicle.v_paint_codes).map((key, idx) => (
-                    <Tag key={idx}>{job.vehicle.v_paint_codes[key]}</Tag>
-                  ))}
-                </span>
-              </DataLabel>
-            )}
+            {
+              //   job.vehicle && job.vehicle.v_paint_codes && (
+              //   <DataLabel label={t("vehicles.fields.v_paint_codes")}>
+              //     <span style={{ whiteSpace: "pre" }}>
+              //       {Object.keys(job.vehicle.v_paint_codes).map((key, idx) => (
+              //         <Tag key={idx}>{job.vehicle.v_paint_codes[key]}</Tag>
+              //       ))}
+              //     </span>
+              //   </DataLabel>
+              // )
+            }
           </div>
         </Card>
       </Col>
diff --git a/client/src/components/notes-preset-button/notes-preset-button.component.jsx b/client/src/components/notes-preset-button/notes-preset-button.component.jsx
index 97eaf36b6..6cf5de285 100644
--- a/client/src/components/notes-preset-button/notes-preset-button.component.jsx
+++ b/client/src/components/notes-preset-button/notes-preset-button.component.jsx
@@ -22,9 +22,17 @@ export function NotesPresetButton({ bodyshop, form }) {
   };
 
   const menu = (
-    <Menu>
+    <Menu
+      style={{
+        columnCount: Math.floor(bodyshop.md_notes_presets.length / 10) + 1,
+      }}
+    >
       {bodyshop.md_notes_presets.map((i, idx) => (
-        <Menu.Item onClick={() => handleSelect(i)}  key={idx}>
+        <Menu.Item
+          onClick={() => handleSelect(i)}
+          key={idx}
+          style={{ breakInside: "avoid" }}
+        >
           {i.label}
         </Menu.Item>
       ))}
diff --git a/client/src/pages/parts-queue/parts-queue.page.component.jsx b/client/src/pages/parts-queue/parts-queue.page.component.jsx
index 8c815cd30..651125800 100644
--- a/client/src/pages/parts-queue/parts-queue.page.component.jsx
+++ b/client/src/pages/parts-queue/parts-queue.page.component.jsx
@@ -163,6 +163,8 @@ export function PartsQueuePageComponent({ bodyshop }) {
       dataIndex: "scheduled_in",
       key: "scheduled_in",
       ellipsis: true,
+      sorter: (a, b) => dateSort(a.scheduled_in, b.scheduled_in),
+      sortOrder: sortcolumn === "scheduled_in" && sortorder,
       render: (text, record) => (
         <DateTimeFormatter>{record.scheduled_in}</DateTimeFormatter>
       ),