feat: Add work mode filter and selection to job opportunities

frontend/src/pages/Jobs.vue

@@ -65,6 +65,15 @@
 						:placeholder="__('Type')"
 						@change="updateJobs"
 					/>
+					<!-- add jobModes -->
+					<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 +112,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 +126,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 +158,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 +199,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'),

lms/lms/api.py

@@ -253,6 +253,7 @@ def get_job_details(job):
 			"location",
 			"country",
 			"type",
+			"work_mode",
 			"company_name",
 			"company_logo",
 			"company_website",
@@ -279,6 +280,7 @@ def get_job_opportunities(filters=None, orFilters=None):
 			"location",
 			"country",
 			"type",
+			"work_mode",
 			"company_name",
 			"company_logo",
 			"name",