@@ -779,16 +785,20 @@ function TaskDragOverlayCard({ task }: { task: TaskCard }) {
function QuickTaskComposer({
title,
+ priority,
saving,
columnName,
onTitleChange,
+ onPriorityChange,
onSubmit,
onCancel,
}: {
title: string;
+ priority: TaskPriority;
saving: boolean;
columnName: string;
onTitleChange: (value: string) => void;
+ onPriorityChange: (value: TaskPriority) => void;
onSubmit: () => void;
onCancel: () => void;
}) {
@@ -817,26 +827,51 @@ function QuickTaskComposer({
placeholder="Название задачи"
aria-label={`Название новой задачи в колонке ${columnName}`}
/>
-
-
-
+
+
+ {priorityOptions.map((option) => {
+ const selected = option.value === priority;
+ return (
+
+ );
+ })}
+
+
+
+
+
);
@@ -3286,6 +3321,7 @@ function TasksPageContent() {
const [taskModalOpen, setTaskModalOpen] = useState(false);
const [quickTaskTarget, setQuickTaskTarget] = useState
(null);
const [quickTaskTitle, setQuickTaskTitle] = useState("");
+ const [quickTaskPriority, setQuickTaskPriority] = useState("medium");
const [quickTaskSaving, setQuickTaskSaving] = useState(false);
const [taskParticipantsOpen, setTaskParticipantsOpen] = useState(false);
const [taskParticipantSearch, setTaskParticipantSearch] = useState("");
@@ -3294,6 +3330,7 @@ function TasksPageContent() {
const [participantModalSelection, setParticipantModalSelection] = useState([]);
const [taskMenuOpen, setTaskMenuOpen] = useState(false);
const [taskAddMenuOpen, setTaskAddMenuOpen] = useState(false);
+ const [taskAddMenuPlacement, setTaskAddMenuPlacement] = useState<"top" | "bottom">("top");
const [taskAddPanel, setTaskAddPanel] = useState(null);
const [viewTaskDueDateDraft, setViewTaskDueDateDraft] = useState("");
const [viewColumnMenuOpen, setViewColumnMenuOpen] = useState(false);
@@ -3390,6 +3427,7 @@ function TasksPageContent() {
const boardActionsMenuRef = useRef(null);
const taskMenuRef = useRef(null);
const taskAddMenuRef = useRef(null);
+ const taskAddMenuBottomRef = useRef(null);
const viewColumnMenuRef = useRef(null);
const cardMenuRef = useRef(null);
const columnMenuRef = useRef(null);
@@ -3992,9 +4030,12 @@ function TasksPageContent() {
if (!taskAddMenuOpen) return undefined;
function handlePointerDown(event: MouseEvent) {
+ const activeMenuRef = taskAddMenuPlacement === "bottom"
+ ? taskAddMenuBottomRef
+ : taskAddMenuRef;
if (
- taskAddMenuRef.current
- && !taskAddMenuRef.current.contains(event.target as Node)
+ activeMenuRef.current
+ && !activeMenuRef.current.contains(event.target as Node)
) {
setTaskAddMenuOpen(false);
}
@@ -4002,7 +4043,7 @@ function TasksPageContent() {
document.addEventListener("mousedown", handlePointerDown);
return () => document.removeEventListener("mousedown", handlePointerDown);
- }, [taskAddMenuOpen]);
+ }, [taskAddMenuOpen, taskAddMenuPlacement]);
useEffect(() => {
if (!viewColumnMenuOpen) return undefined;
@@ -4378,6 +4419,7 @@ function TasksPageContent() {
if (quickTaskSaving) return;
setQuickTaskTarget(null);
setQuickTaskTitle("");
+ setQuickTaskPriority("medium");
}, [quickTaskSaving]);
const startQuickTask = useCallback((columnId: number, rowId: number | null = null) => {
@@ -4408,6 +4450,7 @@ function TasksPageContent() {
|| quickTaskTarget?.rowId !== rowId
) {
setQuickTaskTitle("");
+ setQuickTaskPriority("medium");
}
setQuickTaskTarget({ columnId, rowId });
setCardMenuTaskId(null);
@@ -4427,16 +4470,18 @@ function TasksPageContent() {
column: target.columnId,
row: target.rowId,
title,
+ priority: quickTaskPriority,
});
setQuickTaskTarget(null);
setQuickTaskTitle("");
+ setQuickTaskPriority("medium");
await loadBoard(board.id);
} catch (quickCreateError) {
setError(getTaskError(quickCreateError, "Не удалось создать задачу"));
} finally {
setQuickTaskSaving(false);
}
- }, [board, loadBoard, quickTaskSaving, quickTaskTarget, quickTaskTitle, saving]);
+ }, [board, loadBoard, quickTaskPriority, quickTaskSaving, quickTaskTarget, quickTaskTitle, saving]);
const renderQuickTaskComposer = useCallback((
column: TaskColumn,
@@ -4445,14 +4490,16 @@ function TasksPageContent() {
quickTaskTarget?.columnId === column.id && quickTaskTarget.rowId === rowId ? (
void submitQuickTask()}
onCancel={cancelQuickTask}
/>
) : null
- ), [cancelQuickTask, quickTaskSaving, quickTaskTarget, quickTaskTitle, submitQuickTask]);
+ ), [cancelQuickTask, quickTaskPriority, quickTaskSaving, quickTaskTarget, quickTaskTitle, submitQuickTask]);
const openCreateTask = useCallback((columnId?: number, rowId: number | null = null) => {
const requestedColumn = leafColumns.find((column) => column.id === columnId);
@@ -5445,6 +5492,27 @@ function TasksPageContent() {
viewTaskDueDateDraft,
]);
+ const changeViewedTaskPriority = useCallback(async (priority: TaskPriority) => {
+ if (!board || !viewTask || saving) return;
+ if (viewTask.priority === priority) {
+ setTaskAddPanel(null);
+ return;
+ }
+
+ setSaving(true);
+ setError(null);
+ try {
+ await apiClient.updateTask(viewTask.id, { priority });
+ await loadBoard(board.id);
+ if (activityOpen) await loadTaskActivity(viewTask.id);
+ setTaskAddPanel(null);
+ } catch (priorityError) {
+ setError(getTaskError(priorityError, "Не удалось изменить приоритет задачи"));
+ } finally {
+ setSaving(false);
+ }
+ }, [activityOpen, board, loadBoard, loadTaskActivity, saving, viewTask]);
+
const toggleViewedTaskLabel = useCallback(async (labelId: number) => {
if (!board || !viewTask || saving) return;
@@ -6570,6 +6638,126 @@ function TasksPageContent() {
}
}, [activeColumns, board, loadBoard]);
+ const taskAddMenuItems = viewTask ? (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ ) : null;
+
if (loading) {
return (
-
+
+ ) : undefined}
>
{viewTask ? (
@@ -7550,123 +7764,22 @@ function TasksPageContent() {
- {taskAddMenuOpen ? (
+ {taskAddMenuOpen && taskAddMenuPlacement === "top" ? (
-
-
-
-
-
-
-
-
-
+ {taskAddMenuItems}
) : null}
@@ -7943,6 +8056,50 @@ function TasksPageContent() {
) : null}
+ {taskAddPanel === "priority" ? (
+
+
+
+
+ Приоритет
+
+
+
+
+ {priorityOptions.map((option) => {
+ const selected = option.value === viewTask.priority;
+ return (
+
+ );
+ })}
+
+
@@ -8789,6 +8946,7 @@ function TasksPageContent() {
) : null}
+
+ {periodSelectorTarget ? createPortal(periodSelector, periodSelectorTarget) : null}