From 8f317d2f4448113f441579cba67547c0f4da75f8 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 25 Jan 2024 15:24:52 +0530
Subject: [PATCH] fix: ui issues

---
 frontend/src/components/CourseOutline.vue |   6 +-
 frontend/src/components/JobCard.vue       |  45 ++++++
 frontend/src/pages/Batch.vue              |   2 +-
 frontend/src/pages/Batches.vue            | 179 ++++++++++++----------
 frontend/src/pages/Courses.vue            |  14 +-
 frontend/src/pages/JobDetail.vue          |  27 ++++
 frontend/src/pages/Jobs.vue               |  48 ++++++
 frontend/src/router.js                    |  11 ++
 lms/lms/utils.py                          |  11 ++
 9 files changed, 254 insertions(+), 89 deletions(-)
 create mode 100644 frontend/src/components/JobCard.vue
 create mode 100644 frontend/src/pages/JobDetail.vue
 create mode 100644 frontend/src/pages/Jobs.vue

diff --git a/frontend/src/components/CourseOutline.vue b/frontend/src/components/CourseOutline.vue
index caf5e23a..d620e056 100644
--- a/frontend/src/components/CourseOutline.vue
+++ b/frontend/src/components/CourseOutline.vue
@@ -16,13 +16,13 @@
 						}"
 						class="h-5 w-5 text-gray-900 stroke-1 mr-2"
 					/>
-					<div class="text-base">
+					<div class="text-base font-medium">
 						{{ chapter.title }}
 					</div>
 				</DisclosureButton>
 				<DisclosurePanel class="pb-2">
 					<div v-for="lesson in chapter.lessons" :key="lesson.name">
-						<div class="outline-lesson mb-2 pl-9">
+						<div class="outline-lesson my-2 pl-9">
 							<router-link
 								:to="{
 									name: 'Lesson',
@@ -91,6 +91,6 @@ const openChapter = (index) => {
 <style>
 .outline-lesson:has(.router-link-active) {
 	background-color: theme('colors.gray.100');
-	padding: 0.5rem 0 0.5rem 2rem;
+	padding: 0.5rem 0 0.5rem 2.25rem;
 }
 </style>
diff --git a/frontend/src/components/JobCard.vue b/frontend/src/components/JobCard.vue
new file mode 100644
index 00000000..d16babdd
--- /dev/null
+++ b/frontend/src/components/JobCard.vue
@@ -0,0 +1,45 @@
+<template>
+	<div class="flex border rounded-md p-2 mb-4 h-full">
+		<div class="mr-4">
+			<img
+				:src="job.company_logo"
+				class="w-11 h-11 rounded-lg object-contain"
+			/>
+		</div>
+		<div>
+			<div class="text-lg font-semibold mb-2">
+				{{ job.job_title }}
+			</div>
+			<div class="flex items-center mb-2 text-gray-700">
+				<div class="mr-5">
+					{{ job.company_name }}
+				</div>
+				<div class="flex items-center">
+					<MapPin class="h-4 w-4 mr-1 stroke-1.5" />
+					<span class="text-gray-700">
+						{{ job.location }}
+					</span>
+				</div>
+			</div>
+			<div class="flex items-center">
+				<Badge :label="job.type" theme="green" />
+				<div class="ml-5">
+					{{ dayjs(job.creation).format('DD MMM YYYY') }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { MapPin } from 'lucide-vue-next'
+import { Badge } from 'frappe-ui'
+import { inject } from 'vue'
+
+const dayjs = inject('$dayjs')
+const props = defineProps({
+	job: {
+		type: Object,
+		default: null,
+	},
+})
+</script>
diff --git a/frontend/src/pages/Batch.vue b/frontend/src/pages/Batch.vue
index 4fe7e485..31b00237 100644
--- a/frontend/src/pages/Batch.vue
+++ b/frontend/src/pages/Batch.vue
@@ -4,7 +4,7 @@
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
-			<Button @click="openAnnouncementModal()">
+			<Button v-if="user.data?.is_moderator" @click="openAnnouncementModal()">
 				<span>
 					{{ __('Make an Announcement') }}
 				</span>
diff --git a/frontend/src/pages/Batches.vue b/frontend/src/pages/Batches.vue
index 140945f8..626797c4 100644
--- a/frontend/src/pages/Batches.vue
+++ b/frontend/src/pages/Batches.vue
@@ -1,93 +1,112 @@
 <template>
-    <div class="h-screen text-base">
-        <header
-            class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
-        >
-            <Breadcrumbs class="h-7" :items="[{ label: __('All Batches'), route: { name: 'Batches' } }]"/>
-            <div class="flex">
-                <Button variant="solid">
-                    <template #prefix>
-                        <Plus class="h-4 w-4" />
-                    </template>
-                    {{ __("New Batch") }}
-                </Button>
-            </div>
-        </header>
-        <div class="mx-5 py-5">
-          <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
-            <template #tab="{ tab, selected }">
-              <div>
-                <button
-                    class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-                    :class="{ 'text-gray-900': selected }">
-                    <component v-if="tab.icon" :is="tab.icon" class="h-5" />
-                    {{ __(tab.label) }}
-                    <Badge :class="{ 'text-gray-900 border border-gray-900': selected }" variant="subtle" theme="gray"
-                        size="sm">
-                        {{ tab.count }}
-                    </Badge>
-                </button>
-              </div>
-            </template>
-            <template #default="{ tab }">
-              <div v-if="tab.batches && tab.batches.value.length" class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 gap-8 mt-5">
-                <router-link v-for="batch in tab.batches.value"
-                    :to="{ name: 'BatchDetail', params: { batchName: batch.name } }">
-                    <BatchCard :batch="batch" />
-                </router-link>
-              </div>
-              <div v-else class="grid flex-1 place-items-center text-xl font-medium text-gray-500">
-                <div class="flex flex-col items-center justify-center mt-4">
-                    <div>
-                        {{ __("No {0} batches found").format(tab.label.toLowerCase()) }}
-                    </div>
-                </div>
-              </div>
-            </template>
-          </Tabs>
-        </div>
-    </div>
+	<div class="h-screen text-base">
+		<header
+			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+		>
+			<Breadcrumbs
+				class="h-7"
+				:items="[{ label: __('All Batches'), route: { name: 'Batches' } }]"
+			/>
+			<div class="flex">
+				<Button variant="solid">
+					<template #prefix>
+						<Plus class="h-4 w-4" />
+					</template>
+					{{ __('New Batch') }}
+				</Button>
+			</div>
+		</header>
+		<div class="pb-5">
+			<Tabs v-model="tabIndex" :tabs="tabs" tablistClass="overflow-x-visible">
+				<template #tab="{ tab, selected }">
+					<div>
+						<button
+							class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
+							:class="{ 'text-gray-900': selected }"
+						>
+							<component v-if="tab.icon" :is="tab.icon" class="h-5" />
+							{{ __(tab.label) }}
+							<Badge
+								:class="
+									selected
+										? 'text-gray-800 border border-gray-800'
+										: 'border border-gray-500'
+								"
+								variant="subtle"
+								theme="gray"
+								size="sm"
+							>
+								{{ tab.count }}
+							</Badge>
+						</button>
+					</div>
+				</template>
+				<template #default="{ tab }">
+					<div
+						v-if="tab.batches && tab.batches.value.length"
+						class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 gap-5 mt-5 mx-5"
+					>
+						<router-link
+							v-for="batch in tab.batches.value"
+							:to="{ name: 'BatchDetail', params: { batchName: batch.name } }"
+						>
+							<BatchCard :batch="batch" />
+						</router-link>
+					</div>
+					<div
+						v-else
+						class="grid flex-1 place-items-center text-xl font-medium text-gray-500"
+					>
+						<div class="flex flex-col items-center justify-center mt-4">
+							<div>
+								{{ __('No {0} batches found').format(tab.label.toLowerCase()) }}
+							</div>
+						</div>
+					</div>
+				</template>
+			</Tabs>
+		</div>
+	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs, Button, Tabs, Badge } from "frappe-ui";
-import { Plus } from "lucide-vue-next"
-import BatchCard from '@/components/BatchCard.vue';
-import { inject, ref, computed } from "vue";
+import { createResource, Breadcrumbs, Button, Tabs, Badge } from 'frappe-ui'
+import { Plus } from 'lucide-vue-next'
+import BatchCard from '@/components/BatchCard.vue'
+import { inject, ref, computed } from 'vue'
 
-const user = inject("$user")
+const user = inject('$user')
 const batches = createResource({
-    url: "lms.lms.utils.get_batches",
-    cache: ["batches", user?.data?.email],
-    auto: true,
-});
+	url: 'lms.lms.utils.get_batches',
+	cache: ['batches', user?.data?.email],
+	auto: true,
+})
 
 const tabIndex = ref(0)
 const tabs = [
-    {
-        label: "Upcoming",
-        batches: computed(() => batches.data?.upcoming || []),
-        count: computed(() => batches.data?.upcoming?.length),
-    },
-];
+	{
+		label: 'Upcoming',
+		batches: computed(() => batches.data?.upcoming || []),
+		count: computed(() => batches.data?.upcoming?.length),
+	},
+]
 
 if (user.data?.is_moderator) {
-    tabs.push({
-        label: "Archived",
-        batches: computed(() => batches.data?.archived),
-        count: computed(() => batches.data?.archived?.length),
-    });
-    tabs.push({
-        label: "Private",
-        batches: computed(() => batches.data?.private),
-        count: computed(() => batches.data?.private?.length),
-    })
+	tabs.push({
+		label: 'Archived',
+		batches: computed(() => batches.data?.archived),
+		count: computed(() => batches.data?.archived?.length),
+	})
+	tabs.push({
+		label: 'Private',
+		batches: computed(() => batches.data?.private),
+		count: computed(() => batches.data?.private?.length),
+	})
 }
 if (user.data) {
-    tabs.push({
-        label: "Enrolled",
-        batches: computed(() => batches.data?.enrolled),
-        count: computed(() => batches.data?.enrolled?.length)
-    })
+	tabs.push({
+		label: 'Enrolled',
+		batches: computed(() => batches.data?.enrolled),
+		count: computed(() => batches.data?.enrolled?.length),
+	})
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/pages/Courses.vue b/frontend/src/pages/Courses.vue
index b23dc08e..7f8412ce 100644
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -9,7 +9,7 @@
 					:items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
 				/>
 				<div class="flex">
-					<Button variant="solid">
+					<Button v-if="user.data.is_moderator" variant="solid">
 						<template #prefix>
 							<Plus class="h-4 w-4" />
 						</template>
@@ -17,8 +17,8 @@
 					</Button>
 				</div>
 			</header>
-			<div class="mx-5 py-5">
-				<Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
+			<div class="pb-5">
+				<Tabs v-model="tabIndex" :tabs="tabs" tablistClass="overflow-x-visible">
 					<template #tab="{ tab, selected }">
 						<div>
 							<button
@@ -28,7 +28,11 @@
 								<component v-if="tab.icon" :is="tab.icon" class="h-5" />
 								{{ __(tab.label) }}
 								<Badge
-									:class="{ 'text-gray-900 border border-gray-900': selected }"
+									:class="
+										selected
+											? 'text-gray-800 border border-gray-800'
+											: 'border border-gray-500'
+									"
 									variant="subtle"
 									theme="gray"
 									size="sm"
@@ -41,7 +45,7 @@
 					<template #default="{ tab }">
 						<div
 							v-if="tab.courses && tab.courses.value.length"
-							class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5"
+							class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5 mx-5"
 						>
 							<router-link
 								v-for="course in tab.courses.value"
diff --git a/frontend/src/pages/JobDetail.vue b/frontend/src/pages/JobDetail.vue
new file mode 100644
index 00000000..2d20c2df
--- /dev/null
+++ b/frontend/src/pages/JobDetail.vue
@@ -0,0 +1,27 @@
+<template>
+	<header
+		class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+	>
+		<Breadcrumbs
+			class="h-7"
+			:items="[{ label: __('Jobs'), route: { name: 'Jobs' } }]"
+		/>
+		<div class="flex">
+			<Button v-if="user.data?.name" variant="solid">
+				<template #prefix>
+					<Plus class="h-4 w-4" />
+				</template>
+				{{ __('New Job') }}
+			</Button>
+		</div>
+	</header>
+	<div></div>
+</template>
+<script setup>
+const props = defineProps({
+	job: {
+		type: String,
+		required: true,
+	},
+})
+</script>
diff --git a/frontend/src/pages/Jobs.vue b/frontend/src/pages/Jobs.vue
new file mode 100644
index 00000000..30004d39
--- /dev/null
+++ b/frontend/src/pages/Jobs.vue
@@ -0,0 +1,48 @@
+<template>
+	<div class="h-screen text-base">
+		<header
+			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+		>
+			<Breadcrumbs
+				class="h-7"
+				:items="[{ label: __('Jobs'), route: { name: 'Jobs' } }]"
+			/>
+			<div class="flex">
+				<Button v-if="user.data?.name" variant="solid">
+					<template #prefix>
+						<Plus class="h-4 w-4" />
+					</template>
+					{{ __('New Job') }}
+				</Button>
+			</div>
+		</header>
+		<div v-if="jobs.data">
+			<div class="grid grid-cols-2 gap-5 p-5">
+				<div v-if="jobs.data.length" v-for="job in jobs.data">
+					<router-link
+						:to="{
+							name: 'JobDetail',
+							params: { job: job.name },
+						}"
+					>
+						<JobCard :job="job" />
+					</router-link>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { Button, Breadcrumbs, createResource } from 'frappe-ui'
+import { Plus } from 'lucide-vue-next'
+import { inject } from 'vue'
+import JobCard from '@/components/JobCard.vue'
+
+const user = inject('$user')
+
+const jobs = createResource({
+	url: 'lms.lms.utils.get_job_opportunities',
+	cache: ['jobs'],
+	auto: true,
+})
+</script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 2a66db34..eb257bf7 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -54,6 +54,17 @@ const routes = [
 		name: 'Statistics',
 		component: () => import('@/pages/Statistics.vue'),
 	},
+	{
+		path: '/job-openings',
+		name: 'Jobs',
+		component: () => import('@/pages/Jobs.vue'),
+	},
+	{
+		path: '/job-openings/:job',
+		name: 'JobDetail',
+		component: () => import('@/pages/JobDetail.vue'),
+		props: true,
+	},
 ]
 
 let router = createRouter({
diff --git a/lms/lms/utils.py b/lms/lms/utils.py
index 7fce3473..9127796f 100644
--- a/lms/lms/utils.py
+++ b/lms/lms/utils.py
@@ -1726,3 +1726,14 @@ def get_order_summary(doctype, docname, country=None):
 
 	details.total_amount_formatted = fmt_money(details.amount, 0, details.currency)
 	return details
+
+
+@frappe.whitelist(allow_guest=True)
+def get_job_opportunities():
+	jobs = frappe.get_all(
+		"Job Opportunity",
+		{"status": "Open", "disabled": False},
+		["job_title", "location", "type", "company_name", "company_logo", "name", "creation"],
+		order_by="creation desc",
+	)
+	return jobs