feat: redesigned job list
This commit is contained in:
@@ -20,7 +20,7 @@
|
||||
<router-link
|
||||
v-if="user.data.name == job.data?.owner"
|
||||
:to="{
|
||||
name: 'JobCreation',
|
||||
name: 'JobForm',
|
||||
params: { jobName: job.data?.name },
|
||||
}"
|
||||
>
|
||||
@@ -62,7 +62,7 @@
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
:src="job.data.company_logo"
|
||||
class="w-16 h-16 rounded-lg object-contain cursor-pointer mr-4"
|
||||
class="size-15 rounded-lg object-contain cursor-pointer mr-4"
|
||||
:alt="job.data.company_name"
|
||||
@click="redirectToWebsite(job.data.company_website)"
|
||||
/>
|
||||
@@ -75,7 +75,7 @@
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-5 md:gap-y-5"
|
||||
>
|
||||
<div class="flex items-center space-x-4">
|
||||
<Building2 class="h-4 w-4 text-ink-green-2" />
|
||||
<Building2 class="size-4 stroke-1.5 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') }}
|
||||
@@ -86,9 +86,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<MapPin class="size-4 text-ink-red-3" />
|
||||
<MapPin class="size-4 stroke-1.5 text-ink-gray-7" />
|
||||
<div class="flex flex-col space-y-1 text-ink-gray-7">
|
||||
<span class="text-xs font-medium uppercase">
|
||||
<span class="text-xs text-ink-gray-5 font-medium uppercase">
|
||||
{{ __('Location') }}
|
||||
</span>
|
||||
<span class="text-sm font-semibold">
|
||||
@@ -97,9 +97,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<ClipboardType class="h-4 w-4 text-yellow-500" />
|
||||
<ClipboardType class="size-4 stroke-1.5 text-ink-gray-7" />
|
||||
<div class="flex flex-col space-y-1 text-ink-gray-7">
|
||||
<span class="text-xs font-medium uppercase">
|
||||
<span class="text-xs text-ink-gray-5 font-medium uppercase">
|
||||
{{ __('Category') }}
|
||||
</span>
|
||||
<span class="text-sm font-semibold">
|
||||
@@ -108,9 +108,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<CalendarDays class="h-4 w-4 text-ink-blue-2" />
|
||||
<CalendarDays class="size-4 stroke-1.5 text-ink-gray-7" />
|
||||
<div class="flex flex-col space-y-1 text-ink-gray-7">
|
||||
<span class="text-xs font-medium uppercase">
|
||||
<span class="text-xs text-ink-gray-5 font-medium uppercase">
|
||||
{{ __('Posted on') }}
|
||||
</span>
|
||||
<span class="text-sm font-semibold">
|
||||
@@ -122,9 +122,9 @@
|
||||
v-if="applicationCount.data"
|
||||
class="flex items-center space-x-4"
|
||||
>
|
||||
<SquareUserRound class="h-4 w-4 text-purple-500" />
|
||||
<SquareUserRound class="size-4 stroke-1.5 text-ink-gray-7" />
|
||||
<div class="flex flex-col space-y-1 text-ink-gray-7">
|
||||
<span class="text-xs font-medium uppercase">
|
||||
<span class="text-xs text-ink-gray-5 font-medium uppercase">
|
||||
{{ __('Applications Received') }}
|
||||
</span>
|
||||
<span class="text-sm font-semibold">
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<div class="text-lg font-semibold mb-4">
|
||||
{{ __('Job Details') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-2 gap-5">
|
||||
<div>
|
||||
<FormControl
|
||||
v-model="job.job_title"
|
||||
@@ -45,25 +45,12 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label class="block text-ink-gray-5 text-xs mb-1">
|
||||
{{ __('Description') }}
|
||||
<span class="text-ink-red-3">*</span>
|
||||
</label>
|
||||
<TextEditor
|
||||
:content="job.description"
|
||||
@change="(val) => (job.description = val)"
|
||||
:editable="true"
|
||||
:fixedMenu="true"
|
||||
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mb-4 pb-4">
|
||||
<div class="container border-b mb-4 pb-4">
|
||||
<div class="text-lg font-semibold mb-4">
|
||||
{{ __('Company Details') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="grid grid-cols-2 gap-5">
|
||||
<div>
|
||||
<FormControl
|
||||
v-model="job.company_name"
|
||||
@@ -128,6 +115,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mt-4">
|
||||
<label class="block text-ink-gray-5 text-xs mb-1">
|
||||
{{ __('Description') }}
|
||||
<span class="text-ink-red-3">*</span>
|
||||
</label>
|
||||
<TextEditor
|
||||
:content="job.description"
|
||||
@change="(val) => (job.description = val)"
|
||||
:editable="true"
|
||||
:fixedMenu="true"
|
||||
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -317,7 +317,7 @@ const breadcrumbs = computed(() => {
|
||||
},
|
||||
{
|
||||
label: props.jobName == 'new' ? 'New Job' : 'Edit Job',
|
||||
route: { name: 'JobCreation' },
|
||||
route: { name: 'JobForm' },
|
||||
},
|
||||
]
|
||||
return crumbs
|
||||
@@ -10,7 +10,7 @@
|
||||
<router-link
|
||||
v-if="user.data?.name"
|
||||
:to="{
|
||||
name: 'JobCreation',
|
||||
name: 'JobForm',
|
||||
params: {
|
||||
jobName: 'new',
|
||||
},
|
||||
@@ -29,8 +29,11 @@
|
||||
<div
|
||||
class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between mb-5"
|
||||
>
|
||||
<div class="text-xl text-ink-gray-9 font-semibold">
|
||||
{{ __('Find the perfect job for you') }}
|
||||
<div
|
||||
v-if="jobCount"
|
||||
class="text-xl font-semibold text-ink-gray-7 mb-4 md:mb-0"
|
||||
>
|
||||
{{ __('{0} Open Jobs').format(jobCount) }}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<FormControl
|
||||
@@ -58,7 +61,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<router-link
|
||||
v-for="job in jobs.data"
|
||||
:to="{
|
||||
@@ -94,6 +97,7 @@
|
||||
import {
|
||||
Button,
|
||||
Breadcrumbs,
|
||||
call,
|
||||
createResource,
|
||||
FormControl,
|
||||
usePageMeta,
|
||||
@@ -109,6 +113,7 @@ const { brand } = sessionStore()
|
||||
const searchQuery = ref('')
|
||||
const filters = ref({})
|
||||
const orFilters = ref({})
|
||||
const jobCount = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
let queries = new URLSearchParams(location.search)
|
||||
@@ -116,6 +121,7 @@ onMounted(() => {
|
||||
jobType.value = queries.get('type')
|
||||
}
|
||||
updateJobs()
|
||||
getJobCount()
|
||||
})
|
||||
|
||||
const jobs = createResource({
|
||||
@@ -155,6 +161,17 @@ const updateFilters = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const getJobCount = () => {
|
||||
call('frappe.client.get_count', {
|
||||
doctype: 'Job Opportunity',
|
||||
filters: {
|
||||
status: 'Open',
|
||||
disabled: 0,
|
||||
},
|
||||
}).then((data) => {
|
||||
jobCount.value = data
|
||||
})
|
||||
}
|
||||
const jobTypes = computed(() => {
|
||||
return [
|
||||
'',
|
||||
|
||||
Reference in New Issue
Block a user