site_logiciels/components/News/List.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"
          @update:model-value="onPageUpdated"
          class="mt-4"
        />
      </v-col>
    </v-row>
  </div>
</template>

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

const i18n = useI18n();
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>