66583bb4fb
adds filtering by task status (completion date, incomplete, completion) adds filtering by task metadata (task name, labels, members, due date) adds sorting by task name, labels, members, and due date
81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import styled from 'styled-components';
|
|
import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/components/Lists';
|
|
|
|
export const ActionsList = styled.ul`
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
`;
|
|
|
|
export const ActionItem = styled.li`
|
|
position: relative;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
&:hover {
|
|
background: rgb(115, 103, 240);
|
|
}
|
|
`;
|
|
|
|
export const ActionTitle = styled.span`
|
|
margin-left: 20px;
|
|
`;
|
|
|
|
const ActionItemSeparator = styled.li`
|
|
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
|
|
font-size: 12px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.25rem;
|
|
`;
|
|
|
|
type SortPopupProps = {
|
|
sorting: TaskSorting;
|
|
onChangeTaskSorting: (taskSorting: TaskSorting) => void;
|
|
};
|
|
|
|
const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) => {
|
|
const [currentSorting, setSorting] = useState(sorting);
|
|
const handleSetSorting = (s: TaskSorting) => {
|
|
setSorting(s);
|
|
onChangeTaskSorting(s);
|
|
};
|
|
return (
|
|
<ActionsList>
|
|
<ActionItem onClick={() => handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}>
|
|
<ActionTitle>None</ActionTitle>
|
|
</ActionItem>
|
|
<ActionItem
|
|
onClick={() => handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })}
|
|
>
|
|
<ActionTitle>Due date</ActionTitle>
|
|
</ActionItem>
|
|
<ActionItem
|
|
onClick={() => handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
|
|
>
|
|
<ActionTitle>Members</ActionTitle>
|
|
</ActionItem>
|
|
<ActionItem
|
|
onClick={() => handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
|
|
>
|
|
<ActionTitle>Labels</ActionTitle>
|
|
</ActionItem>
|
|
<ActionItem
|
|
onClick={() => handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
|
|
>
|
|
<ActionTitle>Task title</ActionTitle>
|
|
</ActionItem>
|
|
</ActionsList>
|
|
);
|
|
};
|
|
|
|
export default SortPopup;
|