site_logiciels/components/News/Details.client.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>
        <div v-if="pending">
          <v-row class="justify-center progress">
            <v-progress-circular indeterminate color="grey" />
          </v-row>
        </div>

        <div v-else-if="newsItem !== null" class="news">
          <CommonMeta
            :title="() => newsItem.title"
            :description="() => newsItem.leadText"
            :image="() => newsItem.image"
          />

          <v-row class="center-90 mb-12">
            <v-col cols="12" md="6">
              <v-img :src="getImageUrl(newsItem.attachment)" 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="newsItem.bodyText" />
          </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"
              :text="true"
            >
              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 { useEntityFetch } from '~/composables/data/useEntityFetch'
import News from '~/models/Maestro/News'

const { mdAndUp, smAndDown } = useDisplay()

const route = useRoute()
const { fetch } = useEntityFetch()
const config = useRuntimeConfig()

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

const { data: newsItem, pending } = fetch(News, newsId)

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

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

  const date = parseISO(newsItem.value.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>