Merge remote-tracking branch 'origin/develop' into PM-973_invite-by-mail

Author: vas3a

src/actions/challenges.js

@@ -57,7 +57,7 @@ import {
 } from '../config/constants'
 import { loadProject } from './projects'
 import { removeChallengeFromPhaseProduct, saveChallengeAsPhaseProduct } from '../services/projects'
-import { checkAdmin } from '../util/tc'
+import { checkAdmin, checkManager } from '../util/tc'
 
 /**
  * Member challenges related redux actions
@@ -159,7 +159,11 @@ export function loadChallengesByPage (
       filters['projectId'] = projectId
     } else if (_.isObject(projectId) && projectId.value > 0) {
       filters['projectId'] = projectId.value
-    } else if (!checkAdmin(getState().auth.token) && userId) {
+    } else if (
+      !checkAdmin(getState().auth.token) &&
+      !checkManager(getState().auth.token) &&
+      userId
+    ) {
       // Note that we only add the memberId field if *no* project ID is given,
       // so that the list of *all challenges shows only those that the member is on
       filters['memberId'] = userId

src/actions/projects.js

@@ -32,7 +32,7 @@ import {
   fetchMemberProjects,
   updateProjectApi
 } from '../services/projects'
-import { checkAdmin } from '../util/tc'
+import { checkAdmin, checkManager } from '../util/tc'
 
 function _loadProjects (projectNameOrIdFilter = '', paramFilters = {}) {
   return (dispatch, getState) => {
@@ -54,7 +54,7 @@ function _loadProjects (projectNameOrIdFilter = '', paramFilters = {}) {
       }
     }
 
-    if (!checkAdmin(getState().auth.token)) {
+    if (!checkAdmin(getState().auth.token) && !checkManager(getState().auth.token)) {
       filters['memberOnly'] = true
     }
 

src/actions/sidebar.js

@@ -11,7 +11,7 @@ import {
   UNLOAD_PROJECTS_SUCCESS,
   PROJECTS_PAGE_SIZE
 } from '../config/constants'
-import { checkAdmin } from '../util/tc'
+import { checkAdmin, checkManager } from '../util/tc'
 import _ from 'lodash'
 
 /**
@@ -50,7 +50,7 @@ export function loadProjects (filterProjectName = '', paramFilters = {}) {
       }
     }
 
-    if (!checkAdmin(getState().auth.token)) {
+    if (!checkAdmin(getState().auth.token) && !checkManager(getState().auth.token)) {
       filters['memberOnly'] = true
     }
 

src/actions/users.js

@@ -10,33 +10,55 @@ import {
   SEARCH_USER_PROJECTS_SUCCESS,
   SEARCH_USER_PROJECTS_FAILURE
 } from '../config/constants'
+import _ from 'lodash'
 
 /**
  * Loads projects of the authenticated user
  */
-export function loadAllUserProjects (isAdmin = true) {
-  return (dispatch) => {
+export function loadAllUserProjects (params, isAdmin = true, isManager = true) {
+  return (dispatch, getState) => {
     dispatch({
       type: LOAD_ALL_USER_PROJECTS_PENDING
     })
 
+    const state = getState().users
+
     const filters = {
       status: 'active',
-      sort: 'lastActivityAt desc'
+      sort: 'lastActivityAt desc',
+      perPage: 20,
+      ...params
     }
-    if (!isAdmin) {
+
+    if (!isAdmin && !isManager) {
       filters['memberOnly'] = true
     }
 
-    fetchMemberProjects(filters).then(({ projects }) => dispatch({
+    fetchMemberProjects(filters).then(({ projects, pagination }) => dispatch({
       type: LOAD_ALL_USER_PROJECTS_SUCCESS,
-      projects
+      projects: _.uniqBy((filters.page ? state.allUserProjects || [] : []).concat(projects), 'id'),
+      total: pagination.xTotal,
+      page: pagination.xPage
     })).catch(() => dispatch({
       type: LOAD_ALL_USER_PROJECTS_FAILURE
     }))
   }
 }
 
+export function loadNextProjects (isAdmin = true, isManager = true) {
+  return (dispatch, getState) => {
+    const { page, total, allUserProjects } = getState().users
+    if (allUserProjects.length >= total) {
+      return
+    }
+
+    loadAllUserProjects(_.assign({}, {
+      perPage: 20,
+      page: page + 1
+    }), isAdmin, isManager)(dispatch, getState)
+  }
+}
+
 /**
  * Filter projects of the authenticated user
  *

src/components/Users/index.js

@@ -7,7 +7,7 @@ import Select from '../Select'
 import UserCard from '../UserCard'
 import PrimaryButton from '../Buttons/PrimaryButton'
 import { PROJECT_ROLES, AUTOCOMPLETE_DEBOUNCE_TIME_MS } from '../../config/constants'
-import { checkAdmin } from '../../util/tc'
+import { checkAdmin, checkManager } from '../../util/tc'
 import { removeUserFromProject } from '../../services/projects'
 import { deleteProjectMemberInvite } from '../../services/projectMemberInvites'
 import ConfirmationModal from '../Modal/ConfirmationModal'
@@ -159,7 +159,8 @@ class Users extends Component {
       updateProjectNember,
       isEditable,
       isSearchingUserProjects,
-      resultSearchUserProjects
+      resultSearchUserProjects,
+      loadNextProjects
     } = this.props
     const {
       searchKey
@@ -174,7 +175,8 @@ class Users extends Component {
     const membersExist = (projectMembers && projectMembers.length > 0) || (invitedMembers && invitedMembers.length > 0)
     const isCopilotOrManager = this.checkIsCopilotOrManager(projectMembers, loggedInHandle)
     const isAdmin = checkAdmin(this.props.auth.token)
-    const showAddUser = isEditable && this.state.projectOption && (isCopilotOrManager || isAdmin)
+    const isManager = checkManager(this.props.auth.token)
+    const showAddUser = isEditable && this.state.projectOption && (isCopilotOrManager || isAdmin || isManager)
 
     return (
       <div className={styles.contentContainer}>
@@ -192,6 +194,7 @@ class Users extends Component {
                 onChange={(e) => { this.setProjectOption(e) }}
                 onInputChange={this.debouncedOnInputChange}
                 isLoading={isSearchingUserProjects}
+                onMenuScrollBottom={loadNextProjects}
                 filterOption={() => true}
                 noOptionsMessage={() => isSearchingUserProjects ? 'Searching...' : 'No options'}
               />
@@ -319,7 +322,8 @@ Users.propTypes = {
   projectMembers: PropTypes.arrayOf(PropTypes.object),
   invitedMembers: PropTypes.arrayOf(PropTypes.object),
   searchUserProjects: PropTypes.func.isRequired,
-  resultSearchUserProjects: PropTypes.arrayOf(PropTypes.object)
+  resultSearchUserProjects: PropTypes.arrayOf(PropTypes.object),
+  loadNextProjects: PropTypes.func.isRequired
 }
 
 export default Users

src/config/constants.js

@@ -319,6 +319,10 @@ export const COPILOT_ROLES = [
   'copilot'
 ]
 
+export const MANAGER_ROLES = [
+  'project manager'
+]
+
 export const downloadAttachmentURL = (challengeId, attachmentId, token) =>
   `${CHALLENGE_API_URL}/${challengeId}/attachments/${attachmentId}/download?token=${token}`
 

src/containers/Projects/index.js

@@ -5,7 +5,7 @@ import { withRouter, Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import Loader from '../../components/Loader'
-import { checkAdminOrCopilot } from '../../util/tc'
+import { checkAdminOrCopilot, checkManager } from '../../util/tc'
 import { PrimaryButton } from '../../components/Buttons'
 import Select from '../../components/Select'
 import ProjectCard from '../../components/ProjectCard'
@@ -18,11 +18,21 @@ import styles from './styles.module.scss'
 const Projects = ({ projects, auth, isLoading, projectsCount, loadProjects, loadMoreProjects, unloadProjects }) => {
   const [search, setSearch] = useState()
   const [projectStatus, setProjectStatus] = useState('')
+  const [showOnlyMyProjects, setOnlyMyProjects] = useState(false)
   const selectedStatus = useMemo(() => PROJECT_STATUSES.find(s => s.value === projectStatus))
 
+  const isProjectManager = checkManager(auth.token)
   useEffect(() => {
-    loadProjects(search, projectStatus ? { status: projectStatus } : {})
-  }, [search, projectStatus])
+    const params = {}
+    if (projectStatus) {
+      params.status = projectStatus
+    }
+
+    if (isProjectManager) {
+      params.memberOnly = showOnlyMyProjects
+    }
+    loadProjects(search, params)
+  }, [search, projectStatus, showOnlyMyProjects, isProjectManager])
 
   // unload projects on dismount
   useEffect(() => () => unloadProjects, [])
@@ -46,7 +56,7 @@ const Projects = ({ projects, auth, isLoading, projectsCount, loadProjects, load
         )}
       </div>
       <div className={styles.searchWrapper}>
-        <div className={styles['col-6']}>
+        <div className={styles['col-4']}>
           <div className={cn(styles.field, styles.input1)}>
             <label>Search :</label>
           </div>
@@ -61,7 +71,7 @@ const Projects = ({ projects, auth, isLoading, projectsCount, loadProjects, load
             />
           </div>
         </div>
-        <div className={styles['col-6']}>
+        <div className={styles['col-4']}>
           <div className={cn(styles.field, styles.input1)}>
             <label>Project Status:</label>
           </div>
@@ -76,6 +86,25 @@ const Projects = ({ projects, auth, isLoading, projectsCount, loadProjects, load
             />
           </div>
         </div>
+        <div className={styles['col-4']}>
+          {
+            checkManager(auth.token) && (
+              <div className={styles.tcCheckbox}>
+                <input
+                  name='isOpenAdvanceSettings'
+                  type='checkbox'
+                  id='isOpenAdvanceSettings'
+                  checked={showOnlyMyProjects}
+                  onChange={() => setOnlyMyProjects(!showOnlyMyProjects)}
+                />
+                <label htmlFor='isOpenAdvanceSettings'>
+                  <div>Only My Projects</div>
+                  <input type='hidden' />
+                </label>
+              </div>
+            )
+          }
+        </div>
       </div>
       {projects.length > 0 ? (
         <>

src/containers/Projects/styles.module.scss

@@ -43,6 +43,7 @@
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
+  align-items: end;
   .searchInput {
     width: 100%;
     height: 40px;
@@ -51,4 +52,85 @@
     border: 1px solid $light-gray;
     background-color: $lighter-gray;
   }
+
+  .tcCheckbox {
+    @include tc-checkbox;
+
+    .tc-checkbox-label {
+      @include roboto-light();
+
+      line-height: 17px;
+      font-weight: 300;
+      margin-left: 21px;
+      user-select: none;
+      cursor: pointer;
+      width: 195px;
+      font-size: 14px;
+      color: #3d3d3d;
+    }
+
+    height: 18px;
+    width: 210px;
+    margin: 0;
+    padding: 0;
+    vertical-align: bottom;
+    position: relative;
+    display: inline-block;
+    margin-bottom: 4px;
+    margin-left: 8px;
+
+    input[type=checkbox] {
+      display: none;
+    }
+
+    label {
+      @include roboto-light();
+
+      line-height: 17px;
+      font-weight: 300;
+      cursor: pointer;
+      position: absolute;
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      top: 0;
+      left: 0;
+      border: none;
+      box-shadow: none;
+      background: $tc-gray-30;
+      transition: all 0.15s ease-in-out;
+
+      &::after {
+        opacity: 0;
+        content: '';
+        position: absolute;
+        width: 9px;
+        height: 5px;
+        background: transparent;
+        top: 5px;
+        left: 5px;
+        border-top: none;
+        border-right: none;
+        transform: rotate(-45deg);
+        transition: all 0.15s ease-in-out;
+      }
+
+      &:hover::after {
+        opacity: 0.3;
+      }
+
+      div {
+        margin-left: 24px;
+        width: 300px;
+      }
+    }
+
+    input[type=checkbox]:checked ~ label {
+      background: $tc-blue-20;
+    }
+
+    input[type=checkbox]:checked + label::after {
+      border-color: $white;
+    }
+  }
 }