site_logiciels/components/JoinUs/Missions.vue

<template>
  <LayoutContainer>
    <div v-if="pending">
      <v-row class="justify-center progress">
        <v-progress-circular
          indeterminate
          color="grey"
        />
      </v-row>
    </div>

    <div
      v-else
      v-for="(job, index) in jobs"
      :key="index"
      class="mission-container"
    >
      <v-row class="title-container">
        <NuxtLink
          :to="`/nous-rejoindre/${job.id}`"
          class="title"
        >
          {{ job.title }} - {{ job.contractType }}

          <v-icon
            v-if="job.featured"
            class="star fas fa-star"
          />
        </NuxtLink>

        <v-btn
          :to="`/nous-rejoindre/${job.id}`"
          class="btn-more"
        >
          En savoir plus
        </v-btn>
      </v-row>

      <v-row class="location-container">
        <v-icon icon="fas fa-map-marker" />
        <div class="location">
          {{ job.city }}
        </div>
      </v-row>
    </div>

    <v-row>
      <v-col cols="12">
        <LayoutPagination
          v-if="jobCollection && jobCollection.pagination"
          :model-value="page"
          :pagination="jobCollection.pagination"
          @update:model-value="onPageUpdated"
          class="mt-4"
        />
      </v-col>
    </v-row>

    <v-row class="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>

    <!-- Boite de dialogue "soumettre une candidature" -->
    <v-dialog
      v-model="dialog"
      max-width="600px"
      :persistent="!jobApplicationSent"
      no-click-animation
      :retain-focus="false"
    >
      <div v-if="!jobApplicationSent">
        <JoinUsForm @submit="onFormSubmit"/>

        <v-btn @click="dialog = false">
          Annuler
        </v-btn>
      </div>
      <div v-else>
        <v-card class="pa-6 text-center">
          Votre candidature a bien été envoyée, merci de votre intérêt.<br/>
          Nous vous recontacterons dès que possible.
        </v-card>

        <v-btn @click="dialog = false">
          Fermer
        </v-btn>
      </div>
    </v-dialog>
  </LayoutContainer>
</template>

<script setup lang="ts">
import { useEntityFetch } from "~/composables/data/useEntityFetch";
import JobPosting from "~/models/Maestro/JobPosting";
import type { AnyJson } from "~/types/data";

const { fetchCollection } = useEntityFetch()

const page: Ref<number> = ref(1);

const query: ComputedRef<AnyJson> = computed(() => {
    return { type: "ENTREPRISE", page: page.value }
  }
)

const { data: jobCollection, pending, refresh } = fetchCollection(
  JobPosting,
  null,
  query
)

// TODO: voir pourquoi on se retrouve obligé de passer par ce computed pour avoir le type TS correct?
const jobs: ComputedRef<JobPosting[]> = computed(() => {
  return jobCollection.value !== null ?
         jobCollection.value.items as JobPosting[] :
         []
})

const onPageUpdated = async (newVal: number): Promise<void> => {
  page.value = newVal

  pending.value = true
  await refresh()

  // TODO: remplacer par un watcher sur pending?
  setTimeout(
    async () => await navigateTo({ path: '', hash: '#join-us-anchor' }),
    200
  )
}

/**
 * Faut-il afficher la boite de dialogue de candidature
 */
const dialog = ref(false);
const jobApplicationSent: Ref<boolean> = ref(false)

const onFormSubmit = () => {
  jobApplicationSent.value = true
}
</script>

<style scoped lang="scss">
.progress {
  margin: 32px auto 128px auto;
}

.v-btn {
  font-weight: 600;
  height: 50px;
  background: var(--secondary-color);
  border-radius: 6px;
  color: var(--on-secondary-color);
  gap: 9px;
}

.mission-container {
  margin: 64px 12%;

  .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary-color);
    color: var(--on-primary-color);
    height: 80px;
    padding: 10px 10px 10px 1px;

    .title {
      font-weight: 600;
      font-size: 1.5rem;
      line-height: 39px;
      color: var(--on-primary-color);
      text-decoration: none;
      margin-left: 36px;
    }

    .star {
      margin-left: 12px;
      font-size: 24px;
      color: yellow;
      vertical-align: baseline;
    }

    .btn-more {
      margin-right: 8px;
      display: flex;
      align-items: center;
    }
  }

  .location-container {
    background: var(--secondary-color);
    display: flex;
    align-items: center;
    padding: 10px;

    .v-icon {
      font-size: 1rem !important;
      color: var(--primary-color);
    }

    .location {
      color: var(--primary-color);
      margin-left: 10px;
      font-size: 1.3rem;
    }
  }
}

@media (max-width: 600px) {
  .mission-container {
    margin: 64px 6%;
  }
}

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

.apply-now {
  text-align: center;
  font-style: italic;
  font-weight: 300;
  font-size: 34px;
  line-height: 40px;
  color: var(--primary-color);
  margin-bottom: 2rem;
}

.v-dialog {
  :deep(.v-card) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .v-btn {
    width: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

}
</style>