Skip to content

Commit

Permalink
Convert affiliation agreement react components over to webpack bundles.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlbooker
jlbooker committed Oct 18, 2016
1 parent 8b7795b commit 34c111b
Show file tree
Hide file tree
Showing 7 changed files with 241 additions and 197 deletions.
15 changes: 11 additions & 4 deletions class/UI/EditAgreementUI.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
use \Intern\AffiliationAgreementFactory;
use \Intern\AffiliateFolder;
use \Intern\AffiliationContract;
use \Intern\AssetResolver;

class EditAgreementUI implements UI
{
Expand All @@ -19,8 +20,16 @@ public function display()

$affiliate_agreement = AffiliationAgreementFactory::getAffiliationById($aaId);

javascript('jquery');
javascriptMod('intern', 'affiliationAgreement', array('ID'=>$affiliate_agreement->getId()));
$tpl = array();

//javascript('jquery');
//javascriptMod('intern', 'affiliationAgreement', array('ID'=>$affiliate_agreement->getId()));

$tpl['AGREEMENT_ID'] = $aaId;
$tpl['vendor_bundle'] = AssetResolver::resolveJsPath('assets.json', 'vendor');
$tpl['department_bundle'] = AssetResolver::resolveJsPath('assets.json', 'affiliationDepartments');
$tpl['location_bundle'] = AssetResolver::resolveJsPath('assets.json', 'affiliationLocation');
$tpl['terminate_bundle'] = AssetResolver::resolveJsPath('assets.json', 'affiliationTerminate');

/* Form for adding new grad program */
$form = new \PHPWS_Form('edit_affil');
Expand Down Expand Up @@ -50,8 +59,6 @@ public function display()
$form->setMatch('auto_renew', 'yes');
}

$tpl = array();

/*
* If 'missing' is set then we have been redirected
* back to the form because the user didn't type in something
Expand Down
178 changes: 92 additions & 86 deletions javascript/affiliationAgreement/AffiliationDepartments.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,91 @@
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

// Components for adding departments to an Affiliation Agreement
// on the Edit Affiliation interface.


var DepartmentItem = React.createClass({
remove: function() {
this.props.onRemoveClick(this.props.dept);
},
render: function() {
return (
<li className="list-group-item">
{this.props.dept.name}
<button onClick={this.remove} className="close">&times;</button>
</li>
);
}
});


var DepartmentList = React.createClass({
removeClick: function(deptToRemove) {
this.props.removeClick(deptToRemove);
},
render: function() {
var listNodes = this.props.departments.map(function(department){
return (
<DepartmentItem key={department.id} onRemoveClick={this.removeClick} dept={department}/>
);
}.bind(this));

return (
<ul className="list-group">
{listNodes}
</ul>
);
}
});


var DepartmentDropdown = React.createClass({
add: function() {
var deptToAdd = this.refs.deptChoices.getDOMNode().value;
this.props.onAdd(deptToAdd);
},
render: function() {
var options = this.props.departments;
options.unshift({id:0, name: "Select a Department"});

var selectOptions = options.map(function(department){

// Check if this department is in the set of used departments
var usedIndex = this.props.usedDepartments.findIndex(function(element, index, arr){
if(department.id === element.id){
return true;
} else {
return false;
}
});

// If the department has been used (findIndex returns non-negative), then disable the department in the dropdown list
if(usedIndex > -1){
return <option key={department.id} value={department.id} disabled>{department.name}</option>
}

// Otherwise, return an enabled option
return (<option key={department.id} value={department.id}>{department.name}</option>);
}.bind(this));

return (
<div>
<div className="form-group">
<select className="form-control" ref="deptChoices">
{selectOptions}
</select>
</div>
<div className="form-group">
<button onClick={this.add} className="btn btn-md btn-success">Add</button>
</div>
</div>
);
}
});


var DepartmentBox = React.createClass({
getInitialState: function() {
return {depts: null, usedDepts: null};
Expand All @@ -27,7 +112,7 @@ var DepartmentBox = React.createClass({
error: function(xhr, status, err) {
alert("Failed to grab department data.")
console.error(status, err.toString());
}.bind(this)
}
});
// Fetch the list of departments for this internship
$.ajax({
Expand All @@ -39,8 +124,8 @@ var DepartmentBox = React.createClass({
}.bind(this),
error: function(xhr, status, err) {
alert("Failed to grab added department data. "+ err.toString())
console.error(stats, err.toString());
}.bind(this)
console.error(status, err.toString());
}
});
},
postData: function(department) {
Expand All @@ -53,7 +138,7 @@ var DepartmentBox = React.createClass({
error: function(xhr, status, err){
alert("Failed to add department to database properly. "+ err.toString())
console.error(status, err.toString());
}.bind(this)
}
});
},
deleteData: function(department) {
Expand All @@ -66,7 +151,7 @@ var DepartmentBox = React.createClass({
error: function(xhr, status, err){
alert("Failed to remove department from database properly. "+ err.toString())
console.error(status, err.toString());
}.bind(this)
}
});
},
render: function() {
Expand All @@ -84,86 +169,7 @@ var DepartmentBox = React.createClass({
}
});

var DepartmentDropdown = React.createClass({
add: function() {
var deptToAdd = this.refs.deptChoices.getDOMNode().value;
this.props.onAdd(deptToAdd);
},
render: function() {
var options = this.props.departments;
options.unshift({id:0, name: "Select a Department"});

var selectOptions = options.map(function(department){

// Check if this department is in the set of used departments
usedIndex = this.props.usedDepartments.findIndex(function(element, index, arr){
if(department.id == element.id){
return true;
} else {
return false;
}
}.bind(this));

// If the department has been used (findIndex returns non-negative), then disable the department in the dropdown list
if(usedIndex > -1){
return <option key={department.id} value={department.id} disabled>{department.name}</option>
}

// Otherwise, return an enabled option
return (<option key={department.id} value={department.id}>{department.name}</option>);
}.bind(this));

return (
<div>
<div className="form-group">
<select className="form-control" ref="deptChoices">
{selectOptions}
</select>
</div>
<div className="form-group">
<button onClick={this.add} className="btn btn-md btn-success">Add</button>
</div>
</div>
);
}
});


var DepartmentList = React.createClass({
removeClick: function(deptToRemove) {
this.props.removeClick(deptToRemove);
},
render: function() {
var listNodes = this.props.departments.map(function(department){
return (
<DepartmentItem key={department.id} onRemoveClick={this.removeClick} dept={department}/>
);
}.bind(this));

return (
<ul className="list-group">
{listNodes}
</ul>
);
}
});

var DepartmentItem = React.createClass({
remove: function() {
this.props.onRemoveClick(this.props.dept);
},
render: function() {
return (
<li className="list-group-item">
{this.props.dept.name}
<button onClick={this.remove} className="close">&times;</button>
</li>
);
}
});


React.render(
<DepartmentBox affiliationId={aaId}/>,
ReactDOM.render(
<DepartmentBox affiliationId={window.aaId}/>,
document.getElementById('departments')
);
Loading

0 comments on commit 34c111b

Please sign in to comment.