Fixed production list sider shwoing on click by adding new component

client/src/components/production-list-columns/production-list-columns.alert.component.jsx

@@ -11,9 +11,9 @@ export default function ProductionListColumnAlert({ record }) {
 
   const [updateAlert] = useMutation(UPDATE_JOB);
 
-  const handleAlertToggle = () => {
+  const handleAlertToggle = (e) => {
     logImEXEvent("production_toggle_alert");
-
+    e.stopPropagation();
     updateAlert({
       variables: {
         jobId: record.id,

client/src/components/production-list-columns/production-list-columns.bodypriority.component.jsx

@@ -12,7 +12,7 @@ export default function ProductionListColumnBodyPriority({ record }) {
 
   const handleSetBodyPriority = (e) => {
     logImEXEvent("production_set_body_priority");
-
+    e.stopPropagation();
     const { key } = e;
     updateAlert({
       variables: {
@@ -33,19 +33,21 @@ export default function ProductionListColumnBodyPriority({ record }) {
     <Dropdown
       overlay={
         <Menu onClick={handleSetBodyPriority}>
-          <Menu.Item key='clearBodyPriority'>
+          <Menu.Item key="clearBodyPriority">
             {t("production.actions.bodypriority-clear")}
           </Menu.Item>
           <Menu.SubMenu
-            key='set'
+            key="set"
-            title={t("production.actions.bodypriority-set")}>
+            title={t("production.actions.bodypriority-set")}
+          >
             {new Array(9).fill().map((value, index) => (
               <Menu.Item key={index + 1}>{index + 1}</Menu.Item>
             ))}
           </Menu.SubMenu>
         </Menu>
       }
-      trigger={["contextMenu"]}>
+      trigger={["contextMenu"]}
+    >
       <div style={{ width: "100%", height: "19px" }}>
         {record.production_vars && record.production_vars.bodypriority}
       </div>

client/src/components/production-list-columns/production-list-columns.data.js

@@ -11,7 +11,17 @@ import ProductionListColumnPaintPriority from "./production-list-columns.paintpr
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionListColumnNote from "./production-list-columns.productionnote.component";
 
+
 export default [
+  {
+    title: i18n.t("jobs.actions.viewdetail"),
+    dataIndex: "viewdetail",
+    key: "viewdetail",
+    ellipsis: true,
+    render: (text, record) => (
+      <Link to={{search:`?selected=${record.id}`}} >{i18n.t("general.labels.view")}</Link>
+    ),
+  },
   {
     title: i18n.t("jobs.fields.ro_number"),
     dataIndex: "ro_number",

client/src/components/production-list-columns/production-list-columns.paintpriority.component.jsx

@@ -12,7 +12,7 @@ export default function ProductionListColumnPaintPriority({ record }) {
 
   const handleSetPaintPriority = (e) => {
     logImEXEvent("production_set_paint_priority");
-
+    e.stopPropagation();
     const { key } = e;
     updateAlert({
       variables: {

client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx

@@ -18,7 +18,7 @@ export default function ProductionListColumnProductionNote({ record }) {
 
   const handleSaveNote = (e) => {
     logImEXEvent("production_add_note");
-
+    e.stopPropagation();
     setVisible(false);
     updateAlert({
       variables: {
@@ -36,10 +36,12 @@ export default function ProductionListColumnProductionNote({ record }) {
   };
 
   const handleChange = (e) => {
+    e.stopPropagation();
     setNote(e.target.value);
   };
 
   const handleVisibleChange = (flag) => {
+  
     setVisible(flag);
     if (flag)
       setNote((record.production_vars && record.production_vars.note) || "");

client/src/components/production-list-columns/production-list-columns.status.component.jsx

@@ -16,7 +16,7 @@ export function ProductionListColumnStatus({ record, bodyshop }) {
 
   const handleSetStatus = (e) => {
     logImEXEvent("production_change_status");
-
+    e.stopPropagation();
     const { key } = e;
     updateJob({
       variables: {

client/src/components/production-list-detail/production-list-detail.component.jsx

@@ -6,27 +6,39 @@ import { DateFormatter } from "../../utils/DateFormatter";
 import PartsPieGraph from "../parts-status-pie/parts-status-pie.component";
 import Barcode from "react-barcode";
 import ProductionRemoveButton from "../production-remove-button/production-remove-button.component";
+import queryString from "query-string";
+import { useHistory, useLocation } from "react-router-dom";
+
+export default function ProductionListDetail({ jobs }) {
+  const search = queryString.parse(useLocation().search);
+  const history = useHistory();
+  const { selected } = search;
 
-export default function ProductionListDetail({ selected, setSelected, jobs }) {
   const { t } = useTranslation();
   const theJob = jobs.find((j) => j.id === selected) || {};
 
+  const handleClose = () => {
+    delete search.selected;
+    history.push({ search: queryString.stringify(search) });
+  };
+
   return (
     <Drawer
       title={t("production.labels.jobdetail")}
-      placement='right'
+      placement="right"
       width={"33%"}
-      onClose={() => setSelected(null)}
+      onClose={handleClose}
-      visible={!!selected}>
+      visible={!!selected}
+    >
       <div>
         <Barcode
           value={theJob.id || ""}
-          background='transparent'
+          background="transparent"
           displayValue={false}
           width={1}
           height={15}
         />
-        <Descriptions bordered size='small' column={1}>
+        <Descriptions bordered size="small" column={1}>
           <Descriptions.Item label={t("jobs.fields.ro_number")}>
             {theJob.ro_number || ""}
           </Descriptions.Item>

client/src/components/production-list-table/production-list-table.component.jsx

@@ -33,7 +33,6 @@ export function ProductionListTable({
       filteredInfo: { text: "" },
     }
   );
-  const [selected, setSelected] = useState(null);
   const { t } = useTranslation();
   const Now = new Date();
   const handleTableChange = (pagination, filters, sorter) => {
@@ -67,7 +66,7 @@ export function ProductionListTable({
 
   const headerItem = (col) => (
     <Dropdown
-      className='prod-header-dropdown'
+      className="prod-header-dropdown"
       overlay={
         <Menu onClick={removeColumn}>
           <Menu.Item key={col.key}>
@@ -75,7 +74,8 @@ export function ProductionListTable({
           </Menu.Item>
         </Menu>
       }
-      trigger={["contextMenu"]}>
+      trigger={["contextMenu"]}
+    >
       <span>{col.title}</span>
     </Dropdown>
   );
@@ -115,7 +115,8 @@ export function ProductionListTable({
       <Button
         onClick={() => {
           if (refetch) refetch();
-        }}>
+        }}
+      >
         <SyncOutlined />
       </Button>
       <Input
@@ -126,29 +127,26 @@ export function ProductionListTable({
     </div>
   );
 
-  const handleSelectRecord = (record) => {
+  // const handleSelectRecord = (record) => {
-    if (selected !== record.id) {
+  //   if (selected !== record.id) {
-      setSelected(record.id);
+  //     setSelected(record.id);
-    } else {
+  //   } else {
-      setSelected(null);
+  //     setSelected(null);
-    }
+  //   }
-  };
+  // };
 
   if (!!!columns) return <div>No columns found.</div>;
 
   return (
     <div>
-      <ProductionListDetail
+      <ProductionListDetail jobs={dataSource} />
-        selected={selected}
-        setSelected={setSelected}
-        jobs={dataSource}
-      />
       <ReactDragListView.DragColumn
         onDragEnd={onDragEnd}
-        nodeSelector='th'
+        nodeSelector="th"
-        handleSelector='.prod-header-dropdown'>
+        handleSelector=".prod-header-dropdown"
+      >
         <Table
-          size='small'
+          size="small"
           pagination={false}
           components={{
             header: {
@@ -168,15 +166,8 @@ export function ProductionListTable({
               }),
             };
           })}
-          rowKey='id'
+          rowKey="id"
           loading={loading}
-          onRow={(record, rowIndex) => {
-            return {
-              onClick: (event) => {
-                handleSelectRecord(record);
-              },
-            };
-          }}
           dataSource={dataSource}
           onChange={handleTableChange}
           rowClassName={(record, index) => {

server.js

@@ -94,12 +94,13 @@ app.post("/utils/time", utils.servertime);
 //Serve React App if in Production
 if (process.env.NODE_ENV === "production") {
   app.use(express.static(path.join(__dirname, "client/build")));
+  app.use(express.static(path.join(__dirname, "admin/build")));
 
   app.get("/service-worker.js", (req, res) => {
     res.sendFile(path.resolve(__dirname, "..", "build", "service-worker.js"));
   });
 
-  app.get("/admin/*", function (req, res) {
+  app.get("/admin*", function (req, res) {
     res.sendFile(path.join(__dirname, "admin/build", "index.html"));
   });