site_logiciels/components/JoinUs/Missions.vue

<template>
  <LayoutContainer>
    <div
      v-for="(job, index) in jobs"
      :key="index"
      class="mission-container"
    >
      <!-- Première ligne -->
      <v-row class="announcement-title ml-6 mr-6">
        <div class="title-job">
          {{ job.title }} - {{ job.contractType }}
        </div>
        <v-btn class="btn-more" text> En savoir plus </v-btn>
      </v-row>

      <!-- Deuxième ligne -->
      <v-row class="announcement-location ml-6 mr-6">
        <v-icon class="icon-location">
          <i class="fas fa-map-marker"></i>
        </v-icon>
        <div class="location">
          {{ job.city }}
        </div>
      </v-row>
    </div>

    <v-row class="apply-row ml-6 mb-6">
      <v-col cols="12">
      <p class="apply-now">
        Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas à
        déposer votre candidature ci-dessous :
      </p>
    </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-btn class="btn-send"> Envoyer ma candidature </v-btn>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useMaestroRequestService } from "~/composables/useMaestroRequestService";
const { apiRequestService } = useMaestroRequestService();

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

  return queryParams;
});
// Base URL for API requests
const totalItems = ref(0);
const config = useRuntimeConfig();
const baseUrl = `${config.public.apiBaseUrl}/api/job-postings`;

const page: Ref<number> = ref(1);
const itemsPerPage: Ref<number> = ref(10);
const { t } = useI18n();
const {
  data: jobs = [],
  pending,
  refresh,
} = useLazyAsyncData("files", async () => {
  const response = await apiRequestService.get(baseUrl, query.value);
  const collection = response["hydra:member"];

  // Obtenir la date actuelle
  const currentDate = new Date();

  const filteredJobs = collection.filter(item => {
    const endPublicationDate = new Date(item.endPublication);
    return endPublicationDate >= currentDate;
  });

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

// const jobs = ref([
//   {
//     id: 1,
//     image: "/images/Opentalent.png",
//     title: "Assistant(e) Commercial(e) h/f",
//     contractType: "CDI",
//     location: "Paris",
//     description:
//       "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
//     properties: ["CDI", "Paris", "Commercial"],
//   },
//   {
//     id: 1,
//     image: "/images/Opentalent.png",
//     title: "Assistant(e) Commercial(e) h/f",
//     contractType: "CDI",
//     location: "Paris",
//     description:
//       "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
//     properties: ["CDI", "Paris", "Commercial"],
//   },
//   {
//     id: 1,
//     image: "/images/Opentalent.png",
//     title: "Assistant(e) Commercial(e) h/f",
//     contractType: "CDI",
//     location: "Paris",
//     description:
//       "Lorem ipsum dolor sit amet. At doloribus nostrum non temporibus quidem est ipsa laborum sed internos dolor in pariatur vitae. ..",
//     properties: ["CDI", "Paris", "Commercial"],
//   },
// ]);
</script>

<style scoped>

.location{
  font-size: 1.3rem !important;
  color: #0e2d32;
}
.announcement-title {
  background: #0e2d32;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.title-job {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 39px;
  color: #ffffff;
}

.btn-more, .btn-send {
  background: #9edbdd;
  color: white;
}

.btn-send {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
}

.announcement-location {
  background: #9edbdd;
  display: flex;
  align-items: center;
  padding: 10px;
}

.icon-location {
  font-size: 1rem !important;
  color: #0e2d32;
}

.location {
  margin-left: 10px;
  font-size: 2rem;
}


.apply-now {
  text-align: center;
  font-style: italic;
  font-weight: 300;
  font-size: 34px;
  line-height: 40px;
  color: #091d20;
  margin-bottom: 2rem;
}

.mission-container {
  margin-top: 5rem;
  margin-bottom: 5%;
}
</style>