UI Updates & Bill Entering

client/src/components/bill-detail-edit/bill-detail-edit.container.jsx

@@ -1,10 +1,10 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Button, Form, PageHeader, Popconfirm } from "antd";
+import { Button, Drawer, Form, Grid, PageHeader, Popconfirm } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
+import { useLocation, useHistory } from "react-router-dom";
 import {
   INSERT_NEW_BILL_LINES,
   UPDATE_BILL_LINE,
@@ -17,6 +17,7 @@ import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 
 export default function BillDetailEditcontainer() {
   const search = queryString.parse(useLocation().search);
+  const history = useHistory();
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [visible, setVisible] = useState(false);
@@ -25,6 +26,22 @@ export default function BillDetailEditcontainer() {
   const [insertBillLine] = useMutation(INSERT_NEW_BILL_LINES);
   const [updateBillLine] = useMutation(UPDATE_BILL_LINE);
 
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const bpoints = {
+    xs: "100%",
+    sm: "100%",
+    md: "100%",
+    lg: "80%",
+    xl: "80%",
+    xxl: "70%",
+  };
+  const drawerPercentage = selectedBreakpoint
+    ? bpoints[selectedBreakpoint[0]]
+    : "100%";
+
   const { loading, error, data, refetch } = useQuery(QUERY_BILL_BY_PK, {
     variables: { billid: search.billid },
     skip: !!!search.billid,
@@ -111,47 +128,59 @@ export default function BillDetailEditcontainer() {
   const exported = data && data.bills_by_pk && data.bills_by_pk.exported;
 
   return (
-    <LoadingSkeleton loading={loading}>
-      <PageHeader
-        title={
-          data &&
-          `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
-        }
-        extra={
-          <Popconfirm
-            visible={visible}
-            onConfirm={() => form.submit()}
-            onCancel={() => setVisible(false)}
-            okButtonProps={{ loading: updateLoading }}
-            title={t("bills.labels.editadjwarning")}
+    <Drawer
+      width={drawerPercentage}
+      onClose={() => {
+        delete search.billid;
+        history.push({ search: queryString.stringify(search) });
+      }}
+      visible={search.billid}
+    >
+      {loading && <LoadingSkeleton />}
+      {!loading && (
+        <>
+          <PageHeader
+            title={
+              data &&
+              `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
+            }
+            extra={
+              <Popconfirm
+                visible={visible}
+                onConfirm={() => form.submit()}
+                onCancel={() => setVisible(false)}
+                okButtonProps={{ loading: updateLoading }}
+                title={t("bills.labels.editadjwarning")}
+              >
+                <Button
+                  htmlType="submit"
+                  disabled={exported}
+                  onClick={handleSave}
+                  loading={updateLoading}
+                  type="primary"
+                >
+                  {t("general.actions.save")}
+                </Button>
+              </Popconfirm>
+            }
+          />
+          <Form
+            form={form}
+            onFinish={handleFinish}
+            initialValues={transformData(data)}
+            layout="vertical"
           >
-            <Button
-              htmlType="submit"
-              disabled={exported}
-              onClick={handleSave}
-              loading={updateLoading}
-              type="primary"
-            >
-              {t("general.actions.save")}
-            </Button>
-          </Popconfirm>
-        }
-      />
-      <Form
-        form={form}
-        onFinish={handleFinish}
-        initialValues={transformData(data)}
-        layout="vertical"
-      >
-        <BillFormContainer form={form} billEdit disabled={exported} />
-        <JobDocumentsGallery
-          jobId={data ? data.bills_by_pk.jobid : null}
-          billId={search.billid}
-          documentsList={data ? data.bills_by_pk.documents : []}
-          billsCallback={refetch}
-        />
-      </Form>
-    </LoadingSkeleton>
+            <BillFormContainer form={form} billEdit disabled={exported} />
+            <JobDocumentsGallery
+              jobId={data ? data.bills_by_pk.jobid : null}
+              billId={search.billid}
+              documentsList={data ? data.bills_by_pk.documents : []}
+              billsCallback={refetch}
+            />
+          </Form>
+        </>
+      )}
+    </Drawer>
   );
 }