@bettertogether/community-engine-vue 0.1.7 → 0.2.2

package/src/index.js

@@ -1,45 +1,191 @@
-import './plugins'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import BtRouter, { BtRoutes } from './router'
-import BtStore, { BtStoreModules, BtStorePlugins } from './store'
 
 import BtHeader from './components/BtHeader.vue'
 import BtMainContent from './components/BtMainContent.vue'
 import BtNavBar from './components/BtNavBar.vue'
 import BtNavItem from './components/BtNavItem.vue'
 import BtNavUser from './components/BtNavUser.vue'
-
 import BtUserNewPasswordForm from './components/BtUserNewPasswordForm.vue'
 import BtUserResendConfirmationForm from './components/BtUserResendConfirmationForm.vue'
 import BtUserResetPasswordForm from './components/BtUserResetPasswordForm.vue'
 import BtUserSignInForm from './components/BtUserSignInForm.vue'
 import BtUserSignUpForm from './components/BtUserSignUpForm.vue'
+import SyncBadge from './components/sync/SyncBadge.vue'
+import SyncStatusBar from './components/sync/SyncStatusBar.vue'
+import OfflineBanner from './components/sync/OfflineBanner.vue'
+import ExtensionSlot from './components/shared/ExtensionSlot.vue'
+
+import { setCevContext } from './context'
+import { installI18n } from './i18n'
+import { getDb } from './db/client'
+import { startSync } from './db/sync'
+import CommunityCard from './components/community/CommunityCard.vue'
+import CommunityList from './components/community/CommunityList.vue'
+import CommunityHeader from './components/community/CommunityHeader.vue'
+import PersonCard from './components/person/PersonCard.vue'
+import PersonAvatar from './components/person/PersonAvatar.vue'
+import MemberList from './components/person/MemberList.vue'
+import PostCard from './components/post/PostCard.vue'
+import PostList from './components/post/PostList.vue'
+import PostForm from './components/post/PostForm.vue'
+import PostDetail from './components/post/PostDetail.vue'
+import EventCard from './components/event/EventCard.vue'
+import EventList from './components/event/EventList.vue'
+import EventForm from './components/event/EventForm.vue'
+import ConversationCard from './components/conversation/ConversationCard.vue'
+import ConversationList from './components/conversation/ConversationList.vue'
+import ConversationDetail from './components/conversation/ConversationDetail.vue'
+import MessageItem from './components/conversation/MessageItem.vue'
+import MessageList from './components/conversation/MessageList.vue'
+import MessageForm from './components/conversation/MessageForm.vue'
+import InvitationCard from './components/invitation/InvitationCard.vue'
+import InvitationList from './components/invitation/InvitationList.vue'
+import InvitationForm from './components/invitation/InvitationForm.vue'
+import PageCard from './components/page/PageCard.vue'
+import PageList from './components/page/PageList.vue'
+import PageDetail from './components/page/PageDetail.vue'
+import OfferCard from './components/joatu/OfferCard.vue'
+import OfferList from './components/joatu/OfferList.vue'
+import OfferForm from './components/joatu/OfferForm.vue'
+import RequestCard from './components/joatu/RequestCard.vue'
+import RequestList from './components/joatu/RequestList.vue'
+import RequestForm from './components/joatu/RequestForm.vue'
+import AgreementCard from './components/joatu/AgreementCard.vue'
+import AgreementList from './components/joatu/AgreementList.vue'
+import RoleGate from './components/role/RoleGate.vue'
+import BlockButton from './components/role/BlockButton.vue'
+import RoleBadge from './components/role/RoleBadge.vue'
+import RoleSelector from './components/role/RoleSelector.vue'
+import MemberRoleRow from './components/community/MemberRoleRow.vue'
+
+export {
+  useAuthStore,
+  useCommunityStore,
+  useMenuStore,
+  usePeopleStore,
+  useSyncStore,
+} from './stores'
+
+export { getDb, registerExtensionMigration } from './db/client'
+export { startSync } from './db/sync'
+
+export { useResource } from './composables/useResource'
+export { usePosts } from './composables/usePosts'
+export { useEvents } from './composables/useEvents'
+export { useConversations } from './composables/useConversations'
+export { useMessages } from './composables/useMessages'
+export { useInvitations } from './composables/useInvitations'
+export { usePages } from './composables/usePages'
+export { useRoles } from './composables/useRoles'
+export { usePersonBlocks } from './composables/usePersonBlocks'
+export { useJoaTuOffers } from './composables/useJoaTuOffers'
+export { useJoaTuRequests } from './composables/useJoaTuRequests'
+export { useJoaTuAgreements } from './composables/useJoaTuAgreements'
+export { useMembers } from './composables/useMembers'
+export { useNotifications } from './composables/useNotifications'
+export { useSyncStatus } from './composables/useSyncStatus'
+
+export { getCevContext } from './context'
+export { defineExtension } from './extension'
+export { registerSlotInjection, getSlotInjections } from './slot-registry'
+export { createCevI18n, installI18n, registerExtensionMessages } from './i18n'
+export { useI18n } from 'vue-i18n'
+
+export { useCommunities } from './composables/useCommunities'
+export { communityRoutes } from './router/communityRoutes'
+export {
+  CommunityCard,
+  CommunityList,
+  CommunityHeader,
+  PersonCard,
+  PersonAvatar,
+  MemberList,
+  PostCard,
+  PostList,
+  PostForm,
+  PostDetail,
+  EventCard,
+  EventList,
+  EventForm,
+  ConversationCard, ConversationList, ConversationDetail,
+  MessageItem, MessageList, MessageForm,
+  InvitationCard, InvitationList, InvitationForm,
+  PageCard, PageList, PageDetail,
+  OfferCard, OfferList, OfferForm,
+  RequestCard, RequestList, RequestForm,
+  AgreementCard, AgreementList,
+  RoleGate, BlockButton,
+  RoleBadge, RoleSelector, MemberRoleRow,
+}
 
 library.add(faExternalLinkAlt)
 
 const NAME = 'CommunityEngineVue'
 
-const install = (Vue) => {
-  Vue.component('FontAwesomeIcon', FontAwesomeIcon)
-  Vue.component('BtNavUser', BtNavUser)
-  Vue.component('BtUserNewPasswordForm', BtUserNewPasswordForm)
-}
+const install = (app, options = {}) => {
+  app.component('FontAwesomeIcon', FontAwesomeIcon)
+  app.component('BtNavUser', BtNavUser)
+  app.component('BtUserNewPasswordForm', BtUserNewPasswordForm)
+  app.component('ExtensionSlot', ExtensionSlot)
 
-// --- CommunityEngineVue plugin ---
-const CommunityEngineVue = /* #__PURE__ */ {
-  install,
-  NAME,
-}
+  // Install vue-i18n (merges into host app's i18n instance if one exists)
+  installI18n(app, options)
 
-export {
-  install,
-  NAME,
-  CommunityEngineVue,
+  // Apply theme CSS custom properties
+  if (options.theme) {
+    const root = document.documentElement
+    const themeMap = {
+      primary:    '--bt-primary',
+      accent:     '--bt-accent',
+      background: '--bt-background',
+      text:       '--bt-text',
+      fontFamily: '--bt-font-family',
+    }
+    Object.entries(options.theme).forEach(([k, v]) => {
+      if (themeMap[k]) root.style.setProperty(themeMap[k], v)
+    })
+  }
+
+  // Store plugin context so extensions and composables can access app + options
+  setCevContext({ app, options })
+
+  // Start Electric sync if configured (graceful no-op when VITE_ELECTRIC_URL unset)
+  getDb().then(db => startSync(db)).catch(() => { /* Electric not configured */ })
+
+  // Install companion extensions
+  if (options.extensions?.length) {
+    options.extensions.forEach((ext) => {
+      if (ext._install) ext._install()
+    })
+  }
+
+  app.component('BtCommunityCard', CommunityCard)
+  app.component('BtPostCard', PostCard)
+  app.component('BtEventCard', EventCard)
+  app.component('BtPersonCard', PersonCard)
+  app.component('BtPersonAvatar', PersonAvatar)
+  app.component('BtConversationCard', ConversationCard)
+  app.component('BtMessageItem', MessageItem)
+  app.component('BtInvitationCard', InvitationCard)
+  app.component('BtPageCard', PageCard)
+  app.component('BtOfferCard', OfferCard)
+  app.component('BtRequestCard', RequestCard)
+  app.component('BtAgreementCard', AgreementCard)
+  app.component('RoleGate', RoleGate)
+  app.component('BtRoleGate', RoleGate)
+  app.component('BtBlockButton', BlockButton)
+  app.component('BtRoleBadge', RoleBadge)
+  app.component('BtRoleSelector', RoleSelector)
+  app.component('BtMemberRoleRow', MemberRoleRow)
 }
 
+const CommunityEngineVue = { install, NAME }
+
+export { install, NAME, CommunityEngineVue }
 export {
   BtHeader,
   BtMainContent,
@@ -48,15 +194,15 @@ export {
   BtNavUser,
   BtRouter,
   BtRoutes,
-  BtStore,
-  BtStoreModules,
-  BtStorePlugins,
   BtUserNewPasswordForm,
   BtUserResendConfirmationForm,
   BtUserResetPasswordForm,
   BtUserSignInForm,
   BtUserSignUpForm,
+  SyncBadge,
+  SyncStatusBar,
+  OfflineBanner,
+  ExtensionSlot,
 }
-
-// Default export is the CommunityEngineVue plugin
+export { useInstallPrompt, useSwUpdate, getCevWorkboxConfig } from './pwa/index'
 export default CommunityEngineVue

package/src/layouts/CommunityLayout.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="bt-community-layout">
+    <div
+      v-if="loading"
+      class="text-center py-5"
+    >
+      <BSpinner :label="t('bt.communities.loading')" />
+    </div>
+    <div
+      v-else-if="!community"
+      class="container py-5"
+    >
+      <BAlert
+        variant="warning"
+        :model-value="true"
+      >
+        {{ t('bt.communities.not_found') }}
+      </BAlert>
+    </div>
+    <template v-else>
+      <CommunityHeader :community="community" />
+      <nav class="bt-community-nav bg-light border-bottom">
+        <div class="container">
+          <ul class="nav nav-pills py-2">
+            <li
+              v-for="link in communityNav"
+              :key="link.name"
+              class="nav-item"
+            >
+              <RouterLink
+                :to="{ name: link.name, params: { communitySlug: communitySlug } }"
+                class="nav-link"
+                active-class="active"
+              >
+                {{ link.label }}
+              </RouterLink>
+            </li>
+          </ul>
+        </div>
+      </nav>
+      <div class="container py-4">
+        <RouterView />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { BSpinner, BAlert } from 'bootstrap-vue-next'
+import { useCommunityStore } from '../stores/communities'
+import { useCommunities } from '../composables/useCommunities'
+import { useRoles } from '../composables/useRoles'
+import CommunityHeader from '../components/community/CommunityHeader.vue'
+
+const { t } = useI18n()
+const route = useRoute()
+const communityStore = useCommunityStore()
+const { findBySlug, current: community, loading } = useCommunities()
+
+const communitySlug = ref(route.params.communitySlug)
+
+const { hasRole } = useRoles('community', communitySlug)
+
+const communityNav = computed(() => {
+  const links = [
+    { name: 'CommunityHome', label: t('bt.navigation.home') },
+    { name: 'CommunityPosts', label: t('bt.navigation.posts') },
+    { name: 'CommunityEvents', label: t('bt.navigation.events') },
+    { name: 'CommunityMembers', label: t('bt.navigation.members') },
+    { name: 'CommunityConversations', label: t('bt.navigation.conversations') },
+  ]
+  if (hasRole('admin')) {
+    links.push({ name: 'community-settings', label: t('bt.navigation.settings') })
+  }
+  return links
+})
+
+async function loadCommunity(slug) {
+  communitySlug.value = slug
+  const c = await findBySlug(slug)
+  if (c) communityStore.activeCommunity = c
+}
+
+onMounted(() => loadCommunity(route.params.communitySlug))
+watch(() => route.params.communitySlug, (slug) => { if (slug) loadCommunity(slug) })
+</script>

package/src/main.js

@@ -1,16 +1,20 @@
-import '@babel/polyfill'
-import 'mutationobserver-shim'
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import BtApp from './BtApp.vue'
-import './plugins'
-import './registerServiceWorker'
 import router from './router'
-import store from './store'
+import { setupPlugins } from './plugins'
+import { useSyncStore } from './stores/sync'
 
-Vue.config.productionTip = false
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
 
-new Vue({
-  router,
-  store,
-  render: (h) => h(BtApp),
-}).$mount('#app')
+const app = createApp(BtApp)
+app.use(pinia)
+app.use(router)
+setupPlugins(app)
+app.mount('#app')
+
+// Initialize network listeners after mount (store is accessible after pinia is installed)
+const syncStore = useSyncStore()
+syncStore.initNetworkListeners()

package/src/mixins/error-handling.js

@@ -1,26 +1,17 @@
-import toaster from './toaster'
+import { useToaster } from '../composables/useToaster'
 
 export default {
-  mixins: [
-    toaster,
-  ],
   methods: {
     $handleResponseError(response) {
+      const { toast } = useToaster()
       const { status } = response
       let message = ''
-
       switch (status) {
-      case 401:
-        message = response.data.error
-        break
-      case 500:
-        message = 'Sorry, there was a server error. Please try again.'
-        break
-      default:
-        message = 'Sorry, there was an error'
+      case 401: message = response.data.error; break
+      case 500: message = 'Sorry, there was a server error. Please try again.'; break
+      default: message = 'Sorry, there was an error'
       }
-
-      this.$toaster(message, 'danger')
+      toast(message, 'danger')
     },
   },
 }

package/src/mixins/toaster.js

@@ -1,16 +1,21 @@
+import { useToastController } from 'bootstrap-vue-next'
+
+// Legacy mixin — kept for Options API components still being migrated.
+// New components should use useToaster() directly.
 export default {
   methods: {
     $toaster(msg, type = null, opts = {}) {
-      const options = {
-        variant: type,
-        solid: true,
-        autoHideDelay: 2000,
-        ...opts,
-      }
-      this.$bvToast.toast(
-        msg,
-        options,
-      )
+      const { show } = useToastController()
+      show({
+        props: {
+          body: msg,
+          variant: type,
+          solid: true,
+          value: opts.autoHideDelay || 2000,
+          title: opts.title,
+          pos: 'top-end',
+        },
+      })
     },
   },
 }

package/src/pages/Communities.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="bt-communities-page">
+    <div class="container py-4">
+      <div class="d-flex align-items-center justify-content-between mb-4">
+        <h1>{{ t('bt.navigation.communities') }}</h1>
+        <BButton
+          v-if="authStore.isAuthenticated"
+          variant="primary"
+          @click="showCreateForm = true"
+        >
+          {{ t('bt.communities.new') }}
+        </BButton>
+      </div>
+
+      <CommunityList
+        :communities="items"
+        :loading="loading"
+        @view="goToCommunity"
+      />
+
+      <BModal
+        v-model="showCreateForm"
+        :title="t('bt.communities.create')"
+        @ok.prevent="createCommunity"
+      >
+        <CommunityForm @submit="createCommunity" />
+      </BModal>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { BButton, BModal } from 'bootstrap-vue-next'
+import { useAuthStore } from '../stores/auth'
+import { useCommunities } from '../composables/useCommunities'
+import CommunityList from '../components/community/CommunityList.vue'
+import CommunityForm from '../components/CommunityForm.vue'
+
+const { t } = useI18n()
+
+const router = useRouter()
+const authStore = useAuthStore()
+const { items, loading, list, create } = useCommunities()
+const showCreateForm = ref(false)
+
+onMounted(() => list())
+
+function goToCommunity(community) {
+  router.push({ name: 'CommunityHome', params: { communitySlug: community.slug } })
+}
+
+async function createCommunity(formData) {
+  await create(formData)
+  showCreateForm.value = false
+}
+</script>

package/src/pages/Error404.vue

@@ -3,32 +3,28 @@
     <div class="row heading mb-3">
       <div class="col-md">
         <h2 class="mb-4">
-          This is not the page you are looking for
+          {{ t('bt.errors.not_found_heading') }}
         </h2>
-        <p>
-          Looks like the address that you entered does't match a page on our
-          site. Perhaps the page has move to a new address. Please try again.
-        </p>
+        <p>{{ t('bt.errors.not_found_message') }}</p>
         <div class="text-center mt-4">
-          <router-link
+          <RouterLink
             to="/"
-            title="Better Together landing page"
+            :title="t('bt.app.name')"
             class="btn btn-primary card-action"
           >
-            Visit Landing Page
-          </router-link>
+            {{ t('bt.errors.visit_home') }}
+          </RouterLink>
         </div>
       </div>
     </div>
   </section>
 </template>
 
-<script>
-// @ is an alias to /src
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { RouterLink } from 'vue-router'
 
-export default {
-  name: 'Error404',
-}
+const { t } = useI18n()
 </script>
 
 <style lang="scss">

package/src/pages/Home.vue

@@ -1,29 +1,22 @@
 <template>
-  <div
-    id="home"
-    class=""
-  >
-    <section
-      id="introduction"
-    >
+  <div id="home">
+    <section id="introduction">
       <div class="col">
-        <h1>Connect with your communities</h1>
-        <p>
-          The Community Engine platform allows you to connect with others like never before
-        </p>
+        <h1>{{ t('bt.app.home_heading') }}</h1>
+        <p>{{ t('bt.app.home_tagline') }}</p>
       </div>
     </section>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Home',
-}
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 </script>
 
 <style scoped lang="scss">
-  h2 {
-    margin-bottom: 1.5rem;
-  }
+h2 {
+  margin-bottom: 1.5rem;
+}
 </style>