Merge 5f35bf3544 into 89c1ed71e1
Jens Frost
2 years ago
committed by
GitHub
commit
aae1a21c2c
@ -0,0 +1,5 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import CardCopyStep from './CardCopyStep';
|
||||
|
||||
export default withPopup(CardCopyStep);
|
||||
@ -0,0 +1,184 @@
|
||||
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';
|
||||
import store from '../../store';
|
||||
|
||||
const CardCopyStep = React.memo(
|
||||
({ projectsToLists, defaultPath, onBoardFetch, onBack, onClose, onCopyCard }) => {
|
||||
const [t] = useTranslation();
|
||||
// Get store to get value for description string
|
||||
const st = store.getState();
|
||||
|
||||
const keys = Object.keys(st.orm.Card.itemsById);
|
||||
if (defaultPath.description === undefined) {
|
||||
keys.forEach((key) => {
|
||||
if (key === defaultPath.id) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
defaultPath.description = st.orm.Card.itemsById[key].description;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (defaultPath.dueDate === null || defaultPath.dueDate === undefined) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
delete defaultPath.dueDate;
|
||||
}
|
||||
|
||||
const [path, handleFieldChange] = useForm(() => ({
|
||||
projectId: null,
|
||||
boardId: null,
|
||||
listId: null,
|
||||
name: defaultPath.name,
|
||||
description: defaultPath.description,
|
||||
tasks: defaultPath.tasks,
|
||||
attachments: defaultPath.attachments,
|
||||
labels: defaultPath.labels,
|
||||
users: defaultPath.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(() => {
|
||||
onCopyCard(selectedList.id, path);
|
||||
onClose();
|
||||
}, [onCopyCard, selectedList.id, path, onClose]);
|
||||
|
||||
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-next-line react/forbid-prop-types
|
||||
description: PropTypes.string,
|
||||
/* 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,
|
||||
description: 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,164 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from 'semantic-ui-react';
|
||||
import { Popup } from '../../lib/custom-ui';
|
||||
|
||||
import styles from './SortStep.module.scss';
|
||||
|
||||
const SortStep = React.memo(
|
||||
({ title, content, buttonContent, onBack, onConfirm, selectedOption, setSelectedOption }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const [checked, setChecked] = useState(false);
|
||||
|
||||
function handleChange(event) {
|
||||
setSelectedOption(event.target.id);
|
||||
}
|
||||
|
||||
const updateState = () => {
|
||||
if (checked) {
|
||||
setChecked(false);
|
||||
} else {
|
||||
setChecked(true);
|
||||
}
|
||||
};
|
||||
|
||||
function changeEvent(event) {
|
||||
handleChange(event);
|
||||
updateState();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header onBack={onBack}>
|
||||
{t(title, {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<div className={styles.content}>{t(content)}</div>
|
||||
<div>
|
||||
<label htmlFor="name">
|
||||
<input
|
||||
type="radio"
|
||||
id="name"
|
||||
name="sort"
|
||||
value="name"
|
||||
onChange={changeEvent}
|
||||
checked={selectedOption === 'name'}
|
||||
/>
|
||||
{t('action.sortByTitleList', {
|
||||
context: 'title',
|
||||
})}
|
||||
</label>
|
||||
<br />
|
||||
|
||||
<label htmlFor="id">
|
||||
<input
|
||||
type="radio"
|
||||
id="id"
|
||||
name="sort"
|
||||
value="id"
|
||||
onChange={changeEvent}
|
||||
checked={selectedOption === 'id'}
|
||||
/>
|
||||
{t('action.sortByIdList', {
|
||||
context: 'title',
|
||||
})}
|
||||
</label>
|
||||
<br />
|
||||
<label htmlFor="position">
|
||||
<input
|
||||
type="radio"
|
||||
id="position"
|
||||
name="sort"
|
||||
value="position"
|
||||
onChange={changeEvent}
|
||||
checked={selectedOption === 'position'}
|
||||
/>
|
||||
{t('action.sortByPositionList', {
|
||||
context: 'title',
|
||||
})}
|
||||
</label>
|
||||
<br />
|
||||
<label htmlFor="createdAt">
|
||||
<input
|
||||
type="radio"
|
||||
id="createdAt"
|
||||
name="sort"
|
||||
value="createdAt"
|
||||
onChange={changeEvent}
|
||||
checked={selectedOption === 'createdAt'}
|
||||
/>
|
||||
{t('action.sortByCreatedAt', {
|
||||
context: 'title',
|
||||
})}
|
||||
</label>
|
||||
<br />
|
||||
<label htmlFor="updatedAt">
|
||||
<input
|
||||
type="radio"
|
||||
id="updatedAt"
|
||||
name="sort"
|
||||
value="updatedAt"
|
||||
onChange={changeEvent}
|
||||
checked={selectedOption === 'updatedAt'}
|
||||
/>
|
||||
{t('action.sortByUpdatedAtList', {
|
||||
context: 'title',
|
||||
})}
|
||||
</label>
|
||||
<br />
|
||||
<label htmlFor="dueDate">
|
||||
<input
|
||||
type="radio"
|
||||
id="dueDate"
|
||||
name="sort"
|
||||
value="dueDate"
|
||||
onChange={changeEvent}
|
||||
checked={selectedOption === 'dueDate'}
|
||||
/>
|
||||
{t('action.sortByDueDateList', {
|
||||
context: 'title',
|
||||
})}
|
||||
</label>
|
||||
<br />
|
||||
<label htmlFor="creatorUserId">
|
||||
<input
|
||||
type="radio"
|
||||
id="creatorUserId"
|
||||
name="sort"
|
||||
value="creatorUserId"
|
||||
onChange={changeEvent}
|
||||
checked={selectedOption === 'creatorUserId'}
|
||||
/>
|
||||
{t('action.sortByCreatorUserIdList', {
|
||||
context: 'title',
|
||||
})}
|
||||
</label>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<Button fluid negative content={t(buttonContent)} onClick={onConfirm} />
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
SortStep.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
content: PropTypes.string.isRequired,
|
||||
buttonContent: PropTypes.string.isRequired,
|
||||
onConfirm: PropTypes.func.isRequired,
|
||||
onBack: PropTypes.func,
|
||||
selectedOption: PropTypes.string.isRequired,
|
||||
setSelectedOption: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
SortStep.defaultProps = {
|
||||
onBack: undefined,
|
||||
};
|
||||
|
||||
export default SortStep;
|
||||
@ -0,0 +1,7 @@
|
||||
:global(#app) {
|
||||
.content {
|
||||
color: #212121;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
import SortStep from './SortStep';
|
||||
|
||||
export default SortStep;
|
||||
@ -1,4 +1,5 @@
|
||||
import usePopup from './use-popup';
|
||||
import closePopup from './close-popup';
|
||||
import withPopup from './with-popup';
|
||||
|
||||
export { usePopup, closePopup };
|
||||
export { usePopup, closePopup, withPopup };
|
||||
|
||||
@ -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;
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue