Production release 2.4.16

src/api/projectMemberInvites.js

@@ -22,7 +22,8 @@ export function updateProjectMemberInvite(projectId, member) {
  * @return {object}  project member invite returned by api
  */
 export function createProjectMemberInvite(projectId, member) {
-  const url = `${PROJECTS_API_URL}/v4/projects/${projectId}/members/invite/`
+  const fields = 'id,projectId,userId,email,role,status,createdAt,updatedAt,createdBy,updatedBy,handle,firstName,lastName,photoURL'
+  const url = `${PROJECTS_API_URL}/v4/projects/${projectId}/members/invite/?fields=` + encodeURIComponent(fields)
   return axios({
     method: 'post',
     url,
@@ -38,6 +39,16 @@ export function createProjectMemberInvite(projectId, member) {
     })
 }
 
+export function getProjectMemberInvites(projectId) {
+  const fields = 'id,projectId,userId,email,role,status,createdAt,updatedAt,createdBy,updatedBy,handle,firstName,lastName,photoURL'
+  const url = `${PROJECTS_API_URL}/v4/projects/${projectId}/members/invites/?fields=`
+    + encodeURIComponent(fields)
+  return axios.get(url)
+    .then( resp => {
+      return resp.data.result.content
+    })
+}
+
 /**
  * Get a project member invite based on project's id
  * @param  {integer} projectId unique identifier of the project

src/api/projectMembers.js

@@ -51,7 +51,9 @@ export function addProjectMember(projectId, newMember) {
 
 
 export function updateProjectMember(projectId, memberId, updatedProps) {
-  const url = `${PROJECTS_API_URL}/v4/projects/${projectId}/members/${memberId}/`
+  const fields = 'id,userId,role,isPrimary,deletedAt,createdAt,updatedAt,deletedBy,createdBy,updatedBy,handle,firstName,lastName,photoURL,workingHourStart,workingHourEnd,timeZone'
+  const url = `${PROJECTS_API_URL}/v4/projects/${projectId}/members/${memberId}/?fields=`
+    + encodeURIComponent(fields)
   return axios.patch(url, { param: updatedProps })
     .then(resp => {
       return resp.data.result.content
@@ -66,3 +68,23 @@ export function removeProjectMember(projectId, memberId) {
       return memberId
     })
 }
+
+export function getProjectMembers(projectId) {
+  const fields = 'id,userId,role,isPrimary,deletedAt,createdAt,updatedAt,deletedBy,createdBy,updatedBy,handle,firstName,lastName,photoURL,workingHourStart,workingHourEnd,timeZone'
+  const url = `${PROJECTS_API_URL}/v4/projects/${projectId}/members/?fields=`
+    + encodeURIComponent(fields)
+  return axios.get(url)
+    .then( resp => {
+      return resp.data.result.content
+    })
+}
+
+export function getProjectMember(projectId, memberId) {
+  const fields = 'id,userId,role,isPrimary,deletedAt,createdAt,updatedAt,deletedBy,createdBy,updatedBy,handle,firstName,lastName,photoURL,workingHourStart,workingHourEnd,timeZone'
+  const url = `${PROJECTS_API_URL}/v4/projects/${projectId}/members/${memberId}?fields=`
+    + encodeURIComponent(fields)
+  return axios.get(url)
+    .then( resp => {
+      return resp.data.result.content
+    })
+}

src/api/templates.js

@@ -93,13 +93,19 @@ export function updateProjectsMetadata(metadataId, type, data) {
     return axios.patch(`${PROJECTS_API_URL}/v4/projects/metadata/${type}/${key}/versions/${version}`, {
       param: tmpdata
     })
-      .then(resp => _.get(resp.data, 'result.content', {}))
+      .then(resp => {
+        const versionMetadata = _.get(resp.data, 'result.content', {})
+        return { type, versionMetadata }
+      })
   } else {
     const path = type !== 'milestoneTemplates' ? 'projects' : 'timelines'
     return axios.patch(`${PROJECTS_API_URL}/v4/${path}/metadata/${type}/${metadataId}`, {
       param: data
     })
-      .then(resp => _.get(resp.data, 'result.content', {}))
+      .then(resp => {
+        const metadata = _.get(resp.data, 'result.content', {})
+        return { type, metadata }
+      })
   }
 }
 

src/components/AuthenticatedComponent.jsx

@@ -22,8 +22,8 @@ export function requiresAuthentication(Component) {
         this.setState({isLoggedIn: true})
       }).catch((error) => {
         console.log(error)
-        // FIXME should we include hash, search etc
-        const redirectBackToUrl = window.location.origin + this.props.location.pathname
+        // we have to to redirect to the same page, so we use the whole URL
+        const redirectBackToUrl = encodeURIComponent(window.location.href)
         const newLocation = ACCOUNTS_APP_LOGIN_URL + '?retUrl=' + redirectBackToUrl
         console.log('redirecting... ', newLocation)
         window.location = newLocation

src/components/ProjectStatus/editableProjectStatus.js

@@ -10,7 +10,8 @@ import {
   PROJECT_STATUS_ACTIVE,
   PROJECT_STATUS_COMPLETED,
   PROJECT_STATUS_CANCELLED,
-  TOOLTIP_DEFAULT_DELAY
+  TOOLTIP_DEFAULT_DELAY,
+  PROJECT_STATUS_DRAFT
 } from '../../config/constants'
 import CarretDownNormal9px from '../../assets/icons/arrow-9px-carret-down-normal.svg'
 
@@ -63,7 +64,7 @@ const hocStatusDropdown = (CompositeComponent, statusList, projectCanBeActive) =
               <div className="status-header">Project Status</div>
               <ul>
                 {
-                  activestatusList.sort((a, b) => a.dropDownOrder > b.dropDownOrder).map((item) =>
+                  activestatusList.sort((a, b) => a.order - b.order).map((item) =>
                     item.toolTipMessage ? (
                       <Tooltip key={item.value} theme="light" tooltipDelay={TOOLTIP_DEFAULT_DELAY}>
                         <div className="tooltip-target">
@@ -121,6 +122,7 @@ const editableProjectStatus = (CompositeComponent) => class extends Component {
     this.showStatusChangeDialog = this.showStatusChangeDialog.bind(this)
     this.changeStatus = this.changeStatus.bind(this)
     this.handleReasonUpdate = this.handleReasonUpdate.bind(this)
+    this.getProjectStatusDropdownValues = this.getProjectStatusDropdownValues.bind(this)
   }
 
   componentWillReceiveProps() {
@@ -158,12 +160,20 @@ const editableProjectStatus = (CompositeComponent) => class extends Component {
     this.setState({ statusChangeReason : _.get(reason, 'value') })
   }
 
+  getProjectStatusDropdownValues(status) {
+    if (status === PROJECT_STATUS_DRAFT) {
+      return [{color: 'gray', name: 'Draft', fullName: 'Project is in draft', value: PROJECT_STATUS_DRAFT, order: 2, dropDownOrder: 1 }].concat(PROJECT_STATUS)
+    }
+    return PROJECT_STATUS
+  }
+
   render() {
     const { showStatusChangeDialog, newStatus, statusChangeReason } = this.state
-    const { canEdit, projectCanBeActive } = this.props
+    const { canEdit, projectCanBeActive, status } = this.props
+    const PROJECT_STATUS_VALUES = this.getProjectStatusDropdownValues(status)
     const StatusDropdown = canEdit
-      ? enhanceDropdown(hocStatusDropdown(CompositeComponent, PROJECT_STATUS, projectCanBeActive))
-      : hocStatusDropdown(CompositeComponent, PROJECT_STATUS, projectCanBeActive)
+      ? enhanceDropdown(hocStatusDropdown(CompositeComponent, PROJECT_STATUS_VALUES, projectCanBeActive))
+      : hocStatusDropdown(CompositeComponent, PROJECT_STATUS_VALUES, projectCanBeActive)
     return (
       <div className={cn('EditableProjectStatus', {'modal-active': showStatusChangeDialog})}>
         <div className="modal-overlay" onClick={ this.hideStatusChangeDialog }/>
@@ -190,7 +200,11 @@ editableProjectStatus.propTypes = {
   /**
    * Boolean flag to control if project status can be switched to active.
    */
-  projectCanBeActive: PropTypes.bool
+  projectCanBeActive: PropTypes.bool,
+  /**
+   * String representing project status
+   */
+  status: PropTypes.string
 }
 
 export default editableProjectStatus

src/components/Sticky.jsx

@@ -7,14 +7,26 @@ export default class Sticky extends React.Component {
     super(props)
     this.mountSticky = (sticky) => { this.sticky = sticky }
     this.handleScroll = this.handleScroll.bind(this)
+    this.updateSticky = this.updateSticky.bind(this)
   }
 
   componentDidMount() {
     window.addEventListener('scroll', this.handleScroll)
+    document.addEventListener('refreshsticky', this.updateSticky)
   }
 
   componentWillUnmount() {
     window.removeEventListener('scroll', this.handleScroll)
+    document.removeEventListener('refreshsticky', this.updateSticky)
+  }
+
+  updateSticky() {
+    setTimeout(() => {
+      if (this.sticky) {
+        this.sticky.updateInitialDimension()
+        this.sticky.update()
+      }
+    })
   }
 
   handleScroll() {

src/components/TeamManagement/MemberItem.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import moment from 'moment'
+import {timezones} from 'appirio-tech-react-components/constants/timezones'
+import UserTooltip from '../User/UserTooltip'
+import SunIcon from '../../assets/icons/daylight.svg'
+import MoonIcon from '../../assets/icons/moon.svg'
+import { getFullNameWithFallback } from '../../helpers/tcHelpers'
+import './MemberItem.scss'
+
+const  MemberItem  = (props) => {
+
+  const {usr, showEmailOnly} = props
+
+  const userFullName = getFullNameWithFallback(usr)
+  const workingHourStart = _.get(usr, 'workingHourStart')
+  const workingHourEnd = _.get(usr, 'workingHourEnd')
+  const timeZone = _.get(usr, 'timeZone')
+  const email = _.get(usr, 'email')
+  let localTime
+  let timeZoneInfo
+  if(timeZone) {
+    timeZoneInfo = _.find(timezones, (t) => {return t.zoneName === timeZone})
+    localTime = moment().utcOffset(timeZoneInfo.gmtOffset/3600).format('h:mm A Z')
+  }
+  let localTimeInfoEl = null
+
+  let isWorkingTime = false
+  let showIcon = false
+  let localWhStart
+  let localWhEnd
+
+  if(localTime || workingHourStart && workingHourEnd ) {
+
+    if(workingHourStart && workingHourEnd) {
+      showIcon = true
+      localWhStart = moment({hour: workingHourStart.split(':')[0]}).format('h:mm A')
+      localWhEnd = moment({hour: workingHourEnd.split(':')[0]}).format('h:mm A')
+
+      if(localTime) {
+        let localHour = +moment().utcOffset(timeZoneInfo.gmtOffset/3600).format('H')
+        const localStartHour = +moment({hour: workingHourStart.split(':')[0] }).format('H')
+        let localEndHour = +moment({hour: workingHourEnd.split(':')[0] }).format('H')
+        if(localEndHour <= localStartHour) {
+          localEndHour += 24
+          if(localHour < localStartHour) {
+            localHour += 24
+          }
+        }
+        if(localHour >= localStartHour && localHour <= localEndHour) {
+          isWorkingTime = true
+        }
+      }
+    }
+    localTimeInfoEl = (<div styleName="time-info-tooltip">
+      {localTime? <span>Local Time - {localTime}</span>: null}
+      {localWhStart && localWhEnd  ? <span>Working Hours - {`${localWhStart} - ${localWhEnd}`}</span>: null}
+    </div>)
+  }
+
+  return (
+    <div styleName="container">
+      <UserTooltip {...props} localTimeInfo={localTimeInfoEl}/>
+      <div styleName="member-detail">
+        <div styleName="member-name">{showEmailOnly? email :userFullName}</div>
+        {localWhStart && localWhEnd && <div styleName="wk-hour">WH: {localWhStart} - {localWhEnd}</div>}
+        {localTime &&<div styleName="local-time">{showIcon&& (isWorkingTime ? <SunIcon/>: <MoonIcon/>)}Local time: {localTime}</div>}
+      </div>
+    </div>
+  )
+}
+
+MemberItem.propTypes = {
+  showRoleSelector: false
+}
+
+MemberItem.propTypes = {
+  usr: PropTypes.object.isRequired,
+  id: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]).isRequired,
+  previewAvatar: PropTypes.bool,
+  showEmailOnly: PropTypes.bool,
+  size: PropTypes.number
+}
+
+export default MemberItem

src/components/TeamManagement/MemberItem.scss

@@ -0,0 +1,69 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.container {
+  display: flex;
+  flex-direction: row;
+  min-height: 51px;
+  width: 100%;
+
+  & + & {
+    margin-top: 2 * $base-unit;
+  }
+
+  :global(.Tooltip) {
+    margin-left: 5px;
+    margin-top: 2px;
+
+    &:global(.customer-data .tooltip-content-container){
+      width: 440px;
+    }
+  }
+}
+
+.member-detail {
+  margin-left: 2 * $base-unit;
+  overflow: hidden;
+}
+
+.member-name {
+  @include roboto-bold;
+  font-size: 16px;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wk-hour {
+  margin-top: $base-unit;
+  font-size: 10px;
+  color: $tc-gray-50;
+}
+
+.local-time {
+  align-items: center;
+  display: flex;
+  font-size: 10px;
+  color: $tc-gray-50;
+  line-height: 20px;
+
+  svg {
+    vertical-align: sub;
+    margin-right: $base-unit;
+  }
+}
+
+.time-info-tooltip {
+  height: 20px;
+  width: 100%;
+  color: $tc-gray-50;
+  display: flex;
+  justify-content: space-between;
+
+  span {
+    font-size: 12px;
+    color: $tc-gray-50;
+    line-height: 20px;
+    white-space: nowrap
+  }
+}