16# created search view and template

This commit is contained in:
Eligiusz Kurzawa 2021-01-14 14:54:00 +01:00
parent 21c6e3d723
commit a20006b486
5 changed files with 521 additions and 20 deletions

View File

@ -5,6 +5,7 @@ app_name = "jobs"
urlpatterns = [ urlpatterns = [
path('', HomeView.as_view(), name="home"), path('', HomeView.as_view(), name="home"),
path('create-job/', CreateJobView.as_view(), name="create_job"), path('create-job/', CreateJobView.as_view(), name="create_job"),
path('search/', SearchJobView.as_view(), name="search"),
path('detail/<slug>/<int:pk>/', SingleJobView.as_view(), name="single_job"), path('detail/<slug>/<int:pk>/', SingleJobView.as_view(), name="single_job"),
path('category-detail/<slug>/<int:pk>/', CategoryDetailView.as_view(), name="category_detail"), path('category-detail/<slug>/<int:pk>/', CategoryDetailView.as_view(), name="category_detail"),
] ]

View File

@ -1,5 +1,6 @@
from django.contrib.auth.decorators import login_required from django.contrib.auth.decorators import login_required
from django.contrib.messages.views import SuccessMessageMixin from django.contrib.messages.views import SuccessMessageMixin
from django.db.models import Q
from django.shortcuts import get_object_or_404 from django.shortcuts import get_object_or_404
from django.utils.decorators import method_decorator from django.utils.decorators import method_decorator
@ -64,3 +65,28 @@ class CategoryDetailView(ListView):
context['category'] = self.category context['category'] = self.category
return context return context
class SearchJobView(ListView):
model = Job
template_name = 'jobs/search.html'
paginate_by = 2
context_object_name = 'jobs'
def get_queryset(self):
q1 = self.request.GET.get("job_title")
q2 = self.request.GET.get("job_type")
q3 = self.request.GET.get("job_location")
if q1 or q2 or q3:
return Job.objects.filter(Q(title__icontains=q1) |
Q(description__icontains=q1),
job_type=q2,
location__icontains=q3
).order_by('-id')
return Job.objects.all().order_by('-id')
def get_context_data(self, *args, **kwargs):
context = super(SearchJobView, self).get_context_data(*args, **kwargs)
context['categories'] = Category.objects.all()
return context

View File

@ -25,13 +25,13 @@
<div class="tab-content p-4" id="v-pills-tabContent"> <div class="tab-content p-4" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-nextgen-tab"> <div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-nextgen-tab">
<form action="#" class="search-job"> <form action="{% url 'jobs:search' %}" class="search-job" method="get">
<div class="row"> <div class="row">
<div class="col-md"> <div class="col-md">
<div class="form-group"> <div class="form-group">
<div class="form-field"> <div class="form-field">
<div class="icon"><span class="icon-briefcase"></span></div> <div class="icon"><span class="icon-briefcase"></span></div>
<input type="text" class="form-control" placeholder="eg. Garphic. Web Developer"> <input type="text" name="job_title" class="form-control" placeholder="eg. Garphic. Web Developer">
</div> </div>
</div> </div>
</div> </div>
@ -40,13 +40,12 @@
<div class="form-field"> <div class="form-field">
<div class="select-wrap"> <div class="select-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div> <div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="" id="" class="form-control"> <select name="job_type" id="" class="form-control">
<option value="">Category</option> <option value="full_time">Full Time</option>
<option value="">Full Time</option> <option value="part_time">Part Time</option>
<option value="">Part Time</option> <option value="freelance">Freelance</option>
<option value="">Freelance</option> <option value="internship">Internship</option>
<option value="">Internship</option> <option value="temporary">Temporary</option>
<option value="">Temporary</option>
</select> </select>
</div> </div>
</div> </div>
@ -56,7 +55,7 @@
<div class="form-group"> <div class="form-group">
<div class="form-field"> <div class="form-field">
<div class="icon"><span class="icon-map-marker"></span></div> <div class="icon"><span class="icon-map-marker"></span></div>
<input type="text" class="form-control" placeholder="Location"> <input type="text" name="job_location" class="form-control" placeholder="Location">
</div> </div>
</div> </div>
</div> </div>
@ -69,6 +68,7 @@
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<div class="tab-pane fade" id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-performance-tab"> <div class="tab-pane fade" id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-performance-tab">

View File

@ -25,13 +25,13 @@
<div class="tab-content p-4" id="v-pills-tabContent"> <div class="tab-content p-4" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-nextgen-tab"> <div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-nextgen-tab">
<form action="#" class="search-job"> <form action="{% url 'jobs:search' %}" class="search-job" method="get">
<div class="row"> <div class="row">
<div class="col-md"> <div class="col-md">
<div class="form-group"> <div class="form-group">
<div class="form-field"> <div class="form-field">
<div class="icon"><span class="icon-briefcase"></span></div> <div class="icon"><span class="icon-briefcase"></span></div>
<input type="text" class="form-control" placeholder="eg. Garphic. Web Developer"> <input type="text" name="job_title" class="form-control" placeholder="eg. Garphic. Web Developer">
</div> </div>
</div> </div>
</div> </div>
@ -40,13 +40,12 @@
<div class="form-field"> <div class="form-field">
<div class="select-wrap"> <div class="select-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div> <div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="" id="" class="form-control"> <select name="job_type" id="" class="form-control">
<option value="">Category</option> <option value="full_time">Full Time</option>
<option value="">Full Time</option> <option value="part_time">Part Time</option>
<option value="">Part Time</option> <option value="freelance">Freelance</option>
<option value="">Freelance</option> <option value="internship">Internship</option>
<option value="">Internship</option> <option value="temporary">Temporary</option>
<option value="">Temporary</option>
</select> </select>
</div> </div>
</div> </div>
@ -56,7 +55,7 @@
<div class="form-group"> <div class="form-group">
<div class="form-field"> <div class="form-field">
<div class="icon"><span class="icon-map-marker"></span></div> <div class="icon"><span class="icon-map-marker"></span></div>
<input type="text" class="form-control" placeholder="Location"> <input type="text" name="job_location" class="form-control" placeholder="Location">
</div> </div>
</div> </div>
</div> </div>

475
templates/jobs/search.html Normal file
View File

@ -0,0 +1,475 @@
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="hero-wrap js-fullheight" style="background-image: url('{% static 'images/bg_2.jpg' %}');" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
<div class="col-xl-10 ftco-animate mb-5 pb-5" data-scrollax=" properties: { translateY: '70%' }">
<p class="mb-4 mt-5 pt-5" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">We have <span class="number" data-number="850000">0</span> great job offers you deserve!</p>
<h1 class="mb-5" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Your Dream <br><span>Job is Waiting</span></h1>
<div class="ftco-search">
<div class="row">
<div class="col-md-12 nav-link-wrap">
<div class="nav nav-pills text-center" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active mr-md-1" id="v-pills-1-tab" data-toggle="pill" href="#v-pills-1" role="tab" aria-controls="v-pills-1" aria-selected="true">Find a Job</a>
<a class="nav-link" id="v-pills-2-tab" data-toggle="pill" href="#v-pills-2" role="tab" aria-controls="v-pills-2" aria-selected="false">Find a Candidate</a>
</div>
</div>
<div class="col-md-12 tab-wrap">
<div class="tab-content p-4" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-1" role="tabpanel" aria-labelledby="v-pills-nextgen-tab">
<form action="{% url 'jobs:search' %}" class="search-job" method="get">
<div class="row">
<div class="col-md">
<div class="form-group">
<div class="form-field">
<div class="icon"><span class="icon-briefcase"></span></div>
<input type="text" name="job_title" class="form-control" placeholder="eg. Garphic. Web Developer">
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-field">
<div class="select-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="job_type" id="" class="form-control">
<option value="full_time">Full Time</option>
<option value="part_time">Part Time</option>
<option value="freelance">Freelance</option>
<option value="internship">Internship</option>
<option value="temporary">Temporary</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-field">
<div class="icon"><span class="icon-map-marker"></span></div>
<input type="text" name="job_location" class="form-control" placeholder="Location">
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-field">
<input type="submit" value="Search" class="form-control btn btn-primary">
</div>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="v-pills-2" role="tabpanel" aria-labelledby="v-pills-performance-tab">
<form action="#" class="search-job">
<div class="row">
<div class="col-md">
<div class="form-group">
<div class="form-field">
<div class="icon"><span class="icon-user"></span></div>
<input type="text" class="form-control" placeholder="eg. Adam Scott">
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-field">
<div class="select-wrap">
<div class="icon"><span class="ion-ios-arrow-down"></span></div>
<select name="" id="" class="form-control">
<option value="">Category</option>
<option value="">Full Time</option>
<option value="">Part Time</option>
<option value="">Freelance</option>
<option value="">Internship</option>
<option value="">Temporary</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-field">
<div class="icon"><span class="icon-map-marker"></span></div>
<input type="text" class="form-control" placeholder="Location">
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<div class="form-field">
<input type="submit" value="Search" class="form-control btn btn-primary">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="ftco-section services-section bg-light">
<div class="container">
<div class="row d-flex">
<div class="col-md-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block">
<div class="icon"><span class="flaticon-resume"></span></div>
<div class="media-body">
<h3 class="heading mb-3">Search Millions of Jobs</h3>
<p>A small river named Duden flows by their place and supplies.</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block">
<div class="icon"><span class="flaticon-collaboration"></span></div>
<div class="media-body">
<h3 class="heading mb-3">Easy To Manage Jobs</h3>
<p>A small river named Duden flows by their place and supplies.</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block">
<div class="icon"><span class="flaticon-promotions"></span></div>
<div class="media-body">
<h3 class="heading mb-3">Top Careers</h3>
<p>A small river named Duden flows by their place and supplies.</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block">
<div class="icon"><span class="flaticon-employee"></span></div>
<div class="media-body">
<h3 class="heading mb-3">Search Expert Candidates</h3>
<p>A small river named Duden flows by their place and supplies.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section ftco-counter">
<div class="container">
<div class="row justify-content-center mb-5 pb-3">
<div class="col-md-7 heading-section text-center ftco-animate">
<span class="subheading">Categories work wating for you</span>
<h2 class="mb-4"><span>Current</span> Job Posts</h2>
</div>
</div>
<div class="row">
{% for category in categories %}
<div class="col-md-3 ftco-animate">
<ul class="category">
<li><a href="{% url 'jobs:category_detail' category.slug category.pk %}">{{ category.title }}<span class="number" data-number="{{ category.job_count }}">0</span></a></li>
</ul>
</div>
{% endfor %}
</div>
</div>
</section>
<section class="ftco-section bg-light">
<div class="container">
<div class="row justify-content-center mb-5 pb-3">
<div class="col-md-7 heading-section text-center ftco-animate">
<span class="subheading">Search results for {{ request.GET.job_title }}</span>
<h2 class="mb-4"><span>Search</span> results for {{ request.GET.job_title }}</h2>
</div>
</div>
<div class="row">
{% for job in jobs %}
<div class="col-md-12 ftco-animate">
<div class="job-post-item bg-white p-4 d-block d-md-flex align-items-center">
<div class="mb-4 mb-md-0 mr-5">
<div class="job-post-item-header d-flex align-items-center">
<h2 class="mr-3 text-black h4">{{ job.title }}</h2>
<div class="badge-wrap">
{% if job.job_type == 'full_time' %}
<span class="bg-warning text-white badge py-2 px-3">Full Time</span>
{% elif job.job_type == 'part_time'%}
<span class="bg-info text-white badge py-2 px-3">Part Time</span>
{% elif job.job_type == 'freelance'%}
<span class="bg-primary text-white badge py-2 px-3">Freelance</span>
{% elif job.job_type == 'internship'%}
<span class="bg-secondary text-white badge py-2 px-3">Internship</span>
{% elif job.job_type == 'temporary'%}
<span class="bg-danger text-white badge py-2 px-3">Temporary</span>
{% endif %}
</div>
</div>
<div class="job-post-item-body d-block d-md-flex">
<div class="mr-3"><span class="icon-layers"></span> <a href="#">{{ job.company }}</a></div>
<div><span class="icon-my_location"></span> <span>{{ job.location }}</span></div>
</div>
</div>
<div class="ml-auto d-flex">
<a href="{% url 'jobs:single_job' job.slug job.pk %}" class="btn btn-primary py-2 mr-1">Apply Job</a>
<a href="#" class="btn btn-danger rounded-circle btn-favorite d-flex align-items-center">
<span class="icon-heart"></span>
</a>
</div>
</div>
</div> <!-- end -->
{% endfor %}
</div>
<div class="row mt-5">
{% if is_paginated %}
<div class="col text-center">
<div class="block-27">
<ul>
{% if page_obj.has_previous %}
<li><a href="?job_title={{ request.GET.job_title }}&job_type={{ request.GET.job_type }}&job_location={{ request.GET.location }}&page={{ page_obj.previous_page_number }}">&lt;</a></li>
{% else %}
<li class="disabled"><span>&lt;</span></li>
{% endif %}
{% for i in paginator.page_range %}
{% if page_obj.number == i %}
<li class="active"><span>{{ i }}</span></li>
{% else %}
<li><a href="?job_title={{ request.GET.job_title }}&job_type={{ request.GET.job_type }}&job_location={{ request.GET.location }}&page={{ i }}">{{ i }}</a></li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li><a href="?job_title={{ request.GET.job_title }}&job_type={{ request.GET.job_type }}&job_location={{ request.GET.location }}&page={{ page_obj.next_page_number }}">&gt;</a></li>
{% else %}
<li class="disabled"><span>&gt;</span></li>
{% endif %}
</ul>
</div>
</div>
{% endif %}
</div>
</div>
</section>
<section class="ftco-section ftco-counter img" id="section-counter" style="background-image: url(images/bg_1.jpg);" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="row">
<div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text">
<strong class="number" data-number="1350000">0</strong>
<span>Jobs</span>
</div>
</div>
</div>
<div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text">
<strong class="number" data-number="40000">0</strong>
<span>Members</span>
</div>
</div>
</div>
<div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text">
<strong class="number" data-number="30000">0</strong>
<span>Resume</span>
</div>
</div>
</div>
<div class="col-md-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text">
<strong class="number" data-number="10500">0</strong>
<span>Company</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section testimony-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-3">
<div class="col-md-7 text-center heading-section ftco-animate">
<span class="subheading">Testimonial</span>
<h2 class="mb-4"><span>Happy</span> Clients</h2>
</div>
</div>
<div class="row ftco-animate">
<div class="col-md-12">
<div class="carousel-testimony owl-carousel ftco-owl">
<div class="item">
<div class="testimony-wrap py-4 pb-5">
<div class="user-img mb-4" style="background-image: url(images/person_1.jpg)">
<span class="quote d-flex align-items-center justify-content-center">
<i class="icon-quote-left"></i>
</span>
</div>
<div class="text">
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Roger Scott</p>
<span class="position">Marketing Manager</span>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4 pb-5">
<div class="user-img mb-4" style="background-image: url(images/person_2.jpg)">
<span class="quote d-flex align-items-center justify-content-center">
<i class="icon-quote-left"></i>
</span>
</div>
<div class="text">
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Roger Scott</p>
<span class="position">Interface Designer</span>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4 pb-5">
<div class="user-img mb-4" style="background-image: url(images/person_3.jpg)">
<span class="quote d-flex align-items-center justify-content-center">
<i class="icon-quote-left"></i>
</span>
</div>
<div class="text">
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Roger Scott</p>
<span class="position">UI Designer</span>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4 pb-5">
<div class="user-img mb-4" style="background-image: url(images/person_1.jpg)">
<span class="quote d-flex align-items-center justify-content-center">
<i class="icon-quote-left"></i>
</span>
</div>
<div class="text">
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Roger Scott</p>
<span class="position">Web Developer</span>
</div>
</div>
</div>
<div class="item">
<div class="testimony-wrap py-4 pb-5">
<div class="user-img mb-4" style="background-image: url(images/person_1.jpg)">
<span class="quote d-flex align-items-center justify-content-center">
<i class="icon-quote-left"></i>
</span>
</div>
<div class="text">
<p class="mb-4">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="name">Roger Scott</p>
<span class="position">System Analyst</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section bg-light">
<div class="container">
<div class="row justify-content-center mb-5 pb-3">
<div class="col-md-7 heading-section text-center ftco-animate">
<span class="subheading">Our Blog</span>
<h2><span>Recent</span> Blog</h2>
</div>
</div>
<div class="row d-flex">
<div class="col-md-3 d-flex ftco-animate">
<div class="blog-entry align-self-stretch">
<a href="blog-single.html" class="block-20" style="background-image: url('{% static 'images/image_1.jpg' %}');">
</a>
<div class="text mt-3">
<div class="meta mb-2">
<div><a href="#">December 2, 2018</a></div>
<div><a href="#">Admin</a></div>
<div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
</div>
<h3 class="heading"><a href="#">Even the all-powerful Pointing has no control about the blind texts</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias architecto enim non iste maxime optio, ut com</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex ftco-animate">
<div class="blog-entry align-self-stretch">
<a href="blog-single.html" class="block-20" style="background-image: url('{% static 'images/image_2.jpg' %}');">
</a>
<div class="text mt-3">
<div class="meta mb-2">
<div><a href="#">December 2, 2018</a></div>
<div><a href="#">Admin</a></div>
<div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
</div>
<h3 class="heading"><a href="#">Even the all-powerful Pointing has no control about the blind texts</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet nobis natus incidunt officia assumenda.</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex ftco-animate">
<div class="blog-entry align-self-stretch">
<a href="blog-single.html" class="block-20" style="background-image: url('{% static 'images/image_3.jpg' %}');">
</a>
<div class="text mt-3">
<div class="meta mb-2">
<div><a href="#">December 2, 2018</a></div>
<div><a href="#">Admin</a></div>
<div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
</div>
<h3 class="heading"><a href="#">Even the all-powerful Pointing has no control about the blind texts</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi obcaecati praesentium,</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex ftco-animate">
<div class="blog-entry align-self-stretch">
<a href="blog-single.html" class="block-20" style="background-image: url('{% static 'images/image_4.jpg' %}');">
</a>
<div class="text mt-3">
<div class="meta mb-2">
<div><a href="#">December 2, 2018</a></div>
<div><a href="#">Admin</a></div>
<div><a href="#" class="meta-chat"><span class="icon-chat"></span> 3</a></div>
</div>
<h3 class="heading"><a href="#">Even the all-powerful Pointing has no control about the blind texts</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor minima, dolores quis, dolorum accusamu</p>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}