add the apply to job offer dialog

.eslintrc.cjs

@@ -55,5 +55,6 @@ module.exports = {
     Ref: 'readonly',
     watch: 'readonly',
     useGtag: 'readonly',
+    defineEmits: 'readonly'
   },
 }

components/JoinUs/Dialog.vue

@@ -0,0 +1,68 @@
+<!-- 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>

components/JoinUs/Form.vue

@@ -89,13 +89,21 @@
 </template>
 
 <script setup lang="ts">
-import type { ComputedRef, Ref } from 'vue'
+import type { ComputedRef, PropType, Ref } from 'vue'
 import { reactive } from 'vue'
 import ContactRequest from '~/models/Maestro/ContactRequest'
 import { useEntityManager } from '~/composables/data/useEntityManager'
 import JobApplication from '~/models/Maestro/JobApplication'
 import FileUtils from '~/services/utils/FileUtils'
 
+const props = defineProps({
+  jobPostingId: {
+    type: Number as PropType<number | null>,
+    required: false,
+    default: null,
+  },
+})
+
 const { em } = useEntityManager()
 
 const form: Ref<HTMLElement | null> = ref(null)
@@ -167,6 +175,8 @@ const validateMessageLength = (message: string | null) =>
  * Soumet le formulaire de candidature (boite de dialogue)
  */
 const submit = async () => {
+  jobApplication.jobPostingId = props.jobPostingId
+  
   jobApplication.resume =
     resumeUpload.value !== null
       ? {
@@ -185,6 +195,7 @@ const submit = async () => {
         }
       : null
 
+  // @ts-ignore
   const { valid } = await form.value!.validate()
 
   if (!valid) {

components/JoinUs/MissionDetail.vue

@@ -65,9 +65,11 @@
             <p class="center-90 description mb-12" v-html="job.content" />
           </v-row>
 
-          <!--<v-row class="d-flex justify-center align-center">
+          <v-row class="d-flex justify-center align-center">
             <v-btn class="btn-apply mb-12" @click="apply"> Je postule </v-btn>
-          </v-row>-->
+          </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>
@@ -121,8 +123,10 @@ const formatDate = (date: string) => {
   return DateUtils.format(new Date(date), 'dd/MM/yyyy')
 }
 
-const apply = () => {
+const dialog: Ref<boolean> = ref(false)
 
+const apply = () => {
+  dialog.value = true
 }
 </script>
 

components/JoinUs/Missions.client.vue

@@ -66,27 +66,7 @@
     </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>
+    <JoinUsDialog v-model="dialog" />
   </LayoutContainer>
 </template>
 
@@ -134,7 +114,6 @@ const onPageUpdated = async (newVal: number): Promise<void> => {
  * Faut-il afficher la boite de dialogue de candidature
  */
 const dialog = ref(false)
-const jobApplicationSent: Ref<boolean> = ref(false)
 
 const onFormSubmit = () => {
   jobApplicationSent.value = true
@@ -269,21 +248,4 @@ const onFormSubmit = () => {
     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>

models/Maestro/JobApplication.ts

@@ -1,4 +1,4 @@
-import { Uid, Str, Attr } from 'pinia-orm/dist/decorators'
+import { Uid, Str, Attr, Num } from 'pinia-orm/dist/decorators'
 import ApiModel from '~/models/ApiModel'
 
 /**
@@ -32,4 +32,7 @@ export default class JobApplication extends ApiModel {
 
   @Str(null)
   declare message: string | null
+
+  @Num(null)
+  declare jobPostingId: number | null
 }