@bettertogether/community-engine-vue 0.1.7 → 0.2.2

package/src/pages/community/RoleManagerPage.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="bt-role-manager-page">
+    <RoleGate
+      role="admin"
+      :resource-type="'community'"
+      :resource-id="communitySlug"
+    >
+      <BCard>
+        <template #header>
+          <h2 class="h5 mb-0">
+            {{ t('bt.roles.title') }}
+          </h2>
+        </template>
+
+        <div
+          v-if="loading"
+          class="text-center py-4"
+        >
+          <BSpinner :label="t('bt.person.loading')" />
+        </div>
+
+        <div
+          v-else-if="!items.length"
+          class="text-muted"
+        >
+          {{ t('bt.person.members_empty') }}
+        </div>
+
+        <BTableSimple
+          v-else
+          responsive
+        >
+          <BThead>
+            <BTr>
+              <BTh>{{ t('bt.person.name_label') }}</BTh>
+              <BTh>{{ t('bt.navigation.members') }}</BTh>
+              <BTh>{{ t('bt.roles.assign') }}</BTh>
+              <BTh />
+            </BTr>
+          </BThead>
+          <BTbody>
+            <MemberRoleRow
+              v-for="member in items"
+              :key="member.id"
+              :member="member"
+              resource-type="community"
+              :resource-id="communitySlug"
+            />
+          </BTbody>
+        </BTableSimple>
+
+        <template #footer>
+          <ExtensionSlot
+            target="RoleManagerPage"
+            :context="{ communitySlug }"
+          />
+        </template>
+      </BCard>
+
+      <template #fallback>
+        <BAlert
+          variant="warning"
+          :model-value="true"
+        >
+          {{ t('bt.errors.not_found') }}
+        </BAlert>
+      </template>
+    </RoleGate>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { BCard, BSpinner, BAlert, BTableSimple, BThead, BTbody, BTr, BTh } from 'bootstrap-vue-next'
+import { useMembers } from '../../composables/useMembers'
+import { useRoles } from '../../composables/useRoles'
+import RoleGate from '../../components/role/RoleGate.vue'
+import MemberRoleRow from '../../components/community/MemberRoleRow.vue'
+import ExtensionSlot from '../../components/shared/ExtensionSlot.vue'
+
+const { t } = useI18n()
+const route = useRoute()
+const communitySlug = route.params.communitySlug
+
+const { items, loading, listActive } = useMembers(communitySlug)
+const { loadRoles } = useRoles('community', communitySlug)
+
+onMounted(async () => {
+  await Promise.all([listActive(), loadRoles()])
+})
+</script>

package/src/plugins/bootstrap-vue.js

@@ -1,7 +1,7 @@
-import Vue from 'vue'
-
-import BootstrapVue from 'bootstrap-vue'
+import { createBootstrap } from 'bootstrap-vue-next'
 import 'bootstrap/dist/css/bootstrap.min.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
 
-Vue.use(BootstrapVue)
+export function setupBootstrapVue(app) {
+  app.use(createBootstrap())
+}

package/src/plugins/font-awesome.js

@@ -1,8 +1,9 @@
-import Vue from 'vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(faExternalLinkAlt)
 
-Vue.component('FontAwesomeIcon', FontAwesomeIcon)
+export function setupFontAwesome(app) {
+  app.component('FontAwesomeIcon', FontAwesomeIcon)
+}

package/src/plugins/index.js

@@ -1,4 +1,9 @@
-import './bootstrap-vue'
-import './font-awesome'
-import './vue-form-generator'
-import './vue-loading'
+import { setupBootstrapVue } from './bootstrap-vue'
+import { setupFontAwesome } from './font-awesome'
+import { setupProgress } from './progress'
+
+export function setupPlugins(app) {
+  setupBootstrapVue(app)
+  setupFontAwesome(app)
+  setupProgress()
+}

package/src/plugins/progress.js

@@ -0,0 +1,16 @@
+import NProgress from 'nprogress'
+import axios from 'axios'
+import 'nprogress/nprogress.css'
+
+NProgress.configure({ showSpinner: false, color: '#42b983', height: '3px' })
+
+export function setupProgress() {
+  axios.interceptors.request.use((config) => {
+    NProgress.start()
+    return config
+  })
+  axios.interceptors.response.use(
+    (response) => { NProgress.done(); return response },
+    (error) => { NProgress.done(); return Promise.reject(error) },
+  )
+}

package/src/pwa/index.js

@@ -0,0 +1,156 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const DISMISS_KEY = 'cev_install_prompt_dismissed_until'
+const DISMISS_DURATION_MS = 30 * 24 * 60 * 60 * 1000 // 30 days
+
+/**
+ * useInstallPrompt
+ *
+ * Wraps the `beforeinstallprompt` browser event so host apps can show their own
+ * install UI without duplicating event-handling logic.
+ *
+ * Returns:
+ *   canInstall  — true when a deferred prompt is available AND not recently dismissed
+ *   install()   — triggers the native install prompt; resolves with { outcome }
+ *   dismiss()   — hides the prompt for 30 days (stored in localStorage)
+ */
+export function useInstallPrompt() {
+  const canInstall = ref(false)
+  let deferredPrompt = null
+
+  function isDismissed() {
+    if (typeof window === 'undefined') return false
+    const until = localStorage.getItem(DISMISS_KEY)
+    return until ? Date.now() < Number(until) : false
+  }
+
+  function onBeforeInstallPrompt(e) {
+    e.preventDefault()
+    deferredPrompt = e
+    canInstall.value = !isDismissed()
+  }
+
+  async function install() {
+    if (!deferredPrompt) return { outcome: 'dismissed' }
+    deferredPrompt.prompt()
+    const choice = await deferredPrompt.userChoice
+    deferredPrompt = null
+    canInstall.value = false
+    return choice
+  }
+
+  function dismiss() {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(DISMISS_KEY, String(Date.now() + DISMISS_DURATION_MS))
+    }
+    canInstall.value = false
+  }
+
+  onMounted(() => {
+    if (typeof window === 'undefined') return
+    window.addEventListener('beforeinstallprompt', onBeforeInstallPrompt)
+  })
+
+  onUnmounted(() => {
+    if (typeof window === 'undefined') return
+    window.removeEventListener('beforeinstallprompt', onBeforeInstallPrompt)
+  })
+
+  return { canInstall, install, dismiss }
+}
+
+/**
+ * useSwUpdate
+ *
+ * Listens for the `sw-updated` custom event dispatched by the service worker
+ * (via the SW message channel or vite-plugin-pwa's built-in hook) and exposes
+ * a reactive flag plus an `applyUpdate()` helper to skip waiting and reload.
+ *
+ * Returns:
+ *   updateAvailable — true when a new SW version is waiting to activate
+ *   applyUpdate()   — tells the waiting SW to skip waiting, then reloads the page
+ */
+export function useSwUpdate() {
+  const updateAvailable = ref(false)
+  let registration = null
+
+  function onSwUpdated(e) {
+    registration = e.detail?.registration ?? null
+    updateAvailable.value = true
+  }
+
+  function applyUpdate() {
+    if (!updateAvailable.value) return
+    const sw = registration?.waiting
+    if (sw) {
+      sw.postMessage({ type: 'SKIP_WAITING' })
+    }
+    // Reload after a short tick so the new SW has time to claim clients
+    window.location.reload()
+  }
+
+  onMounted(() => {
+    if (typeof window === 'undefined') return
+    if (!('serviceWorker' in navigator)) return
+    window.addEventListener('sw-updated', onSwUpdated)
+  })
+
+  onUnmounted(() => {
+    if (typeof window === 'undefined') return
+    window.removeEventListener('sw-updated', onSwUpdated)
+  })
+
+  return { updateAvailable, applyUpdate }
+}
+
+/**
+ * getCevWorkboxConfig
+ *
+ * Returns an array of Workbox `runtimeCaching` entries recommended for
+ * Community Engine host apps.  Spread (or merge) this into the `workbox`
+ * option of vite-plugin-pwa's `VitePWA()` call in the host app's vite.config.js.
+ *
+ * Covered routes:
+ *   - /bt/api/* (excluding /bt/api/auth/*) → NetworkFirst, 5s timeout, 24h TTL
+ *   - Images / uploads                     → CacheFirst, 100 entries, 7-day TTL
+ *   - Web fonts                            → StaleWhileRevalidate
+ *
+ * NOT cached (by design):
+ *   - /bt/api/auth/* — always network-only (auth tokens must never be cached)
+ *   - idb:// — PGlite IndexedDB (never touches the network layer)
+ */
+export function getCevWorkboxConfig() {
+  return [
+    {
+      // CE Rails JSON:API — skip auth routes
+      urlPattern: /\/bt\/api\/(?!auth\/).*/i,
+      handler: 'NetworkFirst',
+      options: {
+        cacheName: 'ce-api-cache',
+        networkTimeoutSeconds: 5,
+        expiration: { maxAgeSeconds: 60 * 60 * 24 },
+        cacheableResponse: { statuses: [0, 200] },
+      },
+    },
+    {
+      // Images and user uploads
+      urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp)$/i,
+      handler: 'CacheFirst',
+      options: {
+        cacheName: 'ce-image-cache',
+        expiration: { maxEntries: 100, maxAgeSeconds: 60 * 60 * 24 * 7 },
+        cacheableResponse: { statuses: [0, 200] },
+      },
+    },
+    {
+      // Web fonts — serve cached immediately, refresh in background
+      urlPattern: /\.(?:woff|woff2|ttf|otf|eot)$/i,
+      handler: 'StaleWhileRevalidate',
+      options: {
+        cacheName: 'ce-font-cache',
+        expiration: { maxEntries: 30, maxAgeSeconds: 60 * 60 * 24 * 365 },
+        cacheableResponse: { statuses: [0, 200] },
+      },
+    },
+  ]
+}

package/src/pwa/sw-helpers.js

@@ -0,0 +1,130 @@
+/**
+ * sw-helpers.js — Service Worker context helpers for Community Engine host apps.
+ *
+ * Import this file from your host app's custom service worker entry point
+ * (e.g. `src/sw.js`) alongside vite-plugin-pwa's Workbox integration.
+ *
+ * ⚠️  This file runs INSIDE the service worker — do NOT import Vue or any
+ *     browser-DOM API here.  Only Web Worker / Workbox globals are available.
+ *
+ * Usage in host app sw.js:
+ *   import { registerBackgroundSyncRoutes } from '@bettertogether/community-engine-vue/pwa/sw-helpers'
+ *   import { precacheAndRoute } from 'workbox-precaching'
+ *   import { registerRoute }    from 'workbox-routing'
+ *
+ *   precacheAndRoute(self.__WB_MANIFEST)
+ *   registerBackgroundSyncRoutes({ registerRoute })
+ */
+
+/**
+ * registerBackgroundSyncRoutes({ registerRoute })
+ *
+ * Registers Workbox routes that queue failed CE API mutation requests
+ * (POST / PATCH / DELETE to /bt/api/*) into a BackgroundSync queue.
+ * When the browser reconnects — even if the tab is closed — the browser
+ * replays the queued requests automatically via the Background Sync API.
+ *
+ * This complements CEV's `drainSyncQueue()` (which runs while the tab is open)
+ * by handling the closed-tab / connectivity-lost scenario.
+ *
+ * @param {object} workboxModules
+ * @param {Function} workboxModules.registerRoute - workbox-routing registerRoute
+ * @param {Function} [workboxModules.NetworkOnly]  - workbox-strategies NetworkOnly (loaded lazily if omitted)
+ * @param {Function} [workboxModules.BackgroundSyncPlugin] - workbox-background-sync BackgroundSyncPlugin
+ */
+export function registerBackgroundSyncRoutes({
+  registerRoute,
+  NetworkOnly,
+  BackgroundSyncPlugin,
+}) {
+  // Allow host apps to pass in pre-imported Workbox classes, or fall back to
+  // dynamic require() in SW context (works with Workbox's module bundling).
+  const NetworkOnlyStrategy = NetworkOnly ?? (() => {
+    // eslint-disable-next-line no-undef
+    const { NetworkOnly: NO } = require('workbox-strategies')
+    return NO
+  })()
+
+  const BgSyncPlugin = BackgroundSyncPlugin ?? (() => {
+    // eslint-disable-next-line no-undef
+    const { BackgroundSyncPlugin: BSP } = require('workbox-background-sync')
+    return BSP
+  })()
+
+  const bgSyncPlugin = new BgSyncPlugin('ce-api-mutation-queue', {
+    maxRetentionTime: 24 * 60, // Retry for up to 24 hours (in minutes)
+    onSync: async ({ queue }) => {
+      // Replay all queued requests; broadcast result to open tabs
+      let entry
+      while ((entry = await queue.shiftRequest())) {
+        try {
+          await fetch(entry.request)
+          broadcastSyncEvent('ce-bg-sync-replayed', { url: entry.request.url })
+        } catch {
+          await queue.unshiftRequest(entry)
+          broadcastSyncEvent('ce-bg-sync-failed', { url: entry.request.url })
+          throw new Error('Background sync replay failed — will retry')
+        }
+      }
+    },
+  })
+
+  // Queue POST / PATCH / DELETE to CE API (excluding auth routes)
+  registerRoute(
+    ({ url, request }) =>
+      /\/bt\/api\/(?!auth\/)/.test(url.pathname) &&
+      ['POST', 'PATCH', 'DELETE'].includes(request.method),
+    new NetworkOnlyStrategy({ plugins: [bgSyncPlugin] }),
+    'POST',
+  )
+
+  registerRoute(
+    ({ url, request }) =>
+      /\/bt\/api\/(?!auth\/)/.test(url.pathname) &&
+      ['POST', 'PATCH', 'DELETE'].includes(request.method),
+    new NetworkOnlyStrategy({ plugins: [bgSyncPlugin] }),
+    'PATCH',
+  )
+
+  registerRoute(
+    ({ url, request }) =>
+      /\/bt\/api\/(?!auth\/)/.test(url.pathname) &&
+      ['POST', 'PATCH', 'DELETE'].includes(request.method),
+    new NetworkOnlyStrategy({ plugins: [bgSyncPlugin] }),
+    'DELETE',
+  )
+}
+
+/**
+ * broadcastSyncEvent(type, detail)
+ *
+ * Posts a message to all controlled tabs so the app can react to background
+ * sync replay events (e.g. re-run drainSyncQueue to refresh the pending count).
+ *
+ * @param {string} type   - event type string forwarded as `data.type`
+ * @param {object} detail - arbitrary payload
+ */
+export function broadcastSyncEvent(type, detail = {}) {
+  // self.clients is only available in SW context
+  if (typeof self === 'undefined' || !self.clients) return
+  self.clients.matchAll({ includeUncontrolled: false, type: 'window' }).then((clients) => {
+    clients.forEach((client) => client.postMessage({ type, ...detail }))
+  })
+}
+
+/**
+ * dispatchSwUpdatedEvent(registration)
+ *
+ * Call this from your SW update handler to emit the `sw-updated` DOM event
+ * that CEV's `useSwUpdate()` composable listens for.
+ *
+ * Typically wired up in vite-plugin-pwa's `onRegisteredSW` / `onNeedRefresh`
+ * callback in the host app rather than in the SW file itself, but provided
+ * here for completeness.
+ *
+ * @param {ServiceWorkerRegistration} registration
+ */
+export function dispatchSwUpdatedEvent(registration) {
+  if (typeof window === 'undefined') return
+  window.dispatchEvent(new CustomEvent('sw-updated', { detail: { registration } }))
+}

package/src/router/communityRoutes.js

@@ -0,0 +1,78 @@
+import CommunityLayout from '../layouts/CommunityLayout.vue'
+
+export const communityRoutes = [
+  {
+    path: '/communities/:communitySlug',
+    component: CommunityLayout,
+    children: [
+      {
+        path: '',
+        name: 'CommunityHome',
+        component: () => import('../pages/community/CommunityHome.vue'),
+        meta: { requiresAuth: false },
+      },
+      {
+        path: 'posts',
+        name: 'CommunityPosts',
+        component: () => import('../pages/community/CommunityPosts.vue'),
+      },
+      {
+        path: 'posts/:id',
+        name: 'CommunityPost',
+        component: () => import('../pages/community/CommunityPost.vue'),
+      },
+      {
+        path: 'events',
+        name: 'CommunityEvents',
+        component: () => import('../pages/community/CommunityEvents.vue'),
+      },
+      {
+        path: 'events/:id',
+        name: 'CommunityEvent',
+        component: () => import('../pages/community/CommunityEvent.vue'),
+      },
+      {
+        path: 'members',
+        name: 'CommunityMembers',
+        component: () => import('../pages/community/CommunityMembers.vue'),
+      },
+      {
+        path: 'conversations',
+        name: 'CommunityConversations',
+        component: () => import('../pages/community/CommunityConversations.vue'),
+      },
+      {
+        path: 'conversations/:id',
+        name: 'CommunityConversation',
+        component: () => import('../pages/community/CommunityConversation.vue'),
+      },
+      {
+        path: 'pages',
+        name: 'CommunityPages',
+        component: () => import('../pages/community/CommunityPages.vue'),
+      },
+      {
+        path: 'pages/:id',
+        name: 'CommunityPage',
+        component: () => import('../pages/community/CommunityPage.vue'),
+      },
+      {
+        path: 'joatu',
+        name: 'CommunityJoaTu',
+        component: () => import('../pages/community/CommunityJoaTu.vue'),
+      },
+      {
+        path: 'settings',
+        name: 'community-settings',
+        component: () => import('../pages/community/CommunitySettingsPage.vue'),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: 'settings/roles',
+        name: 'community-role-manager',
+        component: () => import('../pages/community/RoleManagerPage.vue'),
+        meta: { requiresAuth: true },
+      },
+    ],
+  },
+]