From fdfce1cb25712ef2422fb1b470cab69450dc323c Mon Sep 17 00:00:00 2001 From: Jose Garcia Date: Mon, 7 Jul 2014 16:15:49 -0400 Subject: [PATCH 1/3] - More enhancements to the checkbox field - Also the addition of some static methods to the NgReactGridReactManager class, these should probably be moved into their own class, will do when i get some time --- build/js/ngReactGrid-0.6.1.js | 49 +++++++++++++++++-- build/js/ngReactGrid-0.6.1.min.js | 2 +- src/js/classes/NgReactGridReactManager.js | 32 +++++++++++- .../ngReactGridCheckboxFieldFactory.js | 15 ++++-- 4 files changed, 88 insertions(+), 10 deletions(-) diff --git a/build/js/ngReactGrid-0.6.1.js b/build/js/ngReactGrid-0.6.1.js index a8b36eb..dfc3b11 100644 --- a/build/js/ngReactGrid-0.6.1.js +++ b/build/js/ngReactGrid-0.6.1.js @@ -1096,6 +1096,12 @@ var NgReactGridReactManager = function (ngReactGrid) { * @type {boolean} */ this.loading = false; + + /** + * Instance pointer to a static function + * @type {Function} + */ + this.getObjectPropertyByString = NgReactGridReactManager.getObjectPropertyByString; }; /** @@ -1336,11 +1342,13 @@ NgReactGridReactManager.prototype.wrapWithRootScope = function (func) { /** * This function allows you to get a property from any object, no matter how many levels deep it is + * MOVE THIS FUNCTION INTO ITS OWN CLASS * @param object * @param str + * @static * @returns {*} */ -NgReactGridReactManager.prototype.getObjectPropertyByString = function (object, str) { +NgReactGridReactManager.getObjectPropertyByString = function (object, str) { /** * Convert indexes to properties @@ -1363,6 +1371,28 @@ NgReactGridReactManager.prototype.getObjectPropertyByString = function (object, return object; }; +/** + * Updates an object property given a specified path, it will create the object if it doesn't exist + * @static + * @param obj + * @param path + * @param value + */ +NgReactGridReactManager.updateObjectPropertyByString = function(obj, path, value) { + var a = path.split('.'); + var o = obj; + for (var i = 0; i < a.length - 1; i++) { + var n = a[i]; + if (n in o) { + o = o[n]; + } else { + o[n] = {}; + o = o[n]; + } + } + o[a[a.length - 1]] = value; +}; + module.exports = NgReactGridReactManager; },{}],4:[function(require,module,exports){ var ngReactGrid = require("../classes/NgReactGrid"); @@ -1408,16 +1438,25 @@ var ngReactGridCheckboxFactory = function() { module.exports = ngReactGridCheckboxFactory; },{}],6:[function(require,module,exports){ +var NgReactGridReactManager = require("../classes/NgReactGridReactManager"); + var ngReactGridCheckboxFieldFactory = function() { - var ngReactGridCheckboxField = function(record, field) { + var ngReactGridCheckboxField = function(record, field, updateNotification) { this.record = record; this.field = field; - return ngReactGridCheckboxFieldComponent({value: this.record[field], updateValue: this.updateValue.bind(this)}); + this.updateNotification = updateNotification; + + var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field); + return ngReactGridCheckboxFieldComponent({value: value, updateValue: this.updateValue.bind(this)}); }; ngReactGridCheckboxField.prototype.updateValue = function(newValue) { - this.record[this.field] = newValue; + NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, newValue); + + if(this.updateNotification) { + this.updateNotification(this.record); + } }; return ngReactGridCheckboxField; @@ -1425,7 +1464,7 @@ var ngReactGridCheckboxFieldFactory = function() { }; module.exports = ngReactGridCheckboxFieldFactory; -},{}],7:[function(require,module,exports){ +},{"../classes/NgReactGridReactManager":3}],7:[function(require,module,exports){ var ngReactGridSelectFieldFactory = function() { var ngReactGridSelectField = function(record, field, referenceData) { diff --git a/build/js/ngReactGrid-0.6.1.min.js b/build/js/ngReactGrid-0.6.1.min.js index 2fd41c3..5f2acdd 100644 --- a/build/js/ngReactGrid-0.6.1.min.js +++ b/build/js/ngReactGrid-0.6.1.min.js @@ -1 +1 @@ -var ngReactGridComponent=function(){var t=window.innerWidth,e=(window.innerHeight,function(e){var i=String(e.width).replace("px",""),r=-1!==i.indexOf("%");if(r){var a=Math.floor(parseInt(i)*t/100);e.width=a}}),i=function(t,i,r){i.width||(i.width="10%"),t.horizontalScroll&&e(i),r.width=i.width},r=function(){var t=React.createClass({displayName:"ngGridHeaderCell",getInitialState:function(){return{width:0}},cellStyle:{},handleClick:function(){this.props.grid.react.setSortField(this.props.cell.field)},componentWillReceiveProps:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},componentWillMount:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},resize:function(){},componentDidMount:function(){},render:function(){var t=this.cellStyle,e={cursor:"pointer",width:"8%","float":"left",textAlign:"right",display:this.props.cell.sort===!1?"none":"inline-block",overflow:"visible"},i={marginTop:2},r="icon-arrows";this.props.grid.sortInfo.field===this.props.cell.field?(r+="asc"===this.props.grid.sortInfo.dir?" icon-asc":" icon-desc",i.marginTop=5):r+=" icon-both";var a={height:"21px",marginTop:"-4px",width:"1px",background:"#999999",borderRight:"1px solid #FFF","float":"right"},n={width:"2%",cursor:"col-resize",display:"none"};return React.DOM.th({title:this.props.cell.displayName,style:t},React.DOM.div({className:"ngGridHeaderCellText",onClick:this.handleClick},this.props.cell.displayName),React.DOM.div({style:e},React.DOM.i({className:r,style:i})),React.DOM.div({style:n,className:"ngGridHeaderResizeControl"},React.DOM.div({className:"ngGridHeaderCellResize",style:a})))}}),e=React.createClass({displayName:"ngReactGridShowPerPage",handleChange:function(){this.props.grid.react.setPageSize(this.refs.showPerPage.getDOMNode().value)},render:function(){var t=this.props.grid.pageSizes.map(function(t,e){return React.DOM.option({value:t,key:e},t)}.bind(this));return React.DOM.div({className:"ngReactGridShowPerPage"},"Show ",React.DOM.select({onChange:this.handleChange,ref:"showPerPage",value:this.props.grid.pageSize},t)," entries")}}),r=React.createClass({displayName:"ngReactGridSearch",handleSearch:function(){this.props.grid.react.setSearch(this.refs.searchField.getDOMNode().value)},render:function(){return React.DOM.div({className:"ngReactGridSearch"},React.DOM.input({type:"input",placeholder:"Search...",ref:"searchField",onKeyUp:this.handleSearch}))}}),a=React.createClass({displayName:"ngReactGridHeader",render:function(){var i=this.props.grid.columnDefs.length,a=this.props.grid.columnDefs.map(function(e,r){var a=i-1===r;return t({key:r,cell:e,index:r,grid:this.props.grid,last:a})}.bind(this)),n={width:"calc(100% - "+this.props.grid.scrollbarWidth+"px)"},s={paddingRight:this.props.grid.horizontalScroll?this.props.grid.scrollbarWidth:0};return React.DOM.div(null,React.DOM.div({className:"ngReactGridHeaderToolbarWrapper"},e({grid:this.props.grid,setGridState:this.props.setGridState}),r({grid:this.props.grid})),React.DOM.div({className:"ngReactGridHeaderWrapper"},React.DOM.div({className:"ngReactGridHeader",style:s},React.DOM.div({className:"ngReactGridHeaderInner"},React.DOM.table({style:n},React.DOM.thead(null,React.DOM.tr(null,a)))))))}});return a}(),a=function(){var t=React.createClass({displayName:"ngReactGridBodyRowCell",cell:function(t,e){return cellTextType=typeof t,"string"===cellTextType?React.DOM.td({style:e},t):"object"===cellTextType?(t=this.props.grid.react.wrapFunctionsInAngular(t),React.DOM.td({style:e},t)):this.defaultCell},render:function(){var t=this.props.grid.react.getObjectPropertyByString(this.props.row,this.props.cell.field),e={};return i(this.props.grid,this.props.cell,e,this.props.last,!0),this.props.grid.singleLineCell&&(e.overflow="hidden",e.textOverflow="ellipsis",e.whiteSpace="nowrap"),this.defaultCell=React.DOM.td({style:e,title:t},React.DOM.div(null,t)),this.props.grid.editing&&this.props.cell.edit?(t=this.props.cell.edit(this.props.row),this.cell(t,e)):this.props.cell.render?(t=this.props.cell.render(this.props.row),this.cell(t,e)):this.defaultCell}}),e=React.createClass({displayName:"ngReactGridBodyRow",handleClick:function(){this.props.grid.react.rowClick(this.props.row)},render:function(){var e=this.props.grid.columnDefs.length,i=this.props.grid.columnDefs.map(function(i,r){var a=e-1===r;return t({key:r,cell:i,row:this.props.row,grid:this.props.grid,last:a})}.bind(this));return React.DOM.tr({onClick:this.handleClick},i)}}),r=React.createClass({displayName:"ngReactGridBody",getInitialState:function(){return{fullRender:!1,needsUpdate:!1}},calculateIfNeedsUpdate:function(){this.props.grid.data.length>100&&this.setState({needsUpdate:!0})},performFullRender:function(){this.state.needsUpdate&&setTimeout(function(){this.setState({fullRender:!0,needsUpdate:!1})}.bind(this),0)},componentWillMount:function(){this.calculateIfNeedsUpdate()},componentWillReceiveProps:function(){this.calculateIfNeedsUpdate()},componentDidMount:function(){var t=this.getDOMNode(),e=document.querySelector(".ngReactGridHeaderInner"),i=document.querySelector(".ngReactGridViewPort");t.firstChild.addEventListener("scroll",function(){e.scrollLeft=i.scrollLeft}),this.performFullRender()},componentDidUpdate:function(){this.performFullRender()},render:function(){var t,i=function(t,i){return e({key:i,row:t,columns:this.props.columnDefs,grid:this.props.grid})}.bind(this);if(this.props.grid.react.loading){var r={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:r},"Loading..."))}else if(t=this.state.fullRender?this.props.grid.data.map(i):this.props.grid.data.slice(0,100).map(i),0===this.props.grid.react.showingRecords){var a={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:a},"No records found"))}var n={maxHeight:this.props.grid.height,minHeight:this.props.grid.height},s={};return this.props.grid.horizontalScroll?s.width="calc(100% - "+this.props.grid.scrollbarWidth+"px)":n.overflowX="hidden",React.DOM.div({className:"ngReactGridBody"},React.DOM.div({className:"ngReactGridViewPort",style:n},React.DOM.div({className:"ngReactGridInnerViewPort"},React.DOM.table({style:s},React.DOM.tbody(null,t)))))}});return r}(),n=function(){var t=React.createClass({displayName:"ngReactGridStatus",render:function(){return React.DOM.div({className:"ngReactGridStatus"},React.DOM.div(null,"Page ",React.DOM.strong(null,this.props.grid.currentPage)," of ",React.DOM.strong(null,this.props.grid.totalPages)," - Showing ",React.DOM.strong(null,this.props.grid.react.showingRecords)," of ",React.DOM.strong(null,this.props.grid.totalCount)," records"))}}),e=React.createClass({displayName:"ngReactGridPagination",goToPage:function(t){this.props.grid.react.goToPage(t)},goToLastPage:function(){this.goToPage(this.props.grid.totalPages)},goToFirstPage:function(){this.goToPage(1)},goToNextPage:function(){var t=this.props.grid.currentPage+1,e=this.props.grid.totalPages-t;e>=0&&this.goToPage(t)},goToPrevPage:function(){var t=this.props.grid.currentPage-1;t>0&&this.goToPage(t)},render:function(){for(var t=2,e=this.props.grid.totalPages,i=this.props.grid.currentPage,r=0>=i-t?1:i-t,a=i+t>=e?e:i+t,n=[],s=r;a>=s;s++)n.push(s);return n=n.map(function(t,e){var i=t===this.props.grid.currentPage?"active":"";return React.DOM.li({key:e,className:i,dataPage:t},React.DOM.a({href:"javascript:",onClick:this.goToPage.bind(null,t)},t))}.bind(this)),React.DOM.div({className:"ngReactGridPagination"},React.DOM.ul(null,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToPrevPage},"Prev")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToFirstPage},"First")),n,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToLastPage},"Last")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToNextPage},"Next"))))}}),i=React.createClass({displayName:"ngReactGridFooter",render:function(){return React.DOM.div({className:"ngReactGridFooter"},t({grid:this.props.grid}),e({grid:this.props.grid}))}});return i}(),s=React.createClass({displayName:"ngReactGrid",render:function(){return React.DOM.div({className:"ngReactGrid"},r({grid:this.props.grid}),a({grid:this.props.grid}),n({grid:this.props.grid}))}});return s}(),ngReactGridCheckboxComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){this.setState({checked:this.state.checked?!1:!0}),this.props.handleClick()},componentWillReceiveProps:function(t){this.setState({checked:-1===t.selectionTarget.indexOf(t.row)?!1:!0})},render:function(){var t={textAlign:"center"};return React.DOM.div({style:t},React.DOM.input({type:"checkbox",onChange:this.handleClick,checked:this.state.checked}))}});return t}(),ngReactGridCheckboxFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxFieldComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){var t={checked:this.state.checked?!1:!0};this.setState(t),this.props.updateValue(t.checked)},componentWillReceiveProps:function(t){this.setState({checked:t.value?!0:!1})},componentWillMount:function(){this.setState({checked:this.props.value===!0?!0:!1})},render:function(){return React.DOM.input({type:"checkbox",checked:this.state.checked,onChange:this.handleClick})}});return t}(),ngReactGridSelectFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridSelectFieldComponent",render:function(){!this.props.referenceData;var t=this.props.referenceData.map(function(t){return React.DOM.option({value:t.id},t.name)});return React.DOM.select({className:"ngReactGridSelectField"},t)}});return t}(),ngReactGridTextFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridTextFieldComponent",getInitialState:function(){return{defaultValue:""}},handleChange:function(){var t=this.refs.textField.getDOMNode().value;this.props.updateValue(t),this.setState({defaultValue:t})},componentWillReceiveProps:function(t){this.setState({defaultValue:t.value})},componentWillMount:function(){this.setState({defaultValue:this.props.value})},render:function(){return React.DOM.input({type:"text",value:this.state.defaultValue,className:"ngReactTextField",ref:"textField",onChange:this.handleChange})}});return t}();!function t(e,i,r){function a(s,o){if(!i[s]){if(!e[s]){var c="function"==typeof require&&require;if(!o&&c)return c(s,!0);if(n)return n(s,!0);throw new Error("Cannot find module '"+s+"'")}var d=i[s]={exports:{}};e[s][0].call(d.exports,function(t){var i=e[s][1][t];return a(i?i:t)},d,d.exports,t,e,i,r)}return i[s].exports}for(var n="function"==typeof require&&require,s=0;s0},s.prototype.isLocalMode=function(){return this.localMode},s.prototype.isServerMode=function(){return!this.localMode},s.prototype.setupUpdateEvents=function(){this.events={PAGESIZE:"PAGESIZE",SORTING:"SORTING",SEARCH:"SEARCH",PAGINATION:"PAGINATION",DATA:"DATA",TOTALCOUNT:"TOTALCOUNT"}},s.prototype.initWatchers=function(){this.scope.$watch("grid.data",function(t,e){t!==e&&(this.isServerMode()&&this.react.loading&&(this.react.loading=!1),this.update(this.events.DATA,{data:t}))}.bind(this)),this.scope.$watch("grid.totalCount",function(t){t&&this.update(this.events.TOTALCOUNT,{totalCount:t})}.bind(this))},s.prototype.update=function(t,e){switch(t){case this.events.DATA:this.updateData(e);break;case this.events.PAGESIZE:this.updatePageSize(e);break;case this.events.PAGINATION:this.updatePagination(e);break;case this.events.SEARCH:this.updateSearch(e);break;case this.events.SORTING:this.updateSorting(e);break;case this.events.TOTALCOUNT:this.updateTotalCount(e)}this.render()},s.prototype.updateData=function(t,e){this.react.startIndex=(this.currentPage-1)*this.pageSize,this.react.endIndex=this.pageSize*this.currentPage,this.isLocalMode()?e?(this.data=t.data.slice(this.react.startIndex,this.react.endIndex),this.totalCount=t.data.length):(this.react.originalData=t.data.slice(0),this.totalCount=this.react.originalData.length,this.data=this.react.originalData.slice(this.react.startIndex,this.react.endIndex)):this.data=t.data,this.react.showingRecords=this.data.length,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.updatePageSize=function(t){this.pageSize=t.pageSize,this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updatePagination=function(t){this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updateSearch=function(t){this.search=t.search,this.currentPage=1,this.updateData({data:t.data},!0)},s.prototype.updateSorting=function(t){this.sortInfo=t.sortInfo,t.data&&(this.currentPage=1,this.updateData({data:t.data},!0))},s.prototype.updateTotalCount=function(t){this.totalCount=t.totalCount,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.render=function(){React.renderComponent(ngReactGridComponent({grid:this}),this.element[0])},e.exports=s},{"../vendors/miniUnderscore":10,"./NgReactGridEditManager":2,"./NgReactGridReactManager":3}],2:[function(t,e){var i=function(t){this.ngReactGrid=t,this.dataCopy=[]};i.prototype.mixinAPI=function(t){var e=this;t.edit=function(){e.edit.call(e)},t.save=function(){e.save.call(e)},t.cancel=function(){e.cancel.call(e)}},i.prototype.edit=function(){this.ngReactGrid.editing=!0,this.dataCopy=this.copyData(this.ngReactGrid.react.originalData),this.ngReactGrid.render()},i.prototype.save=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.render()},i.prototype.cancel=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.update(this.ngReactGrid.events.DATA,{data:this.dataCopy}),this.ngReactGrid.render()},i.prototype.copyData=function(t){return JSON.parse(JSON.stringify(t))},e.exports=i},{}],3:[function(t,e){var i=function(t){this.ngReactGrid=t,this.showingRecords=0,this.startIndex=0,this.endIndex=0,this.originalData=[],this.filteredData=[],this.loading=!1};i.prototype.setPageSize=function(t){var e={pageSize:t,currentPage:1};this.ngReactGrid.isSearching()&&(e.data=this.filteredData),this.ngReactGrid.update(this.ngReactGrid.events.PAGESIZE,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.setSortField=function(t){var e={sortInfo:{field:t,dir:""}};e.sortInfo.dir=this.ngReactGrid.sortInfo.field!==t?"asc":"asc"===this.ngReactGrid.sortInfo.dir?"desc":"asc",this.ngReactGrid.isServerMode()?(this.ngReactGrid.update(this.ngReactGrid.events.SORTING,e),this.ngReactGrid.getData()):this.performLocalSort(e)},i.prototype.performLocalSort=function(t){var e;e=this.ngReactGrid.isSearching()?this.filteredData:this.originalData.slice(0);var i="asc"===t.sortInfo.dir;e.sort(function(e,r){var a=this.getObjectPropertyByString(e,t.sortInfo.field),n=this.getObjectPropertyByString(r,t.sortInfo.field);return i?n>=a?-1:1:a>=n?-1:1}.bind(this)),t.data=e,t.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SORTING,t)},i.prototype.deepSearch=function(t,e){var i=!1;if(t)for(var r in t)if(t.hasOwnProperty(r)){var a=t[r];if("object"==typeof a){if(i=this.deepSearch(a,e),i===!0)break}else if(-1!==String(t[r]).toLowerCase().indexOf(e)){i=!0;break}}return i},i.prototype.setSearch=function(t){var e={search:t};this.ngReactGrid.isLocalMode()?(t=String(t).toLowerCase(),this.filteredData=this.originalData.slice(0).filter(function(e){var i=!1;return i=this.deepSearch(e,t)}.bind(this)),e.data=this.filteredData,e.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SEARCH,e)):(this.ngReactGrid.search=t,this.ngReactGrid.getData())},i.prototype.goToPage=function(t){var e={currentPage:t};this.ngReactGrid.update(this.ngReactGrid.events.PAGINATION,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.rowClick=function(t){this.ngReactGrid.rowClick(t)},i.prototype.wrapFunctionsInAngular=function(t){for(var e in t.props)t.props.hasOwnProperty(e)&&("children"===e?this.wrapFunctionsInAngular(t.props[e]):"function"==typeof t.props[e]&&(t.props[e]=this.wrapWithRootScope(t.props[e])));return t},i.prototype.wrapWithRootScope=function(t){var e=this;return function(){var i=arguments,r=e.ngReactGrid.rootScope.$$phase;"$apply"==r||"$digest"==r?t.apply(null,i):e.ngReactGrid.rootScope.$apply(function(){t.apply(null,i)})}},i.prototype.getObjectPropertyByString=function(t,e){e=e.replace(/\[(\w+)\]/g,".$1"),e=e.replace(/^\./,"");for(var i=e.split(".");i.length;){var r=i.shift();if(!(null!=t&&r in t))return;t=t[r]}return t},e.exports=i},{}],4:[function(t,e){var i=t("../classes/NgReactGrid"),r=function(t){return{restrict:"E",link:function(e,r,a){new i(e,r,a,t)}}};e.exports=r},{"../classes/NgReactGrid":1}],5:[function(t,e){var i=function(){var t=function(t){return{field:"",fieldName:"",render:function(e){var i=function(){var i=t.indexOf(e);-1===i?t.push(e):t.splice(i,1)};return ngReactGridCheckboxComponent({selectionTarget:t,handleClick:i,row:e})},sort:!1,width:1}};return t};e.exports=i},{}],6:[function(t,e){var i=function(){var t=function(t,e){return this.record=t,this.field=e,ngReactGridCheckboxFieldComponent({value:this.record[e],updateValue:this.updateValue.bind(this)})};return t.prototype.updateValue=function(t){this.record[this.field]=t},t};e.exports=i},{}],7:[function(t,e){var i=function(){var t=function(t,e,i){return this.record=t,this.field=e,ngReactGridSelectFieldComponent({value:this.record[e],updateValue:this.updateValue.bind(this),referenceData:i})};return t.prototype.updateValue=function(t){this.record[this.field]=t},t};e.exports=i},{}],8:[function(t,e){var i=function(){var t=function(t,e){return this.record=t,this.field=e,ngReactGridTextFieldComponent({value:this.record[e],updateValue:this.updateValue.bind(this)})};return t.prototype.updateValue=function(t){this.record[this.field]=t},t};e.exports=i},{}],9:[function(t){"use strict";var e=t("./directives/ngReactGridDirective"),i=t("./factories/ngReactGridCheckboxFactory"),r=t("./factories/ngReactGridTextFieldFactory"),a=t("./factories/ngReactGridCheckboxFieldFactory"),n=t("./factories/ngReactGridSelectFieldFactory");angular.module("ngReactGrid",[]).factory("ngReactGridCheckbox",[i]).factory("ngReactGridTextField",[r]).factory("ngReactGridCheckboxField",[a]).factory("ngReactGridSelectField",[n]).directive("ngReactGrid",["$rootScope",e])},{"./directives/ngReactGridDirective":4,"./factories/ngReactGridCheckboxFactory":5,"./factories/ngReactGridCheckboxFieldFactory":6,"./factories/ngReactGridSelectFieldFactory":7,"./factories/ngReactGridTextFieldFactory":8}],10:[function(t,e){var i={nativeForEach:Array.prototype.forEach,each:function(t,e,r){if(null==t)return t;if(this.nativeForEach&&t.forEach===this.nativeForEach)t.forEach(e,r);else if(t.length===+t.length){for(var a=0,n=t.length;n>a;a++)if(e.call(r,t[a],a,t)===breaker)return}else for(var s=i.keys(t),a=0,n=s.length;n>a;a++)if(e.call(r,t[s[a]],s[a],t)===breaker)return;return t},slice:Array.prototype.slice,extend:function(t){return this.each(this.slice.call(arguments,1),function(e){if(e)for(var i in e)t[i]=e[i]}),t}};e.exports=i},{}]},{},[9]); \ No newline at end of file +var ngReactGridComponent=function(){var t=window.innerWidth,e=(window.innerHeight,function(e){var i=String(e.width).replace("px",""),r=-1!==i.indexOf("%");if(r){var a=Math.floor(parseInt(i)*t/100);e.width=a}}),i=function(t,i,r){i.width||(i.width="10%"),t.horizontalScroll&&e(i),r.width=i.width},r=function(){var t=React.createClass({displayName:"ngGridHeaderCell",getInitialState:function(){return{width:0}},cellStyle:{},handleClick:function(){this.props.grid.react.setSortField(this.props.cell.field)},componentWillReceiveProps:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},componentWillMount:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},resize:function(){},componentDidMount:function(){},render:function(){var t=this.cellStyle,e={cursor:"pointer",width:"8%","float":"left",textAlign:"right",display:this.props.cell.sort===!1?"none":"inline-block",overflow:"visible"},i={marginTop:2},r="icon-arrows";this.props.grid.sortInfo.field===this.props.cell.field?(r+="asc"===this.props.grid.sortInfo.dir?" icon-asc":" icon-desc",i.marginTop=5):r+=" icon-both";var a={height:"21px",marginTop:"-4px",width:"1px",background:"#999999",borderRight:"1px solid #FFF","float":"right"},n={width:"2%",cursor:"col-resize",display:"none"};return React.DOM.th({title:this.props.cell.displayName,style:t},React.DOM.div({className:"ngGridHeaderCellText",onClick:this.handleClick},this.props.cell.displayName),React.DOM.div({style:e},React.DOM.i({className:r,style:i})),React.DOM.div({style:n,className:"ngGridHeaderResizeControl"},React.DOM.div({className:"ngGridHeaderCellResize",style:a})))}}),e=React.createClass({displayName:"ngReactGridShowPerPage",handleChange:function(){this.props.grid.react.setPageSize(this.refs.showPerPage.getDOMNode().value)},render:function(){var t=this.props.grid.pageSizes.map(function(t,e){return React.DOM.option({value:t,key:e},t)}.bind(this));return React.DOM.div({className:"ngReactGridShowPerPage"},"Show ",React.DOM.select({onChange:this.handleChange,ref:"showPerPage",value:this.props.grid.pageSize},t)," entries")}}),r=React.createClass({displayName:"ngReactGridSearch",handleSearch:function(){this.props.grid.react.setSearch(this.refs.searchField.getDOMNode().value)},render:function(){return React.DOM.div({className:"ngReactGridSearch"},React.DOM.input({type:"input",placeholder:"Search...",ref:"searchField",onKeyUp:this.handleSearch}))}}),a=React.createClass({displayName:"ngReactGridHeader",render:function(){var i=this.props.grid.columnDefs.length,a=this.props.grid.columnDefs.map(function(e,r){var a=i-1===r;return t({key:r,cell:e,index:r,grid:this.props.grid,last:a})}.bind(this)),n={width:"calc(100% - "+this.props.grid.scrollbarWidth+"px)"},s={paddingRight:this.props.grid.horizontalScroll?this.props.grid.scrollbarWidth:0};return React.DOM.div(null,React.DOM.div({className:"ngReactGridHeaderToolbarWrapper"},e({grid:this.props.grid,setGridState:this.props.setGridState}),r({grid:this.props.grid})),React.DOM.div({className:"ngReactGridHeaderWrapper"},React.DOM.div({className:"ngReactGridHeader",style:s},React.DOM.div({className:"ngReactGridHeaderInner"},React.DOM.table({style:n},React.DOM.thead(null,React.DOM.tr(null,a)))))))}});return a}(),a=function(){var t=React.createClass({displayName:"ngReactGridBodyRowCell",cell:function(t,e){return cellTextType=typeof t,"string"===cellTextType?React.DOM.td({style:e},t):"object"===cellTextType?(t=this.props.grid.react.wrapFunctionsInAngular(t),React.DOM.td({style:e},t)):this.defaultCell},render:function(){var t=this.props.grid.react.getObjectPropertyByString(this.props.row,this.props.cell.field),e={};return i(this.props.grid,this.props.cell,e,this.props.last,!0),this.props.grid.singleLineCell&&(e.overflow="hidden",e.textOverflow="ellipsis",e.whiteSpace="nowrap"),this.defaultCell=React.DOM.td({style:e,title:t},React.DOM.div(null,t)),this.props.grid.editing&&this.props.cell.edit?(t=this.props.cell.edit(this.props.row),this.cell(t,e)):this.props.cell.render?(t=this.props.cell.render(this.props.row),this.cell(t,e)):this.defaultCell}}),e=React.createClass({displayName:"ngReactGridBodyRow",handleClick:function(){this.props.grid.react.rowClick(this.props.row)},render:function(){var e=this.props.grid.columnDefs.length,i=this.props.grid.columnDefs.map(function(i,r){var a=e-1===r;return t({key:r,cell:i,row:this.props.row,grid:this.props.grid,last:a})}.bind(this));return React.DOM.tr({onClick:this.handleClick},i)}}),r=React.createClass({displayName:"ngReactGridBody",getInitialState:function(){return{fullRender:!1,needsUpdate:!1}},calculateIfNeedsUpdate:function(){this.props.grid.data.length>100&&this.setState({needsUpdate:!0})},performFullRender:function(){this.state.needsUpdate&&setTimeout(function(){this.setState({fullRender:!0,needsUpdate:!1})}.bind(this),0)},componentWillMount:function(){this.calculateIfNeedsUpdate()},componentWillReceiveProps:function(){this.calculateIfNeedsUpdate()},componentDidMount:function(){var t=this.getDOMNode(),e=document.querySelector(".ngReactGridHeaderInner"),i=document.querySelector(".ngReactGridViewPort");t.firstChild.addEventListener("scroll",function(){e.scrollLeft=i.scrollLeft}),this.performFullRender()},componentDidUpdate:function(){this.performFullRender()},render:function(){var t,i=function(t,i){return e({key:i,row:t,columns:this.props.columnDefs,grid:this.props.grid})}.bind(this);if(this.props.grid.react.loading){var r={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:r},"Loading..."))}else if(t=this.state.fullRender?this.props.grid.data.map(i):this.props.grid.data.slice(0,100).map(i),0===this.props.grid.react.showingRecords){var a={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:a},"No records found"))}var n={maxHeight:this.props.grid.height,minHeight:this.props.grid.height},s={};return this.props.grid.horizontalScroll?s.width="calc(100% - "+this.props.grid.scrollbarWidth+"px)":n.overflowX="hidden",React.DOM.div({className:"ngReactGridBody"},React.DOM.div({className:"ngReactGridViewPort",style:n},React.DOM.div({className:"ngReactGridInnerViewPort"},React.DOM.table({style:s},React.DOM.tbody(null,t)))))}});return r}(),n=function(){var t=React.createClass({displayName:"ngReactGridStatus",render:function(){return React.DOM.div({className:"ngReactGridStatus"},React.DOM.div(null,"Page ",React.DOM.strong(null,this.props.grid.currentPage)," of ",React.DOM.strong(null,this.props.grid.totalPages)," - Showing ",React.DOM.strong(null,this.props.grid.react.showingRecords)," of ",React.DOM.strong(null,this.props.grid.totalCount)," records"))}}),e=React.createClass({displayName:"ngReactGridPagination",goToPage:function(t){this.props.grid.react.goToPage(t)},goToLastPage:function(){this.goToPage(this.props.grid.totalPages)},goToFirstPage:function(){this.goToPage(1)},goToNextPage:function(){var t=this.props.grid.currentPage+1,e=this.props.grid.totalPages-t;e>=0&&this.goToPage(t)},goToPrevPage:function(){var t=this.props.grid.currentPage-1;t>0&&this.goToPage(t)},render:function(){for(var t=2,e=this.props.grid.totalPages,i=this.props.grid.currentPage,r=0>=i-t?1:i-t,a=i+t>=e?e:i+t,n=[],s=r;a>=s;s++)n.push(s);return n=n.map(function(t,e){var i=t===this.props.grid.currentPage?"active":"";return React.DOM.li({key:e,className:i,dataPage:t},React.DOM.a({href:"javascript:",onClick:this.goToPage.bind(null,t)},t))}.bind(this)),React.DOM.div({className:"ngReactGridPagination"},React.DOM.ul(null,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToPrevPage},"Prev")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToFirstPage},"First")),n,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToLastPage},"Last")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToNextPage},"Next"))))}}),i=React.createClass({displayName:"ngReactGridFooter",render:function(){return React.DOM.div({className:"ngReactGridFooter"},t({grid:this.props.grid}),e({grid:this.props.grid}))}});return i}(),s=React.createClass({displayName:"ngReactGrid",render:function(){return React.DOM.div({className:"ngReactGrid"},r({grid:this.props.grid}),a({grid:this.props.grid}),n({grid:this.props.grid}))}});return s}(),ngReactGridCheckboxComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){this.setState({checked:this.state.checked?!1:!0}),this.props.handleClick()},componentWillReceiveProps:function(t){this.setState({checked:-1===t.selectionTarget.indexOf(t.row)?!1:!0})},render:function(){var t={textAlign:"center"};return React.DOM.div({style:t},React.DOM.input({type:"checkbox",onChange:this.handleClick,checked:this.state.checked}))}});return t}(),ngReactGridCheckboxFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxFieldComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){var t={checked:this.state.checked?!1:!0};this.setState(t),this.props.updateValue(t.checked)},componentWillReceiveProps:function(t){this.setState({checked:t.value?!0:!1})},componentWillMount:function(){this.setState({checked:this.props.value===!0?!0:!1})},render:function(){return React.DOM.input({type:"checkbox",checked:this.state.checked,onChange:this.handleClick})}});return t}(),ngReactGridSelectFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridSelectFieldComponent",render:function(){!this.props.referenceData;var t=this.props.referenceData.map(function(t){return React.DOM.option({value:t.id},t.name)});return React.DOM.select({className:"ngReactGridSelectField"},t)}});return t}(),ngReactGridTextFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridTextFieldComponent",getInitialState:function(){return{defaultValue:""}},handleChange:function(){var t=this.refs.textField.getDOMNode().value;this.props.updateValue(t),this.setState({defaultValue:t})},componentWillReceiveProps:function(t){this.setState({defaultValue:t.value})},componentWillMount:function(){this.setState({defaultValue:this.props.value})},render:function(){return React.DOM.input({type:"text",value:this.state.defaultValue,className:"ngReactTextField",ref:"textField",onChange:this.handleChange})}});return t}();!function t(e,i,r){function a(s,o){if(!i[s]){if(!e[s]){var c="function"==typeof require&&require;if(!o&&c)return c(s,!0);if(n)return n(s,!0);throw new Error("Cannot find module '"+s+"'")}var d=i[s]={exports:{}};e[s][0].call(d.exports,function(t){var i=e[s][1][t];return a(i?i:t)},d,d.exports,t,e,i,r)}return i[s].exports}for(var n="function"==typeof require&&require,s=0;s0},s.prototype.isLocalMode=function(){return this.localMode},s.prototype.isServerMode=function(){return!this.localMode},s.prototype.setupUpdateEvents=function(){this.events={PAGESIZE:"PAGESIZE",SORTING:"SORTING",SEARCH:"SEARCH",PAGINATION:"PAGINATION",DATA:"DATA",TOTALCOUNT:"TOTALCOUNT"}},s.prototype.initWatchers=function(){this.scope.$watch("grid.data",function(t,e){t!==e&&(this.isServerMode()&&this.react.loading&&(this.react.loading=!1),this.update(this.events.DATA,{data:t}))}.bind(this)),this.scope.$watch("grid.totalCount",function(t){t&&this.update(this.events.TOTALCOUNT,{totalCount:t})}.bind(this))},s.prototype.update=function(t,e){switch(t){case this.events.DATA:this.updateData(e);break;case this.events.PAGESIZE:this.updatePageSize(e);break;case this.events.PAGINATION:this.updatePagination(e);break;case this.events.SEARCH:this.updateSearch(e);break;case this.events.SORTING:this.updateSorting(e);break;case this.events.TOTALCOUNT:this.updateTotalCount(e)}this.render()},s.prototype.updateData=function(t,e){this.react.startIndex=(this.currentPage-1)*this.pageSize,this.react.endIndex=this.pageSize*this.currentPage,this.isLocalMode()?e?(this.data=t.data.slice(this.react.startIndex,this.react.endIndex),this.totalCount=t.data.length):(this.react.originalData=t.data.slice(0),this.totalCount=this.react.originalData.length,this.data=this.react.originalData.slice(this.react.startIndex,this.react.endIndex)):this.data=t.data,this.react.showingRecords=this.data.length,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.updatePageSize=function(t){this.pageSize=t.pageSize,this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updatePagination=function(t){this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updateSearch=function(t){this.search=t.search,this.currentPage=1,this.updateData({data:t.data},!0)},s.prototype.updateSorting=function(t){this.sortInfo=t.sortInfo,t.data&&(this.currentPage=1,this.updateData({data:t.data},!0))},s.prototype.updateTotalCount=function(t){this.totalCount=t.totalCount,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.render=function(){React.renderComponent(ngReactGridComponent({grid:this}),this.element[0])},e.exports=s},{"../vendors/miniUnderscore":10,"./NgReactGridEditManager":2,"./NgReactGridReactManager":3}],2:[function(t,e){var i=function(t){this.ngReactGrid=t,this.dataCopy=[]};i.prototype.mixinAPI=function(t){var e=this;t.edit=function(){e.edit.call(e)},t.save=function(){e.save.call(e)},t.cancel=function(){e.cancel.call(e)}},i.prototype.edit=function(){this.ngReactGrid.editing=!0,this.dataCopy=this.copyData(this.ngReactGrid.react.originalData),this.ngReactGrid.render()},i.prototype.save=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.render()},i.prototype.cancel=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.update(this.ngReactGrid.events.DATA,{data:this.dataCopy}),this.ngReactGrid.render()},i.prototype.copyData=function(t){return JSON.parse(JSON.stringify(t))},e.exports=i},{}],3:[function(t,e){var i=function(t){this.ngReactGrid=t,this.showingRecords=0,this.startIndex=0,this.endIndex=0,this.originalData=[],this.filteredData=[],this.loading=!1,this.getObjectPropertyByString=i.getObjectPropertyByString};i.prototype.setPageSize=function(t){var e={pageSize:t,currentPage:1};this.ngReactGrid.isSearching()&&(e.data=this.filteredData),this.ngReactGrid.update(this.ngReactGrid.events.PAGESIZE,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.setSortField=function(t){var e={sortInfo:{field:t,dir:""}};e.sortInfo.dir=this.ngReactGrid.sortInfo.field!==t?"asc":"asc"===this.ngReactGrid.sortInfo.dir?"desc":"asc",this.ngReactGrid.isServerMode()?(this.ngReactGrid.update(this.ngReactGrid.events.SORTING,e),this.ngReactGrid.getData()):this.performLocalSort(e)},i.prototype.performLocalSort=function(t){var e;e=this.ngReactGrid.isSearching()?this.filteredData:this.originalData.slice(0);var i="asc"===t.sortInfo.dir;e.sort(function(e,r){var a=this.getObjectPropertyByString(e,t.sortInfo.field),n=this.getObjectPropertyByString(r,t.sortInfo.field);return i?n>=a?-1:1:a>=n?-1:1}.bind(this)),t.data=e,t.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SORTING,t)},i.prototype.deepSearch=function(t,e){var i=!1;if(t)for(var r in t)if(t.hasOwnProperty(r)){var a=t[r];if("object"==typeof a){if(i=this.deepSearch(a,e),i===!0)break}else if(-1!==String(t[r]).toLowerCase().indexOf(e)){i=!0;break}}return i},i.prototype.setSearch=function(t){var e={search:t};this.ngReactGrid.isLocalMode()?(t=String(t).toLowerCase(),this.filteredData=this.originalData.slice(0).filter(function(e){var i=!1;return i=this.deepSearch(e,t)}.bind(this)),e.data=this.filteredData,e.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SEARCH,e)):(this.ngReactGrid.search=t,this.ngReactGrid.getData())},i.prototype.goToPage=function(t){var e={currentPage:t};this.ngReactGrid.update(this.ngReactGrid.events.PAGINATION,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.rowClick=function(t){this.ngReactGrid.rowClick(t)},i.prototype.wrapFunctionsInAngular=function(t){for(var e in t.props)t.props.hasOwnProperty(e)&&("children"===e?this.wrapFunctionsInAngular(t.props[e]):"function"==typeof t.props[e]&&(t.props[e]=this.wrapWithRootScope(t.props[e])));return t},i.prototype.wrapWithRootScope=function(t){var e=this;return function(){var i=arguments,r=e.ngReactGrid.rootScope.$$phase;"$apply"==r||"$digest"==r?t.apply(null,i):e.ngReactGrid.rootScope.$apply(function(){t.apply(null,i)})}},i.getObjectPropertyByString=function(t,e){e=e.replace(/\[(\w+)\]/g,".$1"),e=e.replace(/^\./,"");for(var i=e.split(".");i.length;){var r=i.shift();if(!(null!=t&&r in t))return;t=t[r]}return t},i.updateObjectPropertyByString=function(t,e,i){for(var r=e.split("."),a=t,n=0;na;a++)if(e.call(r,t[a],a,t)===breaker)return}else for(var s=i.keys(t),a=0,n=s.length;n>a;a++)if(e.call(r,t[s[a]],s[a],t)===breaker)return;return t},slice:Array.prototype.slice,extend:function(t){return this.each(this.slice.call(arguments,1),function(e){if(e)for(var i in e)t[i]=e[i]}),t}};e.exports=i},{}]},{},[9]); \ No newline at end of file diff --git a/src/js/classes/NgReactGridReactManager.js b/src/js/classes/NgReactGridReactManager.js index 7d08c04..309afea 100644 --- a/src/js/classes/NgReactGridReactManager.js +++ b/src/js/classes/NgReactGridReactManager.js @@ -44,6 +44,12 @@ var NgReactGridReactManager = function (ngReactGrid) { * @type {boolean} */ this.loading = false; + + /** + * Instance pointer to a static function + * @type {Function} + */ + this.getObjectPropertyByString = NgReactGridReactManager.getObjectPropertyByString; }; /** @@ -284,11 +290,13 @@ NgReactGridReactManager.prototype.wrapWithRootScope = function (func) { /** * This function allows you to get a property from any object, no matter how many levels deep it is + * MOVE THIS FUNCTION INTO ITS OWN CLASS * @param object * @param str + * @static * @returns {*} */ -NgReactGridReactManager.prototype.getObjectPropertyByString = function (object, str) { +NgReactGridReactManager.getObjectPropertyByString = function (object, str) { /** * Convert indexes to properties @@ -311,4 +319,26 @@ NgReactGridReactManager.prototype.getObjectPropertyByString = function (object, return object; }; +/** + * Updates an object property given a specified path, it will create the object if it doesn't exist + * @static + * @param obj + * @param path + * @param value + */ +NgReactGridReactManager.updateObjectPropertyByString = function(obj, path, value) { + var a = path.split('.'); + var o = obj; + for (var i = 0; i < a.length - 1; i++) { + var n = a[i]; + if (n in o) { + o = o[n]; + } else { + o[n] = {}; + o = o[n]; + } + } + o[a[a.length - 1]] = value; +}; + module.exports = NgReactGridReactManager; \ No newline at end of file diff --git a/src/js/factories/ngReactGridCheckboxFieldFactory.js b/src/js/factories/ngReactGridCheckboxFieldFactory.js index d550add..bfdcda3 100644 --- a/src/js/factories/ngReactGridCheckboxFieldFactory.js +++ b/src/js/factories/ngReactGridCheckboxFieldFactory.js @@ -1,13 +1,22 @@ +var NgReactGridReactManager = require("../classes/NgReactGridReactManager"); + var ngReactGridCheckboxFieldFactory = function() { - var ngReactGridCheckboxField = function(record, field) { + var ngReactGridCheckboxField = function(record, field, updateNotification) { this.record = record; this.field = field; - return ngReactGridCheckboxFieldComponent({value: this.record[field], updateValue: this.updateValue.bind(this)}); + this.updateNotification = updateNotification; + + var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field); + return ngReactGridCheckboxFieldComponent({value: value, updateValue: this.updateValue.bind(this)}); }; ngReactGridCheckboxField.prototype.updateValue = function(newValue) { - this.record[this.field] = newValue; + NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, newValue); + + if(this.updateNotification) { + this.updateNotification(this.record); + } }; return ngReactGridCheckboxField; From 4a02b6499cb90ec29f4a33d3f828506a9c683f66 Mon Sep 17 00:00:00 2001 From: Jose Garcia Date: Tue, 8 Jul 2014 11:10:28 -0400 Subject: [PATCH 2/3] - Fixes and enhancements to the edit functionality --- build/css/ngReactGrid-0.6.1.css | 7 +- build/js/ngReactGrid-0.6.1.js | 80 +++++++++++++++---- build/js/ngReactGrid-0.6.1.min.js | 2 +- src/css/ngReactGrid.css | 7 +- .../ngReactGridSelectFieldFactory.js | 24 +++++- .../factories/ngReactGridTextFieldFactory.js | 24 +++++- src/js/main.js | 4 +- src/jsx/reactGridSelectField.jsx | 24 +++++- 8 files changed, 135 insertions(+), 37 deletions(-) diff --git a/build/css/ngReactGrid-0.6.1.css b/build/css/ngReactGrid-0.6.1.css index 569b8fc..035177c 100644 --- a/build/css/ngReactGrid-0.6.1.css +++ b/build/css/ngReactGrid-0.6.1.css @@ -237,14 +237,11 @@ .ngReactTextField { margin:0; - width: 95%; + width: calc(90% - 4px); outline: none; - border: none; padding: 4px; - background: transparent; - font-weight: bold; } .ngReactGridSelectField { - width: 95%; + width: calc(100% - 4px); } \ No newline at end of file diff --git a/build/js/ngReactGrid-0.6.1.js b/build/js/ngReactGrid-0.6.1.js index dfc3b11..7dd1021 100644 --- a/build/js/ngReactGrid-0.6.1.js +++ b/build/js/ngReactGrid-0.6.1.js @@ -563,9 +563,29 @@ var ngReactGridCheckboxFieldComponent = (function() { var ngReactGridSelectFieldComponent = (function() { var ngReactGridSelectFieldComponent = React.createClass({displayName: 'ngReactGridSelectFieldComponent', + getInitialState: function() { + return { + defaultValue: { + id: "", + name: "" + } + }; + }, + componentWillReceiveProps: function(nextProps) { + this.setState({ + defaultValue: nextProps.value + }); + }, + componentWillMount: function() { + this.setState({ + defaultValue: this.props.value + }); + }, render: function() { - if(!this.props.referenceData) {} + if(!this.props.referenceData) { + this.props.referenceData = []; + } var options = this.props.referenceData.map(function(option) { return ( @@ -574,7 +594,7 @@ var ngReactGridSelectFieldComponent = (function() { }); return ( - React.DOM.select( {className:"ngReactGridSelectField"}, + React.DOM.select( {className:"ngReactGridSelectField", value:this.state.defaultValue.id}, options ) ) @@ -1465,16 +1485,32 @@ var ngReactGridCheckboxFieldFactory = function() { module.exports = ngReactGridCheckboxFieldFactory; },{"../classes/NgReactGridReactManager":3}],7:[function(require,module,exports){ -var ngReactGridSelectFieldFactory = function() { +var NgReactGridReactManager = require("../classes/NgReactGridReactManager"); + +var ngReactGridSelectFieldFactory = function($rootScope) { - var ngReactGridSelectField = function(record, field, referenceData) { + var ngReactGridSelectField = function(record, field, referenceData, updateNotification) { this.record = record; this.field = field; - return ngReactGridSelectFieldComponent({value: this.record[field], updateValue: this.updateValue.bind(this), referenceData: referenceData}); + this.updateNotification = updateNotification; + + var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field); + + return ngReactGridSelectFieldComponent({value: value, updateValue: this.updateValue.bind(this), referenceData: (referenceData || [])}); }; ngReactGridSelectField.prototype.updateValue = function(newValue) { - this.record[this.field] = newValue; + NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, newValue); + + if(this.updateNotification) { + if($rootScope.$$phase) { + this.updateNotification(this.record); + } else { + $rootScope.$apply(function () { + this.updateNotification(this.record); + }.bind(this)); + } + } }; return ngReactGridSelectField; @@ -1482,17 +1518,33 @@ var ngReactGridSelectFieldFactory = function() { }; module.exports = ngReactGridSelectFieldFactory; -},{}],8:[function(require,module,exports){ -var ngReactGridTextFieldFactory = function() { +},{"../classes/NgReactGridReactManager":3}],8:[function(require,module,exports){ +var NgReactGridReactManager = require("../classes/NgReactGridReactManager"); + +var ngReactGridTextFieldFactory = function($rootScope) { - var ngReactGridTextField = function(record, field) { + var ngReactGridTextField = function(record, field, updateNotification) { this.record = record; this.field = field; - return ngReactGridTextFieldComponent({value: this.record[field], updateValue: this.updateValue.bind(this)}); + this.updateNotification = updateNotification; + + var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field); + + return ngReactGridTextFieldComponent({value: value, updateValue: this.updateValue.bind(this)}); }; ngReactGridTextField.prototype.updateValue = function(newValue) { - this.record[this.field] = newValue; + NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, newValue); + + if(this.updateNotification) { + if($rootScope.$$phase) { + this.updateNotification(this.record); + } else { + $rootScope.$apply(function () { + this.updateNotification(this.record); + }.bind(this)); + } + } }; return ngReactGridTextField; @@ -1500,7 +1552,7 @@ var ngReactGridTextFieldFactory = function() { }; module.exports = ngReactGridTextFieldFactory; -},{}],9:[function(require,module,exports){ +},{"../classes/NgReactGridReactManager":3}],9:[function(require,module,exports){ 'use strict'; var ngReactGridDirective = require('./directives/ngReactGridDirective'); @@ -1511,9 +1563,9 @@ var ngReactGridSelectFieldFactory = require("./factories/ngReactGridSelectFieldF angular.module('ngReactGrid', []) .factory("ngReactGridCheckbox", [ngReactGridCheckboxFactory]) - .factory("ngReactGridTextField", [ngReactGridTextFieldFactory]) + .factory("ngReactGridTextField", ['$rootScope', ngReactGridTextFieldFactory]) .factory("ngReactGridCheckboxField", [ngReactGridCheckboxFieldFactory]) - .factory("ngReactGridSelectField", [ngReactGridSelectFieldFactory]) + .factory("ngReactGridSelectField", ['$rootScope', ngReactGridSelectFieldFactory]) .directive("ngReactGrid", ['$rootScope', ngReactGridDirective]); },{"./directives/ngReactGridDirective":4,"./factories/ngReactGridCheckboxFactory":5,"./factories/ngReactGridCheckboxFieldFactory":6,"./factories/ngReactGridSelectFieldFactory":7,"./factories/ngReactGridTextFieldFactory":8}],10:[function(require,module,exports){ diff --git a/build/js/ngReactGrid-0.6.1.min.js b/build/js/ngReactGrid-0.6.1.min.js index 5f2acdd..1418cbb 100644 --- a/build/js/ngReactGrid-0.6.1.min.js +++ b/build/js/ngReactGrid-0.6.1.min.js @@ -1 +1 @@ -var ngReactGridComponent=function(){var t=window.innerWidth,e=(window.innerHeight,function(e){var i=String(e.width).replace("px",""),r=-1!==i.indexOf("%");if(r){var a=Math.floor(parseInt(i)*t/100);e.width=a}}),i=function(t,i,r){i.width||(i.width="10%"),t.horizontalScroll&&e(i),r.width=i.width},r=function(){var t=React.createClass({displayName:"ngGridHeaderCell",getInitialState:function(){return{width:0}},cellStyle:{},handleClick:function(){this.props.grid.react.setSortField(this.props.cell.field)},componentWillReceiveProps:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},componentWillMount:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},resize:function(){},componentDidMount:function(){},render:function(){var t=this.cellStyle,e={cursor:"pointer",width:"8%","float":"left",textAlign:"right",display:this.props.cell.sort===!1?"none":"inline-block",overflow:"visible"},i={marginTop:2},r="icon-arrows";this.props.grid.sortInfo.field===this.props.cell.field?(r+="asc"===this.props.grid.sortInfo.dir?" icon-asc":" icon-desc",i.marginTop=5):r+=" icon-both";var a={height:"21px",marginTop:"-4px",width:"1px",background:"#999999",borderRight:"1px solid #FFF","float":"right"},n={width:"2%",cursor:"col-resize",display:"none"};return React.DOM.th({title:this.props.cell.displayName,style:t},React.DOM.div({className:"ngGridHeaderCellText",onClick:this.handleClick},this.props.cell.displayName),React.DOM.div({style:e},React.DOM.i({className:r,style:i})),React.DOM.div({style:n,className:"ngGridHeaderResizeControl"},React.DOM.div({className:"ngGridHeaderCellResize",style:a})))}}),e=React.createClass({displayName:"ngReactGridShowPerPage",handleChange:function(){this.props.grid.react.setPageSize(this.refs.showPerPage.getDOMNode().value)},render:function(){var t=this.props.grid.pageSizes.map(function(t,e){return React.DOM.option({value:t,key:e},t)}.bind(this));return React.DOM.div({className:"ngReactGridShowPerPage"},"Show ",React.DOM.select({onChange:this.handleChange,ref:"showPerPage",value:this.props.grid.pageSize},t)," entries")}}),r=React.createClass({displayName:"ngReactGridSearch",handleSearch:function(){this.props.grid.react.setSearch(this.refs.searchField.getDOMNode().value)},render:function(){return React.DOM.div({className:"ngReactGridSearch"},React.DOM.input({type:"input",placeholder:"Search...",ref:"searchField",onKeyUp:this.handleSearch}))}}),a=React.createClass({displayName:"ngReactGridHeader",render:function(){var i=this.props.grid.columnDefs.length,a=this.props.grid.columnDefs.map(function(e,r){var a=i-1===r;return t({key:r,cell:e,index:r,grid:this.props.grid,last:a})}.bind(this)),n={width:"calc(100% - "+this.props.grid.scrollbarWidth+"px)"},s={paddingRight:this.props.grid.horizontalScroll?this.props.grid.scrollbarWidth:0};return React.DOM.div(null,React.DOM.div({className:"ngReactGridHeaderToolbarWrapper"},e({grid:this.props.grid,setGridState:this.props.setGridState}),r({grid:this.props.grid})),React.DOM.div({className:"ngReactGridHeaderWrapper"},React.DOM.div({className:"ngReactGridHeader",style:s},React.DOM.div({className:"ngReactGridHeaderInner"},React.DOM.table({style:n},React.DOM.thead(null,React.DOM.tr(null,a)))))))}});return a}(),a=function(){var t=React.createClass({displayName:"ngReactGridBodyRowCell",cell:function(t,e){return cellTextType=typeof t,"string"===cellTextType?React.DOM.td({style:e},t):"object"===cellTextType?(t=this.props.grid.react.wrapFunctionsInAngular(t),React.DOM.td({style:e},t)):this.defaultCell},render:function(){var t=this.props.grid.react.getObjectPropertyByString(this.props.row,this.props.cell.field),e={};return i(this.props.grid,this.props.cell,e,this.props.last,!0),this.props.grid.singleLineCell&&(e.overflow="hidden",e.textOverflow="ellipsis",e.whiteSpace="nowrap"),this.defaultCell=React.DOM.td({style:e,title:t},React.DOM.div(null,t)),this.props.grid.editing&&this.props.cell.edit?(t=this.props.cell.edit(this.props.row),this.cell(t,e)):this.props.cell.render?(t=this.props.cell.render(this.props.row),this.cell(t,e)):this.defaultCell}}),e=React.createClass({displayName:"ngReactGridBodyRow",handleClick:function(){this.props.grid.react.rowClick(this.props.row)},render:function(){var e=this.props.grid.columnDefs.length,i=this.props.grid.columnDefs.map(function(i,r){var a=e-1===r;return t({key:r,cell:i,row:this.props.row,grid:this.props.grid,last:a})}.bind(this));return React.DOM.tr({onClick:this.handleClick},i)}}),r=React.createClass({displayName:"ngReactGridBody",getInitialState:function(){return{fullRender:!1,needsUpdate:!1}},calculateIfNeedsUpdate:function(){this.props.grid.data.length>100&&this.setState({needsUpdate:!0})},performFullRender:function(){this.state.needsUpdate&&setTimeout(function(){this.setState({fullRender:!0,needsUpdate:!1})}.bind(this),0)},componentWillMount:function(){this.calculateIfNeedsUpdate()},componentWillReceiveProps:function(){this.calculateIfNeedsUpdate()},componentDidMount:function(){var t=this.getDOMNode(),e=document.querySelector(".ngReactGridHeaderInner"),i=document.querySelector(".ngReactGridViewPort");t.firstChild.addEventListener("scroll",function(){e.scrollLeft=i.scrollLeft}),this.performFullRender()},componentDidUpdate:function(){this.performFullRender()},render:function(){var t,i=function(t,i){return e({key:i,row:t,columns:this.props.columnDefs,grid:this.props.grid})}.bind(this);if(this.props.grid.react.loading){var r={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:r},"Loading..."))}else if(t=this.state.fullRender?this.props.grid.data.map(i):this.props.grid.data.slice(0,100).map(i),0===this.props.grid.react.showingRecords){var a={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:a},"No records found"))}var n={maxHeight:this.props.grid.height,minHeight:this.props.grid.height},s={};return this.props.grid.horizontalScroll?s.width="calc(100% - "+this.props.grid.scrollbarWidth+"px)":n.overflowX="hidden",React.DOM.div({className:"ngReactGridBody"},React.DOM.div({className:"ngReactGridViewPort",style:n},React.DOM.div({className:"ngReactGridInnerViewPort"},React.DOM.table({style:s},React.DOM.tbody(null,t)))))}});return r}(),n=function(){var t=React.createClass({displayName:"ngReactGridStatus",render:function(){return React.DOM.div({className:"ngReactGridStatus"},React.DOM.div(null,"Page ",React.DOM.strong(null,this.props.grid.currentPage)," of ",React.DOM.strong(null,this.props.grid.totalPages)," - Showing ",React.DOM.strong(null,this.props.grid.react.showingRecords)," of ",React.DOM.strong(null,this.props.grid.totalCount)," records"))}}),e=React.createClass({displayName:"ngReactGridPagination",goToPage:function(t){this.props.grid.react.goToPage(t)},goToLastPage:function(){this.goToPage(this.props.grid.totalPages)},goToFirstPage:function(){this.goToPage(1)},goToNextPage:function(){var t=this.props.grid.currentPage+1,e=this.props.grid.totalPages-t;e>=0&&this.goToPage(t)},goToPrevPage:function(){var t=this.props.grid.currentPage-1;t>0&&this.goToPage(t)},render:function(){for(var t=2,e=this.props.grid.totalPages,i=this.props.grid.currentPage,r=0>=i-t?1:i-t,a=i+t>=e?e:i+t,n=[],s=r;a>=s;s++)n.push(s);return n=n.map(function(t,e){var i=t===this.props.grid.currentPage?"active":"";return React.DOM.li({key:e,className:i,dataPage:t},React.DOM.a({href:"javascript:",onClick:this.goToPage.bind(null,t)},t))}.bind(this)),React.DOM.div({className:"ngReactGridPagination"},React.DOM.ul(null,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToPrevPage},"Prev")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToFirstPage},"First")),n,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToLastPage},"Last")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToNextPage},"Next"))))}}),i=React.createClass({displayName:"ngReactGridFooter",render:function(){return React.DOM.div({className:"ngReactGridFooter"},t({grid:this.props.grid}),e({grid:this.props.grid}))}});return i}(),s=React.createClass({displayName:"ngReactGrid",render:function(){return React.DOM.div({className:"ngReactGrid"},r({grid:this.props.grid}),a({grid:this.props.grid}),n({grid:this.props.grid}))}});return s}(),ngReactGridCheckboxComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){this.setState({checked:this.state.checked?!1:!0}),this.props.handleClick()},componentWillReceiveProps:function(t){this.setState({checked:-1===t.selectionTarget.indexOf(t.row)?!1:!0})},render:function(){var t={textAlign:"center"};return React.DOM.div({style:t},React.DOM.input({type:"checkbox",onChange:this.handleClick,checked:this.state.checked}))}});return t}(),ngReactGridCheckboxFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxFieldComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){var t={checked:this.state.checked?!1:!0};this.setState(t),this.props.updateValue(t.checked)},componentWillReceiveProps:function(t){this.setState({checked:t.value?!0:!1})},componentWillMount:function(){this.setState({checked:this.props.value===!0?!0:!1})},render:function(){return React.DOM.input({type:"checkbox",checked:this.state.checked,onChange:this.handleClick})}});return t}(),ngReactGridSelectFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridSelectFieldComponent",render:function(){!this.props.referenceData;var t=this.props.referenceData.map(function(t){return React.DOM.option({value:t.id},t.name)});return React.DOM.select({className:"ngReactGridSelectField"},t)}});return t}(),ngReactGridTextFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridTextFieldComponent",getInitialState:function(){return{defaultValue:""}},handleChange:function(){var t=this.refs.textField.getDOMNode().value;this.props.updateValue(t),this.setState({defaultValue:t})},componentWillReceiveProps:function(t){this.setState({defaultValue:t.value})},componentWillMount:function(){this.setState({defaultValue:this.props.value})},render:function(){return React.DOM.input({type:"text",value:this.state.defaultValue,className:"ngReactTextField",ref:"textField",onChange:this.handleChange})}});return t}();!function t(e,i,r){function a(s,o){if(!i[s]){if(!e[s]){var c="function"==typeof require&&require;if(!o&&c)return c(s,!0);if(n)return n(s,!0);throw new Error("Cannot find module '"+s+"'")}var d=i[s]={exports:{}};e[s][0].call(d.exports,function(t){var i=e[s][1][t];return a(i?i:t)},d,d.exports,t,e,i,r)}return i[s].exports}for(var n="function"==typeof require&&require,s=0;s0},s.prototype.isLocalMode=function(){return this.localMode},s.prototype.isServerMode=function(){return!this.localMode},s.prototype.setupUpdateEvents=function(){this.events={PAGESIZE:"PAGESIZE",SORTING:"SORTING",SEARCH:"SEARCH",PAGINATION:"PAGINATION",DATA:"DATA",TOTALCOUNT:"TOTALCOUNT"}},s.prototype.initWatchers=function(){this.scope.$watch("grid.data",function(t,e){t!==e&&(this.isServerMode()&&this.react.loading&&(this.react.loading=!1),this.update(this.events.DATA,{data:t}))}.bind(this)),this.scope.$watch("grid.totalCount",function(t){t&&this.update(this.events.TOTALCOUNT,{totalCount:t})}.bind(this))},s.prototype.update=function(t,e){switch(t){case this.events.DATA:this.updateData(e);break;case this.events.PAGESIZE:this.updatePageSize(e);break;case this.events.PAGINATION:this.updatePagination(e);break;case this.events.SEARCH:this.updateSearch(e);break;case this.events.SORTING:this.updateSorting(e);break;case this.events.TOTALCOUNT:this.updateTotalCount(e)}this.render()},s.prototype.updateData=function(t,e){this.react.startIndex=(this.currentPage-1)*this.pageSize,this.react.endIndex=this.pageSize*this.currentPage,this.isLocalMode()?e?(this.data=t.data.slice(this.react.startIndex,this.react.endIndex),this.totalCount=t.data.length):(this.react.originalData=t.data.slice(0),this.totalCount=this.react.originalData.length,this.data=this.react.originalData.slice(this.react.startIndex,this.react.endIndex)):this.data=t.data,this.react.showingRecords=this.data.length,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.updatePageSize=function(t){this.pageSize=t.pageSize,this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updatePagination=function(t){this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updateSearch=function(t){this.search=t.search,this.currentPage=1,this.updateData({data:t.data},!0)},s.prototype.updateSorting=function(t){this.sortInfo=t.sortInfo,t.data&&(this.currentPage=1,this.updateData({data:t.data},!0))},s.prototype.updateTotalCount=function(t){this.totalCount=t.totalCount,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.render=function(){React.renderComponent(ngReactGridComponent({grid:this}),this.element[0])},e.exports=s},{"../vendors/miniUnderscore":10,"./NgReactGridEditManager":2,"./NgReactGridReactManager":3}],2:[function(t,e){var i=function(t){this.ngReactGrid=t,this.dataCopy=[]};i.prototype.mixinAPI=function(t){var e=this;t.edit=function(){e.edit.call(e)},t.save=function(){e.save.call(e)},t.cancel=function(){e.cancel.call(e)}},i.prototype.edit=function(){this.ngReactGrid.editing=!0,this.dataCopy=this.copyData(this.ngReactGrid.react.originalData),this.ngReactGrid.render()},i.prototype.save=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.render()},i.prototype.cancel=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.update(this.ngReactGrid.events.DATA,{data:this.dataCopy}),this.ngReactGrid.render()},i.prototype.copyData=function(t){return JSON.parse(JSON.stringify(t))},e.exports=i},{}],3:[function(t,e){var i=function(t){this.ngReactGrid=t,this.showingRecords=0,this.startIndex=0,this.endIndex=0,this.originalData=[],this.filteredData=[],this.loading=!1,this.getObjectPropertyByString=i.getObjectPropertyByString};i.prototype.setPageSize=function(t){var e={pageSize:t,currentPage:1};this.ngReactGrid.isSearching()&&(e.data=this.filteredData),this.ngReactGrid.update(this.ngReactGrid.events.PAGESIZE,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.setSortField=function(t){var e={sortInfo:{field:t,dir:""}};e.sortInfo.dir=this.ngReactGrid.sortInfo.field!==t?"asc":"asc"===this.ngReactGrid.sortInfo.dir?"desc":"asc",this.ngReactGrid.isServerMode()?(this.ngReactGrid.update(this.ngReactGrid.events.SORTING,e),this.ngReactGrid.getData()):this.performLocalSort(e)},i.prototype.performLocalSort=function(t){var e;e=this.ngReactGrid.isSearching()?this.filteredData:this.originalData.slice(0);var i="asc"===t.sortInfo.dir;e.sort(function(e,r){var a=this.getObjectPropertyByString(e,t.sortInfo.field),n=this.getObjectPropertyByString(r,t.sortInfo.field);return i?n>=a?-1:1:a>=n?-1:1}.bind(this)),t.data=e,t.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SORTING,t)},i.prototype.deepSearch=function(t,e){var i=!1;if(t)for(var r in t)if(t.hasOwnProperty(r)){var a=t[r];if("object"==typeof a){if(i=this.deepSearch(a,e),i===!0)break}else if(-1!==String(t[r]).toLowerCase().indexOf(e)){i=!0;break}}return i},i.prototype.setSearch=function(t){var e={search:t};this.ngReactGrid.isLocalMode()?(t=String(t).toLowerCase(),this.filteredData=this.originalData.slice(0).filter(function(e){var i=!1;return i=this.deepSearch(e,t)}.bind(this)),e.data=this.filteredData,e.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SEARCH,e)):(this.ngReactGrid.search=t,this.ngReactGrid.getData())},i.prototype.goToPage=function(t){var e={currentPage:t};this.ngReactGrid.update(this.ngReactGrid.events.PAGINATION,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.rowClick=function(t){this.ngReactGrid.rowClick(t)},i.prototype.wrapFunctionsInAngular=function(t){for(var e in t.props)t.props.hasOwnProperty(e)&&("children"===e?this.wrapFunctionsInAngular(t.props[e]):"function"==typeof t.props[e]&&(t.props[e]=this.wrapWithRootScope(t.props[e])));return t},i.prototype.wrapWithRootScope=function(t){var e=this;return function(){var i=arguments,r=e.ngReactGrid.rootScope.$$phase;"$apply"==r||"$digest"==r?t.apply(null,i):e.ngReactGrid.rootScope.$apply(function(){t.apply(null,i)})}},i.getObjectPropertyByString=function(t,e){e=e.replace(/\[(\w+)\]/g,".$1"),e=e.replace(/^\./,"");for(var i=e.split(".");i.length;){var r=i.shift();if(!(null!=t&&r in t))return;t=t[r]}return t},i.updateObjectPropertyByString=function(t,e,i){for(var r=e.split("."),a=t,n=0;na;a++)if(e.call(r,t[a],a,t)===breaker)return}else for(var s=i.keys(t),a=0,n=s.length;n>a;a++)if(e.call(r,t[s[a]],s[a],t)===breaker)return;return t},slice:Array.prototype.slice,extend:function(t){return this.each(this.slice.call(arguments,1),function(e){if(e)for(var i in e)t[i]=e[i]}),t}};e.exports=i},{}]},{},[9]); \ No newline at end of file +var ngReactGridComponent=function(){var t=window.innerWidth,e=(window.innerHeight,function(e){var i=String(e.width).replace("px",""),r=-1!==i.indexOf("%");if(r){var a=Math.floor(parseInt(i)*t/100);e.width=a}}),i=function(t,i,r){i.width||(i.width="10%"),t.horizontalScroll&&e(i),r.width=i.width},r=function(){var t=React.createClass({displayName:"ngGridHeaderCell",getInitialState:function(){return{width:0}},cellStyle:{},handleClick:function(){this.props.grid.react.setSortField(this.props.cell.field)},componentWillReceiveProps:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},componentWillMount:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},resize:function(){},componentDidMount:function(){},render:function(){var t=this.cellStyle,e={cursor:"pointer",width:"8%","float":"left",textAlign:"right",display:this.props.cell.sort===!1?"none":"inline-block",overflow:"visible"},i={marginTop:2},r="icon-arrows";this.props.grid.sortInfo.field===this.props.cell.field?(r+="asc"===this.props.grid.sortInfo.dir?" icon-asc":" icon-desc",i.marginTop=5):r+=" icon-both";var a={height:"21px",marginTop:"-4px",width:"1px",background:"#999999",borderRight:"1px solid #FFF","float":"right"},n={width:"2%",cursor:"col-resize",display:"none"};return React.DOM.th({title:this.props.cell.displayName,style:t},React.DOM.div({className:"ngGridHeaderCellText",onClick:this.handleClick},this.props.cell.displayName),React.DOM.div({style:e},React.DOM.i({className:r,style:i})),React.DOM.div({style:n,className:"ngGridHeaderResizeControl"},React.DOM.div({className:"ngGridHeaderCellResize",style:a})))}}),e=React.createClass({displayName:"ngReactGridShowPerPage",handleChange:function(){this.props.grid.react.setPageSize(this.refs.showPerPage.getDOMNode().value)},render:function(){var t=this.props.grid.pageSizes.map(function(t,e){return React.DOM.option({value:t,key:e},t)}.bind(this));return React.DOM.div({className:"ngReactGridShowPerPage"},"Show ",React.DOM.select({onChange:this.handleChange,ref:"showPerPage",value:this.props.grid.pageSize},t)," entries")}}),r=React.createClass({displayName:"ngReactGridSearch",handleSearch:function(){this.props.grid.react.setSearch(this.refs.searchField.getDOMNode().value)},render:function(){return React.DOM.div({className:"ngReactGridSearch"},React.DOM.input({type:"input",placeholder:"Search...",ref:"searchField",onKeyUp:this.handleSearch}))}}),a=React.createClass({displayName:"ngReactGridHeader",render:function(){var i=this.props.grid.columnDefs.length,a=this.props.grid.columnDefs.map(function(e,r){var a=i-1===r;return t({key:r,cell:e,index:r,grid:this.props.grid,last:a})}.bind(this)),n={width:"calc(100% - "+this.props.grid.scrollbarWidth+"px)"},s={paddingRight:this.props.grid.horizontalScroll?this.props.grid.scrollbarWidth:0};return React.DOM.div(null,React.DOM.div({className:"ngReactGridHeaderToolbarWrapper"},e({grid:this.props.grid,setGridState:this.props.setGridState}),r({grid:this.props.grid})),React.DOM.div({className:"ngReactGridHeaderWrapper"},React.DOM.div({className:"ngReactGridHeader",style:s},React.DOM.div({className:"ngReactGridHeaderInner"},React.DOM.table({style:n},React.DOM.thead(null,React.DOM.tr(null,a)))))))}});return a}(),a=function(){var t=React.createClass({displayName:"ngReactGridBodyRowCell",cell:function(t,e){return cellTextType=typeof t,"string"===cellTextType?React.DOM.td({style:e},t):"object"===cellTextType?(t=this.props.grid.react.wrapFunctionsInAngular(t),React.DOM.td({style:e},t)):this.defaultCell},render:function(){var t=this.props.grid.react.getObjectPropertyByString(this.props.row,this.props.cell.field),e={};return i(this.props.grid,this.props.cell,e,this.props.last,!0),this.props.grid.singleLineCell&&(e.overflow="hidden",e.textOverflow="ellipsis",e.whiteSpace="nowrap"),this.defaultCell=React.DOM.td({style:e,title:t},React.DOM.div(null,t)),this.props.grid.editing&&this.props.cell.edit?(t=this.props.cell.edit(this.props.row),this.cell(t,e)):this.props.cell.render?(t=this.props.cell.render(this.props.row),this.cell(t,e)):this.defaultCell}}),e=React.createClass({displayName:"ngReactGridBodyRow",handleClick:function(){this.props.grid.react.rowClick(this.props.row)},render:function(){var e=this.props.grid.columnDefs.length,i=this.props.grid.columnDefs.map(function(i,r){var a=e-1===r;return t({key:r,cell:i,row:this.props.row,grid:this.props.grid,last:a})}.bind(this));return React.DOM.tr({onClick:this.handleClick},i)}}),r=React.createClass({displayName:"ngReactGridBody",getInitialState:function(){return{fullRender:!1,needsUpdate:!1}},calculateIfNeedsUpdate:function(){this.props.grid.data.length>100&&this.setState({needsUpdate:!0})},performFullRender:function(){this.state.needsUpdate&&setTimeout(function(){this.setState({fullRender:!0,needsUpdate:!1})}.bind(this),0)},componentWillMount:function(){this.calculateIfNeedsUpdate()},componentWillReceiveProps:function(){this.calculateIfNeedsUpdate()},componentDidMount:function(){var t=this.getDOMNode(),e=document.querySelector(".ngReactGridHeaderInner"),i=document.querySelector(".ngReactGridViewPort");t.firstChild.addEventListener("scroll",function(){e.scrollLeft=i.scrollLeft}),this.performFullRender()},componentDidUpdate:function(){this.performFullRender()},render:function(){var t,i=function(t,i){return e({key:i,row:t,columns:this.props.columnDefs,grid:this.props.grid})}.bind(this);if(this.props.grid.react.loading){var r={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:r},"Loading..."))}else if(t=this.state.fullRender?this.props.grid.data.map(i):this.props.grid.data.slice(0,100).map(i),0===this.props.grid.react.showingRecords){var a={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:a},"No records found"))}var n={maxHeight:this.props.grid.height,minHeight:this.props.grid.height},s={};return this.props.grid.horizontalScroll?s.width="calc(100% - "+this.props.grid.scrollbarWidth+"px)":n.overflowX="hidden",React.DOM.div({className:"ngReactGridBody"},React.DOM.div({className:"ngReactGridViewPort",style:n},React.DOM.div({className:"ngReactGridInnerViewPort"},React.DOM.table({style:s},React.DOM.tbody(null,t)))))}});return r}(),n=function(){var t=React.createClass({displayName:"ngReactGridStatus",render:function(){return React.DOM.div({className:"ngReactGridStatus"},React.DOM.div(null,"Page ",React.DOM.strong(null,this.props.grid.currentPage)," of ",React.DOM.strong(null,this.props.grid.totalPages)," - Showing ",React.DOM.strong(null,this.props.grid.react.showingRecords)," of ",React.DOM.strong(null,this.props.grid.totalCount)," records"))}}),e=React.createClass({displayName:"ngReactGridPagination",goToPage:function(t){this.props.grid.react.goToPage(t)},goToLastPage:function(){this.goToPage(this.props.grid.totalPages)},goToFirstPage:function(){this.goToPage(1)},goToNextPage:function(){var t=this.props.grid.currentPage+1,e=this.props.grid.totalPages-t;e>=0&&this.goToPage(t)},goToPrevPage:function(){var t=this.props.grid.currentPage-1;t>0&&this.goToPage(t)},render:function(){for(var t=2,e=this.props.grid.totalPages,i=this.props.grid.currentPage,r=0>=i-t?1:i-t,a=i+t>=e?e:i+t,n=[],s=r;a>=s;s++)n.push(s);return n=n.map(function(t,e){var i=t===this.props.grid.currentPage?"active":"";return React.DOM.li({key:e,className:i,dataPage:t},React.DOM.a({href:"javascript:",onClick:this.goToPage.bind(null,t)},t))}.bind(this)),React.DOM.div({className:"ngReactGridPagination"},React.DOM.ul(null,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToPrevPage},"Prev")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToFirstPage},"First")),n,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToLastPage},"Last")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToNextPage},"Next"))))}}),i=React.createClass({displayName:"ngReactGridFooter",render:function(){return React.DOM.div({className:"ngReactGridFooter"},t({grid:this.props.grid}),e({grid:this.props.grid}))}});return i}(),s=React.createClass({displayName:"ngReactGrid",render:function(){return React.DOM.div({className:"ngReactGrid"},r({grid:this.props.grid}),a({grid:this.props.grid}),n({grid:this.props.grid}))}});return s}(),ngReactGridCheckboxComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){this.setState({checked:this.state.checked?!1:!0}),this.props.handleClick()},componentWillReceiveProps:function(t){this.setState({checked:-1===t.selectionTarget.indexOf(t.row)?!1:!0})},render:function(){var t={textAlign:"center"};return React.DOM.div({style:t},React.DOM.input({type:"checkbox",onChange:this.handleClick,checked:this.state.checked}))}});return t}(),ngReactGridCheckboxFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxFieldComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){var t={checked:this.state.checked?!1:!0};this.setState(t),this.props.updateValue(t.checked)},componentWillReceiveProps:function(t){this.setState({checked:t.value?!0:!1})},componentWillMount:function(){this.setState({checked:this.props.value===!0?!0:!1})},render:function(){return React.DOM.input({type:"checkbox",checked:this.state.checked,onChange:this.handleClick})}});return t}(),ngReactGridSelectFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridSelectFieldComponent",getInitialState:function(){return{defaultValue:{id:"",name:""}}},componentWillReceiveProps:function(t){this.setState({defaultValue:t.value})},componentWillMount:function(){this.setState({defaultValue:this.props.value})},render:function(){this.props.referenceData||(this.props.referenceData=[]);var t=this.props.referenceData.map(function(t){return React.DOM.option({value:t.id},t.name)});return React.DOM.select({className:"ngReactGridSelectField",value:this.state.defaultValue.id},t)}});return t}(),ngReactGridTextFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridTextFieldComponent",getInitialState:function(){return{defaultValue:""}},handleChange:function(){var t=this.refs.textField.getDOMNode().value;this.props.updateValue(t),this.setState({defaultValue:t})},componentWillReceiveProps:function(t){this.setState({defaultValue:t.value})},componentWillMount:function(){this.setState({defaultValue:this.props.value})},render:function(){return React.DOM.input({type:"text",value:this.state.defaultValue,className:"ngReactTextField",ref:"textField",onChange:this.handleChange})}});return t}();!function t(e,i,r){function a(s,o){if(!i[s]){if(!e[s]){var c="function"==typeof require&&require;if(!o&&c)return c(s,!0);if(n)return n(s,!0);throw new Error("Cannot find module '"+s+"'")}var d=i[s]={exports:{}};e[s][0].call(d.exports,function(t){var i=e[s][1][t];return a(i?i:t)},d,d.exports,t,e,i,r)}return i[s].exports}for(var n="function"==typeof require&&require,s=0;s0},s.prototype.isLocalMode=function(){return this.localMode},s.prototype.isServerMode=function(){return!this.localMode},s.prototype.setupUpdateEvents=function(){this.events={PAGESIZE:"PAGESIZE",SORTING:"SORTING",SEARCH:"SEARCH",PAGINATION:"PAGINATION",DATA:"DATA",TOTALCOUNT:"TOTALCOUNT"}},s.prototype.initWatchers=function(){this.scope.$watch("grid.data",function(t,e){t!==e&&(this.isServerMode()&&this.react.loading&&(this.react.loading=!1),this.update(this.events.DATA,{data:t}))}.bind(this)),this.scope.$watch("grid.totalCount",function(t){t&&this.update(this.events.TOTALCOUNT,{totalCount:t})}.bind(this))},s.prototype.update=function(t,e){switch(t){case this.events.DATA:this.updateData(e);break;case this.events.PAGESIZE:this.updatePageSize(e);break;case this.events.PAGINATION:this.updatePagination(e);break;case this.events.SEARCH:this.updateSearch(e);break;case this.events.SORTING:this.updateSorting(e);break;case this.events.TOTALCOUNT:this.updateTotalCount(e)}this.render()},s.prototype.updateData=function(t,e){this.react.startIndex=(this.currentPage-1)*this.pageSize,this.react.endIndex=this.pageSize*this.currentPage,this.isLocalMode()?e?(this.data=t.data.slice(this.react.startIndex,this.react.endIndex),this.totalCount=t.data.length):(this.react.originalData=t.data.slice(0),this.totalCount=this.react.originalData.length,this.data=this.react.originalData.slice(this.react.startIndex,this.react.endIndex)):this.data=t.data,this.react.showingRecords=this.data.length,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.updatePageSize=function(t){this.pageSize=t.pageSize,this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updatePagination=function(t){this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updateSearch=function(t){this.search=t.search,this.currentPage=1,this.updateData({data:t.data},!0)},s.prototype.updateSorting=function(t){this.sortInfo=t.sortInfo,t.data&&(this.currentPage=1,this.updateData({data:t.data},!0))},s.prototype.updateTotalCount=function(t){this.totalCount=t.totalCount,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.render=function(){React.renderComponent(ngReactGridComponent({grid:this}),this.element[0])},e.exports=s},{"../vendors/miniUnderscore":10,"./NgReactGridEditManager":2,"./NgReactGridReactManager":3}],2:[function(t,e){var i=function(t){this.ngReactGrid=t,this.dataCopy=[]};i.prototype.mixinAPI=function(t){var e=this;t.edit=function(){e.edit.call(e)},t.save=function(){e.save.call(e)},t.cancel=function(){e.cancel.call(e)}},i.prototype.edit=function(){this.ngReactGrid.editing=!0,this.dataCopy=this.copyData(this.ngReactGrid.react.originalData),this.ngReactGrid.render()},i.prototype.save=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.render()},i.prototype.cancel=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.update(this.ngReactGrid.events.DATA,{data:this.dataCopy}),this.ngReactGrid.render()},i.prototype.copyData=function(t){return JSON.parse(JSON.stringify(t))},e.exports=i},{}],3:[function(t,e){var i=function(t){this.ngReactGrid=t,this.showingRecords=0,this.startIndex=0,this.endIndex=0,this.originalData=[],this.filteredData=[],this.loading=!1,this.getObjectPropertyByString=i.getObjectPropertyByString};i.prototype.setPageSize=function(t){var e={pageSize:t,currentPage:1};this.ngReactGrid.isSearching()&&(e.data=this.filteredData),this.ngReactGrid.update(this.ngReactGrid.events.PAGESIZE,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.setSortField=function(t){var e={sortInfo:{field:t,dir:""}};e.sortInfo.dir=this.ngReactGrid.sortInfo.field!==t?"asc":"asc"===this.ngReactGrid.sortInfo.dir?"desc":"asc",this.ngReactGrid.isServerMode()?(this.ngReactGrid.update(this.ngReactGrid.events.SORTING,e),this.ngReactGrid.getData()):this.performLocalSort(e)},i.prototype.performLocalSort=function(t){var e;e=this.ngReactGrid.isSearching()?this.filteredData:this.originalData.slice(0);var i="asc"===t.sortInfo.dir;e.sort(function(e,r){var a=this.getObjectPropertyByString(e,t.sortInfo.field),n=this.getObjectPropertyByString(r,t.sortInfo.field);return i?n>=a?-1:1:a>=n?-1:1}.bind(this)),t.data=e,t.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SORTING,t)},i.prototype.deepSearch=function(t,e){var i=!1;if(t)for(var r in t)if(t.hasOwnProperty(r)){var a=t[r];if("object"==typeof a){if(i=this.deepSearch(a,e),i===!0)break}else if(-1!==String(t[r]).toLowerCase().indexOf(e)){i=!0;break}}return i},i.prototype.setSearch=function(t){var e={search:t};this.ngReactGrid.isLocalMode()?(t=String(t).toLowerCase(),this.filteredData=this.originalData.slice(0).filter(function(e){var i=!1;return i=this.deepSearch(e,t)}.bind(this)),e.data=this.filteredData,e.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SEARCH,e)):(this.ngReactGrid.search=t,this.ngReactGrid.getData())},i.prototype.goToPage=function(t){var e={currentPage:t};this.ngReactGrid.update(this.ngReactGrid.events.PAGINATION,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.rowClick=function(t){this.ngReactGrid.rowClick(t)},i.prototype.wrapFunctionsInAngular=function(t){for(var e in t.props)t.props.hasOwnProperty(e)&&("children"===e?this.wrapFunctionsInAngular(t.props[e]):"function"==typeof t.props[e]&&(t.props[e]=this.wrapWithRootScope(t.props[e])));return t},i.prototype.wrapWithRootScope=function(t){var e=this;return function(){var i=arguments,r=e.ngReactGrid.rootScope.$$phase;"$apply"==r||"$digest"==r?t.apply(null,i):e.ngReactGrid.rootScope.$apply(function(){t.apply(null,i)})}},i.getObjectPropertyByString=function(t,e){e=e.replace(/\[(\w+)\]/g,".$1"),e=e.replace(/^\./,"");for(var i=e.split(".");i.length;){var r=i.shift();if(!(null!=t&&r in t))return;t=t[r]}return t},i.updateObjectPropertyByString=function(t,e,i){for(var r=e.split("."),a=t,n=0;na;a++)if(e.call(r,t[a],a,t)===breaker)return}else for(var s=i.keys(t),a=0,n=s.length;n>a;a++)if(e.call(r,t[s[a]],s[a],t)===breaker)return;return t},slice:Array.prototype.slice,extend:function(t){return this.each(this.slice.call(arguments,1),function(e){if(e)for(var i in e)t[i]=e[i]}),t}};e.exports=i},{}]},{},[9]); \ No newline at end of file diff --git a/src/css/ngReactGrid.css b/src/css/ngReactGrid.css index 569b8fc..035177c 100644 --- a/src/css/ngReactGrid.css +++ b/src/css/ngReactGrid.css @@ -237,14 +237,11 @@ .ngReactTextField { margin:0; - width: 95%; + width: calc(90% - 4px); outline: none; - border: none; padding: 4px; - background: transparent; - font-weight: bold; } .ngReactGridSelectField { - width: 95%; + width: calc(100% - 4px); } \ No newline at end of file diff --git a/src/js/factories/ngReactGridSelectFieldFactory.js b/src/js/factories/ngReactGridSelectFieldFactory.js index 0910614..555a040 100644 --- a/src/js/factories/ngReactGridSelectFieldFactory.js +++ b/src/js/factories/ngReactGridSelectFieldFactory.js @@ -1,13 +1,29 @@ -var ngReactGridSelectFieldFactory = function() { +var NgReactGridReactManager = require("../classes/NgReactGridReactManager"); - var ngReactGridSelectField = function(record, field, referenceData) { +var ngReactGridSelectFieldFactory = function($rootScope) { + + var ngReactGridSelectField = function(record, field, referenceData, updateNotification) { this.record = record; this.field = field; - return ngReactGridSelectFieldComponent({value: this.record[field], updateValue: this.updateValue.bind(this), referenceData: referenceData}); + this.updateNotification = updateNotification; + + var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field); + + return ngReactGridSelectFieldComponent({value: value, updateValue: this.updateValue.bind(this), referenceData: (referenceData || [])}); }; ngReactGridSelectField.prototype.updateValue = function(newValue) { - this.record[this.field] = newValue; + NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, newValue); + + if(this.updateNotification) { + if($rootScope.$$phase) { + this.updateNotification(this.record); + } else { + $rootScope.$apply(function () { + this.updateNotification(this.record); + }.bind(this)); + } + } }; return ngReactGridSelectField; diff --git a/src/js/factories/ngReactGridTextFieldFactory.js b/src/js/factories/ngReactGridTextFieldFactory.js index 6e675f1..3ebda99 100644 --- a/src/js/factories/ngReactGridTextFieldFactory.js +++ b/src/js/factories/ngReactGridTextFieldFactory.js @@ -1,13 +1,29 @@ -var ngReactGridTextFieldFactory = function() { +var NgReactGridReactManager = require("../classes/NgReactGridReactManager"); - var ngReactGridTextField = function(record, field) { +var ngReactGridTextFieldFactory = function($rootScope) { + + var ngReactGridTextField = function(record, field, updateNotification) { this.record = record; this.field = field; - return ngReactGridTextFieldComponent({value: this.record[field], updateValue: this.updateValue.bind(this)}); + this.updateNotification = updateNotification; + + var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field); + + return ngReactGridTextFieldComponent({value: value, updateValue: this.updateValue.bind(this)}); }; ngReactGridTextField.prototype.updateValue = function(newValue) { - this.record[this.field] = newValue; + NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, newValue); + + if(this.updateNotification) { + if($rootScope.$$phase) { + this.updateNotification(this.record); + } else { + $rootScope.$apply(function () { + this.updateNotification(this.record); + }.bind(this)); + } + } }; return ngReactGridTextField; diff --git a/src/js/main.js b/src/js/main.js index e3a1475..e7a00ed 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -8,7 +8,7 @@ var ngReactGridSelectFieldFactory = require("./factories/ngReactGridSelectFieldF angular.module('ngReactGrid', []) .factory("ngReactGridCheckbox", [ngReactGridCheckboxFactory]) - .factory("ngReactGridTextField", [ngReactGridTextFieldFactory]) + .factory("ngReactGridTextField", ['$rootScope', ngReactGridTextFieldFactory]) .factory("ngReactGridCheckboxField", [ngReactGridCheckboxFieldFactory]) - .factory("ngReactGridSelectField", [ngReactGridSelectFieldFactory]) + .factory("ngReactGridSelectField", ['$rootScope', ngReactGridSelectFieldFactory]) .directive("ngReactGrid", ['$rootScope', ngReactGridDirective]); diff --git a/src/jsx/reactGridSelectField.jsx b/src/jsx/reactGridSelectField.jsx index 50e1617..d8151bd 100644 --- a/src/jsx/reactGridSelectField.jsx +++ b/src/jsx/reactGridSelectField.jsx @@ -1,9 +1,29 @@ var ngReactGridSelectFieldComponent = (function() { var ngReactGridSelectFieldComponent = React.createClass({ + getInitialState: function() { + return { + defaultValue: { + id: "", + name: "" + } + }; + }, + componentWillReceiveProps: function(nextProps) { + this.setState({ + defaultValue: nextProps.value + }); + }, + componentWillMount: function() { + this.setState({ + defaultValue: this.props.value + }); + }, render: function() { - if(!this.props.referenceData) {} + if(!this.props.referenceData) { + this.props.referenceData = []; + } var options = this.props.referenceData.map(function(option) { return ( @@ -12,7 +32,7 @@ var ngReactGridSelectFieldComponent = (function() { }); return ( - {options} ) From 5d1232724eec1750653a05f67c13c38173735ebf Mon Sep 17 00:00:00 2001 From: Jose Garcia Date: Tue, 8 Jul 2014 15:57:02 -0400 Subject: [PATCH 3/3] - Fixes to the select fields --- build/js/ngReactGrid-0.6.1.js | 31 ++++++++++++++++--- build/js/ngReactGrid-0.6.1.min.js | 2 +- .../ngReactGridSelectFieldFactory.js | 16 +++++++++- src/jsx/reactGridSelectField.jsx | 15 +++++++-- 4 files changed, 55 insertions(+), 9 deletions(-) diff --git a/build/js/ngReactGrid-0.6.1.js b/build/js/ngReactGrid-0.6.1.js index 7dd1021..3cfd3b2 100644 --- a/build/js/ngReactGrid-0.6.1.js +++ b/build/js/ngReactGrid-0.6.1.js @@ -571,14 +571,23 @@ var ngReactGridSelectFieldComponent = (function() { } }; }, + handleChange: function(e) { + var value = e.target.value; + this.props.updateValue(value); + this.setState({ + defaultValue: { + id: value + } + }); + }, componentWillReceiveProps: function(nextProps) { this.setState({ - defaultValue: nextProps.value + defaultValue: nextProps.value || {} }); }, componentWillMount: function() { this.setState({ - defaultValue: this.props.value + defaultValue: this.props.value || {} }); }, render: function() { @@ -594,7 +603,7 @@ var ngReactGridSelectFieldComponent = (function() { }); return ( - React.DOM.select( {className:"ngReactGridSelectField", value:this.state.defaultValue.id}, + React.DOM.select( {className:"ngReactGridSelectField", value:this.state.defaultValue.id, onChange:this.handleChange}, options ) ) @@ -1493,6 +1502,7 @@ var ngReactGridSelectFieldFactory = function($rootScope) { this.record = record; this.field = field; this.updateNotification = updateNotification; + this.referenceData = referenceData; var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field); @@ -1500,7 +1510,20 @@ var ngReactGridSelectFieldFactory = function($rootScope) { }; ngReactGridSelectField.prototype.updateValue = function(newValue) { - NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, newValue); + + var updateValue = {}; + + for(var i in this.referenceData) { + var option = this.referenceData[i]; + + if(option.id == newValue) { + updateValue = option; + } + } + + console.debug(this.record, this.field, updateValue); + + NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, updateValue); if(this.updateNotification) { if($rootScope.$$phase) { diff --git a/build/js/ngReactGrid-0.6.1.min.js b/build/js/ngReactGrid-0.6.1.min.js index 1418cbb..02abb1b 100644 --- a/build/js/ngReactGrid-0.6.1.min.js +++ b/build/js/ngReactGrid-0.6.1.min.js @@ -1 +1 @@ -var ngReactGridComponent=function(){var t=window.innerWidth,e=(window.innerHeight,function(e){var i=String(e.width).replace("px",""),r=-1!==i.indexOf("%");if(r){var a=Math.floor(parseInt(i)*t/100);e.width=a}}),i=function(t,i,r){i.width||(i.width="10%"),t.horizontalScroll&&e(i),r.width=i.width},r=function(){var t=React.createClass({displayName:"ngGridHeaderCell",getInitialState:function(){return{width:0}},cellStyle:{},handleClick:function(){this.props.grid.react.setSortField(this.props.cell.field)},componentWillReceiveProps:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},componentWillMount:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},resize:function(){},componentDidMount:function(){},render:function(){var t=this.cellStyle,e={cursor:"pointer",width:"8%","float":"left",textAlign:"right",display:this.props.cell.sort===!1?"none":"inline-block",overflow:"visible"},i={marginTop:2},r="icon-arrows";this.props.grid.sortInfo.field===this.props.cell.field?(r+="asc"===this.props.grid.sortInfo.dir?" icon-asc":" icon-desc",i.marginTop=5):r+=" icon-both";var a={height:"21px",marginTop:"-4px",width:"1px",background:"#999999",borderRight:"1px solid #FFF","float":"right"},n={width:"2%",cursor:"col-resize",display:"none"};return React.DOM.th({title:this.props.cell.displayName,style:t},React.DOM.div({className:"ngGridHeaderCellText",onClick:this.handleClick},this.props.cell.displayName),React.DOM.div({style:e},React.DOM.i({className:r,style:i})),React.DOM.div({style:n,className:"ngGridHeaderResizeControl"},React.DOM.div({className:"ngGridHeaderCellResize",style:a})))}}),e=React.createClass({displayName:"ngReactGridShowPerPage",handleChange:function(){this.props.grid.react.setPageSize(this.refs.showPerPage.getDOMNode().value)},render:function(){var t=this.props.grid.pageSizes.map(function(t,e){return React.DOM.option({value:t,key:e},t)}.bind(this));return React.DOM.div({className:"ngReactGridShowPerPage"},"Show ",React.DOM.select({onChange:this.handleChange,ref:"showPerPage",value:this.props.grid.pageSize},t)," entries")}}),r=React.createClass({displayName:"ngReactGridSearch",handleSearch:function(){this.props.grid.react.setSearch(this.refs.searchField.getDOMNode().value)},render:function(){return React.DOM.div({className:"ngReactGridSearch"},React.DOM.input({type:"input",placeholder:"Search...",ref:"searchField",onKeyUp:this.handleSearch}))}}),a=React.createClass({displayName:"ngReactGridHeader",render:function(){var i=this.props.grid.columnDefs.length,a=this.props.grid.columnDefs.map(function(e,r){var a=i-1===r;return t({key:r,cell:e,index:r,grid:this.props.grid,last:a})}.bind(this)),n={width:"calc(100% - "+this.props.grid.scrollbarWidth+"px)"},s={paddingRight:this.props.grid.horizontalScroll?this.props.grid.scrollbarWidth:0};return React.DOM.div(null,React.DOM.div({className:"ngReactGridHeaderToolbarWrapper"},e({grid:this.props.grid,setGridState:this.props.setGridState}),r({grid:this.props.grid})),React.DOM.div({className:"ngReactGridHeaderWrapper"},React.DOM.div({className:"ngReactGridHeader",style:s},React.DOM.div({className:"ngReactGridHeaderInner"},React.DOM.table({style:n},React.DOM.thead(null,React.DOM.tr(null,a)))))))}});return a}(),a=function(){var t=React.createClass({displayName:"ngReactGridBodyRowCell",cell:function(t,e){return cellTextType=typeof t,"string"===cellTextType?React.DOM.td({style:e},t):"object"===cellTextType?(t=this.props.grid.react.wrapFunctionsInAngular(t),React.DOM.td({style:e},t)):this.defaultCell},render:function(){var t=this.props.grid.react.getObjectPropertyByString(this.props.row,this.props.cell.field),e={};return i(this.props.grid,this.props.cell,e,this.props.last,!0),this.props.grid.singleLineCell&&(e.overflow="hidden",e.textOverflow="ellipsis",e.whiteSpace="nowrap"),this.defaultCell=React.DOM.td({style:e,title:t},React.DOM.div(null,t)),this.props.grid.editing&&this.props.cell.edit?(t=this.props.cell.edit(this.props.row),this.cell(t,e)):this.props.cell.render?(t=this.props.cell.render(this.props.row),this.cell(t,e)):this.defaultCell}}),e=React.createClass({displayName:"ngReactGridBodyRow",handleClick:function(){this.props.grid.react.rowClick(this.props.row)},render:function(){var e=this.props.grid.columnDefs.length,i=this.props.grid.columnDefs.map(function(i,r){var a=e-1===r;return t({key:r,cell:i,row:this.props.row,grid:this.props.grid,last:a})}.bind(this));return React.DOM.tr({onClick:this.handleClick},i)}}),r=React.createClass({displayName:"ngReactGridBody",getInitialState:function(){return{fullRender:!1,needsUpdate:!1}},calculateIfNeedsUpdate:function(){this.props.grid.data.length>100&&this.setState({needsUpdate:!0})},performFullRender:function(){this.state.needsUpdate&&setTimeout(function(){this.setState({fullRender:!0,needsUpdate:!1})}.bind(this),0)},componentWillMount:function(){this.calculateIfNeedsUpdate()},componentWillReceiveProps:function(){this.calculateIfNeedsUpdate()},componentDidMount:function(){var t=this.getDOMNode(),e=document.querySelector(".ngReactGridHeaderInner"),i=document.querySelector(".ngReactGridViewPort");t.firstChild.addEventListener("scroll",function(){e.scrollLeft=i.scrollLeft}),this.performFullRender()},componentDidUpdate:function(){this.performFullRender()},render:function(){var t,i=function(t,i){return e({key:i,row:t,columns:this.props.columnDefs,grid:this.props.grid})}.bind(this);if(this.props.grid.react.loading){var r={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:r},"Loading..."))}else if(t=this.state.fullRender?this.props.grid.data.map(i):this.props.grid.data.slice(0,100).map(i),0===this.props.grid.react.showingRecords){var a={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:a},"No records found"))}var n={maxHeight:this.props.grid.height,minHeight:this.props.grid.height},s={};return this.props.grid.horizontalScroll?s.width="calc(100% - "+this.props.grid.scrollbarWidth+"px)":n.overflowX="hidden",React.DOM.div({className:"ngReactGridBody"},React.DOM.div({className:"ngReactGridViewPort",style:n},React.DOM.div({className:"ngReactGridInnerViewPort"},React.DOM.table({style:s},React.DOM.tbody(null,t)))))}});return r}(),n=function(){var t=React.createClass({displayName:"ngReactGridStatus",render:function(){return React.DOM.div({className:"ngReactGridStatus"},React.DOM.div(null,"Page ",React.DOM.strong(null,this.props.grid.currentPage)," of ",React.DOM.strong(null,this.props.grid.totalPages)," - Showing ",React.DOM.strong(null,this.props.grid.react.showingRecords)," of ",React.DOM.strong(null,this.props.grid.totalCount)," records"))}}),e=React.createClass({displayName:"ngReactGridPagination",goToPage:function(t){this.props.grid.react.goToPage(t)},goToLastPage:function(){this.goToPage(this.props.grid.totalPages)},goToFirstPage:function(){this.goToPage(1)},goToNextPage:function(){var t=this.props.grid.currentPage+1,e=this.props.grid.totalPages-t;e>=0&&this.goToPage(t)},goToPrevPage:function(){var t=this.props.grid.currentPage-1;t>0&&this.goToPage(t)},render:function(){for(var t=2,e=this.props.grid.totalPages,i=this.props.grid.currentPage,r=0>=i-t?1:i-t,a=i+t>=e?e:i+t,n=[],s=r;a>=s;s++)n.push(s);return n=n.map(function(t,e){var i=t===this.props.grid.currentPage?"active":"";return React.DOM.li({key:e,className:i,dataPage:t},React.DOM.a({href:"javascript:",onClick:this.goToPage.bind(null,t)},t))}.bind(this)),React.DOM.div({className:"ngReactGridPagination"},React.DOM.ul(null,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToPrevPage},"Prev")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToFirstPage},"First")),n,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToLastPage},"Last")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToNextPage},"Next"))))}}),i=React.createClass({displayName:"ngReactGridFooter",render:function(){return React.DOM.div({className:"ngReactGridFooter"},t({grid:this.props.grid}),e({grid:this.props.grid}))}});return i}(),s=React.createClass({displayName:"ngReactGrid",render:function(){return React.DOM.div({className:"ngReactGrid"},r({grid:this.props.grid}),a({grid:this.props.grid}),n({grid:this.props.grid}))}});return s}(),ngReactGridCheckboxComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){this.setState({checked:this.state.checked?!1:!0}),this.props.handleClick()},componentWillReceiveProps:function(t){this.setState({checked:-1===t.selectionTarget.indexOf(t.row)?!1:!0})},render:function(){var t={textAlign:"center"};return React.DOM.div({style:t},React.DOM.input({type:"checkbox",onChange:this.handleClick,checked:this.state.checked}))}});return t}(),ngReactGridCheckboxFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxFieldComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){var t={checked:this.state.checked?!1:!0};this.setState(t),this.props.updateValue(t.checked)},componentWillReceiveProps:function(t){this.setState({checked:t.value?!0:!1})},componentWillMount:function(){this.setState({checked:this.props.value===!0?!0:!1})},render:function(){return React.DOM.input({type:"checkbox",checked:this.state.checked,onChange:this.handleClick})}});return t}(),ngReactGridSelectFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridSelectFieldComponent",getInitialState:function(){return{defaultValue:{id:"",name:""}}},componentWillReceiveProps:function(t){this.setState({defaultValue:t.value})},componentWillMount:function(){this.setState({defaultValue:this.props.value})},render:function(){this.props.referenceData||(this.props.referenceData=[]);var t=this.props.referenceData.map(function(t){return React.DOM.option({value:t.id},t.name)});return React.DOM.select({className:"ngReactGridSelectField",value:this.state.defaultValue.id},t)}});return t}(),ngReactGridTextFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridTextFieldComponent",getInitialState:function(){return{defaultValue:""}},handleChange:function(){var t=this.refs.textField.getDOMNode().value;this.props.updateValue(t),this.setState({defaultValue:t})},componentWillReceiveProps:function(t){this.setState({defaultValue:t.value})},componentWillMount:function(){this.setState({defaultValue:this.props.value})},render:function(){return React.DOM.input({type:"text",value:this.state.defaultValue,className:"ngReactTextField",ref:"textField",onChange:this.handleChange})}});return t}();!function t(e,i,r){function a(s,o){if(!i[s]){if(!e[s]){var c="function"==typeof require&&require;if(!o&&c)return c(s,!0);if(n)return n(s,!0);throw new Error("Cannot find module '"+s+"'")}var d=i[s]={exports:{}};e[s][0].call(d.exports,function(t){var i=e[s][1][t];return a(i?i:t)},d,d.exports,t,e,i,r)}return i[s].exports}for(var n="function"==typeof require&&require,s=0;s0},s.prototype.isLocalMode=function(){return this.localMode},s.prototype.isServerMode=function(){return!this.localMode},s.prototype.setupUpdateEvents=function(){this.events={PAGESIZE:"PAGESIZE",SORTING:"SORTING",SEARCH:"SEARCH",PAGINATION:"PAGINATION",DATA:"DATA",TOTALCOUNT:"TOTALCOUNT"}},s.prototype.initWatchers=function(){this.scope.$watch("grid.data",function(t,e){t!==e&&(this.isServerMode()&&this.react.loading&&(this.react.loading=!1),this.update(this.events.DATA,{data:t}))}.bind(this)),this.scope.$watch("grid.totalCount",function(t){t&&this.update(this.events.TOTALCOUNT,{totalCount:t})}.bind(this))},s.prototype.update=function(t,e){switch(t){case this.events.DATA:this.updateData(e);break;case this.events.PAGESIZE:this.updatePageSize(e);break;case this.events.PAGINATION:this.updatePagination(e);break;case this.events.SEARCH:this.updateSearch(e);break;case this.events.SORTING:this.updateSorting(e);break;case this.events.TOTALCOUNT:this.updateTotalCount(e)}this.render()},s.prototype.updateData=function(t,e){this.react.startIndex=(this.currentPage-1)*this.pageSize,this.react.endIndex=this.pageSize*this.currentPage,this.isLocalMode()?e?(this.data=t.data.slice(this.react.startIndex,this.react.endIndex),this.totalCount=t.data.length):(this.react.originalData=t.data.slice(0),this.totalCount=this.react.originalData.length,this.data=this.react.originalData.slice(this.react.startIndex,this.react.endIndex)):this.data=t.data,this.react.showingRecords=this.data.length,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.updatePageSize=function(t){this.pageSize=t.pageSize,this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updatePagination=function(t){this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updateSearch=function(t){this.search=t.search,this.currentPage=1,this.updateData({data:t.data},!0)},s.prototype.updateSorting=function(t){this.sortInfo=t.sortInfo,t.data&&(this.currentPage=1,this.updateData({data:t.data},!0))},s.prototype.updateTotalCount=function(t){this.totalCount=t.totalCount,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.render=function(){React.renderComponent(ngReactGridComponent({grid:this}),this.element[0])},e.exports=s},{"../vendors/miniUnderscore":10,"./NgReactGridEditManager":2,"./NgReactGridReactManager":3}],2:[function(t,e){var i=function(t){this.ngReactGrid=t,this.dataCopy=[]};i.prototype.mixinAPI=function(t){var e=this;t.edit=function(){e.edit.call(e)},t.save=function(){e.save.call(e)},t.cancel=function(){e.cancel.call(e)}},i.prototype.edit=function(){this.ngReactGrid.editing=!0,this.dataCopy=this.copyData(this.ngReactGrid.react.originalData),this.ngReactGrid.render()},i.prototype.save=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.render()},i.prototype.cancel=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.update(this.ngReactGrid.events.DATA,{data:this.dataCopy}),this.ngReactGrid.render()},i.prototype.copyData=function(t){return JSON.parse(JSON.stringify(t))},e.exports=i},{}],3:[function(t,e){var i=function(t){this.ngReactGrid=t,this.showingRecords=0,this.startIndex=0,this.endIndex=0,this.originalData=[],this.filteredData=[],this.loading=!1,this.getObjectPropertyByString=i.getObjectPropertyByString};i.prototype.setPageSize=function(t){var e={pageSize:t,currentPage:1};this.ngReactGrid.isSearching()&&(e.data=this.filteredData),this.ngReactGrid.update(this.ngReactGrid.events.PAGESIZE,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.setSortField=function(t){var e={sortInfo:{field:t,dir:""}};e.sortInfo.dir=this.ngReactGrid.sortInfo.field!==t?"asc":"asc"===this.ngReactGrid.sortInfo.dir?"desc":"asc",this.ngReactGrid.isServerMode()?(this.ngReactGrid.update(this.ngReactGrid.events.SORTING,e),this.ngReactGrid.getData()):this.performLocalSort(e)},i.prototype.performLocalSort=function(t){var e;e=this.ngReactGrid.isSearching()?this.filteredData:this.originalData.slice(0);var i="asc"===t.sortInfo.dir;e.sort(function(e,r){var a=this.getObjectPropertyByString(e,t.sortInfo.field),n=this.getObjectPropertyByString(r,t.sortInfo.field);return i?n>=a?-1:1:a>=n?-1:1}.bind(this)),t.data=e,t.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SORTING,t)},i.prototype.deepSearch=function(t,e){var i=!1;if(t)for(var r in t)if(t.hasOwnProperty(r)){var a=t[r];if("object"==typeof a){if(i=this.deepSearch(a,e),i===!0)break}else if(-1!==String(t[r]).toLowerCase().indexOf(e)){i=!0;break}}return i},i.prototype.setSearch=function(t){var e={search:t};this.ngReactGrid.isLocalMode()?(t=String(t).toLowerCase(),this.filteredData=this.originalData.slice(0).filter(function(e){var i=!1;return i=this.deepSearch(e,t)}.bind(this)),e.data=this.filteredData,e.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SEARCH,e)):(this.ngReactGrid.search=t,this.ngReactGrid.getData())},i.prototype.goToPage=function(t){var e={currentPage:t};this.ngReactGrid.update(this.ngReactGrid.events.PAGINATION,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.rowClick=function(t){this.ngReactGrid.rowClick(t)},i.prototype.wrapFunctionsInAngular=function(t){for(var e in t.props)t.props.hasOwnProperty(e)&&("children"===e?this.wrapFunctionsInAngular(t.props[e]):"function"==typeof t.props[e]&&(t.props[e]=this.wrapWithRootScope(t.props[e])));return t},i.prototype.wrapWithRootScope=function(t){var e=this;return function(){var i=arguments,r=e.ngReactGrid.rootScope.$$phase;"$apply"==r||"$digest"==r?t.apply(null,i):e.ngReactGrid.rootScope.$apply(function(){t.apply(null,i)})}},i.getObjectPropertyByString=function(t,e){e=e.replace(/\[(\w+)\]/g,".$1"),e=e.replace(/^\./,"");for(var i=e.split(".");i.length;){var r=i.shift();if(!(null!=t&&r in t))return;t=t[r]}return t},i.updateObjectPropertyByString=function(t,e,i){for(var r=e.split("."),a=t,n=0;na;a++)if(e.call(r,t[a],a,t)===breaker)return}else for(var s=i.keys(t),a=0,n=s.length;n>a;a++)if(e.call(r,t[s[a]],s[a],t)===breaker)return;return t},slice:Array.prototype.slice,extend:function(t){return this.each(this.slice.call(arguments,1),function(e){if(e)for(var i in e)t[i]=e[i]}),t}};e.exports=i},{}]},{},[9]); \ No newline at end of file +var ngReactGridComponent=function(){var t=window.innerWidth,e=(window.innerHeight,function(e){var i=String(e.width).replace("px",""),r=-1!==i.indexOf("%");if(r){var a=Math.floor(parseInt(i)*t/100);e.width=a}}),i=function(t,i,r){i.width||(i.width="10%"),t.horizontalScroll&&e(i),r.width=i.width},r=function(){var t=React.createClass({displayName:"ngGridHeaderCell",getInitialState:function(){return{width:0}},cellStyle:{},handleClick:function(){this.props.grid.react.setSortField(this.props.cell.field)},componentWillReceiveProps:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},componentWillMount:function(){i(this.props.grid,this.props.cell,this.cellStyle,this.props.last),this.setState({width:this.cellStyle.width})},resize:function(){},componentDidMount:function(){},render:function(){var t=this.cellStyle,e={cursor:"pointer",width:"8%","float":"left",textAlign:"right",display:this.props.cell.sort===!1?"none":"inline-block",overflow:"visible"},i={marginTop:2},r="icon-arrows";this.props.grid.sortInfo.field===this.props.cell.field?(r+="asc"===this.props.grid.sortInfo.dir?" icon-asc":" icon-desc",i.marginTop=5):r+=" icon-both";var a={height:"21px",marginTop:"-4px",width:"1px",background:"#999999",borderRight:"1px solid #FFF","float":"right"},n={width:"2%",cursor:"col-resize",display:"none"};return React.DOM.th({title:this.props.cell.displayName,style:t},React.DOM.div({className:"ngGridHeaderCellText",onClick:this.handleClick},this.props.cell.displayName),React.DOM.div({style:e},React.DOM.i({className:r,style:i})),React.DOM.div({style:n,className:"ngGridHeaderResizeControl"},React.DOM.div({className:"ngGridHeaderCellResize",style:a})))}}),e=React.createClass({displayName:"ngReactGridShowPerPage",handleChange:function(){this.props.grid.react.setPageSize(this.refs.showPerPage.getDOMNode().value)},render:function(){var t=this.props.grid.pageSizes.map(function(t,e){return React.DOM.option({value:t,key:e},t)}.bind(this));return React.DOM.div({className:"ngReactGridShowPerPage"},"Show ",React.DOM.select({onChange:this.handleChange,ref:"showPerPage",value:this.props.grid.pageSize},t)," entries")}}),r=React.createClass({displayName:"ngReactGridSearch",handleSearch:function(){this.props.grid.react.setSearch(this.refs.searchField.getDOMNode().value)},render:function(){return React.DOM.div({className:"ngReactGridSearch"},React.DOM.input({type:"input",placeholder:"Search...",ref:"searchField",onKeyUp:this.handleSearch}))}}),a=React.createClass({displayName:"ngReactGridHeader",render:function(){var i=this.props.grid.columnDefs.length,a=this.props.grid.columnDefs.map(function(e,r){var a=i-1===r;return t({key:r,cell:e,index:r,grid:this.props.grid,last:a})}.bind(this)),n={width:"calc(100% - "+this.props.grid.scrollbarWidth+"px)"},s={paddingRight:this.props.grid.horizontalScroll?this.props.grid.scrollbarWidth:0};return React.DOM.div(null,React.DOM.div({className:"ngReactGridHeaderToolbarWrapper"},e({grid:this.props.grid,setGridState:this.props.setGridState}),r({grid:this.props.grid})),React.DOM.div({className:"ngReactGridHeaderWrapper"},React.DOM.div({className:"ngReactGridHeader",style:s},React.DOM.div({className:"ngReactGridHeaderInner"},React.DOM.table({style:n},React.DOM.thead(null,React.DOM.tr(null,a)))))))}});return a}(),a=function(){var t=React.createClass({displayName:"ngReactGridBodyRowCell",cell:function(t,e){return cellTextType=typeof t,"string"===cellTextType?React.DOM.td({style:e},t):"object"===cellTextType?(t=this.props.grid.react.wrapFunctionsInAngular(t),React.DOM.td({style:e},t)):this.defaultCell},render:function(){var t=this.props.grid.react.getObjectPropertyByString(this.props.row,this.props.cell.field),e={};return i(this.props.grid,this.props.cell,e,this.props.last,!0),this.props.grid.singleLineCell&&(e.overflow="hidden",e.textOverflow="ellipsis",e.whiteSpace="nowrap"),this.defaultCell=React.DOM.td({style:e,title:t},React.DOM.div(null,t)),this.props.grid.editing&&this.props.cell.edit?(t=this.props.cell.edit(this.props.row),this.cell(t,e)):this.props.cell.render?(t=this.props.cell.render(this.props.row),this.cell(t,e)):this.defaultCell}}),e=React.createClass({displayName:"ngReactGridBodyRow",handleClick:function(){this.props.grid.react.rowClick(this.props.row)},render:function(){var e=this.props.grid.columnDefs.length,i=this.props.grid.columnDefs.map(function(i,r){var a=e-1===r;return t({key:r,cell:i,row:this.props.row,grid:this.props.grid,last:a})}.bind(this));return React.DOM.tr({onClick:this.handleClick},i)}}),r=React.createClass({displayName:"ngReactGridBody",getInitialState:function(){return{fullRender:!1,needsUpdate:!1}},calculateIfNeedsUpdate:function(){this.props.grid.data.length>100&&this.setState({needsUpdate:!0})},performFullRender:function(){this.state.needsUpdate&&setTimeout(function(){this.setState({fullRender:!0,needsUpdate:!1})}.bind(this),0)},componentWillMount:function(){this.calculateIfNeedsUpdate()},componentWillReceiveProps:function(){this.calculateIfNeedsUpdate()},componentDidMount:function(){var t=this.getDOMNode(),e=document.querySelector(".ngReactGridHeaderInner"),i=document.querySelector(".ngReactGridViewPort");t.firstChild.addEventListener("scroll",function(){e.scrollLeft=i.scrollLeft}),this.performFullRender()},componentDidUpdate:function(){this.performFullRender()},render:function(){var t,i=function(t,i){return e({key:i,row:t,columns:this.props.columnDefs,grid:this.props.grid})}.bind(this);if(this.props.grid.react.loading){var r={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:r},"Loading..."))}else if(t=this.state.fullRender?this.props.grid.data.map(i):this.props.grid.data.slice(0,100).map(i),0===this.props.grid.react.showingRecords){var a={textAlign:"center"};t=React.DOM.tr(null,React.DOM.td({colSpan:this.props.grid.columnDefs.length,style:a},"No records found"))}var n={maxHeight:this.props.grid.height,minHeight:this.props.grid.height},s={};return this.props.grid.horizontalScroll?s.width="calc(100% - "+this.props.grid.scrollbarWidth+"px)":n.overflowX="hidden",React.DOM.div({className:"ngReactGridBody"},React.DOM.div({className:"ngReactGridViewPort",style:n},React.DOM.div({className:"ngReactGridInnerViewPort"},React.DOM.table({style:s},React.DOM.tbody(null,t)))))}});return r}(),n=function(){var t=React.createClass({displayName:"ngReactGridStatus",render:function(){return React.DOM.div({className:"ngReactGridStatus"},React.DOM.div(null,"Page ",React.DOM.strong(null,this.props.grid.currentPage)," of ",React.DOM.strong(null,this.props.grid.totalPages)," - Showing ",React.DOM.strong(null,this.props.grid.react.showingRecords)," of ",React.DOM.strong(null,this.props.grid.totalCount)," records"))}}),e=React.createClass({displayName:"ngReactGridPagination",goToPage:function(t){this.props.grid.react.goToPage(t)},goToLastPage:function(){this.goToPage(this.props.grid.totalPages)},goToFirstPage:function(){this.goToPage(1)},goToNextPage:function(){var t=this.props.grid.currentPage+1,e=this.props.grid.totalPages-t;e>=0&&this.goToPage(t)},goToPrevPage:function(){var t=this.props.grid.currentPage-1;t>0&&this.goToPage(t)},render:function(){for(var t=2,e=this.props.grid.totalPages,i=this.props.grid.currentPage,r=0>=i-t?1:i-t,a=i+t>=e?e:i+t,n=[],s=r;a>=s;s++)n.push(s);return n=n.map(function(t,e){var i=t===this.props.grid.currentPage?"active":"";return React.DOM.li({key:e,className:i,dataPage:t},React.DOM.a({href:"javascript:",onClick:this.goToPage.bind(null,t)},t))}.bind(this)),React.DOM.div({className:"ngReactGridPagination"},React.DOM.ul(null,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToPrevPage},"Prev")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToFirstPage},"First")),n,React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToLastPage},"Last")),React.DOM.li(null,React.DOM.a({href:"javascript:",onClick:this.goToNextPage},"Next"))))}}),i=React.createClass({displayName:"ngReactGridFooter",render:function(){return React.DOM.div({className:"ngReactGridFooter"},t({grid:this.props.grid}),e({grid:this.props.grid}))}});return i}(),s=React.createClass({displayName:"ngReactGrid",render:function(){return React.DOM.div({className:"ngReactGrid"},r({grid:this.props.grid}),a({grid:this.props.grid}),n({grid:this.props.grid}))}});return s}(),ngReactGridCheckboxComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){this.setState({checked:this.state.checked?!1:!0}),this.props.handleClick()},componentWillReceiveProps:function(t){this.setState({checked:-1===t.selectionTarget.indexOf(t.row)?!1:!0})},render:function(){var t={textAlign:"center"};return React.DOM.div({style:t},React.DOM.input({type:"checkbox",onChange:this.handleClick,checked:this.state.checked}))}});return t}(),ngReactGridCheckboxFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridCheckboxFieldComponent",getInitialState:function(){return{checked:!1}},handleClick:function(){var t={checked:this.state.checked?!1:!0};this.setState(t),this.props.updateValue(t.checked)},componentWillReceiveProps:function(t){this.setState({checked:t.value?!0:!1})},componentWillMount:function(){this.setState({checked:this.props.value===!0?!0:!1})},render:function(){return React.DOM.input({type:"checkbox",checked:this.state.checked,onChange:this.handleClick})}});return t}(),ngReactGridSelectFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridSelectFieldComponent",getInitialState:function(){return{defaultValue:{id:"",name:""}}},handleChange:function(t){var e=t.target.value;this.props.updateValue(e),this.setState({defaultValue:{id:e}})},componentWillReceiveProps:function(t){this.setState({defaultValue:t.value||{}})},componentWillMount:function(){this.setState({defaultValue:this.props.value||{}})},render:function(){this.props.referenceData||(this.props.referenceData=[]);var t=this.props.referenceData.map(function(t){return React.DOM.option({value:t.id},t.name)});return React.DOM.select({className:"ngReactGridSelectField",value:this.state.defaultValue.id,onChange:this.handleChange},t)}});return t}(),ngReactGridTextFieldComponent=function(){var t=React.createClass({displayName:"ngReactGridTextFieldComponent",getInitialState:function(){return{defaultValue:""}},handleChange:function(){var t=this.refs.textField.getDOMNode().value;this.props.updateValue(t),this.setState({defaultValue:t})},componentWillReceiveProps:function(t){this.setState({defaultValue:t.value})},componentWillMount:function(){this.setState({defaultValue:this.props.value})},render:function(){return React.DOM.input({type:"text",value:this.state.defaultValue,className:"ngReactTextField",ref:"textField",onChange:this.handleChange})}});return t}();!function t(e,i,r){function a(s,o){if(!i[s]){if(!e[s]){var c="function"==typeof require&&require;if(!o&&c)return c(s,!0);if(n)return n(s,!0);throw new Error("Cannot find module '"+s+"'")}var d=i[s]={exports:{}};e[s][0].call(d.exports,function(t){var i=e[s][1][t];return a(i?i:t)},d,d.exports,t,e,i,r)}return i[s].exports}for(var n="function"==typeof require&&require,s=0;s0},s.prototype.isLocalMode=function(){return this.localMode},s.prototype.isServerMode=function(){return!this.localMode},s.prototype.setupUpdateEvents=function(){this.events={PAGESIZE:"PAGESIZE",SORTING:"SORTING",SEARCH:"SEARCH",PAGINATION:"PAGINATION",DATA:"DATA",TOTALCOUNT:"TOTALCOUNT"}},s.prototype.initWatchers=function(){this.scope.$watch("grid.data",function(t,e){t!==e&&(this.isServerMode()&&this.react.loading&&(this.react.loading=!1),this.update(this.events.DATA,{data:t}))}.bind(this)),this.scope.$watch("grid.totalCount",function(t){t&&this.update(this.events.TOTALCOUNT,{totalCount:t})}.bind(this))},s.prototype.update=function(t,e){switch(t){case this.events.DATA:this.updateData(e);break;case this.events.PAGESIZE:this.updatePageSize(e);break;case this.events.PAGINATION:this.updatePagination(e);break;case this.events.SEARCH:this.updateSearch(e);break;case this.events.SORTING:this.updateSorting(e);break;case this.events.TOTALCOUNT:this.updateTotalCount(e)}this.render()},s.prototype.updateData=function(t,e){this.react.startIndex=(this.currentPage-1)*this.pageSize,this.react.endIndex=this.pageSize*this.currentPage,this.isLocalMode()?e?(this.data=t.data.slice(this.react.startIndex,this.react.endIndex),this.totalCount=t.data.length):(this.react.originalData=t.data.slice(0),this.totalCount=this.react.originalData.length,this.data=this.react.originalData.slice(this.react.startIndex,this.react.endIndex)):this.data=t.data,this.react.showingRecords=this.data.length,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.updatePageSize=function(t){this.pageSize=t.pageSize,this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updatePagination=function(t){this.currentPage=t.currentPage,this.updateData({data:this.isSearching()?this.react.filteredData:this.react.originalData},!0)},s.prototype.updateSearch=function(t){this.search=t.search,this.currentPage=1,this.updateData({data:t.data},!0)},s.prototype.updateSorting=function(t){this.sortInfo=t.sortInfo,t.data&&(this.currentPage=1,this.updateData({data:t.data},!0))},s.prototype.updateTotalCount=function(t){this.totalCount=t.totalCount,this.totalPages=Math.ceil(this.totalCount/this.pageSize)},s.prototype.render=function(){React.renderComponent(ngReactGridComponent({grid:this}),this.element[0])},e.exports=s},{"../vendors/miniUnderscore":10,"./NgReactGridEditManager":2,"./NgReactGridReactManager":3}],2:[function(t,e){var i=function(t){this.ngReactGrid=t,this.dataCopy=[]};i.prototype.mixinAPI=function(t){var e=this;t.edit=function(){e.edit.call(e)},t.save=function(){e.save.call(e)},t.cancel=function(){e.cancel.call(e)}},i.prototype.edit=function(){this.ngReactGrid.editing=!0,this.dataCopy=this.copyData(this.ngReactGrid.react.originalData),this.ngReactGrid.render()},i.prototype.save=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.render()},i.prototype.cancel=function(){this.ngReactGrid.editing=!1,this.ngReactGrid.update(this.ngReactGrid.events.DATA,{data:this.dataCopy}),this.ngReactGrid.render()},i.prototype.copyData=function(t){return JSON.parse(JSON.stringify(t))},e.exports=i},{}],3:[function(t,e){var i=function(t){this.ngReactGrid=t,this.showingRecords=0,this.startIndex=0,this.endIndex=0,this.originalData=[],this.filteredData=[],this.loading=!1,this.getObjectPropertyByString=i.getObjectPropertyByString};i.prototype.setPageSize=function(t){var e={pageSize:t,currentPage:1};this.ngReactGrid.isSearching()&&(e.data=this.filteredData),this.ngReactGrid.update(this.ngReactGrid.events.PAGESIZE,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.setSortField=function(t){var e={sortInfo:{field:t,dir:""}};e.sortInfo.dir=this.ngReactGrid.sortInfo.field!==t?"asc":"asc"===this.ngReactGrid.sortInfo.dir?"desc":"asc",this.ngReactGrid.isServerMode()?(this.ngReactGrid.update(this.ngReactGrid.events.SORTING,e),this.ngReactGrid.getData()):this.performLocalSort(e)},i.prototype.performLocalSort=function(t){var e;e=this.ngReactGrid.isSearching()?this.filteredData:this.originalData.slice(0);var i="asc"===t.sortInfo.dir;e.sort(function(e,r){var a=this.getObjectPropertyByString(e,t.sortInfo.field),n=this.getObjectPropertyByString(r,t.sortInfo.field);return i?n>=a?-1:1:a>=n?-1:1}.bind(this)),t.data=e,t.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SORTING,t)},i.prototype.deepSearch=function(t,e){var i=!1;if(t)for(var r in t)if(t.hasOwnProperty(r)){var a=t[r];if("object"==typeof a){if(i=this.deepSearch(a,e),i===!0)break}else if(-1!==String(t[r]).toLowerCase().indexOf(e)){i=!0;break}}return i},i.prototype.setSearch=function(t){var e={search:t};this.ngReactGrid.isLocalMode()?(t=String(t).toLowerCase(),this.filteredData=this.originalData.slice(0).filter(function(e){var i=!1;return i=this.deepSearch(e,t)}.bind(this)),e.data=this.filteredData,e.currentPage=1,this.ngReactGrid.update(this.ngReactGrid.events.SEARCH,e)):(this.ngReactGrid.search=t,this.ngReactGrid.getData())},i.prototype.goToPage=function(t){var e={currentPage:t};this.ngReactGrid.update(this.ngReactGrid.events.PAGINATION,e),this.ngReactGrid.isServerMode()&&this.ngReactGrid.getData()},i.prototype.rowClick=function(t){this.ngReactGrid.rowClick(t)},i.prototype.wrapFunctionsInAngular=function(t){for(var e in t.props)t.props.hasOwnProperty(e)&&("children"===e?this.wrapFunctionsInAngular(t.props[e]):"function"==typeof t.props[e]&&(t.props[e]=this.wrapWithRootScope(t.props[e])));return t},i.prototype.wrapWithRootScope=function(t){var e=this;return function(){var i=arguments,r=e.ngReactGrid.rootScope.$$phase;"$apply"==r||"$digest"==r?t.apply(null,i):e.ngReactGrid.rootScope.$apply(function(){t.apply(null,i)})}},i.getObjectPropertyByString=function(t,e){e=e.replace(/\[(\w+)\]/g,".$1"),e=e.replace(/^\./,"");for(var i=e.split(".");i.length;){var r=i.shift();if(!(null!=t&&r in t))return;t=t[r]}return t},i.updateObjectPropertyByString=function(t,e,i){for(var r=e.split("."),a=t,n=0;na;a++)if(e.call(r,t[a],a,t)===breaker)return}else for(var s=i.keys(t),a=0,n=s.length;n>a;a++)if(e.call(r,t[s[a]],s[a],t)===breaker)return;return t},slice:Array.prototype.slice,extend:function(t){return this.each(this.slice.call(arguments,1),function(e){if(e)for(var i in e)t[i]=e[i]}),t}};e.exports=i},{}]},{},[9]); \ No newline at end of file diff --git a/src/js/factories/ngReactGridSelectFieldFactory.js b/src/js/factories/ngReactGridSelectFieldFactory.js index 555a040..1c681d9 100644 --- a/src/js/factories/ngReactGridSelectFieldFactory.js +++ b/src/js/factories/ngReactGridSelectFieldFactory.js @@ -6,6 +6,7 @@ var ngReactGridSelectFieldFactory = function($rootScope) { this.record = record; this.field = field; this.updateNotification = updateNotification; + this.referenceData = referenceData; var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field); @@ -13,7 +14,20 @@ var ngReactGridSelectFieldFactory = function($rootScope) { }; ngReactGridSelectField.prototype.updateValue = function(newValue) { - NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, newValue); + + var updateValue = {}; + + for(var i in this.referenceData) { + var option = this.referenceData[i]; + + if(option.id == newValue) { + updateValue = option; + } + } + + console.debug(this.record, this.field, updateValue); + + NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, updateValue); if(this.updateNotification) { if($rootScope.$$phase) { diff --git a/src/jsx/reactGridSelectField.jsx b/src/jsx/reactGridSelectField.jsx index d8151bd..206b34f 100644 --- a/src/jsx/reactGridSelectField.jsx +++ b/src/jsx/reactGridSelectField.jsx @@ -9,14 +9,23 @@ var ngReactGridSelectFieldComponent = (function() { } }; }, + handleChange: function(e) { + var value = e.target.value; + this.props.updateValue(value); + this.setState({ + defaultValue: { + id: value + } + }); + }, componentWillReceiveProps: function(nextProps) { this.setState({ - defaultValue: nextProps.value + defaultValue: nextProps.value || {} }); }, componentWillMount: function() { this.setState({ - defaultValue: this.props.value + defaultValue: this.props.value || {} }); }, render: function() { @@ -32,7 +41,7 @@ var ngReactGridSelectFieldComponent = (function() { }); return ( - {options} )