Addíng code where copying from list works but from opened card does not.
Copying content on card does not work from any place.pull/705/head
Jens Frost
3 years ago
parent
b273a4f68b
commit
21fc0f560a
@ -0,0 +1,5 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import CardCopyStep from './CardCopyStep';
|
||||
|
||||
export default withPopup(CardCopyStep);
|
||||
@ -0,0 +1,169 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Dropdown, Form } from 'semantic-ui-react';
|
||||
import { Popup } from '../../lib/custom-ui';
|
||||
|
||||
import { useForm } from '../../hooks';
|
||||
|
||||
import styles from './CardCopyStep.module.scss';
|
||||
|
||||
const CardCopyStep = React.memo(
|
||||
({ projectsToLists, defaultPath, onTransfer, onBoardFetch, onBack, onClose, onCopyCard }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const [path, handleFieldChange] = useForm(() => ({
|
||||
projectId: null,
|
||||
boardId: null,
|
||||
listId: null,
|
||||
name: null,
|
||||
description: null,
|
||||
tasks: [],
|
||||
attachments: [],
|
||||
labels: [],
|
||||
users: [],
|
||||
...defaultPath,
|
||||
}));
|
||||
|
||||
const selectedProject = useMemo(
|
||||
() => projectsToLists.find((project) => project.id === path.projectId) || null,
|
||||
[projectsToLists, path.projectId],
|
||||
);
|
||||
|
||||
const selectedBoard = useMemo(
|
||||
() =>
|
||||
(selectedProject && selectedProject.boards.find((board) => board.id === path.boardId)) ||
|
||||
null,
|
||||
[selectedProject, path.boardId],
|
||||
);
|
||||
|
||||
const selectedList = useMemo(
|
||||
() => (selectedBoard && selectedBoard.lists.find((list) => list.id === path.listId)) || null,
|
||||
[selectedBoard, path.listId],
|
||||
);
|
||||
|
||||
const handleBoardIdChange = useCallback(
|
||||
(event, data) => {
|
||||
if (selectedProject.boards.find((board) => board.id === data.value).isFetching === null) {
|
||||
onBoardFetch(data.value);
|
||||
}
|
||||
|
||||
handleFieldChange(event, data);
|
||||
},
|
||||
[onBoardFetch, handleFieldChange, selectedProject],
|
||||
);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
if (selectedBoard.id !== defaultPath.boardId) {
|
||||
onTransfer(selectedBoard.id, selectedList.id);
|
||||
} else if (selectedList.id !== defaultPath.listId) {
|
||||
console.log('test');
|
||||
}
|
||||
|
||||
onCopyCard(selectedList.id, { name: 'test' }, false);
|
||||
onClose();
|
||||
}, [defaultPath, onTransfer, onClose, selectedBoard, selectedList, onCopyCard]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header onBack={onBack}>
|
||||
{t('action.copyCard', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<div className={styles.text}>{t('common.project')}</div>
|
||||
<Dropdown
|
||||
fluid
|
||||
selection
|
||||
name="projectId"
|
||||
options={projectsToLists.map((project) => ({
|
||||
text: project.name,
|
||||
value: project.id,
|
||||
}))}
|
||||
value={selectedProject && selectedProject.id}
|
||||
placeholder={
|
||||
projectsToLists.length === 0 ? t('common.noProjects') : t('common.selectProject')
|
||||
}
|
||||
disabled={projectsToLists.length === 0}
|
||||
className={styles.field}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
{selectedProject && (
|
||||
<>
|
||||
<div className={styles.text}>{t('common.board')}</div>
|
||||
<Dropdown
|
||||
fluid
|
||||
selection
|
||||
name="boardId"
|
||||
options={selectedProject.boards.map((board) => ({
|
||||
text: board.name,
|
||||
value: board.id,
|
||||
}))}
|
||||
value={selectedBoard && selectedBoard.id}
|
||||
placeholder={
|
||||
selectedProject.boards.length === 0
|
||||
? t('common.noBoards')
|
||||
: t('common.selectBoard')
|
||||
}
|
||||
disabled={selectedProject.boards.length === 0}
|
||||
className={styles.field}
|
||||
onChange={handleBoardIdChange}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{selectedBoard && (
|
||||
<>
|
||||
<div className={styles.text}>{t('common.list')}</div>
|
||||
<Dropdown
|
||||
fluid
|
||||
selection
|
||||
name="listId"
|
||||
options={selectedBoard.lists.map((list) => ({
|
||||
text: list.name,
|
||||
value: list.id,
|
||||
}))}
|
||||
value={selectedList && selectedList.id}
|
||||
placeholder={
|
||||
selectedBoard.isFetching === false && selectedBoard.lists.length === 0
|
||||
? t('common.noLists')
|
||||
: t('common.selectList')
|
||||
}
|
||||
loading={selectedBoard.isFetching !== false}
|
||||
disabled={selectedBoard.isFetching !== false || selectedBoard.lists.length === 0}
|
||||
className={styles.field}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
positive
|
||||
content={t('action.copy')} // change this action.copy
|
||||
disabled={(selectedBoard && selectedBoard.isFetching !== false) || !selectedList}
|
||||
/>
|
||||
</Form>
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
CardCopyStep.propTypes = {
|
||||
/* eslint-disable react/forbid-prop-types */
|
||||
projectsToLists: PropTypes.array.isRequired,
|
||||
defaultPath: PropTypes.object.isRequired,
|
||||
/* eslint-enable react/forbid-prop-types */
|
||||
// onMove: PropTypes.func.isRequired,
|
||||
onTransfer: PropTypes.func.isRequired,
|
||||
onBoardFetch: PropTypes.func.isRequired,
|
||||
onBack: PropTypes.func,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
onCopyCard: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
CardCopyStep.defaultProps = {
|
||||
onBack: undefined,
|
||||
};
|
||||
|
||||
export default CardCopyStep;
|
||||
@ -0,0 +1,12 @@
|
||||
:global(#app) {
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #444444;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
import CardCopyStep from './CardCopyStep';
|
||||
|
||||
export default CardCopyStep;
|
||||
@ -0,0 +1,109 @@
|
||||
import { ResizeObserver } from '@juggle/resize-observer';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
|
||||
|
||||
import styles from './Popup.module.css';
|
||||
|
||||
export default (WrappedComponent, defaultProps) => {
|
||||
const Popup = React.memo(({ children, ...props }) => {
|
||||
const [isOpened, setIsOpened] = useState(false);
|
||||
|
||||
const wrapper = useRef(null);
|
||||
const resizeObserver = useRef(null);
|
||||
|
||||
const handleOpen = useCallback(() => {
|
||||
setIsOpened(true);
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setIsOpened(false);
|
||||
}, []);
|
||||
|
||||
const handleMouseDown = useCallback((event) => {
|
||||
event.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleClick = useCallback((event) => {
|
||||
event.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleTriggerClick = useCallback(
|
||||
(event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
const { onClick } = children;
|
||||
|
||||
if (onClick) {
|
||||
onClick(event);
|
||||
}
|
||||
},
|
||||
[children],
|
||||
);
|
||||
|
||||
const handleContentRef = useCallback((element) => {
|
||||
if (resizeObserver.current) {
|
||||
resizeObserver.current.disconnect();
|
||||
}
|
||||
|
||||
if (!element) {
|
||||
resizeObserver.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
resizeObserver.current = new ResizeObserver(() => {
|
||||
if (resizeObserver.current.isInitial) {
|
||||
resizeObserver.current.isInitial = false;
|
||||
return;
|
||||
}
|
||||
|
||||
wrapper.current.positionUpdate();
|
||||
});
|
||||
|
||||
resizeObserver.current.isInitial = true;
|
||||
resizeObserver.current.observe(element);
|
||||
}, []);
|
||||
|
||||
const tigger = React.cloneElement(children, {
|
||||
onClick: handleTriggerClick,
|
||||
});
|
||||
|
||||
return (
|
||||
<SemanticUIPopup
|
||||
basic
|
||||
wide
|
||||
ref={wrapper}
|
||||
trigger={tigger}
|
||||
on="click"
|
||||
open={isOpened}
|
||||
position="bottom left"
|
||||
popperModifiers={[
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
boundariesElement: 'window',
|
||||
},
|
||||
},
|
||||
]}
|
||||
className={styles.wrapper}
|
||||
onOpen={handleOpen}
|
||||
onClose={handleClose}
|
||||
onMouseDown={handleMouseDown}
|
||||
onClick={handleClick}
|
||||
{...defaultProps} // eslint-disable-line react/jsx-props-no-spreading
|
||||
>
|
||||
<div ref={handleContentRef}>
|
||||
<Button icon="close" onClick={handleClose} className={styles.closeButton} />
|
||||
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||
<WrappedComponent {...props} onClose={handleClose} />
|
||||
</div>
|
||||
</SemanticUIPopup>
|
||||
);
|
||||
});
|
||||
|
||||
Popup.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
return Popup;
|
||||
};
|
||||
Loading…
Reference in New Issue