Colecciones raíz dinámicas

Vamos a construir un ejemplo más complejo donde la navegación principal se carga dinámicamente desde la base de datos. Usaremos la colección units como la que genera el resto de la navegación.

Para este ejemplo tendremos Units y Lessons como los principales tipos de contenido, imagina que estamos modelando la estructura de un curso.

En la colección de unidades crearemos un documento para cada unidad:

Y cada uno de esos documentos generará un nuevo elemento de navegación. En este caso tendremos 3 elementos de navegación, uno para cada unidad:

Declara la colección principal

Definamos la colección units como la principal:

Nota

Vamos a implementar un par de callbacks al guardar y eliminar entidades para actualizar la navegación cuando los datos cambian. Esto evita que el usuario tenga que refrescar la app para ver los cambios. ¡Qué genial es eso!

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
        }
    }
});

Constructor de colecciones dinámico

Típicamente en FireCMS pasas una lista estática de colecciones al componente principal del CMS, pero en este caso necesitamos construir las colecciones dinámicamente basándose en los datos de la base de datos.

FireCMS te permite pasar una función que devuelve una lista de colecciones a la prop collections del componente FireCMSApp.

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
    ]
};

Consejo

Las colecciones pueden cargarse convenientemente de forma asíncrona.

Este código obtiene los datos que se están generando en la colección units y crea una nueva colección para cada uno de los documentos.

Código completo

Conectándolo todo obtenemos una app simple que nos permite crear nuevas unidades y lecciones y navegar entre ellas:

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;