fix: refactored job form and permissions

frontend/src/components/Controls/Autocomplete.vue

@@ -107,7 +107,7 @@
 												<div class="flex flex-col gap-1 p-1">
 													<div class="text-base font-medium text-ink-gray-8">
 														{{
-															option.value == option.label
+															option.value == option.label && option.description
 																? option.description
 																: option.label
 														}}
@@ -124,7 +124,7 @@
 									v-if="groups.length == 0"
 									class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-ink-gray-5"
 								>
-									No results found
+									{{ __('No results found') }}
 								</li>
 							</ComboboxOptions>
 							<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">

frontend/src/components/Controls/Uploader.vue

@@ -38,7 +38,7 @@
 						'border object-cover',
 						shape === 'circle'
 							? 'w-20 h-20 rounded-full'
-							: 'w-44 h-auto min-h-20 rounded-md',
+							: 'w-44 h-auto min-h-20 max-h-32 rounded-md',
 					]"
 				/>
 				<video v-else controls class="border rounded-md w-44 h-auto">

frontend/src/components/Settings/SettingDetails.vue

@@ -6,16 +6,18 @@
 					<div class="text-xl font-semibold leading-none text-ink-gray-9">
 						{{ __(label) }}
 					</div>
+				</div>
+				<div class="space-x-2">
 					<Badge
 						v-if="data.isDirty"
 						:label="__('Not Saved')"
 						variant="subtle"
 						theme="orange"
 					/>
+					<Button variant="solid" :loading="data.save.loading" @click="update">
+						{{ __('Update') }}
+					</Button>
 				</div>
-				<Button variant="solid" :loading="data.save.loading" @click="update">
-					{{ __('Update') }}
-				</Button>
 			</div>
 			<div class="text-ink-gray-6 leading-5">
 				{{ __(description) }}

frontend/src/components/Settings/Settings.vue

@@ -219,6 +219,25 @@ const tabsStructure = computed(() => {
 								},
 							],
 						},
+						{
+							label: 'Jobs',
+							columns: [
+								{
+									fields: [
+										{
+											label: 'Allow Job Posting',
+											name: 'allow_job_posting',
+											type: 'checkbox',
+											description:
+												'If enabled, users can post job openings on the job board. Else only admins can post jobs.',
+										},
+									],
+								},
+								{
+									fields: [],
+								},
+							],
+						},
 						{
 							label: '',
 							columns: [

frontend/src/pages/JobForm.vue

@@ -4,9 +4,14 @@
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs :items="breadcrumbs" />
-			<Button variant="solid" @click="saveJob()">
-				{{ __('Save') }}
-			</Button>
+			<div class="space-x-2">
+				<Badge v-if="isDirty" theme="orange">
+					{{ __('Not Saved') }}
+				</Badge>
+				<Button variant="solid" @click="saveJob()">
+					{{ __('Save') }}
+				</Button>
+			</div>
 		</header>
 		<div class="py-5">
 			<div class="container border-b mb-4 pb-5">
@@ -109,15 +114,25 @@
 </template>
 <script setup>
 import {
+	Badge,
 	Breadcrumbs,
+	call,
 	FormControl,
-	createResource,
+	createDocumentResource,
 	Button,
 	TextEditor,
 	usePageMeta,
 	toast,
 } from 'frappe-ui'
-import { computed, onMounted, reactive, inject } from 'vue'
+import {
+	computed,
+	inject,
+	onMounted,
+	onBeforeUnmount,
+	reactive,
+	ref,
+	watch,
+} from 'vue'
 import { sessionStore } from '@/stores/session'
 import { useRouter } from 'vue-router'
 import { escapeHTML, sanitizeHTML } from '@/utils'
@@ -126,6 +141,8 @@ import Uploader from '@/components/Controls/Uploader.vue'
 const user = inject('$user')
 const router = useRouter()
 const { brand } = sessionStore()
+const isDirty = ref(false)
+const originalJobData = ref(null)
 
 const props = defineProps({
 	jobName: {
@@ -134,67 +151,6 @@ const props = defineProps({
 	},
 })
 
-const newJob = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'Job Opportunity',
-				company_logo: job.company_logo,
-				...job,
-			},
-		}
-	},
-})
-
-const updateJob = createResource({
-	url: 'frappe.client.set_value',
-	makeParams(values) {
-		return {
-			doctype: 'Job Opportunity',
-			name: props.jobName,
-			fieldname: {
-				company_logo: job.company_logo,
-				...job,
-			},
-		}
-	},
-})
-
-const jobDetail = createResource({
-	url: 'frappe.client.get',
-	makeParams(values) {
-		return {
-			doctype: 'Job Opportunity',
-			name: props.jobName,
-		}
-	},
-	onSuccess(data) {
-		if (data.owner != user.data?.name && !user.data?.is_moderator) {
-			router.push({
-				name: 'Jobs',
-			})
-		}
-		Object.keys(data).forEach((key) => {
-			if (Object.hasOwn(job, key)) job[key] = data[key]
-		})
-	},
-})
-
-const job = reactive({
-	job_title: '',
-	location: '',
-	country: '',
-	type: 'Full Time',
-	work_mode: 'On-site',
-	status: 'Open',
-	company_name: '',
-	company_website: '',
-	company_logo: null,
-	description: '',
-	company_email_address: '',
-})
-
 onMounted(() => {
 	if (!user.data) {
 		router.push({
@@ -202,22 +158,63 @@ onMounted(() => {
 		})
 	}
 
-	if (props.jobName != 'new') jobDetail.reload()
-	addKeyboardShortcuts()
+	if (props.jobName != 'new') jobDetails.reload()
+	window.addEventListener('keydown', keyboardShortcut)
 })
 
-const addKeyboardShortcuts = () => {
-	document.addEventListener('keydown', (e) => {
-		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
-			e.preventDefault()
-			saveJob()
+const job = reactive({
+	job_title: '',
+	type: '',
+	work_mode: '',
+	location: '',
+	country: '',
+	status: 'Open',
+	description: '',
+	company_name: '',
+	company_website: '',
+	company_email_address: '',
+	company_logo: '',
+})
+
+const jobDetails = createDocumentResource({
+	doctype: 'Job Opportunity',
+	name: props.jobName != 'new' ? props.jobName : undefined,
+	onError(err) {
+		toast.error(err.messages?.[0] || err)
+		console.error(err)
+	},
+	auto: props.jobName != 'new',
+})
+
+watch(
+	() => jobDetails?.doc,
+	() => {
+		if (jobDetails.doc.owner != user.data?.name && !user.data?.is_moderator) {
+			router.push({
+				name: 'Jobs',
+			})
 		}
-	})
-}
+
+		if (jobDetails.doc) {
+			Object.assign(job, jobDetails.doc)
+			originalJobData.value = JSON.parse(JSON.stringify(jobDetails.doc))
+		}
+	}
+)
+
+watch(
+	job,
+	() => {
+		isDirty.value = Object.keys(job).some((key) => {
+			return job[key] != originalJobData.value?.[key]
+		})
+	},
+	{ deep: true }
+)
 
 const saveJob = () => {
 	validateJobFields()
-	if (jobDetail.data) {
+	if (jobDetails?.doc) {
 		editJobDetails()
 	} else {
 		createNewJob()
@@ -225,38 +222,46 @@ const saveJob = () => {
 }
 
 const createNewJob = () => {
-	newJob.submit(
-		{},
-		{
-			onSuccess(data) {
-				router.push({
-					name: 'JobDetail',
-					params: {
-						job: data.name,
-					},
-				})
-			},
-			onError(err) {
-				toast.error(err.messages?.[0] || err)
-			},
-		}
-	)
+	call('frappe.client.insert', {
+		doc: {
+			doctype: 'Job Opportunity',
+			company_logo: job.company_logo,
+			...job,
+		},
+	})
+		.then((data) => {
+			router.push({
+				name: 'JobDetail',
+				params: {
+					job: data.name,
+				},
+			})
+		})
+		.catch((err) => {
+			toast.error(err.messages?.[0] || err)
+			console.error(err)
+		})
 }
 
 const editJobDetails = () => {
-	updateJob.submit(
-		{},
+	jobDetails.setValue.submit(
+		{
+			company_logo: job.company_logo,
+			...job,
+		},
 		{
 			onSuccess(data) {
+				jobDetails.reload()
 				router.push({
 					name: 'JobDetail',
 					params: {
-						job: data.name,
+						job: props.jobName,
 					},
 				})
 			},
 			onError(err) {
 				toast.error(err.messages?.[0] || err)
+				console.error(err)
 			},
 		}
 	)
@@ -271,27 +276,38 @@ const validateJobFields = () => {
 	})
 }
 
+const keyboardShortcut = (e) => {
+	if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
+		e.preventDefault()
+		saveJob()
+	}
+}
+
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', keyboardShortcut)
+})
+
 const jobTypes = computed(() => {
 	return [
-		{ label: 'Full Time', value: 'Full Time' },
-		{ label: 'Part Time', value: 'Part Time' },
-		{ label: 'Contract', value: 'Contract' },
-		{ label: 'Freelance', value: 'Freelance' },
+		{ label: __('Full Time'), value: 'Full Time' },
+		{ label: __('Part Time'), value: 'Part Time' },
+		{ label: __('Contract'), value: 'Contract' },
+		{ label: __('Freelance'), value: 'Freelance' },
 	]
 })
 
 const workModes = computed(() => {
 	return [
-		{ label: 'On site', value: 'On-site' },
-		{ label: 'Hybrid', value: 'Hybrid' },
-		{ label: 'Remote', value: 'Remote' },
+		{ label: __('On site'), value: 'On-site' },
+		{ label: __('Hybrid'), value: 'Hybrid' },
+		{ label: __('Remote'), value: 'Remote' },
 	]
 })
 
 const jobStatuses = computed(() => {
 	return [
-		{ label: 'Open', value: 'Open' },
-		{ label: 'Closed', value: 'Closed' },
+		{ label: __('Open'), value: 'Open' },
+		{ label: __('Closed'), value: 'Closed' },
 	]
 })
 
@@ -302,8 +318,11 @@ const breadcrumbs = computed(() => {
 			route: { name: 'Jobs' },
 		},
 		{
-			label: props.jobName == 'new' ? __('New Job') : __('Edit Job'),
-			route: { name: 'JobForm' },
+			label: props.jobName == 'new' ? __('New Job') : jobDetails.doc?.job_title,
+			route:
+				props.jobName == 'new'
+					? {}
+					: { name: 'JobDetail', params: { job: props.jobName } },
 		},
 	]
 	return crumbs
@@ -311,7 +330,7 @@ const breadcrumbs = computed(() => {
 
 usePageMeta(() => {
 	return {
-		title: props.jobName == 'new' ? __('New Job') : jobDetail.data?.job_title,
+		title: props.jobName == 'new' ? __('New Job') : jobDetails.doc?.job_title,
 		icon: brand.favicon,
 	}
 })

frontend/src/pages/Jobs.vue

@@ -8,7 +8,9 @@
 				:items="[{ label: __('Jobs'), route: { name: 'Jobs' } }]"
 			/>
 			<router-link
-				v-if="user.data?.name"
+				v-if="
+					user.data?.name && settings.data?.allow_job_posting && !readOnlyMode
+				"
 				:to="{
 					name: 'JobForm',
 					params: {
@@ -16,7 +18,7 @@
 					},
 				}"
 			>
-				<Button v-if="!readOnlyMode" variant="solid">
+				<Button variant="solid">
 					<template #prefix>
 						<Plus class="h-4 w-4" />
 					</template>
@@ -123,7 +125,8 @@ import {
 	usePageMeta,
 } from 'frappe-ui'
 import { Plus, Search } from 'lucide-vue-next'
-import { sessionStore } from '../stores/session'
+import { sessionStore } from '@/stores/session'
+import { useSettings } from '@/stores/settings'
 import { inject, computed, ref, onMounted, watch } from 'vue'
 import JobCard from '@/components/JobCard.vue'
 import Link from '@/components/Controls/Link.vue'
@@ -133,6 +136,7 @@ const user = inject('$user')
 const jobType = ref(null)
 const workMode = ref(null)
 const { brand } = sessionStore()
+const { settings } = useSettings()
 const searchQuery = ref('')
 const country = ref(null)
 const filters = ref({})