-
Mathieu Massaviol authoredMathieu Massaviol authored
index.vue 4.03 KiB
<template>
<div class="p-4 pl-8 w-11/12 md:w-10/12 xl:w-9/12 m-auto">
<h1 :class="`font-title text-4xl uppercase font-bold text-[--p-primary-color]`">
{{ title }}
</h1>
<section class="mt-8">
<h3 class="text-2xl mb-2">{{ t('community.homepage.presentationLabel') }}</h3>
<div class="flex flex-row gap-8">
<p class="text-justify w-full">{{ abstract }}</p>
<img
v-if="logoUrl"
:src="logoUrl"
alt=""
class="max-w-[200px] max-h-[200px] w-fit h-fit object-cover"
/>
</div>
</section>
<section class="mt-8">
<h3 class="text-2xl">
{{ t('community.homepage.searchBarLegend') }}
</h3>
<IconField class="w-full mt-8 mb-4">
<InputText
id="search"
v-model="queryString"
fluid
size="large"
:placeholder="t('community.homepage.searchBarPlaceholder')"
v-on:keyup.enter="search"
/>
<InputIcon class="fa-solid fa-magnifying-glass fa-lg cursor-pointer hover:text-primary" @click="search"/>
</IconField>
</section>
<section
class="flex justify-center mt-8"
v-if="!account.isAuthenticated || cannot('read', community)"
>
<Button
v-if="!account.isAuthenticated"
:as="OcLink"
:to="{ name: 'connection' }"
size="large"
:class="`bg-${color}-400 hover:bg-${color}-700 text-white font-bold shadow-md border-0 mt-8 p-4 rounded-md m-auto`"
>
{{ t('community.homepage.connectButtonLabel', { communityName: title }) }}
</Button>
<Button
v-else-if="cannot('read', community)"
:as="OcLink"
:to="{ name: 'community.join', params: { community: community.name } }"
size="large"
:class="`bg-${color}-400 hover:bg-${color}-700 text-white border-0 mt-8 p-4 rounded-md m-auto`"
>
{{ t('community.homepage.joinButtonLabel', { communityName: title }) }}
</Button>
</section>
<section class="mt-8">
<h3 class="text-2xl">
{{ t('community.homepage.yourServices') }}
</h3>
<OcHomeCommunityActionList
class="mt-4"
:color="color"
:is-authenticated="account.isAuthenticated"
/>
</section>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useAccountStore } from '@/stores/account'
import { useI18n } from 'vue-i18n'
import { useTranslateValue } from '@/composables/useTranslateValue'
import InputText from 'primevue/inputtext'
import IconField from 'primevue/iconfield'
import InputIcon from 'primevue/inputicon'
import Button from 'primevue/button'
import OcLink from '@/components/OcLink.vue'
import OcHomeCommunityActionList from '@/components/OcHomeCommunityActionList/OcHomeCommunityActionList.vue'
import { getColor } from '@/helpers/communityColor'
import { useCommunityData } from '@/dataLoaders/community'
import { useTreeStore } from '@/stores/tree'
import { useAbility } from '@casl/vue'
import { useRouter } from 'vue-router'
definePage({
name: 'community',
meta: {
loaders: [useCommunityData]
}
})
const treeStore = useTreeStore()
treeStore.state.selectedNodeKey = undefined
const { data: community } = useCommunityData()
const { locale, t } = useI18n()
const { translateValue } = useTranslateValue()
const { cannot } = useAbility()
const router = useRouter()
const account = useAccountStore()
const title = computed(() => translateValue(community.value?.title))
const abstract = computed(() => translateValue(community.value?.abstract))
const logoUrl = computed(() => community.value?.logo ?? null)
const color = computed(() => getColor(community.value))
const isMemberOfCurrentCommunity = computed(
() => community.value?.['@id'] && memberCommunitiesList.value.includes(community.value?.['@id'])
)
const queryString = ref('')
const search = () => {
router.push({
name: 'community.search',
params: {
lang: locale.value,
community: community.value.name,
},
query: {
q: queryString.value,
start: 0
}
})
}
</script>