site_logiciels/pages/actualites/index.vue

<template>
  <LayoutNavigation />

  <h1 class="title mt-12 mb-12">Toutes les news</h1>

  <div v-if="pending">{{ t("pending") }}</div>

  <div v-else>
    <v-row>
      <v-col>
        <div class="d-flex align-items-center ml-12 mt-6 mb-6">
          <div class="carousel-button">
            <i class="fa-solid fa-arrow-left" />
          </div>
          <nuxt-link to="/actualites" class="ml-2 back-button mt-6">
            Retour à l'accueil
          </nuxt-link>
        </div>
      </v-col>

      <v-pagination
        v-model="page"
        :length="Math.ceil(totalItems / itemsPerPage)"
        total-visible="9"
        @input="updatePage"
        rounded="circle"
        max="10"
        class="pagination mr-10 mt-6"
        :prev-icon="page !== 1 ? 'fas fa-arrow-left' : ''"
        :next-icon="
          page !== Math.ceil(totalItems / itemsPerPage)
            ? 'fas fa-arrow-right'
            : ''
        "
      />
    </v-row>

    <v-row
      class="d-flex align-center mr-10"
      v-for="(news, index) in news"
      :key="index"
    >
      <v-card class="container-green">
        <v-card-item>
          <v-container fluid>
            <v-row align="center">
              <v-col cols="3">
                <v-img
                  :src="getImageUrl(news.attachment)"
                  alt="poster"
                  class="image-actu"
                  height="200"
                  width="400"
                />
              </v-col>

              <v-col cols="9">
                <div class="border">
                  <NuxtLink
                    :to="`/actualites/${news.id}`"
                    class="text-decoration-none"
                  >
                    <v-card-title class="card-title">
                      <!-- Icône étoile pour les actualités 'featured' -->

                      <!-- Titre de l'actualité -->
                      {{ news.title }}
                      <v-icon
                        size="16"
                        v-if="news.featured"
                        class="fas fa-star"
                        style="color: yellow"
                      ></v-icon>
                    </v-card-title>
                  </NuxtLink>

                  <v-card-text class="infos">
                    <div class="flex-container">
                      <div class="text-container">
                        <table>
                          <tr>
                            <td class="leadtext">
                              {{ news.leadText }}
                            </td>
                          </tr>
                        </table>
                      </div>
                      <div class="button-container">
                        <v-card-actions class="justify-end">
                          <NuxtLink
                            :to="`/actualites/${news.id}`"
                            class="text-decoration-none"
                          >
                            <v-btn class="btn" text>
                              <v-icon class="fas fa-info mr-2"></v-icon>En
                              savoir plus
                            </v-btn>
                          </NuxtLink>
                        </v-card-actions>
                      </div>
                    </div>
                  </v-card-text>
                  <v-col :cols="actionsColumnWidth"> </v-col>
                </div>
              </v-col>
            </v-row>
          </v-container>
        </v-card-item>
      </v-card>
    </v-row>

    <v-pagination
      v-model="page"
      :length="Math.ceil(totalItems / itemsPerPage)"
      total-visible="9"
      @input="updatePage"
      rounded="circle"
      max="10"
      class="pagination mr-10"
      :prev-icon="page !== 1 ? 'fas fa-arrow-left' : ''"
      :next-icon="
        page !== Math.ceil(totalItems / itemsPerPage)
          ? 'fas fa-arrow-right'
          : ''
      "
    />
  </div>
  <LayoutFooterPrefooter />
  <LayoutFooter />
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useMaestroRequestService } from "~/composables/useMaestroRequestService";

// Base URL for API requests
const config = useRuntimeConfig();
const baseUrl = `${config.public.apiBaseUrl}/api/news`;
const getImageUrl = (attachment) =>
  `${config.public.apiBaseUrl}/uploads/news/${attachment}`;

const { apiRequestService } = useMaestroRequestService();
const currentPage = ref(1);
const totalPages = ref(0);
const page: Ref<number> = ref(1);
const itemsPerPage: Ref<number> = ref(10);
const { t } = useI18n();

const updatePage = (newPage: number) => {
  console.log("updatePage", newPage);
  page.value = newPage;
};

const query = computed(() => {
  const queryParams: {
    page: number;
    type?: string;
    [key: string]: number | string;
  } = {
    page: page.value,
    type: "ENTREPRISE",
  };

  return queryParams;
});

const totalItems = ref(0);

const {
  data: news = [],
  pending,
  refresh,
} = useLazyAsyncData("files", async () => {
  const response = await apiRequestService.get(baseUrl, query.value);
  const collection = response["hydra:member"];
  const currentDate = new Date();

  // Séparer les actualités en fonction de la propriété 'featured'
  const featuredNews = collection
    .filter((item) => item.featured)
    .sort((a, b) => new Date(b.startPublication) - new Date(a.startPublication))
    .slice(0, 3); // Prendre les trois dernières actualités 'featured'

  const regularNews = collection.filter((item) => {
    const startPublicationDate = new Date(item.startPublication);
    const endPublicationDate = new Date(item.endPublication);

    return (
      !item.featured &&
      item.type === "ENTREPRISE" &&
      endPublicationDate >= currentDate &&
      startPublicationDate <= currentDate
    );
  });

  // Combinez les actualités 'featured' et les autres actualités
  const combinedNews = [...featuredNews, ...regularNews];

  totalItems.value = combinedNews.length;
  console.log(combinedNews);
  return combinedNews;
});

watch(page, () => {
  refresh();
});
</script>

<style scoped>
.v-container {
  padding: 0 !important;
}
.v-card-text {
  letter-spacing: 0 !important;
  padding: 0 !important;
}

.v-card-item {
  padding: 0 !important;
}
.title {
  color: #d1cdc7;
  margin-left: 3rem;
  margin-top: 2rem;
  font-family: Barlow;
  font-size: 4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 42px;
}
.border {
  border: 1px solid white !important;
  padding: 9px;
  border-radius: 20px;
  width: 99%;
}

.image-actu {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.btn {
  background: var(--Vert-60, #64afb7);
  display: flex;
  left: 0;
  padding: 25px 28px;
  align-items: center;
  gap: 9px;
  color: var(--NEUTRAL---BLANC, #fff);
  font-family: Barlow;
  font-size: 0.9rem;
  border-radius: 5px;
  font-style: normal;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin-bottom: -1rem;
}

.card-title {
  color: #fff;
  font-family: Barlow;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 39px;
}

.container-green {
  border-radius: 10px;
  min-width: 100%;
  background: #112528;
  margin-bottom: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  height: 60%;
}

.infos {
  color: #fff;
}

.pagination {
  align-items: center;
  margin-top: 16px;
  margin-bottom: 16px;
  color: #112528;
}

.leadtext {
  color: #fff;
  font-family: Barlow;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  margin-left: 1rem;
}

.carousel-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 2px solid #000000;
  cursor: pointer;
  margin-right: 1rem;
}

.back-button {
  text-decoration: none;
  color: #000000;
  font-family: Barlow;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
</style>