@bettertogether/community-engine-vue 0.1.6 → 0.2.2

package/src/components/joatu/OfferForm.vue

@@ -0,0 +1,82 @@
+<template>
+  <BForm
+    class="bt-offer-form"
+    @submit.prevent="handleSubmit"
+  >
+    <BFormGroup
+      :label="t('bt.joatu.offers.title_label')"
+      label-for="offer-title"
+    >
+      <BFormInput
+        id="offer-title"
+        v-model="form.title"
+        required
+        :placeholder="t('bt.joatu.offers.title_placeholder')"
+      />
+    </BFormGroup>
+    <BFormGroup
+      :label="t('bt.joatu.offers.description_label')"
+      label-for="offer-description"
+    >
+      <BFormTextarea
+        id="offer-description"
+        v-model="form.description"
+        rows="3"
+        :placeholder="t('bt.joatu.offers.description_placeholder')"
+      />
+    </BFormGroup>
+    <BFormGroup
+      :label="t('bt.joatu.offers.category_label')"
+      label-for="offer-category"
+    >
+      <BFormInput
+        id="offer-category"
+        v-model="form.category"
+        :placeholder="t('bt.joatu.offers.category_placeholder')"
+      />
+    </BFormGroup>
+    <BFormGroup
+      :label="t('bt.joatu.offers.credits_label')"
+      label-for="offer-credits"
+    >
+      <BFormInput
+        id="offer-credits"
+        v-model.number="form.time_credits"
+        type="number"
+        min="1"
+        max="100"
+      />
+      <template #description>
+        {{ t('bt.joatu.offers.credits_hint') }}
+      </template>
+    </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="success"
+      >
+        {{ t('bt.joatu.offers.submit') }}
+      </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({ title: '', description: '', category: '', time_credits: 1 })
+function handleSubmit() {
+  if (!form.title) return
+  emit('submit', { ...form })
+  Object.assign(form, { title: '', description: '', category: '', time_credits: 1 })
+}
+</script>

package/src/components/joatu/OfferList.vue

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

package/src/components/joatu/RequestCard.vue

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

package/src/components/joatu/RequestForm.vue

@@ -0,0 +1,82 @@
+<template>
+  <BForm
+    class="bt-request-form"
+    @submit.prevent="handleSubmit"
+  >
+    <BFormGroup
+      :label="t('bt.joatu.requests.title_label')"
+      label-for="request-title"
+    >
+      <BFormInput
+        id="request-title"
+        v-model="form.title"
+        required
+        :placeholder="t('bt.joatu.requests.title_placeholder')"
+      />
+    </BFormGroup>
+    <BFormGroup
+      :label="t('bt.joatu.requests.description_label')"
+      label-for="request-description"
+    >
+      <BFormTextarea
+        id="request-description"
+        v-model="form.description"
+        rows="3"
+        :placeholder="t('bt.joatu.requests.description_placeholder')"
+      />
+    </BFormGroup>
+    <BFormGroup
+      :label="t('bt.joatu.requests.category_label')"
+      label-for="request-category"
+    >
+      <BFormInput
+        id="request-category"
+        v-model="form.category"
+        :placeholder="t('bt.joatu.offers.category_placeholder')"
+      />
+    </BFormGroup>
+    <BFormGroup
+      :label="t('bt.joatu.requests.credits_label')"
+      label-for="request-credits"
+    >
+      <BFormInput
+        id="request-credits"
+        v-model.number="form.time_credits"
+        type="number"
+        min="1"
+        max="100"
+      />
+      <template #description>
+        {{ t('bt.joatu.requests.credits_hint') }}
+      </template>
+    </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="warning"
+      >
+        {{ t('bt.joatu.requests.submit') }}
+      </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({ title: '', description: '', category: '', time_credits: 1 })
+function handleSubmit() {
+  if (!form.title) return
+  emit('submit', { ...form })
+  Object.assign(form, { title: '', description: '', category: '', time_credits: 1 })
+}
+</script>

package/src/components/joatu/RequestList.vue

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

package/src/components/page/PageCard.vue

@@ -0,0 +1,55 @@
+<template>
+  <BCard class="bt-page-card">
+    <BCardBody>
+      <slot name="title">
+        <div class="d-flex align-items-start justify-content-between gap-2 mb-1">
+          <h5 class="bt-page-card__title mb-0">
+            {{ page.title }}
+          </h5>
+          <slot name="sync-badge">
+            <SyncBadge :item="page" />
+          </slot>
+        </div>
+      </slot>
+      <slot name="meta">
+        <small
+          v-if="page.published_at"
+          class="text-muted"
+        >{{ formattedDate }}</small>
+      </slot>
+      <slot name="body">
+        <BCardText>{{ excerpt }}</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', page)"
+          >
+            {{ t('bt.pages.read') }}
+          </BButton>
+          <ExtensionSlot
+            slot="footer"
+            target="PageCard"
+            :context="{ item: page }"
+          />
+        </div>
+      </slot>
+    </template>
+  </BCard>
+</template>
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BCard, BCardBody, BCardText, BButton } from 'bootstrap-vue-next'
+import SyncBadge from '../sync/SyncBadge.vue'
+import ExtensionSlot from '../shared/ExtensionSlot.vue'
+const { t } = useI18n()
+const props = defineProps({ page: { type: Object, required: true } })
+defineEmits(['view'])
+const excerpt = computed(() => { const c = props.page.content || ''; return c.length > 200 ? c.slice(0, 200) + '…' : c })
+const formattedDate = computed(() => new Date(props.page.published_at).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }))
+</script>

package/src/components/page/PageDetail.vue

@@ -0,0 +1,35 @@
+<template>
+  <article class="bt-page-detail">
+    <header class="bt-page-detail__header mb-4">
+      <h1 class="bt-page-detail__title">
+        {{ page.title }}
+      </h1>
+      <div class="d-flex align-items-center gap-2">
+        <small
+          v-if="page.published_at"
+          class="text-muted"
+        >{{ formattedDate }}</small>
+        <SyncBadge :item="page" />
+      </div>
+    </header>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div
+      class="bt-page-detail__content"
+      v-html="page.content"
+    />
+  </article>
+</template>
+<script setup>
+import { computed } from 'vue'
+import SyncBadge from '../sync/SyncBadge.vue'
+const props = defineProps({ page: { type: Object, required: true } })
+const formattedDate = computed(() => {
+  if (!props.page.published_at) return ''
+  return new Date(props.page.published_at).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+})
+</script>
+<style scoped lang="scss">
+.bt-page-detail__content { line-height: 1.7; }
+.bt-page-detail__content :deep(img) { max-width: 100%; height: auto; }
+.bt-page-detail__content :deep(h2) { margin-top: 2rem; }
+</style>

package/src/components/page/PageList.vue

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

package/src/components/person/MemberList.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="bt-member-list">
+    <slot name="header" />
+    <div v-if="loading">
+      <slot name="loading">
+        <BSpinner :label="t('bt.person.loading')" />
+      </slot>
+    </div>
+    <div v-else-if="!members.length">
+      <slot name="empty">
+        <p class="text-muted">
+          {{ t('bt.person.members_empty') }}
+        </p>
+      </slot>
+    </div>
+    <div
+      v-else
+      class="bt-member-list__items"
+    >
+      <div
+        v-for="(member, index) in members"
+        :key="member.id"
+        class="bt-member-list__item"
+      >
+        <slot
+          name="item"
+          :item="member"
+          :index="index"
+        >
+          <div class="d-flex align-items-center gap-2">
+            <PersonAvatar
+              :person="{ id: member.person_id, name: '' }"
+              :size="32"
+            />
+            <span>{{ member.person_id }}</span>
+            <BBadge
+              v-if="member.role"
+              variant="secondary"
+            >
+              {{ member.role }}
+            </BBadge>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <slot name="footer" />
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { BBadge, BSpinner } from 'bootstrap-vue-next'
+import PersonAvatar from './PersonAvatar.vue'
+
+const { t } = useI18n()
+
+defineProps({
+  members: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false },
+})
+</script>

package/src/components/person/PersonAvatar.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="bt-person-avatar"
+    :style="avatarStyle"
+    :title="person.name"
+  >
+    <img
+      v-if="person.profile_image_url"
+      :src="person.profile_image_url"
+      :alt="person.name"
+      class="bt-person-avatar__img"
+    >
+    <span
+      v-else
+      class="bt-person-avatar__initials"
+    >{{ initials }}</span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  person: { type: Object, required: true },
+  size: { type: Number, default: 40 },
+})
+
+const initials = computed(() => {
+  const parts = (props.person.name || props.person.handle || '?').split(' ')
+  return parts.slice(0, 2).map((p) => p[0]?.toUpperCase() ?? '').join('')
+})
+
+const avatarStyle = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+  fontSize: `${props.size * 0.4}px`,
+}))
+</script>
+
+<style scoped lang="scss">
+.bt-person-avatar {
+  border-radius: 50%;
+  background-color: var(--bt-primary, #4f46e5);
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  &__img { width: 100%; height: 100%; object-fit: cover; }
+  &__initials { font-weight: 600; line-height: 1; }
+}
+</style>

package/src/components/person/PersonCard.vue

@@ -0,0 +1,47 @@
+<template>
+  <BCard class="bt-person-card">
+    <BCardBody class="d-flex align-items-start gap-3">
+      <slot name="avatar">
+        <PersonAvatar
+          :person="person"
+          :size="48"
+        />
+      </slot>
+      <div class="flex-grow-1">
+        <slot name="title">
+          <div class="d-flex align-items-center gap-2">
+            <strong class="bt-person-card__name">{{ person.name }}</strong>
+            <slot name="sync-badge">
+              <SyncBadge :item="person" />
+            </slot>
+          </div>
+        </slot>
+        <slot name="meta">
+          <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+          <small class="text-muted">@{{ person.handle || person.slug }}</small>
+        </slot>
+        <slot name="body" />
+      </div>
+    </BCardBody>
+    <template #footer>
+      <slot name="footer">
+        <ExtensionSlot
+          slot="footer"
+          target="PersonCard"
+          :context="{ item: person }"
+        />
+      </slot>
+    </template>
+  </BCard>
+</template>
+
+<script setup>
+import { BCard, BCardBody } from 'bootstrap-vue-next'
+import PersonAvatar from './PersonAvatar.vue'
+import SyncBadge from '../sync/SyncBadge.vue'
+import ExtensionSlot from '../shared/ExtensionSlot.vue'
+
+defineProps({
+  person: { type: Object, required: true },
+})
+</script>