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>

lms/job/doctype/lms_job_application/lms_job_application.js

@@ -0,0 +1,14 @@
+// Copyright (c) 2024, Frappe and contributors
+// For license information, please see license.txt
+
+frappe.ui.form.on("LMS Job Application", {
+	refresh(frm) {
+		frm.set_query("user", function (doc) {
+			return {
+				filters: {
+					ignore_user_type: 1,
+				},
+			};
+		});
+	},
+});

lms/job/doctype/lms_job_application/lms_job_application.json

@@ -0,0 +1,97 @@
+{
+ "actions": [],
+ "allow_rename": 1,
+ "creation": "2024-02-20 12:15:08.957843",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "user",
+  "resume",
+  "column_break_deax",
+  "job",
+  "job_title",
+  "company"
+ ],
+ "fields": [
+  {
+   "fieldname": "user",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "in_standard_filter": 1,
+   "label": "User",
+   "options": "User",
+   "reqd": 1
+  },
+  {
+   "fieldname": "resume",
+   "fieldtype": "Attach",
+   "label": "Resume",
+   "reqd": 1
+  },
+  {
+   "fieldname": "column_break_deax",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "job",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "in_standard_filter": 1,
+   "label": "Job",
+   "options": "Job Opportunity",
+   "reqd": 1
+  },
+  {
+   "fetch_from": "job.job_title",
+   "fieldname": "job_title",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Job Title",
+   "read_only": 1
+  },
+  {
+   "fetch_from": "job.company_name",
+   "fieldname": "company",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Company",
+   "read_only": 1
+  }
+ ],
+ "index_web_pages_for_search": 1,
+ "links": [],
+ "modified": "2024-02-20 20:10:46.943871",
+ "modified_by": "Administrator",
+ "module": "Job",
+ "name": "LMS Job Application",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "System Manager",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "LMS Student",
+   "share": 1,
+   "write": 1
+  }
+ ],
+ "sort_field": "modified",
+ "sort_order": "DESC",
+ "states": [],
+ "title_field": "user"
+}

lms/job/doctype/lms_job_application/lms_job_application.py

@@ -0,0 +1,39 @@
+# Copyright (c) 2024, Frappe and contributors
+# For license information, please see license.txt
+
+import frappe
+from frappe import _
+from frappe.model.document import Document
+
+
+class LMSJobApplication(Document):
+	def validate(self):
+		self.validate_duplicate()
+
+	def after_insert(self):
+		self.send_email_to_employer()
+
+	def validate_duplicate(self):
+		if frappe.db.exists("LMS Job Application", {"job": self.job, "user": self.user}):
+			frappe.throw(_("You have already applied for this job."))
+
+	def send_email_to_employer(self):
+		company_email = frappe.get_value("Job Opportunity", self.job, "company_email_address")
+		print(company_email)
+		if company_email:
+			subject = _("New Job Applicant")
+
+			args = {
+				"full_name": frappe.db.get_value("User", self.user, "full_name"),
+				"job_title": self.job_title,
+			}
+
+			frappe.sendmail(
+				recipients=company_email,
+				subject=subject,
+				template="job_application",
+				args=args,
+				attachments=[self.resume],
+				header=[subject, "green"],
+				retry=3,
+			)

lms/job/doctype/lms_job_application/test_lms_job_application.py

@@ -0,0 +1,9 @@
+# Copyright (c) 2024, Frappe and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests.utils import FrappeTestCase
+
+
+class TestLMSJobApplication(FrappeTestCase):
+	pass

lms/templates/emails/job_application.html

@@ -0,0 +1,14 @@
+<h3>
+    {{ _("New Job Applicant") }}
+</h3>
+<br>
+<p>
+    {{ _("{0} has applied for the job position {1}").format(full_name, job_title) }}
+</p>
+<br>
+<p>
+    <b>
+        {{ _("You can find their resume attached to this email.") }}
+    </b>
+</p>
+