@sidekick-coder/zenith-kit 0.3.6 → 0.3.8

package/src/client/entities/DashboardWidget.ts

@@ -0,0 +1,229 @@
+import EmmitterService from '#shared/services/EmmitterService.ts'
+import { set } from 'lodash-es'
+import type DashboardWidgetData from './DashboardWidgetData'
+import DashboardWidgetDefinition from './DashboardWidgetDefinition'
+import dashboardRegistry from '#client/facades/dashboardRegistry.ts'
+
+export const DASHBOARD_ROW_HEIGHT = 80
+
+interface DashboardWidgetOptions {
+    data: DashboardWidgetData
+    definition: DashboardWidgetDefinition
+}
+
+interface StylesOptions {
+    contianerWidth: number
+    breakpoint?: 'base' | 'sm' | 'md' | 'xl'
+}
+
+export default class DashboardWidget {
+    public data: DashboardWidgetData
+    public definition: DashboardWidgetDefinition
+    public emmitter: EmmitterService
+
+    constructor({ data, definition }: DashboardWidgetOptions) {
+        this.data = data
+        this.definition = definition
+        this.emmitter = new EmmitterService()
+    }
+
+    public static fromData(data: DashboardWidgetData) {
+        let def = dashboardRegistry.get(data.definition_id)
+
+        if (!def) {
+            def = new DashboardWidgetDefinition()
+            def.name = `Unknown: ${data.definition_id}`
+            def.id = data.definition_id
+
+            console.warn(`DashboardWidgetDefinition not found for id: ${data.definition_id}. Using unknown definition.`)
+        }
+
+        return new DashboardWidget({
+            data: data,
+            definition: def,
+        })
+    }
+
+    public setEmmitter(emmitter: EmmitterService) {
+        this.emmitter = emmitter
+    }
+
+    public get id(): string {
+        return this.data.id
+    }
+
+    public get name(): string {
+        return this.data.name
+    }
+
+    public set name(value: string) {
+        this.update({ name: value })
+    }
+
+    public get options(): DashboardWidgetData['options'] {
+        return this.data.options || {}
+    }
+
+
+    public get definition_id(): string {
+        return this.data.definition_id
+    }
+
+    public component() {
+        return this.definition.component()
+    }
+
+    public actions() {
+        return this.definition.actions()
+    }
+
+    public get columns(): DashboardWidgetData['columns'] {
+        return this.data.columns || {}
+    }
+
+    public set columns(payload: DashboardWidgetData['columns']) {
+        const columns = JSON.parse(JSON.stringify(this.data.columns || {})) as DashboardWidgetData['columns']
+
+        Object.assign(columns, payload)
+
+        this.update({ columns })
+    }
+
+    public get rows(): DashboardWidgetData['rows'] {
+        return this.data.rows || {}
+    }
+
+    public set rows(payload: DashboardWidgetData['rows']) {
+        const rows = JSON.parse(JSON.stringify(this.data.rows || {})) as DashboardWidgetData['rows']
+
+        Object.assign(rows, payload)
+
+        this.update({ rows })
+    }
+
+    public get x(): DashboardWidgetData['x'] {
+        return this.data.x || {}
+    }
+
+    public set x(payload: DashboardWidgetData['x']) {
+        const x = JSON.parse(JSON.stringify(this.data.x || {})) as DashboardWidgetData['x']
+
+        Object.assign(x, payload)
+
+        this.update({ x })
+    }
+
+    public get y(): DashboardWidgetData['y'] {
+        return this.data.y || {}
+    }
+
+    public set y(payload: DashboardWidgetData['y']) {
+        const y = JSON.parse(JSON.stringify(this.data.y || {})) as DashboardWidgetData['y']
+
+        Object.assign(y, payload)
+
+        this.update({ y })
+    }
+
+    public get classes(): string {
+        const classes = new Set<string>()
+
+        return Array.from(classes.values()).join(' ')
+    }
+
+    public computeStyles(options: StylesOptions): string {
+        const styles = new Map<string, string>()
+        const breakpoint = options.breakpoint ?? 'base'
+
+        const x = this.x[breakpoint] ?? 0
+        const y = this.y[breakpoint] ?? 0
+        const cols = this.columns[breakpoint] ?? 1
+        const rows = this.rows[breakpoint] ?? 1
+
+        const colSize = options.contianerWidth / 12
+        const rowSize = DASHBOARD_ROW_HEIGHT
+
+        styles.set('position', 'absolute')
+        styles.set('left', `${x * colSize}px`)
+        styles.set('top', `${y * rowSize}px`)
+        styles.set('width', `${cols * colSize - 10}px`) // padding and scrollbar compensation
+        styles.set('height', `${rows * rowSize}px`)
+
+        return Array.from(styles.entries())
+            .map(([key, value]) => `${key}: ${value};`)
+            .join(' ')
+    }
+
+    public update(payload: Partial<DashboardWidgetData>) {
+        Object.assign(this.data, payload)
+
+        this.emmitter.emit('widget:updated', {
+            id: this.id,
+            data: this.data
+        })
+    }
+
+    public setOption(key: string, value: any) {
+        const options = JSON.parse(JSON.stringify(this.data.options || {}))
+
+        set(options, key, value)
+
+        this.update({ options })
+    }
+
+    public setX(breakpoint: 'base' | 'sm' | 'md' | 'lg' | 'xl', value: number | undefined = undefined) {
+        const x = JSON.parse(JSON.stringify(this.x)) as DashboardWidgetData['x']
+
+        if (value === undefined) {
+            delete x[breakpoint]
+        }
+
+        if (value !== undefined) {
+            x[breakpoint] = value
+        }
+
+        this.update({ x })
+    }
+
+    public setY(breakpoint: 'base' | 'sm' | 'md' | 'lg' | 'xl', value: number | undefined = undefined) {
+        const y = JSON.parse(JSON.stringify(this.y)) as DashboardWidgetData['y']
+
+        if (value === undefined) {
+            delete y[breakpoint]
+        }
+
+        if (value !== undefined) {
+            y[breakpoint] = value
+        }
+
+        this.update({ y })
+    }
+
+    public setColumn(breakpoint: 'base' | 'sm' | 'md' | 'lg' | 'xl', value: number | undefined = undefined) {
+        const columns = JSON.parse(JSON.stringify(this.columns)) as DashboardWidgetData['columns']
+
+        if (value === undefined) {
+            delete columns[breakpoint]
+        }
+
+        if (value !== undefined) {
+            columns[breakpoint] = value
+        }
+
+        this.update({ columns })
+    }
+
+    public setRow(breakpoint: 'base' | 'sm' | 'md' | 'lg' | 'xl', value: number | undefined = undefined) {
+        const rows = JSON.parse(JSON.stringify(this.rows)) as DashboardWidgetData['rows']
+
+        if (value === undefined) {
+            delete rows[breakpoint]
+        }
+
+        if (value !== undefined) {
+            rows[breakpoint] = value
+        }
+
+        this.update({ rows })
+    }
+}

package/src/client/entities/DashboardWidgetData.ts

@@ -0,0 +1,33 @@
+import { createId } from '#shared/utils/index.ts'
+
+export interface DashboardGridUnit {
+    base?: number
+    sm?: number
+    md?: number
+    lg?: number
+    xl?: number
+}
+
+export default class DashboardWidgetData {
+    public id: string
+    public name: string
+    public definition_id: string
+    public columns: DashboardGridUnit 
+    public rows: DashboardGridUnit
+    public x: DashboardGridUnit
+    public y: DashboardGridUnit
+    public order: number
+    public options: Record<string, any>
+
+    constructor(data: Partial<DashboardWidgetData>) {
+        Object.assign(this, data)
+
+        if (!this.id) {
+            this.id = createId()
+        }
+
+        if (!this.options) {
+            this.options = {}
+        }
+    }
+}

package/src/client/entities/DashboardWidgetDefinition.ts

@@ -0,0 +1,26 @@
+export interface DashboardWidgetAction {
+    props?: Record<string, any>
+    component: any
+}
+
+export default class DashboardWidgetDefinition {
+    public id: string
+    public name: string
+    public description?: string
+    public icon?: string
+
+    constructor() {
+        this.id = ''
+        this.name = ''
+        this.description = ''
+        this.icon = ''
+    }
+
+    public component(): any {
+        return null
+    }
+
+    public actions(): DashboardWidgetAction[] {
+        return []
+    }
+}

package/src/client/entities/DashboardWidgetDefinitionChart.ts

@@ -0,0 +1,59 @@
+import DashboardWidgetDefinition from './DashboardWidgetDefinition'
+import type DashboardWidgetData from './DashboardWidgetData'
+
+/**
+    * Component to be used for chart widgets in the dashboard.
+    * Plugins can extend this class to create their own chart widgets.
+    * @example
+    * class MyChartWidget extends DashboardWidgetDefinitionChart {
+    *     constructor() {
+    *         super()
+    *         this.name = 'My Chart Widget'
+    *         this.id = 'my-chart-widget'
+    *     }
+    * }
+    */
+
+
+export default class DashboardWidgetDefinitionChart extends DashboardWidgetDefinition {
+    private static renderer: any 
+
+    constructor() {
+        super()
+        this.name = 'Chart'
+        this.id = 'chart'
+    }
+
+    public static setRenderer(renderer: any) {
+        DashboardWidgetDefinitionChart.renderer = renderer
+    }
+
+    public component() {
+        return DashboardWidgetDefinitionChart.renderer
+    }
+
+    // return chart options for the chart widget. This can be overridden by plugins to provide custom chart options.
+    // @ts-expect-error to be extended later
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public async chartOptions(payload: DashboardWidgetData['options']): Promise<any>{
+        return {
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true 
+            },
+            title: { text: 'ECharts Getting Started Example' },
+            tooltip: {},
+            xAxis: { data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks'] },
+            yAxis: {},
+            series: [
+                {
+                    name: 'sales',
+                    type: 'bar',
+                    data: [5, 20, 36, 10, 10, 20]
+                }
+            ]
+        }
+    }
+}

package/src/client/entities/MenuItemEntity.ts

@@ -0,0 +1,16 @@
+import BaseEntity from '#shared/mixins/BaseEntityMixin.ts'
+import { compose } from '#shared/utils/compose.ts'
+
+export default class MenuItem extends compose(BaseEntity) {
+    public id: string
+    public label: string
+    public layout: string
+
+    public to?: string
+
+    public target?: '_blank' | '_self' | '_parent' | '_top'
+    public group?: string
+    public order?: number
+    public icon?: string
+    public parent?: string
+}

package/src/client/entities/ModuleEntity.ts

@@ -0,0 +1,6 @@
+import Base from '#shared/entities/ModuleEntity.ts'
+import { composeWith } from '#shared/utils/compose.ts'
+
+export default class Module extends composeWith(Base) {
+   
+}

package/src/client/entities/PluginEntity.ts

@@ -0,0 +1,14 @@
+import Base from '#shared/entities/PluginEntity.ts'
+import router from '#client/facades/router.ts'
+import { composeWith } from '#shared/utils/compose.ts'
+import type { AutoOptions } from '#client/services/RouterService.ts'
+
+export default class PluginEntity extends composeWith(Base) {
+    public addPagesFolder(imports: any, options?: AutoOptions) {
+        router.auto(imports, options)
+    }
+
+    public async load() {
+        // This method can be used to load additional data from the plugin's directory if needed
+    }
+}

package/src/client/facades/acl.ts

@@ -0,0 +1,6 @@
+import container from '#client/facades/container.ts'
+import AclEntity from '#shared/entities/AclEntity.ts'
+
+const acl = container.proxy<AclEntity>(AclEntity)
+
+export default acl

package/src/client/facades/auth.ts

@@ -0,0 +1,10 @@
+import AuthService from '#client/services/AuthService.ts'
+import container from './container'
+
+const auth = container.proxy<AuthService>(AuthService)
+
+if (import.meta.env.DEV && !import.meta.env.SSR) {
+    (window as any).auth = auth
+}
+
+export default auth

package/src/client/facades/config.ts

@@ -0,0 +1,10 @@
+import ConfigService from '#shared/services/ConfigService.ts'
+import container from './container'
+
+const config = container.proxy<ConfigService>(ConfigService)
+
+if (import.meta.env.DEV) {
+    globalThis.config = config
+}
+
+export default config

package/src/client/facades/container.ts

@@ -0,0 +1,7 @@
+import ContainerService from "#shared/services/ContainerService.ts";
+
+const container = (globalThis as any).clientContainer || new ContainerService()
+
+globalThis.clientContainer = container
+
+export default container as ContainerService

package/src/client/facades/dashboardRegistry.ts

@@ -0,0 +1,6 @@
+import DashboardWidgetRegistry from '#client/registry/DashboardWidgetRegistry.ts'
+import container from './container'
+
+const dashboardRegistry = container.proxy<DashboardWidgetRegistry>(DashboardWidgetRegistry)
+
+export default dashboardRegistry

package/src/client/facades/emmitter.ts

@@ -0,0 +1,6 @@
+import container from './container'
+import { EmmitterService } from '#shared/index.ts'
+
+const emmitter = container.proxy<EmmitterService>(EmmitterService)
+
+export default emmitter

package/src/client/facades/fetcher.ts

@@ -0,0 +1,6 @@
+import FetchService from '#client/services/FetchService.ts'
+import container from './container'
+
+const fetcher = container.proxy<FetchService>(FetchService)
+
+export default fetcher

package/src/client/facades/layout.ts

@@ -0,0 +1,9 @@
+import LayoutManager from "#client/services/LayoutService.ts";
+
+const g = globalThis as any
+
+const layout = g.layout || new LayoutManager()
+
+g.layout = layout
+
+export default layout

package/src/client/facades/lifecycle.ts

@@ -0,0 +1,6 @@
+import container from './container'
+import LifecycleService from '#client/services/LifecycleService.ts'
+
+const lifecycle = container.proxy<LifecycleService>(LifecycleService)
+
+export default lifecycle

package/src/client/facades/logger.ts

@@ -0,0 +1,6 @@
+import LoggerService from '#shared/services/LoggerService.ts'
+import container from './container'
+
+const logger = container.proxy<LoggerService>(LoggerService)
+
+export default logger

package/src/client/facades/menu.ts

@@ -0,0 +1,6 @@
+import MenuService from '#client/services/MenuService.ts'
+import container from './container'
+
+const menu = container.proxy<MenuService>(MenuService)
+
+export default menu

package/src/client/facades/route.ts

@@ -0,0 +1,7 @@
+import container from '#client/facades/container.ts'
+import type { RouteLocationNormalizedGeneric } from 'vue-router'
+
+const route = container.proxy<RouteLocationNormalizedGeneric>('route')
+
+export default route
+

package/src/client/facades/router.ts

@@ -0,0 +1,6 @@
+import container from '#client/facades/container.ts'
+import type { Router } from '#client/services/RouterService.ts'
+
+const router = container.proxy<Router>('router')
+
+export default router

package/src/client/facades/toast.ts

@@ -0,0 +1,6 @@
+import container from '#client/facades/container.ts'
+import ToastService from '#client/services/ToastService.ts'
+
+const toast = container.proxy<ToastService>(ToastService)
+
+export default toast

package/src/client/guards/authGuard.ts

@@ -0,0 +1,26 @@
+import type { NavigationGuard, RouteLocationNormalized } from 'vue-router'
+import auth from '#client/facades/auth.ts'
+
+export interface AuthGuardOptions {
+    redirect: string | ((to: RouteLocationNormalized) => string)
+    exclude?: string[]
+}
+
+export function createAuthGuard(options: AuthGuardOptions): NavigationGuard {
+    const exclude = options.exclude || ['/auth/login', '/auth/register']
+
+    return (to) => {
+
+        if (!auth.user && !exclude.includes(to.path)) {
+            const redirectPath = typeof options.redirect === 'function' ? options.redirect(to) : options.redirect
+
+            return redirectPath
+        }
+    }
+}
+
+const authGuard = createAuthGuard({
+    redirect: to => '/auth/login?redirect=' + encodeURIComponent(to.fullPath),
+})
+
+export default authGuard

package/src/client/guards/guestGuard.ts

@@ -0,0 +1,19 @@
+import auth from '#client/facades/auth.ts'
+
+export interface GuestGuardOptions {
+    redirect: string
+}
+
+export function createGuestGuard(options: GuestGuardOptions) {
+    return () => {
+        if (auth.user) {
+            return options.redirect
+        }
+    }
+}
+
+const guestGuard = createGuestGuard({
+    redirect: '/'
+})
+
+export default guestGuard

package/src/client/guards/setupGuard.ts

@@ -0,0 +1,36 @@
+import type { NavigationGuard } from 'vue-router'
+import config from '#client/facades/config.ts'
+
+const setupGuard: NavigationGuard = (to) => {
+    const setup = config.get<any>('setup')
+    
+    const completed = !setup?.need_database && !setup?.need_users
+    
+    if (completed && to.path.startsWith('/setup')) {
+        return '/'
+    }
+    
+    if (completed) {
+        return true
+    }
+    
+    if (!to.path.startsWith('/setup')) {
+        return '/setup'
+    }
+    
+    if (to.path === '/setup') {
+        return true
+    }    
+
+    if (setup?.need_database) {
+        return to.path !== '/setup/database' ? '/setup/database' : true
+    }
+
+    if (setup?.need_users) {
+        return to.path !== '/setup/user' ? '/setup/user' : true
+    }
+
+    return true
+}
+
+export default setupGuard