feat: job application

frontend/src/components/Modals/JobApplicationModal.vue

@@ -1,49 +1,144 @@
 <template>
 	<Dialog
+		v-model="show"
+		class="text-base"
 		:options="{
 			title: __('Apply for this job'),
-			size: '2xl',
+			size: 'lg',
 			actions: [
 				{
 					label: 'Submit',
 					variant: 'solid',
-					onClick: (close) => submitResume(close),
+					onClick: (close) => {
+						submitResume(close)
+					},
 				},
 			],
 		}"
 	>
 		<template #body-content>
 			<div class="flex flex-col gap-4">
-				<div>
-					<div class="mb-1.5 text-sm text-gray-600">
-						{{ __('Title') }}
-					</div>
+				<p>
+					{{
+						__(
+							'Submit your resume to proceed with your application for this position. Upon submission, it will be shared with the job poster.'
+						)
+					}}
+				</p>
+				<div v-if="!resume">
 					<FileUploader
-						:fileTypes="['pdf']"
+						:fileTypes="['.pdf']"
 						:validateFile="validateFile"
-						@success="(file) => (resume.value = file.file_url)"
-					/>
+						@success="
+							(file) => {
+								resume = file
+							}
+						"
+					>
+						<template v-slot="{ file, progress, uploading, openFileSelector }">
+							<div class="">
+								<Button @click="openFileSelector" :loading="uploading">
+									{{
+										uploading ? `Uploading ${progress}%` : 'Upload your resume'
+									}}
+								</Button>
+							</div>
+						</template>
+					</FileUploader>
+				</div>
+				<div v-else class="flex items-center">
+					<div class="border rounded-md p-2 mr-2">
+						<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
+					</div>
+					<div class="flex flex-col">
+						<span>
+							{{ resume.file_name }}
+						</span>
+						<span class="text-sm text-gray-500 mt-1">
+							{{ getFileSize() }}
+						</span>
+					</div>
 				</div>
 			</div>
 		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, FileUploader } from 'frappe-ui'
+import { Dialog, FileUploader, Button, createResource } from 'frappe-ui'
+import { FileText } from 'lucide-vue-next'
+import { ref, inject, defineModel } from 'vue'
+import { createToast } from '@/utils/'
+
+const resume = ref(null)
+const show = defineModel()
+const user = inject('$user')
 
 const props = defineProps({
-	email: {
+	job: {
 		type: String,
 		required: true,
 	},
 })
 
-const resume = ref(null)
-
 const validateFile = (file) => {
 	let extension = file.name.split('.').pop().toLowerCase()
 	if (extension != 'pdf') {
 		return 'Only PDF file is allowed'
 	}
 }
+
+const getFileSize = () => {
+	let value = parseInt(resume.value.file_size)
+	if (value > 1048576) {
+		return (value / 1048576).toFixed(2) + 'M'
+	} else if (value > 1024) {
+		return (value / 1024).toFixed(2) + 'K'
+	}
+	return value
+}
+
+const jobApplication = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Job Application',
+				user: user.data?.name,
+				resume: resume.value?.file_name,
+				job: props.job,
+			},
+		}
+	},
+})
+
+const submitResume = (close) => {
+	jobApplication.submit(
+		{},
+		{
+			validate() {
+				if (!resume.value) {
+					return 'Please upload your resume'
+				}
+			},
+			onSuccess() {
+				createToast({
+					title: 'Success',
+					text: 'Your application has been submitted',
+					icon: 'check',
+					iconClasses: 'bg-green-600 text-white rounded-md p-px',
+				})
+			},
+			onError(err) {
+				createToast({
+					title: 'Error',
+					text: err.messages?.[0] || err,
+					icon: 'x',
+					iconClasses: 'bg-red-600 text-white rounded-md p-px',
+					position: 'top-center',
+					timeout: 10,
+				})
+			},
+		}
+	)
+}
 </script>

frontend/src/pages/JobDetail.vue

@@ -23,13 +23,24 @@
 					</template>
 					{{ __('Report') }}
 				</Button>
-				<Button variant="solid" @click="openApplicationModal()">
+				<Button
+					v-if="!jobApplication.data?.length"
+					variant="solid"
+					@click="openApplicationModal()"
+				>
 					<template #prefix>
 						<SendHorizonal class="h-4 w-4" />
 					</template>
 					{{ __('Apply') }}
 				</Button>
 			</div>
+			<div v-else>
+				<Button @click="redirectToLogin(job.data?.name)">
+					<span>
+						{{ __('Login to apply') }}
+					</span>
+				</Button>
+			</div>
 		</header>
 		<div v-if="job.data">
 			<div class="p-5 sm:p-5">
@@ -70,16 +81,22 @@
 					class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-6"
 				></p>
 			</div>
+			<JobApplicationModal
+				v-model="showApplicationModal"
+				:job="job.data.name"
+			/>
 		</div>
 	</div>
 </template>
 <script setup>
 import { Badge, Button, Breadcrumbs, createResource } from 'frappe-ui'
-import { inject, computed } from 'vue'
-import { Plus, MapPin, SendHorizonal, Flag } from 'lucide-vue-next'
+import { inject, ref, onMounted } from 'vue'
+import { MapPin, SendHorizonal, Flag } from 'lucide-vue-next'
+import JobApplicationModal from '@/components/Modals/JobApplicationModal.vue'
 
 const user = inject('$user')
 const dayjs = inject('$dayjs')
+const showApplicationModal = ref(false)
 
 const props = defineProps({
 	job: {
@@ -97,7 +114,26 @@ const job = createResource({
 	auto: true,
 })
 
+const jobApplication = createResource({
+	url: 'frappe.client.get_list',
+	params: {
+		doctype: 'LMS Job Application',
+		filters: {
+			job: job.data?.name,
+			user: user.data?.name,
+		},
+	},
+})
+
+onMounted(() => {
+	jobApplication.submit()
+})
+
 const openApplicationModal = () => {
-	console.log('openApplicationModal')
+	showApplicationModal.value = true
+}
+
+const redirectToLogin = (job) => {
+	window.location.href = `/login?redirect-to=/job-openings/${job}`
 }
 </script>