From 5d1232724eec1750653a05f67c13c38173735ebf Mon Sep 17 00:00:00 2001 From: Jose Garcia Date: Tue, 8 Jul 2014 15:57:02 -0400 Subject: [PATCH] - 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} )