Further UI Updates

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

@@ -1,12 +1,15 @@
-import { SyncOutlined } from "@ant-design/icons";
+import { EyeFilled, SyncOutlined } from "@ant-design/icons";
 import {
   Button,
+  Card,
   Checkbox,
   Descriptions,
+  Drawer,
+  Grid,
   Input,
+  PageHeader,
   Space,
   Table,
-  Typography,
 } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
@@ -45,7 +48,21 @@ export function BillsListTableComponent({
 }) {
   const { t } = useTranslation();
   const [selectedBillLinesByBill, setSelectedBillLinesByBill] = useState({});
+  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 [state, setState] = useState({
     sortedInfo: {},
   });
@@ -54,6 +71,34 @@ export function BillsListTableComponent({
   const Templates = TemplateList("bill");
   const bills = billsQuery.data ? billsQuery.data.bills : [];
   const { refetch } = billsQuery;
+  const recordActions = (record, showView = false) => (
+    <Space wrap>
+      {showView && (
+        <Button onClick={() => handleOnRowClick(record)}>
+          <EyeFilled />
+        </Button>
+      )}
+      {record.exported ? (
+        <Button disabled>{t("bills.actions.edit")}</Button>
+      ) : (
+        <Link
+          to={`/manage/bills?billid=${record.id}&vendorid=${record.vendorid}`}
+        >
+          <Button>{t("bills.actions.edit")}</Button>
+        </Link>
+      )}
+      <BillDeleteButton bill={record} />
+      {record.isinhouse && (
+        <PrintWrapperComponent
+          templateObject={{
+            name: Templates.inhouse_invoice.key,
+            variables: { id: record.id },
+          }}
+          messageObject={{ subject: Templates.inhouse_invoice.subject }}
+        />
+      )}
+    </Space>
+  );
   const columns = [
     {
       title: t("bills.fields.vendorname"),
@@ -116,31 +161,10 @@ export function BillsListTableComponent({
       title: t("general.labels.actions"),
       dataIndex: "actions",
       key: "actions",
-      render: (text, record) => (
-        <Space wrap>
-          {record.exported ? (
-            <Button disabled>{t("bills.actions.edit")}</Button>
-          ) : (
-            <Link
-              to={`/manage/bills?billid=${record.id}&vendorid=${record.vendorid}`}
-            >
-              <Button>{t("bills.actions.edit")}</Button>
-            </Link>
-          )}
-          <BillDeleteButton bill={record} />
-          {record.isinhouse && (
-            <PrintWrapperComponent
-              templateObject={{
-                name: Templates.inhouse_invoice.key,
-                variables: { id: record.id },
-              }}
-              messageObject={{ subject: Templates.inhouse_invoice.subject }}
-            />
-          )}
-        </Space>
-      ),
+      render: (text, record) => recordActions(record, true),
     },
   ];
+  const selectedBillRecord = bills.find((r) => r.id === selectedBill);
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
@@ -240,7 +264,6 @@ export function BillsListTableComponent({
         ),
       },
     ];
-
     const handleOnBillrowclick = (selectedRows) => {
       setSelectedBillLinesByBill({
         ...selectedBillLinesByBill,
@@ -249,10 +272,14 @@ export function BillsListTableComponent({
     };
 
     return (
-      <div>
-        <Typography.Title level={3}>{`${t("bills.fields.invoice_number")} ${
-          record.invoice_number
-        }`}</Typography.Title>
+      <>
+        <PageHeader
+          title={
+            record &&
+            `${t("bills.fields.invoice_number")} ${record.invoice_number}`
+          }
+          extra={recordActions(record)}
+        />
         <Descriptions>
           <Descriptions.Item label={t("bills.fields.federal_tax_rate")}>
             {`${record.federal_tax_rate}%` || ""}
@@ -301,9 +328,7 @@ export function BillsListTableComponent({
           {t("bills.actions.return")}
         </Button>
         <Table
-          size="small"
           scroll={{ x: "50%", y: "40rem" }}
-          pagination={{ position: "top", defaultPageSize: 25 }}
           columns={columns}
           rowKey="id"
           dataSource={record.billlines}
@@ -318,94 +343,77 @@ export function BillsListTableComponent({
             type: "checkbox",
           }}
         />
-      </div>
+      </>
     );
   };
 
   return (
-    <div>
-      <Typography.Title level={4}>{t("bills.labels.bills")}</Typography.Title>
+    <Card
+      title={t("bills.labels.bills")}
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          {job ? (
+            <>
+              <Button
+                onClick={() => {
+                  setBillEnterContext({
+                    actions: { refetch: billsQuery.refetch },
+                    context: {
+                      job,
+                    },
+                  });
+                }}
+              >
+                {t("jobs.actions.postbills")}
+              </Button>
+              <Button
+                onClick={() => {
+                  setReconciliationContext({
+                    actions: { refetch: billsQuery.refetch },
+                    context: {
+                      job,
+                      bills: (billsQuery.data && billsQuery.data.bills) || [],
+                    },
+                  });
+                }}
+              >
+                {t("jobs.actions.reconcile")}
+              </Button>
+            </>
+          ) : null}
+
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onChange={(e) => {
+              e.preventDefault();
+            }}
+          />
+        </Space>
+      }
+    >
+      <Drawer
+        placement="right"
+        onClose={() => handleOnRowClick(null)}
+        visible={selectedBill}
+        //getContainer={false}
+        style={{ position: "absolute" }}
+        closable
+        width={drawerPercentage}
+      >
+        {selectedBillRecord && rowExpander(selectedBillRecord)}
+      </Drawer>
       <Table
         loading={billsQuery.loading}
-        size="small"
-        title={() => (
-          <div className="imex-table-header">
-            <Button onClick={() => refetch()}>
-              <SyncOutlined />
-            </Button>
-            {job ? (
-              <div>
-                <Button
-                  onClick={() => {
-                    setBillEnterContext({
-                      actions: { refetch: billsQuery.refetch },
-                      context: {
-                        job,
-                      },
-                    });
-                  }}
-                >
-                  {t("jobs.actions.postbills")}
-                </Button>
-                <Button
-                  onClick={() => {
-                    setReconciliationContext({
-                      actions: { refetch: billsQuery.refetch },
-                      context: {
-                        job,
-                        bills: (billsQuery.data && billsQuery.data.bills) || [],
-                      },
-                    });
-                  }}
-                >
-                  {t("jobs.actions.reconcile")}
-                </Button>
-              </div>
-            ) : null}
-
-            <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={bills}
         onChange={handleTableChange}
-        expandable={{
-          expandedRowKeys: [selectedBill],
-          onExpand: (expanded, record) => {
-            handleOnRowClick(expanded ? record : null);
-          },
-        }}
-        rowSelection={{
-          onSelect: (record) => {
-            handleOnRowClick(record);
-          },
-          selectedRowKeys: [selectedBill],
-          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(