Merge pull request #78 from calblueprint/kyle/navBar

Kyle/nav bar

.gitignore

@@ -37,6 +37,7 @@ yarn-debug.log*
 
 # Ignore database.yml because it differs between OS
 /config/database.yml
+/config/database.yml
 
 # Ignore vscode settings
 .vscode/

app/controllers/assignments_controller.rb

@@ -2,6 +2,7 @@ class AssignmentsController < ApplicationController
     before_action :set_action_item, only:[:show, :edit]
     def index
         @assignments = authorize Assignment.all
+        @user = current_user
         skip_policy_scope
     end
 

app/controllers/studio_assessments_controller.rb

@@ -5,6 +5,7 @@ class StudioAssessmentsController < ApplicationController
   # GET /studio_assessments.json
   def index
     @studio_assessments = StudioAssessment.all
+    @user = current_user
     skip_policy_scope
   end
 

app/javascript/components/ActionItemCards/index.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  faLeaf,
+  faHome,
+  faPen,
+  faFile,
+  faSmile,
+  faCode,
+} from '@fortawesome/free-solid-svg-icons';
+import { withStyles } from '@material-ui/core/styles';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styles from './styles';
+
+class ActionItemCard extends React.Component {
+  constructor(props) {
+    super(props);
+    /*
+    TODO: check props types
+    tempory props rn to test components
+    props:
+    actionItem - Javascripy object
+      title - Assignment title: String
+      description - Short description: String
+      date - Due date of assignment: JavaScript date?
+      category - type of assignment: string??
+      status - status of item: string
+    */
+
+  }
+
+  // render icon based on category
+  renderIcon() {
+    const AssignmentCategory = this.props.actionItem.category;
+    let icon = null;
+    switch (AssignmentCategory) {
+      case 'house':
+        icon = (
+          <FontAwesomeIcon
+            className="icon-large"
+            icon={faHome}
+            color="#9EDC8E"
+          />
+        );
+        break;
+      case 'leaf':
+        icon = (
+          <FontAwesomeIcon
+            className="icon-large"
+            icon={faLeaf}
+            color="#9EDC8E"
+          />
+        );
+        break;
+      case 'pen':
+        icon = (
+          <FontAwesomeIcon
+            className="icon-large"
+            icon={faPen}
+            color="#9EDC8E"
+          />
+        );
+        break;
+      case 'file':
+        icon = (
+          <FontAwesomeIcon
+            className="icon-large"
+            icon={faFile}
+            color="#9EDC8E"
+          />
+        );
+        break;
+      case 'smile':
+        icon = (
+          <FontAwesomeIcon
+            className="icon-large"
+            icon={faSmile}
+            color="#9EDC8E"
+          />
+        );
+        break;
+      case 'code':
+        icon = (
+          <FontAwesomeIcon
+            className="icon-large"
+            icon={faCode}
+            color="#9EDC8E"
+          />
+        );
+        break;
+    }
+    return icon;
+  }
+
+  render() {
+    return (
+      <div className="card">
+        <div className="rectangle"></div>
+        {this.renderIcon()}
+        <div className="info">
+          <div className="text">{this.props.actionItem.description}</div>
+          <div className="date">
+            DATE ASSIGNED: {this.props.actionItem.date.toLocaleDateString()}
+          </div>
+        </div>
+        <div className="assign">VIEW ASSIGNMENT</div>
+      </div>
+    );
+  }
+}
+
+ActionItemCard.propTypes = {
+  actionItem: PropTypes.object,
+};
+
+export default withStyles(styles)(ActionItemCard);

app/javascript/components/ActionItemCards/styles.js

@@ -0,0 +1,46 @@
+export const styles = () => ({
+  card: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'start',
+    border: '0.5px solid #5870EB',
+  },
+  rectangle: {
+    width: '5px',
+    height: '70.93px',
+    background: '#5870EB',
+    borderRadius: '20px',
+  },
+  assign: {
+    fontFamily: 'Inter',
+    fontStyle: 'normal',
+    fontWeight: 'bold',
+    fontSize: '12px',
+    lineHeight: '16px',
+    color: '#5870EB',
+  },
+  '& :active': {
+    color: 'rgb(58, 74, 156)',
+  },
+  text: {
+    color: '#8E8E8E',
+    fontFamily: 'Inter',
+    fontStyle: 'normal',
+    fontSize: '8px',
+  },
+  date: {
+    color: '#8E8E8E',
+    fontFamily: 'Inter',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    fontSize: '12px',
+    lineHeight: '16px',
+  },
+  info: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: '2',
+  },
+});
+
+export default styles;

app/javascript/components/ActionItemDashboard/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import ActionItemCard from 'components/ActionItemCards';
+import Navbar from 'components/Navbar';
+import PropTypes from 'prop-types';
+
+const action = {
+  title: 'Finish Sprint',
+  description: 'Complete the sprint by tonight please. Thank you',
+  date: new Date(),
+  category: 'code',
+};
+
+class ActionItemDashboard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      assignments: this.props.assignments,
+    };
+  }
+
+  render() {
+    return (
+      <div className="dashboard">
+        <Navbar isAdmin={this.props.isAdmin} />
+        <div className="content">
+          <h1>Assignment Dashboard</h1>
+          <div className="table-container">
+            <div>
+              <ActionItemCard actionItem={action} />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ActionItemDashboard.propTypes = {
+  assignments: PropTypes.array,
+};
+
+export default ActionItemDashboard;

app/javascript/components/Navbar/index.js

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import { IconButton, Button, Grid, Drawer } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
+import GroupIcon from '@material-ui/icons/Group';
+import BarChartIcon from '@material-ui/icons/BarChart';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import UnloopLogo from 'images/unloop_logo.png';
 import * as Sentry from '@sentry/browser';
 import styles from './styles';
@@ -12,22 +16,30 @@ function Navbar({ classes, isAdmin }) {
   const navigateToAdminBoard = () => {
     window.location.href = '/admin';
   };
-
   const navigateToHomepage = () => {
     window.location.href = '/';
     Sentry.configureScope(scope => scope.setUser(null));
   };
+  const navigateToAssignments = () => {
+    window.location.href = '/assignments';
+  };
+  const navigateToStudio = () => {
+    window.location.href = '/studio_assessments';
+  };
+
 
   const renderAdminButton = () => (
-    <Button
-      component="a"
-      disableFocusRipple
-      disableTouchRipple
-      className={classes.navBarItem}
-      onClick={navigateToAdminBoard}
-    >
-      Admin Board
-    </Button>
+            <Button
+              component="a"
+              disableFocusRipple
+              disableTouchRipple
+              className={classes.navBarItem}
+              onClick={navigateToAdminBoard}
+            >
+              <ExitToAppIcon fontSize="large" />
+              <div className = {classes.navText} > Admin View </div>
+            </Button>
+
   );
 
   const logout = () => {
@@ -63,22 +75,49 @@ function Navbar({ classes, isAdmin }) {
               className={classes.navBarItem}
               onClick={logout}
             >
-              Sign Out
+               <AccountCircleIcon fontSize="large" />
+              <div className = {classes.navText} >Sign Out </div>
             </Button>
           </Grid>
           {isAdmin ? <Grid item>{renderAdminButton()}</Grid> : null}
           <Grid item>
-            <IconButton
+            <Button
+              component="a"
               disableFocusRipple
               disableTouchRipple
               className={classes.navBarItem}
               onClick={navigateToHomepage}
             >
-              <HomeIcon fontSize="large" />
-            </IconButton>
+               <HomeIcon fontSize="large" />
+               <div className = {classes.navText} > Dashboard </div>
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button
+              component="a"
+              disableFocusRipple
+              disableTouchRipple
+              className={classes.navBarItem}
+              onClick={navigateToAssignments}
+            >
+               <GroupIcon fontSize="large" />
+               <div className = {classes.navText} > Bulk Assign </div>
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button
+              component="a"
+              disableFocusRipple
+              disableTouchRipple
+              className={classes.navBarItem}
+              onClick={navigateToStudio}
+            >
+               <BarChartIcon fontSize="large" />
+               <div className = {classes.navText} > Assessment </div>
+            </Button>
           </Grid>
         </Grid>
-        <Grid item>
+        <Grid item>  
           <img
             src={UnloopLogo}
             className={classes.unloopLogo}

app/javascript/components/Navbar/styles.js

@@ -4,6 +4,7 @@
  * This contains all the styles for the Navbar container.
  */
 
+let white = '#FFFFFF';
 const styles = theme => ({
   navBar: {
     height: '100vh',
@@ -19,13 +20,25 @@ const styles = theme => ({
   navBarItem: {
     color: theme.palette.common.white,
     textAlign: 'center',
+
+
   },
   unloopLogo: {
     width: '100%',
     height: 'auto',
     objectFit: 'contain',
     overflowX: 'hidden',
   },
+  navText: {
+    fontFamily: 'Roboto',
+    fontWeight: 500,
+    fontSize: '10px',
+    lineHeight: '16px',
+    letterSpacing: '1.5px',
+    textTransform: 'uppercase',
+    color: white,
+  },
+
 });
 
 export default styles;

app/javascript/components/ParticipantCard/index.js

@@ -41,6 +41,7 @@ function ParticipantCard({ classes, participant }) {
     ></FontAwesomeIcon>
   );
 
+
   const caseNotes =
     numCaseNotes === 1
       ? `${numCaseNotes} case note`
@@ -63,6 +64,7 @@ function ParticipantCard({ classes, participant }) {
         <div>
           <div className={classes.paperworkText}>
             {participant.paperworksCompleted} / {numPaperworks} completed{' '}
+
           </div>
           <PaperworkForm
             display="plus"