@bettertogether/community-engine-vue 0.1.7 → 0.2.2

package/src/components/conversation/MessageItem.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="bt-message-item d-flex gap-2 mb-2">
+    <div class="bt-message-item__avatar">
+      <div class="bt-message-item__avatar-circle">
+        {{ initials }}
+      </div>
+    </div>
+    <div class="bt-message-item__body flex-grow-1">
+      <div class="d-flex align-items-center gap-2 mb-1">
+        <span class="bt-message-item__author fw-semibold">{{ message.author_name || t('bt.messages.author_unknown') }}</span>
+        <small class="text-muted">{{ formattedTime }}</small>
+        <SyncBadge :item="message" />
+      </div>
+      <div class="bt-message-item__content">
+        {{ message.content }}
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import SyncBadge from '../sync/SyncBadge.vue'
+const { t } = useI18n()
+const props = defineProps({ message: { type: Object, required: true } })
+const initials = computed(() => {
+  const name = props.message.author_name || '?'
+  return name.split(' ').map((n) => n[0]).slice(0, 2).join('').toUpperCase()
+})
+const formattedTime = computed(() => {
+  if (!props.message._local_updated) return ''
+  return new Date(props.message._local_updated).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+})
+</script>
+<style scoped lang="scss">
+.bt-message-item__avatar-circle {
+  width: 32px; height: 32px; border-radius: 50%;
+  background: #6c757d; color: #fff;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.75rem; font-weight: 600;
+}
+.bt-message-item__content { font-size: 0.9rem; }
+</style>

package/src/components/conversation/MessageList.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="bt-message-list">
+    <div
+      v-if="loading"
+      class="text-center p-3 text-muted"
+    >
+      <slot name="loading">
+        {{ t('bt.messages.loading') }}
+      </slot>
+    </div>
+    <div
+      v-else-if="!messages.length"
+      class="text-center p-3 text-muted"
+    >
+      <slot name="empty">
+        {{ t('bt.messages.list_empty') }}
+      </slot>
+    </div>
+    <template v-else>
+      <MessageItem
+        v-for="message in messages"
+        :key="message.id"
+        :message="message"
+      />
+    </template>
+  </div>
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n'
+import MessageItem from './MessageItem.vue'
+const { t } = useI18n()
+defineProps({
+  messages: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false },
+})
+</script>
+<style scoped lang="scss">
+.bt-message-list { max-height: 400px; overflow-y: auto; padding: 1rem; border: 1px solid #dee2e6; border-radius: 0.5rem; }
+</style>

package/src/components/event/EventCard.vue

@@ -0,0 +1,82 @@
+<template>
+  <BCard class="bt-event-card">
+    <BCardBody>
+      <slot name="title">
+        <div class="d-flex align-items-start justify-content-between gap-2 mb-1">
+          <h5 class="bt-event-card__name mb-0">
+            {{ event.name }}
+          </h5>
+          <slot name="sync-badge">
+            <SyncBadge :item="event" />
+          </slot>
+        </div>
+      </slot>
+
+      <slot name="meta">
+        <div class="bt-event-card__meta mb-2">
+          <small class="text-muted">
+            <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+            <span v-if="event.starts_at">📅 {{ formattedDate }}</span>
+          </small>
+          <BBadge
+            :variant="privacyVariant"
+            class="ms-2"
+          >
+            {{ event.privacy }}
+          </BBadge>
+        </div>
+      </slot>
+
+      <slot name="body">
+        <BCardText class="bt-event-card__description">
+          {{ truncatedDescription }}
+        </BCardText>
+      </slot>
+    </BCardBody>
+
+    <template #footer>
+      <slot name="footer">
+        <div class="d-flex align-items-center gap-2">
+          <BButton
+            variant="outline-primary"
+            size="sm"
+            @click="$emit('view', event)"
+          >
+            {{ t('bt.events.view') }}
+          </BButton>
+          <ExtensionSlot
+            slot="footer"
+            target="EventCard"
+            :context="{ item: event }"
+          />
+        </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({ event: { type: Object, required: true } })
+defineEmits(['view'])
+
+const formattedDate = computed(() => {
+  if (!props.event.starts_at) return ''
+  const start = new Date(props.event.starts_at).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+  if (!props.event.ends_at) return start
+  const end = new Date(props.event.ends_at).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+  return `${start} – ${end}`
+})
+const privacyVariant = computed(() => ({ public: 'success', private: 'danger', protected: 'warning' }[props.event.privacy] ?? 'secondary'))
+const truncatedDescription = computed(() => {
+  const d = props.event.description || ''
+  return d.length > 150 ? d.slice(0, 150) + '…' : d
+})
+</script>

package/src/components/event/EventForm.vue

@@ -0,0 +1,99 @@
+<template>
+  <BForm @submit.prevent="handleSubmit">
+    <BFormGroup
+      :label="t('bt.events.name_label')"
+      label-for="event-name"
+    >
+      <BFormInput
+        id="event-name"
+        v-model="form.name"
+        required
+        :placeholder="t('bt.events.name_label')"
+      />
+    </BFormGroup>
+    <BFormGroup
+      :label="t('bt.events.description_label')"
+      label-for="event-description"
+    >
+      <BFormTextarea
+        id="event-description"
+        v-model="form.description"
+        rows="3"
+        :placeholder="t('bt.events.description_label')"
+      />
+    </BFormGroup>
+    <BRow>
+      <BCol md="6">
+        <BFormGroup
+          :label="t('bt.events.starts_at_label')"
+          label-for="event-starts"
+        >
+          <BFormInput
+            id="event-starts"
+            v-model="form.starts_at"
+            type="datetime-local"
+          />
+        </BFormGroup>
+      </BCol>
+      <BCol md="6">
+        <BFormGroup
+          :label="t('bt.events.ends_at_label')"
+          label-for="event-ends"
+        >
+          <BFormInput
+            id="event-ends"
+            v-model="form.ends_at"
+            type="datetime-local"
+          />
+        </BFormGroup>
+      </BCol>
+    </BRow>
+    <BFormGroup
+      :label="t('bt.posts.privacy_label')"
+      label-for="event-privacy"
+    >
+      <BFormSelect
+        id="event-privacy"
+        v-model="form.privacy"
+        :options="privacyOptions"
+      />
+    </BFormGroup>
+    <BButton
+      type="submit"
+      variant="primary"
+    >
+      {{ t('bt.events.save') }}
+    </BButton>
+  </BForm>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BForm, BFormGroup, BFormInput, BFormTextarea, BFormSelect, BButton, BRow, BCol } from 'bootstrap-vue-next'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  model: { type: Object, default: () => ({}) },
+  communityId: { type: String, default: null },
+})
+const emit = defineEmits(['submit'])
+
+const form = reactive({
+  name: props.model.name || '',
+  description: props.model.description || '',
+  starts_at: props.model.starts_at || '',
+  ends_at: props.model.ends_at || '',
+  privacy: props.model.privacy || 'public',
+  community_id: props.communityId || props.model.community_id || null,
+})
+
+const privacyOptions = [
+  { value: 'public', text: 'Public' },
+  { value: 'protected', text: 'Community members only' },
+  { value: 'private', text: 'Private' },
+]
+
+function handleSubmit() { emit('submit', { ...form }) }
+</script>

package/src/components/event/EventList.vue

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

package/src/components/invitation/InvitationCard.vue

@@ -0,0 +1,56 @@
+<template>
+  <BCard class="bt-invitation-card">
+    <BCardBody>
+      <slot name="title">
+        <div class="d-flex align-items-start justify-content-between gap-2 mb-1">
+          <div>
+            <h6 class="mb-0">
+              {{ invitation.name || invitation.email }}
+            </h6>
+            <small class="text-muted">{{ invitation.email }}</small>
+          </div>
+          <slot name="sync-badge">
+            <SyncBadge :item="invitation" />
+          </slot>
+        </div>
+      </slot>
+      <slot name="meta">
+        <div class="d-flex align-items-center gap-2 mt-2">
+          <BBadge :variant="statusVariant">
+            {{ invitation.status }}
+          </BBadge>
+          <small
+            v-if="invitation.expires_at"
+            class="text-muted"
+          >
+            {{ t('bt.invitations.expires', { date: formattedExpiry }) }}
+          </small>
+        </div>
+      </slot>
+      <slot name="body" />
+    </BCardBody>
+    <template #footer>
+      <slot name="footer">
+        <ExtensionSlot
+          slot="footer"
+          target="InvitationCard"
+          :context="{ item: invitation }"
+        />
+      </slot>
+    </template>
+  </BCard>
+</template>
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BCard, BCardBody, BBadge } from 'bootstrap-vue-next'
+import SyncBadge from '../sync/SyncBadge.vue'
+import ExtensionSlot from '../shared/ExtensionSlot.vue'
+const { t } = useI18n()
+const props = defineProps({ invitation: { type: Object, required: true } })
+const statusVariant = computed(() => ({ pending: 'warning', accepted: 'success', expired: 'secondary' }[props.invitation.status] ?? 'secondary'))
+const formattedExpiry = computed(() => {
+  if (!props.invitation.expires_at) return ''
+  return new Date(props.invitation.expires_at).toLocaleDateString()
+})
+</script>

package/src/components/invitation/InvitationForm.vue

@@ -0,0 +1,70 @@
+<template>
+  <BForm
+    class="bt-invitation-form"
+    @submit.prevent="handleSubmit"
+  >
+    <BFormGroup
+      :label="t('bt.invitations.email_label')"
+      label-for="invitation-email"
+    >
+      <BFormInput
+        id="invitation-email"
+        v-model="form.email"
+        type="email"
+        required
+        :placeholder="t('bt.invitations.email_placeholder')"
+      />
+    </BFormGroup>
+    <BFormGroup
+      :label="t('bt.invitations.name_label')"
+      label-for="invitation-name"
+    >
+      <BFormInput
+        id="invitation-name"
+        v-model="form.name"
+        :placeholder="t('bt.invitations.name_placeholder')"
+      />
+    </BFormGroup>
+    <BFormGroup
+      :label="t('bt.invitations.message_label')"
+      label-for="invitation-message"
+    >
+      <BFormTextarea
+        id="invitation-message"
+        v-model="form.message"
+        rows="3"
+        :placeholder="t('bt.invitations.message_placeholder')"
+      />
+    </BFormGroup>
+    <div class="d-flex justify-content-end gap-2 mt-3">
+      <BButton
+        type="button"
+        variant="outline-secondary"
+        @click="$emit('cancel')"
+      >
+        {{ t('bt.actions.cancel') }}
+      </BButton>
+      <BButton
+        type="submit"
+        variant="primary"
+      >
+        {{ t('bt.invitations.send') }}
+      </BButton>
+    </div>
+  </BForm>
+</template>
+<script setup>
+import { reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BForm, BFormGroup, BFormInput, BFormTextarea, BButton } from 'bootstrap-vue-next'
+const { t } = useI18n()
+const emit = defineEmits(['submit', 'cancel'])
+const form = reactive({ email: '', name: '', message: '' })
+function handleSubmit() {
+  if (!form.email) return
+  emit('submit', { ...form })
+  form.email = ''
+  form.name = ''
+  form.message = ''
+}
+</script>

package/src/components/invitation/InvitationList.vue

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

package/src/components/joatu/AgreementCard.vue

@@ -0,0 +1,57 @@
+<template>
+  <BCard class="bt-agreement-card">
+    <BCardBody>
+      <slot name="title">
+        <div class="d-flex align-items-start justify-content-between gap-2 mb-1">
+          <h5 class="bt-agreement-card__title mb-0">
+            {{ t('bt.joatu.agreements.credits_display', agreement.time_credits) }}
+          </h5>
+          <slot name="sync-badge">
+            <SyncBadge :item="agreement" />
+          </slot>
+        </div>
+      </slot>
+      <slot name="meta">
+        <div class="d-flex align-items-center gap-2 mb-2">
+          <BBadge :variant="statusVariant">
+            {{ agreement.status }}
+          </BBadge>
+          <small
+            v-if="agreement.agreed_at"
+            class="text-muted"
+          >
+            {{ t('bt.joatu.agreements.agreed_on', { date: formattedAgreedAt }) }}
+          </small>
+        </div>
+      </slot>
+      <slot name="body">
+        <BCardText
+          v-if="agreement.notes"
+          class="text-muted"
+        >
+          {{ agreement.notes }}
+        </BCardText>
+      </slot>
+    </BCardBody>
+    <template #footer>
+      <slot name="footer">
+        <ExtensionSlot
+          slot="footer"
+          target="AgreementCard"
+          :context="{ item: agreement }"
+        />
+      </slot>
+    </template>
+  </BCard>
+</template>
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BCard, BCardBody, BCardText, BBadge } from 'bootstrap-vue-next'
+import SyncBadge from '../sync/SyncBadge.vue'
+import ExtensionSlot from '../shared/ExtensionSlot.vue'
+const { t } = useI18n()
+const props = defineProps({ agreement: { type: Object, required: true } })
+const statusVariant = computed(() => ({ pending: 'warning', active: 'info', completed: 'success', disputed: 'danger' }[props.agreement.status] ?? 'secondary'))
+const formattedAgreedAt = computed(() => { if (!props.agreement.agreed_at) return ''; return new Date(props.agreement.agreed_at).toLocaleDateString() })
+</script>

package/src/components/joatu/AgreementList.vue

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

package/src/components/joatu/OfferCard.vue

@@ -0,0 +1,65 @@
+<template>
+  <BCard class="bt-offer-card">
+    <BCardBody>
+      <slot name="title">
+        <div class="d-flex align-items-start justify-content-between gap-2 mb-1">
+          <h5 class="bt-offer-card__title mb-0">
+            {{ offer.title }}
+          </h5>
+          <slot name="sync-badge">
+            <SyncBadge :item="offer" />
+          </slot>
+        </div>
+      </slot>
+      <slot name="meta">
+        <div class="d-flex align-items-center gap-2 mb-2">
+          <BBadge :variant="statusVariant">
+            {{ offer.status }}
+          </BBadge>
+          <span class="bt-offer-card__credits">
+            {{ t('bt.joatu.offers.credits_display', offer.time_credits) }}
+          </span>
+          <BBadge
+            v-if="offer.category"
+            variant="outline-secondary"
+          >
+            {{ offer.category }}
+          </BBadge>
+        </div>
+      </slot>
+      <slot name="body">
+        <BCardText>{{ truncatedDescription }}</BCardText>
+      </slot>
+    </BCardBody>
+    <template #footer>
+      <slot name="footer">
+        <div class="d-flex align-items-center gap-2">
+          <BButton
+            variant="outline-success"
+            size="sm"
+            @click="$emit('view', offer)"
+          >
+            {{ t('bt.joatu.offers.view') }}
+          </BButton>
+          <ExtensionSlot
+            slot="footer"
+            target="OfferCard"
+            :context="{ item: offer }"
+          />
+        </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({ offer: { type: Object, required: true } })
+defineEmits(['view'])
+const truncatedDescription = computed(() => { const d = props.offer.description || ''; return d.length > 150 ? d.slice(0, 150) + '…' : d })
+const statusVariant = computed(() => ({ open: 'success', fulfilled: 'info', withdrawn: 'secondary' }[props.offer.status] ?? 'secondary'))
+</script>