site_logiciels/components/JoinUs/Missions.vue

<template>
  <LayoutContainer>
    <div v-for="(job, index) in jobs" :key="index" class="mission-container">
      <!-- Première ligne avec alignement vertical -->
      <v-row class="announcement-title ml-6 mr-6 d-flex align-center">
        <NuxtLink
          :to="`/nous-rejoindre/${job.id}`"
          class="text-decoration-none"
        >
          <div class="title-job ml-4">
            <!-- Icône étoile pour les annonces 'featured' -->
            {{ job.title }} - {{ job.contractType }}
            <v-icon
              v-if="job.featured"
              class="fas fa-star"
              style="color: yellow"
            ></v-icon>
          </div>
        </NuxtLink>
        <NuxtLink
          :to="`/nous-rejoindre/${job.id}`"
          class="text-decoration-none d-flex align-center"
        >
          <v-icon class="mr-2"> </v-icon>
          <v-btn class="btn-more mr-4" text> En savoir plus </v-btn>
        </NuxtLink>
      </v-row>

      <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" @click="dialog = true">
          Envoyer ma candidature
        </v-btn>
      </v-col>
    </v-row>

    <v-dialog v-model="dialog" max-width="600px">
      <v-card>
        <v-card-title class="text-center" style="font-family: Barlow">
          Formulaire de Candidature
        </v-card-title>
        <v-card-text>
          <v-form>
            <v-text-field label="Nom*" required></v-text-field>
            <v-text-field label="Prénom*" required></v-text-field>
            <v-text-field label="Téléphone*" required></v-text-field>
            <v-text-field label="Email*" required></v-text-field>
            <v-file-input
              label="Dépôt de CV*"
              accept=".pdf, .jpeg, .png"
              required
            ></v-file-input>
            <v-file-input
              label="Dépôt de lettre de motivation"
              accept=".pdf, .jpeg, .png"
            ></v-file-input>
            <v-textarea label="Message*" required></v-textarea>
          </v-form>
        </v-card-text>
        <p class="text-right mr-6">* Champs obligatoires</p>
        <v-card-actions>
          <v-btn class="btn-more" @click="sendApplication">Envoyer</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </LayoutContainer>
</template>

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

const dialog = ref(false);

const sendApplication = () => {
  console.log("Formulaire envoyé");
  dialog.value = false;
};

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 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"];
  const currentDate = new Date();

  // Séparer les annonces 'featured'
  const featuredJobs = collection.filter(
    (item) => item.featured && new Date(item.startPublication) <= currentDate
  );

  // Filtrer et trier les autres annonces
  const regularJobs = collection.filter((item) => {
    const startPublicationDate = new Date(item.startPublication);
    const endPublicationDate = new Date(item.endPublication);
    return (
      !item.featured &&
      startPublicationDate <= currentDate &&
      endPublicationDate >= currentDate
    );
  });

  // Combinez les annonces 'featured' et les autres annonces
  const combinedJobs = [...featuredJobs, ...regularJobs];

  totalItems.value = combinedJobs.length;
  console.log(combinedJobs);
  return combinedJobs;
});
</script>

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

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

.btn-more,
.btn-send {
  font-weight: 600;
  height: 50px;
  background: #64afb7;
  border-radius: 6px;
  color: white;
  gap: 9px;
}

.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: 3rem;
  margin-bottom: 5%;
}
</style>