site_logiciels/components/News/Details.vue

<template>
  <LayoutContainer>
    <div class="news-section">
      <v-row class="mb-6 center-90">
        <v-col class="d-flex align-items-center">
          <v-btn
            to="/actualites"
            prepend-icon="fas fa-arrow-left"
            variant="outlined"
            class="back-button"
          >
            Retour aux actualités
          </v-btn>
        </v-col>
      </v-row>

      <div v-if="newsItem">
        <div class="news">
          <CommonMeta
            :title="newsItem.title!"
            :description="newsItem.leadText!"
            :image="
              getImageUrl(newsItem.attachment) ??
              'public/images/logos/opentalent/Logo_Opentalent-gris.png'
            "
          />

          <v-row class="center-90 mb-12">
            <v-col cols="12" md="6">
              <v-img
                :src="getImageUrl(newsItem.attachment) ?? undefined"
                cover
              />
            </v-col>

            <v-col cols="12" md="6" class="d-flex flex-column justify-center">
              <h3>
                {{ newsItem.title }}
              </h3>

              <strong>
                {{ newsItem.leadText }}
              </strong>

              <p>
                {{ formattedPublicationDate }}
              </p>
            </v-col>
          </v-row>

          <v-row class="center-90">
            <p class="description" v-html="body" />
          </v-row>

          <v-row class="d-flex justify-center align-center">
            <v-btn
              v-if="newsItem.linkButton"
              :href="newsItem.linkButton"
              target="_blank"
              class="btn-plus mb-12"
            >
              En savoir plus
            </v-btn>
          </v-row>

          <v-row class="d-flex justify-space-between center-90">
            <div>
              <p v-if="newsItem.tags.length > 0">MOTS CLÉS</p>
            </div>
            <div v-if="mdAndUp">
              <p>PARTAGER</p>
            </div>
          </v-row>

          <v-row class="d-flex justify-space-between mb-8 center-90">
            <p class="key-word mt-3">
              <span v-for="tag in newsItem.tags" :key="tag.id" class="mr-2">
                {{ tag.name }}
              </span>
            </p>

            <CommonShare v-if="mdAndUp" />
          </v-row>

          <div v-if="smAndDown" class="center-90">
            <p>PARTAGER</p>
            <CommonShare />
          </div>
        </div>
      </div>
    </div>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useDisplay } from 'vuetify'
import { parseISO, format } from 'date-fns'
import { fr } from 'date-fns/locale'
import type { ComputedRef } from 'vue'
import News from '~/models/Maestro/News'
import { useEntityManager } from '~/composables/data/useEntityManager'

const { mdAndUp, smAndDown } = useDisplay()

const route = useRoute()
const { em } = useEntityManager()
const config = useRuntimeConfig()

const newsId: number = parseInt(route.params.id as string)
if (!newsId || isNaN(newsId)) {
  throw new Error('Missing or invalid id')
}

const newsItem = (await em.fetch(News, newsId, true)) as News

const body: Ref<string | null> = ref(null)

onMounted(() => {
  // Seule solution trouvée pour le moment pour résoudre une erreur d'hydratation...
  body.value = newsItem.bodyText
})

const getImageUrl = (attachment: string | null): string | null => {
  if (!attachment) {
    return null
  }
  return `${config.public.apiBaseUrl}/uploads/news/${attachment}`
}

const formattedPublicationDate: ComputedRef<string> = computed(() => {
  if (!newsItem) {
    return ''
  }

  const date = parseISO(newsItem.startPublication!)

  let formattedPublicationDate = format(date, "'Le' dd MMMM yyyy", {
    locale: fr,
  })

  formattedPublicationDate = formattedPublicationDate.replace(
    'Le 01 ',
    'Le 1er '
  )

  return formattedPublicationDate
})
</script>

<style scoped>
.news {
  .v-img {
    max-height: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  h3 {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 600;
    color: var(--primary-color);
  }

  strong {
    font-size: 21px;
    margin-top: 16px;
  }

  .description {
    color: var(--primary-color);
    max-width: 80%;
    font-size: 21px;
    font-weight: 500;
    line-height: 34px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
  }

  .btn-plus {
    background: var(--secondary-color);
    color: var(--on-secondary-color);
    display: flex;
    left: 0;
    padding: 25px 28px;
    align-items: center;
    gap: 9px;
    font-size: 0.9rem;
    border-radius: 5px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-bottom: -1rem;
  }
}

.back-button {
  text-decoration: none;
  color: var(--on-neutral-color);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.key-word {
  color: var(--on-neutral-color);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}
</style>