You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.9 KiB
107 lines
2.9 KiB
<template>
|
|
<BaseCard
|
|
class="my-groups-card bg-white mt-3 mb-3"
|
|
plain
|
|
>
|
|
<template #header>
|
|
<div class="px-4 py-3 bg-gray-200">
|
|
<h2 class="text-xl font-semibold">{{ t("My communities") }}</h2>
|
|
</div>
|
|
</template>
|
|
<hr class="my-2" />
|
|
<div class="px-4">
|
|
<ul class="mb-4">
|
|
<li
|
|
v-for="group in groups"
|
|
:key="group.id"
|
|
class="mb-2"
|
|
>
|
|
<a
|
|
v-if="group.url"
|
|
:href="group.url || '#'"
|
|
class="text-blue-600 hover:underline"
|
|
>{{ group.name }}</a
|
|
>
|
|
<span v-else>{{ group.name }}</span>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
v-if="isValidGlobalForumsCourse"
|
|
class="text-center mb-4"
|
|
>
|
|
<a
|
|
:href="goToUrl"
|
|
class="btn btn-primary"
|
|
>{{ t("See all communities") }}</a
|
|
>
|
|
</div>
|
|
<div v-else>
|
|
<div
|
|
v-if="isCurrentUser"
|
|
class="flex items-center mb-4"
|
|
>
|
|
<input
|
|
v-model="searchQuery"
|
|
:placeholder="t('Search')"
|
|
class="flex-grow p-2 h-[44px] border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
type="search"
|
|
/>
|
|
<button
|
|
class="p-2 h-[44px] bg-gray-200 border border-gray-300 rounded-r-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
type="button"
|
|
@click="search"
|
|
>
|
|
<i class="mdi mdi-magnify text-gray-700"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BaseCard>
|
|
</template>
|
|
|
|
<script setup>
|
|
import BaseCard from "../basecomponents/BaseCard.vue"
|
|
import { useI18n } from "vue-i18n"
|
|
import { computed, inject, ref, watchEffect } from "vue"
|
|
import axios from "axios"
|
|
import { usePlatformConfig } from "../../store/platformConfig"
|
|
import { useRouter } from "vue-router"
|
|
|
|
const { t } = useI18n()
|
|
const searchQuery = ref("")
|
|
const groups = ref([])
|
|
const goToUrl = ref("")
|
|
const user = inject("social-user")
|
|
const isCurrentUser = inject("is-current-user")
|
|
const platformConfigStore = usePlatformConfig()
|
|
const globalForumsCourse = computed(() => platformConfigStore.getSetting("forum.global_forums_course_id"))
|
|
const isValidGlobalForumsCourse = computed(() => {
|
|
const courseId = globalForumsCourse.value
|
|
return courseId !== null && courseId !== undefined && courseId > 0
|
|
})
|
|
|
|
const router = useRouter()
|
|
|
|
function search() {
|
|
router.push({ name: "UserGroupSearch", query: { q: searchQuery.value } })
|
|
}
|
|
|
|
async function fetchGroups(userId) {
|
|
try {
|
|
const response = await axios.get(`/social-network/groups/${userId}`)
|
|
if (response.data) {
|
|
groups.value = response.data.items
|
|
goToUrl.value = response.data.go_to
|
|
}
|
|
} catch (error) {
|
|
groups.value = []
|
|
goToUrl.value = ""
|
|
}
|
|
}
|
|
|
|
watchEffect(() => {
|
|
if (user.value && user.value.id) {
|
|
fetchGroups(user.value.id)
|
|
}
|
|
})
|
|
</script>
|
|
|