Merge pull request #1739 from KerollesFathy/work-mode-on-job-portal

feat(jobs): Add Work Mode on Job Portal

frontend/src/components/JobCard.vue

@@ -33,6 +33,9 @@
 			<Badge>
 				{{ job.type }}
 			</Badge>
+			<Badge v-if="job.work_mode">
+				{{ job.work_mode }}
+			</Badge>
 			<Badge>
 				{{ dayjs(job.creation).fromNow() }}
 			</Badge>

frontend/src/pages/JobDetail.vue

@@ -99,6 +99,12 @@
 							</template>
 							{{ job.data.type }}
 						</Badge>
+						<Badge v-if="job.data?.work_mode" size="lg">
+							<template #prefix>
+								<BriefcaseBusiness class="size-3 stroke-2 text-ink-gray-7" />
+							</template>
+							{{ job.data.work_mode }}
+						</Badge>
 						<Badge v-if="applicationCount.data" size="lg">
 							<template #prefix>
 								<SquareUserRound class="size-3 stroke-2 text-ink-gray-7" />
@@ -152,6 +158,7 @@ import {
 	SquareArrowOutUpRight,
 	FileText,
 	ClipboardType,
+	BriefcaseBusiness,
 } from 'lucide-vue-next'
 
 const user = inject('$user')

frontend/src/pages/JobForm.vue

@@ -27,6 +27,13 @@
 							:options="jobTypes"
 							:required="true"
 						/>
+						<FormControl
+							v-model="job.work_mode"
+							:label="__('Work Mode')"
+							type="select"
+							:options="workModes"
+							:required="true"
+						/>
 					</div>
 					<div class="space-y-4">
 						<FormControl
@@ -225,6 +232,7 @@ const job = reactive({
 	location: '',
 	country: '',
 	type: 'Full Time',
+	work_mode: 'On-site',
 	status: 'Open',
 	company_name: '',
 	company_website: '',
@@ -302,6 +310,14 @@ const jobTypes = computed(() => {
 	]
 })
 
+const workModes = computed(() => {
+	return [
+		{ label: 'On site', value: 'On-site' },
+		{ label: 'Hybrid', value: 'Hybrid' },
+		{ label: 'Remote', value: 'Remote' },
+	]
+})
+
 const jobStatuses = computed(() => {
 	return [
 		{ label: 'Open', value: 'Open' },

frontend/src/pages/Jobs.vue

@@ -33,7 +33,7 @@
 				</div>
 
 				<div
-					class="grid grid-cols-1 gap-2"
+					class="grid grid-cols-1 gap-2 md:grid-cols-4"
 					:class="user.data ? 'md:grid-cols-3' : 'md:grid-cols-2'"
 				>
 					<FormControl
@@ -65,6 +65,14 @@
 						:placeholder="__('Type')"
 						@change="updateJobs"
 					/>
+					<FormControl
+						v-model="workMode"
+						type="select"
+						:options="workModes"
+						class="min-w-40 lg:min-w-0 lg:w-32 xl:w-40"
+						:placeholder="__('Work Mode')"
+						@change="updateJobs"
+					/>
 				</div>
 			</div>
 			<div v-if="jobs.data?.length" class="w-full md:w-4/5 mx-auto p-5 pt-0">
@@ -103,6 +111,7 @@ import EmptyState from '@/components/EmptyState.vue'
 
 const user = inject('$user')
 const jobType = ref(null)
+const workMode = ref(null)
 const { brand } = sessionStore()
 const searchQuery = ref('')
 const country = ref(null)
@@ -116,6 +125,9 @@ onMounted(() => {
 	if (queries.has('type')) {
 		jobType.value = queries.get('type')
 	}
+	if (queries.has('work_mode')) {
+		workMode.value = queries.get('work_mode')
+	}
 	updateJobs()
 })
 
@@ -145,6 +157,12 @@ const updateFilters = () => {
 		delete filters.value.type
 	}
 
+	if (workMode.value) {
+		filters.value.work_mode = workMode.value
+	} else {
+		delete filters.value.work_mode
+	}
+
 	if (searchQuery.value) {
 		orFilters.value = {
 			job_title: ['like', `%${searchQuery.value}%`],
@@ -180,6 +198,15 @@ const jobTypes = computed(() => {
 	]
 })
 
+const workModes = computed(() => {
+	return [
+		'',
+		{ label: 'On site', value: 'On-site' },
+		{ label: 'Hybrid', value: 'Hybrid' },
+		{ label: 'Remote', value: 'Remote' },
+	]
+})
+
 usePageMeta(() => {
 	return {
 		title: __('Jobs'),