Further UI Updates

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -1,5 +1,15 @@
-import { SyncOutlined } from "@ant-design/icons";
-import { Button, Checkbox, Input, Space, Table, Typography } from "antd";
+import { EyeFilled, SyncOutlined } from "@ant-design/icons";
+import {
+  Button,
+  Card,
+  Checkbox,
+  Drawer,
+  Grid,
+  Input,
+  PageHeader,
+  Space,
+  Table,
+} from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -40,6 +50,21 @@ export function PartsOrderListTableComponent({
   handleOnRowClick,
   setPartsReceiveContext,
 }) {
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const bpoints = {
+    xs: "100%",
+    sm: "100%",
+    md: "100%",
+    lg: "75%",
+    xl: "75%",
+    xxl: "65%",
+  };
+  const drawerPercentage = selectedBreakpoint
+    ? bpoints[selectedBreakpoint[0]]
+    : "100%";
   const responsibilityCenters = bodyshop.md_responsibility_centers;
   const Templates = TemplateList("partsorder");
   const { t } = useTranslation();
@@ -51,6 +76,86 @@ export function PartsOrderListTableComponent({
 
   const parts_orders = billsQuery.data ? billsQuery.data.parts_orders : [];
   const { refetch } = billsQuery;
+
+  const recordActions = (record, showView = false) => (
+    <Space wrap>
+      {showView && (
+        <Button onClick={() => handleOnRowClick(record)}>
+          <EyeFilled />
+        </Button>
+      )}
+      <Button
+        disabled={jobRO || record.return}
+        onClick={() => {
+          logImEXEvent("parts_order_receive_bill");
+
+          setPartsReceiveContext({
+            actions: { refetch: refetch },
+            context: {
+              jobId: job.id,
+              job: job,
+              partsorderlines: record.parts_order_lines.map((pol) => {
+                return {
+                  joblineid: pol.job_line_id,
+                  line_desc: pol.line_desc,
+                  quantity: pol.quantity,
+                };
+              }),
+            },
+          });
+        }}
+      >
+        {t("parts_orders.actions.receive")}
+      </Button>
+      <Button
+        disabled={jobRO}
+        onClick={() => {
+          logImEXEvent("parts_order_receive_bill");
+
+          setBillEnterContext({
+            actions: { refetch: refetch },
+            context: {
+              job: job,
+              bill: {
+                vendorid: record.vendor.id,
+                is_credit_memo: record.return,
+                billlines: record.parts_order_lines.map((pol) => {
+                  return {
+                    joblineid: pol.job_line_id,
+                    line_desc: pol.line_desc,
+                    quantity: pol.quantity,
+
+                    actual_price: pol.act_price,
+                    cost_center: pol.jobline.part_type
+                      ? responsibilityCenters.defaults.costs[
+                          pol.jobline.part_type
+                        ] || null
+                      : null,
+                  };
+                }),
+              },
+            },
+          });
+        }}
+      >
+        {t("parts_orders.actions.receivebill")}
+      </Button>
+      <PrintWrapper
+        templateObject={{
+          name: record.return
+            ? Templates.parts_return_slip.key
+            : Templates.parts_order.key,
+          variables: { id: record.id },
+        }}
+        messageObject={{
+          subject: record.return
+            ? Templates.parts_return_slip.subject
+            : Templates.parts_order.subject,
+        }}
+      />
+    </Space>
+  );
+
   const columns = [
     {
       title: t("vendors.fields.name"),
@@ -105,79 +210,7 @@ export function PartsOrderListTableComponent({
       title: t("general.labels.actions"),
       dataIndex: "actions",
       key: "actions",
-      render: (text, record) => (
-        <Space wrap>
-          <Button
-            disabled={jobRO || record.return}
-            onClick={() => {
-              logImEXEvent("parts_order_receive_bill");
-
-              setPartsReceiveContext({
-                actions: { refetch: refetch },
-                context: {
-                  jobId: job.id,
-                  job: job,
-                  partsorderlines: record.parts_order_lines.map((pol) => {
-                    return {
-                      joblineid: pol.job_line_id,
-                      line_desc: pol.line_desc,
-                      quantity: pol.quantity,
-                    };
-                  }),
-                },
-              });
-            }}
-          >
-            {t("parts_orders.actions.receive")}
-          </Button>
-          <Button
-            disabled={jobRO}
-            onClick={() => {
-              logImEXEvent("parts_order_receive_bill");
-
-              setBillEnterContext({
-                actions: { refetch: refetch },
-                context: {
-                  job: job,
-                  bill: {
-                    vendorid: record.vendor.id,
-                    is_credit_memo: record.return,
-                    billlines: record.parts_order_lines.map((pol) => {
-                      return {
-                        joblineid: pol.job_line_id,
-                        line_desc: pol.line_desc,
-                        quantity: pol.quantity,
-
-                        actual_price: pol.act_price,
-                        cost_center: pol.jobline.part_type
-                          ? responsibilityCenters.defaults.costs[
-                              pol.jobline.part_type
-                            ] || null
-                          : null,
-                      };
-                    }),
-                  },
-                },
-              });
-            }}
-          >
-            {t("parts_orders.actions.receivebill")}
-          </Button>
-          <PrintWrapper
-            templateObject={{
-              name: record.return
-                ? Templates.parts_return_slip.key
-                : Templates.parts_order.key,
-              variables: { id: record.id },
-            }}
-            messageObject={{
-              subject: record.return
-                ? Templates.parts_return_slip.subject
-                : Templates.parts_order.subject,
-            }}
-          />
-        </Space>
-      ),
+      render: (text, record) => recordActions(record, true),
     },
   ];
 
@@ -280,89 +313,70 @@ export function PartsOrderListTableComponent({
         dataIndex: "actions",
         key: "actions",
         render: (text, record) => (
-          <div>
-            <PartsOrderLineBackorderButton
-              disabled={jobRO}
-              partsOrderStatus={record.status}
-              partsLineId={record.id}
-              jobLineId={record.job_line_id}
-            />
-          </div>
+          <PartsOrderLineBackorderButton
+            disabled={jobRO}
+            partsOrderStatus={record.status}
+            partsLineId={record.id}
+            jobLineId={record.job_line_id}
+          />
         ),
       },
     ];
 
     return (
-      <div style={{ margin: ".5rem" }}>
+      <>
+        <PageHeader
+          title={record && `${record.vendor.name} - ${record.order_number}`}
+          extra={recordActions(record)}
+        />
         <Table
-          size="small"
-          scroll={{ x: "50%", y: "40rem" }}
+          scroll={{ x: true, y: "50rem" }}
           columns={columns}
           rowKey="id"
           dataSource={record.parts_order_lines}
         />
-      </div>
+      </>
     );
   };
 
   return (
-    <div>
-      <Typography.Title level={4}>
-        {t("parts_orders.labels.parts_orders")}
-      </Typography.Title>
+    <Card
+      title={t("parts_orders.labels.parts_orders")}
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onChange={(e) => {
+              e.preventDefault();
+            }}
+          />
+        </Space>
+      }
+    >
       <PartsReceiveModalContainer />
+      <Drawer
+        placement="right"
+        onClose={() => handleOnRowClick(null)}
+        visible={selectedpartsorder}
+        //getContainer={false}
+        style={{ position: "absolute" }}
+        closable
+        width={drawerPercentage}
+      >
+        {selectedPartsOrderRecord && rowExpander(selectedPartsOrderRecord)}
+      </Drawer>
       <Table
         loading={billsQuery.loading}
-        size="small"
-        title={() => (
-          <div className="imex-table-header">
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
-
-            <div className="imex-table-header__search">
-              <Input.Search
-                placeholder={t("general.labels.search")}
-                onChange={(e) => {
-                  e.preventDefault();
-                }}
-              />
-            </div>
-          </div>
-        )}
-        scroll={{ x: "50%", y: "40rem" }}
-        expandedRowRender={rowExpander}
-        pagination={{ position: "top", defaultPageSize: 25 }}
+        scroll={{ x: true, y: "50rem" }}
         columns={columns}
         rowKey="id"
         dataSource={parts_orders}
         onChange={handleTableChange}
-        expandable={{
-          expandedRowKeys: [selectedpartsorder],
-          onExpand: (expanded, record) => {
-            handleOnRowClick(expanded ? record : null);
-          },
-        }}
-        rowSelection={{
-          onSelect: (record) => {
-            handleOnRowClick(record);
-          },
-          selectedRowKeys: [selectedpartsorder],
-          type: "radio",
-        }}
-        onRow={(record, rowIndex) => {
-          return {
-            onClick: (event) => {
-              handleOnRowClick(record);
-            }, // click row
-            onDoubleClick: (event) => {}, // double click row
-            onContextMenu: (event) => {}, // right button click row
-            onMouseEnter: (event) => {}, // mouse enter row
-            onMouseLeave: (event) => {}, // mouse leave row
-          };
-        }}
       />
-    </div>
+    </Card>
   );
 }
 export default connect(