Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature: add ability to assign tasks

Browse Source
This commit is contained in:
Jordan Knott
2020-04-19 22:02:55 -05:00
parent beaa215bc2
commit c38024e692
60 changed files with 2871 additions and 790 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx
View File

@ -2,6 +2,7 @@ import React, { createRef, useState } from 'react';
import styled from 'styled-components';
import DropdownMenu from '.';
import { action } from '@storybook/addon-actions';
export default {
component: DropdownMenu,
@ -49,7 +50,7 @@ export const Default = () => {
Click me
</Button>
</Container>
{menu.isOpen && <DropdownMenu left={menu.left} top={menu.top} />}
{menu.isOpen && <DropdownMenu onLogout={action('on logout')} left={menu.left} top={menu.top} />}
</>
);
};

5
web/src/shared/components/DropdownMenu/index.tsx
View File

@ -6,9 +6,10 @@ import { Separator, Container, WrapperDiamond, Wrapper, ActionsList, ActionItem,
type DropdownMenuProps = {
left: number;
top: number;
onLogout: () => void;
};
const DropdownMenu: React.FC<DropdownMenuProps> = ({ left, top }) => {
const DropdownMenu: React.FC<DropdownMenuProps> = ({ left, top, onLogout }) => {
return (
<Container left={left} top={top}>
<Wrapper>
@ -18,7 +19,7 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({ left, top }) => {
</ActionItem>
<Separator />
<ActionsList>
<ActionItem>
<ActionItem onClick={onLogout}>
<Exit size={16} color="#c2c6dc" />
<ActionTitle>Logout</ActionTitle>
</ActionItem>

2
web/src/shared/components/DueDateManager/DueDateManager.stories.tsx
View File

@ -23,7 +23,7 @@ export const Default = () => {
position: 1,
labels: [{ labelId: 'soft-skills', color: '#fff', active: true, name: 'Soft Skills' }],
description: 'hello!',
members: [{ userID: '1', displayName: 'Jordan Knott' }],
members: [{ userID: '1', profileIcon: { url: null, initials: null }, displayName: 'Jordan Knott' }],
}}
onCancel={action('cancel')}
onDueDateChange={action('due date change')}

2
web/src/shared/components/Login/index.tsx
View File

@ -55,7 +55,7 @@ const Login = ({ onSubmit }: LoginProps) => {
<FormLabel htmlFor="password">
Password
<FormTextInput
type="text"
type="password"
id="password"
name="password"
ref={register({ required: 'Password is required' })}

12
web/src/shared/components/PopupMenu/PopupMenu.stories.tsx
View File

@ -114,19 +114,15 @@ export const MemberManagerPopup = () => {
{popupData.isOpen && (
<PopupMenu title="Members" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
<MemberManager
availableMembers={[{ userID: '1', displayName: 'Jordan Knott' }]}
availableMembers={[
{ userID: '1', displayName: 'Jordan Knott', profileIcon: { url: null, initials: null } },
]}
activeMembers={[]}
onMemberChange={action('member change')}
/>
</PopupMenu>
)}
<span
style={{
width: '60px',
textAlign: 'center',
margin: '25px auto',
cursor: 'pointer',
}}
ref={$buttonRef}
onClick={() => {
if ($buttonRef && $buttonRef.current) {
@ -162,7 +158,7 @@ export const DueDateManagerPopup = () => {
position: 1,
labels: [{ labelId: 'soft-skills', color: '#fff', active: true, name: 'Soft Skills' }],
description: 'hello!',
members: [{ userID: '1', displayName: 'Jordan Knott' }],
members: [{ userID: '1', profileIcon: { url: null, initials: null }, displayName: 'Jordan Knott' }],
}}
onCancel={action('cancel')}
onDueDateChange={action('due date change')}

12
web/src/shared/components/ProjectGridItem/Styles.ts
View File

@ -4,27 +4,22 @@ import { mixin } from 'shared/utils/styles';
export const ProjectContent = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
`;
export const ProjectTitle = styled.span`
font-size: 18px;
font-weight: 700;
transition: transform 0.25s ease;
text-align: center;
`;
export const TeamTitle = styled.span`
margin-top: 5px;
font-size: 14px;
font-weight: normal;
text-align: center;
color: #c2c6dc;
`;
export const ProjectWrapper = styled.div<{ color: string }>`
display: flex;
align-items: center;
padding: 15px 25px;
border-radius: 20px;
${mixin.boxShadowCard}
@ -32,11 +27,10 @@ export const ProjectWrapper = styled.div<{ color: string }>`
color: #fff;
cursor: pointer;
margin: 0 10px;
width: 120px;
height: 120px;
align-items: center;
justify-content: center;
width: 240px;
height: 100px;
transition: transform 0.25s ease;
align-items: center;
&:hover {
transform: translateY(-5px);

2
web/src/shared/components/TaskDetails/TaskDetails.stories.tsx
View File

@ -35,7 +35,7 @@ export const Default = () => {
position: 1,
labels: [{ labelId: 'soft-skills', color: '#fff', active: true, name: 'Soft Skills' }],
description,
members: [{ userID: '1', displayName: 'Jordan Knott' }],
members: [{ userID: '1', profileIcon: { url: null, initials: null }, displayName: 'Jordan Knott' }],
}}
onTaskNameChange={action('task name change')}
onTaskDescriptionChange={(_task, desc) => setDescription(desc)}

13
web/src/shared/components/TaskDetails/index.tsx
View File

@ -97,9 +97,9 @@ type TaskDetailsProps = {
onTaskNameChange: (task: Task, newName: string) => void;
onTaskDescriptionChange: (task: Task, newDescription: string) => void;
onDeleteTask: (task: Task) => void;
onCloseModal: () => void;
onOpenAddMemberPopup: (task: Task, bounds: ElementBounds) => void;
onOpenAddLabelPopup: (task: Task, bounds: ElementBounds) => void;
onCloseModal: () => void;
};
const TaskDetails: React.FC<TaskDetailsProps> = ({
@ -112,6 +112,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
onOpenAddLabelPopup,
}) => {
const [editorOpen, setEditorOpen] = useState(false);
const [description, setDescription] = useState(task.description ?? '');
const [taskName, setTaskName] = useState(task.name);
const handleClick = () => {
setEditorOpen(!editorOpen);
@ -141,6 +142,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
onOpenAddLabelPopup(task, bounds);
}
};
console.log(task);
return (
<>
<TaskActions>
@ -172,9 +174,10 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
<TaskDetailsLabel>Description</TaskDetailsLabel>
{editorOpen ? (
<DetailsEditor
description={task.description ?? ''}
description={description}
onTaskDescriptionChange={newDescription => {
setEditorOpen(false);
setDescription(newDescription);
onTaskDescriptionChange(task, newDescription);
}}
onCancel={() => {
@ -182,7 +185,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
}}
/>
) : (
<TaskContent description={task.description ?? ''} onEditContent={handleClick} />
<TaskContent description={description} onEditContent={handleClick} />
)}
</TaskDetailsContent>
<TaskDetailsSidebar>
@ -190,10 +193,10 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
<TaskDetailAssignees>
{task.members &&
task.members.map(member => {
const initials = 'JK';
console.log(member);
return (
<TaskDetailAssignee key={member.userID}>
<ProfileIcon>{initials}</ProfileIcon>
<ProfileIcon>{member.profileIcon.initials ?? ''}</ProfileIcon>
</TaskDetailAssignee>
);
})}

10
web/src/shared/components/TopNavbar/TopNavbar.stories.tsx
View File

@ -37,8 +37,14 @@ export const Default = () => {
<>
<NormalizeStyles />
<BaseStyles />
<TopNavbar onNotificationClick={action('notifications click')} onProfileClick={onClick} />
{menu.isOpen && <DropdownMenu left={menu.left} top={menu.top} />}
<TopNavbar
firstName="Jordan"
lastName="Knott"
initials="JK"
onNotificationClick={action('notifications click')}
onProfileClick={onClick}
/>
{menu.isOpen && <DropdownMenu onLogout={action('on logout')} left={menu.left} top={menu.top} />}
</>
);
};

11
web/src/shared/components/TopNavbar/index.tsx
View File

@ -19,8 +19,11 @@ import {
type NavBarProps = {
onProfileClick: (bottom: number, right: number) => void;
onNotificationClick: () => void;
firstName: string;
lastName: string;
initials: string;
};
const NavBar: React.FC<NavBarProps> = ({ onProfileClick, onNotificationClick }) => {
const NavBar: React.FC<NavBarProps> = ({ onProfileClick, onNotificationClick, firstName, lastName, initials }) => {
const $profileRef: any = useRef(null);
const handleProfileClick = () => {
console.log('click');
@ -45,11 +48,13 @@ const NavBar: React.FC<NavBarProps> = ({ onProfileClick, onNotificationClick })
</NotificationContainer>
<ProfileContainer>
<ProfileNameWrapper>
<ProfileNamePrimary>Jordan Knott</ProfileNamePrimary>
<ProfileNamePrimary>
{firstName} {lastName}
</ProfileNamePrimary>
<ProfileNameSecondary>Manager</ProfileNameSecondary>
</ProfileNameWrapper>
<ProfileIcon ref={$profileRef} onClick={handleProfileClick}>
JK
{initials}
</ProfileIcon>
</ProfileContainer>
</GlobalActions>