Listat.an
5 years ago
29 changed files with 543 additions and 86 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,5 +1,6 @@
@@ -1,5 +1,6 @@
|
||||
export default { |
||||
// apiUrl: 'http://c3ac9e7a.ngrok.io',
|
||||
apiUrl: 'http://127.0.0.1:1337', |
||||
// apiUrl: 'http://localhost:1337',
|
||||
// apiUrl: 'https://api-tasks.ubg.ua',
|
||||
apiUrl: 'http://api.ls', |
||||
}; |
||||
|
||||
@ -0,0 +1,213 @@
@@ -0,0 +1,213 @@
|
||||
import React, { Component } from 'react' |
||||
import PropTypes from 'prop-types' |
||||
import { Menu, Icon, Tooltip } from 'antd'; |
||||
const Item = Menu.Item; |
||||
const SubMenu = Menu.SubMenu; |
||||
import { connect } from 'react-redux' |
||||
import { setUserSelectedIds, setItemUser, showModalPermission, showModal, deleteUser } from '../../actions'; |
||||
import _ from 'lodash' |
||||
import { genTree, getPermissionCheck } from '../../../../lib/helper'; |
||||
import moment from 'moment' |
||||
import './style.scss' |
||||
import Modal from '../../../../components/Modal' |
||||
import { Button, ButtonToolbar } from 'reactstrap'; |
||||
|
||||
|
||||
class Contexmenu extends Component { |
||||
constructor(props) { |
||||
super(props) |
||||
this.state = { |
||||
visible: false, |
||||
warningDelete: false |
||||
} |
||||
|
||||
} |
||||
|
||||
componentWillMount() { |
||||
if(this.props.mode == 'horizontal'){ |
||||
return null; |
||||
} |
||||
if(this.props.selectedUserIds.indexOf(this.props.item) == -1) |
||||
this.props.setUserSelectedIds([this.props.item]) |
||||
} |
||||
|
||||
delete = () =>{ |
||||
this.props.deleteUser(this.props.selectedUserIds); |
||||
this.props.handleMenuClick(); |
||||
} |
||||
|
||||
componentDidMount() { |
||||
|
||||
if(this.props.mode == 'horizontal'){ |
||||
this.setState({visible: true}) |
||||
return null; |
||||
} |
||||
|
||||
var elem = document.getElementById('menu1').parentElement; |
||||
var menu = document.getElementById('menu1') |
||||
setTimeout(() => { |
||||
// console.log("TCL: Contexmenu -> componentDidMount -> menu", menu.clientHeight) |
||||
// console.log("TCL: Contexmenu -> componentDidMount -> menu", menu.clientWidth) |
||||
// console.log("TCL: Contexmenu -> componentDidMount -> this.menuRef", this.menuRef.current.clientHeight) |
||||
// console.log("TCL: Contexmenu -> componentDidMount -> this.menuRef", this.menuRef.current.clientWidth) |
||||
|
||||
let left = this.props.popup.left; |
||||
let top = this.props.popup.top; |
||||
|
||||
let clientHeight = document.body.clientHeight; |
||||
let clientWidth = document.body.clientWidth; |
||||
let menuW = 184; |
||||
let menuH = 385; |
||||
|
||||
if(menu.clientHeight > 0){ |
||||
menuH = menu.clientHeight; |
||||
} |
||||
|
||||
if(menu.clientWidth > 0){ |
||||
menuW = menu.clientWidth; |
||||
} |
||||
|
||||
|
||||
if((clientHeight - top) < menuH){ |
||||
top = top - menuH; |
||||
} |
||||
if((clientWidth - left) < menuW){ |
||||
left = left - menuW; |
||||
} |
||||
|
||||
elem.style.left = `${left}px`; |
||||
elem.style.top = `${top}px`; |
||||
this.setState({visible: true}) |
||||
}, 100); |
||||
} |
||||
|
||||
componentWillReceiveProps(nextProps) { |
||||
|
||||
|
||||
} |
||||
|
||||
componentWillUnmount() { |
||||
|
||||
} |
||||
|
||||
handleMenuClick = (e) => { |
||||
let {item, users, profile, selectedUserIds, mode} = this.props; |
||||
let user = {}; |
||||
|
||||
users.some(user_item => { |
||||
if(user_item.id == item){ |
||||
user = _.cloneDeep(user_item); |
||||
} |
||||
}); |
||||
|
||||
|
||||
switch (e.key) { |
||||
case 'update': |
||||
this.props.setItemUser(user); |
||||
this.props.showModal(true); |
||||
this.props.handleMenuClick(); |
||||
break; |
||||
|
||||
case 'delete': |
||||
// this.props.deleteUser(selectedUserIds) |
||||
this.setState({warningDelete: true}) |
||||
break; |
||||
case 'new': |
||||
this.props.setItemUser({factories: [], role: 'user'}); |
||||
this.props.showModal(true); |
||||
this.props.handleMenuClick(); |
||||
break; |
||||
|
||||
default: |
||||
this.props.handleMenuClick(); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
render() { |
||||
let {item, users, profile, selectedUserIds, mode} = this.props; |
||||
|
||||
|
||||
if(!mode){ |
||||
mode = "vertical"; |
||||
} |
||||
|
||||
// let isFavorite = selectedUserIds.some(item => { |
||||
// return profile && profile.favorites ? profile.favorites.indexOf(item) > -1 : false; |
||||
// }); |
||||
|
||||
|
||||
|
||||
|
||||
return ( |
||||
<div style={{visibility: this.state.visible ? 'visible' : 'hidden'}} id={mode == "vertical" ? "menu1" : "menu2"} ref={this.menuRef}> |
||||
<Modal |
||||
show={this.state.warningDelete} |
||||
toggle={() => {this.setState({warningDelete: false})}} |
||||
colored |
||||
header={false} |
||||
color="primary" |
||||
> |
||||
<div className="modal__body"> |
||||
<h4 style={{color: 'white'}}>Ви справді бажаєте видалити?</h4> |
||||
</div> |
||||
<ButtonToolbar className="modal__footer"> |
||||
<Button onClick={() => {this.setState({warningDelete: false})}}>Ні</Button>{' '} |
||||
<Button outline={true} color={"primary"} onClick={this.delete}>Так</Button> |
||||
</ButtonToolbar> |
||||
|
||||
</Modal> |
||||
|
||||
<Menu onClick={this.handleMenuClick} selectable={false} mode={mode || "vertical"}> |
||||
|
||||
|
||||
|
||||
{getPermissionCheck('user', 'update', profile) && selectedUserIds.length == 1 ? |
||||
<Item key='update'> |
||||
<Tooltip placement="bottom" title={mode != "vertical" ? ' Редагувати' : null}> |
||||
<i className="far fa-edit"></i>{mode == "vertical" ? ' Редагувати' : null} |
||||
</Tooltip> |
||||
</Item> |
||||
: null} |
||||
|
||||
<Item key='new'> |
||||
<Tooltip placement="bottom" title={mode != "vertical" ? ' Створити' : null}> |
||||
<i className="far fa-plus-square"></i>{mode == "vertical" ? ' Створити' : null} |
||||
</Tooltip> |
||||
</Item> |
||||
|
||||
{getPermissionCheck('user', 'destroy', profile) ? |
||||
<Item key='delete'> |
||||
<Tooltip placement="bottom" title={mode != "vertical" ? ' Видалити' : null}> |
||||
<i className="far fa-trash-alt"></i>{mode == "vertical" ? ' Видалити' : null} |
||||
</Tooltip> |
||||
</Item> |
||||
: null} |
||||
|
||||
|
||||
</Menu> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
|
||||
Contexmenu.propTypes = { |
||||
|
||||
} |
||||
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({ |
||||
selectedUserIds: state.user.user_selected_ids, |
||||
profile: state.auth.profile, |
||||
users: state.user.data, |
||||
}) |
||||
|
||||
const mapDispatchToProps = { |
||||
setUserSelectedIds, |
||||
setItemUser, |
||||
showModalPermission, |
||||
showModal, |
||||
deleteUser, |
||||
} |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Contexmenu) |
||||
@ -0,0 +1,14 @@
@@ -0,0 +1,14 @@
|
||||
#menu1{ |
||||
.ant-menu{ |
||||
// min-height: 184px; |
||||
border: 1px solid #e8e8e8; |
||||
// .ant-menu-item, .ant-menu-submenu-title{ |
||||
// margin-bottom: 4px; |
||||
// height: 20px !important; |
||||
// line-height: 20px !important; |
||||
// } |
||||
// .ant-menu-submenu-title{ |
||||
// margin-bottom: 8px; |
||||
// } |
||||
} |
||||
} |
||||
@ -0,0 +1,70 @@
@@ -0,0 +1,70 @@
|
||||
import React, { Component } from 'react' |
||||
import PropTypes from 'prop-types' |
||||
import Contexmenu from '../Contexmenu'; |
||||
import { Dropdown } from 'antd'; |
||||
|
||||
class Row extends Component { |
||||
constructor(props) { |
||||
super(props) |
||||
this.state = { |
||||
visible: false |
||||
} |
||||
this.myRef = React.createRef() |
||||
} |
||||
|
||||
componentWillMount() { |
||||
|
||||
} |
||||
|
||||
componentDidMount() { |
||||
} |
||||
|
||||
handleVisibleChange = (flag) => { |
||||
// this.setState({ visible: flag }); |
||||
this.props.setContentMenu(this.props['data-row-key'], flag) |
||||
} |
||||
|
||||
componentWillReceiveProps(nextProps) { |
||||
|
||||
} |
||||
|
||||
componentWillUnmount() { |
||||
|
||||
} |
||||
|
||||
handleMenuClick = (e) => { |
||||
|
||||
// this.setState({ visible: false }); |
||||
this.props.setContentMenu(this.props['data-row-key'], false) |
||||
} |
||||
|
||||
menu = (item) => { |
||||
return <Contexmenu |
||||
handleMenuClick={this.handleMenuClick} |
||||
popup={this.props.popup} |
||||
item={item} |
||||
/> |
||||
} |
||||
|
||||
render() { |
||||
let {contentMenu} = this.props; |
||||
return ( |
||||
<Dropdown |
||||
overlay={this.menu(this.props['data-row-key'])} |
||||
trigger={[`contextMenu`]} |
||||
onVisibleChange={this.handleVisibleChange} |
||||
visible={contentMenu[this.props['data-row-key']]} |
||||
ref={this.myRef} |
||||
// visible={this.state.visible} |
||||
> |
||||
<tr {...this.props} /> |
||||
</Dropdown> |
||||
) |
||||
} |
||||
} |
||||
|
||||
Row.propTypes = { |
||||
|
||||
} |
||||
|
||||
export default Row |
||||
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
.table-user tbody tr td:first-child{ |
||||
text-align: center; |
||||
} |
||||
Loading…
Reference in new issue