site_logiciels/components/JoinUs/MissionDetail.vue

<template>
  <LayoutContainer>
    <v-row>
      <v-col cols="12">
        <CommonBanner
          imageSrc="/images/actu/pub.png"
          imageAlt="banner"
        />
      </v-col>
    </v-row>

    <div class="job-section">
      <v-row class="mb-6">
        <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">
          <LayoutUITitlePage>
            {{ job.title }}
          </LayoutUITitlePage>

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

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

            <v-col cols="6">
              <v-row>
                <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>
            <p class="custom-row description mb-12">
              <!-- TODO: à revoir, en sachant qu'injecter du html ici serait une faille de sécurité sévère :( -->
              {{ job.content }}
            </p>
          </v-row>

          <v-row class="d-flex justify-center align-center">
            <v-btn
              prepend-icon="fas fa-info"
              class="btn-apply mb-12"
            >
              Je postule
            </v-btn>
          </v-row>

          <v-row class="d-flex justify-space-between custom-row">
            <p>
              MOTS CLÉS
            </p>
            <div>
              <p>PARTAGER</p>
            </div>
          </v-row>

          <v-row class="d-flex justify-space-between mb-8 custom-row">
            <p class="key-word mt-3">
              <!-- TODO: remplacer par la bonne prop -->
              ROCK CONCERT FESTIVAL
            </p>

            <CommonShare />
          </v-row>
        </div>
      </div>
    </div>

  </LayoutContainer>
</template>

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

const route = useRoute();
const { fetch } = useEntityFetch()
const config = useRuntimeConfig()

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) => {
  return DateUtils.format(new Date(date), "dd/MM/yyyy")
};
</script>

<style scoped lang="scss">
.custom-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.progress {
  margin: 32px auto 128px auto;
}

.job-section {
  margin: 32px 12%;

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

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

    div {
      margin: 12px 0;
      font-family: "Barlow", serif;
      font-style: normal;
      font-weight: 500;
      font-size: 25px;
      line-height: 18px;
    }
  }

  .description {
    color: #0e2d32;
    text-align: justify;
    font-family: "Barlow", serif;
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2.125rem;
  }
}

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

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