site_logiciels/components/News/List.client.vue

<template>
  <div v-if="pending">
    <v-row class="justify-center progress">
      <v-progress-circular indeterminate color="grey" />
    </v-row>
  </div>

  <div v-else-if="!newsCollection || !newsCollection!.items">
    <v-row class="justify-center"> Aucun résultat trouvé </v-row>
  </div>

  <div v-else>
    <v-row
      v-for="(newsItem, index) in newsCollection!.items"
      :key="index"
      class="news d-flex align-center mr-10"
    >
      <v-card class="alt-theme">
        <v-card-item>
          <v-container fluid>
            <v-row align="center">
              <v-col cols="12" lg="3">
                <v-img
                  v-if="newsItem.attachment"
                  :src="getImageUrl(newsItem.attachment)"
                  alt="poster"
                  cover
                />
              </v-col>

              <v-col cols="12" lg="9">
                <div class="details">
                  <NuxtLink
                    :to="`/actualites/${newsItem.id}`"
                    class="text-decoration-none"
                  >
                    <v-card-title>
                      {{ newsItem.title }}

                      <v-icon
                        v-if="newsItem.featured"
                        size="16"
                        icon="star fas fa-star"
                      />
                    </v-card-title>
                  </NuxtLink>

                  <v-card-text>
                    <div class="flex-container">
                      <div class="text-container">
                        <table>
                          <tr>
                            <td>
                              {{ newsItem.leadText }}
                            </td>
                          </tr>
                        </table>
                      </div>

                      <div class="button-container">
                        <v-card-actions class="justify-end">
                          <v-btn
                            :to="`/actualites/${newsItem.id}`"
                            class="inv-theme btn mr-2 mb-1"
                          >
                            En savoir plus
                          </v-btn>
                        </v-card-actions>
                      </div>
                    </div>
                  </v-card-text>
                </div>
              </v-col>
            </v-row>
          </v-container>
        </v-card-item>
      </v-card>
    </v-row>

    <v-row v-if="newsCollection!.items">
      <v-col cols="12">
        <LayoutPagination
          v-if="newsCollection && newsCollection.pagination"
          :model-value="page"
          :pagination="newsCollection.pagination"
          class="mt-4"
          @update:model-value="onPageUpdated"
        />
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
import type { ComputedRef, Ref } from 'vue'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import News from '~/models/Maestro/News'

const config = useRuntimeConfig()
const { fetchCollection } = useEntityFetch()

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

const page: Ref<number> = ref(1)

const query: ComputedRef<Record<string, string | number>> = computed(() => {
  return {
    page: page.value,
    type: 'BUSINESS',
    'startPublication[before]': 'now',
    'endPublication[after]': 'now',
  }
})

const {
  data: newsCollection,
  pending,
  refresh,
} = fetchCollection(News, null, query)

const onPageUpdated = async (newVal: number): Promise<void> => {
  page.value = newVal

  pending.value = true
  await refresh()

  setTimeout(
    async () => await navigateTo({ path: '', hash: '#news-anchor' }),
    200
  )
}
</script>

<style scoped lang="scss">
.v-container {
  padding: 0 !important;
}

h1 {
  color: #d1cdc7; /* TODO: pqoi cette couleur ici? */
  margin-left: 3rem;
  margin-top: 2rem;
  font-size: 4rem;
  font-weight: 600;
  line-height: 42px;

  @media (max-width: 600px) {
    font-size: 2.5rem;
  }
}

.news {
  .v-card {
    border-radius: 14px;
    min-width: 100%;
    margin-bottom: 1rem;
    margin-left: 2rem;
    margin-right: 2rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    height: 60%;

    .v-card-text {
      letter-spacing: 0 !important;
      padding: 0 !important;
    }

    .v-card-item {
      padding: 0 !important;
    }
  }

  .v-img {
    width: 100%;
    max-height: 160px;
    margin: 12px;
    border-radius: 14px;

    @media (max-width: 1240px) {
      width: 97%;
      margin: 1.5%;
    }
  }

  .details {
    border: 1px solid var(--neutral-color) !important;
    padding: 9px;
    border-radius: 24px;
    width: 99%;

    @media (max-width: 1240px) {
      width: 94%;
      margin: -18px 3% 12px;
    }

    .v-card-title {
      color: var(--neutral-color);
      font-size: 36px;
      font-weight: 600;
      line-height: 39px;

      @media (max-width: 1240px) {
        font-size: 24px;
      }
    }

    .star {
      color: yellow !important;
    }

    .v-card-text {
      td {
        color: var(--neutral-color);
        font-size: 22px;
        font-weight: 500;
        line-height: 26px;
        margin-left: 1rem;
      }
    }

    .v-btn {
      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;
    }
  }
}
</style>