2019-08-31 04:07:25 +05:00
|
|
|
import React, { useCallback } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
|
|
|
|
import { closePopup } from '../../lib/popup';
|
|
|
|
|
|
|
|
import DroppableTypes from '../../constants/DroppableTypes';
|
|
|
|
import ListContainer from '../../containers/ListContainer';
|
|
|
|
import CardModalContainer from '../../containers/CardModalContainer';
|
|
|
|
import AddList from './AddList';
|
|
|
|
import Filter from './Filter';
|
|
|
|
import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
|
|
|
|
|
|
|
|
import styles from './Board.module.css';
|
|
|
|
|
2020-03-25 00:15:47 +05:00
|
|
|
const parseDndId = (dndId) => dndId.split(':')[1];
|
2019-08-31 04:07:25 +05:00
|
|
|
|
|
|
|
const Board = React.memo(
|
|
|
|
({
|
|
|
|
listIds,
|
|
|
|
filterUsers,
|
|
|
|
filterLabels,
|
|
|
|
allProjectMemberships,
|
|
|
|
allLabels,
|
|
|
|
isCardModalOpened,
|
|
|
|
onListCreate,
|
|
|
|
onListMove,
|
|
|
|
onCardMove,
|
|
|
|
onUserToFilterAdd,
|
|
|
|
onUserFromFilterRemove,
|
|
|
|
onLabelToFilterAdd,
|
|
|
|
onLabelFromFilterRemove,
|
|
|
|
onLabelCreate,
|
|
|
|
onLabelUpdate,
|
|
|
|
onLabelDelete,
|
|
|
|
}) => {
|
|
|
|
const [t] = useTranslation();
|
|
|
|
|
|
|
|
const handleDragStart = useCallback(() => {
|
|
|
|
closePopup();
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const handleDragEnd = useCallback(
|
2020-02-03 18:42:31 +05:00
|
|
|
({ draggableId, type, source, destination }) => {
|
2019-08-31 04:07:25 +05:00
|
|
|
if (
|
2020-02-03 18:42:31 +05:00
|
|
|
!destination ||
|
|
|
|
(source.droppableId === destination.droppableId && source.index === destination.index)
|
2019-08-31 04:07:25 +05:00
|
|
|
) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-10-10 02:51:54 +05:00
|
|
|
const id = parseDndId(draggableId);
|
2019-08-31 04:07:25 +05:00
|
|
|
|
|
|
|
switch (type) {
|
|
|
|
case DroppableTypes.LIST:
|
|
|
|
onListMove(id, destination.index);
|
|
|
|
|
|
|
|
break;
|
|
|
|
case DroppableTypes.CARD:
|
2019-10-10 02:51:54 +05:00
|
|
|
onCardMove(id, parseDndId(destination.droppableId), destination.index);
|
2019-08-31 04:07:25 +05:00
|
|
|
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
}
|
|
|
|
},
|
|
|
|
[onListMove, onCardMove],
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Filter
|
|
|
|
users={filterUsers}
|
|
|
|
labels={filterLabels}
|
|
|
|
allProjectMemberships={allProjectMemberships}
|
|
|
|
allLabels={allLabels}
|
|
|
|
onUserAdd={onUserToFilterAdd}
|
|
|
|
onUserRemove={onUserFromFilterRemove}
|
|
|
|
onLabelAdd={onLabelToFilterAdd}
|
|
|
|
onLabelRemove={onLabelFromFilterRemove}
|
|
|
|
onLabelCreate={onLabelCreate}
|
|
|
|
onLabelUpdate={onLabelUpdate}
|
|
|
|
onLabelDelete={onLabelDelete}
|
|
|
|
/>
|
|
|
|
<div className={styles.wrapper}>
|
|
|
|
<DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
|
|
|
|
<Droppable droppableId="board" type={DroppableTypes.LIST} direction="horizontal">
|
|
|
|
{({ innerRef, droppableProps, placeholder }) => (
|
|
|
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
|
|
<div {...droppableProps} data-drag-scroller ref={innerRef} className={styles.lists}>
|
|
|
|
{listIds.map((listId, index) => (
|
|
|
|
<ListContainer key={listId} id={listId} index={index} />
|
|
|
|
))}
|
|
|
|
{placeholder}
|
|
|
|
<div data-drag-scroller className={styles.list}>
|
|
|
|
<AddList onCreate={onListCreate}>
|
|
|
|
<button type="button" className={styles.addListButton}>
|
|
|
|
<PlusMathIcon className={styles.addListButtonIcon} />
|
|
|
|
<span className={styles.addListButtonText}>
|
|
|
|
{listIds.length > 0 ? t('action.addAnotherList') : t('action.addList')}
|
|
|
|
</span>
|
|
|
|
</button>
|
|
|
|
</AddList>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</Droppable>
|
|
|
|
</DragDropContext>
|
|
|
|
</div>
|
|
|
|
{isCardModalOpened && <CardModalContainer />}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
Board.propTypes = {
|
|
|
|
/* eslint-disable react/forbid-prop-types */
|
|
|
|
listIds: PropTypes.array.isRequired,
|
|
|
|
filterUsers: PropTypes.array.isRequired,
|
|
|
|
filterLabels: PropTypes.array.isRequired,
|
|
|
|
allProjectMemberships: PropTypes.array.isRequired,
|
|
|
|
allLabels: PropTypes.array.isRequired,
|
|
|
|
/* eslint-enable react/forbid-prop-types */
|
|
|
|
isCardModalOpened: PropTypes.bool.isRequired,
|
|
|
|
onListCreate: PropTypes.func.isRequired,
|
|
|
|
onListMove: PropTypes.func.isRequired,
|
|
|
|
onCardMove: PropTypes.func.isRequired,
|
|
|
|
onUserToFilterAdd: PropTypes.func.isRequired,
|
|
|
|
onUserFromFilterRemove: PropTypes.func.isRequired,
|
|
|
|
onLabelToFilterAdd: PropTypes.func.isRequired,
|
|
|
|
onLabelFromFilterRemove: PropTypes.func.isRequired,
|
|
|
|
onLabelCreate: PropTypes.func.isRequired,
|
|
|
|
onLabelUpdate: PropTypes.func.isRequired,
|
|
|
|
onLabelDelete: PropTypes.func.isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Board;
|