@bettertogether/community-engine-vue 0.1.7 → 0.2.2

package/src/pages/community/CommunityConversation.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="bt-page-community-conversation">
+    <div
+      v-if="loading"
+      class="text-center p-4 text-muted"
+    >
+      {{ t('bt.pages.loading') }}
+    </div>
+    <div
+      v-else-if="!current"
+      class="text-center p-4 text-muted"
+    >
+      {{ t('bt.conversations.not_found') }}
+    </div>
+    <ConversationDetail
+      v-else
+      :conversation="current"
+    />
+  </div>
+</template>
+<script setup>
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import ConversationDetail from '../../components/conversation/ConversationDetail.vue'
+import { useConversations } from '../../composables/useConversations'
+const { t } = useI18n()
+const route = useRoute()
+const { current, loading, get } = useConversations()
+onMounted(() => get(route.params.id))
+</script>

package/src/pages/community/CommunityConversations.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="bt-community-conversations">
+    <h2>{{ t('bt.navigation.conversations') }}</h2>
+    <BAlert
+      variant="info"
+      :model-value="true"
+    >
+      {{ t('bt.conversations.coming_soon') }}
+    </BAlert>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { BAlert } from 'bootstrap-vue-next'
+
+const { t } = useI18n()
+</script>

package/src/pages/community/CommunityEvent.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="bt-community-event">
+    <RouterLink
+      :to="{ name: 'CommunityEvents', params: { communitySlug: route.params.communitySlug } }"
+      class="btn btn-link ps-0"
+    >
+      {{ t('bt.actions.back') }}
+    </RouterLink>
+    <div v-if="loading">
+      <BSpinner :label="t('bt.events.loading')" />
+    </div>
+    <EventCard
+      v-else-if="current"
+      :event="current"
+    />
+    <BAlert
+      v-else
+      variant="warning"
+      :model-value="true"
+    >
+      {{ t('bt.events.not_found') }}
+    </BAlert>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { BSpinner, BAlert } from 'bootstrap-vue-next'
+import { useEvents } from '../../composables/useEvents'
+import EventCard from '../../components/event/EventCard.vue'
+
+const { t } = useI18n()
+
+const route = useRoute()
+const { current, loading, get } = useEvents(route.params.communitySlug)
+onMounted(() => get(route.params.id))
+</script>

package/src/pages/community/CommunityEvents.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="bt-community-events">
+    <div class="d-flex align-items-center justify-content-between mb-3">
+      <h2>{{ t('bt.navigation.events') }}</h2>
+      <BButton
+        v-if="authStore.isAuthenticated"
+        variant="primary"
+        @click="showForm = true"
+      >
+        {{ t('bt.events.create') }}
+      </BButton>
+    </div>
+    <BModal
+      v-model="showForm"
+      :title="t('bt.events.create')"
+      hide-footer
+    >
+      <EventForm
+        :community-id="communitySlug"
+        @submit="createEvent"
+      />
+    </BModal>
+    <EventList
+      :events="items"
+      :loading="loading"
+      @view="goToEvent"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { BButton, BModal } from 'bootstrap-vue-next'
+import { useAuthStore } from '../../stores/auth'
+import { useEvents } from '../../composables/useEvents'
+import EventList from '../../components/event/EventList.vue'
+import EventForm from '../../components/event/EventForm.vue'
+
+const { t } = useI18n()
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const communitySlug = route.params.communitySlug
+const { items, loading, listUpcoming, create } = useEvents(communitySlug)
+const showForm = ref(false)
+
+onMounted(() => listUpcoming())
+async function createEvent(formData) {
+  await create(formData)
+  showForm.value = false
+}
+function goToEvent(event) {
+  router.push({ name: 'CommunityEvent', params: { ...route.params, id: event.id } })
+}
+</script>

package/src/pages/community/CommunityHome.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="bt-community-home">
+    <BRow>
+      <BCol md="8">
+        <h2>{{ t('bt.posts.recent') }}</h2>
+        <PostList
+          :posts="recentPosts"
+          :loading="postsLoading"
+          @view="goToPost"
+        />
+      </BCol>
+      <BCol md="4">
+        <h2>{{ t('bt.events.upcoming') }}</h2>
+        <EventList
+          :events="upcomingEvents"
+          :loading="eventsLoading"
+          @view="goToEvent"
+        />
+      </BCol>
+    </BRow>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { BRow, BCol } from 'bootstrap-vue-next'
+import { usePosts } from '../../composables/usePosts'
+import { useEvents } from '../../composables/useEvents'
+import PostList from '../../components/post/PostList.vue'
+import EventList from '../../components/event/EventList.vue'
+
+const { t } = useI18n()
+
+const route = useRoute()
+const router = useRouter()
+const communityId = route.params.communitySlug
+
+const { items: recentPosts, loading: postsLoading, listPublished } = usePosts(communityId)
+const { items: upcomingEvents, loading: eventsLoading, listUpcoming } = useEvents(communityId)
+
+onMounted(async () => {
+  await Promise.all([listPublished(), listUpcoming()])
+})
+
+function goToPost(post) { router.push({ name: 'CommunityPost', params: { ...route.params, id: post.id } }) }
+function goToEvent(event) { router.push({ name: 'CommunityEvent', params: { ...route.params, id: event.id } }) }
+</script>

package/src/pages/community/CommunityJoaTu.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="bt-page-community-joatu">
+    <div class="d-flex align-items-center justify-content-between mb-4">
+      <h2>{{ t('bt.joatu.heading') }}</h2>
+      <p class="text-muted mb-0">
+        {{ t('bt.joatu.tagline') }}
+      </p>
+    </div>
+
+    <BTabs>
+      <BTab :title="t('bt.joatu.tabs.offers')">
+        <div class="pt-3">
+          <div class="d-flex justify-content-end mb-3">
+            <BButton
+              variant="success"
+              size="sm"
+              @click="showOfferForm = !showOfferForm"
+            >
+              {{ showOfferForm ? t('bt.actions.cancel') : t('bt.joatu.offers.add') }}
+            </BButton>
+          </div>
+          <OfferForm
+            v-if="showOfferForm"
+            class="mb-4"
+            @submit="handleCreateOffer"
+            @cancel="showOfferForm = false"
+          />
+          <OfferList
+            :offers="offers"
+            :loading="offersLoading"
+            @view="viewOffer"
+          />
+        </div>
+      </BTab>
+      <BTab :title="t('bt.joatu.tabs.requests')">
+        <div class="pt-3">
+          <div class="d-flex justify-content-end mb-3">
+            <BButton
+              variant="warning"
+              size="sm"
+              @click="showRequestForm = !showRequestForm"
+            >
+              {{ showRequestForm ? t('bt.actions.cancel') : t('bt.joatu.requests.add') }}
+            </BButton>
+          </div>
+          <RequestForm
+            v-if="showRequestForm"
+            class="mb-4"
+            @submit="handleCreateRequest"
+            @cancel="showRequestForm = false"
+          />
+          <RequestList
+            :requests="requests"
+            :loading="requestsLoading"
+            @view="viewRequest"
+          />
+        </div>
+      </BTab>
+      <BTab :title="t('bt.joatu.tabs.agreements')">
+        <div class="pt-3">
+          <AgreementList
+            :agreements="agreements"
+            :loading="agreementsLoading"
+            @view="viewAgreement"
+          />
+        </div>
+      </BTab>
+    </BTabs>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { BTabs, BTab, BButton } from 'bootstrap-vue-next'
+import OfferList from '../../components/joatu/OfferList.vue'
+import OfferForm from '../../components/joatu/OfferForm.vue'
+import RequestList from '../../components/joatu/RequestList.vue'
+import RequestForm from '../../components/joatu/RequestForm.vue'
+import AgreementList from '../../components/joatu/AgreementList.vue'
+import { useJoaTuOffers } from '../../composables/useJoaTuOffers'
+import { useJoaTuRequests } from '../../composables/useJoaTuRequests'
+import { useJoaTuAgreements } from '../../composables/useJoaTuAgreements'
+
+const { t } = useI18n()
+
+const route = useRoute()
+const router = useRouter()
+const communitySlug = route.params.communitySlug
+
+const { items: offers, loading: offersLoading, list: listOffers, create: createOffer } = useJoaTuOffers(communitySlug)
+const { items: requests, loading: requestsLoading, list: listRequests, create: createRequest } = useJoaTuRequests(communitySlug)
+const { items: agreements, loading: agreementsLoading, list: listAgreements } = useJoaTuAgreements(communitySlug)
+
+const showOfferForm = ref(false)
+const showRequestForm = ref(false)
+
+onMounted(async () => {
+  await Promise.all([listOffers(), listRequests(), listAgreements()])
+})
+
+async function handleCreateOffer(formData) {
+  await createOffer(formData)
+  showOfferForm.value = false
+}
+
+async function handleCreateRequest(formData) {
+  await createRequest(formData)
+  showRequestForm.value = false
+}
+
+function viewOffer(offer) { router.push({ name: 'CommunityOffer', params: { id: offer.id } }) }
+function viewRequest(req) { router.push({ name: 'CommunityRequest', params: { id: req.id } }) }
+function viewAgreement() {}
+</script>

package/src/pages/community/CommunityMembers.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="bt-community-members">
+    <h2>{{ t('bt.navigation.members') }}</h2>
+    <MemberList
+      :members="items"
+      :loading="loading"
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useMembers } from '../../composables/useMembers'
+import MemberList from '../../components/person/MemberList.vue'
+
+const { t } = useI18n()
+
+const route = useRoute()
+const { items, loading, listActive } = useMembers(route.params.communitySlug)
+onMounted(() => listActive())
+</script>

package/src/pages/community/CommunityPage.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="bt-page-community-page">
+    <div
+      v-if="loading"
+      class="text-center p-4 text-muted"
+    >
+      {{ t('bt.pages.loading') }}
+    </div>
+    <div
+      v-else-if="!current"
+      class="text-center p-4 text-muted"
+    >
+      {{ t('bt.pages.not_found') }}
+    </div>
+    <PageDetail
+      v-else
+      :page="current"
+    />
+  </div>
+</template>
+<script setup>
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import PageDetail from '../../components/page/PageDetail.vue'
+import { usePages } from '../../composables/usePages'
+const { t } = useI18n()
+const route = useRoute()
+const { current, loading, get } = usePages()
+onMounted(() => get(route.params.id))
+</script>

package/src/pages/community/CommunityPages.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="bt-page-community-pages">
+    <h2 class="mb-4">
+      {{ t('bt.pages.heading') }}
+    </h2>
+    <PageList
+      :pages="items"
+      :loading="loading"
+      @view="viewPage"
+    />
+  </div>
+</template>
+<script setup>
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import PageList from '../../components/page/PageList.vue'
+import { usePages } from '../../composables/usePages'
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const { items, loading, list } = usePages(route.params.communitySlug)
+onMounted(() => list())
+function viewPage(page) { router.push({ name: 'CommunityPage', params: { id: page.id } }) }
+</script>

package/src/pages/community/CommunityPost.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="bt-community-post">
+    <RouterLink
+      :to="{ name: 'CommunityPosts', params: { communitySlug: route.params.communitySlug } }"
+      class="btn btn-link ps-0"
+    >
+      {{ t('bt.actions.back') }}
+    </RouterLink>
+    <PostDetail
+      :post="current"
+      :loading="loading"
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { usePosts } from '../../composables/usePosts'
+import PostDetail from '../../components/post/PostDetail.vue'
+
+const { t } = useI18n()
+
+const route = useRoute()
+const { current, loading, get } = usePosts(route.params.communitySlug)
+onMounted(() => get(route.params.id))
+</script>

package/src/pages/community/CommunityPosts.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="bt-community-posts">
+    <div class="d-flex align-items-center justify-content-between mb-3">
+      <h2>{{ t('bt.navigation.posts') }}</h2>
+      <BButton
+        v-if="authStore.isAuthenticated"
+        variant="primary"
+        @click="showForm = true"
+      >
+        {{ t('bt.posts.create') }}
+      </BButton>
+    </div>
+    <BModal
+      v-model="showForm"
+      :title="t('bt.posts.create')"
+      hide-footer
+    >
+      <PostForm
+        :community-id="communitySlug"
+        @submit="createPost"
+      />
+    </BModal>
+    <PostList
+      :posts="items"
+      :loading="loading"
+      @view="goToPost"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { BButton, BModal } from 'bootstrap-vue-next'
+import { useAuthStore } from '../../stores/auth'
+import { usePosts } from '../../composables/usePosts'
+import PostList from '../../components/post/PostList.vue'
+import PostForm from '../../components/post/PostForm.vue'
+
+const { t } = useI18n()
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const communitySlug = route.params.communitySlug
+const { items, loading, listPublished, create } = usePosts(communitySlug)
+const showForm = ref(false)
+
+onMounted(() => listPublished())
+async function createPost(formData) {
+  await create(formData)
+  showForm.value = false
+}
+function goToPost(post) {
+  router.push({ name: 'CommunityPost', params: { ...route.params, id: post.id } })
+}
+</script>

package/src/pages/community/CommunitySettingsPage.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="bt-community-settings-page">
+    <RoleGate
+      role="admin"
+      :resource-type="'community'"
+      :resource-id="communitySlug"
+    >
+      <h1 class="h4 mb-4">
+        {{ t('bt.community.settings.title') }}
+      </h1>
+
+      <!-- General Settings -->
+      <BCard class="mb-4">
+        <template #header>
+          <h2 class="h6 mb-0">
+            {{ t('bt.community.settings.general') }}
+          </h2>
+        </template>
+        <div
+          v-if="loadingCommunity"
+          class="text-center py-3"
+        >
+          <BSpinner :label="t('bt.communities.loading')" />
+        </div>
+        <CommunityForm
+          v-else-if="community"
+          :model="community"
+          @submit="handleSave"
+        />
+      </BCard>
+
+      <!-- Members / Role Management -->
+      <BCard class="mb-4">
+        <template #header>
+          <h2 class="h6 mb-0">
+            {{ t('bt.community.settings.members') }}
+          </h2>
+        </template>
+        <RouterLink
+          :to="{ name: 'community-role-manager', params: { communitySlug } }"
+          class="btn btn-outline-secondary btn-sm"
+        >
+          {{ t('bt.roles.title') }}
+        </RouterLink>
+      </BCard>
+
+      <!-- Danger Zone -->
+      <BCard border-variant="danger">
+        <template #header>
+          <h2 class="h6 mb-0 text-danger">
+            {{ t('bt.community.settings.danger_zone') }}
+          </h2>
+        </template>
+        <BButton
+          variant="outline-danger"
+          @click="confirmLeave"
+        >
+          {{ t('bt.community.settings.leave') }}
+        </BButton>
+      </BCard>
+
+      <BModal
+        v-model="showLeaveConfirm"
+        :title="t('bt.community.settings.leave')"
+        ok-variant="danger"
+        :ok-title="t('bt.community.settings.leave')"
+        @ok="handleLeave"
+      >
+        {{ t('bt.community.settings.leave_confirm') }}
+      </BModal>
+
+      <template #fallback>
+        <BAlert
+          variant="warning"
+          :model-value="true"
+        >
+          {{ t('bt.errors.not_found') }}
+        </BAlert>
+      </template>
+    </RoleGate>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { BCard, BButton, BSpinner, BAlert, BModal } from 'bootstrap-vue-next'
+import { useCommunities } from '../../composables/useCommunities'
+import RoleGate from '../../components/role/RoleGate.vue'
+import CommunityForm from '../../components/CommunityForm.vue'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const communitySlug = route.params.communitySlug
+
+const { current: community, loading: loadingCommunity, findBySlug, update } = useCommunities()
+
+const showLeaveConfirm = ref(false)
+
+onMounted(() => findBySlug(communitySlug))
+
+async function handleSave(formData) {
+  if (!community.value) return
+  await update(community.value.id, formData)
+}
+
+function confirmLeave() {
+  showLeaveConfirm.value = true
+}
+
+function handleLeave() {
+  showLeaveConfirm.value = false
+  router.push({ name: 'Communities' })
+}
+</script>