@bettertogether/community-engine-vue 0.1.7 → 0.2.2

package/src/components/CommunityForm.vue

@@ -1,45 +1,53 @@
 <template>
-  <vue-form-generator
-    tag="div"
-    :schema="schema"
-    :model="localModel"
-    rows="3"
-    max-rows="6"
-    :is-new-model="true"
-  />
+  <BForm @submit.prevent="handleSubmit">
+    <BFormGroup
+      :label="t('bt.communities.name_label')"
+      label-for="community-name"
+    >
+      <BFormInput
+        id="community-name"
+        v-model="form.name"
+        type="text"
+        required
+        :placeholder="t('bt.communities.name_label')"
+      />
+    </BFormGroup>
+    <BFormGroup
+      :label="t('bt.communities.description_label')"
+      label-for="community-description"
+    >
+      <BFormTextarea
+        id="community-description"
+        v-model="form.description"
+        rows="3"
+        required
+        :placeholder="t('bt.communities.description_label')"
+      />
+    </BFormGroup>
+    <BButton
+      type="submit"
+      variant="primary"
+    >
+      {{ t('bt.communities.save') }}
+    </BButton>
+  </BForm>
 </template>
 
-<script>
-import VueFormGenerator from 'vue-form-generator'
-import CommunityFormSchema from '../forms/CommunityFormSchema'
+<script setup>
+import { reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BForm, BFormGroup, BFormInput, BFormTextarea, BButton } from 'bootstrap-vue-next'
 
-export default {
-  name: 'CommunityForm',
-  components: {
-    'vue-form-generator': VueFormGenerator.component,
-  },
-  props: {
-    model: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      schema: CommunityFormSchema,
-      name: '',
-      description: '',
-    }
-  },
-  computed: {
-    localModel: {
-      get() { return this.model },
-      set(model) { this.$emit('input', model) },
-    },
-  },
-}
-</script>
+const { t } = useI18n()
+
+const props = defineProps({
+  model: { type: Object, default: () => ({}) },
+})
+const emit = defineEmits(['submit'])
 
-<style scoped lang="scss">
+const form = reactive({ name: props.model.name || '', description: props.model.description || '' })
 
-</style>
+function handleSubmit() {
+  emit('submit', { ...form })
+}
+</script>

package/src/components/community/CommunityCard.vue

@@ -0,0 +1,113 @@
+<template>
+  <BCard class="bt-community-card">
+    <template #header>
+      <slot name="header">
+        <div
+          class="bt-community-card__cover"
+          :style="coverStyle"
+        >
+          <slot name="sync-badge">
+            <SyncBadge :item="community" />
+          </slot>
+        </div>
+      </slot>
+    </template>
+
+    <BCardBody>
+      <slot name="title">
+        <h5 class="bt-community-card__name">
+          {{ community.name }}
+        </h5>
+      </slot>
+
+      <slot name="meta">
+        <div class="bt-community-card__meta">
+          <BBadge
+            :variant="privacyVariant"
+            class="me-1"
+          >
+            {{ community.privacy }}
+          </BBadge>
+        </div>
+      </slot>
+
+      <slot name="body">
+        <BCardText class="bt-community-card__description">
+          {{ truncatedDescription }}
+        </BCardText>
+      </slot>
+    </BCardBody>
+
+    <template #footer>
+      <slot name="footer">
+        <div class="bt-community-card__actions">
+          <BButton
+            variant="outline-primary"
+            size="sm"
+            @click="$emit('view', community)"
+          >
+            {{ t('bt.communities.view') }}
+          </BButton>
+          <ExtensionSlot
+            slot="footer"
+            target="CommunityCard"
+            :context="{ item: community }"
+          />
+        </div>
+      </slot>
+    </template>
+  </BCard>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BCard, BCardBody, BCardText, BBadge, BButton } from 'bootstrap-vue-next'
+import SyncBadge from '../sync/SyncBadge.vue'
+import ExtensionSlot from '../shared/ExtensionSlot.vue'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  community: { type: Object, required: true },
+})
+defineEmits(['view'])
+
+const coverStyle = computed(() => {
+  if (props.community.cover_image_url) {
+    return {
+      backgroundImage: `url(${props.community.cover_image_url})`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+    }
+  }
+  return { backgroundColor: 'var(--bt-primary, #4f46e5)' }
+})
+
+const privacyVariant = computed(() => ({
+  public: 'success', private: 'danger', protected: 'warning',
+}[props.community.privacy] ?? 'secondary'))
+
+const truncatedDescription = computed(() => {
+  const desc = props.community.description || ''
+  return desc.length > 120 ? desc.slice(0, 120) + '…' : desc
+})
+</script>
+
+<style scoped lang="scss">
+.bt-community-card__cover {
+  height: 120px;
+  position: relative;
+  border-radius: 4px 4px 0 0;
+
+  .sync-badge {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+}
+.bt-community-card__name { font-weight: 600; margin-bottom: 0.25rem; }
+.bt-community-card__meta { margin-bottom: 0.5rem; }
+.bt-community-card__description { font-size: 0.875rem; color: #6b7280; }
+.bt-community-card__actions { display: flex; gap: 0.5rem; align-items: center; }
+</style>

package/src/components/community/CommunityHeader.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="bt-community-header"
+    :style="coverStyle"
+  >
+    <div class="bt-community-header__overlay">
+      <div class="bt-community-header__content">
+        <slot name="logo">
+          <img
+            v-if="community.logo_url"
+            :src="community.logo_url"
+            class="bt-community-header__logo"
+            :alt="community.name"
+          >
+        </slot>
+        <slot name="title">
+          <h1 class="bt-community-header__name">
+            {{ community.name }}
+          </h1>
+        </slot>
+        <slot name="description">
+          <p
+            v-if="community.description"
+            class="bt-community-header__description"
+          >
+            {{ community.description }}
+          </p>
+        </slot>
+        <slot name="actions" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  community: { type: Object, required: true },
+})
+
+const coverStyle = computed(() => {
+  if (props.community.cover_image_url) {
+    return {
+      backgroundImage: `url(${props.community.cover_image_url})`,
+      backgroundSize: 'cover',
+      backgroundPosition: `center ${props.community.cover_image_position_y || 'center'}`,
+    }
+  }
+  return { backgroundColor: 'var(--bt-primary, #4f46e5)' }
+})
+</script>
+
+<style scoped lang="scss">
+.bt-community-header {
+  min-height: 200px;
+  position: relative;
+
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.6));
+    display: flex;
+    align-items: flex-end;
+  }
+
+  &__content {
+    padding: 1.5rem;
+    color: white;
+  }
+
+  &__logo {
+    width: 64px;
+    height: 64px;
+    border-radius: 8px;
+    object-fit: cover;
+    margin-bottom: 0.5rem;
+  }
+
+  &__name {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 0.25rem;
+  }
+
+  &__description {
+    opacity: 0.9;
+    margin-bottom: 0;
+  }
+}
+</style>

package/src/components/community/CommunityList.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="bt-community-list">
+    <slot name="header" />
+    <div
+      v-if="loading"
+      class="bt-community-list__loading"
+    >
+      <slot name="loading">
+        <BSpinner :label="t('bt.communities.loading')" />
+      </slot>
+    </div>
+    <div
+      v-else-if="!communities.length"
+      class="bt-community-list__empty"
+    >
+      <slot name="empty">
+        <p class="text-muted">
+          {{ t('bt.communities.list_empty') }}
+        </p>
+      </slot>
+    </div>
+    <BRow v-else>
+      <BCol
+        v-for="(community, index) in communities"
+        :key="community.id"
+        cols="12"
+        md="6"
+        lg="4"
+        class="mb-4"
+      >
+        <slot
+          name="item"
+          :item="community"
+          :index="index"
+        >
+          <CommunityCard
+            :community="community"
+            @view="$emit('view', community)"
+          />
+        </slot>
+      </BCol>
+    </BRow>
+    <slot name="footer" />
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { BRow, BCol, BSpinner } from 'bootstrap-vue-next'
+import CommunityCard from './CommunityCard.vue'
+
+const { t } = useI18n()
+
+defineProps({
+  communities: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false },
+})
+defineEmits(['view'])
+</script>

package/src/components/community/MemberRoleRow.vue

@@ -0,0 +1,107 @@
+<template>
+  <tr class="bt-member-role-row">
+    <td class="align-middle">
+      <div class="d-flex align-items-center gap-2">
+        <PersonAvatar :person="member" :size="32" />
+        <span>{{ member.name || member.handle || t('bt.person.unknown') }}</span>
+      </div>
+    </td>
+    <td class="align-middle">
+      <span v-if="memberRoles.length" class="d-flex flex-wrap gap-1">
+        <RoleBadge
+          v-for="role in memberRoles"
+          :key="role.id"
+          :role="role"
+        />
+      </span>
+      <span v-else class="text-muted small">{{ t('bt.roles.no_roles') }}</span>
+    </td>
+    <td class="align-middle" style="min-width: 180px">
+      <RoleSelector
+        v-model="selectedRoleId"
+        :resource-type="resourceType"
+        :resource-id="resourceId"
+      />
+    </td>
+    <td class="align-middle">
+      <div class="d-flex gap-1">
+        <BButton
+          variant="outline-primary"
+          size="sm"
+          :disabled="!selectedRoleId || grantPending"
+          @click="handleGrant"
+        >
+          {{ t('bt.roles.assign') }}
+        </BButton>
+        <BButton
+          v-for="pr in memberAssignments"
+          :key="pr.id"
+          variant="outline-danger"
+          size="sm"
+          :disabled="revokePending"
+          @click="handleRevoke(pr.id)"
+        >
+          {{ t('bt.roles.revoke') }}
+        </BButton>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BButton } from 'bootstrap-vue-next'
+import { useRoles } from '../../composables/useRoles'
+import PersonAvatar from '../person/PersonAvatar.vue'
+import RoleBadge from '../role/RoleBadge.vue'
+import RoleSelector from '../role/RoleSelector.vue'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  member: { type: Object, required: true },
+  resourceType: { type: String, default: null },
+  resourceId: { type: String, default: null },
+})
+
+const { roles, personRoles, grantRole, revokeRole } = useRoles(props.resourceType, props.resourceId)
+
+const selectedRoleId = ref(null)
+const grantPending = ref(false)
+const revokePending = ref(false)
+
+const memberAssignments = computed(() =>
+  personRoles.value.filter(
+    (pr) =>
+      pr.person_id === props.member.person_id &&
+      pr.resource_type === props.resourceType &&
+      pr.resource_id === props.resourceId,
+  ),
+)
+
+const memberRoles = computed(() => {
+  const ids = new Set(memberAssignments.value.map((pr) => pr.role_id))
+  return roles.value.filter((r) => ids.has(r.id))
+})
+
+async function handleGrant() {
+  if (!selectedRoleId.value) return
+  grantPending.value = true
+  try {
+    await grantRole(props.member.person_id, selectedRoleId.value)
+    selectedRoleId.value = null
+  } finally {
+    grantPending.value = false
+  }
+}
+
+async function handleRevoke(personRoleId) {
+  revokePending.value = true
+  try {
+    await revokeRole(personRoleId)
+  } finally {
+    revokePending.value = false
+  }
+}
+</script>

package/src/components/conversation/ConversationCard.vue

@@ -0,0 +1,49 @@
+<template>
+  <BCard class="bt-conversation-card">
+    <BCardBody>
+      <slot name="title">
+        <div class="d-flex align-items-start justify-content-between gap-2 mb-1">
+          <h5 class="bt-conversation-card__subject mb-0">
+            {{ conversation.subject || t('bt.conversations.no_subject') }}
+          </h5>
+          <slot name="sync-badge">
+            <SyncBadge :item="conversation" />
+          </slot>
+        </div>
+      </slot>
+      <slot name="meta">
+        <small class="text-muted">{{ t('bt.conversations.participants', memberCount) }}</small>
+      </slot>
+      <slot name="body" />
+    </BCardBody>
+    <template #footer>
+      <slot name="footer">
+        <div class="bt-conversation-card__actions d-flex align-items-center gap-2">
+          <BButton
+            variant="outline-primary"
+            size="sm"
+            @click="$emit('view', conversation)"
+          >
+            {{ t('bt.conversations.open') }}
+          </BButton>
+          <ExtensionSlot
+            slot="footer"
+            target="ConversationCard"
+            :context="{ item: conversation }"
+          />
+        </div>
+      </slot>
+    </template>
+  </BCard>
+</template>
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BCard, BCardBody, BButton } from 'bootstrap-vue-next'
+import SyncBadge from '../sync/SyncBadge.vue'
+import ExtensionSlot from '../shared/ExtensionSlot.vue'
+const { t } = useI18n()
+const props = defineProps({ conversation: { type: Object, required: true } })
+defineEmits(['view'])
+const memberCount = computed(() => props.conversation.member_count ?? 0)
+</script>

package/src/components/conversation/ConversationDetail.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="bt-conversation-detail">
+    <div
+      v-if="conversation"
+      class="bt-conversation-detail__header mb-3"
+    >
+      <h4>{{ conversation.subject || t('bt.conversations.no_subject') }}</h4>
+      <SyncBadge :item="conversation" />
+    </div>
+    <slot name="messages">
+      <MessageList
+        :messages="messages"
+        :loading="messagesLoading"
+        class="mb-3"
+      />
+    </slot>
+    <slot name="form">
+      <MessageForm @submit="handleSend" />
+    </slot>
+  </div>
+</template>
+<script setup>
+import { computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import MessageList from './MessageList.vue'
+import MessageForm from './MessageForm.vue'
+import SyncBadge from '../sync/SyncBadge.vue'
+import { useMessages } from '../../composables/useMessages'
+import { useAuthStore } from '../../stores/auth'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  conversation: { type: Object, default: null },
+})
+
+const conversationId = computed(() => props.conversation?.id ?? null)
+const { items: messages, loading: messagesLoading, list: listMessages, create: createMessage } = useMessages(conversationId.value)
+const authStore = useAuthStore()
+
+watch(conversationId, async (id) => {
+  if (id) await listMessages()
+}, { immediate: true })
+
+async function handleSend({ content }) {
+  if (!content?.trim() || !props.conversation) return
+  await createMessage({
+    content: content.trim(),
+    conversation_id: props.conversation.id,
+    author_id: authStore.currentPersonId ?? null,
+  })
+}
+</script>

package/src/components/conversation/ConversationList.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="bt-conversation-list">
+    <slot name="header" />
+    <div
+      v-if="loading"
+      class="bt-conversation-list__loading"
+    >
+      <slot name="loading">
+        <div class="text-center p-4 text-muted">
+          {{ t('bt.conversations.loading') }}
+        </div>
+      </slot>
+    </div>
+    <div
+      v-else-if="!conversations.length"
+      class="bt-conversation-list__empty"
+    >
+      <slot name="empty">
+        <div class="text-center p-4 text-muted">
+          {{ t('bt.conversations.list_empty') }}
+        </div>
+      </slot>
+    </div>
+    <template v-else>
+      <slot
+        v-for="(conversation, index) in conversations"
+        :key="conversation.id"
+        name="item"
+        :item="conversation"
+        :index="index"
+      >
+        <ConversationCard
+          :conversation="conversation"
+          class="mb-3"
+          @view="$emit('view', conversation)"
+        />
+      </slot>
+    </template>
+    <slot name="footer" />
+  </div>
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n'
+import ConversationCard from './ConversationCard.vue'
+const { t } = useI18n()
+defineProps({
+  conversations: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false },
+})
+defineEmits(['view'])
+</script>

package/src/components/conversation/MessageForm.vue

@@ -0,0 +1,45 @@
+<template>
+  <BForm
+    class="bt-message-form"
+    @submit.prevent="handleSubmit"
+  >
+    <BFormGroup>
+      <BFormTextarea
+        v-model="content"
+        :placeholder="t('bt.messages.placeholder')"
+        rows="2"
+        :disabled="submitting"
+        @keydown.enter.ctrl.prevent="handleSubmit"
+      />
+    </BFormGroup>
+    <div class="d-flex justify-content-end gap-2 mt-2">
+      <BButton
+        type="submit"
+        variant="primary"
+        size="sm"
+        :disabled="!content.trim() || submitting"
+      >
+        {{ t('bt.messages.send') }}
+      </BButton>
+    </div>
+  </BForm>
+</template>
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BForm, BFormGroup, BFormTextarea, BButton } from 'bootstrap-vue-next'
+const { t } = useI18n()
+const emit = defineEmits(['submit'])
+const content = ref('')
+const submitting = ref(false)
+async function handleSubmit() {
+  if (!content.value.trim()) return
+  submitting.value = true
+  try {
+    await emit('submit', { content: content.value })
+    content.value = ''
+  } finally {
+    submitting.value = false
+  }
+}
+</script>