@wishbone-media/spark 0.18.0 → 0.19.0

package/src/composables/useSparkTableRouteSync.js

@@ -0,0 +1,291 @@
+import { watch, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+/**
+ * Composable for syncing SparkTable params with URL query parameters and localStorage
+ *
+ * @param {Object} sparkTable - The sparkTable reactive object
+ * @param {Object} options - Configuration options
+ * @param {string|null} [options.namespace=null] - URL namespace for params. If null, uses flat URLs (?page=1). If string, uses namespaced URLs (?namespace[page]=1)
+ * @param {boolean} [options.syncToRoute=true] - Whether to sync params to URL
+ * @param {boolean} [options.persistToStorage=false] - Whether to persist params to localStorage
+ * @param {boolean} [options.restoreOnMount=true] - Whether to restore params on mount
+ * @param {number} [options.storageTTL=7] - Days to keep localStorage data (0 = no expiry)
+ * @returns {Object} Utility methods for manual control
+ *
+ * @example
+ * // Flat URL sync (clean URLs for single-table pages)
+ * useSparkTableRouteSync(sparkTable, { namespace: null })
+ * // Result: ?page=1&filter[status]=active
+ *
+ * @example
+ * // Namespaced URL sync (for multi-table pages)
+ * useSparkTableRouteSync(sparkTable, { namespace: 'users' })
+ * // Result: ?users[page]=1&users[filter[status]]=active
+ *
+ * @example
+ * // Both URL and localStorage (URL takes precedence)
+ * useSparkTableRouteSync(sparkTable, {
+ *   namespace: null,
+ *   syncToRoute: true,
+ *   persistToStorage: true
+ * })
+ */
+export const useSparkTableRouteSync = (sparkTable, options = {}) => {
+  const router = useRouter()
+  const route = useRoute()
+
+  const namespace = options.namespace // null = flat URLs, string = namespaced URLs
+  const useFlatUrls = namespace === null
+  const syncToRoute = options.syncToRoute !== false
+  const persistToStorage = options.persistToStorage === true
+  const restoreOnMount = options.restoreOnMount !== false
+  const storageTTL = options.storageTTL || 7 // days
+
+  // localStorage key: use namespace if provided, otherwise use route path
+  const storageKey = useFlatUrls ? `spark-table:${route.path}` : `spark-table:${namespace}`
+
+  /**
+   * Flatten nested params into query string format
+   * e.g., { filter: { role: 'admin' } } => { 'filter[role]': 'admin' }
+   */
+  const flattenParams = (params, prefix = '') => {
+    const flattened = {}
+
+    Object.keys(params).forEach((key) => {
+      const value = params[key]
+      const queryKey = prefix ? `${prefix}[${key}]` : key
+
+      if (value !== null && value !== undefined) {
+        if (typeof value === 'object' && !Array.isArray(value)) {
+          // Recursively flatten nested objects
+          Object.assign(flattened, flattenParams(value, queryKey))
+        } else {
+          flattened[queryKey] = String(value)
+        }
+      }
+    })
+
+    return flattened
+  }
+
+  /**
+   * Unflatten query params back to nested structure
+   * e.g., { 'filter[role]': 'admin' } => { filter: { role: 'admin' } }
+   */
+  const unflattenParams = (flatParams) => {
+    const unflattened = {}
+
+    Object.keys(flatParams).forEach((key) => {
+      const value = flatParams[key]
+
+      // Parse bracket notation: "filter[role]" => ["filter", "role"]
+      const matches = key.match(/([^\[]+)(?:\[([^\]]+)\])?/)
+      if (!matches) return
+
+      const [, rootKey, nestedKey] = matches
+
+      if (nestedKey) {
+        // Nested param
+        if (!unflattened[rootKey]) {
+          unflattened[rootKey] = {}
+        }
+        unflattened[rootKey][nestedKey] = value
+      } else {
+        // Top-level param
+        unflattened[rootKey] = value
+      }
+    })
+
+    return unflattened
+  }
+
+  /**
+   * Save params to localStorage with timestamp
+   */
+  const saveToStorage = () => {
+    if (!persistToStorage) return
+
+    try {
+      const data = {
+        params: sparkTable.params,
+        timestamp: Date.now(),
+      }
+      localStorage.setItem(storageKey, JSON.stringify(data))
+    } catch (error) {
+      console.warn('Failed to save table state to localStorage:', error)
+    }
+  }
+
+  /**
+   * Load params from localStorage (respecting TTL)
+   */
+  const loadFromStorage = () => {
+    if (!persistToStorage) return null
+
+    try {
+      const stored = localStorage.getItem(storageKey)
+      if (!stored) return null
+
+      const data = JSON.parse(stored)
+
+      // Check TTL if configured
+      if (storageTTL > 0) {
+        const age = Date.now() - data.timestamp
+        const maxAge = storageTTL * 24 * 60 * 60 * 1000 // days to ms
+
+        if (age > maxAge) {
+          // Expired, clear it
+          localStorage.removeItem(storageKey)
+          return null
+        }
+      }
+
+      return data.params
+    } catch (error) {
+      console.warn('Failed to load table state from localStorage:', error)
+      return null
+    }
+  }
+
+  /**
+   * Clear localStorage for this table
+   */
+  const clearStorage = () => {
+    try {
+      localStorage.removeItem(storageKey)
+    } catch (error) {
+      console.warn('Failed to clear table state from localStorage:', error)
+    }
+  }
+
+  /**
+   * Sync current sparkTable.params to route query
+   */
+  const syncParamsToRoute = () => {
+    if (!syncToRoute) return
+    const currentQuery = { ...route.query }
+
+    if (useFlatUrls) {
+      // Flat mode: remove ALL table-related params from current URL first
+      // This ensures params that were removed from sparkTable.params are also removed from URL
+      Object.keys(currentQuery).forEach((key) => {
+        if (isTableParam(key)) {
+          delete currentQuery[key]
+        }
+      })
+      // Then add back the current params
+      const flattenedParams = flattenParams(sparkTable.params)
+      Object.assign(currentQuery, flattenedParams)
+    } else {
+      // Namespaced mode: remove old namespace params
+      Object.keys(currentQuery).forEach((key) => {
+        if (key.startsWith(`${namespace}[`) || key === namespace) {
+          delete currentQuery[key]
+        }
+      })
+      // Flatten params with namespace prefix
+      const flattenedParams = flattenParams(sparkTable.params, namespace)
+      Object.assign(currentQuery, flattenedParams)
+    }
+
+    // Use replace to avoid polluting history
+    router.replace({ query: currentQuery })
+  }
+
+  /**
+   * Helper to identify if a query param belongs to SparkTable
+   */
+  const isTableParam = (key) => {
+    const tableParams = ['page', 'limit', 'search', 'orderBy', 'sortedBy']
+    if (tableParams.includes(key)) return true
+    if (key.includes('[')) return true // Any bracket notation is likely a filter
+    return false
+  }
+
+  /**
+   * Restore params from route query to sparkTable
+   */
+  const restoreFromRoute = () => {
+    if (useFlatUrls) {
+      // Flat mode: read any query param that looks like a table param
+      Object.keys(route.query).forEach((key) => {
+        if (isTableParam(key)) {
+          sparkTable.params[key] = route.query[key]
+        }
+      })
+    } else {
+      // Namespaced mode: extract params with namespace prefix
+      const prefix = `${namespace}[`
+
+      Object.keys(route.query).forEach((key) => {
+        if (key.startsWith(prefix)) {
+          // Remove namespace prefix and trailing bracket
+          // e.g., "table[selectFilters[is_quote]]" => "selectFilters[is_quote]"
+          // e.g., "table[page]" => "page"
+          const paramKey = key.slice(prefix.length, -1)
+          sparkTable.params[paramKey] = route.query[key]
+        }
+      })
+    }
+  }
+
+  // Watch sparkTable.params and sync to route/storage
+  watch(
+    () => sparkTable.params,
+    () => {
+      if (syncToRoute) {
+        syncParamsToRoute()
+      }
+      if (persistToStorage) {
+        saveToStorage()
+      }
+    },
+    { deep: true },
+  )
+
+  // Restore from route/storage on mount if enabled
+  // Priority: URL params > localStorage > defaults
+  if (restoreOnMount) {
+    onMounted(() => {
+      let hasUrlParams = false
+
+      // First, try to restore from URL
+      if (syncToRoute) {
+        let hasRelevantParams = false
+
+        if (useFlatUrls) {
+          // Flat mode: check if any query param looks like a table param
+          hasRelevantParams = Object.keys(route.query).some((key) => isTableParam(key))
+        } else {
+          // Namespaced mode: check for namespace prefix
+          const prefix = `${namespace}[`
+          hasRelevantParams = Object.keys(route.query).some((key) =>
+            key.startsWith(prefix)
+          )
+        }
+
+        if (hasRelevantParams) {
+          hasUrlParams = true
+          restoreFromRoute()
+        }
+      }
+
+      // If no URL params, try localStorage
+      if (!hasUrlParams && persistToStorage) {
+        const storedParams = loadFromStorage()
+        if (storedParams && Object.keys(storedParams).length > 0) {
+          Object.assign(sparkTable.params, storedParams)
+        }
+      }
+    })
+  }
+
+  return {
+    syncToRoute: syncParamsToRoute,
+    restoreFromRoute,
+    saveToStorage,
+    loadFromStorage,
+    clearStorage,
+  }
+}

package/src/containers/SparkDefaultContainer.vue

@@ -117,7 +117,7 @@
 
           <slot name="header-center">
             <div
-              v-if="appStore.state.showBrandSelector"
+              v-if="showBrandSelector"
               class="absolute left-1/2 -translate-x-1/2 cursor-pointer h-9 flex items-center"
               @click="toggleBrandSelector"
             >
@@ -167,6 +167,7 @@
 
 <script setup>
 import { computed, h, useSlots } from 'vue'
+import { useRoute } from 'vue-router'
 import {
   SparkOverlay,
   SparkBrandSelector,
@@ -196,6 +197,7 @@ const props = defineProps({
 const emit = defineEmits(['overlayClose'])
 
 const slots = useSlots()
+const route = useRoute()
 
 const sparkBrandFilterStore = useSparkBrandFilterStore()
 const sparkAppSelectorStore = useSparkAppSelectorStore()
@@ -204,6 +206,14 @@ const appIcon = computed(() => {
   return sparkAppSelectorStore.getAppIcon(props.appStore.state.app)
 })
 
+const showBrandSelector = computed(() => {
+  // Route meta takes precedence, falls back to app store setting
+  if (route.meta.hideBrandSelector === true) {
+    return false
+  }
+  return props.appStore.state.showBrandSelector
+})
+
 const toggleAppSelector = () => {
   // Create component wrappers for slots if they exist
   const slotProps = {}

package/src/plugins/fontawesome.js

@@ -40,6 +40,8 @@ import {
   faSignOut,
   faEye,
   faUndo,
+  faBolt,
+  faCloudDownload,
 } from '@fortawesome/pro-regular-svg-icons'
 
 import {
@@ -87,6 +89,9 @@ export const Icons = {
   farSignOut: faSignOut,
   farEye: faEye,
   farUndo: faUndo,
+  farBolt: faBolt,
+  farCloudDownload: faCloudDownload,
+
   fadSort: faSortDuotone,
   fadSortDown: faSortDownDuotone,
   fadSortUp: faSortUpDuotone,

package/src/stores/app-selector.js

@@ -2,6 +2,12 @@ import { defineStore } from 'pinia'
 import { computed, reactive } from 'vue'
 
 const DEFAULT_APPS = [
+  {
+    name: 'Bolt',
+    description: 'Job management',
+    href: 'https://bolt-next.letsbolt.io',
+    icon: 'farBolt',
+  },
   {
     name: '3CX',
     description: 'VOIP Phone',
@@ -34,13 +40,13 @@ const DEFAULT_APPS = [
   },
   {
     name: 'ReVuze',
-    description: 'Get Customer feedback',
+    description: 'Get customer feedback',
     href: 'https://revuze-next.letsbolt.io',
     icon: 'farComments',
   },
   {
     name: 'Tabula',
-    description: 'Admin interface',
+    description: 'Admin interface template',
     href: 'https://tabula.letsbolt.io',
     icon: 'farCompass',
   },

package/src/stores/brand-filter.js

@@ -17,7 +17,7 @@ export const useSparkBrandFilterStore = defineStore(
 
     // Validate brand structure
     const validBrands = config.brands.filter((brand) => {
-      const isValid = brand.id && brand.name && brand.logo
+      const isValid = brand.name && brand.logo
       if (!isValid) {
         console.warn('useSparkBrandFilterStore: Invalid brand object', brand)
       }

package/src/stores/navigation.js

@@ -14,6 +14,7 @@ export const useSparkNavStore = defineStore('sparkNav', () => {
 
   const initialize = (menuConfig = []) => {
     state.menu = menuConfig
+    syncWithRoute()
   }
 
   const findMenuItemByRoute = (items, route) => {