Dynamische Root-Kollektionen

Lassen Sie uns ein komplexeres Beispiel aufbauen, bei dem die Hauptnavigation dynamisch geladen wird aus der Datenbank. Wir werden die units-Kollektion als diejenige verwenden, die die restliche Navigation generiert.

Für dieses Beispiel haben wir Units und Lessons als die Hauptinhaltstypen — stellen Sie sich vor, wir modellieren die Struktur eines Kurses.

In der Units-Kollektion erstellen wir ein Dokument für jede Einheit:

Und jedes dieser Dokumente generiert ein neues Navigationselement. In diesem Fall haben wir 3 Navigationselemente, eines für jede Einheit:

Die Hauptkollektion deklarieren

Definieren wir die units-Kollektion als Hauptkollektion:

Hinweis

Wir werden einige Callbacks zu Entity-Save und -Delete implementieren, um die Navigation zu aktualisieren, wenn Daten geändert werden. Das verhindert, dass der Benutzer die App neu laden muss, um die Änderungen zu sehen. Wie cool ist das?

import { buildCollection } from "@firecms/core";

export type Unit = {
    name: string;
    description: string;
}

export const unitsCollection = buildCollection<Unit>({
    name: "Units",
    singularName: "Unit",
    group: "Main",
    id: "units",
    path: "units",
    customId: true,
    icon: "LocalLibrary",
    callbacks: {
        onSaveSuccess: ({ context }) => {
            context.navigation.refreshNavigation();
        },
        onDelete: ({ context }) => {
            context.navigation.refreshNavigation();
        }
    },
    properties: {
        name: {
            name: "Name",
            validation: { required: true },
            dataType: "string"
        },
        description: {
            name: "Description",
            validation: { required: true },
            dataType: "string",
            multiline: true
        }
    }
});

Dynamischer Kollektions-Builder

Normalerweise übergeben Sie in FireCMS eine statische Liste von Kollektionen an die Haupt-CMS- Komponente, aber in diesem Fall müssen wir die Kollektionen dynamisch basierend auf den Daten in der Datenbank erstellen.

FireCMS ermöglicht es Ihnen, eine Funktion zu übergeben, die eine Liste von Kollektionen an die collections-Eigenschaft der FireCMSApp-Komponente zurückgibt.

import { buildCollection, EntityCollectionsBuilder } from "@firecms/core";
import { Unit, unitsCollection } from "./unit_collection";

const collectionBuilder: EntityCollectionsBuilder = async ({
                                                               dataSource,
                                                               user
                                                           }) => {
    const units = await dataSource.fetchCollection<Unit>({
        path: "units",
    });
    const lessonCollections = units.map(unit => buildCollection<Unit>({
        name: unit.values.name,
        id: `units/${unit.id}/lessons`,
        path: `units/${unit.id}/lessons`,
        description: unit.values.description,
        group: "Units",
        properties: {
            name: {
                name: "Name",
                dataType: "string"
            },
            description: {
                name: "Description",
                dataType: "string"
            }
        }
    }));

    return [
        unitsCollection,
        ...lessonCollections
    ]
};

Tipp

Kollektionen können bequem asynchron geladen werden.

Dieser Code ruft die Daten ab, die in der units-Kollektion generiert werden und erstellt eine neue Kollektion für jedes der Dokumente.

Vollständiger Code

Alles zusammengefügt erhalten wir eine einfache App, die es uns ermöglicht, neue Einheiten und Lektionen zu erstellen und zwischen ihnen zu navigieren:

import { buildCollection } from "@firecms/core";
import { FireCMSAppConfig } from "@firecms/cloud";

type Unit = {
    name: string;
    description: string;
}

const unitsCollection = buildCollection<Unit>({
    name: "Units",
    singularName: "Unit",
    group: "Main",
    id: "units",
    path: "units",
    customId: true,
    icon: "LocalLibrary",
    callbacks: {
        onSaveSuccess: ({ context }) => {
            context.navigation.refreshNavigation();
        },
        onDelete: ({ context }) => {
            context.navigation.refreshNavigation();
        }
    },
    properties: {
        name: {
            name: "Name",
            validation: { required: true },
            dataType: "string"
        },
        description: {
            name: "Description",
            validation: { required: true },
            dataType: "string",
            multiline: true
        }
    }
});



const appConfig: FireCMSAppConfig = {
    version: "1",
    collections: async ({ dataSource }) => {
        const units = await dataSource.fetchCollection<Unit>({
            path: "units",
        });
        const lessonCollections = units.map(unit => buildCollection({
            name: unit.values.name,
            id: `units/${unit.id}/lessons`,
            path: `units/${unit.id}/lessons`,
            description: unit.values.description,
            group: "Units",
            properties: {
                name: {
                    name: "Name",
                    dataType: "string"
                }
            }
        }));

        return [
            unitsCollection,
            ...lessonCollections
        ]
    }
}

export default appConfig;