Plugin de tableau

Le plugin de tableau ajoute à DayFlow une vue en tableau des tâches. Il affiche les tâches du calendrier (kind: 'task') en colonnes par statut, priorité ou responsable. Les cartes se déplacent d'une colonne à l'autre par glisser-déposer, et chaque modification est enregistrée via les événements et callbacks habituels du calendrier : le tableau n'ajoute aucun second stockage.

Essayez-le dans la démo interactive.

Installation

Utilisation

Le tableau est une vue : enregistrez-le dans views à côté de vos vues de calendrier. Il nécessite enableTasks: true, et taskMembers définit les personnes auxquelles les tâches peuvent être attribuées.

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 désigne votre propre fonction d'enregistrement. Board apparaît ensuite dans le sélecteur de vues.

Données des tâches

Les colonnes, la priorité et les responsables sont des champs de la tâche : le tableau, les vues du calendrier et l'éditeur de tâches lisent et écrivent les mêmes valeurs. Voir Statuts et responsables pour les options taskStatuses et taskMembers.

• Si un statut a completed: true, déplacer une carte dans cette colonne termine la tâche, et l'en sortir la rouvre. Terminer une tâche ailleurs la place dans le premier statut terminé.
• Sans statut terminé, la case à cocher est indépendante des colonnes.
• En regroupement par responsable, une carte appartient à son premier responsable. La déplacer remplace seulement ce responsable et garde les autres ; Unassigned les retire tous.
• Le tableau respecte la visibilité des calendriers et les réglages de lecture seule.

Utiliser le tableau

• Déplacer des cartes : glisser entre colonnes change le statut, la priorité ou le responsable ; glisser dans une colonne change l'ordre. Une carte qui a le focus se déplace avec Alt + flèches ou Alt + Début/Fin.
• Ouvrir une carte : cliquez pour modifier le titre, la colonne, la priorité, les responsables, l'échéance et les notes dans l'éditeur de tâches.
• Ajouter des tâches : ＋ dans l'en-tête d'une colonne ou New task en bas ajoute une tâche avec le statut, la priorité ou le responsable de cette colonne.
• Modifier les colonnes : cliquez sur le titre d'une colonne de statut pour la renommer ; son menu ⋯ permet de la renommer, de changer sa couleur ou de la supprimer. La suppression demande s'il faut fusionner ses tâches dans une autre colonne ou les supprimer. Add column ajoute un statut.
• Réordonner les colonnes : faites glisser un en-tête, ou appuyez sur Alt + Gauche/Droite sur un en-tête qui a le focus.
• Regrouper et filtrer : Group by bascule entre statut, priorité et responsable. Cliquez sur les avatars pour n'afficher que leurs tâches.

Les modifications des colonnes de statut appellent app.setTaskStatuses et le callback onTaskStatusesChange ; enregistrez-les à cet endroit.

Options

cardClassName et cardStyle reçoivent { event, app, groupId, groupBy }.

Callbacks

Les modifications des données de tâche atteignent toujours les callbacks du calendrier (onEventCreate, onEventUpdate, onEventDelete, onTaskStatusesChange).

Enregistrer la disposition du tableau

Le regroupement, l'ordre des colonnes et des cartes et le filtre par responsable sont un état de présentation : ils ne modifient jamais vos tâches. onViewStateChange les signale et initialState les restaure :

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

board.getState(app) et board.setState(app, state) lisent et remplacent l'état depuis le code. Gardez la fabrique de vue stable : des calendriers distincts gardent des états distincts même s'ils partagent une fabrique.

Styliser les cartes

Les cartes lisent des propriétés personnalisées CSS, définissables sur .df-board, sur une colonne ou sur une carte :

Chaque carte porte aussi data-priority, data-group, data-calendar, data-completed et data-due (overdue, today ou upcoming) :

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

Limites

• Le tableau affiche les tâches chargées dans le calendrier, toutes dates confondues. Si vous chargez les événements par plage visible, chargez aussi les tâches du tableau.
• Chaque tâche a une échéance ; les tâches sans date, les étiquettes et les sous-tâches ne sont pas encore prises en charge.
• renderCard renvoie du contenu Preact. Les slots de carte natifs de chaque framework ne sont pas encore disponibles.