Merge pull request #1305 from appirio-tech/feature/project-listing-updates#1268

Feature/project listing updates#1268

Author: vikasrohit

src/components/ProjectInfo/ProjectInfo.jsx

@@ -27,7 +27,7 @@ class ProjectInfo extends Component {
   }
 
   render() {
-    const { project, currentMemberRole, duration, canDeleteProject } = this.props
+    const { project, currentMemberRole, duration, canDeleteProject, onChangeStatus } = this.props
     const { showDeleteConfirm } = this.state
     return (
       <div className="project-info">
@@ -52,6 +52,7 @@ class ProjectInfo extends Component {
           currentMemberRole={currentMemberRole}
           duration={duration}
           descLinesCount={4}
+          onChangeStatus={onChangeStatus}
         />
       </div>
     )

src/components/ProjectInfo/ProjectInfo.scss

@@ -6,10 +6,11 @@
   background-color: $tc-white;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
-  padding: 4 * $base_unit;
   @include tc-label-md;
 
   .project-card-body {
+    padding-left: 4 * $base_unit;
+    padding-right: 4 * $base_unit;
     .project-description {
       max-height: 120px;
       min-height: 10px;
@@ -20,6 +21,9 @@
   .project-info-header {
     display:flex;
     fill: $tc-gray-50;
+    padding-left: 4 * $base_unit;
+    padding-right: 4 * $base_unit;
+    padding-top: 4 * $base_unit;
   }
 
 }

src/components/ProjectStatus/ProjectStatus.jsx

@@ -1,12 +1,12 @@
-import React, { Component, PropTypes} from 'react'
+import React, { Component, PropTypes } from 'react'
 import cn from 'classnames'
 import { PROJECT_STATUS } from '../../config/constants'
 import './ProjectStatus.scss'
 
 export const enhanceDropdown = (CompositeComponent) => class extends Component {
   constructor(props) {
     super(props)
-    this.state = { isOpen : false }
+    this.state = { isOpen: false }
     this.handleClick = this.handleClick.bind(this)
     this.onSelect = this.onSelect.bind(this)
     this.onClickOutside = this.onClickOutside.bind(this)
@@ -19,13 +19,12 @@ export const enhanceDropdown = (CompositeComponent) => class extends Component {
 
     document.dispatchEvent(dropdownClicked)
 
-    this.setState({ isOpen : !this.state.isOpen })
+    this.setState({ isOpen: !this.state.isOpen })
   }
 
   onSelect(value) {
     this.handleClick()
-
-    if (this.props.onChangeStatus) this.props.onChangeStatus(value)
+    if (this.props.onSelect) this.props.onSelect(value)
   }
 
   onClickOutside(evt) {
@@ -34,7 +33,7 @@ export const enhanceDropdown = (CompositeComponent) => class extends Component {
     console.log('onClickOutside')
 
     do {
-      if(currNode.className
+      if (currNode.className
         && currNode.className.indexOf
         && currNode.className.indexOf('dropdown-wrap') > -1) {
         isDropdown = true
@@ -43,11 +42,11 @@ export const enhanceDropdown = (CompositeComponent) => class extends Component {
 
       currNode = currNode.parentNode
 
-      if(!currNode)
+      if (!currNode)
         break
-    } while(currNode.tagName)
+    } while (currNode.tagName)
 
-    if(!isDropdown) {
+    if (!isDropdown) {
       this.setState({ isOpen: false })
     }
   }
@@ -75,9 +74,9 @@ export const enhanceDropdown = (CompositeComponent) => class extends Component {
       <div onClick={(e) => e.stopPropagation()} className="dropdown-wrap">
         <CompositeComponent
           { ...this.props }
-          isOpen={ isOpen }
-          handleClick={ this.handleClick }
-          onSelect={ this.onSelect }
+          isOpen={isOpen}
+          handleClick={this.handleClick}
+          onSelect={this.onSelect}
         />
       </div>
     )
@@ -86,32 +85,35 @@ export const enhanceDropdown = (CompositeComponent) => class extends Component {
 
 
 /*eslint-enable camelcase */
-const ProjectStatus = ({canEdit, isOpen, status, handleClick, onSelect, showText, withoutLabel, unifiedHeader=true }) => {
+const ProjectStatus = ({ canEdit, isOpen, status, handleClick, onSelect, showText, withoutLabel, unifiedHeader = true }) => {
   const selected = PROJECT_STATUS.filter((opt) => opt.value === status)[0]
   return (
     <div className="ProjectStatus">
-      <div className={cn('status-header', 'ps-' + selected.value, {active: isOpen, editable : canEdit, 'unified-header' : unifiedHeader })} onClick={handleClick}>
+      <div className={cn('status-header', 'ps-' + selected.value, { active: isOpen, editable: canEdit, 'unified-header': unifiedHeader })} onClick={handleClick}>
         <div className="status-icon"><i /></div>
-        {showText && (<span className="status-label">{withoutLabel ? selected.fullName : selected.name}<i className="caret" /></span>) }
+        {showText && (<span className="status-label">{withoutLabel ? selected.fullName : selected.name}<i className="caret" /></span>)}
+      </div>
+      {isOpen && canEdit && <div className="status-dropdown">
+        <div className="status-header">Project Status</div>
+        <ul>
+          {
+            PROJECT_STATUS.map((item) =>
+              <li key={item.value}>
+                <a
+                  href="javascript:"
+                  className={cn('status-option', 'ps-' + item.value, { active: item.value === status })}
+                  onClick={(e) => {
+                    onSelect(item.value, e)
+                  }}
+                >
+                  <span className="status-icon"><i /></span>
+                  <span className="status-label">{item.name}</span>
+                </a>
+              </li>
+            )
+          }
+        </ul>
       </div>
-      { isOpen && canEdit && <ul className="status-dropdown">
-        {
-          PROJECT_STATUS.map((item) =>
-            <li key={item.value}>
-              <a
-                href="javascript:"
-                className={cn('status-option', 'ps-' + item.value, {active: item.value === status})}
-                onClick={(e) => {
-                  onSelect(item.value, e)
-                }}
-              >
-                <span className="status-icon"><i/></span>
-                <span className="status-label">{item.name}</span>
-              </a>
-            </li>
-          )
-        }
-      </ul>
       }
     </div>
   )

src/components/ProjectStatus/ProjectStatus.scss

@@ -4,7 +4,6 @@ $status-height :  20px;
 .ProjectStatus {
   position: relative;
   height: $status-height;
-
   .status-icon {
     position: relative;
     display: inline-block;
@@ -94,6 +93,7 @@ $status-height :  20px;
       }
       .caret {
         // content: '';
+        z-index: 3;
         display: inline-block;
         width: 9px;
         height: 5px;
@@ -129,17 +129,29 @@ $status-height :  20px;
     margin-left: 10px;
   }
 
-  ul.status-dropdown {
+  .status-dropdown {
+    min-width: 110%;
     position: absolute;
     border-radius: $base-unit;
     box-shadow: 0 0 15px rgba(0, 0, 0, .25);
     padding: 10px 0;
     position: absolute;
     background: $tc-white;
-    top: $status-height;
+    top: -2*$base_unit;
     left: 0px;
     right: auto;
     z-index: 2;
+    .status-header {
+      @include roboto-medium;
+      font-size: $tc-label-md;
+      text-align: left;
+      color: $tc-light-blue;
+      line-height: 30px;
+      padding-left: 20px;
+      margin-bottom: 20px;
+      white-space: nowrap;
+    }
+
     a.status-option {
       display: flex;
       @include roboto-medium;

src/projects/detail/containers/ProjectInfoContainer.js

@@ -106,6 +106,7 @@ class ProjectInfoContainer extends React.Component {
           duration={duration}
           canDeleteProject={canDeleteProject}
           onDeleteProject={this.onDeleteProject}
+          onChangeStatus={this.onChangeStatus}
         />
         <LinksMenu
           links={project.bookmarks || []}

src/projects/list/components/Projects/ProjectCardBody.jsx

@@ -3,11 +3,14 @@ import { Link } from 'react-router-dom'
 import TextTruncate from 'react-text-truncate'
 import ProjectProgress from '../../../../components/ProjectProgress/ProjectProgress'
 import ProjectStatus from '../../../../components/ProjectStatus/ProjectStatus'
-import { PROJECT_STATUS_ACTIVE } from '../../../../config/constants'
+import { PROJECT_STATUS_ACTIVE, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER } from '../../../../config/constants'
 import './ProjectCardBody.scss'
+import _ from 'lodash'
 
-function ProjectCardBody({ project, duration, currentMemberRole, descLinesCount=8 }) {
+function ProjectCardBody({ project, duration, currentMemberRole, descLinesCount=8, onChangeStatus }) {
   if (!project) return null
+  const canEdit = currentMemberRole
+      && _.indexOf([PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER], currentMemberRole) > -1
 
   return (
     <div className="project-card-body">
@@ -25,8 +28,9 @@ function ProjectCardBody({ project, duration, currentMemberRole, descLinesCount=
             showText
             withoutLabel
             currentMemberRole={currentMemberRole}
-            canEdit={false}
+            canEdit={canEdit}
             unifiedHeader={false}
+            onSelect={onChangeStatus}
           />
         }
         {project.status === PROJECT_STATUS_ACTIVE &&