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

feature: add labels & remove old types

Browse Source
This commit is contained in:
Jordan Knott
2020-05-30 23:11:19 -05:00
parent 539259effd
commit 2a59cddadb
48 changed files with 1671 additions and 834 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/shared/components/PopupMenu/LabelEditor.tsx
View File

@ -5,7 +5,7 @@ import { SaveButton, DeleteButton, LabelBox, EditLabelForm, FieldLabel, FieldNam
type Props = {
labelColors: Array<LabelColor>;
label: Label | null;
label: ProjectLabel | null;
onLabelEdit: (labelId: string | null, labelName: string, labelColor: LabelColor) => void;
onLabelDelete?: (labelId: string) => void;
};
@ -32,7 +32,7 @@ const LabelManager = ({ labelColors, label, onLabelEdit, onLabelDelete }: Props)
onChange={e => {
setCurrentLabel(e.currentTarget.value);
}}
value={currentLabel}
value={currentLabel ?? ''}
/>
<FieldLabel>Select a color</FieldLabel>
<div>
@ -56,7 +56,7 @@ const LabelManager = ({ labelColors, label, onLabelEdit, onLabelDelete }: Props)
e.preventDefault();
console.log(currentColor);
if (currentColor) {
onLabelEdit(label ? label.labelId : null, currentLabel, currentColor);
onLabelEdit(label ? label.id : null, currentLabel ?? '', currentColor);
}
}}
/>
@ -66,7 +66,7 @@ const LabelManager = ({ labelColors, label, onLabelEdit, onLabelDelete }: Props)
type="submit"
onClick={e => {
e.preventDefault();
onLabelDelete(label.labelId);
onLabelDelete(label.id);
}}
/>
)}

26
web/src/shared/components/PopupMenu/LabelManager.tsx
View File

@ -14,12 +14,14 @@ import {
} from './Styles';
type Props = {
labels?: Label[];
labels?: Array<ProjectLabel>;
taskLabels?: Array<TaskLabel>;
onLabelToggle: (labelId: string) => void;
onLabelEdit: (labelId: string) => void;
onLabelCreate: () => void;
};
const LabelManager: React.FC<Props> = ({ labels, onLabelToggle, onLabelEdit, onLabelCreate }) => {
const LabelManager: React.FC<Props> = ({ labels, taskLabels, onLabelToggle, onLabelEdit, onLabelCreate }) => {
const $fieldName = useRef<HTMLInputElement>(null);
const [currentLabel, setCurrentLabel] = useState('');
const [currentSearch, setCurrentSearch] = useState('');
@ -44,27 +46,31 @@ const LabelManager: React.FC<Props> = ({ labels, onLabelToggle, onLabelEdit, onL
<Labels>
{labels &&
labels
.filter(label => currentSearch === '' || label.name.toLowerCase().startsWith(currentSearch.toLowerCase()))
.filter(
label =>
currentSearch === '' ||
(label.name && label.name.toLowerCase().startsWith(currentSearch.toLowerCase())),
)
.map(label => (
<Label key={label.labelId}>
<Label key={label.id}>
<LabelIcon
onClick={() => {
onLabelEdit(label.labelId);
onLabelEdit(label.id);
}}
>
<Pencil color="#c2c6dc" />
</LabelIcon>
<CardLabel
key={label.labelId}
key={label.id}
color={label.labelColor.colorHex}
active={currentLabel === label.labelId}
active={currentLabel === label.id}
onMouseEnter={() => {
setCurrentLabel(label.labelId);
setCurrentLabel(label.id);
}}
onClick={() => onLabelToggle(label.labelId)}
onClick={() => onLabelToggle(label.id)}
>
{label.name}
{label.active && (
{taskLabels && taskLabels.find(t => t.projectLabel.id === label.id) && (
<ActiveIcon>
<Checkmark color="#fff" />
</ActiveIcon>

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

@ -7,12 +7,13 @@ import ListActions from 'shared/components/ListActions';
import MemberManager from 'shared/components/MemberManager';
import DueDateManager from 'shared/components/DueDateManager';
import MiniProfile from 'shared/components/MiniProfile';
import styled from 'styled-components';
import PopupMenu, { PopupProvider, usePopup, Popup } from '.';
import styled from 'styled-components';
import produce from 'immer';
import NormalizeStyles from 'App/NormalizeStyles';
import BaseStyles from 'App/BaseStyles';
import produce from 'immer';
import PopupMenu, { PopupProvider, usePopup, Popup } from '.';
export default {
component: PopupMenu,
@ -24,28 +25,17 @@ export default {
],
},
};
const labelData = [
const labelData: Array<ProjectLabel> = [
{
labelId: 'development',
id: 'development',
name: 'Development',
createdDate: new Date().toString(),
labelColor: {
id: '1',
name: 'white',
colorHex: LabelColors.BLUE,
name: 'blue',
position: 1,
},
active: false,
},
{
labelId: 'general',
name: 'General',
labelColor: {
id: '1',
name: 'white',
colorHex: LabelColors.PINK,
position: 1,
},
active: false,
},
];
@ -74,9 +64,9 @@ const LabelManagerEditor = () => {
onLabelToggle={labelId => {
setLabels(
produce(labels, draftState => {
const idx = labels.findIndex(label => label.labelId === labelId);
const idx = labels.findIndex(label => label.id === labelId);
if (idx !== -1) {
draftState[idx] = { ...draftState[idx], active: !labels[idx].active };
draftState[idx] = { ...draftState[idx] };
}
}),
);
@ -86,13 +76,21 @@ const LabelManagerEditor = () => {
<Popup onClose={action('on close')} title="Edit label" tab={1}>
<LabelEditor
labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
label={labels.find(label => label.labelId === currentLabel) ?? null}
label={labels.find(label => label.id === currentLabel) ?? null}
onLabelEdit={(_labelId, name, color) => {
setLabels(
produce(labels, draftState => {
const idx = labels.findIndex(label => label.labelId === currentLabel);
const idx = labels.findIndex(label => label.id === currentLabel);
if (idx !== -1) {
draftState[idx] = { ...draftState[idx], name, labelColor: color };
draftState[idx] = {
...draftState[idx],
name,
labelColor: {
...draftState[idx].labelColor,
name: color.name ?? '',
colorHex: color.colorHex,
},
};
}
}),
);
@ -105,7 +103,20 @@ const LabelManagerEditor = () => {
label={null}
labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
onLabelEdit={(_labelId, name, color) => {
setLabels([...labels, { labelId: name, name, labelColor: color, active: false }]);
setLabels([
...labels,
{
id: name,
name,
createdDate: new Date().toString(),
labelColor: {
id: color.id,
colorHex: color.colorHex,
name: color.name ?? '',
position: 1,
},
},
]);
setTab(0);
}}
/>
@ -214,7 +225,12 @@ export const MemberManagerPopup = () => {
<PopupMenu title="Members" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
<MemberManager
availableMembers={[
{ userID: '1', displayName: 'Jordan Knott', profileIcon: { bgColor: null, url: null, initials: null } },
{
id: '1',
firstName: 'Jordan',
lastName: 'Knott',
profileIcon: { bgColor: null, url: null, initials: null },
},
]}
activeMembers={[]}
onMemberChange={action('member change')}
@ -251,26 +267,35 @@ export const DueDateManagerPopup = () => {
<PopupMenu title="Due Date" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
<DueDateManager
task={{
taskID: '1',
taskGroup: { name: 'General', taskGroupID: '1' },
id: '1',
taskGroup: { name: 'General', id: '1', position: 1 },
name: 'Hello, world',
position: 1,
labels: [
{
labelId: 'soft-skills',
labelColor: {
id: '1',
name: 'white',
colorHex: '#fff',
position: 1,
id: 'soft-skills',
assignedDate: new Date().toString(),
projectLabel: {
createdDate: new Date().toString(),
id: 'label-soft-skills',
name: 'Soft Skills',
labelColor: {
id: '1',
name: 'white',
colorHex: '#fff',
position: 1,
},
},
active: true,
name: 'Soft Skills',
},
],
description: 'hello!',
members: [
{ userID: '1', profileIcon: { bgColor: null, url: null, initials: null }, displayName: 'Jordan Knott' },
assigned: [
{
id: '1',
profileIcon: { bgColor: null, url: null, initials: null },
firstName: 'Jordan',
lastName: 'Knott',
},
],
}}
onCancel={action('cancel')}