WIP Whiteboard Changes

client/src/components/white-board-card/white-board-card.component.jsx

@@ -1,59 +1,75 @@
 import React from "react";
-import { Skeleton, Switch, Card, Icon, Avatar } from "antd";
+import { Link } from "react-router-dom";
+import { Menu, Dropdown, Card, Icon, Avatar, Button } from "antd";
 
-const { Meta } = Card;
+export default function WhiteBoardCard({ metadata }) {
+  // const {
+  //   onClick,
+  //   className,
+  //   name,
+  //   cardStyle,
+  //   body,
+  //   dueOn,
+  //   cardColor,
+  //   subTitle,
+  //   tagStyle,
+  //   escalationText,
+  //   tags,
+  //   showDeleteButton,
+  //   onDelete
+  // } = this.props;
+  const menu = (
+    <Menu>
+      <Menu.Item key='images'>
+        <Icon type='file-image' />
+        View Job Images
+      </Menu.Item>
+      <Menu.Item key='printing'>
+        <Icon type='printer' />
+        Printing
+      </Menu.Item>
+      <Menu.Item key='notes'>
+        <Icon type='edit' />
+        Job Notes
+      </Menu.Item>
+      <Menu.Item key='postinvoices'>
+        <Icon type='shopping-cart' />
+        Post Invoices
+      </Menu.Item>
+      <Menu.Item key='receiveparts'>
+        <Icon type='inbox' />
+        Receive Parts
+      </Menu.Item>
+      <Menu.Item key='partstatus'>
+        <Icon type='tool' />
+        Parts Status
+      </Menu.Item>
+    </Menu>
+  );
 
-class WhiteBoardCard extends React.Component {
-  state = {
-    loading: true
-  };
-
-  onChange = checked => {
-    this.setState({ loading: !checked });
-  };
-
-  render() {
-    const { loading } = this.state;
-    // const {
-    //   onClick,
-    //   className,
-    //   name,
-    //   cardStyle,
-    //   body,
-    //   dueOn,
-    //   cardColor,
-    //   subTitle,
-    //   tagStyle,
-    //   escalationText,
-    //   tags,
-    //   showDeleteButton,
-    //   onDelete
-    // } = this.props;
-
-    return (
-      <div>
-        <Card
-          style={{ width: 300, marginTop: 16 }}
-          actions={[
-            <Icon type="setting" key="setting" />,
-            <Icon type="edit" key="edit" />,
-            <Icon type="ellipsis" key="ellipsis" />,
-            <Switch checked={!loading} onChange={this.onChange} />
-          ]}
-        >
-          <Skeleton loading={loading} avatar active>
-            <Meta
-              avatar={
-                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-              }
-              title="Card title"
-              description="This is the description"
-            />
-          </Skeleton>
-        </Card>
-      </div>
-    );
-  }
+  return (
+    <div>
+      <Card
+        title={
+          (metadata.ro_number ?? metadata.est_number) +
+          " | " +
+          (metadata.owner?.first_name ?? "") +
+          " " +
+          (metadata.owner?.last_name ?? "")
+        }
+        style={{ width: 300, marginTop: 10 }}
+        actions={[
+          <Link to={`/manage/jobs/${metadata.id}`}>
+            <Icon type='eye' key='view' />
+          </Link>,
+          <Icon type='message' key='message' />,
+          <Dropdown overlay={menu} trigger={["click"]}>
+            <Icon type='ellipsis' />
+          </Dropdown>
+        ]}>
+        <Avatar alt='Job' />
+        This is the card data.
+      </Card>
+    </div>
+  );
 }
-
-export default WhiteBoardCard;