UI Updates & Bill Entering

client/src/pages/scoreboard/scoreboard.page.component.jsx

@@ -1,10 +0,0 @@
-import React from "react";
-import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
-
-export default function ProductionBoardComponent({ scoreboardSubscription }) {
-  return (
-    <div>
-      <ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
-    </div>
-  );
-}

client/src/pages/scoreboard/scoreboard.page.container.jsx

@@ -7,7 +7,7 @@ import {
   setSelectedHeader,
 } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import ScoreboardPageComponent from "./scoreboard.page.component";
+import ScoreboardDisplay from "../../components/scoreboard-display/scoreboard-display.component";
 import { useSubscription } from "@apollo/client";
 import { SUBSCRIPTION_SCOREBOARD } from "../../graphql/scoreboard.queries";
 import moment from "moment";
@@ -45,9 +45,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
 
   return (
     <RbacWrapper action="scoreboard:view">
-      <ScoreboardPageComponent
-        scoreboardSubscription={scoreboardSubscription}
-      />
+      <ScoreboardDisplay scoreboardSubscription={scoreboardSubscription} />
     </RbacWrapper>
   );
 }

client/src/pages/shop-vendor/shop-vendor.page.component.jsx

@@ -1,28 +1,45 @@
-import { Col, Row } from "antd";
+import { Drawer, Grid } from "antd";
+import queryString from "query-string";
 import React from "react";
+import { useHistory, useLocation } from "react-router-dom";
 import VendorsFormContainer from "../../components/vendors-form/vendors-form.container";
 import VendorsListContainer from "../../components/vendors-list/vendors-list.container";
 
-const listSpan = {
-  md: { span: 24 },
-  lg: { span: 8 },
-};
-const formSapn = {
-  md: { span: 24 },
-  lg: { span: 16 },
-};
-
 export default function ShopVendorPageComponent() {
+  const search = queryString.parse(useLocation().search);
+  const { selectedvendor } = search;
+  const history = useHistory();
+
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const bpoints = {
+    xs: "100%",
+    sm: "100%",
+    md: "100%",
+    lg: "50%",
+    xl: "50%",
+    xxl: "45%",
+  };
+  const drawerPercentage = selectedBreakpoint
+    ? bpoints[selectedBreakpoint[0]]
+    : "100%";
+
   return (
     <div>
-      <Row gutter={[16, 16]}>
-        <Col {...listSpan}>
-          <VendorsListContainer />
-        </Col>
-        <Col {...formSapn}>
-          <VendorsFormContainer />
-        </Col>
-      </Row>
+      <VendorsListContainer />
+
+      <Drawer
+        width={drawerPercentage}
+        onClose={() => {
+          delete search.selectedvendor;
+          history.push({ search: queryString.stringify(search) });
+        }}
+        visible={selectedvendor}
+      >
+        <VendorsFormContainer />
+      </Drawer>
     </div>
   );
 }

client/src/pages/temporary-docs/temporary-docs.component.jsx

@@ -12,14 +12,11 @@ export default function TemporaryDocsComponent() {
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <div>
-      <div>Buttons to move and assign things.</div>
-      <JobsDocumentsComponent
-        data={data ? data.documents : []}
-        jobId={null}
-        billId={null}
-        refetch={refetch}
-      />
-    </div>
+    <JobsDocumentsComponent
+      data={data ? data.documents : []}
+      jobId={null}
+      billId={null}
+      refetch={refetch}
+    />
   );
 }