diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/listEditor')
4 files changed, 174 insertions, 47 deletions
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx index e8d0fc2536..f6c906b56b 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx @@ -1,7 +1,24 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ import React from 'react'; -import FontAwesome from 'react-fontawesome'; +import classnames from 'classnames'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; import store from 'sdc-app/AppStore.js'; -import NotificationConstants from 'nfvo-components/notifications/NotificationConstants.js'; +import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; class ListEditorItem extends React.Component { static propTypes = { @@ -16,14 +33,14 @@ class ListEditorItem extends React.Component { let {onDelete, onSelect, onEdit, children, isReadOnlyMode} = this.props; let isAbilityToDelete = isReadOnlyMode === undefined ? true : !isReadOnlyMode; return ( - <div className='list-editor-item-view'> + <div className={classnames('list-editor-item-view', {'selectable': Boolean(onSelect)})} data-test-id='list-editor-item'> <div className='list-editor-item-view-content' onClick={onSelect}> {children} </div> - <div className='list-editor-item-view-controller'> - {onEdit && <FontAwesome name='sliders' onClick={() => this.onClickedItem(onEdit)}/>} - {onDelete && isAbilityToDelete && <FontAwesome name='trash-o' onClick={() => this.onClickedItem(onDelete)}/>} - </div> + {(onEdit || onDelete) && <div className='list-editor-item-view-controller'> + {onEdit && <SVGIcon name='sliders' onClick={() => this.onClickedItem(onEdit)}/>} + {onDelete && isAbilityToDelete && <SVGIcon name='trash-o' onClick={() => this.onClickedItem(onDelete)}/>} + </div>} </div> ); } @@ -33,8 +50,11 @@ class ListEditorItem extends React.Component { let {isCheckedOut} = this.props; if (isCheckedOut === false) { store.dispatch({ - type: NotificationConstants.NOTIFY_ERROR, - data: {title: 'Error', msg: 'This item is checkedin/submitted, Click Check Out to continue'} + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + title: i18n('Error'), + msg: i18n('This item is checkedin/submitted, Click Check Out to continue') + } }); } else { diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx new file mode 100644 index 0000000000..839f9a504a --- /dev/null +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx @@ -0,0 +1,24 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import React from 'react'; + +export const ListEditorItemViewField = ({children}) => ( + <div className='list-editor-item-view-field'> + {children} + </div> +); + +export default ListEditorItemViewField; diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx index 1ee91f31f6..cc805e9ada 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx @@ -1,12 +1,63 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ import React from 'react'; -import FontAwesome from 'react-fontawesome'; -import Input from 'react-bootstrap/lib/Input.js'; +import classnames from 'classnames'; +import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx'; +const ListEditorHeader = ({onAdd, isReadOnlyMode, title, plusButtonTitle}) => { + return ( + <div className='list-editor-view-header'> + {title && <div className='list-editor-view-title'>{title}</div>} + <div className={`list-editor-view-add-controller${isReadOnlyMode ? ' disabled' : ''}`}> + { onAdd && + <div className='list-editor-view-add-title' data-test-id='add-button' onClick={onAdd}> + <span>{`+ ${plusButtonTitle}`}</span> + </div> + } + </div> + </div> + ); +}; + +const ListEditorScroller = ({children, twoColumns}) => { + return ( + <div className='list-editor-view-list-scroller'> + <div className={classnames('list-editor-view-list', {'two-columns': twoColumns})}> + {children} + </div> + </div> + ); +}; + +const FilterWrapper = ({onFilter, filterValue}) => { + return ( + <div className='expandble-search-wrapper'> + <ExpandableInput + onChange={onFilter} + iconType='search' + value={filterValue}/> + </div> + ); +}; class ListEditorView extends React.Component { static defaultProps = { - className: '' + className: '', + twoColumns: false }; static propTypes = { @@ -17,45 +68,17 @@ class ListEditorView extends React.Component { onFilter: React.PropTypes.func, className: React.PropTypes.string, isReadOnlyMode: React.PropTypes.bool, - placeholder: React.PropTypes.string + placeholder: React.PropTypes.string, + twoColumns: React.PropTypes.bool }; render() { - let {title, plusButtonTitle, onAdd, children, filterValue, onFilter, className, placeholder, isReadOnlyMode} = this.props; + let {title, plusButtonTitle, onAdd, children, onFilter, className, isReadOnlyMode, twoColumns, filterValue} = this.props; return ( - <div className={`list-editor-view ${className}`}> - {title && onAdd && <div className='list-editor-view-title'>{title}</div>} - <div className='list-editor-view-actions'> - {title && !onAdd && <div className='list-editor-view-title-inline'>{title}</div>} - <div className={`list-editor-view-add-controller${isReadOnlyMode ? ' disabled' : ''}`} > - { onAdd && - <div onClick={onAdd}> - <span className='plus-icon-button pull-left'/> - <span>{plusButtonTitle}</span> - </div> - } - </div> - - { - onFilter && - <div className='list-editor-view-search search-wrapper'> - <Input - ref='filter' - type='text' - value={filterValue} - name='list-editor-view-search' - placeholder={placeholder} - groupClassName='search-input-control' - onChange={() => onFilter(this.refs.filter.getValue())}/> - <FontAwesome name='filter' className='filter-icon'/> - </div> - } - </div> - <div className='list-editor-view-list-scroller'> - <div className='list-editor-view-list'> - {children} - </div> - </div> + <div className={classnames('list-editor-view', className)}> + <ListEditorHeader onAdd={onAdd} isReadOnlyMode={isReadOnlyMode} plusButtonTitle={plusButtonTitle} title={title}/> + {onFilter && (children.length || filterValue) && <FilterWrapper onFilter={onFilter} filterValue={filterValue}/>} + <ListEditorScroller children={children} twoColumns={twoColumns}/> </div> ); } diff --git a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js new file mode 100644 index 0000000000..276b05e270 --- /dev/null +++ b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js @@ -0,0 +1,60 @@ +import React from 'react'; +import {storiesOf, action} from '@kadira/storybook'; +import ListEditorView from './ListEditorView.jsx'; +import ListEditorItemView from './ListEditorItemView.jsx'; +import ListEditorItemViewField from './ListEditorItemViewField.jsx'; +import {text, number} from '@kadira/storybook-addon-knobs'; +import {withKnobs} from '@kadira/storybook-addon-knobs'; + +function makeChildren({onEdit = false, onDelete = false} = {}) { + return ( + [...Array(number('Items', 2)).keys()].map(index => ( + <ListEditorItemView + key={index} + onEdit={onEdit ? onEdit : undefined} + onDelete={onDelete ? onDelete : undefined}> + <ListEditorItemViewField> + <div>{text('field 1', 'Lorum Ipsum')}</div> + </ListEditorItemViewField> + <ListEditorItemViewField> + <div>{text('field 2', 'Lorum Ipsum')}</div> + </ListEditorItemViewField> + </ListEditorItemView>) + ) + ); +} + +const stories = storiesOf('ListEditor', module); +stories.addDecorator(withKnobs); + +stories + .add('regular', () => ( + <ListEditorView title='List Editor'> + {makeChildren()} + </ListEditorView> + )) + .add('two columns', () => ( + <ListEditorView title='List Editor' twoColumns> + {makeChildren()} + </ListEditorView> + )) + .add('with add', () => ( + <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> + {makeChildren()} + </ListEditorView> + )) + .add('with delete', () => ( + <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> + {makeChildren({onDelete: action('onDelete')})} + </ListEditorView> + )) + .add('with edit', () => ( + <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> + {makeChildren({onEdit: action('onEdit')})} + </ListEditorView> + )) + .add('with edit and delete', () => ( + <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> + {makeChildren({onDelete: action('onDelete'), onEdit: action('onEdit')})} + </ListEditorView> + )); |