@bettertogether/community-engine-vue 0.1.7 → 0.2.3

package/src/components/sync/SyncStatusBar.vue

@@ -0,0 +1,121 @@
+<template>
+  <Transition name="sync-bar-fade">
+    <div
+      v-if="showBar"
+      class="sync-status-bar"
+      :class="barClass"
+      role="status"
+      :aria-live="syncStore.online ? 'polite' : 'assertive'"
+    >
+      <span class="sync-status-bar__icon">
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span v-if="!syncStore.online">⚡</span>
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span v-else-if="syncStore.syncing" class="sync-spin-icon">↻</span>
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span v-else>↻</span>
+      </span>
+      <span class="sync-status-bar__text">{{ statusText }}</span>
+      <span
+        v-if="syncStore.online && syncStore.electricConnected"
+        class="sync-status-bar__electric"
+        title="Electric sync connected"
+      >
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span class="sync-electric-dot" aria-hidden="true">●</span>
+      </span>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useSyncStore } from '../../stores/sync'
+
+const { t } = useI18n()
+const syncStore = useSyncStore()
+
+const showBar = computed(
+  () => !syncStore.online || syncStore.syncing || syncStore.pendingCount > 0,
+)
+
+const barClass = computed(() => ({
+  'sync-status-bar--offline': !syncStore.online,
+  'sync-status-bar--syncing': syncStore.online && (syncStore.syncing || syncStore.pendingCount > 0),
+}))
+
+const statusText = computed(() => {
+  if (!syncStore.online) {
+    const n = syncStore.pendingCount
+    return n > 0
+      ? `${t('bt.sync.status_bar_offline')} — ${t('bt.sync.pending_count', n)}`
+      : t('bt.sync.status_bar_offline')
+  }
+  if (syncStore.syncing || syncStore.pendingCount > 0) {
+    return t('bt.sync.pending_count', syncStore.pendingCount)
+  }
+  return ''
+})
+</script>
+
+<style scoped lang="scss">
+@import '../../stylesheets/sync-indicators.scss';
+
+.sync-status-bar {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 4px 12px;
+  font-size: 0.82rem;
+  font-weight: 500;
+  transition: background-color 0.3s;
+
+  &--offline {
+    background-color: $sync-local;
+    color: #1a1a1a;
+    height: $sync-bar-height-offline;
+  }
+
+  &--syncing {
+    background-color: $sync-syncing;
+    color: white;
+    height: $sync-bar-height-offline;
+  }
+
+  &__icon {
+    font-size: 1rem;
+    line-height: 1;
+  }
+}
+
+.sync-spin-icon {
+  display: inline-block;
+  animation: sync-spin 1s linear infinite;
+}
+
+.sync-status-bar__electric {
+  margin-left: 6px;
+  font-size: 0.65rem;
+  color: #4caf50;
+  line-height: 1;
+}
+
+.sync-bar-fade-enter-active,
+.sync-bar-fade-leave-active {
+  transition: opacity 0.3s, max-height 0.3s;
+  max-height: 40px;
+}
+
+.sync-bar-fade-enter-from,
+.sync-bar-fade-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+</style>

package/src/composables/useCommunities.js

@@ -0,0 +1,19 @@
+import { useResource } from './useResource'
+import { getDb } from '../db/client'
+
+export function useCommunities() {
+  const resource = useResource('communities')
+
+  async function findBySlug(slug) {
+    const db = await getDb()
+    const { rows } = await db.query('SELECT * FROM communities WHERE slug = $1 LIMIT 1', [slug])
+    resource.current.value = rows[0] ?? null
+    return resource.current.value
+  }
+
+  async function listPublic() {
+    return resource.list({ privacy: 'public' })
+  }
+
+  return { ...resource, findBySlug, listPublic }
+}

package/src/composables/useConversations.js

@@ -0,0 +1,5 @@
+import { useResource } from './useResource'
+
+export function useConversations(communityId = null) {
+  return useResource('conversations', communityId ? { community_id: communityId } : {})
+}

package/src/composables/useEvents.js

@@ -0,0 +1,28 @@
+import { useResource } from './useResource'
+import { getDb } from '../db/client'
+
+export function useEvents(communityId = null) {
+  const resource = useResource('events', communityId ? { community_id: communityId } : {})
+
+  async function listUpcoming(_extraFilters = {}) {
+    const db = await getDb()
+    const now = new Date().toISOString()
+    if (communityId) {
+      const { rows } = await db.query(
+        'SELECT * FROM events WHERE starts_at >= $1 AND community_id = $2 ORDER BY starts_at ASC',
+        [now, communityId],
+      )
+      resource.items.value = rows
+      return rows
+    } else {
+      const { rows } = await db.query(
+        'SELECT * FROM events WHERE starts_at >= $1 ORDER BY starts_at ASC',
+        [now],
+      )
+      resource.items.value = rows
+      return rows
+    }
+  }
+
+  return { ...resource, listUpcoming }
+}

package/src/composables/useInvitations.js

@@ -0,0 +1,10 @@
+import { computed } from 'vue'
+import { useResource } from './useResource'
+
+export function useInvitations(communityId = null) {
+  const filters = communityId ? { community_id: communityId } : {}
+  const resource = useResource('invitations', filters)
+  const pending = computed(() => resource.items.value.filter((i) => i.status === 'pending'))
+  const accepted = computed(() => resource.items.value.filter((i) => i.status === 'accepted'))
+  return { ...resource, pending, accepted }
+}

package/src/composables/useJoaTuAgreements.js

@@ -0,0 +1,11 @@
+import { computed } from 'vue'
+import { useResource } from './useResource'
+
+export function useJoaTuAgreements(communityId = null) {
+  const filters = communityId ? { community_id: communityId } : {}
+  const resource = useResource('joa_tu_agreements', filters)
+  const pending = computed(() => resource.items.value.filter((a) => a.status === 'pending'))
+  const active = computed(() => resource.items.value.filter((a) => a.status === 'active'))
+  const completed = computed(() => resource.items.value.filter((a) => a.status === 'completed'))
+  return { ...resource, pending, active, completed }
+}

package/src/composables/useJoaTuOffers.js

@@ -0,0 +1,10 @@
+import { computed } from 'vue'
+import { useResource } from './useResource'
+
+export function useJoaTuOffers(communityId = null) {
+  const filters = communityId ? { community_id: communityId } : {}
+  const resource = useResource('joa_tu_offers', filters)
+  const open = computed(() => resource.items.value.filter((o) => o.status === 'open'))
+  const fulfilled = computed(() => resource.items.value.filter((o) => o.status === 'fulfilled'))
+  return { ...resource, open, fulfilled }
+}

package/src/composables/useJoaTuRequests.js

@@ -0,0 +1,10 @@
+import { computed } from 'vue'
+import { useResource } from './useResource'
+
+export function useJoaTuRequests(communityId = null) {
+  const filters = communityId ? { community_id: communityId } : {}
+  const resource = useResource('joa_tu_requests', filters)
+  const open = computed(() => resource.items.value.filter((r) => r.status === 'open'))
+  const fulfilled = computed(() => resource.items.value.filter((r) => r.status === 'fulfilled'))
+  return { ...resource, open, fulfilled }
+}

package/src/composables/useMembers.js

@@ -0,0 +1,30 @@
+import { useResource } from './useResource'
+import { getDb } from '../db/client'
+
+export function useMembers(communityId = null) {
+  const resource = useResource(
+    'person_community_memberships',
+    communityId ? { community_id: communityId } : {},
+  )
+
+  async function listActive() {
+    const db = await getDb()
+    if (communityId) {
+      const { rows } = await db.query(
+        'SELECT * FROM person_community_memberships WHERE left_at IS NULL AND community_id = $1 ORDER BY joined_at DESC',
+        [communityId],
+      )
+      resource.items.value = rows
+      return rows
+    } else {
+      const { rows } = await db.query(
+        'SELECT * FROM person_community_memberships WHERE left_at IS NULL ORDER BY joined_at DESC',
+        [],
+      )
+      resource.items.value = rows
+      return rows
+    }
+  }
+
+  return { ...resource, listActive }
+}

package/src/composables/useMessages.js

@@ -0,0 +1,5 @@
+import { useResource } from './useResource'
+
+export function useMessages(conversationId = null) {
+  return useResource('messages', conversationId ? { conversation_id: conversationId } : {})
+}

package/src/composables/useNotifications.js

@@ -0,0 +1,5 @@
+import { useResource } from './useResource'
+
+export function useNotifications(personId = null) {
+  return useResource('notifications', personId ? { person_id: personId } : {})
+}

package/src/composables/usePages.js

@@ -0,0 +1,6 @@
+import { useResource } from './useResource'
+
+export function usePages(communityId = null) {
+  const filters = communityId ? { community_id: communityId } : {}
+  return useResource('pages', filters)
+}

package/src/composables/usePersonBlocks.js

@@ -0,0 +1,65 @@
+import { useResource } from './useResource'
+import { useAuthStore } from '../stores/auth'
+
+/**
+ * usePersonBlocks — manage block relationships.
+ *
+ * A block is one-directional: blocker_id → blocked_id.
+ * Blocked people are hidden from lists and cannot interact.
+ */
+export function usePersonBlocks() {
+  const auth = useAuthStore()
+  const blocksResource = useResource('person_blocks')
+
+  const { items: blocks, loading, create, destroy, list } = blocksResource
+
+  async function blockPerson(blockedId, reason = null) {
+    const { nanoid } = await import('nanoid')
+    return create({
+      id: nanoid(),
+      blocker_id: auth.personId,
+      blocked_id: blockedId,
+      reason,
+    })
+  }
+
+  async function unblockPerson(blockedId) {
+    const record = blocks.value.find(
+      b => b.blocker_id === auth.personId && b.blocked_id === blockedId
+    )
+    if (record) return destroy(record.id)
+  }
+
+  function isBlocked(personId) {
+    return blocks.value.some(
+      b => b.blocker_id === auth.personId && b.blocked_id === personId
+    )
+  }
+
+  function isBlockedBy(personId) {
+    return blocks.value.some(
+      b => b.blocker_id === personId && b.blocked_id === auth.personId
+    )
+  }
+
+  // Filter a list of people/items, removing any that are blocked
+  function filterBlocked(items, idKey = 'id') {
+    const blockedIds = new Set(
+      blocks.value
+        .filter(b => b.blocker_id === auth.personId)
+        .map(b => b.blocked_id)
+    )
+    return items.filter(item => !blockedIds.has(item[idKey]))
+  }
+
+  return {
+    blocks,
+    loading,
+    loadBlocks: list,
+    blockPerson,
+    unblockPerson,
+    isBlocked,
+    isBlockedBy,
+    filterBlocked,
+  }
+}

package/src/composables/usePosts.js

@@ -0,0 +1,27 @@
+import { useResource } from './useResource'
+import { getDb } from '../db/client'
+
+export function usePosts(communityId = null) {
+  const resource = useResource('posts', communityId ? { community_id: communityId } : {})
+
+  async function listPublished(_extraFilters = {}) {
+    const db = await getDb()
+    if (communityId) {
+      const { rows } = await db.query(
+        'SELECT * FROM posts WHERE published_at IS NOT NULL AND community_id = $1 ORDER BY published_at DESC',
+        [communityId],
+      )
+      resource.items.value = rows
+      return rows
+    } else {
+      const { rows } = await db.query(
+        'SELECT * FROM posts WHERE published_at IS NOT NULL ORDER BY published_at DESC',
+        [],
+      )
+      resource.items.value = rows
+      return rows
+    }
+  }
+
+  return { ...resource, listPublished }
+}

package/src/composables/useResource.js

@@ -0,0 +1,137 @@
+import { ref, computed } from 'vue'
+import { getDb } from '../db/client'
+import { useSyncStore } from '../stores/sync'
+
+function buildWhereClause(filters) {
+  const conditions = Object.entries(filters)
+    .filter(([, v]) => v != null)
+    .map(([k]) => `${k} = ?`)
+  return conditions.length ? `WHERE ${conditions.join(' AND ')}` : ''
+}
+
+function buildWhereValues(filters) {
+  return Object.entries(filters)
+    .filter(([, v]) => v != null)
+    .map(([, v]) => v)
+}
+
+function buildInsertSql(table, row) {
+  const cols = Object.keys(row)
+  const placeholders = cols.map(() => '?').join(', ')
+  return `INSERT INTO ${table} (${cols.join(', ')}) VALUES (${placeholders})`
+}
+
+function buildUpdateSql(table, attrs) {
+  const sets = Object.keys(attrs).map((k) => `${k} = ?`).join(', ')
+  return `UPDATE ${table} SET ${sets} WHERE id = ?`
+}
+
+export function useResource(table, defaultFilters = {}) {
+  const items = ref([])
+  const current = ref(null)
+  const loading = ref(false)
+  const error = ref(null)
+
+  const pendingCount = computed(() => items.value.filter((i) => i._sync_status === 'local').length)
+
+  async function list(extraFilters = {}) {
+    loading.value = true
+    error.value = null
+    try {
+      const db = await getDb()
+      const filters = { ...defaultFilters, ...extraFilters }
+      const where = buildWhereClause(filters)
+      const vals = buildWhereValues(filters)
+      const result = await db.query(
+        `SELECT * FROM ${table} ${where} ORDER BY _local_updated DESC`,
+        vals,
+      )
+      items.value = result.rows
+      const sync = useSyncStore()
+      sync.setPendingCount(result.rows.filter((r) => r._sync_status === 'local').length)
+      return result.rows
+    } catch (e) {
+      error.value = e
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function get(id) {
+    loading.value = true
+    error.value = null
+    try {
+      const db = await getDb()
+      const result = await db.query(`SELECT * FROM ${table} WHERE id = $1`, [id])
+      current.value = result.rows[0] ?? null
+      return current.value
+    } catch (e) {
+      error.value = e
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function create(attrs) {
+    const db = await getDb()
+    const id = attrs.id || crypto.randomUUID()
+    const now = new Date().toISOString()
+    const row = {
+      id,
+      ...attrs,
+      _sync_status: 'local',
+      _local_updated: now,
+    }
+    await db.query(buildInsertSql(table, row), Object.values(row))
+    items.value.unshift(row)
+    return row
+  }
+
+  async function update(id, attrs) {
+    const db = await getDb()
+    const now = new Date().toISOString()
+    const updates = { ...attrs, _sync_status: 'local', _local_updated: now }
+    await db.query(buildUpdateSql(table, updates), [...Object.values(updates), id])
+    const idx = items.value.findIndex((i) => i.id === id)
+    if (idx >= 0) items.value[idx] = { ...items.value[idx], ...updates }
+    if (current.value?.id === id) current.value = { ...current.value, ...updates }
+    return items.value[idx] ?? current.value
+  }
+
+  async function destroy(id) {
+    const db = await getDb()
+    await db.query(`DELETE FROM ${table} WHERE id = $1`, [id])
+    items.value = items.value.filter((i) => i.id !== id)
+    if (current.value?.id === id) current.value = null
+  }
+
+  async function markSynced(id, serverAt = null) {
+    const db = await getDb()
+    const now = serverAt || new Date().toISOString()
+    await db.query(
+      `UPDATE ${table} SET _sync_status = 'synced', _server_at = ? WHERE id = ?`,
+      [now, id],
+    )
+    const idx = items.value.findIndex((i) => i.id === id)
+    if (idx >= 0) items.value[idx] = { ...items.value[idx], _sync_status: 'synced', _server_at: now }
+    if (current.value?.id === id) {
+      current.value = { ...current.value, _sync_status: 'synced', _server_at: now }
+    }
+  }
+
+  return {
+    items,
+    current,
+    loading,
+    error,
+    pendingCount,
+    list,
+    get,
+    create,
+    update,
+    destroy,
+    markSynced,
+  }
+}

package/src/composables/useRoles.js

@@ -0,0 +1,94 @@
+import { computed } from 'vue'
+import { useResource } from './useResource'
+import { useAuthStore } from '../stores/auth'
+
+/**
+ * useRoles — manages roles and person_roles assignments.
+ *
+ * Roles are scoped to a resource (community, etc.) or global (resource_type = null).
+ * The current person's effective roles are derived from their person_roles records.
+ */
+export function useRoles(resourceType = null, resourceId = null) {
+  const auth = useAuthStore()
+
+  const rolesResource = useResource('roles')
+  const personRolesResource = useResource('person_roles')
+
+  // All roles for this resource scope
+  const scopedRoles = computed(() =>
+    rolesResource.items.value.filter(r =>
+      r.resource_type === resourceType && r.resource_id === resourceId
+    )
+  )
+
+  // Current person's role assignments in this scope
+  const myAssignments = computed(() =>
+    personRolesResource.items.value.filter(pr =>
+      pr.person_id === auth.personId &&
+      pr.resource_type === resourceType &&
+      pr.resource_id === resourceId
+    )
+  )
+
+  // Slugs the current person holds in this scope
+  const mySlugs = computed(() => {
+    const assignedRoleIds = new Set(myAssignments.value.map(pr => pr.role_id))
+    return rolesResource.items.value
+      .filter(r => assignedRoleIds.has(r.id))
+      .map(r => r.slug)
+  })
+
+  /**
+   * Check if the current person has a given role slug in this scope.
+   * Also returns true for 'admin' if the person has any admin role anywhere.
+   */
+  function hasRole(slug) {
+    return mySlugs.value.includes(slug)
+  }
+
+  /**
+   * Check if person has any of the given role slugs.
+   */
+  function hasAnyRole(...slugs) {
+    return slugs.some(s => hasRole(s))
+  }
+
+  async function loadRoles() {
+    await rolesResource.list()
+    await personRolesResource.list()
+  }
+
+  async function grantRole(personId, roleId) {
+    const { nanoid } = await import('nanoid')
+    return personRolesResource.create({
+      id: nanoid(),
+      person_id: personId,
+      role_id: roleId,
+      resource_type: resourceType,
+      resource_id: resourceId,
+      granted_by_id: auth.personId,
+    })
+  }
+
+  async function revokeRole(personRoleId) {
+    return personRolesResource.destroy(personRoleId)
+  }
+
+  return {
+    // Data
+    roles: rolesResource.items,
+    personRoles: personRolesResource.items,
+    scopedRoles,
+    myAssignments,
+    mySlugs,
+    // Checks
+    hasRole,
+    hasAnyRole,
+    // Actions
+    loadRoles,
+    grantRole,
+    revokeRole,
+    // Loading state
+    loading: rolesResource.loading,
+  }
+}

package/src/composables/useSyncStatus.js

@@ -0,0 +1,22 @@
+import { computed } from 'vue'
+
+export function useSyncStatus(item) {
+  const syncStatus = computed(() => item?.value?._sync_status ?? item?._sync_status ?? 'synced')
+
+  const isLocal = computed(() => syncStatus.value === 'local')
+  const isSyncing = computed(() => syncStatus.value === 'syncing')
+  const isSynced = computed(() => syncStatus.value === 'synced')
+  const isConflict = computed(() => syncStatus.value === 'conflict')
+
+  const label = computed(() => {
+    switch (syncStatus.value) {
+    case 'local': return 'Saved locally — will sync when online'
+    case 'syncing': return 'Syncing…'
+    case 'synced': return 'Synced'
+    case 'conflict': return 'Conflict — newer version on server'
+    default: return ''
+    }
+  })
+
+  return { syncStatus, isLocal, isSyncing, isSynced, isConflict, label }
+}

package/src/composables/useToaster.js

@@ -0,0 +1,20 @@
+import { useToastController } from 'bootstrap-vue-next'
+
+export function useToaster() {
+  const { show } = useToastController()
+
+  function toast(msg, type = null, opts = {}) {
+    show({
+      props: {
+        body: msg,
+        variant: type,
+        solid: true,
+        value: opts.autoHideDelay || 2000,
+        title: opts.title,
+        pos: 'top-end',
+      },
+    })
+  }
+
+  return { toast }
+}

package/src/context.js

@@ -0,0 +1,18 @@
+let _context = null
+
+export function setCevContext(ctx) {
+  _context = ctx
+}
+
+export function getCevContext() {
+  if (!_context) {
+    throw new Error(
+      '[@bettertogether/community-engine-vue] Plugin not installed. ' +
+      'Call app.use(CommunityEngineVue) before accessing the plugin context.'
+    )
+  }
+  return {
+    ..._context,
+    get router() { return _context.app?.config?.globalProperties?.$router },
+  }
+}