Skip to content

Commit

Permalink
RS-433 Service Indicators and Student Group Information #49
Browse files Browse the repository at this point in the history 
- App.jsx: Plug in window resize event to display dynamic tab labels.
- App.jsx: Fix the errors with changing the code from <p> to <div>. the
link below helped me.
facebook/react#997
  • Loading branch information
@eunmeeyi
eunmeeyi committed Apr 11, 2015
1 parent fcc44c4 commit 2659a3c
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 31 deletions.
68 changes: 55 additions & 13 deletions src/scripts/components/App.jsx
View file
Expand Up @@ -29,13 +29,22 @@ var App = React.createClass({
//
componentDidMount: function() {
actions.getData();
window.addEventListener("resize", this.onWindowResized);
},
componentWillUnmount: function() {
window.removeEventListener("resize", this.onWindowResized);
},
componentWillUpdate: function(nextProps, nextState){
this.state.isLongerTabLabel = (window.innerWidth >= this.state.windowInnerWidth_borderForTabLabelChange) ? true : false;
},
getInitialState: function() {
return {
adviseesStore: [],
isAscending: sortStore.defaultIsAscending,
isLongerTabLabel: true,
requesting: true,
sortByKey: sortStore.defaultSortByKey
sortByKey: sortStore.defaultSortByKey,
windowInnerWidth_borderForTabLabelChange: 700
}
},
//
Expand Down Expand Up @@ -154,9 +163,14 @@ var App = React.createClass({
);
},
renderAdvisee: function(advisee) {
//--------------------------------------------------//
//
// Handle dynamic flag/sections
// Handle flag/student group/service indicator sections
// and prepare messages when no rows
//
//--------------------------------------------------//
//-- Added by Eunmee Yi on 2015/04/08
//--------------------------------------------------//
var content_flag = !!advisee.flag ? this.renderAdviseeFlag(advisee) : null;

var temp_List;
Expand Down Expand Up @@ -190,17 +204,24 @@ var App = React.createClass({
content_positiveServiceIndicator_Impact = (!!content_positiveServiceIndicator_Impact || !!content_positiveServiceIndicator_NoImpact) ? content_positiveServiceIndicator_Impact : 'No Positive Service Indicators';
content_negativeServiceIndicator_Impact = (!!content_negativeServiceIndicator_Impact || !!content_negativeServiceIndicator_NoImpact) ? content_negativeServiceIndicator_Impact : 'No Negative Service Indicators';

//--------------------------------------------------//
//
// Handle dynamic Tab label
//
var TabLabel_Groups = "Groups";
var TabLabel_Positive = "Positive";
var TabLabel_Negative = "Negative";
if (window.innerWidth > 800) {
TabLabel_Groups = "Student Groups";
TabLabel_Positive = "Positive Service Indicators";
TabLabel_Negative = "Negative Service Indicators";
//--------------------------------------------------//
//-- Added by Eunmee Yi on 2015/04/08
//--------------------------------------------------//
if (this.state.isLongerTabLabel) {
var TabLabel_Groups = "Student Groups";
var TabLabel_Positive = "Positive Service Indicators";
var TabLabel_Negative = "Negative Service Indicators";
}
else {
var TabLabel_Groups = "Groups";
var TabLabel_Positive = "Positive";
var TabLabel_Negative = "Negative";
}
//--------------------------------------------------//

return (
<li className="adv-AdviseeList-item adv-Advisee">
Expand Down Expand Up @@ -289,10 +310,11 @@ var App = React.createClass({
},
renderAdviseeStudentGroup: function(list) {
var cn = classNames({
'adv-Advisee-studentGroup': true,
'adv-Advisee-studentGroup--inactive': !list.active
});
return (
<p className={cn}>
<div className={cn}>
<span className="adv-Advisee-studentGroupHeader">
<span className="adv-Advisee-code">
{list.stdntGroup}:
Expand All @@ -302,7 +324,7 @@ var App = React.createClass({
<span className="adv-Advisee-studentGroupDetail">
{list.activeDescription} {list.effectiveDateDescription}
</span>
</p>
</div>
);
},
renderAdviseeServiceIndicatorSection: function(list, impactDescription) {
Expand All @@ -317,7 +339,7 @@ var App = React.createClass({
},
renderAdviseeServiceIndicator: function(list) {
return (
<p className="adv-Advisee-serviceIndicator">
<div className="adv-Advisee-serviceIndicator">
<span className="adv-Advisee-serviceIndicatorHeader">
<span className="adv-Advisee-code">
{list.serviceIndicatorCode}:
Expand All @@ -330,7 +352,7 @@ var App = React.createClass({
{this.renderAdviseeServiceIndicatorDetail({title: "Start Date" , item: list.startDate})}
{this.renderAdviseeServiceIndicatorDetail({title: "End Date" , item: list.endDate})}
</div>
</p>
</div>
);
},
renderAdviseeServiceIndicatorDetail: function(detail) {
Expand Down Expand Up @@ -390,6 +412,26 @@ var App = React.createClass({
}, function() {
this.refs.error.getDOMNode().focus();
});
},
//
// Window event listener
//
//--------------------------------------------------//
//-- Created by Eunmee Yi on 2015/04/09
//--------------------------------------------------//
onWindowResized: function() {
//console.log("----- onWindowResized: window.innerWidth = ", window.innerWidth, ", this.state.isLongerTabLabel = ", this.state.isLongerTabLabel);
if (
( this.state.isLongerTabLabel && window.innerWidth < this.state.windowInnerWidth_borderForTabLabelChange) ||
(!this.state.isLongerTabLabel && window.innerWidth >= this.state.windowInnerWidth_borderForTabLabelChange)
)
{
this.setState({
isLongerTabLabel: !this.state.isLongerTabLabel
}, function() {
this.render();
});
}
}
});

Expand Down
9 changes: 8 additions & 1 deletion src/scripts/helpers/index.js
View file
Expand Up @@ -26,18 +26,25 @@ function compare(a, b, isAscending) {
a = isString(a) ? a.toLowerCase().trim() : a;
b = isString(b) ? b.toLowerCase().trim() : b;

//--------------------------------------------------//
// Handle if a or b is undefined
// Return 0 if a and b are undefined at the same time
//--------------------------------------------------//
//-- Updated by Eunmee Yi on 2015/04/02
//--------------------------------------------------//
var returnValue = a < b ? -1 : (a > b ? 1 : 0);
returnValue = (!a && !!b) ? -1 : ((!!a && !b) ? 1 : returnValue);
returnValue = returnValue * inverse;
return returnValue;
}

// Added by Eunmee Yi on 2015/04/09
//--------------------------------------------------//
// `list' and 'criteria' are required.
// 'list' is an array and 'criteria' is an object.
// Examples for the 'criteria': {impact: "Yes"} or {impact:"No", startTerm: "4118"}
//--------------------------------------------------//
//-- Added by Eunmee Yi on 2015/04/09
//--------------------------------------------------//
function filterBy(list, criteria) {
return list.filter(function(obj) {
return Object.keys(criteria).every(function(c) {
Expand Down
44 changes: 27 additions & 17 deletions src/scripts/stores/advisees.js
View file
Expand Up @@ -106,25 +106,35 @@ var adviseesStore = Reflux.createStore({
var programGPA = helpers.round(advisee.programGpa, 2);
var universityGPA = helpers.round(advisee.iuGpa, 2);

//--------------------------------------------------//
//
// Variables for Arrays
// Manipulate the data to get 5 proper arrays
// with map()/filter()/sort()
// and send them to render
//
//--------------------------------------------------//
//-- Added by Eunmee Yi on 2015/04/08
//--------------------------------------------------//
var temp_List;
var studentGroups = [];
var positiveServiceIndicators_Impact = [];
var positiveServiceIndicators_NoImpact = [];
var negativeServiceIndicators_Impact = [];
var negativeServiceIndicators_NoImpact = [];

//
// Failed to replace null to "&mdash;" by Eunmee Yi on 2015/04/09
//var stringForEmptyValue = "&mdash;";
var stringForEmptyValue = "-----";

//--------------------------------------------------//
// Student Groups
//
//--------------------------------------------------//
temp_List = advisee.sisStudentGroupList;
if (!!temp_List) {
temp_List =
temp_List
.map(function(list) {
list.activeDescription = !!list.active ? "Active" : "Inactive";
list.activeDescription = !!list.active ? "Active" : (list.active === false ? "Inactive" : stringForEmptyValue );
list.effectiveDateDescription = !!list.effectiveDate ? "as of " + list.effectiveDate : null;
return list;
})
Expand All @@ -133,19 +143,18 @@ var adviseesStore = Reflux.createStore({
studentGroups = temp_List;
}

//
//--------------------------------------------------//
// Positive Service Indicators
//
//--------------------------------------------------//
temp_List = advisee.positiveSisServiceIndicatorList;
if (!!temp_List) {
temp_List =
temp_List
.map(function(list) {
// Failed to replace null to "&mdash;" by Eunmee Yi on 2015/04/09
list.startTermDescr = (!!list.startTermDescr && !!list.startTermDescr.trim()) ? list.startTermDescr : "-";
list.endTermDescr = (!!list.endTermDescr && !!list.endTermDescr.trim()) ? list.endTermDescr : "-";
list.startDate = (!!list.startDate && !!list.startDate.trim()) ? list.startDate : "-";
list.endDate = (!!list.endDate && !!list.endDate.trim()) ? list.endDate : "-";
list.startTermDescr = (!!list.startTermDescr && !!list.startTermDescr.trim()) ? list.startTermDescr : stringForEmptyValue;
list.endTermDescr = (!!list.endTermDescr && !!list.endTermDescr.trim()) ? list.endTermDescr : stringForEmptyValue;
list.startDate = (!!list.startDate && !!list.startDate.trim()) ? list.startDate : stringForEmptyValue;
list.endDate = (!!list.endDate && !!list.endDate.trim()) ? list.endDate : stringForEmptyValue;
return list;
})
;
Expand All @@ -160,18 +169,18 @@ var adviseesStore = Reflux.createStore({
;
}

//
//--------------------------------------------------//
// Nagative Service Indicators
//
//--------------------------------------------------//
temp_List = advisee.negativeSisServiceIndicatorList;
if (!!temp_List) {
temp_List =
temp_List
.map(function(list) {
list.startTermDescr = (!!list.startTermDescr && !!list.startTermDescr.trim()) ? list.startTermDescr : "-";
list.endTermDescr = (!!list.endTermDescr && !!list.endTermDescr.trim()) ? list.endTermDescr : "-";
list.startDate = (!!list.startDate && !!list.startDate.trim()) ? list.startDate : "-";
list.endDate = (!!list.endDate && !!list.endDate.trim()) ? list.endDate : "-";
list.startTermDescr = (!!list.startTermDescr && !!list.startTermDescr.trim()) ? list.startTermDescr : stringForEmptyValue;
list.endTermDescr = (!!list.endTermDescr && !!list.endTermDescr.trim()) ? list.endTermDescr : stringForEmptyValue;
list.startDate = (!!list.startDate && !!list.startDate.trim()) ? list.startDate : stringForEmptyValue;
list.endDate = (!!list.endDate && !!list.endDate.trim()) ? list.endDate : stringForEmptyValue;
return list;
})
;
Expand All @@ -185,6 +194,7 @@ var adviseesStore = Reflux.createStore({
.sort(helpers.sortBy("serviceIndicatorDescr", true, "startDate"))
;
}
//--------------------------------------------------//

return {
name: advisee.studentName,
Expand Down
2 changes: 2 additions & 0 deletions src/styles/modules/adv/Advisee.less
View file
Expand Up @@ -82,6 +82,8 @@

&-studentGroup {

margin: 0.5em;

&--inactive {
color: @color-Base--250;
}
Expand Down

0 comments on commit 2659a3c

Please sign in to comment.