Implemented issue create modal, further polish
This commit is contained in:
ireic
@@ -1,12 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Button } from 'shared/components';
|
||||
|
||||
export const Actions = styled.div`
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
`;
|
||||
|
||||
export const FormButton = styled(Button)`
|
||||
margin-right: 6px;
|
||||
`;
|
||||
@@ -1,54 +0,0 @@
|
||||
import React, { useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Textarea } from 'shared/components';
|
||||
import { Actions, FormButton } from './Styles';
|
||||
|
||||
const propTypes = {
|
||||
value: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
isWorking: PropTypes.bool.isRequired,
|
||||
onSubmit: PropTypes.func.isRequired,
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsCommentsBodyForm = ({
|
||||
value,
|
||||
onChange,
|
||||
isWorking,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
}) => {
|
||||
const $textareaRef = useRef();
|
||||
return (
|
||||
<>
|
||||
<Textarea
|
||||
autoFocus
|
||||
placeholder="Add a comment..."
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
ref={$textareaRef}
|
||||
/>
|
||||
<Actions>
|
||||
<FormButton
|
||||
color="primary"
|
||||
working={isWorking}
|
||||
onClick={() => {
|
||||
if ($textareaRef.current.value.trim()) {
|
||||
onSubmit();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</FormButton>
|
||||
<FormButton color="empty" onClick={onCancel}>
|
||||
Cancel
|
||||
</FormButton>
|
||||
</Actions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectBoardIssueDetailsCommentsBodyForm.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsCommentsBodyForm;
|
||||
@@ -1,66 +0,0 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
import { color, font, mixin } from 'shared/utils/styles';
|
||||
import { Avatar } from 'shared/components';
|
||||
|
||||
export const Comment = styled.div`
|
||||
position: relative;
|
||||
margin-top: 25px;
|
||||
${font.size(15)}
|
||||
`;
|
||||
|
||||
export const UserAvatar = styled(Avatar)`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
`;
|
||||
|
||||
export const Content = styled.div`
|
||||
padding-left: 44px;
|
||||
`;
|
||||
|
||||
export const Username = styled.div`
|
||||
display: inline-block;
|
||||
padding-right: 12px;
|
||||
padding-bottom: 10px;
|
||||
color: ${color.textDark};
|
||||
${font.medium}
|
||||
`;
|
||||
|
||||
export const CreatedAt = styled.div`
|
||||
display: inline-block;
|
||||
padding-bottom: 10px;
|
||||
color: ${color.textDark};
|
||||
${font.size(14.5)}
|
||||
`;
|
||||
|
||||
export const Body = styled.p`
|
||||
padding-bottom: 10px;
|
||||
white-space: pre-wrap;
|
||||
`;
|
||||
|
||||
const actionLinkStyles = css`
|
||||
display: inline-block;
|
||||
padding: 2px 0;
|
||||
color: ${color.textMedium};
|
||||
${font.size(14.5)}
|
||||
${mixin.clickable}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`;
|
||||
|
||||
export const EditLink = styled.div`
|
||||
margin-right: 12px;
|
||||
${actionLinkStyles}
|
||||
`;
|
||||
|
||||
export const DeleteLink = styled.div`
|
||||
${actionLinkStyles}
|
||||
&:before {
|
||||
position: relative;
|
||||
right: 6px;
|
||||
content: '·';
|
||||
display: inline-block;
|
||||
}
|
||||
`;
|
||||
@@ -1,83 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import api from 'shared/utils/api';
|
||||
import toast from 'shared/utils/toast';
|
||||
import { formatDateTimeConversational } from 'shared/utils/dateTime';
|
||||
import { ConfirmModal } from 'shared/components';
|
||||
import BodyForm from '../BodyForm';
|
||||
import {
|
||||
Comment,
|
||||
UserAvatar,
|
||||
Content,
|
||||
Username,
|
||||
CreatedAt,
|
||||
Body,
|
||||
EditLink,
|
||||
DeleteLink,
|
||||
} from './Styles';
|
||||
|
||||
const propTypes = {
|
||||
comment: PropTypes.object.isRequired,
|
||||
fetchIssue: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsComment = ({ comment, fetchIssue }) => {
|
||||
const [isFormOpen, setFormOpen] = useState(false);
|
||||
const [isUpdating, setUpdating] = useState(false);
|
||||
const [body, setBody] = useState(comment.body);
|
||||
|
||||
const handleCommentDelete = async () => {
|
||||
try {
|
||||
await api.delete(`/comments/${comment.id}`);
|
||||
await fetchIssue();
|
||||
} catch (error) {
|
||||
toast.error(error);
|
||||
}
|
||||
};
|
||||
const handleCommentUpdate = async () => {
|
||||
try {
|
||||
setUpdating(true);
|
||||
await api.put(`/comments/${comment.id}`, { body });
|
||||
await fetchIssue();
|
||||
setUpdating(false);
|
||||
setFormOpen(false);
|
||||
} catch (error) {
|
||||
toast.error(error);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Comment>
|
||||
<UserAvatar name={comment.user.name} avatarUrl={comment.user.avatarUrl} />
|
||||
<Content>
|
||||
<Username>{comment.user.name}</Username>
|
||||
<CreatedAt>{formatDateTimeConversational(comment.createdAt)}</CreatedAt>
|
||||
{isFormOpen ? (
|
||||
<BodyForm
|
||||
value={body}
|
||||
onChange={setBody}
|
||||
isWorking={isUpdating}
|
||||
onSubmit={handleCommentUpdate}
|
||||
onCancel={() => setFormOpen(false)}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Body>{comment.body}</Body>
|
||||
<EditLink onClick={() => setFormOpen(true)}>Edit</EditLink>
|
||||
<ConfirmModal
|
||||
title="Are you sure you want to delete this comment?"
|
||||
message="Once you delete, it's gone for good."
|
||||
confirmText="Delete Comment"
|
||||
onConfirm={handleCommentDelete}
|
||||
renderLink={modal => <DeleteLink onClick={modal.open}>Delete</DeleteLink>}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Content>
|
||||
</Comment>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectBoardIssueDetailsComment.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsComment;
|
||||
@@ -1,27 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { color, font } from 'shared/utils/styles';
|
||||
|
||||
export const Tip = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 8px;
|
||||
color: ${color.textMedium};
|
||||
${font.size(13)}
|
||||
strong {
|
||||
padding-right: 4px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const TipLetter = styled.span`
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
color: ${color.textDarkest};
|
||||
background: ${color.backgroundMedium};
|
||||
${font.bold}
|
||||
${font.size(12)}
|
||||
`;
|
||||
@@ -1,35 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { KeyCodes } from 'shared/constants/keyCodes';
|
||||
import { isFocusedElementEditable } from 'shared/utils/dom';
|
||||
import { Tip, TipLetter } from './Style';
|
||||
|
||||
const propTypes = {
|
||||
setFormOpen: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsCommentsCreateProTip = ({ setFormOpen }) => {
|
||||
useEffect(() => {
|
||||
const handleKeyDown = event => {
|
||||
if (!isFocusedElementEditable() && event.keyCode === KeyCodes.M) {
|
||||
event.preventDefault();
|
||||
setFormOpen(true);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [setFormOpen]);
|
||||
|
||||
return (
|
||||
<Tip>
|
||||
<strong>Pro tip:</strong>press<TipLetter>M</TipLetter>to comment
|
||||
</Tip>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectBoardIssueDetailsCommentsCreateProTip.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsCommentsCreateProTip;
|
||||
@@ -1,31 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { color, font, mixin } from 'shared/utils/styles';
|
||||
import { Avatar } from 'shared/components';
|
||||
|
||||
export const Create = styled.div`
|
||||
position: relative;
|
||||
margin-top: 25px;
|
||||
${font.size(15)}
|
||||
`;
|
||||
|
||||
export const UserAvatar = styled(Avatar)`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
`;
|
||||
|
||||
export const Right = styled.div`
|
||||
padding-left: 44px;
|
||||
`;
|
||||
|
||||
export const FakeTextarea = styled.div`
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid ${color.borderLightest};
|
||||
color: ${color.textLight};
|
||||
${mixin.clickable}
|
||||
&:hover {
|
||||
border: 1px solid ${color.borderLight};
|
||||
}
|
||||
`;
|
||||
@@ -1,62 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import api from 'shared/utils/api';
|
||||
import useApi from 'shared/hooks/api';
|
||||
import toast from 'shared/utils/toast';
|
||||
import BodyForm from '../BodyForm';
|
||||
import ProTip from './ProTip';
|
||||
import { Create, UserAvatar, Right, FakeTextarea } from './Style';
|
||||
|
||||
const propTypes = {
|
||||
issueId: PropTypes.number.isRequired,
|
||||
fetchIssue: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsCommentsCreate = ({ issueId, fetchIssue }) => {
|
||||
const [isFormOpen, setFormOpen] = useState(false);
|
||||
const [isCreating, setCreating] = useState(false);
|
||||
const [body, setBody] = useState('');
|
||||
|
||||
const [{ data: currentUserData }] = useApi.get('/currentUser');
|
||||
const currentUser = currentUserData && currentUserData.currentUser;
|
||||
|
||||
const handleCommentCreate = async () => {
|
||||
try {
|
||||
setCreating(true);
|
||||
await api.post(`/comments`, { body, issueId, userId: currentUser.id });
|
||||
await fetchIssue();
|
||||
setFormOpen(false);
|
||||
setCreating(false);
|
||||
setBody('');
|
||||
} catch (error) {
|
||||
toast.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Create>
|
||||
{currentUser && <UserAvatar name={currentUser.name} avatarUrl={currentUser.avatarUrl} />}
|
||||
<Right>
|
||||
{isFormOpen ? (
|
||||
<BodyForm
|
||||
value={body}
|
||||
onChange={setBody}
|
||||
isWorking={isCreating}
|
||||
onSubmit={handleCommentCreate}
|
||||
onCancel={() => setFormOpen(false)}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<FakeTextarea onClick={() => setFormOpen(true)}>Add a comment...</FakeTextarea>
|
||||
<ProTip setFormOpen={setFormOpen} />
|
||||
</>
|
||||
)}
|
||||
</Right>
|
||||
</Create>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectBoardIssueDetailsCommentsCreate.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsCommentsCreate;
|
||||
@@ -1,12 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { font } from 'shared/utils/styles';
|
||||
|
||||
export const Comments = styled.div`
|
||||
padding-top: 40px;
|
||||
`;
|
||||
|
||||
export const Title = styled.div`
|
||||
${font.medium}
|
||||
${font.size(15)}
|
||||
`;
|
||||
@@ -1,27 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Create from './Create';
|
||||
import Comment from './Comment';
|
||||
import { Comments, Title } from './Styles';
|
||||
|
||||
const propTypes = {
|
||||
issue: PropTypes.object.isRequired,
|
||||
fetchIssue: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsComments = ({ issue, fetchIssue }) => (
|
||||
<Comments>
|
||||
<Title>Comments</Title>
|
||||
<Create issueId={issue.id} fetchIssue={fetchIssue} />
|
||||
{sortByNewestFirst(issue.comments).map(comment => (
|
||||
<Comment key={comment.id} comment={comment} fetchIssue={fetchIssue} />
|
||||
))}
|
||||
</Comments>
|
||||
);
|
||||
|
||||
const sortByNewestFirst = items => items.sort((a, b) => -a.createdAt.localeCompare(b.createdAt));
|
||||
|
||||
ProjectBoardIssueDetailsComments.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsComments;
|
||||
@@ -1,12 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { color, font } from 'shared/utils/styles';
|
||||
|
||||
export const Dates = styled.div`
|
||||
margin-top: 11px;
|
||||
padding-top: 13px;
|
||||
line-height: 22px;
|
||||
border-top: 1px solid ${color.borderLightest};
|
||||
color: ${color.textMedium};
|
||||
${font.size(13)}
|
||||
`;
|
||||
@@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { formatDateTimeConversational } from 'shared/utils/dateTime';
|
||||
import { Dates } from './Styles';
|
||||
|
||||
const propTypes = {
|
||||
issue: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsDates = ({ issue }) => (
|
||||
<Dates>
|
||||
<div>Created at {formatDateTimeConversational(issue.createdAt)}</div>
|
||||
<div>Updated at {formatDateTimeConversational(issue.updatedAt)}</div>
|
||||
</Dates>
|
||||
);
|
||||
|
||||
ProjectBoardIssueDetailsDates.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsDates;
|
||||
@@ -1,37 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import api from 'shared/utils/api';
|
||||
import toast from 'shared/utils/toast';
|
||||
import { Button, ConfirmModal } from 'shared/components';
|
||||
|
||||
const propTypes = {
|
||||
issue: PropTypes.object.isRequired,
|
||||
fetchProject: PropTypes.func.isRequired,
|
||||
modalClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsDelete = ({ issue, fetchProject, modalClose }) => {
|
||||
const handleIssueDelete = async () => {
|
||||
try {
|
||||
await api.delete(`/issues/${issue.id}`);
|
||||
await fetchProject();
|
||||
modalClose();
|
||||
} catch (error) {
|
||||
toast.error(error);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<ConfirmModal
|
||||
title="Are you sure you want to delete this issue?"
|
||||
message="Once you delete, it's gone for good."
|
||||
confirmText="Delete issue"
|
||||
onConfirm={handleIssueDelete}
|
||||
renderLink={modal => <Button icon="trash" iconSize={19} color="empty" onClick={modal.open} />}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectBoardIssueDetailsDelete.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsDelete;
|
||||
@@ -1,30 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { color, font, mixin } from 'shared/utils/styles';
|
||||
|
||||
export const Title = styled.div`
|
||||
padding: 20px 0 6px;
|
||||
${font.size(15)}
|
||||
${font.medium}
|
||||
`;
|
||||
|
||||
export const EmptyLabel = styled.div`
|
||||
margin-left: -7px;
|
||||
padding: 7px;
|
||||
border-radius: 3px;
|
||||
color: ${color.textMedium}
|
||||
transition: background 0.1s;
|
||||
${font.size(15)}
|
||||
${mixin.clickable}
|
||||
&:hover {
|
||||
background: ${color.backgroundLight};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Actions = styled.div`
|
||||
display: flex;
|
||||
padding-top: 12px;
|
||||
& > button {
|
||||
margin-right: 6px;
|
||||
}
|
||||
`;
|
||||
@@ -1,60 +0,0 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { getTextContentsFromHtmlString } from 'shared/utils/html';
|
||||
import { TextEditor, TextEditedContent, Button } from 'shared/components';
|
||||
import { Title, EmptyLabel, Actions } from './Styles';
|
||||
|
||||
const propTypes = {
|
||||
issue: PropTypes.object.isRequired,
|
||||
updateIssue: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsDescription = ({ issue, updateIssue }) => {
|
||||
const $editorRef = useRef();
|
||||
const [isPresenting, setPresenting] = useState(true);
|
||||
|
||||
const renderPresentingMode = () =>
|
||||
isDescriptionEmpty(issue.description) ? (
|
||||
<EmptyLabel onClick={() => setPresenting(false)}>Add a description...</EmptyLabel>
|
||||
) : (
|
||||
<TextEditedContent content={issue.description} onClick={() => setPresenting(false)} />
|
||||
);
|
||||
|
||||
const renderEditingMode = () => (
|
||||
<>
|
||||
<TextEditor
|
||||
placeholder="Describe the issue"
|
||||
defaultValue={issue.description}
|
||||
getEditor={editor => ($editorRef.current = editor)}
|
||||
/>
|
||||
<Actions>
|
||||
<Button
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
setPresenting(true);
|
||||
updateIssue({ description: $editorRef.current.getHTML() });
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button color="empty" onClick={() => setPresenting(true)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</Actions>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Title>Description</Title>
|
||||
{isPresenting ? renderPresentingMode() : renderEditingMode()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const isDescriptionEmpty = description =>
|
||||
getTextContentsFromHtmlString(description).trim().length === 0;
|
||||
|
||||
ProjectBoardIssueDetailsDescription.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsDescription;
|
||||
@@ -1,23 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { font } from 'shared/utils/styles';
|
||||
|
||||
export const FeedbackDropdown = styled.div`
|
||||
padding: 16px 24px 24px;
|
||||
`;
|
||||
|
||||
export const FeedbackImageCont = styled.div`
|
||||
padding: 24px 56px 20px;
|
||||
`;
|
||||
|
||||
export const FeedbackImage = styled.img`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const FeedbackParagraph = styled.p`
|
||||
margin-bottom: 12px;
|
||||
${font.size(15)}
|
||||
&:last-of-type {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
`;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
@@ -1,44 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Button, Tooltip } from 'shared/components';
|
||||
import feedbackImage from './assets/feedback.png';
|
||||
import { FeedbackDropdown, FeedbackImageCont, FeedbackImage, FeedbackParagraph } from './Styles';
|
||||
|
||||
const ProjectBoardIssueDetailsFeedback = () => (
|
||||
<Tooltip
|
||||
width={300}
|
||||
offset={{ top: -15 }}
|
||||
renderLink={linkProps => (
|
||||
<Button icon="feedback" color="empty" {...linkProps}>
|
||||
Give feedback
|
||||
</Button>
|
||||
)}
|
||||
renderContent={() => (
|
||||
<FeedbackDropdown>
|
||||
<FeedbackImageCont>
|
||||
<FeedbackImage src={feedbackImage} alt="Give feedback" />
|
||||
</FeedbackImageCont>
|
||||
<FeedbackParagraph>
|
||||
This simplified Jira clone is built with React on the front-end and Node/TypeScript on the
|
||||
back-end.
|
||||
</FeedbackParagraph>
|
||||
<FeedbackParagraph>
|
||||
{'Read more on our website or reach out via '}
|
||||
<a href="mailto:ivor@codetree.co">
|
||||
<strong>ivor@codetree.co</strong>
|
||||
</a>
|
||||
</FeedbackParagraph>
|
||||
<a href="https://codetree.co/" target="_blank" rel="noreferrer noopener">
|
||||
<Button color="primary">Visit Website</Button>
|
||||
</a>
|
||||
<a href="https://github.com/oldboyxx/jira_clone" target="_blank" rel="noreferrer noopener">
|
||||
<Button style={{ marginLeft: 10 }} icon="github">
|
||||
Github Repo
|
||||
</Button>
|
||||
</a>
|
||||
</FeedbackDropdown>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
export default ProjectBoardIssueDetailsFeedback;
|
||||
@@ -1,31 +0,0 @@
|
||||
import React from 'react';
|
||||
import ContentLoader from 'react-content-loader';
|
||||
|
||||
const IssueDetailsLoader = () => (
|
||||
<div style={{ padding: 40 }}>
|
||||
<ContentLoader
|
||||
height={260}
|
||||
width={940}
|
||||
speed={2}
|
||||
primaryColor="#f3f3f3"
|
||||
secondaryColor="#ecebeb"
|
||||
>
|
||||
<rect x="0" y="0" rx="3" ry="3" width="627" height="24" />
|
||||
<rect x="0" y="29" rx="3" ry="3" width="506" height="24" />
|
||||
<rect x="0" y="77" rx="3" ry="3" width="590" height="16" />
|
||||
<rect x="0" y="100" rx="3" ry="3" width="627" height="16" />
|
||||
<rect x="0" y="123" rx="3" ry="3" width="480" height="16" />
|
||||
<rect x="0" y="187" rx="3" ry="3" width="370" height="16" />
|
||||
<circle cx="18" cy="239" r="18" />
|
||||
<rect x="46" y="217" rx="3" ry="3" width="548" height="42" />
|
||||
<rect x="683" y="3" rx="3" ry="3" width="135" height="14" />
|
||||
<rect x="683" y="33" rx="3" ry="3" width="251" height="24" />
|
||||
<rect x="683" y="90" rx="3" ry="3" width="135" height="14" />
|
||||
<rect x="683" y="120" rx="3" ry="3" width="251" height="24" />
|
||||
<rect x="683" y="177" rx="3" ry="3" width="135" height="14" />
|
||||
<rect x="683" y="207" rx="3" ry="3" width="251" height="24" />
|
||||
</ContentLoader>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default IssueDetailsLoader;
|
||||
@@ -1,24 +0,0 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
import { color, font } from 'shared/utils/styles';
|
||||
|
||||
export const Priority = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
${props =>
|
||||
props.isValue &&
|
||||
css`
|
||||
padding: 3px 4px 3px 0px;
|
||||
border-radius: 4px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: ${color.backgroundLight};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export const Label = styled.div`
|
||||
text-transform: capitalize;
|
||||
padding: 0 3px 0 8px;
|
||||
${font.size(14.5)}
|
||||
`;
|
||||
@@ -1,44 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { invert } from 'lodash';
|
||||
|
||||
import { IssuePriority } from 'shared/constants/issues';
|
||||
import { Select, IssuePriorityIcon } from 'shared/components';
|
||||
import { Priority, Label } from './Styles';
|
||||
import { SectionTitle } from '../Styles';
|
||||
|
||||
const IssuePriorityCopy = invert(IssuePriority);
|
||||
|
||||
const propTypes = {
|
||||
issue: PropTypes.object.isRequired,
|
||||
updateIssue: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsPriority = ({ issue, updateIssue }) => {
|
||||
const renderPriorityItem = (priority, isValue) => (
|
||||
<Priority isValue={isValue}>
|
||||
<IssuePriorityIcon priority={priority} />
|
||||
<Label>{IssuePriorityCopy[priority].toLowerCase()}</Label>
|
||||
</Priority>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<SectionTitle>Priority</SectionTitle>
|
||||
<Select
|
||||
dropdownWidth={343}
|
||||
value={issue.priority}
|
||||
options={Object.values(IssuePriority).map(priority => ({
|
||||
value: priority,
|
||||
label: IssuePriorityCopy[priority],
|
||||
}))}
|
||||
onChange={priority => updateIssue({ priority })}
|
||||
renderValue={({ value }) => renderPriorityItem(value, true)}
|
||||
renderOption={({ value }) => renderPriorityItem(value)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectBoardIssueDetailsPriority.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsPriority;
|
||||
@@ -1,18 +0,0 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
import { issueStatusColors, issueStatusBackgroundColors, mixin } from 'shared/utils/styles';
|
||||
|
||||
export const Status = styled.div`
|
||||
text-transform: uppercase;
|
||||
transition: all 0.1s;
|
||||
${props => mixin.tag(issueStatusBackgroundColors[props.color], issueStatusColors[props.color])}
|
||||
${props =>
|
||||
props.isValue &&
|
||||
css`
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
`}
|
||||
`;
|
||||
@@ -1,40 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { IssueStatus, IssueStatusCopy } from 'shared/constants/issues';
|
||||
import { Select, Icon } from 'shared/components';
|
||||
import { Status } from './Styles';
|
||||
import { SectionTitle } from '../Styles';
|
||||
|
||||
const propTypes = {
|
||||
issue: PropTypes.object.isRequired,
|
||||
updateIssue: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsStatus = ({ issue, updateIssue }) => (
|
||||
<>
|
||||
<SectionTitle>Status</SectionTitle>
|
||||
<Select
|
||||
dropdownWidth={343}
|
||||
value={issue.status}
|
||||
options={Object.values(IssueStatus).map(status => ({
|
||||
value: status,
|
||||
label: IssueStatusCopy[status],
|
||||
}))}
|
||||
onChange={status => updateIssue({ status })}
|
||||
renderValue={({ value: status }) => (
|
||||
<Status isValue color={status}>
|
||||
<div>{IssueStatusCopy[status]}</div>
|
||||
<Icon type="chevron-down" size={18} />
|
||||
</Status>
|
||||
)}
|
||||
renderOption={({ value: status }) => (
|
||||
<Status color={status}>{IssueStatusCopy[status]}</Status>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
ProjectBoardIssueDetailsStatus.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsStatus;
|
||||
@@ -1,40 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { color, font } from 'shared/utils/styles';
|
||||
|
||||
export const Content = styled.div`
|
||||
display: flex;
|
||||
padding: 0 30px 60px;
|
||||
`;
|
||||
|
||||
export const Left = styled.div`
|
||||
width: 65%;
|
||||
padding-right: 50px;
|
||||
`;
|
||||
|
||||
export const Right = styled.div`
|
||||
width: 35%;
|
||||
padding-top: 5px;
|
||||
`;
|
||||
|
||||
export const TopActions = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 21px 18px 0;
|
||||
`;
|
||||
|
||||
export const TopActionsRight = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > * {
|
||||
margin-left: 4px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const SectionTitle = styled.div`
|
||||
margin: 24px 0 5px;
|
||||
text-transform: uppercase;
|
||||
color: ${color.textMedium};
|
||||
${font.size(12.5)}
|
||||
${font.bold}
|
||||
`;
|
||||
@@ -1,32 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { color, font } from 'shared/utils/styles';
|
||||
import { Textarea } from 'shared/components';
|
||||
|
||||
export const TitleTextarea = styled(Textarea)`
|
||||
margin: 18px 0 0 -8px;
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
textarea {
|
||||
padding: 7px 7px 8px;
|
||||
line-height: 1.28;
|
||||
border: none;
|
||||
resize: none;
|
||||
background: #fff;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
transition: background 0.1s;
|
||||
${font.size(24)}
|
||||
${font.medium}
|
||||
&:hover:not(:focus) {
|
||||
background: ${color.backgroundLight};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const ErrorText = styled.div`
|
||||
padding-top: 4px;
|
||||
color: ${color.danger};
|
||||
${font.size(13)}
|
||||
${font.medium}
|
||||
`;
|
||||
@@ -1,53 +0,0 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { KeyCodes } from 'shared/constants/keyCodes';
|
||||
import { is, generateErrors } from 'shared/utils/validation';
|
||||
import { TitleTextarea, ErrorText } from './Styles';
|
||||
|
||||
const propTypes = {
|
||||
issue: PropTypes.object.isRequired,
|
||||
updateIssue: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsTitle = ({ issue, updateIssue }) => {
|
||||
const $titleInputRef = useRef();
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const handleTitleChange = () => {
|
||||
setError(null);
|
||||
|
||||
const title = $titleInputRef.current.value;
|
||||
if (title === issue.title) return;
|
||||
|
||||
const errors = generateErrors({ title }, { title: [is.required(), is.maxLength(200)] });
|
||||
|
||||
if (errors.title) {
|
||||
setError(errors.title);
|
||||
} else {
|
||||
updateIssue({ title });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<TitleTextarea
|
||||
minRows={1}
|
||||
placeholder="Short summary"
|
||||
defaultValue={issue.title}
|
||||
ref={$titleInputRef}
|
||||
onBlur={handleTitleChange}
|
||||
onKeyDown={event => {
|
||||
if (event.keyCode === KeyCodes.ENTER) {
|
||||
event.target.blur();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{error && <ErrorText>{error}</ErrorText>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectBoardIssueDetailsTitle.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsTitle;
|
||||
@@ -1,81 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { color, font, mixin } from 'shared/utils/styles';
|
||||
import { Icon } from 'shared/components';
|
||||
|
||||
export const TrackingLink = styled.div`
|
||||
padding: 4px 4px 2px 0;
|
||||
border-radius: 4px;
|
||||
transition: background 0.1s;
|
||||
${mixin.clickable}
|
||||
&:hover {
|
||||
background: ${color.backgroundLight};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Tracking = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const WatchIcon = styled(Icon)`
|
||||
color: ${color.textMedium};
|
||||
`;
|
||||
|
||||
export const Right = styled.div`
|
||||
width: 90%;
|
||||
`;
|
||||
|
||||
export const BarCont = styled.div`
|
||||
height: 5px;
|
||||
border-radius: 4px;
|
||||
background: ${color.backgroundMedium};
|
||||
`;
|
||||
|
||||
export const Bar = styled.div`
|
||||
height: 5px;
|
||||
border-radius: 4px;
|
||||
background: ${color.primary};
|
||||
transition: all 0.1s;
|
||||
width: ${props => props.width}%;
|
||||
`;
|
||||
|
||||
export const Values = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 3px;
|
||||
${font.size(14.5)};
|
||||
`;
|
||||
|
||||
export const ModalContents = styled.div`
|
||||
padding: 20px 25px 25px;
|
||||
`;
|
||||
|
||||
export const ModalTitle = styled.div`
|
||||
padding-bottom: 14px;
|
||||
${font.medium}
|
||||
${font.size(20)}
|
||||
`;
|
||||
|
||||
export const Inputs = styled.div`
|
||||
display: flex;
|
||||
margin: 20px -5px 30px;
|
||||
`;
|
||||
|
||||
export const InputCont = styled.div`
|
||||
margin: 0 5px;
|
||||
width: 50%;
|
||||
`;
|
||||
|
||||
export const InputLabel = styled.div`
|
||||
padding-bottom: 5px;
|
||||
color: ${color.textMedium};
|
||||
${font.medium};
|
||||
${font.size(13)};
|
||||
`;
|
||||
|
||||
export const Actions = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
@@ -1,135 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { isNil } from 'lodash';
|
||||
|
||||
import { InputDebounced, Modal, Button } from 'shared/components';
|
||||
import {
|
||||
TrackingLink,
|
||||
Tracking,
|
||||
WatchIcon,
|
||||
Right,
|
||||
BarCont,
|
||||
Bar,
|
||||
Values,
|
||||
ModalContents,
|
||||
ModalTitle,
|
||||
Inputs,
|
||||
InputCont,
|
||||
InputLabel,
|
||||
Actions,
|
||||
} from './Styles';
|
||||
import { SectionTitle } from '../Styles';
|
||||
|
||||
const propTypes = {
|
||||
issue: PropTypes.object.isRequired,
|
||||
updateIssue: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsTracking = ({ issue, updateIssue }) => {
|
||||
const renderHourInput = fieldName => (
|
||||
<InputDebounced
|
||||
placeholder="Number"
|
||||
filter={/^\d{0,6}$/}
|
||||
value={isNil(issue[fieldName]) ? '' : issue[fieldName]}
|
||||
onChange={stringValue => {
|
||||
const value = stringValue.trim() ? Number(stringValue) : null;
|
||||
updateIssue({ [fieldName]: value });
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
const calculateTrackingBarWidth = () => {
|
||||
const { timeSpent, timeRemaining, estimate } = issue;
|
||||
|
||||
if (!timeSpent) {
|
||||
return 0;
|
||||
}
|
||||
if (isNil(timeRemaining) && isNil(estimate)) {
|
||||
return 100;
|
||||
}
|
||||
if (!isNil(timeRemaining)) {
|
||||
return (timeSpent / (timeSpent + timeRemaining)) * 100;
|
||||
}
|
||||
if (!isNil(estimate)) {
|
||||
return Math.min((timeSpent / estimate) * 100, 100);
|
||||
}
|
||||
};
|
||||
|
||||
const renderRemainingOrEstimate = () => {
|
||||
const { timeRemaining, estimate } = issue;
|
||||
|
||||
if (isNil(timeRemaining) && isNil(estimate)) {
|
||||
return null;
|
||||
}
|
||||
if (!isNil(timeRemaining)) {
|
||||
return <div>{`${timeRemaining}h remaining`}</div>;
|
||||
}
|
||||
if (!isNil(estimate)) {
|
||||
return <div>{`${estimate}h estimated`}</div>;
|
||||
}
|
||||
};
|
||||
|
||||
const renderTrackingPreview = (onClick = () => {}) => (
|
||||
<Tracking onClick={onClick}>
|
||||
<WatchIcon type="stopwatch" size={26} top={-1} />
|
||||
<Right>
|
||||
<BarCont>
|
||||
<Bar width={calculateTrackingBarWidth()} />
|
||||
</BarCont>
|
||||
<Values>
|
||||
<div>{issue.timeSpent ? `${issue.timeSpent}h logged` : 'No time logged'}</div>
|
||||
{renderRemainingOrEstimate()}
|
||||
</Values>
|
||||
</Right>
|
||||
</Tracking>
|
||||
);
|
||||
|
||||
const renderEstimate = () => (
|
||||
<>
|
||||
<SectionTitle>Original Estimate (hours)</SectionTitle>
|
||||
{renderHourInput('estimate')}
|
||||
</>
|
||||
);
|
||||
|
||||
const renderTracking = () => (
|
||||
<>
|
||||
<SectionTitle>Time Tracking</SectionTitle>
|
||||
<Modal
|
||||
width={400}
|
||||
renderLink={modal => <TrackingLink>{renderTrackingPreview(modal.open)}</TrackingLink>}
|
||||
renderContent={modal => (
|
||||
<ModalContents>
|
||||
<ModalTitle>Time tracking</ModalTitle>
|
||||
{renderTrackingPreview()}
|
||||
<Inputs>
|
||||
<InputCont>
|
||||
<InputLabel>Time spent (hours)</InputLabel>
|
||||
{renderHourInput('timeSpent')}
|
||||
</InputCont>
|
||||
<InputCont>
|
||||
<InputLabel>Time remaining (hours)</InputLabel>
|
||||
{renderHourInput('timeRemaining')}
|
||||
</InputCont>
|
||||
</Inputs>
|
||||
<Actions>
|
||||
<Button color="primary" onClick={modal.close}>
|
||||
Done
|
||||
</Button>
|
||||
</Actions>
|
||||
</ModalContents>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{renderEstimate()}
|
||||
{renderTracking()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectBoardIssueDetailsTracking.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsTracking;
|
||||
@@ -1,38 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { color, font, mixin } from 'shared/utils/styles';
|
||||
import { Button } from 'shared/components';
|
||||
|
||||
export const TypeButton = styled(Button)`
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: ${color.textMedium};
|
||||
${font.size(13)}
|
||||
`;
|
||||
|
||||
export const TypeDropdown = styled.div`
|
||||
padding-bottom: 6px;
|
||||
`;
|
||||
|
||||
export const TypeTitle = styled.div`
|
||||
padding: 10px 0 7px 12px;
|
||||
text-transform: uppercase;
|
||||
color: ${color.textMedium};
|
||||
${font.size(12)}
|
||||
`;
|
||||
|
||||
export const Type = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px 12px;
|
||||
${mixin.clickable}
|
||||
&:hover {
|
||||
background: ${color.backgroundLight};
|
||||
}
|
||||
`;
|
||||
|
||||
export const TypeLabel = styled.div`
|
||||
padding: 0 5px 0 7px;
|
||||
text-transform: capitalize;
|
||||
${font.size(15)}
|
||||
`;
|
||||
@@ -1,38 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { IssueType } from 'shared/constants/issues';
|
||||
import { IssueTypeIcon, Tooltip } from 'shared/components';
|
||||
import { TypeButton, TypeDropdown, TypeTitle, Type, TypeLabel } from './Styles';
|
||||
|
||||
const propTypes = {
|
||||
issue: PropTypes.object.isRequired,
|
||||
updateIssue: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsType = ({ issue, updateIssue }) => (
|
||||
<Tooltip
|
||||
width={150}
|
||||
offset={{ top: -15 }}
|
||||
renderLink={linkProps => (
|
||||
<TypeButton {...linkProps} color="empty" icon={<IssueTypeIcon type={issue.type} />}>
|
||||
{`${issue.type}-${issue.id}`}
|
||||
</TypeButton>
|
||||
)}
|
||||
renderContent={() => (
|
||||
<TypeDropdown>
|
||||
<TypeTitle>Change issue type</TypeTitle>
|
||||
{Object.values(IssueType).map(type => (
|
||||
<Type key={type} onClick={() => updateIssue({ type })}>
|
||||
<IssueTypeIcon type={type} top={1} />
|
||||
<TypeLabel>{type}</TypeLabel>
|
||||
</Type>
|
||||
))}
|
||||
</TypeDropdown>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
ProjectBoardIssueDetailsType.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsType;
|
||||
@@ -1,26 +0,0 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
import { color, font, mixin } from 'shared/utils/styles';
|
||||
|
||||
export const User = styled.div`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
${mixin.clickable}
|
||||
${props =>
|
||||
props.isSelectValue &&
|
||||
css`
|
||||
margin: 0 10px ${props.withBottomMargin ? 5 : 0}px 0;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: ${color.backgroundLight};
|
||||
transition: background 0.1s;
|
||||
&:hover {
|
||||
background: ${color.backgroundMedium};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export const Username = styled.div`
|
||||
padding: 0 3px 0 8px;
|
||||
${font.size(14.5)}
|
||||
`;
|
||||
@@ -1,83 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Avatar, Select, Icon } from 'shared/components';
|
||||
import { User, Username } from './Styles';
|
||||
import { SectionTitle } from '../Styles';
|
||||
|
||||
const propTypes = {
|
||||
issue: PropTypes.object.isRequired,
|
||||
updateIssue: PropTypes.func.isRequired,
|
||||
projectUsers: PropTypes.array.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetailsUsers = ({ issue, updateIssue, projectUsers }) => {
|
||||
const getUserById = userId => projectUsers.find(user => user.id === userId);
|
||||
|
||||
const userOptions = projectUsers.map(user => ({ value: user.id, label: user.name }));
|
||||
|
||||
const renderUserValue = (user, withBottomMargin, removeOptionValue) => (
|
||||
<User
|
||||
key={user.id}
|
||||
isSelectValue
|
||||
withBottomMargin={withBottomMargin}
|
||||
onClick={() => removeOptionValue && removeOptionValue(user.id)}
|
||||
>
|
||||
<Avatar avatarUrl={user.avatarUrl} name={user.name} size={24} />
|
||||
<Username>{user.name}</Username>
|
||||
{removeOptionValue && <Icon type="close" top={1} />}
|
||||
</User>
|
||||
);
|
||||
|
||||
const renderUserOption = user => (
|
||||
<User key={user.id}>
|
||||
<Avatar avatarUrl={user.avatarUrl} name={user.name} size={32} />
|
||||
<Username>{user.name}</Username>
|
||||
</User>
|
||||
);
|
||||
|
||||
const renderAssignees = () => (
|
||||
<>
|
||||
<SectionTitle>Assignees</SectionTitle>
|
||||
<Select
|
||||
isMulti
|
||||
dropdownWidth={343}
|
||||
placeholder="Unassigned"
|
||||
value={issue.userIds}
|
||||
options={userOptions}
|
||||
onChange={userIds => {
|
||||
updateIssue({ userIds, users: userIds.map(getUserById) });
|
||||
}}
|
||||
renderValue={({ value, removeOptionValue }) =>
|
||||
renderUserValue(getUserById(value), true, removeOptionValue)
|
||||
}
|
||||
renderOption={({ value }) => renderUserOption(getUserById(value))}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderReporter = () => (
|
||||
<>
|
||||
<SectionTitle>Reporter</SectionTitle>
|
||||
<Select
|
||||
dropdownWidth={343}
|
||||
value={issue.reporterId}
|
||||
options={userOptions}
|
||||
onChange={userId => updateIssue({ reporterId: userId })}
|
||||
renderValue={({ value }) => renderUserValue(getUserById(value), false)}
|
||||
renderOption={({ value }) => renderUserOption(getUserById(value))}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{renderAssignees()}
|
||||
{renderReporter()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectBoardIssueDetailsUsers.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetailsUsers;
|
||||
@@ -1,89 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import api from 'shared/utils/api';
|
||||
import useApi from 'shared/hooks/api';
|
||||
import { PageError, CopyLinkButton, Button } from 'shared/components';
|
||||
import Loader from './Loader';
|
||||
import Type from './Type';
|
||||
import Feedback from './Feedback';
|
||||
import Delete from './Delete';
|
||||
import Title from './Title';
|
||||
import Description from './Description';
|
||||
import Comments from './Comments';
|
||||
import Status from './Status';
|
||||
import Users from './Users';
|
||||
import Priority from './Priority';
|
||||
import Tracking from './Tracking';
|
||||
import Dates from './Dates';
|
||||
import { TopActions, TopActionsRight, Content, Left, Right } from './Styles';
|
||||
|
||||
const propTypes = {
|
||||
issueId: PropTypes.string.isRequired,
|
||||
projectUsers: PropTypes.array.isRequired,
|
||||
fetchProject: PropTypes.func.isRequired,
|
||||
updateLocalIssuesArray: PropTypes.func.isRequired,
|
||||
modalClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const ProjectBoardIssueDetails = ({
|
||||
issueId,
|
||||
projectUsers,
|
||||
fetchProject,
|
||||
updateLocalIssuesArray,
|
||||
modalClose,
|
||||
}) => {
|
||||
const [{ data, error, setLocalData }, fetchIssue] = useApi.get(`/issues/${issueId}`);
|
||||
|
||||
if (!data) return <Loader />;
|
||||
if (error) return <PageError />;
|
||||
|
||||
const { issue } = data;
|
||||
|
||||
const updateLocalIssue = fields =>
|
||||
setLocalData(currentData => ({ issue: { ...currentData.issue, ...fields } }));
|
||||
|
||||
const updateIssue = updatedFields => {
|
||||
api.optimisticUpdate({
|
||||
url: `/issues/${issueId}`,
|
||||
updatedFields,
|
||||
currentFields: issue,
|
||||
setLocalData: fields => {
|
||||
updateLocalIssue(fields);
|
||||
updateLocalIssuesArray(issue.id, fields);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<TopActions>
|
||||
<Type issue={issue} updateIssue={updateIssue} />
|
||||
<TopActionsRight>
|
||||
<Feedback />
|
||||
<CopyLinkButton color="empty" />
|
||||
<Delete issue={issue} fetchProject={fetchProject} modalClose={modalClose} />
|
||||
<Button icon="close" iconSize={24} color="empty" onClick={modalClose} />
|
||||
</TopActionsRight>
|
||||
</TopActions>
|
||||
<Content>
|
||||
<Left>
|
||||
<Title issue={issue} updateIssue={updateIssue} />
|
||||
<Description issue={issue} updateIssue={updateIssue} />
|
||||
<Comments issue={issue} fetchIssue={fetchIssue} />
|
||||
</Left>
|
||||
<Right>
|
||||
<Status issue={issue} updateIssue={updateIssue} />
|
||||
<Users issue={issue} updateIssue={updateIssue} projectUsers={projectUsers} />
|
||||
<Priority issue={issue} updateIssue={updateIssue} />
|
||||
<Tracking issue={issue} updateIssue={updateIssue} />
|
||||
<Dates issue={issue} />
|
||||
</Right>
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectBoardIssueDetails.propTypes = propTypes;
|
||||
|
||||
export default ProjectBoardIssueDetails;
|
||||
@@ -22,7 +22,7 @@ const ProjectBoardListsIssue = ({ projectUsers, issue, index }) => {
|
||||
<Draggable draggableId={issue.id.toString()} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<IssueLink
|
||||
to={`${match.url}/${issue.id}`}
|
||||
to={`${match.url}/issue/${issue.id}`}
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Route, useRouteMatch, useHistory } from 'react-router-dom';
|
||||
|
||||
import { Modal } from 'shared/components';
|
||||
import Header from './Header';
|
||||
import Filters from './Filters';
|
||||
import Lists from './Lists';
|
||||
import IssueDetails from './IssueDetails';
|
||||
|
||||
const propTypes = {
|
||||
project: PropTypes.object.isRequired,
|
||||
fetchProject: PropTypes.func.isRequired,
|
||||
updateLocalIssuesArray: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
@@ -21,11 +17,8 @@ const defaultFilters = {
|
||||
recent: false,
|
||||
};
|
||||
|
||||
const ProjectBoard = ({ project, fetchProject, updateLocalIssuesArray }) => {
|
||||
const match = useRouteMatch();
|
||||
const history = useHistory();
|
||||
const ProjectBoard = ({ project, updateLocalIssuesArray }) => {
|
||||
const [filters, setFilters] = useState(defaultFilters);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header projectName={project.name} />
|
||||
@@ -36,26 +29,6 @@ const ProjectBoard = ({ project, fetchProject, updateLocalIssuesArray }) => {
|
||||
setFilters={setFilters}
|
||||
/>
|
||||
<Lists project={project} filters={filters} updateLocalIssuesArray={updateLocalIssuesArray} />
|
||||
<Route
|
||||
path={`${match.path}/:issueId`}
|
||||
render={({ match: { params } }) => (
|
||||
<Modal
|
||||
isOpen
|
||||
width={1040}
|
||||
withCloseIcon={false}
|
||||
onClose={() => history.push(match.url)}
|
||||
renderContent={modal => (
|
||||
<IssueDetails
|
||||
issueId={params.issueId}
|
||||
projectUsers={project.users}
|
||||
fetchProject={fetchProject}
|
||||
updateLocalIssuesArray={updateLocalIssuesArray}
|
||||
modalClose={modal.close}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user