//antd import { Transfer, Table } from "antd"; import difference from "lodash/difference"; //React import React, { useState } from "react"; //Redux import { connect } from "react-redux"; import { readAllUsers } from "../../Redux/Reducers/UserReducer"; import { readAllTechs } from "../../Redux/Reducers/TechReducer"; import { readProject } from "../../Redux/Reducers/ProjectReducer"; import { editProject } from "../../Redux/Actions/ProjectActions"; //Esto es la tabla y cómo se rellena const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => ( <Transfer {...restProps} showSelectAll={false}> {({ direction, filteredItems, onItemSelectAll, onItemSelect, selectedKeys: listSelectedKeys, disabled: listDisabled, }) => { const columns = direction === "left" ? leftColumns : rightColumns; const rowSelection = { getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled, }), onSelectAll(selected, selectedRows) { const treeSelectedKeys = selectedRows .filter((item) => !item.disabled) .map(({ key }) => key); const diffKeys = selected ? difference(treeSelectedKeys, listSelectedKeys) : difference(listSelectedKeys, treeSelectedKeys); onItemSelectAll(diffKeys, selected); }, onSelect({ key }, selected) { onItemSelect(key, selected); }, selectedRowKeys: listSelectedKeys, }; return ( <Table rowSelection={rowSelection} columns={columns} dataSource={filteredItems} size="small" style={{ pointerEvents: listDisabled ? "none" : null }} onRow={({ key, disabled: itemDisabled }) => ({ onClick: () => { if (itemDisabled || listDisabled) return; onItemSelect(key, !listSelectedKeys.includes(key)); }, })} /> ); }} </Transfer> ); //Contenido la tabla izquierda const leftTableColumns = [ { dataIndex: "nickname", title: "Nickname", } ]; //Contenido de la tabla derecha const rightTableColumns = [ { dataIndex: "nickname", title: "Nickname", }, ]; const TransferFormTeachers = ({ users, techs, project, editProject}) => { const rightUsers = users.filter(user => { return project.usuarios.profesores.map(up => {return up.id}).includes(user.id) }); const rightUsersKey = rightUsers.map(user => {return user.key}) const [state, setState] = useState({ targetKeys: rightUsersKey, disabled: false, showSearch: false, }); const { targetKeys } = state; const onChanged = (nextTargetKeys) => { setState({ targetKeys: nextTargetKeys }); project.usuarios.profesores=users.filter(user => { return nextTargetKeys.includes(user.id) }); editProject(project); }; return ( <div className="transferTableUsersTechs"> <TableTransfer dataSource={users} targetKeys={targetKeys} disabled={false} showSearch={true} onChange={onChanged} filterOption={(inputValue, item) => item.nickname.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 || item.apellidos.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 || item.nombre.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 } leftColumns={leftTableColumns} rightColumns={rightTableColumns} /> </div> ); }; const mapStateToProps = (state) => { return { users: readAllUsers(state), techs: readAllTechs(state), project: readProject(state) }; }; export default connect(mapStateToProps, {editProject})(TransferFormTeachers);