Merged in feature/IO-3010-Task-Table-UI-Mods (pull request #1873)

IO-3010 Task Table UI refactor

Approved-by: Dave Richer

client/src/components/task-list/task-list.component.jsx

@@ -144,7 +144,7 @@ function TaskListComponent({
     title: t("tasks.fields.created_by"),
     dataIndex: "created_by",
     key: "created_by",
-    width: "10%",
+    width: "8%",
     defaultSortOrder: "descend",
     sorter: true,
     sortOrder: sortcolumn === "created_by" && sortorder,
@@ -166,65 +166,70 @@ function TaskListComponent({
     });
   }
 
-  if (showRo) {
+  columns.push({
-    columns.push({
+    title: t("tasks.fields.related_items"),
-      title: t("tasks.fields.job.ro_number"),
+    key: "related_items",
-      dataIndex: ["job", "ro_number"],
+    width: "12%",
-      key: "job.ro_number",
+    render: (text, record) => {
-      width: "8%",
+      const items = [];
-      render: (text, record) =>
+
-        record.job ? (
+      // Job
-          <Link to={`/manage/jobs/${record.job.id}?tab=tasks`}>{record.job.ro_number || t("general.labels.na")}</Link>
+      if (showRo && record.job) {
-        ) : (
+        items.push(
-          t("general.labels.na")
+          <Link key="job" to={`/manage/jobs/${record.job.id}?tab=tasks`}>
-        )
+            {t("tasks.fields.job.ro_number")}: {record.job.ro_number}
-    });
+          </Link>
-  }
+        );
+      }
+      if (showRo && !record.job) {
+        items.push(`${t("tasks.fields.job.ro_number")}: ${t("general.labels.na")}`);
+      }
+
+      // Jobline
+      if (record.jobline?.line_desc) {
+        items.push(
+          <span key="jobline">
+            {t("tasks.fields.jobline")}: {record.jobline.line_desc}
+          </span>
+        );
+      }
+
+      // Parts Order
+      if (record.parts_order) {
+        const { order_number, vendor } = record.parts_order;
+        const partsOrderText =
+          order_number && vendor?.name ? `${order_number} - ${vendor.name}` : t("general.labels.na");
+        items.push(
+          <Link
+            key="parts_order"
+            to={`/manage/jobs/${record.job.id}?partsorderid=${record.parts_order.id}&tab=partssublet`}
+          >
+            {t("tasks.fields.parts_order")}: {partsOrderText}
+          </Link>
+        );
+      }
+
+      // Bill
+      if (record.bill) {
+        const { invoice_number, vendor } = record.bill;
+        const billText = invoice_number && vendor?.name ? `${invoice_number} - ${vendor.name}` : t("general.labels.na");
+        items.push(
+          <Link key="bill" to={`/manage/jobs/${record.job.id}?billid=${record.bill.id}&tab=partssublet`}>
+            {t("tasks.fields.bill")}: {billText}
+          </Link>
+        );
+      }
+
+      return items.length > 0 ? <Space direction="vertical">{items}</Space> : null;
+    }
+  });
 
   columns.push(
-    {
-      title: t("tasks.fields.jobline"),
-      dataIndex: ["jobline", "id"],
-      key: "jobline.id",
-      width: "8%",
-      render: (text, record) => record?.jobline?.line_desc || ""
-    },
-    {
-      title: t("tasks.fields.parts_order"),
-      dataIndex: ["parts_order", "id"],
-      key: "part_order.id",
-      width: "8%",
-      render: (text, record) =>
-        record.parts_order ? (
-          <Link to={`/manage/jobs/${record.job.id}?partsorderid=${record.parts_order.id}&tab=partssublet`}>
-            {record.parts_order.order_number && record.parts_order.vendor && record.parts_order.vendor.name
-              ? `${record.parts_order.order_number} - ${record.parts_order.vendor.name}`
-              : t("general.labels.na")}
-          </Link>
-        ) : (
-          ""
-        )
-    },
-    {
-      title: t("tasks.fields.bill"),
-      dataIndex: ["bill", "id"],
-      key: "bill.id",
-      width: "10%",
-      render: (text, record) =>
-        record.bill ? (
-          <Link to={`/manage/jobs/${record.job.id}?billid=${record.bill.id}&tab=partssublet`}>
-            {record.bill.invoice_number && record.bill.vendor && record.bill.vendor.name
-              ? `${record.bill.invoice_number} - ${record.bill.vendor.name}`
-              : t("general.labels.na")}
-          </Link>
-        ) : (
-          ""
-        )
-    },
     {
       title: t("tasks.fields.title"),
       dataIndex: "title",
       key: "title",
+      minWidth: "20%",
       sorter: true,
       sortOrder: sortcolumn === "title" && sortorder
     },
@@ -258,7 +263,7 @@ function TaskListComponent({
     {
       title: t("tasks.fields.actions"),
       key: "toggleCompleted",
-      width: "5%",
+      width: "8%",
       render: (text, record) => (
         <Space direction="horizontal">
           <Button

client/src/translations/en_us/common.json

@@ -3204,6 +3204,7 @@
           "medium": "Medium"
         },
         "priority": "Priority",
+        "related_items": "Related Items",
         "remind_at": "Remind At",
         "title": "Title"
       },

client/src/translations/es/common.json

@@ -3204,6 +3204,7 @@
           "medium": ""
         },
         "priority": "",
+        "related_items": "",
         "remind_at": "",
         "title": ""
       },

client/src/translations/fr/common.json

@@ -3204,6 +3204,7 @@
           "medium": ""
         },
         "priority": "",
+        "related_items": "",
         "remind_at": "",
         "title": ""
       },