Board-Plugin

Das Board-Plugin fügt DayFlow eine Aufgaben-Board-Ansicht hinzu. Es zeigt die Aufgaben des Kalenders (kind: 'task') in Spalten nach Status, Priorität oder zuständiger Person. Karten lassen sich zwischen Spalten ziehen, und jede Änderung wird über die üblichen Kalender-Events und Callbacks gespeichert. Das Board braucht also keinen zweiten Datenspeicher.

Probieren Sie es in der interaktiven Demo aus.

Installation

Verwendung

Das Board ist eine Ansicht: Registrieren Sie es neben Ihren Kalenderansichten in views. Es benötigt enableTasks: true; taskMembers legt die Personen fest, denen Aufgaben zugewiesen werden können.

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 steht für Ihre eigene Speicherfunktion. Danach erscheint Board in der Ansichtsauswahl.

Aufgabendaten

Spalten, Priorität und Zuständige sind Aufgabenfelder. Board, Kalenderansichten und Aufgabeneditor lesen und schreiben daher dieselben Werte. Zu den Optionen taskStatuses und taskMembers siehe Status und Zuständige.

• Gibt es einen Status mit completed: true, schließt das Verschieben einer Karte in diese Spalte die Aufgabe ab, und das Herausziehen öffnet sie wieder. Wird eine Aufgabe anderswo abgeschlossen, wandert sie in den ersten abgeschlossenen Status.
• Ohne abgeschlossenen Status ist das Kontrollkästchen unabhängig von den Spalten.
• Bei Gruppierung nach Zuständigen gehört eine Karte zur ersten zuständigen Person. Beim Verschieben wird nur diese Person ersetzt, die übrigen bleiben; Unassigned entfernt alle.
• Das Board berücksichtigt die Kalendersichtbarkeit und die Schreibschutz-Einstellungen.

Das Board benutzen

• Karten verschieben: Ziehen zwischen Spalten ändert Status, Priorität oder Zuständige, Ziehen innerhalb einer Spalte die Reihenfolge. Fokussierte Karten lassen sich mit Alt + Pfeiltasten oder Alt + Pos1/Ende bewegen.
• Karte öffnen: Ein Klick öffnet den Aufgabeneditor für Titel, Spalte, Priorität, Zuständige, Fälligkeit und Notizen.
• Aufgaben hinzufügen: ＋ im Spaltenkopf oder New task am Spaltenende legt eine Aufgabe mit dem Status, der Priorität oder der Person dieser Spalte an.
• Spalten bearbeiten: Ein Klick auf den Titel einer Statusspalte benennt sie um; das ⋯-Menü benennt um, färbt um oder löscht. Beim Löschen wird gefragt, ob die Aufgaben in eine andere Spalte übernommen oder mitgelöscht werden. Add column fügt einen Status hinzu.
• Spalten umsortieren: Spaltenkopf ziehen oder auf einem fokussierten Kopf Alt + Links/Rechts drücken.
• Gruppieren und filtern: Group by wechselt zwischen Status, Priorität und Zuständigen. Ein Klick auf Avatare zeigt nur deren Aufgaben.

Änderungen an Statusspalten rufen app.setTaskStatuses und den Callback onTaskStatusesChange auf. Speichern Sie sie dort.

Optionen

cardClassName und cardStyle erhalten { event, app, groupId, groupBy }.

Callbacks

Änderungen an Aufgabendaten erreichen weiterhin die Kalender-Callbacks (onEventCreate, onEventUpdate, onEventDelete, onTaskStatusesChange).

Board-Layout speichern

Gruppierung, Spaltenreihenfolge, Kartenreihenfolge und Zuständigenfilter sind Darstellungszustand und ändern die Aufgaben nicht. onViewStateChange meldet Änderungen, initialState stellt sie wieder her:

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

board.getState(app) und board.setState(app, state) lesen und ersetzen den Zustand per Code. Halten Sie die View-Factory stabil: Getrennte Kalender behalten eigenen Zustand, auch wenn sie dieselbe Factory nutzen.

Karten gestalten

Karten lesen CSS-Custom-Properties, die auf .df-board, einer Spalte oder einer einzelnen Karte gesetzt werden können:

Jede Karte trägt außerdem data-priority, data-group, data-calendar, data-completed und data-due (overdue, today oder upcoming):

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

Einschränkungen

• Das Board zeigt alle in den Kalender geladenen Aufgaben, unabhängig vom Datum. Wenn Sie Events nach sichtbarem Bereich laden, laden Sie die Board-Aufgaben ebenfalls.
• Jede Aufgabe hat ein Fälligkeitsdatum; Aufgaben ohne Datum, Labels und Unteraufgaben werden noch nicht unterstützt.
• renderCard liefert Preact-Inhalt. Framework-native Karten-Slots gibt es noch nicht.