site_logiciels/components/JoinUs/Dialog.vue

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

      <v-btn @click="close()"> 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="close()"> Fermer </v-btn>
    </div>
  </v-dialog>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'

defineProps({
  modelValue: Boolean,
  jobPostingId: {
    type: Number as PropType<number | null>,
    required: false,
    default: null,
  },
})

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

const emit = defineEmits(['update:modelValue'])

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

const close = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped lang="scss">
.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>