From 34c111b3c35313532531c46405061504d7787b0c Mon Sep 17 00:00:00 2001 From: Jeremy Booker Date: Tue, 18 Oct 2016 09:28:50 -0400 Subject: [PATCH] Convert affiliation agreement react components over to webpack bundles. --- class/UI/EditAgreementUI.php | 15 +- .../AffiliationDepartments.jsx | 178 +++++++++--------- .../AffiliationLocation.jsx | 169 +++++++++-------- .../AffiliationTerminate.jsx | 61 +++--- templates/editAffiliate.tpl | 9 + webpack.config.dev.js | 3 + webpack.config.prod.js | 3 + 7 files changed, 241 insertions(+), 197 deletions(-) diff --git a/class/UI/EditAgreementUI.php b/class/UI/EditAgreementUI.php index 20eae742..4855d055 100644 --- a/class/UI/EditAgreementUI.php +++ b/class/UI/EditAgreementUI.php @@ -4,6 +4,7 @@ use \Intern\AffiliationAgreementFactory; use \Intern\AffiliateFolder; use \Intern\AffiliationContract; +use \Intern\AssetResolver; class EditAgreementUI implements UI { @@ -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'); @@ -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 diff --git a/javascript/affiliationAgreement/AffiliationDepartments.jsx b/javascript/affiliationAgreement/AffiliationDepartments.jsx index be2936b4..1014dad4 100644 --- a/javascript/affiliationAgreement/AffiliationDepartments.jsx +++ b/javascript/affiliationAgreement/AffiliationDepartments.jsx @@ -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 ( +
  • + {this.props.dept.name} + +
    • + ); + } +}); + + +var DepartmentList = React.createClass({ + removeClick: function(deptToRemove) { + this.props.removeClick(deptToRemove); + }, + render: function() { + var listNodes = this.props.departments.map(function(department){ + return ( + + ); + }.bind(this)); + + return ( + + ); + } +}); + + +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 + } + + // Otherwise, return an enabled option + return (); + }.bind(this)); + + return ( +
    +
    + +
    +
    + +
    +
    + ); + } +}); + + var DepartmentBox = React.createClass({ getInitialState: function() { return {depts: null, usedDepts: null}; @@ -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({ @@ -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) { @@ -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) { @@ -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() { @@ -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 - } - - // Otherwise, return an enabled option - return (); - }.bind(this)); - - return ( -
    -
    - -
    -
    - -
    -
    - ); - } -}); - - -var DepartmentList = React.createClass({ - removeClick: function(deptToRemove) { - this.props.removeClick(deptToRemove); - }, - render: function() { - var listNodes = this.props.departments.map(function(department){ - return ( - - ); - }.bind(this)); - - return ( -
      - {listNodes} -
    - ); - } -}); - -var DepartmentItem = React.createClass({ - remove: function() { - this.props.onRemoveClick(this.props.dept); - }, - render: function() { - return ( -
  • - {this.props.dept.name} - -
    • - ); - } -}); - - -React.render( - , +ReactDOM.render( + , document.getElementById('departments') ); diff --git a/javascript/affiliationAgreement/AffiliationLocation.jsx b/javascript/affiliationAgreement/AffiliationLocation.jsx index 73abf6f4..246ebc82 100644 --- a/javascript/affiliationAgreement/AffiliationLocation.jsx +++ b/javascript/affiliationAgreement/AffiliationLocation.jsx @@ -1,6 +1,88 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import $ from 'jquery'; + // Components for adding states (locations) to an Affiliation Agreement // on the Edit Affiliation interface. +var LocationItem = React.createClass({ + remove: function() { + this.props.remove(this.props.location) + }, + render: function() { + return ( +
  • + {this.props.location.full_name} + +
    • + ); + } +}); + + +var LocationList = React.createClass({ + render: function() { + var listNodes = this.props.locations.map(function(location){ + return ( + + ); + }.bind(this)); + + return ( +
      + {listNodes} +
    + ); + } +}); + + +var LocationDropdown = React.createClass({ + add: function() { + var locToAdd = this.refs.locChoices.getDOMNode().value; + this.props.onAdd(locToAdd); + }, + render: function() { + var options = this.props.locations; + // Adds Select a State to the data array. + options.unshift({full_name: "Select a State", abbr: "-1"}); + + var selectOptions = options.map(function(location){ + + // Check if this location is in the set of used locations + var usedIndex = this.props.usedLocations.findIndex(function(element, index, arr){ + if(location.abbr === element.abbr){ + return true; + } else { + return false; + } + }); + + // If the location has been used (findIndex returns non-negative), then disable the location in the dropdown list + if(usedIndex > -1){ + return + } + + // Otherwise, return an enabled option + return (); + }.bind(this)); + + return ( +
    +
    + +
    +
    + +
    +
    + ); + } +}); + + var LocationBox = React.createClass({ getInitialState: function() { return {locs: null, usedLocs: null}; @@ -27,7 +109,7 @@ var LocationBox = React.createClass({ error: function(xhr, status, err) { alert("There was an error loading location data for this agreement."); console.error(status, err.toString()); - }.bind(this) + } }); // Get the list of states already added (used) on this agreement @@ -41,7 +123,7 @@ var LocationBox = React.createClass({ error: function(xhr, status, err) { alert("There was an error loading location data for this agreement.") console.error(status, err.toString()); - }.bind(this) + } }); }, postData: function(state){ @@ -54,7 +136,7 @@ var LocationBox = React.createClass({ error: function(xhr, status, err) { alert("Failed to add to the database. " + err.toString()) console.error(status, err.toString()); - }.bind(this) + } }); }, deleteData: function(state){ @@ -67,7 +149,7 @@ var LocationBox = React.createClass({ error: function(xhr, status, err) { alert("There was an error while trying to remove that location."); console.error(status, err.toString()); - }.bind(this) + } }); }, render: function() { @@ -77,7 +159,7 @@ var LocationBox = React.createClass({ } return ( -
    +
    @@ -85,82 +167,7 @@ var LocationBox = React.createClass({ } }); -var LocationDropdown = React.createClass({ - add: function() { - var locToAdd = this.refs.locChoices.getDOMNode().value; - this.props.onAdd(locToAdd); - }, - render: function() { - var options = this.props.locations; - // Adds Select a State to the data array. - options.unshift({full_name: "Select a State", abbr: "-1"}); - - var selectOptions = options.map(function(location){ - - // Check if this location is in the set of used locations - usedIndex = this.props.usedLocations.findIndex(function(element, index, arr){ - if(location.abbr == element.abbr){ - return true; - } else { - return false; - } - }.bind(this)); - - // If the location has been used (findIndex returns non-negative), then disable the location in the dropdown list - if(usedIndex > -1){ - return - } - - // Otherwise, return an enabled option - return (); - }.bind(this)); - - return ( -
    -
    - -
    -
    - -
    -
    - ); - } -}); - -var LocationList = React.createClass({ - render: function() { - var listNodes = this.props.locations.map(function(location){ - return ( - - ); - }.bind(this)); - - return ( -
      - {listNodes} -
    - ); - } -}); - -var LocationItem = React.createClass({ - remove: function() { - this.props.remove(this.props.location) - }, - render: function() { - return ( -
  • - {this.props.location.full_name} - -
    • - ); - } -}); - -React.render(, +ReactDOM.render(, document.getElementById('locations') ); diff --git a/javascript/affiliationAgreement/AffiliationTerminate.jsx b/javascript/affiliationAgreement/AffiliationTerminate.jsx index 71e4a519..fc559f3c 100644 --- a/javascript/affiliationAgreement/AffiliationTerminate.jsx +++ b/javascript/affiliationAgreement/AffiliationTerminate.jsx @@ -1,3 +1,37 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import $ from 'jquery'; + + +var TerminateButton = React.createClass({ + clicked: function() { + this.props.clicked(); + }, + render:function() { + var btnClass; + var btnText; + var btnAwesome; + + if(this.props.terminated === 0){ + btnClass = "btn btn-danger pull-right"; + btnText = "Terminate "; + btnAwesome = "fa fa-times"; + }else{ + btnClass = "btn btn-info pull-right"; + btnText = "Reinstate "; + btnAwesome = "fa fa-recycle"; + } + + return( + + ); + } +}); + var TerminateBox = React.createClass({ getInitialState: function() { @@ -46,31 +80,6 @@ var TerminateBox = React.createClass({ }); -var TerminateButton = React.createClass({ - clicked: function() { - this.props.clicked(); - }, - render:function() { - if(this.props.terminated == 0){ - var btnClass = "btn btn-danger pull-right"; - var btnText = "Terminate "; - var btnAwesome = "fa fa-times"; - }else{ - var btnClass = "btn btn-info pull-right"; - var btnText = "Reinstate "; - var btnAwesome = "fa fa-recycle"; - } - - return( - - ); - } -}); - -React.render(, +ReactDOM.render(, document.getElementById('terminate') ); diff --git a/templates/editAffiliate.tpl b/templates/editAffiliate.tpl index 844dcf19..04c738a1 100644 --- a/templates/editAffiliate.tpl +++ b/templates/editAffiliate.tpl @@ -105,3 +105,12 @@
    + + + + + + + diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 72e4d057..9fe2010e 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -18,6 +18,9 @@ module.exports = { facultyEdit: JS_DIR + '/facultyEdit/FacultyEdit.jsx', editMajor: JS_DIR + '/editMajor/editMajor.jsx', editGrad: JS_DIR + '/editGrad/editGrad.jsx', + affiliationDepartments: JS_DIR + '/affiliationAgreement/AffiliationDepartments.jsx', + affiliationLocation: JS_DIR + '/affiliationAgreement/AffiliationLocation.jsx', + affiliationTerminate: JS_DIR + '/affiliationAgreement/AffiliationTerminate.jsx', vendor: ['jquery', 'react', 'react-dom', 'react-bootstrap'] }, output: { diff --git a/webpack.config.prod.js b/webpack.config.prod.js index f768d6e5..083cee40 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -21,6 +21,9 @@ module.exports = { facultyEdit: JS_DIR + '/facultyEdit/FacultyEdit.jsx', editMajor: JS_DIR + '/editMajor/editMajor.jsx', editGrad: JS_DIR + '/editGrad/editGrad.jsx', + affiliationDepartments: JS_DIR + '/affiliationAgreement/AffiliationDepartments.jsx', + affiliationLocation: JS_DIR + '/affiliationAgreement/AffiliationLocation.jsx', + affiliationTerminate: JS_DIR + '/affiliationAgreement/AffiliationTerminate.jsx', vendor: ['jquery', 'react', 'react-dom', 'react-bootstrap'] }, output: {