diff --git a/src/components/ChallengeEditor/CheckpointPrizes-Field/index.js b/src/components/ChallengeEditor/CheckpointPrizes-Field/index.js
index dda04a45..b5028ced 100644
--- a/src/components/ChallengeEditor/CheckpointPrizes-Field/index.js
+++ b/src/components/ChallengeEditor/CheckpointPrizes-Field/index.js
@@ -77,7 +77,8 @@ const CheckpointPrizesField = ({ challenge, onUpdateOthers, readOnly }) => {
}
CheckpointPrizesField.defaultProps = {
- readOnly: false
+ readOnly: false,
+ onUpdateOthers: () => {}
}
CheckpointPrizesField.propTypes = {
diff --git a/src/components/ChallengeEditor/index.js b/src/components/ChallengeEditor/index.js
index e6436898..3db1b6db 100644
--- a/src/components/ChallengeEditor/index.js
+++ b/src/components/ChallengeEditor/index.js
@@ -27,7 +27,8 @@ import {
MILESTONE_STATUS,
PHASE_PRODUCT_CHALLENGE_ID_FIELD,
QA_TRACK_ID, DESIGN_CHALLENGE_TYPES, ROUND_TYPES,
- MULTI_ROUND_CHALLENGE_TEMPLATE_ID, DS_TRACK_ID
+ MULTI_ROUND_CHALLENGE_TEMPLATE_ID, DS_TRACK_ID,
+ CHALLENGE_STATUS
} from '../../config/constants'
import { getDomainTypes, getResourceRoleByName } from '../../util/tc'
import { PrimaryButton, OutlineButton } from '../Buttons'
@@ -102,7 +103,8 @@ class ChallengeEditor extends Component {
// NOTE that we have to keep `assignedMemberDetails` in the local state, rather than just get it from the props
// because we can update it locally when we choose another assigned user, so we don't have to wait for user details
// to be loaded from Member Service as we already know it in such case
- assignedMemberDetails: this.props.assignedMemberDetails
+ assignedMemberDetails: this.props.assignedMemberDetails,
+ isPhaseChange: false
}
this.onUpdateInput = this.onUpdateInput.bind(this)
this.onUpdateSelect = this.onUpdateSelect.bind(this)
@@ -838,7 +840,11 @@ class ChallengeEditor extends Component {
for (let index = 0; index < phases.length; ++index) {
newChallenge.phases[index].isDurationActive =
moment(newChallenge.phases[index]['scheduledEndDate']).isAfter()
- newChallenge.phases[index].isStartTimeActive = index <= 0
+ if (newChallenge.phases[index].name === 'Submission' || newChallenge.phases[index].name === 'Checkpoint Submission') {
+ newChallenge.phases[index].isStartTimeActive = true
+ } else {
+ newChallenge.phases[index].isStartTimeActive = index <= 0
+ }
newChallenge.phases[index].isOpen =
newChallenge.phases[index].isDurationActive
}
@@ -847,27 +853,31 @@ class ChallengeEditor extends Component {
}
onUpdatePhaseDate (phase, index) {
+ console.log('onUpdatePhase', phase, index)
const { phases } = this.state.challenge
let newChallenge = _.cloneDeep(this.state.challenge)
+
if (phase.isBlur && newChallenge.phases[index]['name'] === 'Submission') {
newChallenge.phases[index]['duration'] = _.max([
newChallenge.phases[index - 1]['duration'],
phase.duration
])
+ newChallenge.phases[index]['scheduledStartDate'] = moment(phase.startDate).toISOString()
newChallenge.phases[index]['scheduledEndDate'] =
moment(newChallenge.phases[index]['scheduledStartDate'])
.add(newChallenge.phases[index]['duration'], 'hours')
.format('MM/DD/YYYY HH:mm')
} else {
newChallenge.phases[index]['duration'] = phase.duration
- newChallenge.phases[index]['scheduledStartDate'] = phase.startDate
- newChallenge.phases[index]['scheduledEndDate'] = phase.endDate
+ newChallenge.phases[index]['scheduledStartDate'] = moment(phase.startDate).toISOString()
+ newChallenge.phases[index]['scheduledEndDate'] = moment(phase.endDate).toISOString()
}
for (let phaseIndex = index + 1; phaseIndex < phases.length; ++phaseIndex) {
- if (newChallenge.phases[phaseIndex]['name'] === 'Submission') {
- newChallenge.phases[phaseIndex]['scheduledStartDate'] =
- newChallenge.phases[phaseIndex - 1]['scheduledStartDate']
+ if (newChallenge.phases[phaseIndex]['name'] === 'Submission' || newChallenge.phases[index].name === 'Checkpoint Submission') {
+ console.log('Setting submission phase scheduled start date', moment(phase.startDate).toISOString())
+ newChallenge.phases[index]['scheduledStartDate'] = moment(phase.startDate).toISOString()
+
newChallenge.phases[phaseIndex]['duration'] = _.max([
newChallenge.phases[phaseIndex - 1]['duration'],
newChallenge.phases[phaseIndex]['duration']
@@ -881,7 +891,11 @@ class ChallengeEditor extends Component {
.add(newChallenge.phases[phaseIndex]['duration'], 'hours')
.format('MM/DD/YYYY HH:mm')
}
-
+ if (!_.isEqual(newChallenge.phases[index], phases[index])) {
+ this.setState({ isPhaseChange: true })
+ }
+ console.log('Setting new state', newChallenge)
+ console.log('isPhaseChange', this.state.isPhaseChange)
this.setState({ challenge: newChallenge })
setTimeout(() => {
@@ -890,6 +904,7 @@ class ChallengeEditor extends Component {
}
collectChallengeData (status) {
+ const { isPhaseChange } = this.state
const { attachments, metadata } = this.props
const challenge = pick([
'phases',
@@ -928,16 +943,23 @@ class ChallengeEditor extends Component {
if (this.state.challenge.id) {
challenge.attachmentIds = _.map(attachments, item => item.id)
}
+ console.log('Phase Data', challenge.phases)
challenge.phases = challenge.phases.map((p) => pick([
'duration',
'phaseId',
'scheduledStartDate',
'scheduledEndDate'
], p))
+
if (challenge.terms && challenge.terms.length === 0) delete challenge.terms
delete challenge.attachments
delete challenge.reviewType
- return _.cloneDeep(challenge)
+ if (!isPhaseChange) delete challenge.phases
+
+ const cloned = _.cloneDeep(challenge)
+ console.log('CLONED', cloned)
+
+ return cloned
}
goToEdit (challengeID) {
@@ -1341,6 +1363,7 @@ class ChallengeEditor extends Component {
}
const isTask = _.get(challenge, 'task.isTask', false)
const { assignedMemberDetails, error } = this.state
+ const communityAppUrl = `${COMMUNITY_APP_URL}/challenges/${challenge.id}`
let isActive = false
let isDraft = false
let isCompleted = false
@@ -1486,14 +1509,16 @@ class ChallengeEditor extends Component {
}
theme={theme}
closeText='Close'
- closeLink='/'
- okText='View Challenge'
- okLink='./view'
+ closeLink='./view'
+ okText='Preview'
+ onOk={() => {
+ window.open(communityAppUrl, '_blank')
+ }}
onClose={this.resetModal}
/>
)
}
-
+ const statusMessage = challenge.status && challenge.status.split(' ')[0].toUpperCase()
const errorContainer =
const actionButtons =
@@ -1534,9 +1559,11 @@ class ChallengeEditor extends Component {
)}
)}
- {error}
-
+ {statusMessage !== CHALLENGE_STATUS.CANCELLED &&
+
+
+ }
}
{!isLoading && isActive &&
diff --git a/src/components/ChallengesComponent/ChallengeCard/ChallengeCard.module.scss b/src/components/ChallengesComponent/ChallengeCard/ChallengeCard.module.scss
index 91f3213d..0a17fa64 100644
--- a/src/components/ChallengesComponent/ChallengeCard/ChallengeCard.module.scss
+++ b/src/components/ChallengesComponent/ChallengeCard/ChallengeCard.module.scss
@@ -1,144 +1,63 @@
@import "../../../styles/includes";
.item {
- width: 100%;
display: flex;
- justify-content: space-between;
- font-size: 16px;
+ font-size: 14px;
+ gap: 30px;
height: 100%;
+ padding: 0 20px;
+
.editingContainer {
display: none;
}
.iconsContainer {
display: flex;
}
- &:hover {@import "../../../styles/includes";
-
- .item {
- width: 100%;
- display: flex;
- justify-content: space-between;
- font-size: 16px;
- height: 100%;
- &:hover {
- cursor: pointer;
- background-color: $lighter-gray;
- }
-
- .block {
- color: $text-color;
- word-break: break-all;
- }
-
- .light-text {
- color: $light-text;
- }
-
- .linkGroup {
- display: flex;
- justify-content: space-between;
- width: 100%;
- padding-left: 20px;
- padding-right: 20px;
-
- .link,
- .link:hover,
- .link:visited {
- color: $status-blue;
- margin: 0;
- text-decoration-line: underline;
- }
-
- span.link,
- span.link:hover,
- span.link:visited {
- color: $inactive;
- cursor: default;
- }
-
- &.onlyOne {
- justify-content: center;
- }
- }
-
-
- }
-
- .icon {
- vertical-align: bottom;
- }
-
- .faIcon {
- color: $gray;
- margin-right: 10px;
- margin-left: 20px;
- }
-
- .faIconContainer {
- flex:1;
- width: 100%;
- display: flex;
- justify-items: flex-end;
- align-items: center;
-
- span {
- flex-grow: 1;
- flex-shrink: 0;
- color: $text-color;
- }
- }
-
- .col1 {
- flex: 6;
- flex-wrap: nowrap;
- display: flex;
- text-decoration: none;
- .name {
- flex:1;
- display: flex;
- flex-direction: column;
- }
+ .col1 {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: center;
+ }
- align-items: center;
- padding-left: 20px;
- }
+ .col2 {
+ display: flex;
+ flex: 2;
+ flex-direction: column;
+ justify-content: center;
- .col2 {
- flex: 2;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- text-decoration: none;
+ span {
+ word-break: break-all;
}
+ }
- .col3 {
- flex: 2;
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
+ .col3 {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: center;
+ }
- .col4 {
- flex: 2;
- display: flex;
- flex-wrap: wrap;
- width: 100%;
- align-items: center;
- padding-right: 20px;
- justify-content: center;
- }
+ .col4 {
+ display: flex;
+ width: 30px;
+ flex-direction: column;
+ justify-content: center;
+ }
- cursor: pointer;
- background-color: $lighter-gray;
+ .col5 {
+ display: flex;
+ width: 80px;
+ flex-direction: column;
+ justify-content: center;
+ }
- .editingContainer {
- display: flex;
- }
- .iconsContainer {
- display: none;
- }
+ .col6 {
+ display: flex;
+ width: 40px;
+ flex-direction: column;
+ justify-content: center;
}
.block {
@@ -305,54 +224,6 @@
}
}
-.col1 {
- flex: 6;
- flex-wrap: nowrap;
- display: flex;
-
- .name {
- flex:1;
- display: flex;
- flex-direction: column;
- }
-
- align-items: center;
- padding-left: 20px;
-}
-
-.col2 {
- flex: 2;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
- .statusText {
- color: $text-color;
- font-size: 14px;
- overflow-wrap: break-word;
- word-wrap: break-word;
- //hyphens: auto;
- max-width: 100px;
- }
-}
-
-.col3 {
- flex: 2;
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
-
-.col4 {
- flex: 2;
- display: flex;
- flex-wrap: wrap;
- width: 100%;
- align-items: center;
- padding-right: 20px;
-}
-
.modalContainer {
padding: 0;
position: fixed;
diff --git a/src/components/ChallengesComponent/ChallengeCard/index.js b/src/components/ChallengesComponent/ChallengeCard/index.js
index 80d5fc30..47d5dc6a 100644
--- a/src/components/ChallengesComponent/ChallengeCard/index.js
+++ b/src/components/ChallengesComponent/ChallengeCard/index.js
@@ -8,15 +8,13 @@ import cn from 'classnames'
import { withRouter, Link } from 'react-router-dom'
import moment from 'moment'
import 'moment-duration-format'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faFile, faUser } from '@fortawesome/free-solid-svg-icons'
import ChallengeStatus from '../ChallengeStatus'
import ChallengeTag from '../ChallengeTag'
import styles from './ChallengeCard.module.scss'
-import { getFormattedDuration, formatDate } from '../../../util/date'
-import { CHALLENGE_STATUS, COMMUNITY_APP_URL, DIRECT_PROJECT_URL, MESSAGE, ONLINE_REVIEW_URL } from '../../../config/constants'
+import { formatDate } from '../../../util/date'
+import { CHALLENGE_STATUS, COMMUNITY_APP_URL, DIRECT_PROJECT_URL, MESSAGE, ONLINE_REVIEW_URL, PROJECT_ROLES } from '../../../config/constants'
import ConfirmationModal from '../../Modal/ConfirmationModal'
-import { checkChallengeEditPermission } from '../../../util/tc'
+import { checkChallengeEditPermission, checkReadOnlyRoles } from '../../../util/tc'
import AlertModal from '../../Modal/AlertModal'
import Tooltip from '../../Tooltip'
@@ -24,76 +22,9 @@ const theme = {
container: styles.modalContainer
}
-const STALLED_MSG = 'Stalled'
-const DRAFT_MSG = 'In Draft'
-const STALLED_TIME_LEFT_MSG = 'Challenge is currently on hold'
-const FF_TIME_LEFT_MSG = 'Winner is working on fixes'
-
const PERMISSION_DELETE_MESSAGE_ERROR =
"You don't have permission to delete this challenge"
-/**
- * Format the remaining time of a challenge phase
- * @param phase Challenge phase
- * @param status Challenge status
- * @returns {*}
- */
-const getTimeLeft = (phase, status) => {
- if (!phase) return STALLED_TIME_LEFT_MSG
- if (phase.phaseType === 'Final Fix') {
- return FF_TIME_LEFT_MSG
- }
- let time = moment(phase.scheduledEndDate).diff()
- const late = time < 0
- if (late) time = -time
-
- if (status !== CHALLENGE_STATUS.COMPLETED.toLowerCase()) {
- const duration = getFormattedDuration(time)
- return late ? `Late by ${duration}` : `${duration} to go`
- }
-
- return moment(phase.scheduledEndDate).format('DD/MM/YYYY')
-}
-
-/**
- * Find current phase and remaining time of it
- * @param c Challenge
- * @returns {{phaseMessage: string, endTime: {late, text}}}
- */
-const getPhaseInfo = (c) => {
- const { currentPhaseNames, status, startDate, phases } = c
- /* let checkPhases = (currentPhases && currentPhases.length > 0 ? currentPhases : allPhases)
- if (_.isEmpty(checkPhases)) checkPhases = []
- let statusPhase = checkPhases
- .filter(p => p.phaseType !== 'Registration')
- .sort((a, b) => moment(a.scheduledEndTime).diff(b.scheduledEndTime))[0]
-
- if (!statusPhase && subTrack === 'FIRST_2_FINISH' && checkPhases.length) {
- statusPhase = Object.clone(checkPhases[0])
- statusPhase.phaseType = 'Submission'
- } */
- let phaseMessage = STALLED_MSG
- // if (statusPhase) phaseMessage = statusPhase.phaseType
- // else if (status === 'DRAFT') phaseMessage = DRAFT_MSG
- var lowerStatus = status.toLowerCase()
- if (lowerStatus === 'draft') {
- phaseMessage = DRAFT_MSG
- } else if (lowerStatus === 'active') {
- if (!currentPhaseNames || currentPhaseNames.length === 0) {
- var timeToStart = moment(startDate).diff()
- if (timeToStart > 0) {
- phaseMessage = `Scheduled in ${getFormattedDuration(timeToStart)}`
- }
- } else {
- phaseMessage = currentPhaseNames.join('/')
- }
- }
- const activePhases = phases.filter(p => !!p.isOpen)
- const activePhase = activePhases.length > 0 ? activePhases[0] : null
- const endTime = getTimeLeft(activePhase, lowerStatus)
- return { phaseMessage, endTime }
-}
-
/**
* Render components when mouse hover
* @param challenge
@@ -164,28 +95,21 @@ const hoverComponents = (challenge, onUpdateLaunch, deleteModalLaunch) => {
}
const renderStatus = (status, getStatusText) => {
- switch (status) {
+ const statusMessage = status.split(' ')[0]
+ switch (statusMessage) {
case CHALLENGE_STATUS.ACTIVE:
case CHALLENGE_STATUS.APPROVED:
case CHALLENGE_STATUS.NEW:
case CHALLENGE_STATUS.DRAFT:
case CHALLENGE_STATUS.COMPLETED:
- const statusText = getStatusText ? getStatusText(status) : status
- return (
{formatDate(challenge.updated)}
- {challenge.updatedBy}
-
- )
-}
-
class ChallengeCard extends React.Component {
constructor (props) {
super(props)
@@ -195,7 +119,8 @@ class ChallengeCard extends React.Component {
isDeleteLaunch: false,
isSaving: false,
isCheckChalengePermission: false,
- hasEditChallengePermission: false
+ hasEditChallengePermission: false,
+ loginUserRoleInProject: ''
}
this.onUpdateConfirm = this.onUpdateConfirm.bind(this)
this.onUpdateLaunch = this.onUpdateLaunch.bind(this)
@@ -278,11 +203,13 @@ class ChallengeCard extends React.Component {
render () {
const { isLaunch, isConfirm, isSaving, isDeleteLaunch, isCheckChalengePermission, hasEditChallengePermission } = this.state
- const { challenge, shouldShowCurrentPhase, reloadChallengeList, isBillingAccountExpired, disableHover, getStatusText } = this.props
- const { phaseMessage, endTime } = getPhaseInfo(challenge)
+ const { setActiveProject, challenge, reloadChallengeList, isBillingAccountExpired, disableHover, getStatusText, challengeTypes, loginUserRoleInProject } = this.props
const deleteMessage = isCheckChalengePermission
? 'Checking permissions...'
: `Do you want to delete "${challenge.name}"?`
+ const orUrl = `${ONLINE_REVIEW_URL}/review/actions/ViewProjectDetails?pid=${challenge.legacyId}`
+ const communityAppUrl = `${COMMUNITY_APP_URL}/challenges/${challenge.id}`
+ const isReadOnly = checkReadOnlyRoles(this.props.auth.token) || loginUserRoleInProject === PROJECT_ROLES.READ
return (
@@ -318,7 +245,7 @@ class ChallengeCard extends React.Component {
{isLaunch && isConfirm && (
+
+
+ setActiveProject(parseInt(challenge.projectId))}>
- {challenge.name}
-
- {renderLastUpdated(challenge)}
-
+
+ {formatDate(challenge.startDate)}
+
+
+ {formatDate(challenge.endDate)}
+
+
+ {challenge.numOfRegistrants}
+
+
+ {challenge.numOfSubmissions}
+
+
{renderStatus(challenge.status.toUpperCase(), getStatusText)}
-
- {shouldShowCurrentPhase && (
- {phaseMessage}
- {endTime}
- )}
- 
+ ) : null
+ }
+
+ resetFilter () {
+ const {
+ activeProjectId,
+ dashboard,
+ filterProjectOption,
+ selfService,
+ loadChallengesByPage
+ } = this.props
+
+ this.setState(_.cloneDeep(defaultSearchParam))
+
+ let projectId = dashboard ? filterProjectOption : activeProjectId
+
+ loadChallengesByPage(
+ 1,
+ projectId,
+ 'all',
+ '',
+ selfService,
+ this.getHandle(),
+ null,
+ {},
+ null,
+ null,
+ PAGE_SIZE
+ )
}
render () {
- const { searchText, errorMessage } = this.state
+ const {
+ searchText,
+ errorMessage,
+ challengeProjectOption,
+ challengeStatus,
+ challengeType,
+ challengeDate
+ } = this.state
+
const {
activeProject,
warnMessage,
challenges,
status,
page,
+ projects,
+ dashboard,
perPage,
+ isLoading,
totalChallenges,
partiallyUpdateChallengeDetails,
deleteChallenge,
isBillingAccountExpired,
+ setActiveProject,
billingStartDate,
billingEndDate,
isBillingAccountLoadingFailed,
isBillingAccountLoading,
- selfService
+ selfService,
+ challengeTypes,
+ loginUserRoleInProject
} = this.props
+ const isReadOnly = checkReadOnlyRoles(this.props.auth.token) || loginUserRoleInProject === PROJECT_ROLES.READ
+
if (warnMessage) {
return
-
- {(disableHover ? View Challenge : hoverComponents(challenge, this.onUpdateLaunch, this.deleteModalLaunch))}
-
-
)
@@ -362,19 +298,24 @@ class ChallengeCard extends React.Component {
}
ChallengeCard.defaultPrps = {
- shouldShowCurrentPhase: true,
- reloadChallengeList: () => { }
+ reloadChallengeList: () => { },
+ challengeTypes: [],
+ setActiveProject: () => {},
+ loginUserRoleInProject: ''
}
ChallengeCard.propTypes = {
challenge: PropTypes.object,
- shouldShowCurrentPhase: PropTypes.bool,
reloadChallengeList: PropTypes.func,
partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
+ setActiveProject: PropTypes.func,
deleteChallenge: PropTypes.func.isRequired,
isBillingAccountExpired: PropTypes.bool,
disableHover: PropTypes.bool,
- getStatusText: PropTypes.func
+ getStatusText: PropTypes.func,
+ challengeTypes: PropTypes.arrayOf(PropTypes.shape()),
+ auth: PropTypes.object.isRequired,
+ loginUserRoleInProject: PropTypes.string
}
export default withRouter(ChallengeCard)
diff --git a/src/components/ChallengesComponent/ChallengeList/ChallengeList.module.scss b/src/components/ChallengesComponent/ChallengeList/ChallengeList.module.scss
index 9f6755ba..05ac53a5 100644
--- a/src/components/ChallengesComponent/ChallengeList/ChallengeList.module.scss
+++ b/src/components/ChallengesComponent/ChallengeList/ChallengeList.module.scss
@@ -7,6 +7,20 @@
justify-content: space-between;
}
+.col-6 {
+ flex: 0 0 50%;
+ max-width: 50%;
+}
+
+.col-9 {
+ flex: 0 0 75%;
+ max-width: 75%;
+}
+
+.dashboardRow {
+ align-items: flex-end;
+}
+
.row {
display: flex;
justify-content: flex-end;
@@ -35,6 +49,57 @@
.inactive {
color: #BE405E;
}
+
+ .field {
+ @include upto-sm {
+ display: block;
+ padding-bottom: 10px;
+ }
+
+ label {
+ @include roboto-bold();
+
+ font-size: 16px;
+ line-height: 19px;
+ font-weight: 500;
+ color: $tc-gray-80;
+ }
+
+ &.input1 {
+ max-width: 185px;
+ min-width: 185px;
+ margin-right: 14px;
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ flex-grow: 1;
+
+ span {
+ color: $tc-red;
+ }
+ }
+
+ &.input2.error {
+ color: $tc-red;
+ margin-top: -25px;
+ }
+ &.input2 {
+ align-self: flex-end;
+ width: 50%;
+ margin-bottom: auto;
+ margin-top: auto;
+ display: flex;
+ flex-direction: row;
+ max-width: 500px;
+ min-width: 500px;
+ }
+
+ &.manageLink {
+ margin: 2px 12px;
+ text-decoration: none;
+ font-size: 12px;
+ }
+ }
}
.header {
@@ -43,34 +108,69 @@
display: flex;
justify-content: flex-start;
padding: 0 20px;
+ font-size: 14px;
+
+ gap: 30px;
+
+ .sortable {
+ display: flex;
+ cursor: pointer;
+ }
.col1 {
display: flex;
- justify-content: flex-start;
- align-items: center;
- flex: 6;
+ flex: 1;
+ flex-direction: column;
+ justify-content: center;
}
.col2 {
display: flex;
- justify-content: center;
- align-items: center;
flex: 2;
+ flex-direction: column;
+ justify-content: center;
}
.col3 {
display: flex;
- justify-content: flex-start;
- align-items: center;
- flex: 2;
+ flex: 1;
+ flex-direction: column;
+ justify-content: center;
}
.col4 {
display: flex;
- justify-content: flex-start;
- align-items: center;
- flex: 2;
+ width: 30px;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .col5 {
+ display: flex;
+ width: 80px;
+ flex-direction: column;
+ justify-content: center;
}
+
+ .col6 {
+ display: flex;
+ width: 40px;
+ flex-direction: column;
+ justify-content: center;
+ }
+}
+
+.challengeInput {
+ width: 60% !important;
+ max-width: 230px !important;
+}
+
+.searchInputWrapper {
+ display: flex;
+}
+
+.resetFilter {
+ margin-left: 35px;
}
@-moz-document url-prefix() {
@@ -116,22 +216,31 @@
.challengeItem {
list-style: none;
- min-height: 83px;
width: 100%;
border-top: 1px $gray solid;
padding: 10px 0;
+ font-size: 14px;
a {
text-decoration: none;
}
}
-.paginationContainer {
+.footer {
display: flex;
justify-content: flex-end;
margin-top: 30px;
}
+.perPageContainer {
+ margin-right: 20px;
+ max-width: 150px;
+}
+
+.paginationContainer {
+ display: flex;
+}
+
.modalContainer {
padding: 0;
position: fixed;
@@ -250,3 +359,26 @@
}
}
}
+
+.sortIcon {
+ width: 14px;
+ height: 12px;
+ margin-left: 5px;
+ margin-top: 2px;
+ height: 100%;
+
+ &.asc {
+ transform: rotate(180deg);
+ }
+}
+
+.filterItem {
+ display: flex;
+}
+
+.to {
+ margin: 0 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
diff --git a/src/components/ChallengesComponent/ChallengeList/index.js b/src/components/ChallengesComponent/ChallengeList/index.js
index 5feec134..ceb592ad 100644
--- a/src/components/ChallengesComponent/ChallengeList/index.js
+++ b/src/components/ChallengesComponent/ChallengeList/index.js
@@ -1,29 +1,43 @@
/**
* Component to render list of challenges
*/
-import { debounce, map } from 'lodash'
+import _, { debounce, map } from 'lodash'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { DebounceInput } from 'react-debounce-input'
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faFile, faUser } from '@fortawesome/free-solid-svg-icons'
+import isAfter from 'date-fns/isAfter'
+import DateTime from '@nateradebaugh/react-datetime'
import Pagination from 'react-js-pagination'
import cn from 'classnames'
-import { PrimaryButton } from '../../Buttons'
+import { OutlineButton, PrimaryButton } from '../../Buttons'
import Modal from '../../Modal'
import 'react-tabs/style/react-tabs.css'
import styles from './ChallengeList.module.scss'
import NoChallenge from '../NoChallenge'
import ChallengeCard from '../ChallengeCard'
import Message from '../Message'
+import SortIcon from '../../../assets/images/sort-icon.svg'
+import Select from '../../Select'
+import Loader from '../../Loader'
-import {
- CHALLENGE_STATUS
-} from '../../../config/constants'
-import { checkAdmin } from '../../../util/tc'
+import { CHALLENGE_STATUS, PAGE_SIZE, PAGINATION_PER_PAGE_OPTIONS, PROJECT_ROLES } from '../../../config/constants'
+import { checkAdmin, checkReadOnlyRoles } from '../../../util/tc'
require('bootstrap/scss/bootstrap.scss')
+const defaultSearchParam = {
+ searchText: '',
+ challengeProjectOption: null,
+ challengeStatus: '',
+ challengeType: null,
+ sortBy: 'startDate',
+ sortOrder: 'desc',
+ challengeDate: {}
+}
+
const theme = {
container: styles.modalContainer
}
@@ -31,16 +45,28 @@ const theme = {
class ChallengeList extends Component {
constructor (props) {
super(props)
+
+ const defaultSearchParamClone = _.cloneDeep(defaultSearchParam)
this.state = {
- searchText: this.props.filterChallengeName,
- errorMessage: null
+ searchText: this.props.filterChallengeName || defaultSearchParamClone.searchText,
+ errorMessage: null,
+ sortBy: this.props.filterSortBy || defaultSearchParamClone.sortBy,
+ sortOrder: this.props.filterSortOrder || defaultSearchParamClone.sortOrder,
+ challengeProjectOption: this.props.filterProjectOption || defaultSearchParamClone.challengeProjectOption,
+ challengeStatus: this.props.status || defaultSearchParamClone.challengeStatus,
+ challengeType: this.props.filterChallengeType || defaultSearchParamClone.challengeType,
+ challengeDate: this.props.filterDate || defaultSearchParamClone.challengeDate
}
this.directUpdateSearchParam = this.updateSearchParam.bind(this) // update search param without debounce
this.handlePageChange = this.handlePageChange.bind(this) // update search param without debounce
+ this.handlePerPageChange = this.handlePerPageChange.bind(this)
this.showError = this.showError.bind(this)
this.hideError = this.hideError.bind(this)
this.reloadChallengeList = this.reloadChallengeList.bind(this)
this.updateSearchParam = debounce(this.updateSearchParam.bind(this), 1000)
+ this.updateSort = this.updateSort.bind(this)
+ this.update = debounce(this.updateSearchParam.bind(this), 1000)
+ this.resetFilter = this.resetFilter.bind(this)
}
/**
@@ -48,24 +74,127 @@ class ChallengeList extends Component {
* @param {String} searchText search text
* @param {String} projectStatus project status
*/
- updateSearchParam (searchText, projectStatus) {
- const { status, filterChallengeName, loadChallengesByPage, activeProjectId, selfService } = this.props
- this.setState({ searchText }, () => {
- if (status !== projectStatus || searchText !== filterChallengeName) {
- loadChallengesByPage(1, activeProjectId, projectStatus, searchText, selfService, this.getHandle())
+ updateSearchParam (
+ searchText,
+ projectStatus,
+ challengeType = {},
+ challengeDate = {},
+ projectOption = {}
+ ) {
+ const {
+ dashboard,
+ status,
+ filterChallengeName,
+ filterChallengeType,
+ filterProjectOption,
+ filterDate,
+ loadChallengesByPage,
+ activeProjectId,
+ selfService
+ } = this.props
+ let projectId = dashboard ? projectOption : activeProjectId
+ this.setState(
+ {
+ searchText,
+ challengeProjectOption: projectOption,
+ challengeStatus: projectStatus,
+ challengeType,
+ challengeDate
+ },
+ () => {
+ if (
+ status !== projectStatus ||
+ searchText !== filterChallengeName ||
+ (projectOption || {}).value !== (filterProjectOption || {}).value ||
+ (challengeType || {}).value !== (filterChallengeType || {}).value ||
+ !_.isEqual(filterDate, challengeDate)
+ ) {
+ loadChallengesByPage(
+ 1,
+ projectId,
+ !projectStatus ? 'all' : projectStatus,
+ searchText,
+ selfService,
+ this.getHandle(),
+ challengeType,
+ challengeDate
+ )
+ }
}
- })
+ )
}
/**
* Update filter for getting project by pagination
- * @param {Number} pageNumber page numer
+ * @param {Number} pageNumber page number
*/
handlePageChange (pageNumber) {
- const { searchText } = this.state
- const { page, loadChallengesByPage, activeProjectId, status, selfService } = this.props
+ const { searchText, sortBy, sortOrder } = this.state
+ const {
+ page,
+ perPage,
+ loadChallengesByPage,
+ activeProjectId,
+ dashboard,
+ filterProjectOption,
+ status,
+ selfService,
+ filterChallengeType,
+ filterDate
+ } = this.props
+
+ let projectId = dashboard ? filterProjectOption : activeProjectId
if (page !== pageNumber) {
- loadChallengesByPage(pageNumber, activeProjectId, status, searchText, selfService, this.getHandle())
+ loadChallengesByPage(
+ pageNumber,
+ projectId,
+ status,
+ searchText,
+ selfService,
+ this.getHandle(),
+ filterChallengeType,
+ filterDate,
+ sortBy,
+ sortOrder,
+ perPage
+ )
+ }
+ }
+
+ /**
+ * Update filter for getting project by pagination
+ * @param {Number} perPageNumber per page number
+ */
+ handlePerPageChange (option) {
+ const perPageNumber = option.value
+ const { searchText, sortBy, sortOrder } = this.state
+ const {
+ perPage,
+ loadChallengesByPage,
+ activeProjectId,
+ dashboard,
+ filterProjectOption,
+ status,
+ selfService,
+ filterChallengeType,
+ filterDate
+ } = this.props
+
+ let projectId = dashboard ? filterProjectOption : activeProjectId
+ if (perPage !== perPageNumber) {
+ loadChallengesByPage(
+ 1,
+ projectId,
+ status,
+ searchText,
+ selfService,
+ this.getHandle(),
+ filterChallengeType,
+ filterDate,
+ sortBy,
+ sortOrder,
+ perPageNumber
+ )
}
}
@@ -74,8 +203,21 @@ class ChallengeList extends Component {
*/
reloadChallengeList () {
const { searchText } = this.state
- const { page, loadChallengesByPage, activeProjectId, status, selfService } = this.props
- loadChallengesByPage(page, activeProjectId, status, searchText, selfService, this.getHandle())
+ const {
+ page,
+ loadChallengesByPage,
+ activeProjectId,
+ status,
+ selfService
+ } = this.props
+ loadChallengesByPage(
+ page,
+ activeProjectId,
+ status,
+ searchText,
+ selfService,
+ this.getHandle()
+ )
}
/**
@@ -95,7 +237,7 @@ class ChallengeList extends Component {
getStatusTextFunc (selfService) {
const draftText = selfService ? 'Waiting for approval' : 'Draft'
- return (status) => {
+ return status => {
switch (status) {
case CHALLENGE_STATUS.DRAFT:
return draftText
@@ -109,32 +251,147 @@ class ChallengeList extends Component {
if (checkAdmin(this.props.auth.token)) {
return null
}
- return this.props.auth && this.props.auth.user ? this.props.auth.user.handle : null
+ return this.props.auth && this.props.auth.user
+ ? this.props.auth.user.handle
+ : null
+ }
+
+ /**
+ * Hide error message
+ */
+ updateSort (name) {
+ const {
+ searchText,
+ challengeType,
+ sortBy,
+ sortOrder,
+ challengeDate
+ } = this.state
+ const {
+ page,
+ activeProjectId,
+ status,
+ dashboard,
+ filterProjectOption,
+ selfService,
+ loadChallengesByPage
+ } = this.props
+ let order = sortOrder === 'asc' ? 'desc' : 'asc'
+
+ if (sortBy !== name) {
+ order = 'desc'
+ }
+
+ let projectId = dashboard ? filterProjectOption : activeProjectId
+ loadChallengesByPage(
+ page,
+ projectId,
+ status,
+ searchText,
+ selfService,
+ this.getHandle(),
+ challengeType,
+ challengeDate,
+ name,
+ order
+ )
+
+ this.setState({
+ sortBy: name,
+ sortOrder: order
+ })
+ }
+
+ renderSortIcon (currentSortBy) {
+ const { sortBy, sortOrder } = this.state
+ return sortBy === currentSortBy ? (
+
-
-
-
+ {
+ !isReadOnly && (
+
+ {(disableHover ? Edit : hoverComponents(challenge, this.onUpdateLaunch, this.deleteModalLaunch))}
+
+ )
+ }
+
+ OR
+
+
+ CA
-
Error
- {errorMessage}
-
-
-
+
-
+
+ )
+ }
+ let projectOptions
+ let projectOption
+ if (dashboard) {
+ projectOptions = projects.map(p => {
+ return {
+ label: p.name,
+ value: p.id
+ }
+ })
+ projectOptions.unshift({
+ label: 'All Projects',
+ value: -1
+ })
+
+ let projectId = (challengeProjectOption && challengeProjectOption.value) || -1
+ projectOption = projectOptions.find(p => p.value === projectId)
}
return (
+
- Error
+ {errorMessage}
+
+
+
-
- {!isBillingAccountLoading && !isBillingAccountLoadingFailed && !isBillingAccountExpired && (
-
- Billing Account: ACTIVE Start Date: {billingStartDate} End Date: {billingEndDate}
+ {dashboard &&
My Challenges
} +
+ {!dashboard &&
+ !isBillingAccountLoading &&
+ !isBillingAccountLoadingFailed &&
+ !isBillingAccountExpired && (
+
+ Billing Account:
+ ACTIVE {' '}
+ Start Date:{' '}
+ {billingStartDate} {' '}
+ End Date: {billingEndDate}
)}
- {!isBillingAccountLoading && !isBillingAccountLoadingFailed && isBillingAccountExpired && (
-
- Billing Account: INACTIVE Start Date: {billingStartDate} End Date: {billingEndDate}
+ {!dashboard &&
+ !isBillingAccountLoading &&
+ !isBillingAccountLoadingFailed &&
+ isBillingAccountExpired && (
+ {
- switch (index) {
- case 0: {
- this.directUpdateSearchParam(searchText, CHALLENGE_STATUS.ACTIVE)
- break
- }
- case 1: {
- const status = selfService ? CHALLENGE_STATUS.APPROVED : CHALLENGE_STATUS.NEW
- this.directUpdateSearchParam(searchText, status)
- break
- }
- case 2: {
- this.directUpdateSearchParam(searchText, CHALLENGE_STATUS.DRAFT)
- break
- }
- case 3: {
- const status = selfService ? CHALLENGE_STATUS.NEW : CHALLENGE_STATUS.COMPLETED
- this.directUpdateSearchParam(searchText, status)
- break
- }
- case 4: {
- this.directUpdateSearchParam(searchText, CHALLENGE_STATUS.CANCELLED)
- break
- }
- }
- }}>
- {
- selfService &&
- {(selfService ? 'Assigned challenges' : 'Active')}
- {(selfService ? 'Approved' : 'New')}
- {this.getStatusTextFunc(selfService)(CHALLENGE_STATUS.DRAFT)}
- {(!selfService && Completed )}
- {(!selfService && Cancelled )}
- {
- selfService && checkAdmin(this.props.auth.token) && Draft
- }
-
- )}
- {
- challenges.length === 0 && (
-
+ Billing Account:
+ INACTIVE {' '}
+ Start Date:{' '}
+ {billingStartDate} {' '}
+ End Date: {billingEndDate}
)}
- {!isBillingAccountLoading && isBillingAccountLoadingFailed && (
- Billing Account failed to load
+ {!dashboard &&
+ !isBillingAccountLoading &&
+ isBillingAccountLoadingFailed && (
+
+
+ Billing Account failed to load
+
+
)}
-
- this.updateSearchParam(e.target.value, status)}
- value={searchText}
- />
+ {dashboard && (
+
- {activeProject && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ this.updateSearchParam(
+ e.target.value,
+ status,
+ challengeType,
+ challengeDate,
+ projectOption
+ )
+ }
+ value={searchText}
+ />
+
+
+ Total Challenges: {totalChallenges}
- } -
-
+
Challenge Name
- Last Updated
- Status
- {(selectedTab === 0) && (Current phase
)}
-
+
+
+
+
+
- )
- }
- {
- challenges.length > 0 && (
- -
- {
- map(challenges, (c) => {
- return (
-
-
-
-
+
+
+
+
+
+
+
+
+
+ this.updateSearchParam(
+ searchText,
+ status,
+ challengeType,
+ {
+ ...challengeDate,
+ startDateStart: e
+ },
+ projectOption
+ )
+ }
+ />
+
+ {
+ return isAfter(current, challengeDate.startDateStart)
+ }}
+ onChange={e =>
+ this.updateSearchParam(
+ searchText,
+ status,
+ challengeType,
+ {
+ ...challengeDate,
+ startDateEnd: e
+ },
+ projectOption
+ )
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ this.updateSearchParam(
+ searchText,
+ status,
+ challengeType,
+ {
+ ...challengeDate,
+ endDateStart: e
+ },
+ projectOption
+ )
+ }
+ />
+
+ {
+ return isAfter(current, challengeDate.endDateStart)
+ }}
+ onChange={e =>
+ this.updateSearchParam(
+ searchText,
+ status,
+ challengeType,
+ {
+ ...challengeDate,
+ endDateEnd: e
+ },
+ projectOption
+ )
+ }
+ />
+
+
+ ) : null}
+
+
+
+
+ {isLoading
+ ? this.updateSort('type')}
+ >
+
+ Type
+ {this.renderSortIcon('type')}
+
+
+ this.updateSort('name')}
+ >
+
+ Challenge Name
+ {this.renderSortIcon('name')}
+
+
+ this.updateSort('startDate')}
+ >
+
+ Start Date
+ {this.renderSortIcon('startDate')}
+
+
+ this.updateSort('endDate')}
+ >
+
+ End Date
+ {this.renderSortIcon('endDate')}
+
+
+ this.updateSort('numOfRegistrants')}
+ >
+
+
+ this.updateSort('numOfSubmissions')}
+ >
+
+
+ this.updateSort('status')}
+ >
+
+ Status
+ {this.renderSortIcon('status')}
+
+
+ {!isReadOnly ? (-
+ {map(challenges, c => {
+ return (
+
-
+
+
+ )
+ })}
+
-
@@ -307,19 +830,28 @@ class ChallengeList extends Component {
}
ChallengeList.defaultProps = {
+ isLoading: false,
+ loginUserRoleInProject: ''
}
ChallengeList.propTypes = {
challenges: PropTypes.arrayOf(PropTypes.object),
+ projects: PropTypes.arrayOf(PropTypes.object),
activeProject: PropTypes.shape({
id: PropTypes.number,
name: PropTypes.string
}),
warnMessage: PropTypes.string,
filterChallengeName: PropTypes.string,
+ filterChallengeType: PropTypes.shape(),
+ filterDate: PropTypes.shape(),
+ filterSortBy: PropTypes.string,
+ filterSortOrder: PropTypes.string,
status: PropTypes.string,
activeProjectId: PropTypes.number,
+ filterProjectOption: PropTypes.shape(),
loadChallengesByPage: PropTypes.func.isRequired,
+ setActiveProject: PropTypes.func.isRequired,
page: PropTypes.number.isRequired,
perPage: PropTypes.number.isRequired,
totalChallenges: PropTypes.number.isRequired,
@@ -327,11 +859,15 @@ ChallengeList.propTypes = {
deleteChallenge: PropTypes.func.isRequired,
isBillingAccountExpired: PropTypes.bool,
billingStartDate: PropTypes.string,
+ isLoading: PropTypes.bool,
billingEndDate: PropTypes.string,
isBillingAccountLoadingFailed: PropTypes.bool,
isBillingAccountLoading: PropTypes.bool,
+ dashboard: PropTypes.bool,
selfService: PropTypes.bool,
- auth: PropTypes.object.isRequired
+ auth: PropTypes.object.isRequired,
+ challengeTypes: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+ loginUserRoleInProject: PropTypes.string
}
export default ChallengeList
diff --git a/src/components/ChallengesComponent/ChallengeStatus/ChallengeStatus.module.scss b/src/components/ChallengesComponent/ChallengeStatus/ChallengeStatus.module.scss
index 12ac0156..5d29d46c 100644
--- a/src/components/ChallengesComponent/ChallengeStatus/ChallengeStatus.module.scss
+++ b/src/components/ChallengesComponent/ChallengeStatus/ChallengeStatus.module.scss
@@ -37,5 +37,9 @@
&.yellow {
background-color: $status-yellow;
}
+
+ &.red {
+ background-color: $tc-red;
+ }
}
diff --git a/src/components/ChallengesComponent/ChallengeStatus/index.js b/src/components/ChallengesComponent/ChallengeStatus/index.js
index a5d074ea..4290670f 100644
--- a/src/components/ChallengesComponent/ChallengeStatus/index.js
+++ b/src/components/ChallengesComponent/ChallengeStatus/index.js
@@ -15,7 +15,8 @@ const statuses = {
[CHALLENGE_STATUS.APPROVED]: styles.yellow,
[CHALLENGE_STATUS.NEW]: styles.yellow,
[CHALLENGE_STATUS.DRAFT]: styles.gray,
- [CHALLENGE_STATUS.COMPLETED]: styles.blue
+ [CHALLENGE_STATUS.COMPLETED]: styles.blue,
+ [CHALLENGE_STATUS.CANCELLED]: styles.red
}
const ChallengeStatus = ({ status, statusText }) => {
diff --git a/src/components/ChallengesComponent/ChallengeTag/ChallengeTag.module.scss b/src/components/ChallengesComponent/ChallengeTag/ChallengeTag.module.scss
index 5b1a629e..d7c38e7a 100644
--- a/src/components/ChallengesComponent/ChallengeTag/ChallengeTag.module.scss
+++ b/src/components/ChallengesComponent/ChallengeTag/ChallengeTag.module.scss
@@ -1,40 +1,69 @@
@import '../../../styles/includes';
-.tag {
- display: inline-block;
- padding: 0 15px;
- border-radius: 3px;
- background-color: $lighter-gray;
- min-width: 54px;
- text-align: center;
- max-height: 22px;
- height: 22px;
- margin: 5px 0;
- color: $dark-gray;
-
- span {
- font-size: 15px;
- line-height: 22px;
- vertical-align: top;
+$base-unit: 5px;
+$track-space-10: $base-unit * 2;
+$track-space-15: $base-unit * 3;
+$track-space-20: $base-unit * 4;
+$track-code-pad: ($base-unit * 2) - 2;
+$corner-radius: 2px;
+
+.trackIcon {
+ display: flex;
+ width: $base-unit * 6 + 2;
+ height: $base-unit * 6 + 2;
+ margin-right: $track-space-20;
+ flex-direction: column;
+
+ .mainIcon {
+ @include tc-label-md;
+
+ text-align: center;
+ line-height: $track-space-15;
+ color: $white;
+ padding: $track-code-pad - 1 0 $track-code-pad;
+ border-radius: 4px;
+ width: 100%;
+ height: 100%;
+
+ &.CH {
+ background: $tc-green-40;
+ }
+
+ &.F2F {
+ background: $tc-blue-30;
+ }
+
+ &.TSK {
+ background: $tc-turquose-30;
+ }
+
+ &.MM {
+ background: $track-code-red;
+ }
+
+ &.RDM {
+ background: $track-code-purple;
+ }
+
+ &.SKL {
+ background: $track-code-purplish;
+ }
+
+ &.SRM {
+ background: $track-code-yellow;
+ }
+
+ &.PC {
+ background: $track-code-grey;
+ }
+
+ &.MA {
+ background: $track-code-grey;
+ }
+
+ &.withTco {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
}
-}
-
-.dataScience {
- color: $white;
- background-color: $orange;
-}
-
-.development {
- color: $white;
- background-color: $green;
-}
-
-.qa {
- color: $white;
- background-color: $green;
-}
-
-.design {
- color: $white;
- background-color: $light-blue;
-}
+}
\ No newline at end of file
diff --git a/src/components/ChallengesComponent/ChallengeTag/index.js b/src/components/ChallengesComponent/ChallengeTag/index.js
index e5d73e5f..2bc95c8d 100644
--- a/src/components/ChallengesComponent/ChallengeTag/index.js
+++ b/src/components/ChallengesComponent/ChallengeTag/index.js
@@ -1,30 +1,33 @@
import React from 'react'
import PropTypes from 'prop-types'
-import cn from 'classnames'
-import styles from './ChallengeTag.module.scss'
-
-import { CHALLENGE_TRACKS } from '../../../config/constants'
-const ChallengeTag = ({ track, challengeType }) => {
- const className = cn(styles.tag, {
- [styles.dataScience]: track === CHALLENGE_TRACKS.DATA_SCIENCE,
- [styles.development]: track === CHALLENGE_TRACKS.DEVELOP,
- [styles.design]: track === CHALLENGE_TRACKS.DESIGN,
- [styles.qa]: track === CHALLENGE_TRACKS.QA
- })
+import styles from './ChallengeTag.module.scss'
+import { getChallengeTypeAbbr } from '../../../util/tc'
+export default function ChallengeTag ({
+ type, challengeTypes
+}) {
+ let abbreviation = getChallengeTypeAbbr(type, challengeTypes)
+ if (['CH', 'F2F', 'TSK', 'MM', 'RDM', 'SKL', 'MA', 'SRM', 'PC'].indexOf(abbreviation) < 0) {
+ abbreviation = ''
+ }
return (
-
+
{warningModal}
+
+
+
+
-
-
- {challengeType}
+
+
+
)
}
-ChallengeTag.propTypes = {
- track: PropTypes.string,
- challengeType: PropTypes.string
+ChallengeTag.defaultProps = {
+ type: 'Development',
+ challengeTypes: []
}
-export default ChallengeTag
+ChallengeTag.propTypes = {
+ type: PropTypes.string,
+ challengeTypes: PropTypes.arrayOf(PropTypes.shape())
+}
diff --git a/src/components/ChallengesComponent/ChallengesComponent.module.scss b/src/components/ChallengesComponent/ChallengesComponent.module.scss
index c779d15b..291401c1 100644
--- a/src/components/ChallengesComponent/ChallengesComponent.module.scss
+++ b/src/components/ChallengesComponent/ChallengesComponent.module.scss
@@ -3,7 +3,7 @@
.challenges {
width: 100%;
box-sizing: border-box;
- padding: 30px;
+ padding: 20px 30px 30px 30px;
}
.title {
@@ -11,27 +11,32 @@
font-size: 24px;
font-weight: 700;
- margin-right: 5px;
+ margin-right: 8px;
line-height: 29px;
color: $challenges-title;
- text-align: center;
+ text-align: left;
}
.titleContainer {
margin-top: 30px;
display: flex;
justify-content: space-between;
- align-items: center;
- padding: 0 20px;
+ padding: 0 30px;
}
.titleLinks {
- align-items: center;
+ align-items: flex-start;
display: flex;
+ span {
+ min-width: 14%;
+ margin-top: 3px;
+ }
+
> span a {
margin: 2px 5px 0;
+ min-width: 24%;
}
> a + a {
@@ -40,7 +45,7 @@
}
.buttonLaunchNew {
- min-width: 135px;
+ min-width: 169px;
height: 40px;
text-decoration: none;
diff --git a/src/components/ChallengesComponent/index.js b/src/components/ChallengesComponent/index.js
index 291376db..6fa3adc0 100644
--- a/src/components/ChallengesComponent/index.js
+++ b/src/components/ChallengesComponent/index.js
@@ -1,24 +1,32 @@
/**
* Component to render Challenges page
*/
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import _ from 'lodash'
import PropTypes from 'prop-types'
-import Sticky from 'react-stickynode'
import { Helmet } from 'react-helmet'
import { Link } from 'react-router-dom'
-import { CONNECT_APP_URL } from '../../config/constants'
+import { CONNECT_APP_URL, PROJECT_ROLES } from '../../config/constants'
import { PrimaryButton } from '../Buttons'
import ChallengeList from './ChallengeList'
import styles from './ChallengesComponent.module.scss'
-import Loader from '../Loader'
import xss from 'xss'
+import { checkReadOnlyRoles } from '../../util/tc'
const ChallengesComponent = ({
challenges,
+ projects,
isLoading,
+ setActiveProject,
warnMessage,
filterChallengeName,
+ filterChallengeType,
+ filterDate,
+ filterSortBy,
+ filterSortOrder,
activeProject,
+ filterProjectOption,
+ dashboard,
status,
loadChallengesByPage,
activeProjectId,
@@ -33,71 +41,98 @@ const ChallengesComponent = ({
isBillingAccountLoadingFailed,
isBillingAccountLoading,
selfService,
- auth
+ auth,
+ challengeTypes
}) => {
+ const [loginUserRoleInProject, setLoginUserRoleInProject] = useState('')
+ const isReadOnly = checkReadOnlyRoles(auth.token) || loginUserRoleInProject === PROJECT_ROLES.READ
+
+ useEffect(() => {
+ const loggedInUser = auth.user
+ const projectMembers = activeProject.members
+ const loginUserProjectInfo = _.find(projectMembers, { userId: loggedInUser.userId })
+ if (loginUserProjectInfo && loginUserRoleInProject !== loginUserProjectInfo.role) {
+ setLoginUserRoleInProject(loginUserProjectInfo.role)
+ }
+ }, [activeProject, auth])
+
return (
-
+ {abbreviation === 'PC' ? 'P' : abbreviation}
-
-
-
- ))
+ const projectComponents =
+ !dashboard &&
+ projects.map(p => (
+
+
+ ))
return (
-
)
}
}
+Challenges.defaultProps = {
+ isLoading: false
+}
+
Challenges.propTypes = {
projects: PropTypes.arrayOf(PropTypes.shape()),
menu: PropTypes.string,
@@ -187,13 +216,17 @@ Challenges.propTypes = {
projectId: PropTypes.string,
activeProjectId: PropTypes.number,
warnMessage: PropTypes.string,
+ filterChallengeType: PropTypes.shape(),
filterChallengeName: PropTypes.string,
+ filterProjectOption: PropTypes.shape(),
+ filterDate: PropTypes.shape(),
+ filterSortBy: PropTypes.string,
+ filterSortOrder: PropTypes.string,
status: PropTypes.string,
resetSidebarActiveParams: PropTypes.func,
page: PropTypes.number.isRequired,
perPage: PropTypes.number.isRequired,
totalChallenges: PropTypes.number.isRequired,
- loadProjects: PropTypes.func.isRequired,
setActiveProject: PropTypes.func.isRequired,
partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
deleteChallenge: PropTypes.func.isRequired,
@@ -203,7 +236,12 @@ Challenges.propTypes = {
isBillingAccountLoadingFailed: PropTypes.bool,
isBillingAccountLoading: PropTypes.bool,
selfService: PropTypes.bool,
- auth: PropTypes.object.isRequired
+ dashboard: PropTypes.bool,
+ auth: PropTypes.object.isRequired,
+ loadChallengeTypes: PropTypes.func,
+ metadata: PropTypes.shape({
+ challengeTypes: PropTypes.array
+ })
}
const mapStateToProps = ({ challenges, sidebar, projects, auth }) => ({
@@ -217,7 +255,8 @@ const mapStateToProps = ({ challenges, sidebar, projects, auth }) => ({
billingEndDate: projects.billingEndDate,
isBillingAccountLoadingFailed: projects.isBillingAccountLoadingFailed,
isBillingAccountLoading: projects.isBillingAccountLoading,
- auth: auth
+ auth: auth,
+ metadata: challenges.metadata
})
const mapDispatchToProps = {
@@ -225,6 +264,7 @@ const mapDispatchToProps = {
resetSidebarActiveParams,
loadProject,
loadProjects,
+ loadChallengeTypes,
setActiveProject,
partiallyUpdateChallengeDetails,
deleteChallenge
diff --git a/src/containers/FooterContainer/index.js b/src/containers/FooterContainer/index.js
new file mode 100644
index 00000000..190061b6
--- /dev/null
+++ b/src/containers/FooterContainer/index.js
@@ -0,0 +1,16 @@
+/**
+ * Container to provide user info to TopBar component
+ */
+import React, { Component } from 'react'
+import TopcoderFooter from '../../components/TopcoderFooter'
+
+class FooterContainer extends Component {
+ render () {
+ return renderApp(
renderApp(
- renderApp(
+ renderApp(
+ renderApp(
renderApp(
- renderApp(
+ renderApp(
renderApp(
- }
+ */
+export const wait = (ms) => {
+ return new Promise((resolve) => {
+ setTimeout(resolve, ms)
+ })
+}
diff --git a/src/util/tc.js b/src/util/tc.js
index 9760a5de..c011f3af 100644
--- a/src/util/tc.js
+++ b/src/util/tc.js
@@ -6,7 +6,8 @@ import {
CHALLENGE_TRACKS,
ALLOWED_USER_ROLES,
ADMIN_ROLES,
- SUBMITTER_ROLE_UUID
+ SUBMITTER_ROLE_UUID,
+ READ_ONLY_ROLES
} from '../config/constants'
import _ from 'lodash'
import { decodeToken } from 'tc-auth-lib'
@@ -149,6 +150,18 @@ export const getDomainTypes = (trackId) => {
export const checkAllowedRoles = roles =>
roles.some(val => ALLOWED_USER_ROLES.indexOf(val.toLowerCase()) > -1)
+/**
+ * Checks if read only role is present in allowed roles
+ * @param token
+ */
+export const checkReadOnlyRoles = token => {
+ const roles = _.get(decodeToken(token), 'roles')
+ if (checkAllowedRoles(roles)) {
+ return false
+ }
+ return roles.some(val => READ_ONLY_ROLES.indexOf(val.toLowerCase()) > -1)
+}
+
/**
* Checks if token has any of the admin roles
* @param token
@@ -244,3 +257,15 @@ export function getFinalScore (submission) {
}
return finalScore
}
+
+/**
+ * Get challenge type abbreviation
+ * @param {Object} challenge challenge info
+ */
+export function getChallengeTypeAbbr (track, challengeTypes) {
+ const type = _.find(challengeTypes, { name: track })
+ if (type) {
+ return type.abbreviation
+ }
+ return null
+}
diff --git a/src/util/url.js b/src/util/url.js
new file mode 100644
index 00000000..c8f14a9e
--- /dev/null
+++ b/src/util/url.js
@@ -0,0 +1,9 @@
+/**
+ * Get initials from user profile
+ * @param {String} firstName first name
+ * @param {String} lastName last name
+ * @returns {String}
+ */
+export function getInitials (firstName = '', lastName = '') {
+ return `${firstName.slice(0, 1)}${lastName.slice(0, 1)}`
+}
-
-
-
- {activeProject && activeProject.id && (
-
- (View Project)
-
- )}
-
- {(activeProject && activeProject.id) ? (
-
-
- {isLoading ? (
-
)}
@@ -41,6 +42,7 @@ AlertModal.propTypes = {
message: PropTypes.string,
theme: PropTypes.shape(),
onClose: PropTypes.func,
+ onOk: PropTypes.func,
closeText: PropTypes.string,
closeLink: PropTypes.string,
okText: PropTypes.string,
diff --git a/src/components/Modal/ConfirmationModal.module.scss b/src/components/Modal/ConfirmationModal.module.scss
index 38d46ea2..0fc48a82 100644
--- a/src/components/Modal/ConfirmationModal.module.scss
+++ b/src/components/Modal/ConfirmationModal.module.scss
@@ -58,9 +58,10 @@
width: 193px;
height: 40px;
margin-right: 33px;
-
+
span {
- font-size: 18px;
+ font-size: 16px;
+ line-height: 1;
font-weight: 500;
}
}
diff --git a/src/components/PhaseInput/index.js b/src/components/PhaseInput/index.js
index aeaa8619..7eb3c48b 100644
--- a/src/components/PhaseInput/index.js
+++ b/src/components/PhaseInput/index.js
@@ -1,5 +1,5 @@
import moment from 'moment'
-import React from 'react'
+import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import styles from './PhaseInput.module.scss'
import cn from 'classnames'
@@ -31,6 +31,18 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
})
}
+ useEffect(() => {
+ if (!startDate && onUpdatePhase) {
+ let startDate = moment().format(dateFormat)
+ let endDate = getEndDate(startDate, duration)
+ onUpdatePhase({
+ startDate,
+ endDate,
+ duration
+ })
+ }
+ }, [startDate])
+
const onDurationChange = (e, isBlur = false) => {
if (e.length > MAX_LENGTH) return null
diff --git a/src/components/Tab/Tab.module.scss b/src/components/Tab/Tab.module.scss
new file mode 100644
index 00000000..f8af09a0
--- /dev/null
+++ b/src/components/Tab/Tab.module.scss
@@ -0,0 +1,145 @@
+@import "../../styles/includes";
+
+.tabs {
+ margin: 0 20px;
+
+ > h1 {
+ @include roboto-bold();
+
+ font-weight: 400;
+ color: #2a2a2a;
+ font-size: 32px;
+ margin: 32px 0 24px;
+ line-height: 32px;
+ font-weight: 600;
+ text-transform: uppercase;
+ }
+
+ hr {
+ border: none;
+ height: 1px;
+ background-color: #e5e5e5;
+ margin: 0;
+ }
+}
+
+.mobileTabExpanded {
+ margin: 0 16px;
+ background-color: #eaf6fd;
+
+ .item {
+ height: 40px;
+ margin: 0;
+
+ p {
+ // @include barlow-bold;
+
+ font-weight: 600;
+ color: #555;
+ font-size: 14px;
+ line-height: 20px;
+ text-transform: uppercase;
+ padding-left: 16px;
+ padding-top: 10px;
+ }
+ }
+
+ .active {
+ background-color: #bae1f9;
+
+ p {
+ color: #2a2a2a;
+ font-weight: 700;
+ }
+ }
+}
+
+.challengeTab {
+ display: flex;
+ height: 42px;
+ padding: 0px;
+ margin-top: 24px;
+ background-color: #eaf6fd;
+ border-radius: 4px 4px 0 0;
+ border-bottom: 1px solid #d4d4d4;
+ position: relative;
+
+ .item {
+ // @include barlow;
+
+ font-weight: 600;
+ font-size: 14px;
+ color: #555;
+ line-height: 20px;
+ padding: 12px 16px 10px 16px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+
+ &:not(.active):hover {
+ background-color: #bae1f9;
+ }
+ }
+
+ .active {
+ color: #0c0c0c;
+ font-weight: 700;
+
+ &::after {
+ content: "";
+ background-image: url(../../assets/images/nav-active-item.svg);
+ height: 10px;
+ width: 40px;
+ margin-top: 10px;
+ justify-content: center;
+ z-index: 100;
+ display: block;
+ position: absolute;
+ top: 31px;
+ }
+ }
+}
+
+.mobileTabContainer {
+ background-color: #eaf6fd;
+ height: 40px;
+ margin-top: 32px;
+ display: flex;
+ justify-content: space-between;
+ border-radius: 4px 4px 0 0;
+ border-bottom: 1px solid #d4d4d4;
+
+ .title {
+ // @include barlow-bold;
+
+ font-weight: 700;
+ color: #0c0c0c;
+ font-size: 14px;
+ line-height: 20px;
+ text-transform: uppercase;
+ padding-left: 16px;
+ padding-top: 10px;
+ }
+
+ .icon {
+ width: 16px;
+ height: 9px;
+ margin-right: 15px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-self: center;
+ cursor: pointer;
+ transform: scale(1.5);
+ }
+
+ .down {
+ transform: scale(1.5) rotate(180deg);
+ margin-right: 20px !important;
+ }
+
+
+ @media (max-width: 1024px) {
+ margin: 0 16px;
+ }
+}
diff --git a/src/components/Tab/index.js b/src/components/Tab/index.js
new file mode 100644
index 00000000..01649259
--- /dev/null
+++ b/src/components/Tab/index.js
@@ -0,0 +1,94 @@
+import React from 'react'
+import cn from 'classnames'
+import PT from 'prop-types'
+import styles from './Tab.module.scss'
+
+const Tab = ({
+ currentTab,
+ selectTab
+}) => {
+ const onActiveClick = () => {
+ if (currentTab === 1) {
+ return
+ }
+ selectTab(1)
+ }
+
+ const onPastChallengesClick = () => {
+ if (currentTab === 2) {
+ return
+ }
+ selectTab(2)
+ }
+
+ const onUsersClick = () => {
+ if (currentTab === 3) {
+ return
+ }
+ selectTab(3)
+ }
+
+ const tabComponent = (
+
)
-TwoColsLayout.Sidebar = ({ children }) => (
-
-)
-
-TwoColsLayout.Sidebar.defaultProps = {
- children: null
-}
-
-TwoColsLayout.Sidebar.propTypes = {
- children: PropTypes.node
-}
-
-TwoColsLayout.Content = ({ children }) => (
+TwoRowsLayout.Content = ({ children }) => (
+
)
}
ChallengesComponent.propTypes = {
challenges: PropTypes.arrayOf(PropTypes.object),
+ projects: PropTypes.arrayOf(PropTypes.object),
activeProject: PropTypes.shape({
id: PropTypes.number,
name: PropTypes.string
@@ -105,6 +140,11 @@ ChallengesComponent.propTypes = {
isLoading: PropTypes.bool,
warnMessage: PropTypes.string,
filterChallengeName: PropTypes.string,
+ filterChallengeType: PropTypes.shape(),
+ filterProjectOption: PropTypes.shape(),
+ filterDate: PropTypes.shape(),
+ filterSortBy: PropTypes.string,
+ filterSortOrder: PropTypes.string,
status: PropTypes.string,
activeProjectId: PropTypes.number,
loadChallengesByPage: PropTypes.func.isRequired,
@@ -113,18 +153,22 @@ ChallengesComponent.propTypes = {
totalChallenges: PropTypes.number.isRequired,
partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
deleteChallenge: PropTypes.func.isRequired,
+ setActiveProject: PropTypes.func.isRequired,
isBillingAccountExpired: PropTypes.bool,
+ dashboard: PropTypes.bool,
billingStartDate: PropTypes.string,
billingEndDate: PropTypes.string,
isBillingAccountLoadingFailed: PropTypes.bool,
isBillingAccountLoading: PropTypes.bool,
selfService: PropTypes.bool,
- auth: PropTypes.object.isRequired
+ auth: PropTypes.object.isRequired,
+ challengeTypes: PropTypes.arrayOf(PropTypes.shape())
}
ChallengesComponent.defaultProps = {
challenges: [],
- isLoading: true
+ isLoading: true,
+ challengeTypes: []
}
export default ChallengesComponent
diff --git a/src/components/Handle/Handle.module.scss b/src/components/Handle/Handle.module.scss
index 6441d9c7..39870917 100644
--- a/src/components/Handle/Handle.module.scss
+++ b/src/components/Handle/Handle.module.scss
@@ -3,6 +3,6 @@
.handle {
@include roboto-medium;
display: inline-block;
- color: $text-color;
text-decoration: none;
+ color: $white;
}
diff --git a/src/components/Modal/AlertModal.js b/src/components/Modal/AlertModal.js
index a603a51f..084263c2 100644
--- a/src/components/Modal/AlertModal.js
+++ b/src/components/Modal/AlertModal.js
@@ -6,7 +6,7 @@ import styles from './ConfirmationModal.module.scss'
import OutlineButton from '../Buttons/OutlineButton'
import PrimaryButton from '../Buttons/PrimaryButton'
-const AlertModal = ({ title, message, theme, onClose, closeLink, okLink, closeText, okText }) => (
+const AlertModal = ({ title, message, theme, onClose, closeLink, okLink, closeText, okText, onOk }) => (
+
}
+
+
+ {activeProject && activeProject.id && (
+
+ (
+
+ View Project
+
+ )
+
)}
+ {activeProject && activeProject.id && !isReadOnly ? (
+
+
+
-
+ {title}
@@ -28,6 +28,7 @@ const AlertModal = ({ title, message, theme, onClose, closeLink, okLink, closeTe
text={okText}
type={'success'}
link={okLink}
+ onClick={okLink ? () => {} : onOk}
/>
-
+
- { + if (e.key !== 'Enter') { + return + } + onActiveClick() + }} + role='presentation' + > + All Work + +
- { + if (e.key !== 'Enter') { + return + } + onPastChallengesClick() + }} + role='presentation' + > + Projects + +
- { + if (e.key !== 'Enter') { + return + } + onUsersClick() + }} + role='presentation' + > + Users + +
+ {tabComponent}
+
+ )
+}
+
+Tab.defaultProps = {
+ selectTab: () => {}
+}
+
+Tab.propTypes = {
+ selectTab: PT.func.isRequired,
+ currentTab: PT.number.isRequired
+}
+
+export default Tab
diff --git a/src/components/TopBar/Topbar.module.scss b/src/components/TopBar/Topbar.module.scss
deleted file mode 100644
index 369066d5..00000000
--- a/src/components/TopBar/Topbar.module.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "../../styles/includes";
-.topbar {
- height: 60px;
- background-color: $white;
- padding: 0 30px 0 30px;
- border-bottom: 1px solid $gray;
-}
-
-.hide-line {
- border-bottom: none;
-}
-
-.details {
- display: block;
- margin-left: auto;
- text-align: right;
- font-size: 16px;
- line-height: 60px;
-
-}
-
-.icon {
- vertical-align: middle;
- color: $blue;
- margin-left: 20px;
- font-size: 20px;
-}
diff --git a/src/components/TopBar/index.js b/src/components/TopBar/index.js
index fda398f7..ccf6137e 100644
--- a/src/components/TopBar/index.js
+++ b/src/components/TopBar/index.js
@@ -1,40 +1,67 @@
-/**
- * Component to render top bar of app
- */
-import React from 'react'
+/* global tcUniNav */
+import React, { useRef, useState, useEffect } from 'react'
import PropTypes from 'prop-types'
-import cn from 'classnames'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSignInAlt } from '@fortawesome/free-solid-svg-icons'
-import { get } from 'lodash'
-import styles from './Topbar.module.scss'
-import Handle from '../Handle'
-import { COMMUNITY_APP_URL } from '../../config/constants'
-
-const TopBar = ({ user, hideBottomLine }) => {
- return (
-
- {user && (
-
- )
+import { COMMUNITY_APP_URL, HEADER_AUTH_URLS_HREF, HEADER_AUTH_URLS_LOCATION } from '../../config/constants'
+
+let uniqueId = 0
+
+const HEADER_AUTH_URLS = {
+ href: HEADER_AUTH_URLS_HREF,
+ location: HEADER_AUTH_URLS_LOCATION
+}
+const BASE = COMMUNITY_APP_URL
+
+const TopBar = ({ auth }) => {
+ const uniNavInitialized = useRef(false)
+ const toolNameRef = useRef('Work Manager')
+ const authURLs = HEADER_AUTH_URLS
+ const headerRef = useRef()
+ const [headerId, setHeaderId] = useState(0)
+
+ useEffect(() => {
+ uniqueId += 1
+ setHeaderId(uniqueId)
+ }, [])
+
+ useEffect(() => {
+ if (uniNavInitialized.current || !headerId) {
+ return
+ }
+
+ uniNavInitialized.current = true
+
+ const regSource = window.location.pathname.split('/')[1]
+ const retUrl = encodeURIComponent(window.location.href)
+ tcUniNav('init', `headerNav-${headerId}`, {
+ type: 'tool',
+ toolName: toolNameRef.current,
+ toolRoot: '/',
+ user: 'auto',
+ signOut: () => {
+ window.location = `${BASE}/logout?ref=nav`
+ },
+ signIn: () => {
+ window.location = `${authURLs.location
+ .replace('%S', retUrl)
+ .replace('member?', '#!/member?')}®Source=${regSource}`
+ },
+ signUp: () => {
+ window.location = `${authURLs.location
+ .replace('%S', retUrl)
+ .replace('member?', '#!/member?')}&mode=signUp®Source=${regSource}`
+ }
+ })
+ }, [headerId])
+
+ return
+}
+
+TopBar.defaultProps = {
+ auth: {}
}
TopBar.propTypes = {
- user: PropTypes.object,
- hideBottomLine: PropTypes.bool
+ auth: PropTypes.shape()
}
export default TopBar
diff --git a/src/components/TopcoderFooter/index.js b/src/components/TopcoderFooter/index.js
new file mode 100644
index 00000000..27f6c502
--- /dev/null
+++ b/src/components/TopcoderFooter/index.js
@@ -0,0 +1,36 @@
+/* global tcUniNav */
+import React, { useEffect, useRef, useState } from 'react'
+import styles from './styles.module.scss'
+
+let uniqueId = 0
+
+export default function TopcoderFooter () {
+ const footerRef = useRef()
+ const footerInitialized = useRef(false)
+ const [footerId, setFooterId] = useState(0)
+
+ useEffect(() => {
+ uniqueId += 1
+ setFooterId(uniqueId)
+ }, [])
+
+ useEffect(() => {
+ if (footerInitialized.current || !footerId) {
+ return
+ }
+
+ footerInitialized.current = true
+
+ tcUniNav('init', `footerNav-${footerId}`, {
+ type: 'footer'
+ })
+ }, [footerId])
+
+ return (
+
+ )
+}
diff --git a/src/components/TopcoderFooter/styles.module.scss b/src/components/TopcoderFooter/styles.module.scss
new file mode 100644
index 00000000..d6960ed7
--- /dev/null
+++ b/src/components/TopcoderFooter/styles.module.scss
@@ -0,0 +1,5 @@
+@import '../../styles/includes';
+
+.container {
+ margin-top: auto;
+}
diff --git a/src/components/TwoColsLayout/TwoColsLayout.module.scss b/src/components/TwoRowsLayout/TwoRowsLayout.module.scss
similarity index 53%
rename from src/components/TwoColsLayout/TwoColsLayout.module.scss
rename to src/components/TwoRowsLayout/TwoRowsLayout.module.scss
index 21fd886c..a85ead3b 100644
--- a/src/components/TwoColsLayout/TwoColsLayout.module.scss
+++ b/src/components/TwoRowsLayout/TwoRowsLayout.module.scss
@@ -1,33 +1,19 @@
.container {
display: flex;
+ flex-direction: column;
&.scrollIndependent {
- .sidebar,
.content {
- min-height: 0;
- height: 100vh;
- overflow: auto;
+ // min-height: 0;
+ // height: 100vh;
+ // overflow: auto;
}
}
}
-.sidebar {
- height: 100vh;
- position: relative;
- width: 280px;
-
- @media screen and (max-width: 300px * 4) {
- width: auto;
- flex: 1;
- }
-
-}
-
.content {
- /* minus sidebar width and minus sidebar border width */
- width: calc(100% - 280px);
- max-height: 100vh;
+ height: 100vh;
display: flex;
position: relative;
flex-direction: column;
diff --git a/src/components/TwoColsLayout/index.js b/src/components/TwoRowsLayout/index.js
similarity index 51%
rename from src/components/TwoColsLayout/index.js
rename to src/components/TwoRowsLayout/index.js
index 2c740b6d..e1df88a1 100644
--- a/src/components/TwoColsLayout/index.js
+++ b/src/components/TwoRowsLayout/index.js
@@ -6,9 +6,9 @@ import React from 'react'
import PropTypes from 'prop-types'
import cn from 'classnames'
-import styles from './TwoColsLayout.module.scss'
+import styles from './TwoRowsLayout.module.scss'
-const TwoColsLayout = ({
+const TwoRowsLayout = ({
children,
scrollIndependent
}) => (
@@ -17,40 +17,28 @@ const TwoColsLayout = ({
- Welcome,{' '}
-
- )}
-
{children}
)
-TwoColsLayout.Content.defaultProps = {
+TwoRowsLayout.Content.defaultProps = {
children: null
}
-TwoColsLayout.Content.propTypes = {
+TwoRowsLayout.Content.propTypes = {
children: PropTypes.node
}
-TwoColsLayout.defaultProps = {
+TwoRowsLayout.defaultProps = {
children: null,
scrollIndependent: false
}
-TwoColsLayout.propTypes = {
+TwoRowsLayout.propTypes = {
children: PropTypes.node,
scrollIndependent: PropTypes.bool
}
-export default TwoColsLayout
+export default TwoRowsLayout
diff --git a/src/components/UserCard/UserCard.module.scss b/src/components/UserCard/UserCard.module.scss
new file mode 100644
index 00000000..da47949c
--- /dev/null
+++ b/src/components/UserCard/UserCard.module.scss
@@ -0,0 +1,216 @@
+@import "../../styles/includes";
+
+.item {
+ display: flex;
+ font-size: 14px;
+ gap: 30px;
+ height: 30px;
+ padding: 0 20px;
+
+ .col5 {
+ display: flex;
+ width: 150px;
+ flex-direction: column;
+ justify-content: center;
+ }
+}
+
+.tcRadioButton {
+ .tc-radioButton-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;
+ margin: 0;
+ padding: 0;
+ vertical-align: bottom;
+ position: relative;
+ display: inline-block;
+
+ input[type=radio] {
+ display: none;
+ }
+
+ .isDisabled {
+ pointer-events: none;
+ }
+
+ label {
+ @include roboto-light();
+
+ line-height: 17px;
+ font-weight: 300;
+ cursor: pointer;
+ position: absolute;
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ border-radius: 8px;
+ 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: 8px;
+ height: 8px;
+ background: transparent;
+ top: 4px;
+ left: 4px;
+ border: 4px solid $tc-blue-20;
+ border-radius: 4px;
+ transition: all 0.15s ease-in-out;
+ }
+
+ &:hover::after {
+ opacity: 0.3;
+ }
+
+ div {
+ margin-left: 24px;
+ width: 150px;
+ }
+ }
+
+ input[type=radio]:checked ~ label {
+ background: $tc-blue-20;
+ }
+
+ input[type=radio]:checked + label::after {
+ opacity: 1;
+ border-color: $white;
+ }
+}
+
+.modalContainer {
+ padding: 0;
+ position: fixed;
+ overflow: auto;
+ z-index: 10000;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ box-sizing: border-box;
+ width: auto;
+ max-width: none;
+ transform: none;
+ background: transparent;
+ color: $text-color;
+ opacity: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ :global {
+ button.close {
+ margin-right: 5px;
+ margin-top: 5px;
+ }
+ }
+
+ .contentContainer {
+ box-sizing: border-box;
+ background: $white;
+ opacity: 1;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ border-radius: 6px;
+ margin: 0 auto;
+ width: 852px;
+ padding: 30px;
+
+ .content {
+ padding: 30px;
+ width: 100%;
+ height: 100%;
+ }
+
+ .title {
+ @include roboto-bold();
+
+ font-size: 30px;
+ line-height: 36px;
+ margin-bottom: 30px;
+ margin-top: 0;
+ }
+
+ span {
+ @include roboto;
+
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 26px;
+ }
+
+ &.confirm {
+ width: 999px;
+
+ .buttonGroup {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 30px;
+
+ .buttonSizeA {
+ width: 193px;
+ height: 40px;
+ margin-right: 33px;
+
+ span {
+ font-size: 18px;
+ font-weight: 500;
+ }
+ }
+
+ .buttonSizeB {
+ width: 160px;
+ height: 40px;
+
+ span {
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 22px;
+ }
+ }
+ }
+ }
+
+ .buttonGroup {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 30px;
+
+ .button {
+ width: 135px;
+ height: 40px;
+ margin-right: 66px;
+
+ span {
+ font-size: 18px;
+ font-weight: 500;
+ }
+ }
+
+ .button:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+}
diff --git a/src/components/UserCard/index.js b/src/components/UserCard/index.js
new file mode 100644
index 00000000..318ce474
--- /dev/null
+++ b/src/components/UserCard/index.js
@@ -0,0 +1,184 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import styles from './UserCard.module.scss'
+import { PROJECT_ROLES } from '../../config/constants'
+import PrimaryButton from '../Buttons/PrimaryButton'
+import AlertModal from '../Modal/AlertModal'
+import { updateProjectMemberRole } from '../../services/projects'
+import { wait } from '../../util/helper'
+import _ from 'lodash'
+
+const theme = {
+ container: styles.modalContainer
+}
+
+class UserCard extends Component {
+ constructor (props) {
+ super(props)
+ this.state = {
+ isUpdatingPermission: false,
+ showWarningModal: false,
+ permissionUpdateError: null,
+ showSuccessModal: false
+ }
+ this.updatePermission = this.updatePermission.bind(this)
+ this.resetPermState = this.resetPermState.bind(this)
+ }
+
+ resetPermState () {
+ this.setState({
+ isUpdatingPermission: false,
+ showWarningModal: false,
+ permissionUpdateError: null,
+ showSuccessModal: false
+ })
+ }
+
+ async updatePermission (newRole) {
+ if (this.state.isUpdatingPermission) { return }
+
+ this.setState({
+ isUpdatingPermission: true
+ })
+
+ const { user, reloadProjectMembers } = this.props
+
+ try {
+ await updateProjectMemberRole(user.projectId, user.id, newRole)
+ await wait(1000)
+ reloadProjectMembers(user.projectId)
+ this.setState({ showSuccessModal: true })
+ } catch (e) {
+ const error = _.get(
+ e,
+ 'response.data.message',
+ `Unable to update permission`
+ )
+ this.setState({ showWarningModal: true, permissionUpdateError: error })
+ }
+ }
+
+ render () {
+ const { user, onRemoveClick, isEditable } = this.props
+ const showRadioButtons = _.includes(_.values(PROJECT_ROLES), user.role)
+ return (
+
+ {
+ this.state.isUpdatingPermission && (
+
+ )
+ }
+}
+
+UserCard.propTypes = {
+ user: PropTypes.object,
+ reloadProjectMembers: PropTypes.func.isRequired,
+ onRemoveClick: PropTypes.func.isRequired,
+ isEditable: PropTypes.bool
+}
+
+export default UserCard
diff --git a/src/components/Users/Users.module.scss b/src/components/Users/Users.module.scss
new file mode 100644
index 00000000..d86de92d
--- /dev/null
+++ b/src/components/Users/Users.module.scss
@@ -0,0 +1,484 @@
+@import '../../styles/includes';
+
+.list {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.contentContainer {
+ margin: 0 20px;
+ padding-left: 15px;
+
+ .col-6 {
+ padding: 0px;
+ }
+}
+
+.userList {
+ display: flex;
+ flex-direction: column;
+ background-color: $white;
+ padding: 0;
+ margin: 0;
+}
+
+.errorMesssage, .required {
+ color: $tc-red;
+}
+
+.userItem {
+ list-style: none;
+ width: 100%;
+ border-top: 1px $gray solid;
+ padding: 10px 0;
+ font-size: 14px;
+
+ a {
+ text-decoration: none;
+ }
+}
+
+
+.row {
+ display: flex;
+ margin-bottom: 16px;
+ align-items: center;
+
+ input {
+ max-width: 280px;
+
+ @include upto-sm {
+ display: block;
+ padding-bottom: 10px;
+ }
+ }
+
+ .title {
+ font-weight: bold;
+ }
+ .error {
+ font-weight: bold;
+ color: #BE405E;
+ }
+ .active {
+ color: #008000;
+ }
+ .inactive {
+ color: #BE405E;
+ }
+
+ .field {
+ @include upto-sm {
+ display: block;
+ padding-bottom: 10px;
+ }
+
+ label {
+ @include roboto-bold();
+
+ font-size: 16px;
+ line-height: 19px;
+ font-weight: 500;
+ color: $tc-gray-80;
+ }
+
+ &.input1 {
+ max-width: 185px;
+ min-width: 185px;
+ margin-right: 14px;
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ flex-grow: 1;
+
+ span {
+ color: $tc-red;
+ }
+ }
+
+ &.input2.error {
+ color: $tc-red;
+ margin-top: -25px;
+ }
+ &.input2 {
+ align-self: flex-end;
+ width: 50%;
+ margin-bottom: auto;
+ margin-top: auto;
+ display: flex;
+ flex-direction: row;
+ max-width: 500px;
+ min-width: 500px;
+ }
+
+ &.manageLink {
+ margin: 2px 12px;
+ text-decoration: none;
+ font-size: 12px;
+ }
+ }
+}
+
+.header {
+ background-color: $light-bg;
+ height: 50px;
+ display: flex;
+ justify-content: flex-start;
+ padding: 0 20px;
+ font-size: 14px;
+
+ gap: 30px;
+
+ .sortable {
+ display: flex;
+ cursor: pointer;
+ }
+
+ .col1 {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: center;
+
+ span {
+ color: $tc-red;
+ }
+ }
+
+ .col2 {
+ display: flex;
+ flex: 2;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .col3 {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .col4 {
+ display: flex;
+ width: 30px;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .col5 {
+ display: flex;
+ width: 150px;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .col6 {
+ display: flex;
+ width: 40px;
+ flex-direction: column;
+ justify-content: center;
+ }
+}
+
+.challengeInput {
+ width: 94% !important;
+ margin-left: -6px;
+}
+
+@-moz-document url-prefix() {
+ .challengeInput {
+ &::-moz-placeholder {
+ /* Mozilla Firefox 19+ */
+ line-height: 38px;
+ }
+ &::-webkit-input-placeholder {
+ /* Webkit */
+ line-height: 38px;
+ }
+ &:-ms-input-placeholder {
+ /* IE */
+ line-height: 38px;
+ }
+ }
+}
+
+.tabsContainer {
+ ul {
+ margin: 0;
+ }
+
+ :global {
+ .react-tabs__tab--selected {
+ background: $light-bg;
+
+ &:focus::after {
+ background: $light-bg;
+ }
+ }
+ }
+}
+
+.challengeList {
+ display: flex;
+ flex-direction: column;
+ background-color: $white;
+ padding: 0;
+ margin: 0;
+}
+
+.challengeItem {
+ list-style: none;
+ width: 100%;
+ border-top: 1px $gray solid;
+ padding: 10px 0;
+ font-size: 14px;
+
+ a {
+ text-decoration: none;
+ }
+}
+
+.paginationContainer {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 30px;
+}
+
+.addUserTitle {
+ min-width: 100px;
+ font-weight: 500;
+}
+
+.modalContainer {
+ padding: 0;
+ position: fixed;
+ overflow: auto;
+ z-index: 10000;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ box-sizing: border-box;
+ width: auto;
+ max-width: none;
+ transform: none;
+ background: transparent;
+ color: $text-color;
+ opacity: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ :global {
+ button.close {
+ margin-right: 5px;
+ margin-top: 5px;
+ }
+ }
+
+ .contentContainer {
+ box-sizing: border-box;
+ background: $white;
+ opacity: 1;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ border-radius: 6px;
+ margin: 0 auto;
+ width: 852px;
+ padding: 30px;
+
+ .content {
+ padding: 30px;
+ width: 100%;
+ height: 100%;
+ }
+
+ .title {
+ @include roboto-bold();
+
+ font-size: 30px;
+ line-height: 36px;
+ margin-bottom: 30px;
+ margin-top: 0;
+ }
+
+ span {
+ @include roboto;
+
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 26px;
+ }
+
+ &.confirm {
+ width: 999px;
+
+ .buttonGroup {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 30px;
+
+ .buttonSizeA {
+ width: 193px;
+ height: 40px;
+ margin-right: 33px;
+
+ span {
+ font-size: 18px;
+ font-weight: 500;
+ }
+ }
+
+ .buttonSizeB {
+ width: 160px;
+ height: 40px;
+
+ span {
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 22px;
+ }
+ }
+ }
+ }
+
+ .buttonGroup {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 30px;
+
+ .button {
+ width: 135px;
+ height: 40px;
+ margin-right: 66px;
+
+ span {
+ font-size: 18px;
+ font-weight: 500;
+ }
+ }
+
+ .button:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+}
+
+.sortIcon {
+ width: 14px;
+ height: 12px;
+ margin-left: 5px;
+ margin-top: 2px;
+ height: 100%;
+
+ &.asc {
+ transform: rotate(180deg);
+ }
+}
+
+.filterItem {
+ display: flex;
+}
+
+.to {
+ margin: 0 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.addButtonContainer {
+ width: 110px;
+ height: 30px;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+.addUserContentContainer {
+
+}
+
+.tcRadioButton {
+ .tc-radioButton-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;
+
+ input[type=radio] {
+ display: none;
+ }
+
+ label {
+ @include roboto-light();
+
+ line-height: 17px;
+ font-weight: 300;
+ cursor: pointer;
+ position: absolute;
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ border-radius: 8px;
+ 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: 8px;
+ height: 8px;
+ background: transparent;
+ top: 4px;
+ left: 4px;
+ border: 4px solid $tc-blue-20;
+ border-radius: 4px;
+ transition: all 0.15s ease-in-out;
+ }
+
+ &:hover::after {
+ opacity: 0.3;
+ }
+
+ div {
+ margin-left: 24px;
+ width: 150px;
+ }
+ }
+
+ input[type=radio]:checked ~ label {
+ background: $tc-blue-20;
+ }
+
+ input[type=radio]:checked + label::after {
+ opacity: 1;
+ border-color: $white;
+ }
+}
diff --git a/src/components/Users/index.js b/src/components/Users/index.js
new file mode 100644
index 00000000..b0a95933
--- /dev/null
+++ b/src/components/Users/index.js
@@ -0,0 +1,429 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import cn from 'classnames'
+import styles from './Users.module.scss'
+import Select from '../Select'
+import UserCard from '../UserCard'
+import PrimaryButton from '../Buttons/PrimaryButton'
+import Modal from '../Modal'
+import SelectUserAutocomplete from '../SelectUserAutocomplete'
+import { PROJECT_ROLES } from '../../config/constants'
+import { checkAdmin } from '../../util/tc'
+import { addUserToProject, removeUserFromProject } from '../../services/projects'
+import { wait } from '../../util/helper'
+import ConfirmationModal from '../Modal/ConfirmationModal'
+
+const theme = {
+ container: styles.modalContainer
+}
+
+class Users extends Component {
+ constructor (props) {
+ super(props)
+ this.state = {
+ projectOption: null,
+ showAddUserModal: false,
+ userToAdd: null,
+ userPermissionToAdd: PROJECT_ROLES.READ,
+ showSelectUserError: false,
+ isAdding: false,
+ addUserError: false,
+ isRemoving: false,
+ removeError: null,
+ showRemoveConfirmationModal: false,
+ userToRemove: null
+ }
+ this.setProjectOption = this.setProjectOption.bind(this)
+ this.onAddUserClick = this.onAddUserClick.bind(this)
+ this.resetAddUserState = this.resetAddUserState.bind(this)
+ this.onUpdateUserToAdd = this.onUpdateUserToAdd.bind(this)
+ this.onAddUserConfirmClick = this.onAddUserConfirmClick.bind(this)
+ this.updatePermission = this.updatePermission.bind(this)
+ this.onRemoveClick = this.onRemoveClick.bind(this)
+ this.resetRemoveUserState = this.resetRemoveUserState.bind(this)
+ this.onRemoveConfirmClick = this.onRemoveConfirmClick.bind(this)
+ }
+
+ setProjectOption (projectOption) {
+ this.setState({ projectOption })
+ const { loadProject } = this.props
+ loadProject(projectOption.value, false)
+ }
+
+ updatePermission (newRole) {
+ this.setState({
+ userPermissionToAdd: newRole
+ })
+ }
+
+ onAddUserClick () {
+ this.setState({
+ showAddUserModal: true
+ })
+ }
+
+ resetAddUserState () {
+ this.setState({
+ userToAdd: null,
+ showSelectUserError: false,
+ isAdding: false,
+ showAddUserModal: false,
+ userPermissionToAdd: PROJECT_ROLES.READ,
+ addUserError: null
+ })
+ }
+
+ onUpdateUserToAdd (option) {
+ let userToAdd = null
+ if (option && option.value) {
+ userToAdd = {
+ handle: option.label,
+ userId: parseInt(option.value, 10)
+ }
+ }
+
+ this.setState({
+ userToAdd,
+ showSelectUserError: !userToAdd
+ })
+ }
+
+ async onAddUserConfirmClick () {
+ console.log('in onAddUserConfirmClick')
+ console.log('in onAddUserConfirmClick this.state.userToAdd', this.state.userToAdd)
+ const { reloadProjectMembers } = this.props
+ if (this.state.isAdding) { return }
+
+ this.setState({
+ showSelectUserError: false,
+ addUserError: null
+ })
+
+ if (!this.state.userToAdd) {
+ console.log('in if')
+ this.setState({
+ showSelectUserError: true
+ })
+ return
+ }
+
+ this.setState({
+ isAdding: true
+ })
+
+ try {
+ await addUserToProject(this.state.projectOption.value, this.state.userToAdd.userId, this.state.userPermissionToAdd)
+ // wait for a second so that project's members are updated
+ await wait(1000)
+ if (this.state.projectOption.value) { reloadProjectMembers(this.state.projectOption.value) }
+ this.resetAddUserState()
+ } catch (e) {
+ const error = _.get(
+ e,
+ 'response.data.message',
+ `Unable to add user`
+ )
+ this.setState({ isAdding: false, addUserError: error })
+ }
+ }
+
+ getHandle () {
+ return this.props.auth && this.props.auth.user
+ ? this.props.auth.user.handle
+ : null
+ }
+
+ getMemberRole (members, handle) {
+ if (!handle) { return null }
+
+ const found = _.find(members, (m) => {
+ return m.handle === handle
+ })
+
+ return _.get(found, 'role')
+ }
+
+ onRemoveClick (user) {
+ if (this.state.isRemoving) {
+ return
+ }
+
+ this.setState({
+ showRemoveConfirmationModal: true,
+ userToRemove: user
+ })
+ }
+
+ resetRemoveUserState () {
+ this.setState({
+ isRemoving: false,
+ showRemoveConfirmationModal: false,
+ userToRemove: null,
+ removeError: null
+ })
+ }
+
+ async onRemoveConfirmClick () {
+ if (this.state.isRemoving) { return }
+
+ const { reloadProjectMembers } = this.props
+ const userToRemove = this.state.userToRemove
+ try {
+ this.setState({ isRemoving: true })
+ await removeUserFromProject(userToRemove.projectId, userToRemove.id)
+ await wait(1000)
+ if (this.state.projectOption.value) { reloadProjectMembers(this.state.projectOption.value) }
+
+ this.resetRemoveUserState()
+ } catch (e) {
+ const error = _.get(
+ e,
+ 'response.data.message',
+ `Unable to remove user`
+ )
+ this.setState({ isRemoving: false, removeError: error })
+ }
+ }
+
+ checkIsCopilotOrManager (projectMembers, handle) {
+ if (projectMembers && projectMembers.length > 0) {
+ const role = this.getMemberRole(projectMembers, handle)
+ return role === PROJECT_ROLES.COPILOT || role === PROJECT_ROLES.MANAGER
+ } else {
+ return false
+ }
+ }
+
+ render () {
+ const { projects, projectMembers, reloadProjectMembers, isEditable } = this.props
+ const projectOptions = projects.map(p => {
+ return {
+ label: p.name,
+ value: p.id
+ }
+ })
+ const loggedInHandle = this.getHandle()
+ const membersExist = projectMembers && projectMembers.length > 0
+ const isCopilotOrManager = this.checkIsCopilotOrManager(projectMembers, loggedInHandle)
+ const isAdmin = checkAdmin(this.props.auth.token)
+ const showAddUser = isEditable && this.state.projectOption && (isCopilotOrManager || isAdmin)
+
+ return (
+
+
+
+ {user.handle}
+
+
+ {showRadioButtons && (
+
+ e.target.checked && this.updatePermission(PROJECT_ROLES.READ)}
+ />
+
+
)}
+
+ {showRadioButtons && (
+
+ e.target.checked && this.updatePermission(PROJECT_ROLES.WRITE)}
+ />
+
+
)}
+
+ {showRadioButtons && (
+
+ e.target.checked && this.updatePermission(PROJECT_ROLES.MANAGER)}
+ />
+
+
)}
+
+ {showRadioButtons && (
+ {isEditable ? (
+ e.target.checked && this.updatePermission(PROJECT_ROLES.COPILOT)}
+ />
+
+
)}
+
+ { onRemoveClick(user) }} />
+
) : null}
+
+ this.resetAddUserState()}>
+
+ )
+ }
+ {
+ this.state.showRemoveConfirmationModal && (
+
+ )
+ }
+}
+
+Users.propTypes = {
+ loadProject: PropTypes.func.isRequired,
+ reloadProjectMembers: PropTypes.func.isRequired,
+ auth: PropTypes.object,
+ isEditable: PropTypes.bool,
+ projects: PropTypes.arrayOf(PropTypes.object),
+ projectMembers: PropTypes.arrayOf(PropTypes.object)
+}
+
+export default Users
diff --git a/src/config/constants.js b/src/config/constants.js
index a37f2768..e25915cd 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -20,7 +20,10 @@ export const {
CHALLENGE_TYPE_ID,
MARATHON_TYPE_ID,
SEGMENT_API_KEY,
- MULTI_ROUND_CHALLENGE_TEMPLATE_ID
+ MULTI_ROUND_CHALLENGE_TEMPLATE_ID,
+ UNIVERSAL_NAV_URL,
+ HEADER_AUTH_URLS_HREF,
+ HEADER_AUTH_URLS_LOCATION
} = process.env
export const CREATE_FORUM_TYPE_IDS = typeof process.env.CREATE_FORUM_TYPE_IDS === 'string' ? process.env.CREATE_FORUM_TYPE_IDS.split(',') : process.env.CREATE_FORUM_TYPE_IDS
@@ -94,11 +97,14 @@ export const LOAD_PROJECT_DETAILS_SUCCESS = 'LOAD_PROJECT_DETAILS_SUCCESS'
export const LOAD_PROJECT_DETAILS_PENDING = 'LOAD_PROJECT_DETAILS_PENDING'
export const LOAD_PROJECT_DETAILS_FAILURE = 'LOAD_PROJECT_DETAILS_FAILURE'
+export const UPDATE_PROJECT_ROLE_FOR_MEMBER_SUCCESS = 'UPDATE_PROJECT_ROLE_FOR_MEMBER_SUCCESS'
+
export const LOAD_CHALLENGE_SUBMISSIONS = 'LOAD_CHALLENGE_SUBMISSIONS'
export const LOAD_CHALLENGE_SUBMISSIONS_SUCCESS = 'LOAD_CHALLENGE_SUBMISSIONS_SUCCESS'
export const LOAD_CHALLENGE_SUBMISSIONS_PENDING = 'LOAD_CHALLENGE_SUBMISSIONS_PENDING'
export const LOAD_CHALLENGE_SUBMISSIONS_FAILURE = 'LOAD_CHALLENGE_SUBMISSIONS_FAILURE'
+export const LOAD_CHALLENGE_MEMBERS = 'LOAD_CHALLENGE_MEMBERS'
export const LOAD_CHALLENGE_MEMBERS_SUCCESS = 'LOAD_CHALLENGE_MEMBERS_SUCCESS'
export const LOAD_CHALLENGE_METADATA_SUCCESS = 'LOAD_CHALLENGE_METADATA_SUCCESS'
@@ -180,6 +186,13 @@ export const MARATHON_MATCH_SUBTRACKS = [
'DEVELOP_MARATHON_MATCH'
]
+export const PROJECT_ROLES = {
+ READ: 'observer',
+ WRITE: 'customer',
+ MANAGER: 'manager',
+ COPILOT: 'copilot'
+}
+
export const CHALLENGE_STATUS = {
ACTIVE: 'ACTIVE',
NEW: 'NEW',
@@ -211,7 +224,12 @@ export const ALLOWED_USER_ROLES = [
'administrator',
'connect admin',
'connect manager',
- 'connect copilot'
+ 'connect copilot',
+ 'topcoder user'
+]
+
+export const READ_ONLY_ROLES = [
+ 'topcoder user'
]
export const ADMIN_ROLES = [
@@ -222,7 +240,7 @@ export const ADMIN_ROLES = [
export const downloadAttachmentURL = (challengeId, attachmentId, token) =>
`${CHALLENGE_API_URL}/${challengeId}/attachments/${attachmentId}/download?token=${token}`
-export const PAGE_SIZE = 50
+export const PAGE_SIZE = 10
/**
* The minimal number of characters to enter before starting showing autocomplete suggestions
@@ -301,3 +319,10 @@ export const MULTI_ROUND_CHALLENGE_DESC_TEMPLATE = '\n\n### ROUND 1\n' +
export const MAX_CHECKPOINT_PRIZE_COUNT = 8
export const DEFAULT_CHECKPOINT_PRIZE = 50
export const DEFAULT_CHECKPOINT_PRIZE_COUNT = 5
+
+export const PAGINATION_PER_PAGE_OPTIONS = [
+ { label: '5', value: '5' },
+ { label: '10', value: '10' },
+ { label: '25', value: '25' },
+ { label: '50', value: '50' }
+]
diff --git a/src/containers/ChallengeEditor/index.js b/src/containers/ChallengeEditor/index.js
index 66843d05..361dd337 100644
--- a/src/containers/ChallengeEditor/index.js
+++ b/src/containers/ChallengeEditor/index.js
@@ -36,7 +36,7 @@ import { loadSubmissions } from '../../actions/challengeSubmissions'
import { loadProject } from '../../actions/projects'
import { connect } from 'react-redux'
-import { SUBMITTER_ROLE_UUID, MESSAGE } from '../../config/constants'
+import { SUBMITTER_ROLE_UUID, MESSAGE, PROJECT_ROLES } from '../../config/constants'
import { patchChallenge } from '../../services/challenges'
import ConfirmationModal from '../../components/Modal/ConfirmationModal'
import AlertModal from '../../components/Modal/AlertModal'
@@ -59,7 +59,8 @@ class ChallengeEditor extends Component {
showSuccessModal: false,
showLaunchModal: false,
showRejectModal: false,
- cancelReason: null
+ cancelReason: null,
+ loginUserRoleInProject: ''
}
this.onLaunchChallenge = this.onLaunchChallenge.bind(this)
@@ -125,7 +126,7 @@ class ChallengeEditor extends Component {
componentWillReceiveProps (nextProps) {
const { match } = this.props
- const { match: newMatch, loadChallengeDetails, loadResources, loadSubmissions } = nextProps
+ const { match: newMatch, loadChallengeDetails, loadResources, loadSubmissions, projectDetail, loggedInUser } = nextProps
const projectId = _.get(newMatch.params, 'projectId', null)
const challengeId = _.get(newMatch.params, 'challengeId', null)
if (
@@ -136,6 +137,15 @@ class ChallengeEditor extends Component {
} else {
this.setState({ challengeDetails: nextProps.challengeDetails })
}
+ if (projectDetail && loggedInUser) {
+ const projectMembers = projectDetail.members
+ const loginUserProjectInfo = _.find(projectMembers, { userId: loggedInUser.userId })
+ if (loginUserProjectInfo && this.state.loginUserRoleInProject !== loginUserProjectInfo.role) {
+ this.setState({
+ loginUserRoleInProject: loginUserProjectInfo.role
+ })
+ }
+ }
}
async fetchProjectDetails (newMatch) {
@@ -175,6 +185,10 @@ class ChallengeEditor extends Component {
if (isAdmin) {
return true
}
+ const { loginUserRoleInProject } = this.state
+ if (loginUserRoleInProject === PROJECT_ROLES.READ) {
+ return false
+ }
const userRoles = _.filter(
challengeResources,
cr => cr.memberId === `${loggedInUser.userId}`
@@ -532,6 +546,7 @@ class ChallengeEditor extends Component {
rejectChallenge={this.rejectChallenge}
showRejectChallengeModal={showRejectChallengeModal}
loggedInUser={loggedInUser}
+ enableEdit={enableEdit}
/>
)}
/>
@@ -571,6 +586,7 @@ class ChallengeEditor extends Component {
loggedInUser={loggedInUser}
projectPhases={projectPhases}
assignYourselfCopilot={this.assignYourselfCopilot}
+ enableEdit={enableEdit}
/>
)}
/>
diff --git a/src/containers/Challenges/index.js b/src/containers/Challenges/index.js
index 6a12f204..89dee8db 100644
--- a/src/containers/Challenges/index.js
+++ b/src/containers/Challenges/index.js
@@ -6,14 +6,21 @@ import React, { Component, Fragment } from 'react'
// import { Redirect } from 'react-router-dom'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
-import { DebounceInput } from 'react-debounce-input'
import ChallengesComponent from '../../components/ChallengesComponent'
import ProjectCard from '../../components/ProjectCard'
-import Loader from '../../components/Loader'
-import { loadChallengesByPage, partiallyUpdateChallengeDetails, deleteChallenge } from '../../actions/challenges'
+// import Loader from '../../components/Loader'
+import {
+ loadChallengesByPage,
+ partiallyUpdateChallengeDetails,
+ deleteChallenge,
+ loadChallengeTypes
+} from '../../actions/challenges'
import { loadProject } from '../../actions/projects'
-import { loadProjects, setActiveProject, resetSidebarActiveParams } from '../../actions/sidebar'
-import { CHALLENGE_STATUS } from '../../config/constants'
+import {
+ loadProjects,
+ setActiveProject,
+ resetSidebarActiveParams
+} from '../../actions/sidebar'
import styles from './Challenges.module.scss'
import { checkAdmin } from '../../util/tc'
@@ -21,39 +28,70 @@ class Challenges extends Component {
constructor (props) {
super(props)
this.state = {
- searchProjectName: '',
onlyMyProjects: true
}
- this.updateProjectName = this.updateProjectName.bind(this)
- this.toggleMyProjects = this.toggleMyProjects.bind(this)
}
componentDidMount () {
- const { activeProjectId, resetSidebarActiveParams, menu, projectId, selfService } = this.props
+ const {
+ dashboard,
+ activeProjectId,
+ resetSidebarActiveParams,
+ menu,
+ projectId,
+ selfService,
+ loadChallengeTypes
+ } = this.props
+ loadChallengeTypes()
+ if (dashboard) {
+ this.reloadChallenges(this.props, true)
+ }
if (menu === 'NULL' && activeProjectId !== -1) {
resetSidebarActiveParams()
} else if (projectId || selfService) {
- if (projectId) {
+ if (projectId && projectId !== -1) {
window.localStorage.setItem('projectLoading', 'true')
this.props.loadProject(projectId)
}
- this.reloadChallenges(this.props)
+ this.reloadChallenges(this.props, true)
}
}
componentWillReceiveProps (nextProps) {
- if (this.props.activeProjectId !== nextProps.activeProjectId) {
+ if (
+ (nextProps.dashboard && this.props.dashboard !== nextProps.dashboard) ||
+ this.props.activeProjectId !== nextProps.activeProjectId
+ ) {
this.reloadChallenges(nextProps)
}
}
- reloadChallenges (props) {
- const { activeProjectId, projectDetail: reduxProjectInfo, projectId, challengeProjectId, loadProject, selfService } = props
- if (activeProjectId !== challengeProjectId || selfService) {
+ reloadChallenges (props, forceLoad) {
+ const {
+ activeProjectId,
+ projectDetail: reduxProjectInfo,
+ projectId,
+ dashboard,
+ challengeProjectId,
+ loadProject,
+ selfService
+ } = props
+ if (activeProjectId !== challengeProjectId || selfService || forceLoad) {
const isAdmin = checkAdmin(this.props.auth.token)
- this.props.loadChallengesByPage(1, projectId ? parseInt(projectId) : -1, CHALLENGE_STATUS.ACTIVE, '', selfService, isAdmin ? null : this.props.auth.user.handle)
- const projectLoading = window.localStorage.getItem('projectLoading') !== null
- if (!selfService && (!reduxProjectInfo || `${reduxProjectInfo.id}` !== projectId) && !projectLoading
+ this.props.loadChallengesByPage(
+ 1,
+ projectId ? parseInt(projectId) : -1,
+ dashboard ? 'all' : '',
+ '',
+ selfService,
+ isAdmin ? null : this.props.auth.user.handle
+ )
+ const projectLoading =
+ window.localStorage.getItem('projectLoading') !== null
+ if (
+ !selfService &&
+ (!reduxProjectInfo || `${reduxProjectInfo.id}` !== projectId) &&
+ !projectLoading
) {
loadProject(projectId)
} else {
@@ -62,23 +100,17 @@ class Challenges extends Component {
}
}
- updateProjectName (val) {
- this.setState({ searchProjectName: val })
- this.props.loadProjects(val, this.state.onlyMyProjects)
- }
-
- toggleMyProjects (evt) {
- this.setState({ onlyMyProjects: evt.target.checked }, () => {
- this.props.loadProjects(this.state.searchProjectName, this.state.onlyMyProjects)
- })
- }
-
render () {
const {
challenges,
isLoading,
warnMessage,
filterChallengeName,
+ filterChallengeType,
+ filterDate,
+ filterSortBy,
+ filterSortOrder,
+ filterProjectOption,
projects,
activeProjectId,
status,
@@ -95,87 +127,84 @@ class Challenges extends Component {
billingEndDate,
isBillingAccountLoadingFailed,
isBillingAccountLoading,
+ dashboard,
selfService,
- auth
+ auth,
+ metadata
} = this.props
- const { searchProjectName, onlyMyProjects } = this.state
+ const { challengeTypes = [] } = metadata
const projectInfo = _.find(projects, { id: activeProjectId }) || {}
- const projectComponents = projects.map(p => (
-
+
+
+ {
+ showAddUser && (
+
+
+
+
+
+
+
+
+ this.onAddUserClick()} />
+
+ )
+ }
+ {
+ this.state.showAddUserModal && (
+
+
+ Add User
+
+
+
+
+
+ {
+ this.state.showSelectUserError && (
+
+ Member* :
+
+
+
+
+
+ )
+ }
+ Please select a member.
+
+
+ {
+ this.state.addUserError && (
+
+
+
+
+
+
+ e.target.checked && this.updatePermission(PROJECT_ROLES.READ)}
+ />
+
+
+
+
+
+ e.target.checked && this.updatePermission(PROJECT_ROLES.WRITE)}
+ />
+
+
+
+
+
+ e.target.checked && this.updatePermission(PROJECT_ROLES.MANAGER)}
+ />
+
+
+
+
+
+ e.target.checked && this.updatePermission(PROJECT_ROLES.COPILOT)}
+ />
+
+
+
+ {this.state.addUserError}
+
+ )
+ }
+
+
+
+ this.resetAddUserState()}
+ />
+
+
+ this.onAddUserConfirmClick()}
+ />
+
+
+
+
+ User
+
+
+ Read
+
+
+ Write
+
+
+ Full Access
+
+
+ Copilot
+
+ -
+ {
+ _.map(projectMembers, (member) => {
+ return (
+
-
+
+
+ )
+ })
+ }
+
- {
- !selfService && (
-
- {(activeProjectId !== -1 || selfService) &&
-
- this.updateProjectName(e.target.value)}
- value={searchProjectName}
- />
-
-
-
- )
- }
- {
- activeProjectId === -1 && !selfService && No project selected. Select one below
- }
- {
- isLoading ? -
- {projectComponents}
-
+ {activeProjectId === -1 && !selfService && (
+
+ ) : null}
+ {(dashboard || activeProjectId !== -1 || selfService) && (
+ No project selected. Select one below
+ )}
+ - {projectComponents}