feat: refactor job applications UI with ListView

2025-11-03 01:49:59 +05:30
parent 9da1bfeea1
commit 8719fa6696
3 changed files with 170 additions and 164 deletions
--- a/frontend/src/pages/JobApplications.vue
+++ b/frontend/src/pages/JobApplications.vue
@@ -8,17 +8,19 @@
 				:items="[
 					{ label: __('Jobs'), route: { name: 'Jobs' } },
 					{
-						label: job.data?.job_title,
-						route: { name: 'JobDetail', params: { job: job.data?.name } },
+						label: applications.data?.[0]?.job_title,
+						route: { name: 'JobDetail', params: { job: props.job } },
 					},
 					{ label: __('Applications') },
 				]"
 			/>
 		</header>
-		<div v-if="job.data" class="max-w-4xl mx-auto pt-5 p-4">
+		<div class="max-w-4xl mx-auto pt-5 p-4">
 			<div class="mb-6">
 				<h1 class="text-2xl font-semibold text-ink-gray-9 mb-2">
-					{{ __('Applications for {0}').format(job.data.job_title) }}
+					{{
+						__('Applications for {0}').format(applications.data?.[0]?.job_title)
+					}}
 				</h1>
 				<p class="text-ink-gray-6">
 					{{ applications.data?.length || 0 }}
@@ -30,75 +32,83 @@
 				</p>
 			</div>

-			<div v-if="applications.data?.length" class="space-y-4">
-				<div
-					v-for="application in applications.data"
-					:key="application.name"
-					class="border rounded-lg p-4 hover:border-outline-gray-3"
+			<ListView
+				v-if="applications.data?.length"
+				:columns="applicationColumns"
+				:rows="applicantRows"
+				row-key="name"
+				:options="{
+					showTooltip: false,
+					selectable: false,
+				}"
+			>
+				<ListHeader
+					class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
 				>
-					<div class="flex items-start justify-between">
-						<div class="flex items-center space-x-3">
-							<img
-								v-if="application.user_image"
-								:src="application.user_image"
-								:alt="application.full_name"
-								class="w-10 h-10 rounded-full object-cover"
-							/>
+					<ListHeaderItem :item="item" v-for="item in applicationColumns" />
+				</ListHeader>
+				<ListRows>
+					<ListRow
+						:row="row"
+						v-slot="{ column, item }"
+						v-for="row in applicantRows"
+						class="cursor-pointer"
+					>
+						<ListRowItem :item="item">
 							<div
-								v-else
-								class="w-10 h-10 rounded-full bg-surface-gray-3 flex items-center justify-center"
+								v-if="column.key === 'display_name'"
+								class="flex items-center space-x-3"
 							>
-								<User class="w-5 h-5 text-ink-gray-6" />
+								<img
+									v-if="row.user_image"
+									:src="row.user_image"
+									:alt="row.full_name"
+									class="w-8 h-8 rounded-full object-cover"
+								/>
+								<div
+									v-else
+									class="w-8 h-8 rounded-full bg-surface-gray-3 flex items-center justify-center"
+								>
+									<User class="w-4 h-4 text-ink-gray-6" />
+								</div>
+								<span class="text-sm font-medium">{{ item }}</span>
 							</div>
-							<div>
-								<h3 class="font-medium text-ink-gray-9">
-									{{ application.full_name || application.user }}
-								</h3>
-								<p class="text-sm text-ink-gray-6">{{ application.email }}</p>
-								<p class="text-xs text-ink-gray-5 mt-1">
-									{{
-										__('Applied on {0}').format(
-											dayjs(application.creation).format('MMM DD, YYYY')
-										)
-									}}
-								</p>
+							<div
+								v-else-if="column.key === 'actions'"
+								class="flex justify-center space-x-2"
+							>
+								<Button
+									v-if="row.resume"
+									@click="downloadResume(row.resume)"
+									variant="ghost"
+									size="sm"
+								>
+									<template #prefix>
+										<Download class="w-4 h-4" />
+									</template>
+									{{ __('Resume') }}
+								</Button>
+								<Button @click="openEmailModal(row)" variant="ghost" size="sm">
+									<template #prefix>
+										<Mail class="w-4 h-4" />
+									</template>
+									{{ __('Email') }}
+								</Button>
 							</div>
-						</div>
-						<div class="flex items-center space-x-2">
-							<Button
-								v-if="application.resume_url"
-								@click="downloadResume(application.resume_url)"
-								variant="outline"
-								size="sm"
-							>
-								<template #prefix>
-									<Download class="w-4 h-4" />
-								</template>
-								{{ __('Resume') }}
-							</Button>
-							<Button
-								@click="openEmailModal(application)"
-								variant="solid"
-								size="sm"
-							>
-								<template #prefix>
-									<Mail class="w-4 h-4" />
-								</template>
-								{{ __('Email') }}
-							</Button>
-						</div>
-					</div>
-				</div>
-			</div>
+							<div v-else class="text-sm">
+								{{ item }}
+							</div>
+						</ListRowItem>
+					</ListRow>
+				</ListRows>
+			</ListView>
 			<EmptyState v-else type="Applications" />
 		</div>

 		<Dialog
 			v-model="showEmailModal"
 			:options="{
-				title: __('Send Email to {0}').format(
-					selectedApplicant?.full_name || selectedApplicant?.user
-				),
+				title: __('Send Email to {0}').format(selectedApplicant?.full_name),
 				size: 'lg',
 				actions: [
 					{
@@ -112,18 +122,23 @@
 			<template #body-content>
 				<div class="space-y-4">
 					<FormControl
-						v-model="emailSubject"
+						v-model="emailForm.subject"
 						:label="__('Subject')"
 						:placeholder="__('Enter email subject')"
 						required
 					/>
+					<FormControl
+						v-model="emailForm.replyTo"
+						:label="__('Reply To')"
+						:placeholder="__('Enter reply to email')"
+					/>
 					<div>
 						<div class="text-sm text-ink-gray-5 mb-1">
 							{{ __('Message') }}
 						</div>
 						<TextEditor
-							:content="emailMessage"
-							@change="(val) => (emailMessage = val)"
+							:content="emailForm.message"
+							@change="(val) => (emailForm.message = val)"
 							:editable="true"
 							:fixedMenu="true"
 							editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
@@ -142,12 +157,19 @@ import {
 	Dialog,
 	FormControl,
 	TextEditor,
+	ListView,
+	ListHeader,
+	ListHeaderItem,
+	ListRows,
+	ListRow,
+	ListRowItem,
 	createResource,
+	createListResource,
 	usePageMeta,
 	toast,
 } from 'frappe-ui'
 import { User, Download, Mail } from 'lucide-vue-next'
-import { inject, ref } from 'vue'
+import { inject, ref, computed, reactive } from 'vue'
 import { sessionStore } from '../stores/session'
 import EmptyState from '@/components/EmptyState.vue'

@@ -155,8 +177,11 @@ const dayjs = inject('$dayjs')
 const { brand } = sessionStore()
 const showEmailModal = ref(false)
 const selectedApplicant = ref(null)
-const emailSubject = ref('')
-const emailMessage = ref('')
+const emailForm = reactive({
+	subject: '',
+	message: '',
+	replyTo: '',
+})

 const props = defineProps({
 	job: {
@@ -165,49 +190,59 @@ const props = defineProps({
 	},
 })

-const job = createResource({
-	url: 'lms.lms.api.get_job_details',
-	params: { job: props.job },
-	cache: ['job', props.job],
-	auto: true,
-	onSuccess: () => {
-		applications.submit()
+const applications = createListResource({
+	doctype: 'LMS Job Application',
+	fields: [
+		'name',
+		'user.user_image as user_image',
+		'user.full_name as full_name',
+		'user.email as email',
+		'creation',
+		'resume',
+		'job.job_title as job_title',
+	],
+	filters: {
+		job: props.job,
 	},
-})
-
-const applications = createResource({
-	url: 'lms.lms.api.get_job_applications',
-	params: { job: props.job },
 	auto: true,
 })

 const emailResource = createResource({
-	url: 'lms.lms.api.send_email_to_applicant',
+	url: 'frappe.core.doctype.communication.email.make',
+	makeParams(values) {
+		return {
+			recipients: selectedApplicant.value.email,
+			cc: emailForm.replyTo,
+			subject: emailForm.subject,
+			content: emailForm.message,
+			doctype: 'LMS Job Application',
+			name: selectedApplicant.value.name,
+			send_email: 1,
+			now: true,
+		}
+	},
 })

 const openEmailModal = (applicant) => {
 	selectedApplicant.value = applicant
-	emailSubject.value = `Job Application for ${job.data?.job_title} - ${
-		applicant.full_name || applicant.user
-	}`
-	emailMessage.value = ''
+	emailForm.subject = `Job Application for ${applications.data?.[0]?.job_title} - ${applicant.full_name}`
+	emailForm.replyTo = ''
+	emailForm.message = ''
 	showEmailModal.value = true
 }

 const sendEmail = (close) => {
-	if (!emailSubject.value || !emailMessage.value) {
-		toast.error(__('Please fill in all fields'))
-		return
-	}
-
 	emailResource.submit(
+		{},
 		{
-			applicant_email: selectedApplicant.value.email,
-			subject: emailSubject.value,
-			message: emailMessage.value,
-			job: props.job,
-		},
-		{
+			validate() {
+				if (!emailForm.subject) {
+					return __('Subject is required')
+				}
+				if (!emailForm.message) {
+					return __('Message is required')
+				}
+			},
 			onSuccess: () => {
 				toast.success(__('Email sent successfully'))
 				close()
@@ -223,11 +258,43 @@ const downloadResume = (resumeUrl) => {
 	window.open(resumeUrl, '_blank')
 }

+const applicationColumns = computed(() => {
+	return [
+		{
+			label: __('Name'),
+			key: 'display_name',
+			width: '15rem',
+		},
+		{
+			label: __('Email'),
+			key: 'email',
+			width: '15rem',
+		},
+		{
+			label: __('Applied On'),
+			key: 'applied_date',
+			width: '10rem',
+		},
+		{
+			label: __('Actions'),
+			key: 'actions',
+			width: '10rem',
+		},
+	]
+})
+
+const applicantRows = computed(() => {
+	if (!applications.data) return []
+	return applications.data.map((application) => ({
+		...application,
+		display_name: application.full_name,
+		applied_date: dayjs(application.creation).format('MMM DD, YYYY'),
+	}))
+})
+
 usePageMeta(() => {
 	return {
-		title: job.data
-			? `Applications - ${job.data.job_title}`
-			: 'Job Applications',
+		title: `Applications - ${applications.data?.[0]?.job_title}`,
 		icon: brand.favicon,
 	}
 })
--- a/frontend/src/pages/JobDetail.vue
+++ b/frontend/src/pages/JobDetail.vue
@@ -21,20 +21,14 @@
 				class="flex items-center space-x-2"
 			>
 				<router-link
-					v-if="canManageJob"
+					v-if="canManageJob && applicationCount.data > 0"
 					:to="{
 						name: 'JobApplications',
 						params: { job: job.data?.name },
 					}"
 				>
-					<Button variant="outline">
-						<template #prefix>
-							<Users class="h-4 w-4 stroke-1.5" />
-						</template>
-						{{ __('Applications') }}
-						<Badge v-if="applicationCount.data" class="ml-2">
-							{{ applicationCount.data }}
-						</Badge>
+					<Button variant="subtle">
+						{{ __('View Applications') }}
 					</Button>
 				</router-link>
 				<router-link
@@ -247,8 +241,7 @@ const redirectToWebsite = (url) => {
 const canManageJob = computed(() => {
 	if (!user.data?.name || !job.data) return false
 	return (
-		user.data.name === job.data.owner ||
-		user.data.roles?.includes('System Manager')
+		user.data.name === job.data.owner || user.data.roles?.includes('Moderator')
 	)
 })