site_logiciels/components/News/Details.vue

<template>
  <LayoutContainer>
    <v-row>
      <v-col cols="12">
        <CommonBanner
          imageSrc="/images/actu/pub.png"
          imageAlt="banner"
        />
      </v-col>
    </v-row>

    <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">
          <v-row class="center-90">
            <v-col cols="6">
              <v-img :src="getImageUrl(newsItem.attachment)"/>
            </v-col>

            <v-col cols="6">
              <h4>
                {{ newsItem.title }}
              </h4>
            </v-col>
          </v-row>

          <v-row class="center-90">
            <p
              v-html="newsItem.bodyText"
              class="description"
            />
          </v-row>

          <v-row class="d-flex justify-center align-center">
            <v-btn prepend-icon="fas fa-info" class="btn-plus mb-12" text>
              En savoir plus
            </v-btn>
          </v-row>

          <v-row class="d-flex justify-space-between center-90">
            <p>
              MOTS CLÉS
            </p>
            <div>
              <p>PARTAGER</p>
            </div>
          </v-row>

          <v-row class="d-flex justify-space-between mb-8 center-90">
            <p class="key-word mt-3">
              <!-- TODO: remplacer par la bonne prop -->
              ROCK CONCERT FESTIVAL
            </p>

            <CommonShare />
          </v-row>
        </div>
      </div>
    </div>

    <CommonAgenda />
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useEntityFetch } from "~/composables/data/useEntityFetch";
import News from "~/models/Maestro/News";

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}`
}
</script>

<style scoped>
.news {
  .v-img {
    width: 80%;
    margin-left: 3.5rem;
    margin-right: auto;
  }

  h4 {
    margin-top: 11rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 600;
  }

  .description {
    color: var(--primary-color);
    text-align: justify;
    font-size: 30px;
    font-weight: 500;
    line-height: 34px;
    margin-left: 3.5rem;
    margin-right: 3.5rem;
    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>