site_logiciels/components/JoinUs/Form.vue

<template>
  <div>
    <v-card
      v-if="!jobApplicationSent"
    >
      <v-card-title
        class="text-center"
      >
        Formulaire de Candidature
      </v-card-title>

      <v-card-text>
        <v-form
          ref="form"
          validate-on="submit lazy"
          @submit.prevent="submit"
        >
          <v-text-field
            id="jobApplicationName"
            v-model="jobApplication.name"
            :rules="[validateName]"
            label="Nom*"
            required
          />

          <v-text-field
            id="jobApplicationSurname"
            v-model="jobApplication.surname"
            :rules="[validateSurname]"
            label="Prénom*"
            required
          />

          <v-text-field
            id="jobApplicationPhone"
            v-model="jobApplication.phone"
            :rules="[validatePhone]"
            label="Téléphone*"
            required
          />

          <v-text-field
            id="jobApplicationEmail"
            v-model="jobApplication.email"
            :rules="[validateEmail]"
            label="Email*"
            required
          />

          <v-file-input
            id="jobApplicationResume"
            v-model="jobApplication.resume"
            label="Dépôt de CV*"
            accept=".pdf, .jpeg, .png"
            required
          />

          <v-file-input
            id="jobApplicationMotivationLetter"
            v-model="jobApplication.motivationLetter"
            label="Dépôt de lettre de motivation"
            accept=".pdf, .jpeg, .png"
          />

          <v-textarea
            id="jobApplicationMessage"
            v-model="jobApplication.message"
            :rules="[validateNonEmptyMessage, validateMessageLength]"
            label="Message*"
            required
          />
          <span class="remaining-cars-notice">{{ leftCars }} caractères restants</span>
        </v-form>
      </v-card-text>

      <p class="text-right mr-6">
        * Champs obligatoires
      </p>

      <v-card-actions class="justify-center">
        <v-btn
          class="btn-more mb-4"
          @click="submit"
        >
          Envoyer
        </v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<script setup lang="ts">
import ContactRequest from "~/models/Maestro/ContactRequest";
import { useEntityManager } from "~/composables/data/useEntityManager";
import JobApplication from "~/models/Maestro/JobApplication";

const { em } = useEntityManager()

const form: Ref<any | null> = ref(null)

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

const emit = defineEmits(['submit'])

//@ts-ignore
const jobApplication: ContactRequest = reactive(em.newInstance(JobApplication))

// --- Validation ---
const maxMessageLength = 2000

const leftCars: ComputedRef<number> = computed(() =>
  maxMessageLength - (jobApplication.message ? jobApplication.message.length : 0)
)

const validateName = (name: string | null) => !!name || "Le nom est obligatoire";

const validateSurname = (surname: string | null) => !!surname || "Le prénom est obligatoire";

const validateEmail = (email: string | null) =>
  (!!email && /.+@.+\..+/.test(email)) || "L'adresse e-mail doit être valide";

const validatePhone = (email: string | null) =>
  (!!email && /^((\+|00)33\s?|0)[1-7]([\s.]?\d{2}){4}$/.test(email)) || "Le numéro de téléphone doit être valide";

const validateNonEmptyMessage = (message: string | null) =>
  (!!message && message.length > 0) ||
  "Le message ne peut pas être vide";

const validateMessageLength = (message: string | null) =>
  (!!message && message.length <= maxMessageLength) ||
  "Le message ne doit pas dépasser " + maxMessageLength + " caractères";

/**
 * Soumet le formulaire de candidature (boite de dialogue)
 */
const submit = async () => {
  const { valid } = await form.value.validate()

  if (!valid) {
    jobApplicationSent.value = false
    return
  }

  await em.persist(JobApplication, jobApplication)

  jobApplicationSent.value = true;

  emit('submit')
};
</script>

<style scoped lang="scss">

</style>