src/components/TaskTable/TaskTable.jsx - master - drndsv/TODO-React

src/components/TaskTable/TaskTable.jsx

71 строка2 KB

dashk

добавлена работа с пользователями, соединенная с бэком

02 июн 2025, 18:22

02 июн 2025, 18:22dedaba6

import React from "react";
import styles from "./TaskTable.module.css";

export default function TaskTable({ tasks, statuses, onEdit, onDelete }) {
  // Группировка задач по статусу
  const tasksByStatus = statuses.map((status) => ({
    status,
    tasks: tasks.filter((task) => task.status?.id === status.id),
  }));

  // Проверка, просрочена ли задача
  const isOverdue = (task) => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    const due = new Date(task.deadline);
    due.setHours(0, 0, 0, 0);

    const statusName = task.status?.name?.toLowerCase();
    return (
      due < today && (statusName === "сделать" || statusName === "в процессе")
    );
  };

  return (
    <div className={styles.taskGroups}>
      {tasksByStatus.map(({ status, tasks }) => (
        <div key={status.id} className={styles.taskGroup}>
          <h3 className={styles.statusHeader}>{status.name}</h3>
          <table className={styles.taskTable}>
            <thead>
              <tr>
                <th>Название</th>
                <th>Исполнитель</th>
                <th>Категория</th>
                <th>Дата</th>
                <th>Комментарий</th>
                <th>Действия</th>
              </tr>
            </thead>
            <tbody>
              {tasks.map((task) => (
                <tr
                  key={task.id}
                  className={isOverdue(task) ? styles.overdue : undefined}
                >
                  <td>{task.title}</td>
                  <td>{task.user?.full_name}</td>
                  <td>{task.category?.name}</td>
                  <td>{task.deadline}</td>
                  <td>{task.comment}</td>
                  <td>
                    <button onClick={() => onEdit(task.id)}>✏️</button>
                    <button onClick={() => onDelete(task.id)}>🗑️</button>
                  </td>
                </tr>
              ))}
              {tasks.length === 0 && (
                <tr>
                  <td colSpan="6" className={styles.emptyMessage}>
                    Нет задач со статусом «{status.name}»
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      ))}
    </div>
  );
}