@htlkg/components 0.0.2 → 0.0.3

package/src/composables/usePageContext.ts

@@ -0,0 +1,171 @@
+/**
+ * Page Context Composable
+ *
+ * Provides access to common page context data (user, brand, routes)
+ * within Vue components, without prop drilling.
+ */
+
+import { computed, inject, type InjectionKey, type ComputedRef } from "vue";
+import { useStore } from "@nanostores/vue";
+import { atom } from "nanostores";
+import { routes, type Routes } from "@htlkg/core";
+
+/**
+ * User information from authentication
+ */
+export interface PageUser {
+	username: string;
+	email?: string;
+	isAdmin: boolean;
+	isSuperAdmin: boolean;
+	brandIds?: number[];
+	accountIds?: number[];
+	roles?: string[];
+}
+
+/**
+ * Brand context for brand-scoped pages
+ */
+export interface PageBrand {
+	id: number;
+	name: string;
+	logo?: string;
+}
+
+/**
+ * Full page context
+ */
+export interface PageContext {
+	user: PageUser | null;
+	brand?: PageBrand;
+	brandId?: number;
+	isAdmin: boolean;
+	isSuperAdmin: boolean;
+	routes: Routes;
+}
+
+/**
+ * Injection key for providing page context
+ */
+export const PAGE_CONTEXT_KEY: InjectionKey<PageContext> = Symbol("pageContext");
+
+/**
+ * Nanostore for user state (set by AdminLayout)
+ */
+export const $user = atom<PageUser | null>(null);
+
+/**
+ * Nanostore for current brand (set by BrandLayout)
+ */
+export const $currentBrand = atom<PageBrand | null>(null);
+
+/**
+ * Set user in the store (called from layout)
+ */
+export function setUser(user: PageUser | null): void {
+	$user.set(user);
+}
+
+/**
+ * Set current brand in the store (called from layout)
+ */
+export function setCurrentBrand(brand: PageBrand | null): void {
+	$currentBrand.set(brand);
+}
+
+/**
+ * Get page context within a Vue component
+ *
+ * This composable provides access to:
+ * - Current user information
+ * - Current brand (if in brand context)
+ * - Admin/superadmin status
+ * - Type-safe routes
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { usePageContext } from '@htlkg/components';
+ *
+ * const { user, isAdmin, routes } = usePageContext();
+ *
+ * function goToAccounts() {
+ *   window.location.href = routes.admin.accounts();
+ * }
+ * </script>
+ * ```
+ *
+ * @example With provider pattern
+ * ```vue
+ * // In parent component
+ * import { provide, PAGE_CONTEXT_KEY } from '@htlkg/components';
+ * provide(PAGE_CONTEXT_KEY, { user, brand, isAdmin: true, routes });
+ *
+ * // In child component
+ * const context = usePageContext();
+ * ```
+ */
+export function usePageContext(): ComputedRef<PageContext> {
+	// Try injection first (from provider)
+	const injected = inject(PAGE_CONTEXT_KEY, null);
+	if (injected) {
+		return computed(() => injected);
+	}
+
+	// Fallback to nanostores
+	const user = useStore($user);
+	const brand = useStore($currentBrand);
+
+	return computed(() => ({
+		user: user.value,
+		brand: brand.value ?? undefined,
+		brandId: brand.value?.id,
+		isAdmin: user.value?.isAdmin ?? false,
+		isSuperAdmin: user.value?.isSuperAdmin ?? false,
+		routes,
+	}));
+}
+
+/**
+ * Check if user has access to a specific brand
+ */
+export function useHasAccessToBrand(brandId: number): ComputedRef<boolean> {
+	const context = usePageContext();
+
+	return computed(() => {
+		const user = context.value.user;
+		if (!user) return false;
+		if (user.isAdmin || user.isSuperAdmin) return true;
+		return user.brandIds?.includes(brandId) ?? false;
+	});
+}
+
+/**
+ * Check if user has access to a specific account
+ */
+export function useHasAccessToAccount(accountId: number): ComputedRef<boolean> {
+	const context = usePageContext();
+
+	return computed(() => {
+		const user = context.value.user;
+		if (!user) return false;
+		if (user.isAdmin || user.isSuperAdmin) return true;
+		return user.accountIds?.includes(accountId) ?? false;
+	});
+}
+
+/**
+ * Get user roles
+ */
+export function useUserRoles(): ComputedRef<string[]> {
+	const context = usePageContext();
+	return computed(() => context.value.user?.roles ?? []);
+}
+
+/**
+ * Check if user has a specific role
+ */
+export function useHasRole(role: string): ComputedRef<boolean> {
+	const roles = useUserRoles();
+	return computed(() => roles.value.includes(role));
+}

package/src/composables/useTable.ts

@@ -122,11 +122,13 @@ export function useTable<T extends Record<string, any>>(
 
   // Computed - Filtering
   const filteredItems = computed(() => {
-    if (activeFilters.value.length === 0) return items.value;
+    // Ensure activeFilters is always an array
+    const filters = Array.isArray(activeFilters.value) ? activeFilters.value : [];
+    if (filters.length === 0) return items.value;
 
     return items.value.filter(item => {
       // All filters must pass (AND logic by default)
-      return activeFilters.value.every(filter => {
+      return filters.every(filter => {
         const { category, operator, value } = filter;
         
         if (value === undefined || value === null || value === '') return true;
@@ -297,8 +299,27 @@ export function useTable<T extends Record<string, any>>(
   }
 
   // Methods - Filtering
-  function applyFilters(filters: SmartFilter[]) {
-    activeFilters.value = filters;
+  function applyFilters(filters: SmartFilter[] | Record<string, any>) {
+    // Handle various filter formats from UI components
+    if (Array.isArray(filters)) {
+      activeFilters.value = filters;
+    } else if (filters && typeof filters === 'object') {
+      // Handle object format like { filters: [...] } or extract values
+      if ('filters' in filters && Array.isArray(filters.filters)) {
+        activeFilters.value = filters.filters;
+      } else {
+        // Convert object to SmartFilter array
+        activeFilters.value = Object.entries(filters)
+          .filter(([_, value]) => value !== undefined && value !== null && value !== '')
+          .map(([key, value]) => ({
+            category: key,
+            operator: 'contains',
+            value,
+          }));
+      }
+    } else {
+      activeFilters.value = [];
+    }
     currentPage.value = 1; // Reset to first page when filters change
   }
 
@@ -314,7 +335,7 @@ export function useTable<T extends Record<string, any>>(
     }
   }
 
-  function handleSmartFiltersApplied(filters: SmartFilter[]) {
+  function handleSmartFiltersApplied(filters: SmartFilter[] | Record<string, any>) {
     applyFilters(filters);
   }