From 57b6433dc01078e1d57f89c6cb60e7a42b5becbc Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Tue, 8 Apr 2025 22:39:42 +0530
Subject: [PATCH] fix: new ui for job list

---
 frontend/src/components/JobCard.vue | 56 ++++++++++++++---------------
 frontend/src/pages/JobDetail.vue    | 30 +++++++++++-----
 frontend/src/pages/Jobs.vue         |  4 +--
 lms/lms/api.py                      |  1 +
 4 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/JobCard.vue b/frontend/src/components/JobCard.vue
index ca75182b..51b84b95 100644
--- a/frontend/src/components/JobCard.vue
+++ b/frontend/src/components/JobCard.vue
@@ -1,41 +1,37 @@
 <template>
-	<div class="flex space-x-4 border rounded-md p-2">
-		<img :src="job.company_logo" class="size-10 rounded-full object-contain" />
-		<div class="flex flex-col space-y-2 flex-1">
-			<div class="flex items-center justify-between">
-				<span class="font-semibold text-ink-gray-9">
-					{{ job.job_title }}
-				</span>
-			</div>
-			<div class="flex items-center space-x-2 text-ink-gray-5">
-				<Building2 class="w-4 h-4 stroke-1.5" />
-				<span>
+	<div class="border rounded-md p-4">
+		<div class="flex space-x-4">
+			<img
+				:src="job.company_logo"
+				class="size-10 rounded-full object-contain"
+			/>
+			<div class="flex flex-col space-y-1 flex-1">
+				<div class="flex items-center justify-between">
+					<span class="text-lg font-semibold text-ink-gray-9">
+						{{ job.job_title }}
+					</span>
+				</div>
+				<div class="text-xs text-ink-gray-5">
 					{{ job.company_name }}
-				</span>
-			</div>
-			<div class="flex items-center space-x-2 text-ink-gray-5">
-				<MapPin class="w-4 h-4 stroke-1.5" />
-				<span>
-					{{ job.location }}
-				</span>
-			</div>
-			<div class="flex items-center space-x-2 text-ink-gray-5">
-				<Shapes class="w-4 h-4 stroke-1.5" />
-				<span>
-					{{ job.type }}
-				</span>
-			</div>
-			<div class="flex items-center space-x-2 text-ink-gray-5">
-				<Calendar class="w-4 h-4 stroke-1.5" />
-				<span> {{ __('posted') }} {{ dayjs(job.creation).fromNow() }} </span>
+				</div>
 			</div>
 		</div>
+		<div class="space-x-4 mt-2">
+			<Badge>
+				{{ job.location }}
+			</Badge>
+			<Badge>
+				{{ job.type }}
+			</Badge>
+			<Badge>
+				{{ dayjs(job.creation).fromNow() }}
+			</Badge>
+		</div>
 	</div>
 </template>
 <script setup>
-import { Building2, Calendar, MapPin, Shapes } from 'lucide-vue-next'
 import { inject } from 'vue'
-import { Avatar } from 'frappe-ui'
+import { Badge } from 'frappe-ui'
 
 const dayjs = inject('$dayjs')
 const props = defineProps({
diff --git a/frontend/src/pages/JobDetail.vue b/frontend/src/pages/JobDetail.vue
index da449d1c..6c8fb519 100644
--- a/frontend/src/pages/JobDetail.vue
+++ b/frontend/src/pages/JobDetail.vue
@@ -16,7 +16,7 @@
 					},
 				]"
 			/>
-			<div v-if="user.data?.name" class="flex">
+			<div v-if="user.data?.name" class="flex space-x-2">
 				<router-link
 					v-if="user.data.name == job.data?.owner"
 					:to="{
@@ -24,13 +24,19 @@
 						params: { jobName: job.data?.name },
 					}"
 				>
-					<Button class="mr-2">
+					<Button>
 						<template #prefix>
 							<Pencil class="h-4 w-4 stroke-1.5" />
 						</template>
 						{{ __('Edit') }}
 					</Button>
 				</router-link>
+				<Button @click="redirectToWebsite(job.data?.company_website)">
+					<template #prefix>
+						<SquareArrowOutUpRight class="h-4 w-4 stroke-1.5" />
+					</template>
+					{{ __('Visit Website') }}
+				</Button>
 				<Button
 					v-if="!jobApplication.data?.length"
 					variant="solid"
@@ -56,10 +62,11 @@
 					<div class="flex items-center">
 						<img
 							:src="job.data.company_logo"
-							class="w-16 h-16 rounded-lg object-contain mr-4"
+							class="w-16 h-16 rounded-lg object-contain cursor-pointer mr-4"
 							:alt="job.data.company_name"
+							@click="redirectToWebsite(job.data.company_website)"
 						/>
-						<div class="text-2xl text-ink-gray-9 font-semibold mb-4">
+						<div class="text-2xl text-ink-gray-9 font-semibold">
 							{{ job.data.job_title }}
 						</div>
 					</div>
@@ -69,7 +76,7 @@
 						>
 							<div class="flex items-center space-x-4">
 								<Building2 class="h-4 w-4 text-ink-green-2" />
-								<div class="flex flex-col space-y-2 text-ink-gray-7">
+								<div class="flex flex-col space-y-1 text-ink-gray-7">
 									<span class="text-xs text-ink-gray-5 font-medium uppercase">
 										{{ __('Organisation') }}
 									</span>
@@ -80,7 +87,7 @@
 							</div>
 							<div class="flex items-center space-x-4">
 								<MapPin class="size-4 text-ink-red-3" />
-								<div class="flex flex-col space-y-2 text-ink-gray-7">
+								<div class="flex flex-col space-y-1 text-ink-gray-7">
 									<span class="text-xs font-medium uppercase">
 										{{ __('Location') }}
 									</span>
@@ -91,7 +98,7 @@
 							</div>
 							<div class="flex items-center space-x-4">
 								<ClipboardType class="h-4 w-4 text-yellow-500" />
-								<div class="flex flex-col space-y-2 text-ink-gray-7">
+								<div class="flex flex-col space-y-1 text-ink-gray-7">
 									<span class="text-xs font-medium uppercase">
 										{{ __('Category') }}
 									</span>
@@ -102,7 +109,7 @@
 							</div>
 							<div class="flex items-center space-x-4">
 								<CalendarDays class="h-4 w-4 text-ink-blue-2" />
-								<div class="flex flex-col space-y-2 text-ink-gray-7">
+								<div class="flex flex-col space-y-1 text-ink-gray-7">
 									<span class="text-xs font-medium uppercase">
 										{{ __('Posted on') }}
 									</span>
@@ -116,7 +123,7 @@
 								class="flex items-center space-x-4"
 							>
 								<SquareUserRound class="h-4 w-4 text-purple-500" />
-								<div class="flex flex-col space-y-2 text-ink-gray-7">
+								<div class="flex flex-col space-y-1 text-ink-gray-7">
 									<span class="text-xs font-medium uppercase">
 										{{ __('Applications Received') }}
 									</span>
@@ -154,6 +161,7 @@ import {
 	CalendarDays,
 	ClipboardType,
 	SquareUserRound,
+	SquareArrowOutUpRight,
 } from 'lucide-vue-next'
 
 const user = inject('$user')
@@ -216,6 +224,10 @@ const redirectToLogin = (job) => {
 	window.location.href = `/login?redirect-to=/job-openings/${job}`
 }
 
+const redirectToWebsite = (url) => {
+	window.open(url, '_blank')
+}
+
 usePageMeta(() => {
 	return {
 		title: job.data?.job_title,
diff --git a/frontend/src/pages/Jobs.vue b/frontend/src/pages/Jobs.vue
index c73c4173..5a7a317a 100644
--- a/frontend/src/pages/Jobs.vue
+++ b/frontend/src/pages/Jobs.vue
@@ -25,7 +25,7 @@
 			</router-link>
 		</header>
 		<div>
-			<div class="lg:w-3/4 mx-auto p-5">
+			<div class="p-5">
 				<div
 					class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
 				>
@@ -60,7 +60,7 @@
 
 				<div
 					v-if="jobs.data?.length"
-					class="grid grid-cols-1 lg:grid-cols-2 gap-5"
+					class="grid grid-cols-1 lg:grid-cols-3 gap-5"
 				>
 					<router-link
 						v-for="job in jobs.data"
diff --git a/lms/lms/api.py b/lms/lms/api.py
index 4358e80d..edf89620 100644
--- a/lms/lms/api.py
+++ b/lms/lms/api.py
@@ -281,6 +281,7 @@ def get_job_details(job):
 			"type",
 			"company_name",
 			"company_logo",
+			"company_website",
 			"name",
 			"creation",
 			"description",