site_logiciels/components/JoinUs/Missions.client.vue

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

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

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

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

    <v-row class="mb-6">
      <v-col cols="12">
        <p class="apply-now">
          Nous sommes toujours à la recherche de nouveaux talents.<br />
          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 type { ComputedRef, Ref } from 'vue'
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: 'BUSINESS', 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;
  border-radius: 6px;
  color: var(--on-neutral-color);
  gap: 9px;
}

.v-btn:hover {
  background-color: var(--on-neutral-color-extra-light);
}

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

    @media (max-width: 600px) {
      flex-direction: column;
      height: auto;
    }

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

      @media (max-width: 600px) {
        font-size: 1.2rem;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
      }
    }

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

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

      @media (max-width: 600px) {
        margin: 12px auto;
      }
    }
  }

  .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) {
      margin: 0 auto 12px auto;
    }
  }
}

@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;
  background-color: var(--secondary-color);

  @media (max-width: 600px) {
    width: 80%;
    margin: 12px auto;
  }
}

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

  @media (max-width: 600px) {
    max-width: 90%;
    margin: 12px auto;
  }
}

.v-dialog {
  :deep(.v-overlay__content) {
    overflow: auto !important;
  }

  :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>