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">
        <NuxtLink
          :to="`/nous-rejoindre/${job.id}`"
          class="text-decoration-none"
        >
          <div class="title-job">{{ job.title }} - {{ job.contractType }}</div>
        </NuxtLink>
        <NuxtLink
          :to="`/nous-rejoindre/${job.id}`"
          class="text-decoration-none"
        >
        <v-btn class="btn-more" text> En savoir plus </v-btn>
        </NuxtLink>
      </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 item.type === "ENTREPRISE" && endPublicationDate >= currentDate;
  });

  totalItems.value = filteredJobs.length;
  console.log(filteredJobs);
  return filteredJobs;
});
</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>