X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=skyquake%2Fplugins%2Fuser-management%2Fsrc%2Fdashboard%2Fdashboard.jsx;h=df28d2178b8430d3d0a0065e78144c17ebc314f7;hb=bca9d9cf04b3068c870c4fd45ca6cfc2fb79034d;hp=b5924ae0880f0eacadb6c9d5f5cf6185ae93e773;hpb=ba19ffdfd442c7ebe66f482b90f6bc65a0e9b8be;p=osm%2FUI.git diff --git a/skyquake/plugins/user-management/src/dashboard/dashboard.jsx b/skyquake/plugins/user-management/src/dashboard/dashboard.jsx index b5924ae08..df28d2178 100644 --- a/skyquake/plugins/user-management/src/dashboard/dashboard.jsx +++ b/skyquake/plugins/user-management/src/dashboard/dashboard.jsx @@ -29,8 +29,12 @@ class UserManagementDashboard extends React.Component { this.actions = this.state.actions; } componentDidUpdate() { - - ReactDOM.findDOMNode(this.UserList).addEventListener('transitionend', this.onTransitionEnd, false); + let self = this; + ReactDOM.findDOMNode(this.UserList).addEventListener('transitionend', this.onTransitionEnd, false); + setTimeout(function() { + let element = self[`user-ref-${self.state.activeIndex}`] + element && !isElementInView(element) && element.scrollIntoView({block: 'end', behavior: 'smooth'}); + }) } componentWillMount() { this.Store.listen(this.updateState); @@ -66,9 +70,14 @@ class UserManagementDashboard extends React.Component { this.actions.handleAddUser(); } viewUser = (un, index) => { - console.log(un) this.actions.viewUser(un, index); } + editUser = () => { + this.actions.editUser(false); + } + cancelEditUser = () => { + this.actions.editUser(true) + } closePanel = () => { this.actions.handleCloseUserPanel(); } @@ -100,16 +109,75 @@ class UserManagementDashboard extends React.Component { }); } } - + evaluateSubmit = (e) => { + if (e.keyCode == 13) { + if (this.props.isEdit) { + this.updateUser(e); + } else { + this.createUser(e); + } + e.preventDefault(); + e.stopPropagation(); + } + } onTransitionEnd = (e) => { this.actions.handleHideColumns(e); console.log('transition end') } + disableChange = (e) => { + let value = e.target.value; + value = value.toUpperCase(); + if (value=="TRUE") { + value = true; + } else { + value = false; + } + console.log(value) + } render() { let self = this; let html; let props = this.props; let state = this.state; + let passwordSectionHTML = null; + let formButtonsHTML = ( + + + + ); + if(!this.state.isReadOnly) { + passwordSectionHTML = ( this.state.isEdit ? + ( + + + + + + ) : + ( + + + + + ) + ); + formButtonsHTML = ( + state.isEdit ? + ( + + + + + + ) + : ( + + + + ) + ) + } + html = ( { this.UserList = div}} className={`column userList expanded ${this.state.userOpen ? 'collapsed ' : ' '} ${this.state.hideColumns ? 'hideColumns ' : ' '}`}> @@ -122,13 +190,13 @@ class UserManagementDashboard extends React.Component { Domain - {state.users.map((u, k) => { + {state.users && state.users.map((u, k) => { let platformRoles = []; for(let role in u.platformRoles) { platformRoles.push({`${role}: ${u.platformRoles[role]}`}) } return ( - + this[`user-ref-${k}`] = el} className={`tableRow tableRow--data ${((self.state.activeIndex == k) && self.state.userOpen) ? 'tableRow--data-active' : ''}`} key={k}> @@ -147,7 +215,7 @@ class UserManagementDashboard extends React.Component { - + : } - - + + + - + - + - { this.state.isEdit ? - ( - - - - - - ) : - ( - - - - - ) - } + {passwordSectionHTML} - - { - state.isEdit ? - ( - - - - - ) - : ( - - - - ) - } + {formButtonsHTML} + ); return html; @@ -232,7 +275,29 @@ UserManagementDashboard.defaultProps = { export default SkyquakeComponent(UserManagementDashboard); +function isElementInView(el) { + var rect = el && el.getBoundingClientRect() || {}; + + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ + rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ + ); +} + +// isReadOnly={state.isReadOnly} disabled={state.disabled} onChange={this.disableChange} + +class isDisabled extends React.Component { + constructor(props) { + super(props); + } + render() { + let props = this.props; + return () + } +} /** * AddItemFn: @@ -245,6 +310,7 @@ class InputCollection extends React.Component { buildTextInput(onChange, v, i) { return ( {inputType(v, i)} - Remove + { + props.readonly ? null : Remove} ) })} - Add + { props.readonly ? null : Add} ); return html;