ff-admin-core

Basis-UI-Funktionalität für ff-admin Anwendungen als wiederverwendbares npm-Package.

📋 Inhaltsverzeichnis

• Übersicht
• Was übernimmt das Package?
• Installation
• Konfiguration
• Verwendung
• Erweiterung

Übersicht

@ff-admin/core stellt Basis-UI-Komponenten, Layouts, Stores, Router, Enums und Helper für FF-Admin Anwendungen bereit. Das Package sorgt für eine konsistente UI-Struktur und wiederverwendbare Funktionalität in allen Anwendungen.

Was übernimmt das Package?

🖥️ Basis-UI-Inhalte

• Wiederverwendbare UI-Komponenten (z.B. Layouts, Tabs, Modals, Icons, Progress Bars)
• Stores für globale State-Verwaltung (Pinia)
• Router-Konfiguration und Guards
• Enum-Definitionen für Permissions, Module, Sections etc.
• Helper-Funktionen für UI und Kommunikation
• Socket.IO Client-Integration
• PWA-Unterstützung
• Konsistente Styles und globale CSS

Das Package stellt die Basis für alle FF-Admin Anwendungen bereit und sorgt für ein einheitliches UI und Verhalten.

Installation

npm install @ff-admin/core

Wichtig: in der viteConfig der Anwendung muss die Dependency Optimization für das package deaktiviert werden.

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({ /* deine config */ }), // falls pwa benötigt
    // ... andere plugins
  ],
  optimizeDeps: {
    exclude: ['@ff-admin/core']
  }
}) 

Peer Dependencies

Das Package benötigt folgende Peer Dependencies:

• vue >= 3.0.0
• pinia >= 2.0.0
• vue-router >= 4.0.0

Verwendung & Erweiterung

Das Package wird typischerweise in den zentralen Dateien der Anwendung (z.B. core-setup.ts, main.ts, router/index.ts) eingebunden und konfiguriert. Die Erweiterung erfolgt über TypeScript-Interfaces, um projektspezifische Funktionalität und Enums zu ergänzen.

Einbindung und Initialisierung

• Importiere das Package und initialisiere zentrale Services (z.B. HTTP, Socket, Konfigurationswerte).
• Binde globale Komponenten, Stores und Router ein.
• Konfiguriere Namespaces, Enums und weitere projektspezifische Typen über Interface-Erweiterungen.

Beispielhafter Ablauf (vereinfacht):

// Importiere das Package und zentrale Services
import "@ff-admin/core";
import { configureSocketNamespace, HTTPManager, NavigationConfigVals, PackageConfigVals, SocketManager } from "@ff-admin/core";

// (Optional) Erweiterung von Typen für projektspezifische Enums und Namespaces
declare module "@ff-admin/core" {
  interface PermissionSectionMap {
    // Eigene Berechtigungs-Section hinzufügen
    mySection: void;
  }
  interface PermissionModuleMap {
    // Eigene Berechtigungs-Module hinzufügen
    myModule: void;
    anotherModule: void;
  }
  interface SettingTopicMap {
    myApp: void;
  }
  interface SettingValueMapping {
    "myApp.apiKey": string;
    "myApp.timeout": number;
    "myApp.baseUrl": string;
  }
  interface ModuleSettingTopicMap {
    myModule: void;
  }
  interface ModuleSettingValueMapping {
    "myModule.setting1": string;
    "myModule.setting2": number;
    "myModule.enabled": boolean;
  }
  interface SocketNamespaceMap {
    myCustomNamespace: "/custom";
    anotherNamespace: "/another";
  }
}

// Konfigurationswerte setzen
PackageConfigVals.serverAddress = "...";
PackageConfigVals.devMode = true;
PackageConfigVals.clientVersion = ""; // Alternativ package JSON auslesen

// Initialisierung und Konfiguration
HTTPManager.init();
SocketManager.init();
configureSocketNamespace({
  myCustomNamespace: "/custom",
  anotherNamespace: "/another",
});

// Angabe der Navigationsstruktur
NavigationConfigVals.defaultActiveNavigation = "configuration"
NavigationConfigVals.topLevel = [/*...*/]
// direktes setzen der Struktur
NavigationConfigVals.navigation = {/*...*/}
// oder einzelne Keys setzen
NavigationConfigVals.setNavigationKey("configuration", {/*...*/})

Werte wie im Backend müssen nur für den SocketNamespace definiert werden. Alle anderen Konfigurationswerte werden über den Server bezogen.

Integration in die App

• Binde das Package in die Hauptdatei deiner App ein (z.B. in main.ts).
• Verwende die bereitgestellten Komponenten, Stores, Router und Helper in deiner Anwendung.
• Nutze die Basisrouten und Guards aus dem Package und ergänze sie bei Bedarf um eigene Routen.

Beispiel (allgemein):

import "./core-setup";
import { createApp } from "vue";
import { createPinia } from "pinia";
import router from "./router";
import App from "./App.vue";

const app = createApp(App);
app.use(createPinia());
app.use(router);
// Weitere globale Properties oder Plugins
PackageConfigVals.router = router;
app.mount("#app");

---

Lizenz

AGPL-3.0-only

Author

JK Effects

Repository

https://code.jk-effects.cloud/FF-Admin/ff-admin-core.git