diff --git a/src/components/utils/QuestionType.js b/src/components/utils/QuestionType.js index 3a9f484..da8944d 100644 --- a/src/components/utils/QuestionType.js +++ b/src/components/utils/QuestionType.js @@ -7,17 +7,101 @@ import {Map, List} from 'immutable'; let QuestionTypes = Map({ + TimeAvailability: Map({ + type:'TimeAvailability', + display:'Time Availability', + description:'This type allows participants to select days of the week', + options:Map({ + 'tooltip':true, + 'tooltipHint':'Descripe the question to your participants', + 'tooltipLabel':'Description', + + 'answersEnableMaximum':true, + 'answersEnableMaximumHint':'This toggle enables the maximum answers limit', + 'answersEnableMaximumTrueLabel':'Enabled', + 'answersEnableMaximumFalseLabel':'Disabled', + + 'answersMaximum':true, + 'answersMaximumHint':'Maximum amount of answers allowed.', + 'answersMaximumLabel':'Maximum Answers Limit', + + 'answersEnableMinimum':true, + 'answersEnableMinimumHint':'This toggle enables the minimum answers limit', + 'answersEnableMinimumTrueLabel':'Enabled', + 'answersEnableMinimumFalseLabel':'Disabled', + + 'answersMinimum':true, + 'answersMinimumHint':'Minimum amount of answers allowed. (Must be less than 8)', + 'answersMinimumLabel':'Minimum Answers Limit', + + 'answersEnableFilter':false, + 'answersEnableFilterHint':'When filter is enabeled, only options in this list can be selected', + 'answersEnableFilterTrueLabel':'Enabled', + 'answersEnableFilterFalseLabel':'Disabled', + + 'answersFilter':false, + 'answersFilterHint':'When filter is enabeled, participant will only be able to select answers from this field', + 'answersFilterLabel':'Limit Options', + + 'answersFilterEnableBlacklistMode':false, + 'answersFilterEnableBlacklistModeHint':'Blacklist: block filter entries. Whitelist: allow filter entries.', + 'answersFilterEnableBlacklistModeTrueLabel':'Blacklist', + 'answersFilterEnableBlacklistModeFalseLabel':'Whitelist', + }) + }), + ProgrammingLanguages: Map({ + type:'ProgrammingLanguages', + display:'Programming Languages', + description:'This type allows participants select programming languages', + options:Map({ + 'tooltip':true, + 'tooltipHint':'Descripe the question to your participants', + 'tooltipLabel':'Description', + + 'answersEnableMaximum':true, + 'answersEnableMaximumHint':'This toggle enables the maximum answers limit', + 'answersEnableMaximumTrueLabel':'Enabled', + 'answersEnableMaximumFalseLabel':'Disabled', + + 'answersMaximum':true, + 'answersMaximumHint':'Maximum amount of answers allowed.', + 'answersMaximumLabel':'Maximum Answers Limit', + + 'answersEnableMinimum':true, + 'answersEnableMinimumHint':'This toggle enables the minimum answers limit', + 'answersEnableMinimumTrueLabel':'Enabled', + 'answersEnableMinimumFalseLabel':'Disabled', + + 'answersMinimum':true, + 'answersMinimumHint':'Minimum amount of answers allowed.', + 'answersMinimumLabel':'Minimum Answers Limit', + + 'answersEnableFilter':false, + 'answersEnableFilterHint':'Toggles between Limited and Unlimited answers. In Limited mode, studennts can only choose from this list of options. in Unlimited mode, Students may add their own answers', + 'answersEnableFilterTrueLabel':'Limited', + 'answersEnableFilterFalseLabel':'Unlimited', + + 'answersFilter':false, + 'answersFilterHint':'When filter is enabeled, participant will only be able to select answers from this field', + 'answersFilterLabel':'Options', + + 'answersFilterEnableBlacklistMode':false, + 'answersFilterEnableBlacklistModeHint':'Blacklist: block filter entries. Whitelist: allow filter entries.', + 'answersFilterEnableBlacklistModeTrueLabel':'Blacklist', + 'answersFilterEnableBlacklistModeFalseLabel':'Whitelist', + }) + }), CircleSelection: Map({ type:'CircleSelection', - display:'Circle Selection', - description:'This type allows participants to selected multiple answers from a list of options', + display:'Radio Button Selection', + description:'This type allows participants to toggle choises from a set of radio buttons representing options', options:Map({ 'tooltip':true, 'tooltipHint':'Descripe the question to your participants', 'tooltipLabel':'Description', 'answersEnableMaximum':true, - 'answersEnableMaximumHint':'', + 'answersEnableMaximumHint':'This toggle enables the maximum answers limit', 'answersEnableMaximumTrueLabel':'Enabled', 'answersEnableMaximumFalseLabel':'Disabled', @@ -26,7 +110,7 @@ let QuestionTypes = Map({ 'answersMaximumLabel':'Maximum Answers Limit', 'answersEnableMinimum':true, - 'answersEnableMinimumHint':'', + 'answersEnableMinimumHint':'This toggle enables the minimum answers limit', 'answersEnableMinimumTrueLabel':'Enabled', 'answersEnableMinimumFalseLabel':'Disabled', @@ -59,7 +143,7 @@ let QuestionTypes = Map({ 'tooltipLabel':'Description', 'answersEnableMaximum':true, - 'answersEnableMaximumHint':'', + 'answersEnableMaximumHint':'This toggle enables the maximum answers limit', 'answersEnableMaximumTrueLabel':'Enabled', 'answersEnableMaximumFalseLabel':'Disabled', @@ -68,7 +152,7 @@ let QuestionTypes = Map({ 'answersMaximumLabel':'Maximum Answers Limit', 'answersEnableMinimum':true, - 'answersEnableMinimumHint':'', + 'answersEnableMinimumHint':'This toggle enables the minimum answers limit', 'answersEnableMinimumTrueLabel':'Enabled', 'answersEnableMinimumFalseLabel':'Disabled', @@ -77,15 +161,15 @@ let QuestionTypes = Map({ 'answersMinimumLabel':'Minimum Answers Limit', 'answersEnableFilter':true, - 'answersEnableFilterHint':'Limit the answers allowed to answers seperated by comma in this field.', + 'answersEnableFilterHint':'When filter is enabeled, only options in this list can be selected', 'answersEnableFilterTrueLabel':'Enabled', 'answersEnableFilterFalseLabel':'Disabled', 'answersFilter':true, - 'answersFilterHint':'When filter is enabeled, only optiosn in this list can be selected', - 'answersFilterLabel':'Filter', + 'answersFilterHint':'When filter is enabeled, participant will only be able to select answers from this field', + 'answersFilterLabel':'Limit Options', - 'answersFilterEnableBlacklistMode':true, + 'answersFilterEnableBlacklistMode':false, 'answersFilterEnableBlacklistModeHint':'Blacklist: block filter entries. Whitelist: allow filter entries.', 'answersFilterEnableBlacklistModeTrueLabel':'Blacklist', 'answersFilterEnableBlacklistModeFalseLabel':'Whitelist', @@ -93,41 +177,41 @@ let QuestionTypes = Map({ }), 'SingleInputTextField': Map({ type:'SingleInputTextField', - display:'Single Answer Text-Field', - description:'This type allows participants to enter a single textual answer', + display:'Text Field', + description:'This type allows participants to enter information into an Open-Ended Text Field', options:Map({ 'tooltip':true, 'tooltipHint':'Descripe the question to your participants', 'tooltipLabel':'Description', - 'answersEnableMaximum':true, + 'answersEnableMaximum':false, 'answersEnableMaximumHint':'', 'answersEnableMaximumTrueLabel':'Enabled', 'answersEnableMaximumFalseLabel':'Disabled', - 'answersMaximum':true, + 'answersMaximum':false, 'answersMaximumHint':'Maximum amount of characters allowed.', 'answersMaximumLabel':'Maximum Character Limit', - 'answersEnableMinimum':true, + 'answersEnableMinimum':false, 'answersEnableMinimumHint':'', 'answersEnableMinimumTrueLabel':'Enabled', 'answersEnableMinimumFalseLabel':'Disabled', - 'answersMinimum':true, + 'answersMinimum':false, 'answersMinimumHint':'Minimum amount of characters allowed.', - 'answersMinimumLabel':'Minimum Characters Limit', + 'answersMinimumLabel':'Minimum Character Limit', - 'answersEnableFilter':true, - 'answersEnableFilterHint':'Limit the answers allowed to answers seperated by comma in this field.', + 'answersEnableFilter':false, + 'answersEnableFilterHint':'Limit the answers allowed to only these options.', 'answersEnableFilterTrueLabel':'Enabled', 'answersEnableFilterFalseLabel':'Disabled', - 'answersFilter':true, - 'answersFilterHint':'When filter is enabeled, only optiosn in this list can be selected', + 'answersFilter':false, + 'answersFilterHint':'When filter is enabeled, only options in this list can be selected', 'answersFilterLabel':'Filter', - 'answersFilterEnableBlacklistMode':true, + 'answersFilterEnableBlacklistMode':false, 'answersFilterEnableBlacklistModeHint':'Blacklist: block filter entries. Whitelist: allow filter entries.', 'answersFilterEnableBlacklistModeTrueLabel':'Blacklist', 'answersFilterEnableBlacklistModeFalseLabel':'Whitelist', diff --git a/src/routes/Activity/components/ActivityView.js b/src/routes/Activity/components/ActivityView.js index d82c58e..926dd89 100644 --- a/src/routes/Activity/components/ActivityView.js +++ b/src/routes/Activity/components/ActivityView.js @@ -3,11 +3,13 @@ * Additions made by Joseph 5/28/17 */ import React from 'react' -import {Grid, Segment} from 'semantic-ui-react' +import {Grid, Segment, Button} from 'semantic-ui-react' import {DragDropContext} from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; import ParticipantListSidebar from "./ParticipantListSidebar" +import {Map, List, Set} from 'immutable'; + import GroupCard from "./GroupCard/GroupCard" import FilterMenu from "./FilterMenu" @@ -36,83 +38,17 @@ export class ActivityCardViewWrapper extends React.Component { export class ActivityView extends React.Component { constructor(props) { super(props); - - this.state = ({filters: []}); - this.toggleLock = this.toggleLock.bind(this); - } componentWillMount() { this.props.fetchParticipantList(this.props.activityId); } - toggleLock(group) { - this.props.toggleLock(group); - } - - setFilterValues = (input, event) => { - console.log('---------------------------'); - console.log('SET FILTER VALUES'); - console.log(input); - console.log(event.target); - console.log('---------------------------'); - let field = this.state[input]; - if(event.target.getAttribute('class') === "delete icon") { - let item = event.target.parentNode.getAttribute('value'); - let index = field.indexOf(item) - if(index >= 0) { - field.splice(index, 1); // remove item from filter - } - } else { - if(event.target.getAttribute('name') !== "-search") { - if(event.target.getAttribute('name') === null) { - field.push(event.target.parentNode.getAttribute('name')); // add item to filter - } else { - field.push(event.target.getAttribute('name')); // add item to filter - } - } - } - this.setState({field:field}); - } - - setCurrentlySelected(id) { this.props.filterParticipantsMatch(id); } - - render() { + render (){ const itemsPerRow = 10; const cardsPerRow = 1; let numOfGroups = this.props.totalCapacity / this.props.groupCapacity; - const refilterParticipants = (participants) => { - const hasSkills = (filterSkills, skills) => { - skills = skills.map( (skill) => (skill.name)); - - let result = true; - for (let i = 0; i < filterSkills.length; i++) { - result &= skills.includes(filterSkills[i]); - } - return result; - } - - const hasFilterValues = (filter, participant) => { - if (filter.length === 0) { - return true; - } - - const skills = participant.skills, - availiblity = participant.availability; - - return hasSkills(filter, skills); - } - - return participants.filter( - (participant) => { - return hasFilterValues(this.props.filter, participant); - } - ) - } - - /* the master participants list is filtered here it is just a hacky implementation*/ - let participants = refilterParticipants(this.props.participants); - - let separateIntoGroups = (participants) => { + + let separateParticipantsIntoGroups = () => { let groups = []; for (let i = 0; i < numOfGroups; i++) { groups.push({ @@ -120,20 +56,19 @@ export class ActivityView extends React.Component { participants: [] }) } - - for (let i = 0; i < participants.length; i++) { - let participantGroupNumber = participants[i].groupNumber; + this.props.participants.forEach((participant) => { + console.log(participant); + let participantGroupNumber = participant.get('groupNumber'); if (participantGroupNumber >= 0 && participantGroupNumber < numOfGroups) { - groups[participantGroupNumber].participants.push(participants[i]); + groups[participantGroupNumber].participants.push(participant); } - } + }); return groups; }; - let dragging = (this.props.matching.get("current").length > 0); - let getGroupCards = (groups) => { + console.log(this.props.activityId) return ( groups.map( (group, i) => ( @@ -144,45 +79,30 @@ export class ActivityView extends React.Component { itemsPerRow={ itemsPerRow } updateParticipantGroupNumber={ this.props.updateParticipantGroupNumber } activityId={ this.props.activityId } - setCurrentlySelected={ this.setCurrentlySelected.bind(this) } - toggleLock={ this.toggleLock.bind(this) } - matching={ this.props.matching.get("matchingCriteria") } - draggedUser={ this.props.matching.get("current") } + setCurrentlySelected={(v) => console.log(v) } + toggleLock={(v) => console.log(v) } group={ i } - unlocked={ this.props.unlocked.get(i) } - filters={ this.state.filters } - dragging={dragging} + unlocked={ this.props.lockedGroups.get(i)} /> ) ) ) }; - return (
- - - { - (this.props.participants.length > 0) && - - } - - - { getGroupCards(separateIntoGroups(participants)) } - + + console.log(v) }> + + { getGroupCards(separateParticipantsIntoGroups()) } + -
+ ) } } diff --git a/src/routes/Activity/components/GroupCard/GroupCard.js b/src/routes/Activity/components/GroupCard/GroupCard.js index ab20dd2..7fd0bbe 100644 --- a/src/routes/Activity/components/GroupCard/GroupCard.js +++ b/src/routes/Activity/components/GroupCard/GroupCard.js @@ -42,12 +42,10 @@ class DraggableCard extends React.Component { offset={ 0 } name={ participant.name } image={ participant.image } + surveyResponses={ this.props.surveyResponses } groupNumber={participant.groupNumber } - skills={ participant.skills } - availability={ participant.availability } participantId={ participant.participantId }/> - if (this.props.unlocked) { return ( participantCard ) } @@ -78,28 +76,25 @@ const participantTarget = { ) class GroupCard extends React.Component { static propTypes = { + /* activityId: PropTypes.string.isRequired, participants: PropTypes.array.isRequired, capacity: PropTypes.number.isRequired, groupNumber: PropTypes.number.isRequired, itemsPerRow: PropTypes.number.isRequired, updateParticipantGroupNumber: PropTypes.func.isRequired + */ } constructor (props) { super(props) - /* - this.state = { - matchingStatusOpen: true, availability: [], skills: [] - } - */ } render () { const {connectDropTarget, isOver} = this.props let generateEmptySpots = () => { - let emptyNum = this.props.capacity - this.props.participants.length + let emptyNum = this.props.capacity - this.props.participants.size let result = [] for (let i = 0; i < emptyNum; i++) { result.push( @@ -146,89 +141,14 @@ class GroupCard extends React.Component { return skillCountMap } - let skills = generateSkillCountMap(this.props.participants) - let days = overAllAvailability(this.props.participants) - let numsTodays = { - 1: 'monday', - 2: 'tuseday', - 3: 'wednesday', - 4: 'thursday', - 5: 'friday', - 6: 'saturday', - 0: 'sunday' - } - let daysToNums = { - 'monday': 1, - 'tuseday': 2, - 'wednesday': 3, - 'thursday': 4, - 'friday': 5, - 'saturday': 6, - 'sunday': 0 - } - let count = 0 - let matchingColor = '' - let i - let itemCount = this.props.matching.size - let view = true - let result = 0 - if (itemCount > 0) { - for (i = 0; i < days.length; i++) { - if (this.props.matching.has(numsTodays[i]) && days[i]) { - count++ - } - - } - - let keys = Object.keys(skills) - for (i = 0; i < keys.length; i++) { - if (this.props.matching.has(keys[i])) { - count++ - } - } - - result = Math.round((count / itemCount) * 100) / 100 - - if (result > .70 || this.props.participants.length === 0) { - matchingColor = 'green' - } else if (result > .45) { - matchingColor = 'yellow' - } else { - matchingColor = 'red' - } - } - - for (i = 0; i < this.props.filters.length; i++) { - if (this.props.filters[i] in daysToNums) { - if (!days[daysToNums[this.props.filters[i]]]) { - view = false - break - } - } else { - if (Object.keys(skills).indexOf(this.props.filters[i]) === -1) { - view = false - break - } - } - } - - let background = '' - if (this.props.participants.some((el) => el.participantId === this.props.draggedUser)) { - background = 'black' - } - - if (this.props.unlocked) { - matchingColor = 'grey' - } - let display = (
- Group { this.props.groupNumber }   - {/*matching:  {Math.round(result*100)}% */} - - { - this.props.participants.map((participant) => - - ) - } { generateEmptySpots() } - - - { (this.props.participants.length > 0 ) && - } - - { (this.props.participants.length > 0 ) && - } + { + //Question Segment + }
) diff --git a/src/routes/Activity/components/ParticipantListSidebar/ParticipantListSidebar.js b/src/routes/Activity/components/ParticipantListSidebar/ParticipantListSidebar.js index 3b16927..47995e4 100644 --- a/src/routes/Activity/components/ParticipantListSidebar/ParticipantListSidebar.js +++ b/src/routes/Activity/components/ParticipantListSidebar/ParticipantListSidebar.js @@ -38,7 +38,8 @@ class DraggableParticipantListItem extends React.Component { render () { const {image, name, participantId, connectDragSource, isDragging} = this.props return connectDragSource( -
@@ -51,12 +52,14 @@ class DraggableParticipantListItem extends React.Component { class Participant extends React.Component { static propTypes = { + /* participantId: PropTypes.string.isRequired, name: PropTypes.string.isRequired, image: PropTypes.string.isRequired, groupNumber: PropTypes.number.isRequired, availability: PropTypes.array.isRequired, skills: PropTypes.array.isRequired, + */ } render () { @@ -64,17 +67,17 @@ class Participant extends React.Component { + setCurrentlySelected={(v) => {console.log(v)}}/> ) return ( ( - participants.filter((participantObj) => ( - participantObj.groupNumber < 0 - )).length + let getUngroupedNumber = () => ( + this.props.participants.filter((participantObj) => ( + participantObj.get('groupNumber') < 0 + )).size ) + let generateSidebarList = (participants) => ( { - participants.filter((participantObj) => ( - participantObj.groupNumber == -1 - )) - - .map((participantObj) => ( - - )) + participants.filter((participantObj) => { + return (participantObj.get('groupNumber') === -1); + }) + .map((participantObj) => { + return + }) } ) @@ -194,7 +180,6 @@ class ParticipantListSidebar extends React.Component {
) - return connectDropTarget(
@@ -203,28 +188,22 @@ class ParticipantListSidebar extends React.Component { open={ true } zDepth={ 1 } width={290} - containerStyle={ {backgroundColor: (!this.props.isOver) ? '#F6F7F9' : '#EFF0F2'} } + containerStyle={{backgroundColor: (!this.props.isOver) ? '#F6F7F9' : '#EFF0F2'}} style={ {zIndex: '1000 !important', width: "290px"} } >
{ - (this.props.participants.length <= 0) ? generateEmptyMessage() : ((getUngroupedNumber(this.props.participants)) ? generateSidebarList(this.props.participants) : generateEmailButton()) + (this.props.participants.size <= 0) ? + generateEmptyMessage() + : + ((getUngroupedNumber(this.props.participants)) ? + generateSidebarList(this.props.participants) + : + generateEmailButton()) } - {/* - - */}
diff --git a/src/routes/Activity/components/ParticipantProfilePopup/ParticipantProfilePopup.js b/src/routes/Activity/components/ParticipantProfilePopup/ParticipantProfilePopup.js index 488312c..df46dec 100644 --- a/src/routes/Activity/components/ParticipantProfilePopup/ParticipantProfilePopup.js +++ b/src/routes/Activity/components/ParticipantProfilePopup/ParticipantProfilePopup.js @@ -4,41 +4,31 @@ import React from 'react' import {Card, Popup, Image, Label, Button, Icon} from 'semantic-ui-react' import PropTypes from "prop-types" - +import * as renderFunctions from './renderFunctions' import getColorByLanguage from "../../modules/LanguageColorMap"; class PopupContent extends React.Component { static propTypes = { + /* name: PropTypes.string.isRequired, image: PropTypes.string.isRequired, groupNumber: PropTypes.number.isRequired, availability: PropTypes.array.isRequired, skills: PropTypes.array.isRequired + */ }; - render() { - let generateAvailabilities = (availability) => { - let weekdayInitial = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; - if (availability.length !== 7) { - alert("availability array: is greater than 7") - } - - let labels = []; - for (let i = 0; i < weekdayInitial.length; i++) { - (availability[i]) ? - labels.push(): - labels.push(); - } - return labels; - }; - - let generateSkillLabels = (skills) => { - let i = 0; - return skills.map((skill) => - + render() { + let answerSegments = []; + this.props.surveyResponses.forEach((response, index) => { + (renderFunctions[response.get('question')]) && + answerSegments.push( + + + {renderFunctions[response.get('question')](response.get('answer'))} + + ); - }; + }) return ( @@ -55,16 +45,7 @@ class PopupContent extends React.Component { } - - - { generateAvailabilities(this.props.availability)} - - - - - { generateSkillLabels(this.props.skills) } - - + {answerSegments} ); } @@ -73,6 +54,7 @@ class PopupContent extends React.Component { class ParticipantProfilePopup extends React.Component { static propTypes = { + /* name: PropTypes.string.isRequired, participantId: PropTypes.string.isRequired, image: PropTypes.string.isRequired, @@ -83,11 +65,12 @@ class ParticipantProfilePopup extends React.Component { trigger: PropTypes.node.isRequired, position:PropTypes.string.isRequired, offset: PropTypes.number.isRequired + */ }; render() { return ( - diff --git a/src/routes/Activity/components/ParticipantProfilePopup/renderFunctions.js b/src/routes/Activity/components/ParticipantProfilePopup/renderFunctions.js new file mode 100644 index 0000000..6223af5 --- /dev/null +++ b/src/routes/Activity/components/ParticipantProfilePopup/renderFunctions.js @@ -0,0 +1,69 @@ +/* + * Created by Matt on 05/25/17 + * This file defines a List of Maps containing the question types and what features they might use + */ + +import React from 'react' +import {Map, List, Set} from 'immutable'; +import {Card, Popup, Image, Label, Button, Icon} from 'semantic-ui-react' +import getColorByLanguage from "../../modules/LanguageColorMap"; + +function TimeAvailability (answers) { + let weekdays= ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + + let labels = []; + weekdays.forEach((day, index) => { + (answers.has(day)) ? + labels.push() + : + labels.push() + }) + return labels; +} + +function ProgrammingLanguages (answers) { + return answers.map((answer, index) => + + ); +} + +function CircleSelection (answers) { + let labels = []; + weekdays.forEach((day, index) => { + labels.push() + }) + return labels; + +} + +function MultiInputTextField (answers) { + return answers.map((answer, index) => + + ); +} + +function SingleInputTextField (answers) { + return answers.map((answer, index) => + + ); +} + +export { + TimeAvailability, + ProgrammingLanguages, + CircleSelection, + MultiInputTextField, + SingleInputTextField, +} diff --git a/src/routes/Activity/containers/ActivityContainer.js b/src/routes/Activity/containers/ActivityContainer.js index 7a5e0d4..8feef67 100644 --- a/src/routes/Activity/containers/ActivityContainer.js +++ b/src/routes/Activity/containers/ActivityContainer.js @@ -25,12 +25,17 @@ const mapDispatchToProps = (dispatch) => ({ const mapStateToProps = (state, ownProps) => { return { activityId: ownProps.location.query.id, - participants: state.activity.get("participants"), + groupCapacity: state.activity.get("groupCapacity"), totalCapacity: state.activity.get("totalCapacity"), - matching: state.activity.get("matching"), - unlocked: state.activity.get("unlocked"), - filter: state.activity.get("filter") + + participants: state.activity.get("participants"), + + lockedGroups: state.activity.get("lockedGroups"), + + allAnswers: state.activity.get("allAnswers"), + filter: state.activity.get("filter"), + } }; diff --git a/src/routes/Activity/modules/actions/fetchParticpantListActions.js b/src/routes/Activity/modules/actions/fetchParticpantListActions.js index b956dc2..984b6f4 100644 --- a/src/routes/Activity/modules/actions/fetchParticpantListActions.js +++ b/src/routes/Activity/modules/actions/fetchParticpantListActions.js @@ -5,40 +5,21 @@ import axios from "axios"; import generateUsers from "../UserGenerator" import { sortParticipants } from "./userMatchingActions" import { createLocks } from "./groupLockActions" -const SERVER_URL = "http://localhost:3000"; -const numOfPeople = 50, - groupCapacity = 3, - totalCapacity = 60; +const SERVER_URL = "http://" + window.location.host; /* fetching, get requests */ export const FETCH_PARTICIPANT_LIST = "FETCH_PARTICIPANT_LIST"; let fetchParticipantList = (dispatch) => { return (activityId) => { dispatch({ type: FETCH_PARTICIPANT_LIST }); - let participants = generateUsers(groupCapacity, numOfPeople) - dispatch(fetchParticipantListSuccess( - { - participants: participants, - groupCapacity: groupCapacity, - totalCapacity: totalCapacity - } - )); - - dispatch(sortParticipants(participants)); - - dispatch(createLocks((totalCapacity / groupCapacity))); - - /* let url = SERVER_URL + "/api/activities/" + activityId + "/participants/"; axios.get(url) .then((response) => { - //console.log(JSON.stringify(response, null, 2)); - dispatch(fetchParticipantListSuccess(response.data)); + dispatch(fetchParticipantListSuccess(response.data)); }) .catch((error) => { - dispatch(fetchParticipantListFailure(error)); + dispatch(fetchParticipantListFailure(error)); }); - */ } }; diff --git a/src/routes/Activity/modules/reducer/actionsHandlers/fetchParticipantListActionsHandlers.js b/src/routes/Activity/modules/reducer/actionsHandlers/fetchParticipantListActionsHandlers.js index b210b32..9eba950 100644 --- a/src/routes/Activity/modules/reducer/actionsHandlers/fetchParticipantListActionsHandlers.js +++ b/src/routes/Activity/modules/reducer/actionsHandlers/fetchParticipantListActionsHandlers.js @@ -1,17 +1,58 @@ /** * Created by rui on 5/9/17. + * Developed by Matt on 6/2/17 */ -// TODO: needs to be implemented - +import {Map, Set, List, OrderedSet} from 'immutable'; let handleFetchParticipantList = (state, payload) => { return state; }; let handleFetchParticipantListSuccess = (state, payload) => { - let update = state.set("participants", payload.participants); - update = update.set("groupCapacity", payload.groupCapacity); - update = update.set("totalCapacity", payload.totalCapacity) - return update + let participantList = List([]); + + payload.participants.forEach((participant) => { + participantList = participantList.push(Map(participant)); + }); + + let newState = state.set("participants", participantList); + + + newState = newState.update('participants', (participants) => { + let newParticipants = List([]); + participants.forEach((participant) => { + let newSurveyResponses = List([]); + participant.get('surveyResponses').forEach((response) => { + let newResponse = Map({ + question: response.question , + answer: Set(response.answer) + }); + newSurveyResponses = newSurveyResponses.push(newResponse); + }); + newParticipants = newParticipants.push(Map({ + surveyResponses: newSurveyResponses, + participantId:participant.get('_id'), + groupNumber: participant.get('groupNumber'), + name:participant.get('name'), + image:participant.get('image') + })); + }); + return newParticipants; + }); + + newState = newState.update("allAnswers", (allAnswers) => { + let newAllAnswers = Set([]); + newState.get('participants').forEach((participant) => { + participant.get('surveyResponses').forEach((response) => { + newAllAnswers = newAllAnswers.union(response.get('answer')); + }); + }); + return newAllAnswers; + }); + + newState = newState.set("groupCapacity", payload.groupCapacity); + newState = newState.set("totalCapacity", payload.totalCapacity); + newState = newState.set("lockedGroups", Set(payload.lockedGroups)); + return newState }; let handleFetchParticipantListFailure = (state, payload) => { diff --git a/src/routes/Activity/modules/reducer/actionsHandlers/groupLockActionsHandlers.js b/src/routes/Activity/modules/reducer/actionsHandlers/groupLockActionsHandlers.js index 2f8e389..90f6cc7 100644 --- a/src/routes/Activity/modules/reducer/actionsHandlers/groupLockActionsHandlers.js +++ b/src/routes/Activity/modules/reducer/actionsHandlers/groupLockActionsHandlers.js @@ -10,11 +10,12 @@ let handleCreateLocks = (state, payload) => { } let handleToggleLock = (state, payload) => { + console.log('Toggle'); let update = state.setIn(["unlocked", payload], !state.getIn(["unlocked", payload])); - return update; + return state; } export { handleCreateLocks, handleToggleLock -} \ No newline at end of file +} diff --git a/src/routes/Activity/modules/reducer/actionsHandlers/updateParticipantGroupNumberActionsHandlers.js b/src/routes/Activity/modules/reducer/actionsHandlers/updateParticipantGroupNumberActionsHandlers.js index 378af15..ccc4a14 100644 --- a/src/routes/Activity/modules/reducer/actionsHandlers/updateParticipantGroupNumberActionsHandlers.js +++ b/src/routes/Activity/modules/reducer/actionsHandlers/updateParticipantGroupNumberActionsHandlers.js @@ -14,21 +14,16 @@ let arrayObjectIndexOf = (myArray, searchTerm, property) => { }; let handleUpdateParticipantGroupsNumber = (state, payload) => { - let newState = (JSON.parse(JSON.stringify(state))), - - participantId = payload.participantId, - oldGroupNumber = payload.oldGroupNumber, - newGroupNumber = payload.newGroupNumber, - participants = newState.participants, - participantIndex = arrayObjectIndexOf(participants, participantId, "participantId"); - - // console.log(JSON.stringify(participantIndex, null, 2)); - participants[participantIndex].groupNumber = newGroupNumber; - let temp = Object.assign({}, participants[participantIndex]); - participants.splice(participantIndex, 1); - participants.push(temp); - let update = state.set("participants", participants); - return update; + console.log(payload) + console.log(state) + let index = state.get('participants') + .findIndex((participant) => (participant.get('participantId') === payload.participantId)) + let newState = ((index == -1) ? + state.setIn(['participants', index], payload.newGroupNumber) + : + state) + + return newState; }; let handleUpdateParticipantGroupsNumberSuccess = (state, payload) => { diff --git a/src/routes/Activity/modules/reducer/reducer.js b/src/routes/Activity/modules/reducer/reducer.js index 62028ce..6158f5c 100644 --- a/src/routes/Activity/modules/reducer/reducer.js +++ b/src/routes/Activity/modules/reducer/reducer.js @@ -1,16 +1,23 @@ /** * Created by rui on 4/18/17. */ -import { Map, List } from "immutable" +import { Map, List, Set } from "immutable" import * as Actions from "../actions" import * as ActionsHandlers from "./actionsHandlers" const initialState = Map({ - participants: [], + currentlyDragging: '', + groupCapacity: 0, totalCapacity: 0, - unlocked: List([]), - filter: [], + + participants: List([]), + + lockedGroups: Set([]), + + allAnswers: Set([]), + filter: Set([]), + matching: Map({ current: "", matchingParticipants: new Set(), diff --git a/src/routes/Survey/modules/actions/submitSurveyActions.js b/src/routes/Survey/modules/actions/submitSurveyActions.js index b5d37f0..3362b87 100644 --- a/src/routes/Survey/modules/actions/submitSurveyActions.js +++ b/src/routes/Survey/modules/actions/submitSurveyActions.js @@ -13,7 +13,7 @@ let submitSurvey = (dispatch) => { payload.questions.forEach((question) => { surveyResponses.push( { - question:question.get('title'), + question:question.get('type'), answer:question.get('answers') } ); diff --git a/src/store/createStore.js b/src/store/createStore.js index 90baee8..1a2b50f 100644 --- a/src/store/createStore.js +++ b/src/store/createStore.js @@ -3,6 +3,7 @@ import thunk from 'redux-thunk' import {browserHistory} from 'react-router' import makeRootReducer from './reducers' import {updateLocation} from './location' +import Immutable from 'immutable'; import generateUsers from "../routes/Activity/modules/UserGenerator" @@ -20,7 +21,11 @@ export default (initialState = {}) => { let composeEnhancers = compose; if (__DEV__) { - const composeWithDevToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__; + const composeWithDevToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ + serialize: { + immutable: Immutable + } + }); if (typeof composeWithDevToolsExtension === 'function') { composeEnhancers = composeWithDevToolsExtension }