Added dashboard grid components

2020-03-03 15:28:56 -08:00
parent 64595664c9
commit dc59d6bd7e
8 changed files with 194 additions and 9 deletions
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -0,0 +1,141 @@
+import { BackTop, Layout } from "antd";
+import React, { lazy, Suspense, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Route } from "react-router";
+import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
+import FooterComponent from "../../components/footer/footer.component";
+//Component Imports
+import HeaderContainer from "../../components/header/header.container";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import "./manage.page.styles.scss";
+
+const ManageRootPage = lazy(() =>
+  import("../manage-root/manage-root.page.container")
+);
+const JobsPage = lazy(() => import("../jobs/jobs.page"));
+const JobsDetailPage = lazy(() =>
+  import("../jobs-detail/jobs-detail.page.container")
+);
+const ProfilePage = lazy(() => import("../profile/profile.container.page"));
+const JobsDocumentsPage = lazy(() =>
+  import("../../components/jobs-documents/jobs-documents.container")
+);
+const JobsAvailablePage = lazy(() =>
+  import("../jobs-available/jobs-available.page.container")
+);
+const ChatWindowContainer = lazy(() =>
+  import("../../components/chat-overlay/chat-overlay.container")
+);
+const ScheduleContainer = lazy(() =>
+  import("../schedule/schedule.page.container")
+);
+const VehiclesContainer = lazy(() =>
+  import("../vehicles/vehicles.page.container")
+);
+const VehiclesDetailContainer = lazy(() =>
+  import("../vehicles-detail/vehicles-detail.page.container")
+);
+const OwnersContainer = lazy(() => import("../owners/owners.page.container"));
+const OwnersDetailContainer = lazy(() =>
+  import("../owners-detail/owners-detail.page.container")
+);
+const ShopPage = lazy(() => import("../shop/shop.page.component"));
+const ShopVendorPageContainer = lazy(() =>
+  import("../shop-vendor/shop-vendor.page.container")
+);
+
+const EmailOverlayContainer = lazy(() =>
+  import("../../components/email-overlay/email-overlay.container.jsx")
+);
+
+const { Header, Content, Footer } = Layout;
+
+export default function Manage({ match }) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    document.title = t("titles.app");
+  }, [t]);
+
+  return (
+    <Layout style={{ minHeight: "100vh" }}>
+      <Header>
+        <HeaderContainer />
+      </Header>
+      <Layout>
+        <Content
+          className="content-container"
+          style={{ padding: "0em 4em 4em" }}
+        >
+          <ErrorBoundary>
+            <Suspense
+              fallback={
+                <LoadingSpinner message={t("general.labels.loadingapp")} />
+              }
+            >
+              <EmailOverlayContainer />
+              <Route exact path={`${match.path}`} component={ManageRootPage} />
+              <Route exact path={`${match.path}/jobs`} component={JobsPage} />
+              <Route
+                exact
+                path={`${match.path}/jobs/:jobId`}
+                component={JobsDetailPage}
+              />
+              <Route
+                exact
+                path={`${match.path}/jobs/:jobId/documents`}
+                component={JobsDocumentsPage}
+              />
+              <Route
+                exact
+                path={`${match.path}/profile`}
+                component={ProfilePage}
+              />
+              <Route
+                exact
+                path={`${match.path}/vehicles`}
+                component={VehiclesContainer}
+              />
+              <Route
+                exact
+                path={`${match.path}/vehicles/:vehId`}
+                component={VehiclesDetailContainer}
+              />
+              <Route
+                exact
+                path={`${match.path}/owners`}
+                component={OwnersContainer}
+              />
+              <Route
+                exact
+                path={`${match.path}/owners/:ownerId`}
+                component={OwnersDetailContainer}
+              />
+              <Route
+                exact
+                path={`${match.path}/schedule`}
+                component={ScheduleContainer}
+              />
+              <Route
+                exact
+                path={`${match.path}/available`}
+                component={JobsAvailablePage}
+              />
+              <Route exact path={`${match.path}/shop/`} component={ShopPage} />
+              <Route
+                exact
+                path={`${match.path}/shop/vendors`}
+                component={ShopVendorPageContainer}
+              />
+            </Suspense>
+          </ErrorBoundary>
+        </Content>
+      </Layout>
+      <Footer>
+        <FooterComponent />
+      </Footer>
+      <ChatWindowContainer />
+      <BackTop />
+    </Layout>
+  );
+}