site_logiciels/components/JoinUs/MissionDetail.vue

<template>
  <LayoutContainer>
    <div class="job-section">
      <v-row class="mb-6 center-90">
        <v-col class="d-flex align-items-center">
          <v-btn
            to="/nous-rejoindre"
            prepend-icon="fas fa-arrow-left"
            variant="outlined"
            class="back-button"
          >
            Retour aux annonces
          </v-btn>
        </v-col>
      </v-row>

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

        <div v-else-if="job !== null">
          <CommonMeta :title="job.title" description="Offre d'emploi" />

          <h3>
            {{ job.title }}
          </h3>

          <v-row class="details blue-content my-6">
            <v-col cols="12" md="6">
              <v-row>
                <div>
                  Type de contrat :
                  <b>{{ $t(job.contractType) }} </b>
                </div>
              </v-row>

              <v-row>
                <div>
                  Localisation :
                  <b>{{ job.postalCode }} {{ job.city }}</b>
                </div>
              </v-row>
            </v-col>

            <v-col cols="12" md="6">
              <v-row v-if="job.sector.length > 0">
                <div>
                  Secteur d'activité : <b>{{ job.sector.join(', ') }}</b>
                </div>
              </v-row>

              <v-row>
                <div>
                  Date de parution :
                  <b>{{ formatDate(job.startPublication) }}</b>
                </div>
              </v-row>
            </v-col>
          </v-row>

          <v-row class="center-90">
            <p class="center-90 description mb-12" v-html="job.content" />
          </v-row>

          <v-row class="d-flex justify-center align-center">
            <v-btn class="btn-apply mb-12" @click="apply"> Je postule </v-btn>
          </v-row>

          <JoinUsDialog v-model="dialog" :job-posting-id="job.id" />

          <v-row class="d-flex justify-space-between center-90">
            <p v-if="job.tags.length > 0">MOTS CLÉS</p>
            <div v-if="mdAndUp">
              <p>PARTAGER</p>
            </div>
          </v-row>

          <v-row class="d-flex justify-space-between mb-8 center-90">
            <p v-if="job.tags.length > 0" class="key-word mt-3">
              <span v-for="tag in job.tags" :key="tag.id" class="mr-2">
                {{ tag.name }}
              </span>
            </p>
            <CommonShare v-if="mdAndUp" />
          </v-row>

          <div v-if="smAndDown">
            <p>PARTAGER</p>
            <CommonShare />
          </div>
        </div>
      </div>
    </div>
  </LayoutContainer>
</template>

<script setup lang="ts">
import 'vue3-carousel/dist/carousel.css'
import { useDisplay } from 'vuetify'
import { useEntityFetch } from '~/composables/data/useEntityFetch'
import JobPosting from '~/models/Maestro/JobPosting'
import DateUtils from '~/services/utils/dateUtils'

const { mdAndUp, smAndDown } = useDisplay()

const route = useRoute()
const { fetch } = useEntityFetch()

const jobId: number = parseInt(route.params.id as string)
if (!jobId || isNaN(jobId)) {
  throw new Error('Missing or invalid id')
}

const { data: job, pending } = fetch(JobPosting, jobId)

const formatDate = (date: string) => {
  if (!date) {
    return '-'
  }
  return DateUtils.format(new Date(date), 'dd/MM/yyyy')
}

const dialog: Ref<boolean> = ref(false)

const apply = () => {
  dialog.value = true
}
</script>

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

.job-section {
  margin: 32px 0;

  h3 {
    font-size: 32px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
  }

  .details {
    padding: 0 20%;
    background-color: var(--secondary-color);
    color: var(--on-secondary-color);
    height: 10rem;

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

    .v-row {
      width: 90%;
      margin-left: auto;
      margin-right: auto;
    }

    div {
      margin: 12px 0;
      font-weight: 500;
      font-size: 25px;
      line-height: 18px;

      @media (max-width: 600px) {
        font-size: 16px;
      }
    }
  }

  .description {
    color: var(--on-neutral-color);
    font-size: 21px;
    font-weight: 500;
    line-height: 2.125rem;
    padding: 12px 36px;
  }
}

@media (max-width: 600px) {
  .job-section {
    margin: 32px 6%;
  }
}

.btn-apply {
  background: var(--secondary-color);
  color: var(--on-secondary-color);
  display: flex;
  left: 0;
  padding: 25px 28px;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  border-radius: 5px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin-bottom: -1rem;
}
</style>