Task State

<TaskState id="69fdccb4-9d57-424a-9849-b762f2f48613" />

http://localhost:3000

TaskState Optionen

Label

<TaskState label="Ein Label" id="c599706c-8422-453d-af02-c23e00686504" />

http://localhost:3000

Ein Label

Label selber stylen

<TaskState id="f72001d0-71ea-4cb7-a044-61fe09b1fd28">
    Aufgabe auf :mdi[checkbox-marked]{.green} setzen.
</TaskState>

http://localhost:3000

Aufgabe auf setzen.

Zustände selber setzen

Zustände können in beliebiger Reihenfolge und Kombination gesetzt werden. Der erste Zustand ist der Standard-Wert. Folgende Zustände sind möglich:

unset

question

checked

star-empty

star-half

star

<TaskState states={['unset', 'checked']} id="2586e204-29d0-4cb7-b5f8-c786579eb8df"/>

http://localhost:3000

Readonly

TaskState kann nicht verändert werden, wenn readonly gesetzt wurde.

<TaskState 
    readonly 
    label="ID nirgends sonst gebraucht" id="f0ebe357-ee78-4b5c-b64d-70faf6c2f80b"
/>
<TaskState 
    readonly
    label="Gleiche ID wie oben"
    id="2586e204-29d0-4cb7-b5f8-c786579eb8df"
/>

http://localhost:3000

ID nirgends sonst gebraucht

Gleiche ID wie oben

Gleiche ID

Wenn 👉 oberhalb der Zustand verändert wird, wird er auch hier verändert.

In einer Admonition

Wird innerhalb einer Admonition als erstes Element eine TaskState-Komponente verwendet, wird diese als "Icon" des Admonition-Titels gesetzt.

:::note[Admonition]
<TaskState id="d936a45b-8c22-42b6-abe4-4df6c3be9406" />
Hello aus einer Admonition.
:::

http://localhost:3000

Admonition

Hello aus einer Admonition.

:::note[So Nicht...]
Hello aus einer Admonition.
<TaskState id="d936a45b-8c22-42b6-abe4-4df6c3be9406" />
:::

http://localhost:3000

So Nicht...

Hello aus einer Admonition.

Temporäre Komponente (nicht persistiert)

Ohne id wird der Zustand nicht gespeichert, was mit einem roten Rand markiert.

<TaskState />

http://localhost:3000

Inline-TaskState

Es ist auch möglich, die TaskState-Komponente inline zu verwenden, bspw. in einer Überschrift

## <TaskState inline /> Inline-TaskState

http://localhost:3000

Inline-TaskState

Installation

Code Kopieren

• src/models/documents/TaskState.ts
• src/components/documents/TaskState

Für die Übersicht der TaskStates:

• src/models/Page.ts (für die TaskState-Übersicht)
• src/stores/PageStore.ts

Konfigurieren

Der DocumentType.TaskState muss unter

• src/api/document.ts
• src/stores/DocumentStore.ts registriert/implementiert werden.

Im src/stores/rootStore.ts den PageStore registrieren.

TaskState-Übersicht in der Navbar

Voraussetzung

Damit die TaskState-Übersicht gebraucht werden kann, braucht es die Plugins

• 👉 remark-page
• 👉 remark-enumerate-components

docusaurus.config.ts

import enumerateAnswersPlugin from './src/plugins/remark-enumerate-components/plugin';

const REMARK_PLUGINS = [
    /* ... */
    [
      [
        enumerateAnswersPlugin,
        {
          componentsToEnumerate: ['TaskState', /*...*/],
        }
      ]
    ]
];

Die TaskState-Übersicht kann in der Navbar hinzugefügt werden.

docusaurus.config.ts

const config: Config = {
    themeConfig: {
        navbar: {
            items: [
                {
                    type: 'custom-taskStateOverview',
                    position: 'left'
                }
            ]
        }
    }
};

src/theme/NavbarItem/ComponentTypes.tsx

import TaskStateOverview from '@tdev-components/documents/TaskState/TaskStateOverview';
const ComponentTypes: ComponentTypesObject = {
    ..., // andere Komponenten
    ['custom-taskStateOverview']: TaskStateOverview
};

export default ComponentTypes;