Zum Hauptinhalt springen

Operationen mit Aufgaben

Eine neue Aufgabe hinzufügen​

Um eine neue Aufgabe zur Liste hinzuzufügen, verwenden Sie die Methode addTask(). Das folgende Beispiel fügt eine Aufgabe unter einem angegebenen übergeordneten Element hinzu:

list.addTask({
    id: "1.1.1",
    project: "first",
    parent: "1.1",
    targetId: "1.1.2",
    reverse: true,
    task: {
        text: "Task 1.1.1",
    }
});

Eine Aufgabe kopieren und einfügen​

Kopieren und Einfügen​

Die schnellste Möglichkeit, eine Aufgabe zu kopieren und einzufügen, bietet die Methode copyTask(). Übergeben Sie die folgenden Parameter:

  • id — ID der zu kopierenden Aufgabe
  • project — ID des Zielprojekts, sofern vorhanden
  • targetId — ID der Zielaufgabe, an der die kopierte Aufgabe eingefügt wird
  • weitere Parameter sind optional

Der folgende Code-Ausschnitt kopiert eine Aufgabe in ein neues Projekt:

list.copyTask({ 
    id: "1.1", // ID der zu kopierenden Aufgabe
    join: false, // setzt Kopien anderer Aufgaben zurück und kopiert nur diese Aufgabe
    project: "p_2", // ID des Zielprojekts (sofern vorhanden)
    parent: "2.1", // ID der zukünftigen übergeordneten Aufgabe
    targetId: "2.1.2", // ID der Zielaufgabe
    reverse: true // Aufgabe vor der Zielaufgabe einfügen
});

In die Zwischenablage kopieren​

Um eine Aufgabe in die Zwischenablage zu kopieren, ohne sie einzufügen, übergeben Sie die Aufgaben-ID an die Methode copyTask():

list.copyTask({ 
    id: "1.1"
});

IDs anderer Kopien beibehalten​

Info

Um eine Aufgabe zu kopieren und zuvor kopierte Aufgaben beizubehalten, übergeben Sie join: true an die Methode copyTask(). Andernfalls kopiert die Methode nur die angegebene Aufgabe und setzt alle früheren Kopien zurück.

Aus der Zwischenablage einfügen​

Fügen Sie eine kopierte Aufgabe aus der Zwischenablage an der gewünschten Stelle ein — über die Methode pasteTask(). Der folgende Code-Ausschnitt fügt die kopierte Aufgabe neben einer Zielaufgabe ein:

list.pasteTask({ 
    parent: "1",
    targetId: "1.2",
});
Info

Das Ereignis clone-task wird nach paste-task ausgelöst, wenn der Inhalt der Zwischenablage an der Zielposition landet. Der Callback erhält die übergeordnete ID, die Projekt-ID, die Ziel-ID sowie ein batch-Array mit den geklonten Aufgabenobjekten.

Eine Aufgabe aktualisieren​

Um Parameter einer Aufgabe dynamisch zu ändern, verwenden Sie die Methode updateTask(). Das folgende Beispiel ändert den Text einer Aufgabe:

list.updateTask({ 
    id: "1.1.1",
    task: {
        text: "Abgeschlossene Aufgabe"
    }
});

Eine Aufgabe verschieben​

Um eine Aufgabe an eine andere Position zu verschieben, verwenden Sie die Methode moveTask(). Der folgende Code-Ausschnitt verschiebt eine Aufgabe in ein anderes Projekt:

list.moveTask({ 
    id: "1.1", // ID der zu verschiebenden Aufgabe
    project:"p_2", // ID des Zielprojekts (sofern vorhanden)
    parent: "2", // ID der zukünftigen übergeordneten Aufgabe
    targetId: "2.1", // ID der Zielaufgabe
    reverse: true // Aufgabe vor der Zielaufgabe platzieren
});
Hinweis

Eine übergeordnete Aufgabe wird zusammen mit ihren Unteraufgaben verschoben.

Eine Aufgabe löschen​

Um eine Aufgabe zu löschen, verwenden Sie die Methode deleteTask():

list.deleteTask({ id: "1.2" });
Hinweis

Die Methode entfernt die Aufgabe zusammen mit allen ihren Unteraufgaben.

Eine Aufgabe auf- und zuklappen​

Um eine Aufgabe einzuklappen, verwenden Sie die Methode collapseTask(). Die Methode erwartet die Aufgaben-ID als Parameter:

list.collapseTask({ id: "1.1" });

Um eine eingeklappte Aufgabe anhand ihrer ID aufzuklappen, verwenden Sie die Methode expandTask():

list.expandTask({ id: "1.1" });

Kontextmenü​

Jede Aufgabe und jeder Benutzer verfügt über ein Kontextmenü. Verfolgen Sie dessen Aktivität mit zwei Ereignissen:

  • open-menu — wird ausgelöst, wenn das Menü geöffnet wird; liefert die Element-ID, den Menütyp und optional ein Array von Aufgaben-IDs (source) für Batch-Operationen
  • close-menu — wird ausgelöst, wenn das Menü geschlossen wird; liefert die Element-ID und den Menütyp

Das folgende Beispiel protokolliert die Lebenszyklusereignisse des Menüs:

list.api.on("open-menu", ({ id, type, source }) => {
    console.log("menu opened for", id, "type", type, "source", source);
});

list.api.on("close-menu", ({ id, type }) => {
    console.log("menu closed for", id, "type", type);
});

Änderungsprotokoll: Die Ereignisse open-menu und close-menu wurden in v1.1 hinzugefügt.

Eine Aufgabe als abgeschlossen oder offen markieren​

Markieren Sie eine Aufgabe als abgeschlossen oder offen — über die Methoden checkTask() und uncheckTask(). Das folgende Beispiel zeigt beide Aufrufe:

list.checkTask({ 
    id: "1.1.1",
    manual: false
});

list.uncheckTask({ 
    id: "1.1.1",
    manual: false
});

Wenn manual: false, hängt das Ergebnis von taskShape.completed.behavior ab (siehe Referenz zu taskShape für Details).

Wenn taskShape.completed.behavior auf "auto" gesetzt ist, Sie aber einmalig manuell markieren möchten, setzen Sie manual: true:

list.checkTask({ 
    id: "1.1.1",
    manual: true
});

list.uncheckTask({ 
    id: "1.1.1",
    manual: true
});

Die Einrückungsebene einer Aufgabe ändern​

Ändern Sie die Verschachtelungsebene einer Aufgabe dynamisch mit folgenden Methoden:

  • indentTask() — Verschachtelungsebene einer Aufgabe um eine Ebene nach unten verschieben
  • unindentTask() — Verschachtelungsebene einer Aufgabe um eine Ebene nach oben verschieben

Der folgende Code-Ausschnitt verschiebt eine Aufgabe eine Ebene tiefer:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1 #tag1" },
        { id: "1.1", text: "Task 1.1", parent: "1" },
        { id: "1.1.1", text: "Task 1.1.1", parent: "1.1" },
        { id: "1.2", text: "Task 1.2", parent: "1" },
    ]
});

list.indentTask({ id: "1.2" });

console.log(list.getParentIds({ id: "1.2" })); //  ['1.1', '1']

Das folgende Beispiel verschiebt eine Aufgabe eine Ebene höher:

const list = new ToDo("#root", {
    tasks: [
        { id: "1", text: "Task 1 #tag1" },
        { id: "1.1", text: "Task 1.1", parent: "1" },
        { id: "1.1.1", text: "Task 1.1.1", parent: "1.1" },
        { id: "1.2", text: "Task 1.2", parent: "1" },
    ]
});

list.unindentTask({ id: "1.2" });

console.log(list.getParentIds({ id: "1.2" })); //  []
Info

Befindet sich die Aufgabe bereits auf der obersten Ebene, hat unindentTask() keine Wirkung.

Aufgaben filtern​

Suchen Sie Aufgaben, die den angegebenen Kriterien entsprechen, mit der Methode setFilter(). Die Methode unterstützt den strict-Modus für exakte Übereinstimmungen. Der folgende Code-Ausschnitt filtert Aufgaben nach einem Hashtag:

// Daten nach den angegebenen Regeln filtern
list.setFilter({
    match: "#tag1",
    highlight: true,
    strict: true
});

Um den Filter zurückzusetzen, übergeben Sie match: null:

// Filter zurücksetzen
list.setFilter({ match: null });

Rückgängig machen und Wiederholen​

Die To-Do-Liste verfolgt den Änderungsverlauf standardmäßig. Um die letzte Operation rückgängig zu machen, rufen Sie die Methode undo() auf. Um eine durch undo() rückgängig gemachte Operation wiederherzustellen, rufen Sie die Methode redo() auf:

list.addTask({ task: { text: "New task" } });

list.undo(); // Hinzufügen rückgängig machen
list.redo(); // wiederherstellen

Der Umfang und die Tiefe des Verlaufs werden durch die Konfigurationseigenschaft history bestimmt. Weitere Informationen finden Sie unter Konfiguration → Änderungsverlauf.

Änderungsprotokoll: Die Methoden undo() und redo() wurden in v1.3 hinzugefügt.

Need more help?Contact Support