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">
                      {{ news.title }}
                    </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">
                          <v-btn class="btn" text>
                            <v-icon class="fas fa-info mr-2"></v-icon>En savoir
                            plus
                          </v-btn>
                        </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>
</template>

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

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;
};

// récupère les événements en fonction des filtres
const query = computed(() => {
  const queryParams: { page: number; [key: string]: number | string } = {
    page: page.value,
  };

  return queryParams;
});
const getImageUrl = (attachment: string) => {
  return `https://local.maestro.opentalent.fr/uploads/news/${attachment}`;
};
const totalItems = ref(0);

// data event list using lazy loading
const {
  data: news = [],
  pending,
  refresh,
} = useLazyAsyncData("files", async () => {
  const response = await apiRequestService.get(
    "https://local.maestro.opentalent.fr/api/news",
    query.value
  );
  const collection = response["hydra:member"];
  totalItems.value = response["hydra:totalItems"];
  console.log(collection);
  return collection;
});

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>