Plugin de tablero

El plugin de tablero añade a DayFlow una vista de tablero de tareas. Muestra las tareas del propio calendario (kind: 'task') en columnas por estado, prioridad o responsable. Las tarjetas se arrastran entre columnas y cada cambio se guarda mediante los eventos y callbacks habituales del calendario, así que el tablero no añade un segundo almacén de datos.

Pruébalo en la demo interactiva.

Instalación

Uso

El tablero es una vista: regístralo en views junto a tus vistas de calendario. Necesita enableTasks: true, y taskMembers define las personas a las que se pueden asignar tareas.

import {
  DayFlowCalendar,
  createMonthView,
  useCalendarApp,
} from '@dayflow/react';
import { createBoardView } from '@dayflow/plugin-board';
import '@dayflow/core/dist/styles.css';
import '@dayflow/plugin-board/styles.css';

// Create the view once so its board state survives re-renders.
const board = createBoardView();

export function TaskCalendar() {
  const calendar = useCalendarApp({
    views: [createMonthView(), board],
    enableTasks: true,
    taskMembers: [
      { id: 'ava', name: 'Ava Chen' },
      { id: 'leo', name: 'Leo Martin', avatarUrl: '/leo.png' },
    ],
    callbacks: {
      onEventUpdate: event => saveEvent(event),
    },
  });

  return <DayFlowCalendar calendar={calendar} />;
}

saveEvent representa tu propia función de guardado. Después, Board aparece en el selector de vistas.

Datos de las tareas

Las columnas, la prioridad y los responsables son campos de la tarea, así que el tablero, las vistas del calendario y el editor de tareas leen y escriben los mismos valores. Consulta Estados y responsables para las opciones taskStatuses y taskMembers.

• Si un estado tiene completed: true, mover una tarjeta a esa columna completa la tarea y sacarla la reabre. Completar una tarea en otro lugar la mueve al primer estado completado.
• Sin un estado completado, la casilla es independiente de las columnas.
• Al agrupar por responsable, una tarjeta pertenece a su primer responsable. Moverla cambia solo ese responsable y conserva los demás; Unassigned los quita todos.
• El tablero respeta la visibilidad de los calendarios y la configuración de solo lectura.

Usar el tablero

• Mover tarjetas: arrastrar entre columnas cambia el estado, la prioridad o el responsable; arrastrar dentro de una columna cambia el orden. Las tarjetas con foco se mueven con Alt + flechas o Alt + Inicio/Fin.
• Abrir una tarjeta: haz clic para editar el título, la columna, la prioridad, los responsables, la fecha de vencimiento y las notas en el editor de tareas.
• Añadir tareas: ＋ en el encabezado de una columna o New task al final añade una tarea con el estado, la prioridad o el responsable de esa columna.
• Editar columnas: haz clic en el título de una columna de estado para renombrarla; su menú ⋯ permite renombrarla, cambiar su color o eliminarla. Al eliminar una columna se pregunta si fusionar sus tareas en otra columna o eliminarlas. Add column añade un estado.
• Reordenar columnas: arrastra el encabezado o pulsa Alt + Izquierda/Derecha sobre un encabezado con foco.
• Agrupar y filtrar: Group by alterna entre estado, prioridad y responsable. Haz clic en los avatares para ver solo sus tareas.

Los cambios en las columnas de estado llaman a app.setTaskStatuses y al callback onTaskStatusesChange; guárdalos ahí.

Opciones

cardClassName y cardStyle reciben { event, app, groupId, groupBy }.

Callbacks

Los cambios en los datos de las tareas siguen llegando a los callbacks del calendario (onEventCreate, onEventUpdate, onEventDelete, onTaskStatusesChange).

Guardar el diseño del tablero

La agrupación, el orden de columnas y tarjetas y el filtro de responsables son estado de presentación: nunca modifican tus tareas. onViewStateChange los notifica e initialState los restaura:

const board = createBoardView({
  initialState:
    JSON.parse(localStorage.getItem('board') ?? 'null') ?? undefined,
  onViewStateChange: state =>
    localStorage.setItem('board', JSON.stringify(state)),
});

board.getState(app) y board.setState(app, state) leen y reemplazan el estado desde código. Mantén estable la factoría de la vista: calendarios distintos conservan estados distintos aunque compartan una factoría.

Estilos de las tarjetas

Las tarjetas leen propiedades personalizadas de CSS, que se pueden definir en .df-board, en una columna o en una sola tarjeta:

Cada tarjeta también incluye data-priority, data-group, data-calendar, data-completed y data-due (overdue, today o upcoming):

.df-board-card[data-due='overdue'] {
  box-shadow: inset 3px 0 #ef4444;
}

Limitaciones

• El tablero muestra las tareas cargadas en el calendario, de cualquier fecha. Si cargas eventos por rango visible, carga también las tareas del tablero.
• Toda tarea tiene fecha de vencimiento; todavía no se admiten tareas sin fecha, etiquetas ni subtareas.
• renderCard devuelve contenido Preact. Aún no hay slots de tarjeta nativos de cada framework.