Update actions menu for jobs list.

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

@@ -1,13 +1,44 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { Table, Divider, Icon, Input } from "antd";
+import { Table, Icon, Input, Dropdown, Menu } from "antd";
 import { alphaSort } from "../../utils/sorters";
+import { useTranslation } from "react-i18next";
 
 export default function JobsPage({ loading, jobs }) {
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" }
   });
+  const { t } = useTranslation();
+
+  const actionMenu = (
+    <Menu>
+      <Menu.Item key="images">
+        <Icon type="file-image" />
+        {t("jobs.actions.viewJobImages")}
+      </Menu.Item>
+      <Menu.Item key="printing">
+        <Icon type="printer" />
+        {t("jobs.actions.printCenter")}
+      </Menu.Item>
+      <Menu.Item key="notes">
+        <Icon type="edit" />
+        {t("jobs.actions.notes")}
+      </Menu.Item>
+      <Menu.Item key="postinvoices">
+        <Icon type="shopping-cart" />
+        {t("jobs.actions.postInvoices")}
+      </Menu.Item>
+      <Menu.Item key="receiveparts">
+        <Icon type="inbox" />
+        {t("jobs.actions.receiveParts")}
+      </Menu.Item>
+      <Menu.Item key="partstatus">
+        <Icon type="tool" />
+        {t("jobs.actions.partStatus")}
+      </Menu.Item>
+    </Menu>
+  );
 
   const columns = [
     {
@@ -76,12 +107,9 @@ export default function JobsPage({ loading, jobs }) {
       title: "Action",
       key: "action",
       render: (text, record) => (
-        <span>
-          Action 一 {record.ro_number}
-          <Divider type='vertical' />
-          <Divider type='vertical' />
-          More actions <Icon type='down' />
-        </span>
+        <Dropdown overlay={actionMenu} trigger={["click"]}>
+          <Icon type="ellipsis" />
+        </Dropdown>
       )
     }
   ];
@@ -97,12 +125,12 @@ export default function JobsPage({ loading, jobs }) {
 
   return (
     <div>
-      <Input name='searchCriteria' onChange={handleChange} />
+      <Input name="searchCriteria" onChange={handleChange} />
       <Table
         loading={loading}
         pagination={{ position: "bottom" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey='id'
+        rowKey="id"
         dataSource={jobs}
         onChange={handleTableChange}
       />

client/src/components/white-board-card/white-board-card.component.jsx

@@ -33,27 +33,27 @@ export default function WhiteBoardCard({ metadata }) {
     <Menu>
       <Menu.Item key="images">
         <Icon type="file-image" />
-        {t("whiteboard.viewJobImages")}
+        {t("jobs.actions.viewJobImages")}
       </Menu.Item>
       <Menu.Item key="printing">
         <Icon type="printer" />
-        {t("whiteboard.printCenter")}
+        {t("jobs.actions.printCenter")}
       </Menu.Item>
       <Menu.Item key="notes">
         <Icon type="edit" />
-        {t("whiteboard.notes")}
+        {t("jobs.actions.notes")}
       </Menu.Item>
       <Menu.Item key="postinvoices">
         <Icon type="shopping-cart" />
-        {t("whiteboard.postInvoices")}
+        {t("jobs.actions.postInvoices")}
       </Menu.Item>
       <Menu.Item key="receiveparts">
         <Icon type="inbox" />
-        {t("whiteboard.receiveParts")}
+        {t("jobs.actions.receiveParts")}
       </Menu.Item>
       <Menu.Item key="partstatus">
         <Icon type="tool" />
-        {t("whiteboard.partStatus")}
+        {t("jobs.actions.partStatus")}
       </Menu.Item>
     </Menu>
   );