Manage Profile Pages

2020-01-06 15:42:16 -08:00
parent 1e24f8679a
commit b51b2d2b76
16 changed files with 264 additions and 101 deletions
--- a/client/src/components/current-user-dropdown/current-user-dropdown.component.jsx
+++ b/client/src/components/current-user-dropdown/current-user-dropdown.component.jsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Dropdown, Menu, Icon, Avatar, Typography, Row, Col } from "antd";
+import { useTranslation } from "react-i18next";
+import i18next from "i18next";
+import { useQuery } from "@apollo/react-hooks";
+import { GET_CURRENT_USER } from "../../graphql/local.queries";
+import UserImage from "../../assets/User.svg";
+import AlertComponent from "../alert/alert.component";
+
+export default function CurrentUserDropdown() {
+  const { t } = useTranslation();
+  const { loading, error, data } = useQuery(GET_CURRENT_USER);
+
+  const handleMenuClick = e => {
+    console.log("e", e);
+    if (e.item.props.actiontype === "lang-select") {
+      i18next.changeLanguage(e.key, (err, t) => {
+        if (err)
+          return console.log("Error encountered when changing languages.", err);
+      });
+    }
+  };
+  const menu = (
+    <Menu mode="vertical" onClick={handleMenuClick}>
+      <Menu.Item>
+        <Link to="/manage/profile"> {t("menus.currentuser.profile")}</Link>
+      </Menu.Item>
+      <Menu.SubMenu
+        title={
+          <span>
+            <Icon type="global" />
+            <span>{t("menus.currentuser.languageselector")}</span>
+          </span>
+        }
+      >
+        <Menu.Item actiontype="lang-select" key="en_us">
+          {t("general.languages.english")}
+        </Menu.Item>
+        <Menu.Item actiontype="lang-select" key="fr">
+          {t("general.languages.french")}
+        </Menu.Item>
+        <Menu.Item actiontype="lang-select" key="es">
+          {t("general.languages.spanish")}
+        </Menu.Item>
+      </Menu.SubMenu>
+    </Menu>
+  );
+
+  if (loading) return null;
+  if (error) return <AlertComponent message={error.message} />;
+
+  const { currentUser } = data;
+
+  return (
+    <Dropdown overlay={menu}>
+      <Row>
+        <Col span={8}>
+          <Avatar size="large" alt="Avatar" src={UserImage} />
+        </Col>
+        <Col span={16}>
+          <Link to="/manage/profile">
+            {currentUser?.displayName ?? t("general.labels.unknown")}
+          </Link>
+        </Col>
+      </Row>
+    </Dropdown>
+  );
+}
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -1,51 +1,56 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { useApolloClient } from "@apollo/react-hooks";
-import { Menu, Icon } from "antd";
+import { Menu, Icon, Row, Col } from "antd";
 import "./header.styles.scss";

 import SignOut from "../sign-out/sign-out.component";
 import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
 import GlobalSearch from "../global-search/global-search.component";
-import LanguageSelector from "../language-selector/langauge-selector.component";
+import CurrentUserDropdown from "../current-user-dropdown/current-user-dropdown.component";

 export default ({ landingHeader, navItems, selectedNavItem }) => {
  const apolloClient = useApolloClient();

-
  const handleClick = e => {
    apolloClient.writeData({ data: { selectedNavItem: e.key } });
  };
  return (
-    <Menu
-      theme='dark'
-      className='header'
-      onClick={handleClick}
-      selectedKeys={selectedNavItem}
-      mode='horizontal'>
-      <Menu.Item>
-        <GlobalSearch />
-      </Menu.Item>
-      {navItems.map(navItem => (
-        <Menu.Item key={navItem.title}>
-          <Link to={navItem.path}>
-            {navItem.icontype ? <Icon type={navItem.icontype} /> : null}
-            {navItem.title}
-          </Link>
-        </Menu.Item>
-      ))}
+    <Row type="flex" justify="space-around">
+      <Col span={16}>
+        <Menu
+          theme="dark"
+          className="header"
+          onClick={handleClick}
+          selectedKeys={selectedNavItem}
+          mode="horizontal"
+        >
+          <Menu.Item>
+            <GlobalSearch />
+          </Menu.Item>
+          {navItems.map(navItem => (
+            <Menu.Item key={navItem.title}>
+              <Link to={navItem.path}>
+                {navItem.icontype ? <Icon type={navItem.icontype} /> : null}
+                {navItem.title}
+              </Link>
+            </Menu.Item>
+          ))}

-      {!landingHeader ? (
-        <Menu.Item>
-          <SignOut />
-        </Menu.Item>
-      ) : (
-        <Menu.Item>
-          <ManageSignInButton />
-        </Menu.Item>
-      )}
-
-      {!landingHeader ? <LanguageSelector /> : null}
-    </Menu>
+          {!landingHeader ? (
+            <Menu.Item>
+              <SignOut />
+            </Menu.Item>
+          ) : (
+            <Menu.Item>
+              <ManageSignInButton />
+            </Menu.Item>
+          )}
+        </Menu>
+      </Col>
+      <Col span={6} offset={2}>
+        {!landingHeader ? <CurrentUserDropdown /> : null}
+      </Col>
+    </Row>
  );
 };
--- a/client/src/components/language-selector/langauge-selector.component.jsx
+++ b/client/src/components/language-selector/langauge-selector.component.jsx
@@ -7,8 +7,6 @@ export default function LanguageSelector() {
  const { t } = useTranslation();

  const handleMenuClick = e => {
-    console.log("e", e);
-
    i18next.changeLanguage(e.key, (err, t) => {
      if (err)
        return console.log("Error encountered when changing languages.", err);
@@ -16,14 +14,14 @@ export default function LanguageSelector() {
  };
  const menu = (
    <Menu onClick={handleMenuClick}>
-      <Menu.Item key='en_us'>{t("general.languages.english")}</Menu.Item>
-      <Menu.Item key='fr'>{t("general.languages.french")}</Menu.Item>
-      <Menu.Item key='es'>{t("general.languages.spanish")}</Menu.Item>
+      <Menu.Item key="en_us">{t("general.languages.english")}</Menu.Item>
+      <Menu.Item key="fr">{t("general.languages.french")}</Menu.Item>
+      <Menu.Item key="es">{t("general.languages.spanish")}</Menu.Item>
    </Menu>
  );
  return (
    <Dropdown overlay={menu}>
-      <Icon type='global' />
+      <Icon type="global" />
    </Dropdown>
  );
 }
--- a/client/src/components/profile-content/profile-content.component.jsx
+++ b/client/src/components/profile-content/profile-content.component.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import AlertComponent from "../alert/alert.component";
+
+export default function ProfileContent({ sidebarSelection }) {
+  const { t } = useTranslation();
+
+  switch (sidebarSelection.key) {
+    case "profile":
+      return <div>Profile stuff</div>;
+    case "shop":
+      return <div>Shop stuff</div>;
+    default:
+      return (
+        <AlertComponent message={t("profile.errors.state")} type="error" />
+      );
+  }
+}
--- a/client/src/components/profile-sidebar/profile-sidebar.component.jsx
+++ b/client/src/components/profile-sidebar/profile-sidebar.component.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Layout, Menu, Icon } from "antd";
+
+export default function ProfileSideBar({
+  sidebarSelection,
+  setSidebarSelection
+}) {
+  const { t } = useTranslation();
+
+  const onMenuClick = e => {
+    setSidebarSelection({ ...sidebarSelection, key: e.key });
+  };
+
+  return (
+    <Layout.Sider>
+      <Menu
+        theme="dark"
+        selectedKeys={sidebarSelection.key}
+        onClick={onMenuClick}
+        mode="inline"
+      >
+        <Menu.Item key="profile">
+          <Icon type="user" />
+          <span>{t("menus.profilesidebar.profile")}</span>
+        </Menu.Item>
+        <Menu.Item key="shops">
+          <Icon type="bank" />
+          <span>{t("menus.profilesidebar.shops")}</span>
+        </Menu.Item>
+      </Menu>
+    </Layout.Sider>
+  );
+}
--- a/client/src/components/white-board-card/white-board-card.component.jsx
+++ b/client/src/components/white-board-card/white-board-card.component.jsx
@@ -31,28 +31,28 @@ export default function WhiteBoardCard({ metadata }) {

  const menu = (
    <Menu>
-      <Menu.Item key='images'>
-        <Icon type='file-image' />
+      <Menu.Item key="images">
+        <Icon type="file-image" />
        {t("whiteboard.viewJobImages")}
      </Menu.Item>
-      <Menu.Item key='printing'>
-        <Icon type='printer' />
+      <Menu.Item key="printing">
+        <Icon type="printer" />
        {t("whiteboard.printCenter")}
      </Menu.Item>
-      <Menu.Item key='notes'>
-        <Icon type='edit' />
+      <Menu.Item key="notes">
+        <Icon type="edit" />
        {t("whiteboard.notes")}
      </Menu.Item>
-      <Menu.Item key='postinvoices'>
-        <Icon type='shopping-cart' />
+      <Menu.Item key="postinvoices">
+        <Icon type="shopping-cart" />
        {t("whiteboard.postInvoices")}
      </Menu.Item>
-      <Menu.Item key='receiveparts'>
-        <Icon type='inbox' />
+      <Menu.Item key="receiveparts">
+        <Icon type="inbox" />
        {t("whiteboard.receiveParts")}
      </Menu.Item>
-      <Menu.Item key='partstatus'>
-        <Icon type='tool' />
+      <Menu.Item key="partstatus">
+        <Icon type="tool" />
        {t("whiteboard.partStatus")}
      </Menu.Item>
    </Menu>
@@ -72,28 +72,31 @@ export default function WhiteBoardCard({ metadata }) {
        bodyStyle={{ padding: 10 }}
        actions={[
          <Link to={`/manage/jobs/${metadata.id}`}>
-            <Icon type='eye' key='view' />
+            <Icon type="eye" key="view" />
          </Link>,
-          <Icon type='message' key='message' />,
+          <Icon type="message" key="message" />,
          <Dropdown overlay={menu} trigger={["click"]}>
-            <Icon type='ellipsis' />
+            <Icon type="ellipsis" />
          </Dropdown>
-        ]}>
+        ]}
+      >
        <Row>
          <Col span={6}>
-            <Avatar size='large' alt='Vehicle Image' src={CarImage} />
+            <Avatar size="large" alt="Vehicle Image" src={CarImage} />
          </Col>
          <Col span={18}>
            <Row>
              <WrappedSpan>
-                {`${metadata.vehicle?.v_model_yr ?? "N/A"} ${metadata.vehicle
-                  ?.v_make_desc ?? "N/A"} ${metadata.vehicle?.v_model_desc ??
-                  "N/A"}`}
+                {metadata.vehicle?.v_model_yr ?? t("general.labels.na")}{" "}
+                {metadata.vehicle?.v_make_desc ?? t("general.labels.na")}{" "}
+                {metadata.vehicle?.v_model_desc ?? t("general.labels.na")}
              </WrappedSpan>
            </Row>
            {metadata.vehicle?.v_vin ? (
              <Row>
-                <WrappedSpan>{`VIN: ${metadata.vehicle?.v_vin}`}</WrappedSpan>
+                <WrappedSpan>
+                  VIN: {metadata.vehicle?.v_vin ?? t("general.labels.na")}
+                </WrappedSpan>
              </Row>
            ) : null}
          </Col>
@@ -101,13 +104,11 @@ export default function WhiteBoardCard({ metadata }) {
        <Row>
          <Col span={12}>
            {t("general.labels.in")}:
-            <Moment format='MM/DD/YYYY'> {metadata.actual_in}</Moment>
+            <Moment format="MM/DD/YYYY">{metadata.actual_in}</Moment>
          </Col>
          <Col span={12}>
            {t("general.labels.out")}:
-            <Moment format='MM/DD/YYYY'>
-              {metadata.scheduled_completion}
-            </Moment>
+            <Moment format="MM/DD/YYYY">{metadata.scheduled_completion}</Moment>
          </Col>
        </Row>
      </Card>