index.vue

<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>

      <form v-on:submit="search">
      <IconField class="w-full mt-4 mb-4">
          <InputText
            id="search"
            v-model="queryString"
            fluid
            size="large"
            :placeholder="t('community.homepage.searchBarPlaceholder')"
          />
          <InputIcon class="fa-solid fa-magnifying-glass" @click="search"/>
        </IconField>
    </form>

    </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>