mirror of
https://github.com/frappe/lms.git
synced 2026-04-19 22:52:29 +03:00
refactor: jobs list and form ui
This commit is contained in:
Jannat Patel
@@ -13,13 +13,13 @@
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="py-5">
|
||||
<div class="container border-b mb-4 pb-5">
|
||||
<div class="text-lg font-semibold mb-4 text-ink-gray-9">
|
||||
{{ __('Job Details') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-5">
|
||||
<div class="space-y-4">
|
||||
<div class="">
|
||||
<div class="grid grid-cols-[70%,30%] gap-5 px-5">
|
||||
<div class="space-y-5 pt-5">
|
||||
<div class="text-ink-gray-9 font-semibold">
|
||||
{{ __('Job Details') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-5">
|
||||
<FormControl
|
||||
v-model="job.job_title"
|
||||
:label="__('Title')"
|
||||
@@ -40,7 +40,34 @@
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<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 border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[20rem] max-h-[70vh] overflow-y-auto mb-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-l h-[93vh]">
|
||||
<div v-if="jobName != 'new'" class="p-5 space-y-5 border-b">
|
||||
<FormControl
|
||||
v-model="job.status"
|
||||
:label="__('Status')"
|
||||
type="select"
|
||||
:options="jobStatuses"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-5 space-y-5 border-b">
|
||||
<div class="text-ink-gray-9 font-semibold">
|
||||
{{ __('Location') }}
|
||||
</div>
|
||||
<FormControl
|
||||
v-model="job.location"
|
||||
:label="__('City')"
|
||||
@@ -52,23 +79,11 @@
|
||||
:label="__('Country')"
|
||||
:required="true"
|
||||
/>
|
||||
<FormControl
|
||||
v-if="jobName != 'new'"
|
||||
v-model="job.status"
|
||||
:label="__('Status')"
|
||||
type="select"
|
||||
:options="jobStatuses"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container border-b mb-4 pb-5">
|
||||
<div class="text-lg font-semibold mb-4 text-ink-gray-9">
|
||||
{{ __('Company Details') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-5">
|
||||
<div>
|
||||
<div class="p-5 space-y-5">
|
||||
<div class="text-ink-gray-9 font-semibold">
|
||||
{{ __('Company Details') }}
|
||||
</div>
|
||||
<FormControl
|
||||
v-model="job.company_name"
|
||||
:label="__('Company Name')"
|
||||
@@ -80,8 +95,6 @@
|
||||
:label="__('Company Website')"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<FormControl
|
||||
v-model="job.company_email_address"
|
||||
:label="__('Company Email Address')"
|
||||
@@ -96,7 +109,81 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mt-4">
|
||||
<!-- <div class="border-b mb-4 pb-5 px-5">
|
||||
<div class="text-lg font-semibold mb-4 text-ink-gray-9">
|
||||
{{ __('Job Details') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-5">
|
||||
<FormControl
|
||||
v-model="job.job_title"
|
||||
:label="__('Title')"
|
||||
:required="true"
|
||||
/>
|
||||
<FormControl
|
||||
v-model="job.type"
|
||||
:label="__('Type')"
|
||||
type="select"
|
||||
:options="jobTypes"
|
||||
:required="true"
|
||||
/>
|
||||
<FormControl
|
||||
v-model="job.work_mode"
|
||||
:label="__('Work Mode')"
|
||||
type="select"
|
||||
:options="workModes"
|
||||
:required="true"
|
||||
/>
|
||||
<FormControl
|
||||
v-model="job.location"
|
||||
:label="__('City')"
|
||||
:required="true"
|
||||
/>
|
||||
<Link
|
||||
v-model="job.country"
|
||||
doctype="Country"
|
||||
:label="__('Country')"
|
||||
:required="true"
|
||||
/>
|
||||
<FormControl
|
||||
v-if="jobName != 'new'"
|
||||
v-model="job.status"
|
||||
:label="__('Status')"
|
||||
type="select"
|
||||
:options="jobStatuses"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-b mb-4 pb-5 px-5">
|
||||
<div class="text-lg font-semibold mb-4 text-ink-gray-9">
|
||||
{{ __('Company Details') }}
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-5">
|
||||
<FormControl
|
||||
v-model="job.company_name"
|
||||
:label="__('Company Name')"
|
||||
class="mb-4"
|
||||
:required="true"
|
||||
/>
|
||||
<FormControl
|
||||
v-model="job.company_website"
|
||||
:label="__('Company Website')"
|
||||
:required="true"
|
||||
/>
|
||||
<FormControl
|
||||
v-model="job.company_email_address"
|
||||
:label="__('Company Email Address')"
|
||||
class="mb-4"
|
||||
:required="true"
|
||||
/>
|
||||
<Uploader
|
||||
v-model="job.company_logo"
|
||||
:label="__('Company Logo')"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 mt-4">
|
||||
<label class="block text-ink-gray-5 text-xs mb-1">
|
||||
{{ __('Description') }}
|
||||
<span class="text-ink-red-3">*</span>
|
||||
@@ -106,9 +193,9 @@
|
||||
@change="(val) => (job.description = val)"
|
||||
:editable="true"
|
||||
:fixedMenu="true"
|
||||
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
|
||||
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[20rem] overflow-y-auto mb-4"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -22,13 +22,13 @@
|
||||
<template #prefix>
|
||||
<Plus class="h-4 w-4" />
|
||||
</template>
|
||||
{{ __('New Job') }}
|
||||
{{ __('Create') }}
|
||||
</Button>
|
||||
</router-link>
|
||||
</header>
|
||||
<div>
|
||||
<div
|
||||
class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between w-full md:w-4/5 mx-auto mb-2 p-5"
|
||||
class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:items-center justify-between w-full mx-auto mb-2 p-5"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-xl font-semibold text-ink-gray-9 md:mb-0">
|
||||
@@ -96,8 +96,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="jobs.data?.length" class="w-full md:w-4/5 mx-auto p-5 pt-0">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div v-if="jobs.data?.length" class="w-full mx-auto p-5 pt-0">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<router-link
|
||||
v-for="job in jobs.data"
|
||||
:to="{
|
||||
|
||||
Reference in New Issue
Block a user