FireCMS 收藏编辑器插件

此插件可直接从 FireCMS 接口创建和管理 Firestore 收藏 。 它增加了一个视觉 收藏编辑器,允许您创建、编辑和删除收藏而无需写入代码.

安装

npm install @firecms/collection_editor
# or
yarn add @firecms/collection_editor

为火基地集成,还安装:

npm install @firecms/collection_editor_firebase
# or
yarn add @firecms/collection_editor_firebase

特征

• 通过视觉界面创建和编辑收藏
• 定义属性、验证和显示选项
• 与团体和分集组织收藏
• 将用户界面定义的收藏与代码定义的收藏合并
• Firestore 中的持久收藏配置
• 收藏编辑操作的控制权限

基本用途

import React from "react";
import { FireCMS } from "@firecms/core";
import { useCollectionEditorPlugin } from "@firecms/collection_editor";
import { useFirestoreCollectionsConfigController } from "@firecms/collection_editor_firebase";

export default function App() {
    // Controller to save collection configs in Firestore
    const collectionConfigController = useFirestoreCollectionsConfigController({
        firebaseApp
    });
    
    // Initialize the collection editor plugin
    const collectionEditorPlugin = useCollectionEditorPlugin({
        collectionConfigController
    });
    
    const navigationController = useBuildNavigationController({
        // Your other config options
        plugins: [collectionEditorPlugin]
    });
    
    return <FireCMS
        name={"My CMS"}
        navigationController={navigationController}
        authentication={myAuthenticator}
        firebaseConfig={firebaseConfig}
    />;
}

高级配置

您可以用这些选项自定义收藏编辑器行为 :

const collectionEditorPlugin = useCollectionEditorPlugin({
    collectionConfigController, // Required: controller that handles persistence
    
    // Define permissions for collection operations
    configPermissions: ({ user }) => ({
        createCollections: user.roles?.includes("admin") ?? false,
        editCollections: user.roles?.includes("admin") ?? false,
        deleteCollections: user.roles?.includes("admin") ?? false
    }),
    
    // Prevent these group names from being used
    reservedGroups: ["admin", "system"],
    
    // Optional custom view to add to the editor
    extraView: {
        View: MyCustomView,
        icon: <CustomIcon />
    },
    
    // Function to infer collection structure from existing data
    collectionInference: async ({ path }) => {
        // Return inferred schema based on data at path
    },
    
    // Function to get sample data for a collection
    getData: async (path, parentPaths) => {
        // Return sample data for the specified path
    },
    
    // Track collection editor events
    onAnalyticsEvent: (event, params) => {
        console.log("Collection editor event:", event, params);
    },
    
    // Include introduction widget when no collections exist
    includeIntroView: true
});

与定码收藏集合并

您可以将代码定义的集合和UI中创建的集合合并:

import { mergeCollections } from "@firecms/collection_editor";

const collectionsBuilder = useCallback(() => {
    // Collections defined in code
    const codeCollections = [productsCollection, ordersCollection];
    
    // Merge with collections from the editor UI
    return mergeCollections(codeCollections, collectionConfigController.collections ?? []);
}, [collectionConfigController.collections]);

const navigationController = useBuildNavigationController({
    collections: collectionsBuilder,
    // Other options
});

Firestore 配置控制器

坚持在Firestore收集:

const collectionConfigController = useFirestoreCollectionsConfigController({
    firebaseApp,
    
    // Optional: specify where to save configs (default: "__FIRECMS/config/collections")
    configPath: "custom/config/path",
    
    // Optional: define permissions for collections
    permissions: ({ user }) => ({
        // Your permissions logic
    }),
    
    // Optional: custom property configurations
    propertyConfigs: [
        // Custom property types
    ]
});

补充说明

• 通过编辑器创建的收藏存储于 Firestore并动态加载
• 用于创建和管理收藏的插件自动添加 UI 元素
• 对于一个完整的解决方案,考虑与数据导入/导出等其他插件并用

相关插件

FireCMS 提供了几个互补插件:

• 数据导入: 从 CSV 或 JSON 导入数据到 Firestore 收藏
• 数据导出: 导出收集数据到 CSV 或 JSON 格式
• 数据增强: 为您的收藏使用 AI 生成内容
• 实体历史: 跟踪您的收藏实体的更改