mirror of
https://github.com/plankanban/planka.git
synced 2025-07-24 07:39:44 +02:00
Add dropzone for attachment, paste attachment from clipboard
This commit is contained in:
Maksim Eltyshev
parent
693602698b
commit
d264382fda
24 changed files with 576 additions and 253 deletions
23
client/src/components/CardModal/AddAttachment.jsx
Normal file
23
client/src/components/CardModal/AddAttachment.jsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import React, { useCallback } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FilePicker } from '../../lib/custom-ui';
|
||||
|
||||
const AddAttachment = React.memo(({ children, onCreate }) => {
|
||||
const handleFileSelect = useCallback(
|
||||
(file) => {
|
||||
onCreate({
|
||||
file,
|
||||
});
|
||||
},
|
||||
[onCreate],
|
||||
);
|
||||
|
||||
return <FilePicker onSelect={handleFileSelect}>{children}</FilePicker>;
|
||||
});
|
||||
|
||||
AddAttachment.propTypes = {
|
||||
children: PropTypes.element.isRequired,
|
||||
onCreate: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default AddAttachment;
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
import React, { useCallback, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { closePopup } from '../../../lib/popup';
|
||||
|
||||
import { useModal } from '../../../hooks';
|
||||
import AddTextFileModal from './AddTextFileModal';
|
||||
|
||||
import styles from './AddAttachmentZone.module.css';
|
||||
|
||||
const AddAttachmentZone = React.memo(({ children, onCreate }) => {
|
||||
const [t] = useTranslation();
|
||||
const [modal, openModal, handleModalClose] = useModal();
|
||||
|
||||
const submit = useCallback(
|
||||
(file) => {
|
||||
onCreate({
|
||||
file,
|
||||
});
|
||||
},
|
||||
[onCreate],
|
||||
);
|
||||
|
||||
const handleDropAccepted = useCallback(
|
||||
(files) => {
|
||||
submit(files[0]);
|
||||
},
|
||||
[submit],
|
||||
);
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
multiple: false,
|
||||
noClick: true,
|
||||
noKeyboard: true,
|
||||
onDropAccepted: handleDropAccepted,
|
||||
});
|
||||
|
||||
const handleFileCreate = useCallback(
|
||||
(file) => {
|
||||
submit(file);
|
||||
},
|
||||
[submit],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handlePaste = (event) => {
|
||||
const item = event.clipboardData && event.clipboardData.items[0];
|
||||
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.kind === 'file') {
|
||||
submit(item.getAsFile());
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
['input', 'textarea'].includes(event.target.tagName.toLowerCase()) &&
|
||||
event.target === document.activeElement
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
closePopup();
|
||||
event.preventDefault();
|
||||
|
||||
item.getAsString((content) => {
|
||||
openModal({
|
||||
content,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('paste', handlePaste);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('paste', handlePaste);
|
||||
};
|
||||
}, [openModal, submit]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||
<div {...getRootProps()}>
|
||||
{isDragActive && <div className={styles.dropzone}>{t('common.dropFileToUpload')}</div>}
|
||||
{children}
|
||||
</div>
|
||||
{modal && (
|
||||
<AddTextFileModal
|
||||
content={modal.content}
|
||||
onCreate={handleFileCreate}
|
||||
onClose={handleModalClose}
|
||||
/>
|
||||
)}
|
||||
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||
<input {...getInputProps()} />
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
AddAttachmentZone.propTypes = {
|
||||
children: PropTypes.element.isRequired,
|
||||
onCreate: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default AddAttachmentZone;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.dropzone {
|
||||
background: white;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
opacity: 0.7;
|
||||
padding: 200px 50px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Form, Header, Modal } from 'semantic-ui-react';
|
||||
import { Input } from '../../../lib/custom-ui';
|
||||
|
||||
import { useForm } from '../../../hooks';
|
||||
|
||||
import styles from './AddTextFileModal.module.css';
|
||||
|
||||
const AddTextFileModal = React.memo(({ content, onCreate, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const [data, handleFieldChange] = useForm(() => ({
|
||||
name: '',
|
||||
}));
|
||||
|
||||
const nameField = useRef(null);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
const cleanData = {
|
||||
...data,
|
||||
name: data.name.trim(),
|
||||
};
|
||||
|
||||
if (!cleanData.name) {
|
||||
nameField.current.select();
|
||||
return;
|
||||
}
|
||||
|
||||
const file = new File([content], `${cleanData.name}.txt`, {
|
||||
type: 'plain/text',
|
||||
});
|
||||
|
||||
onCreate(file);
|
||||
onClose();
|
||||
}, [content, onCreate, onClose, data]);
|
||||
|
||||
useEffect(() => {
|
||||
nameField.current.select();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Modal open basic centered closeIcon size="tiny" onClose={onClose}>
|
||||
<Modal.Content>
|
||||
<Header inverted size="huge">
|
||||
{t('common.createTextFile', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Header>
|
||||
<p>{t('common.enterFilename')}</p>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Input
|
||||
fluid
|
||||
inverted
|
||||
ref={nameField}
|
||||
name="name"
|
||||
value={data.name}
|
||||
label=".txt"
|
||||
labelPosition="right"
|
||||
className={styles.field}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
<Button
|
||||
inverted
|
||||
color="green"
|
||||
icon="checkmark"
|
||||
content={t('action.createFile')}
|
||||
floated="right"
|
||||
/>
|
||||
</Form>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
AddTextFileModal.propTypes = {
|
||||
content: PropTypes.string.isRequired,
|
||||
onCreate: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default AddTextFileModal;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.field {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import AddAttachmentZone from './AddAttachmentZone';
|
||||
|
||||
export default AddAttachmentZone;
|
||||
|
|
@ -38,8 +38,11 @@
|
|||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 80px;
|
||||
overflow: hidden;
|
||||
padding: 0 20px 0 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,14 @@ import PropTypes from 'prop-types';
|
|||
import classNames from 'classnames';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Grid, Icon, Modal } from 'semantic-ui-react';
|
||||
import { FilePicker, Markdown } from '../../lib/custom-ui';
|
||||
import { Markdown } from '../../lib/custom-ui';
|
||||
|
||||
import NameField from './NameField';
|
||||
import EditDescription from './EditDescription';
|
||||
import Tasks from './Tasks';
|
||||
import Attachments from './Attachments';
|
||||
import AddAttachment from './AddAttachment';
|
||||
import AddAttachmentZone from './AddAttachmentZone';
|
||||
import Actions from './Actions';
|
||||
import User from '../User';
|
||||
import Label from '../Label';
|
||||
|
|
@ -107,15 +109,6 @@ const CardModal = React.memo(
|
|||
[onUpdate],
|
||||
);
|
||||
|
||||
const handleAttachmentFileSelect = useCallback(
|
||||
(file) => {
|
||||
onAttachmentCreate({
|
||||
file,
|
||||
});
|
||||
},
|
||||
[onAttachmentCreate],
|
||||
);
|
||||
|
||||
const handleToggleSubscribeClick = useCallback(() => {
|
||||
onUpdate({
|
||||
isSubscribed: !isSubscribed,
|
||||
|
|
@ -127,252 +120,258 @@ const CardModal = React.memo(
|
|||
|
||||
return (
|
||||
<Modal open closeIcon size="small" centered={false} onClose={onClose}>
|
||||
<Grid className={styles.grid}>
|
||||
<Grid.Row className={styles.headerPadding}>
|
||||
<Grid.Column width={16} className={styles.headerPadding}>
|
||||
<div className={styles.headerWrapper}>
|
||||
<Icon name="list alternate outline" className={styles.moduleIcon} />
|
||||
<div className={styles.headerTitle}>
|
||||
<NameField defaultValue={name} onUpdate={handleNameUpdate} />
|
||||
<AddAttachmentZone onCreate={onAttachmentCreate}>
|
||||
<Grid className={styles.grid}>
|
||||
<Grid.Row className={styles.headerPadding}>
|
||||
<Grid.Column width={16} className={styles.headerPadding}>
|
||||
<div className={styles.headerWrapper}>
|
||||
<Icon name="list alternate outline" className={styles.moduleIcon} />
|
||||
<div className={styles.headerTitle}>
|
||||
<NameField defaultValue={name} onUpdate={handleNameUpdate} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row className={styles.modalPadding}>
|
||||
<Grid.Column width={12} className={styles.contentPadding}>
|
||||
{(users.length > 0 || labels.length > 0 || dueDate || timer) && (
|
||||
<div className={styles.moduleWrapper}>
|
||||
{users.length > 0 && (
|
||||
<div className={styles.attachments}>
|
||||
<div className={styles.text}>
|
||||
{t('common.members', {
|
||||
context: 'title',
|
||||
})}
|
||||
</div>
|
||||
{users.map((user) => (
|
||||
<span key={user.id} className={styles.attachment}>
|
||||
<ProjectMembershipsPopup
|
||||
items={allProjectMemberships}
|
||||
currentUserIds={userIds}
|
||||
onUserSelect={onUserAdd}
|
||||
onUserDeselect={onUserRemove}
|
||||
>
|
||||
<User name={user.name} avatarUrl={user.avatarUrl} />
|
||||
</ProjectMembershipsPopup>
|
||||
</span>
|
||||
))}
|
||||
<ProjectMembershipsPopup
|
||||
items={allProjectMemberships}
|
||||
currentUserIds={userIds}
|
||||
onUserSelect={onUserAdd}
|
||||
onUserDeselect={onUserRemove}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(styles.attachment, styles.dueDate)}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row className={styles.modalPadding}>
|
||||
<Grid.Column width={12} className={styles.contentPadding}>
|
||||
{(users.length > 0 || labels.length > 0 || dueDate || timer) && (
|
||||
<div className={styles.moduleWrapper}>
|
||||
{users.length > 0 && (
|
||||
<div className={styles.attachments}>
|
||||
<div className={styles.text}>
|
||||
{t('common.members', {
|
||||
context: 'title',
|
||||
})}
|
||||
</div>
|
||||
{users.map((user) => (
|
||||
<span key={user.id} className={styles.attachment}>
|
||||
<ProjectMembershipsPopup
|
||||
items={allProjectMemberships}
|
||||
currentUserIds={userIds}
|
||||
onUserSelect={onUserAdd}
|
||||
onUserDeselect={onUserRemove}
|
||||
>
|
||||
<User name={user.name} avatarUrl={user.avatarUrl} />
|
||||
</ProjectMembershipsPopup>
|
||||
</span>
|
||||
))}
|
||||
<ProjectMembershipsPopup
|
||||
items={allProjectMemberships}
|
||||
currentUserIds={userIds}
|
||||
onUserSelect={onUserAdd}
|
||||
onUserDeselect={onUserRemove}
|
||||
>
|
||||
<Icon name="add" size="small" className={styles.addAttachment} />
|
||||
</button>
|
||||
</ProjectMembershipsPopup>
|
||||
</div>
|
||||
)}
|
||||
{labels.length > 0 && (
|
||||
<div className={styles.attachments}>
|
||||
<div className={styles.text}>
|
||||
{t('common.labels', {
|
||||
context: 'title',
|
||||
})}
|
||||
</div>
|
||||
{labels.map((label) => (
|
||||
<span key={label.id} className={styles.attachment}>
|
||||
<LabelsPopup
|
||||
key={label.id}
|
||||
items={allLabels}
|
||||
currentIds={labelIds}
|
||||
onSelect={onLabelAdd}
|
||||
onDeselect={onLabelRemove}
|
||||
onCreate={onLabelCreate}
|
||||
onUpdate={onLabelUpdate}
|
||||
onDelete={onLabelDelete}
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(styles.attachment, styles.dueDate)}
|
||||
>
|
||||
<Label name={label.name} color={label.color} />
|
||||
</LabelsPopup>
|
||||
</span>
|
||||
))}
|
||||
<LabelsPopup
|
||||
items={allLabels}
|
||||
currentIds={labelIds}
|
||||
onSelect={onLabelAdd}
|
||||
onDeselect={onLabelRemove}
|
||||
onCreate={onLabelCreate}
|
||||
onUpdate={onLabelUpdate}
|
||||
onDelete={onLabelDelete}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(styles.attachment, styles.dueDate)}
|
||||
>
|
||||
<Icon name="add" size="small" className={styles.addAttachment} />
|
||||
</button>
|
||||
</LabelsPopup>
|
||||
</div>
|
||||
)}
|
||||
{dueDate && (
|
||||
<div className={styles.attachments}>
|
||||
<div className={styles.text}>
|
||||
{t('common.dueDate', {
|
||||
context: 'title',
|
||||
})}
|
||||
<Icon name="add" size="small" className={styles.addAttachment} />
|
||||
</button>
|
||||
</ProjectMembershipsPopup>
|
||||
</div>
|
||||
<span className={styles.attachment}>
|
||||
<EditDueDatePopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
|
||||
<DueDate value={dueDate} />
|
||||
</EditDueDatePopup>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{timer && (
|
||||
<div className={styles.attachments}>
|
||||
<div className={styles.text}>
|
||||
{t('common.timer', {
|
||||
context: 'title',
|
||||
})}
|
||||
</div>
|
||||
<span className={styles.attachment}>
|
||||
<EditTimerPopup defaultValue={timer} onUpdate={handleTimerUpdate}>
|
||||
<Timer startedAt={timer.startedAt} total={timer.total} />
|
||||
</EditTimerPopup>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.contentModule}>
|
||||
<div className={styles.moduleWrapper}>
|
||||
<Icon name="align justify" className={styles.moduleIcon} />
|
||||
<div className={styles.moduleHeader}>{t('common.description')}</div>
|
||||
<EditDescription defaultValue={description} onUpdate={handleDescriptionUpdate}>
|
||||
{description ? (
|
||||
<button type="button" className={styles.descriptionText}>
|
||||
<Markdown linkStopPropagation source={description} linkTarget="_blank" />
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" className={styles.descriptionButton}>
|
||||
<span className={styles.descriptionButtonText}>
|
||||
{t('action.addMoreDetailedDescription')}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</EditDescription>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.contentModule}>
|
||||
<div className={styles.moduleWrapper}>
|
||||
<Icon name="check square outline" className={styles.moduleIcon} />
|
||||
<div className={styles.moduleHeader}>{t('common.tasks')}</div>
|
||||
<Tasks
|
||||
items={tasks}
|
||||
onCreate={onTaskCreate}
|
||||
onUpdate={onTaskUpdate}
|
||||
onDelete={onTaskDelete}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{attachments.length > 0 && (
|
||||
{labels.length > 0 && (
|
||||
<div className={styles.attachments}>
|
||||
<div className={styles.text}>
|
||||
{t('common.labels', {
|
||||
context: 'title',
|
||||
})}
|
||||
</div>
|
||||
{labels.map((label) => (
|
||||
<span key={label.id} className={styles.attachment}>
|
||||
<LabelsPopup
|
||||
key={label.id}
|
||||
items={allLabels}
|
||||
currentIds={labelIds}
|
||||
onSelect={onLabelAdd}
|
||||
onDeselect={onLabelRemove}
|
||||
onCreate={onLabelCreate}
|
||||
onUpdate={onLabelUpdate}
|
||||
onDelete={onLabelDelete}
|
||||
>
|
||||
<Label name={label.name} color={label.color} />
|
||||
</LabelsPopup>
|
||||
</span>
|
||||
))}
|
||||
<LabelsPopup
|
||||
items={allLabels}
|
||||
currentIds={labelIds}
|
||||
onSelect={onLabelAdd}
|
||||
onDeselect={onLabelRemove}
|
||||
onCreate={onLabelCreate}
|
||||
onUpdate={onLabelUpdate}
|
||||
onDelete={onLabelDelete}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(styles.attachment, styles.dueDate)}
|
||||
>
|
||||
<Icon name="add" size="small" className={styles.addAttachment} />
|
||||
</button>
|
||||
</LabelsPopup>
|
||||
</div>
|
||||
)}
|
||||
{dueDate && (
|
||||
<div className={styles.attachments}>
|
||||
<div className={styles.text}>
|
||||
{t('common.dueDate', {
|
||||
context: 'title',
|
||||
})}
|
||||
</div>
|
||||
<span className={styles.attachment}>
|
||||
<EditDueDatePopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
|
||||
<DueDate value={dueDate} />
|
||||
</EditDueDatePopup>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{timer && (
|
||||
<div className={styles.attachments}>
|
||||
<div className={styles.text}>
|
||||
{t('common.timer', {
|
||||
context: 'title',
|
||||
})}
|
||||
</div>
|
||||
<span className={styles.attachment}>
|
||||
<EditTimerPopup defaultValue={timer} onUpdate={handleTimerUpdate}>
|
||||
<Timer startedAt={timer.startedAt} total={timer.total} />
|
||||
</EditTimerPopup>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.contentModule}>
|
||||
<div className={styles.moduleWrapper}>
|
||||
<Icon name="attach" className={styles.moduleIcon} />
|
||||
<div className={styles.moduleHeader}>{t('common.attachments')}</div>
|
||||
<Attachments
|
||||
items={attachments}
|
||||
onUpdate={onAttachmentUpdate}
|
||||
onDelete={onAttachmentDelete}
|
||||
onCoverUpdate={handleCoverUpdate}
|
||||
<Icon name="align justify" className={styles.moduleIcon} />
|
||||
<div className={styles.moduleHeader}>{t('common.description')}</div>
|
||||
<EditDescription defaultValue={description} onUpdate={handleDescriptionUpdate}>
|
||||
{description ? (
|
||||
<button type="button" className={styles.descriptionText}>
|
||||
<Markdown linkStopPropagation source={description} linkTarget="_blank" />
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" className={styles.descriptionButton}>
|
||||
<span className={styles.descriptionButtonText}>
|
||||
{t('action.addMoreDetailedDescription')}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</EditDescription>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.contentModule}>
|
||||
<div className={styles.moduleWrapper}>
|
||||
<Icon name="check square outline" className={styles.moduleIcon} />
|
||||
<div className={styles.moduleHeader}>{t('common.tasks')}</div>
|
||||
<Tasks
|
||||
items={tasks}
|
||||
onCreate={onTaskCreate}
|
||||
onUpdate={onTaskUpdate}
|
||||
onDelete={onTaskDelete}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Actions
|
||||
items={actions}
|
||||
isFetching={isActionsFetching}
|
||||
isAllFetched={isAllActionsFetched}
|
||||
isEditable={isEditable}
|
||||
onFetch={onActionsFetch}
|
||||
onCommentCreate={onCommentActionCreate}
|
||||
onCommentUpdate={onCommentActionUpdate}
|
||||
onCommentDelete={onCommentActionDelete}
|
||||
/>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={4} className={styles.sidebarPadding}>
|
||||
<div className={styles.actions}>
|
||||
<span className={styles.actionsTitle}>{t('action.addToCard')}</span>
|
||||
<ProjectMembershipsPopup
|
||||
items={allProjectMemberships}
|
||||
currentUserIds={userIds}
|
||||
onUserSelect={onUserAdd}
|
||||
onUserDeselect={onUserRemove}
|
||||
>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="user outline" className={styles.actionIcon} />
|
||||
{t('common.members')}
|
||||
{attachments.length > 0 && (
|
||||
<div className={styles.contentModule}>
|
||||
<div className={styles.moduleWrapper}>
|
||||
<Icon name="attach" className={styles.moduleIcon} />
|
||||
<div className={styles.moduleHeader}>{t('common.attachments')}</div>
|
||||
<Attachments
|
||||
items={attachments}
|
||||
onUpdate={onAttachmentUpdate}
|
||||
onDelete={onAttachmentDelete}
|
||||
onCoverUpdate={handleCoverUpdate}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Actions
|
||||
items={actions}
|
||||
isFetching={isActionsFetching}
|
||||
isAllFetched={isAllActionsFetched}
|
||||
isEditable={isEditable}
|
||||
onFetch={onActionsFetch}
|
||||
onCommentCreate={onCommentActionCreate}
|
||||
onCommentUpdate={onCommentActionUpdate}
|
||||
onCommentDelete={onCommentActionDelete}
|
||||
/>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={4} className={styles.sidebarPadding}>
|
||||
<div className={styles.actions}>
|
||||
<span className={styles.actionsTitle}>{t('action.addToCard')}</span>
|
||||
<ProjectMembershipsPopup
|
||||
items={allProjectMemberships}
|
||||
currentUserIds={userIds}
|
||||
onUserSelect={onUserAdd}
|
||||
onUserDeselect={onUserRemove}
|
||||
>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="user outline" className={styles.actionIcon} />
|
||||
{t('common.members')}
|
||||
</Button>
|
||||
</ProjectMembershipsPopup>
|
||||
<LabelsPopup
|
||||
items={allLabels}
|
||||
currentIds={labelIds}
|
||||
onSelect={onLabelAdd}
|
||||
onDeselect={onLabelRemove}
|
||||
onCreate={onLabelCreate}
|
||||
onUpdate={onLabelUpdate}
|
||||
onDelete={onLabelDelete}
|
||||
>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="bookmark outline" className={styles.actionIcon} />
|
||||
{t('common.labels')}
|
||||
</Button>
|
||||
</LabelsPopup>
|
||||
<EditDueDatePopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="calendar check outline" className={styles.actionIcon} />
|
||||
{t('common.dueDate')}
|
||||
</Button>
|
||||
</EditDueDatePopup>
|
||||
<EditTimerPopup defaultValue={timer} onUpdate={handleTimerUpdate}>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="clock outline" className={styles.actionIcon} />
|
||||
{t('common.timer')}
|
||||
</Button>
|
||||
</EditTimerPopup>
|
||||
<AddAttachment onCreate={onAttachmentCreate}>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="attach" className={styles.actionIcon} />
|
||||
{t('common.attachment')}
|
||||
</Button>
|
||||
</AddAttachment>
|
||||
</div>
|
||||
<div className={styles.actions}>
|
||||
<span className={styles.actionsTitle}>{t('common.actions')}</span>
|
||||
<Button
|
||||
fluid
|
||||
className={styles.actionButton}
|
||||
onClick={handleToggleSubscribeClick}
|
||||
>
|
||||
<Icon name="paper plane outline" className={styles.actionIcon} />
|
||||
{isSubscribed ? t('action.unsubscribe') : t('action.subscribe')}
|
||||
</Button>
|
||||
</ProjectMembershipsPopup>
|
||||
<LabelsPopup
|
||||
items={allLabels}
|
||||
currentIds={labelIds}
|
||||
onSelect={onLabelAdd}
|
||||
onDeselect={onLabelRemove}
|
||||
onCreate={onLabelCreate}
|
||||
onUpdate={onLabelUpdate}
|
||||
onDelete={onLabelDelete}
|
||||
>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="bookmark outline" className={styles.actionIcon} />
|
||||
{t('common.labels')}
|
||||
</Button>
|
||||
</LabelsPopup>
|
||||
<EditDueDatePopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="calendar check outline" className={styles.actionIcon} />
|
||||
{t('common.dueDate')}
|
||||
</Button>
|
||||
</EditDueDatePopup>
|
||||
<EditTimerPopup defaultValue={timer} onUpdate={handleTimerUpdate}>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="clock outline" className={styles.actionIcon} />
|
||||
{t('common.timer')}
|
||||
</Button>
|
||||
</EditTimerPopup>
|
||||
<FilePicker onSelect={handleAttachmentFileSelect}>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="attach" className={styles.actionIcon} />
|
||||
{t('common.attachment')}
|
||||
</Button>
|
||||
</FilePicker>
|
||||
</div>
|
||||
<div className={styles.actions}>
|
||||
<span className={styles.actionsTitle}>{t('common.actions')}</span>
|
||||
<Button fluid className={styles.actionButton} onClick={handleToggleSubscribeClick}>
|
||||
<Icon name="paper plane outline" className={styles.actionIcon} />
|
||||
{isSubscribed ? t('action.unsubscribe') : t('action.subscribe')}
|
||||
</Button>
|
||||
<DeletePopup
|
||||
title={t('common.deleteCard', {
|
||||
context: 'title',
|
||||
})}
|
||||
content={t('common.areYouSureYouWantToDeleteThisCard')}
|
||||
buttonContent={t('action.deleteCard')}
|
||||
onConfirm={onDelete}
|
||||
>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="trash alternate outline" className={styles.actionIcon} />
|
||||
{t('action.delete')}
|
||||
</Button>
|
||||
</DeletePopup>
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
<DeletePopup
|
||||
title={t('common.deleteCard', {
|
||||
context: 'title',
|
||||
})}
|
||||
content={t('common.areYouSureYouWantToDeleteThisCard')}
|
||||
buttonContent={t('action.deleteCard')}
|
||||
onConfirm={onDelete}
|
||||
>
|
||||
<Button fluid className={styles.actionButton}>
|
||||
<Icon name="trash alternate outline" className={styles.actionIcon} />
|
||||
{t('action.delete')}
|
||||
</Button>
|
||||
</DeletePopup>
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</AddAttachmentZone>
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import isEmail from 'validator/lib/isEmail';
|
||||
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import isEmail from 'validator/lib/isEmail';
|
||||
import { Form, Grid, Header, Message } from 'semantic-ui-react';
|
||||
import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
|
||||
import { Input } from '../../lib/custom-ui';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import useField from './use-field';
|
||||
import useForm from './use-form';
|
||||
import useSteps from './use-steps';
|
||||
import useModal from './use-modal';
|
||||
import useClosableForm from './use-closable-form';
|
||||
|
||||
export { useField, useForm, useSteps, useClosableForm };
|
||||
export { useField, useForm, useSteps, useModal, useClosableForm };
|
||||
|
|
|
|||
15
client/src/hooks/use-modal.js
Normal file
15
client/src/hooks/use-modal.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { useCallback, useState } from 'react';
|
||||
|
||||
export default (initialParams) => {
|
||||
const [modal, setModal] = useState(() => initialParams);
|
||||
|
||||
const open = useCallback((params) => {
|
||||
setModal(params);
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setModal(null);
|
||||
}, []);
|
||||
|
||||
return [modal, open, handleClose];
|
||||
};
|
||||
|
|
@ -14,7 +14,7 @@ const createStep = (type, params = {}) => {
|
|||
export default (initialType, initialParams) => {
|
||||
const [step, setStep] = useState(() => createStep(initialType, initialParams));
|
||||
|
||||
const openStep = useCallback((type, params) => {
|
||||
const open = useCallback((type, params) => {
|
||||
setStep(createStep(type, params));
|
||||
}, []);
|
||||
|
||||
|
|
@ -22,5 +22,5 @@ export default (initialType, initialParams) => {
|
|||
setStep(null);
|
||||
}, []);
|
||||
|
||||
return [step, openStep, handleBack];
|
||||
return [step, open, handleBack];
|
||||
};
|
||||
|
|
|
|||
4
client/src/lib/custom-ui/index.css
vendored
4
client/src/lib/custom-ui/index.css
vendored
|
|
@ -34694,11 +34694,11 @@ select.ui.dropdown {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scrolling.dimmable > .dimmer {
|
||||
/* .scrolling.dimmable > .dimmer {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
} */
|
||||
|
||||
.scrolling.dimmable.dimmed > .dimmer {
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ export default {
|
|||
createLabel_title: 'Create Label',
|
||||
createNewOneOrSelectExistingOne: 'Create a new one or select<br />an existing one',
|
||||
createProject_title: 'Create Project',
|
||||
createTextFile_title: 'Create Text File',
|
||||
currentPassword: 'Current password',
|
||||
date: 'Date',
|
||||
dueDate: 'Due date',
|
||||
|
|
@ -55,6 +56,7 @@ export default {
|
|||
deleteTask_title: 'Delete Task',
|
||||
deleteUser_title: 'Delete User',
|
||||
description: 'Description',
|
||||
dropFileToUpload: 'Drop file to upload',
|
||||
editAttachment_title: 'Edit Attachment',
|
||||
editAvatar_title: 'Edit Avatar',
|
||||
editBoard_title: 'Edit Board',
|
||||
|
|
@ -69,6 +71,7 @@ export default {
|
|||
emailAlreadyInUse: 'E-mail already in use',
|
||||
enterCardTitle: 'Enter card title...',
|
||||
enterDescription: 'Enter description...',
|
||||
enterFilename: 'Enter filename',
|
||||
enterListTitle: 'Enter list title...',
|
||||
enterProjectTitle: 'Enter project title',
|
||||
enterTaskDescription: 'Enter task description...',
|
||||
|
|
@ -129,6 +132,7 @@ export default {
|
|||
addToCard: 'Add to card',
|
||||
addUser: 'Add user',
|
||||
createBoard: 'Create board',
|
||||
createFile: 'Create file',
|
||||
createLabel: 'Create label',
|
||||
createNewLabel: 'Create new label',
|
||||
createProject: 'Create project',
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ export default {
|
|||
createLabel: 'Создание метки',
|
||||
createNewOneOrSelectExistingOne: 'Создайте новую или выберите<br />уже существующую',
|
||||
createProject: 'Создание проекта',
|
||||
createTextFile: 'Создание текстового файла',
|
||||
currentPassword: 'Текущий пароль',
|
||||
date: 'Дата',
|
||||
dueDate: 'Срок',
|
||||
|
|
@ -59,6 +60,7 @@ export default {
|
|||
deleteTask: 'Удаление задачи',
|
||||
deleteUser: 'Удаление пользователя',
|
||||
description: 'Описание',
|
||||
dropFileToUpload: 'Перетяните файл, чтобы загрузить',
|
||||
editAttachment: 'Изменение вложения',
|
||||
editAvatar: 'Изменение аватара',
|
||||
editBoard: 'Изменение доски',
|
||||
|
|
@ -73,6 +75,7 @@ export default {
|
|||
emailAlreadyInUse: 'E-mail уже занят',
|
||||
enterCardTitle: 'Введите заголовок для этой карточки...',
|
||||
enterDescription: 'Введите описание...',
|
||||
enterFilename: 'Введите название файла',
|
||||
enterListTitle: 'Введите заголовок списка...',
|
||||
enterProjectTitle: 'Введите название проекта',
|
||||
enterTaskDescription: 'Введите описание задачи...',
|
||||
|
|
@ -133,6 +136,7 @@ export default {
|
|||
addToCard: 'Добавить на карточку',
|
||||
addUser: 'Добавить пользователя',
|
||||
createBoard: 'Создать доску',
|
||||
createFile: 'Создать файл',
|
||||
createLabel: 'Создать метку',
|
||||
createNewLabel: 'Создать новую метку',
|
||||
createProject: 'Создать проект',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue