IO-1886 Handle large numbers of of menu items for notes and file handler.

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
-      <Menu onClick={handleClick}>
+      onClick={handleClick}
-        {bodyshop.md_filehandlers.map((est, idx) => (
+      style={{
-          <Menu.Item value={est} key={idx}>
+        columnCount: Math.floor(bodyshop.md_filehandlers.length / 10) + 1,
-            {`${est.ins_ct_fn} ${est.ins_ct_ln}`}
+      }}
-          </Menu.Item>
+    >
-        ))}
+      {bodyshop.md_filehandlers.map((est, idx) => (
-      </Menu>
+        <Menu.Item value={est} key={idx} style={{ breakInside: "avoid" }}>
-    </div>
+          {`${est.ins_ct_fn} ${est.ins_ct_ln}`}
+        </Menu.Item>
+      ))}
+    </Menu>
   );
 
   return (

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")}>
+              //   job.vehicle && job.vehicle.v_paint_codes && (
-                <span style={{ whiteSpace: "pre" }}>
+              //   <DataLabel label={t("vehicles.fields.v_paint_codes")}>
-                  {Object.keys(job.vehicle.v_paint_codes).map((key, idx) => (
+              //     <span style={{ whiteSpace: "pre" }}>
-                    <Tag key={idx}>{job.vehicle.v_paint_codes[key]}</Tag>
+              //       {Object.keys(job.vehicle.v_paint_codes).map((key, idx) => (
-                  ))}
+              //         <Tag key={idx}>{job.vehicle.v_paint_codes[key]}</Tag>
-                </span>
+              //       ))}
-              </DataLabel>
+              //     </span>
-            )}
+              //   </DataLabel>
+              // )
+            }
           </div>
         </Card>
       </Col>

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>
       ))}

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>
       ),