Skip to content

Commit

Permalink
UX/UI: Revamp design of employeur and job search
Browse files Browse the repository at this point in the history
  • Loading branch information
@hellodeloo @francoisfreitag
hellodeloo authored and francoisfreitag committed Jul 1, 2024
1 parent 7d3eda5 commit a42647f
Show file tree
Hide file tree
Showing 10 changed files with 110 additions and 178 deletions.
37 changes: 0 additions & 37 deletions itou/templates/search/includes/siaes_search_filters.html
View file

This file was deleted.

9 changes: 0 additions & 9 deletions itou/templates/search/includes/siaes_search_filters_company.html
View file

This file was deleted.

90 changes: 14 additions & 76 deletions itou/templates/search/includes/siaes_search_filters_departments.html
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,16 @@
{% load django_bootstrap5 %}

{% if form.departments %}
<hr>
<fieldset>
<div class="form-group mb-0">
<legend class="has-collapse-caret mb-0"
data-bs-toggle="collapse"
href="#collapse_{{ form.departments.name }}"
role="button"
aria-expanded="{% if form.departments.value %}true{% else %}false{% endif %}"
aria-controls="collapse_{{ form.departments.name }}">
{{ form.departments.label | capfirst }}
</legend>
<div class="collapse mt-3{% if form.departments.value %} show{% endif %}" id="collapse_{{ form.departments.name }}">
{{ form.departments }}
</div>
</div>
</fieldset>
{% endif %}

{# getattr and list still painful in Django template #}
{% if form.districts_13 %}
<hr>
<fieldset>
<div class="form-group mb-0">
<legend class="has-collapse-caret mb-0"
data-bs-toggle="collapse"
href="#collapse_{{ form.districts_13.name }}"
role="button"
aria-expanded="{% if form.districts_13.value %}true{% else %}false{% endif %}"
aria-controls="collapse_{{ form.districts_13.name }}">
{{ form.districts_13.label | capfirst }}
</legend>
<div class="collapse mt-3{% if form.districts_13.value %} show{% endif %}" id="collapse_{{ form.districts_13.name }}">
{{ form.districts_13 }}
</div>
</div>
</fieldset>
{% endif %}

{% if form.districts_69 %}
<hr>
<fieldset>
<div class="form-group mb-0">
<legend class="has-collapse-caret mb-0"
data-bs-toggle="collapse"
href="#collapse_{{ form.districts_69.name }}"
role="button"
aria-expanded="{% if form.districts_69.value %}true{% else %}false{% endif %}"
aria-controls="collapse_{{ form.districts_69.name }}">
{{ form.districts_69.label | capfirst }}
</legend>
<div class="collapse mt-3{% if form.districts_69.value %} show{% endif %}" id="collapse_{{ form.districts_69.name }}">
{{ form.districts_69 }}
</div>
</div>
</fieldset>
{% endif %}

{% if form.districts_75 %}
<hr>
<fieldset>
<div class="form-group mb-0">
<legend class="has-collapse-caret mb-0"
data-bs-toggle="collapse"
href="#collapse_{{ form.districts_75.name }}"
role="button"
aria-expanded="{% if form.districts_75.value %}true{% else %}false{% endif %}"
aria-controls="collapse_{{ form.districts_75.name }}">
{{ form.districts_75.label | capfirst }}
</legend>
<div class="collapse mt-3{% if form.districts_75.value %} show{% endif %}" id="collapse_{{ form.districts_75.name }}">
{{ form.districts_75 }}
</div>
</div>
</fieldset>
{% endif %}
<div class="d-flex flex-column flex-md-row gap-1">
{% if form.departments %}
{% include "includes/btn_dropdown_filter/checkboxes.html" with field=form.departments only %}
{% endif %}
{% if form.districts_13 %}
{% include "includes/btn_dropdown_filter/checkboxes.html" with field=form.districts_13 only %}
{% endif %}
{% if form.districts_69 %}
{% include "includes/btn_dropdown_filter/checkboxes.html" with field=form.districts_69 only %}
{% endif %}
{% if form.districts_75 %}
{% include "includes/btn_dropdown_filter/checkboxes.html" with field=form.districts_75 only %}
{% endif %}
</div>
4 changes: 2 additions & 2 deletions itou/templates/search/includes/siaes_search_results.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="job-search-results" class="col-12 col-md-8">
<div id="job-search-results">
{% for item in results_page %}
{% if request.resolver_match.view_name == "search:employers_results" %}
{% include "companies/includes/_card_siae.html" with siae=item %}
Expand All @@ -20,7 +20,7 @@
{# Cannot use block in includes #}
- Les emplois de l'inclusion
</title>
{% include "search/includes/siaes_search_filters_company.html" %}
{% include "search/includes/siaes_search_subtitle.html" %}
{% include "search/includes/siaes_search_top.html" %}
{% include "search/includes/siaes_search_tabs.html" %}
{% endif %}
11 changes: 11 additions & 0 deletions itou/templates/search/includes/siaes_search_subtitle.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{% load str_filters %}

<div id="search-subtitle"{% if request.htmx %} hx-swap-oob="true"{% endif %}>
{% if request.resolver_match.view_name == "search:employers_results" %}
<h2 class="my-3 my-md-4">Employeur{{ siaes_count|pluralizefr }}</h2>
{% else %}
<h2 class="my-3 my-md-4">
Poste{{ job_descriptions_count|pluralizefr }} ouvert{{ job_descriptions_count|pluralizefr }} au recrutement
</h2>
{% endif %}
</div>
83 changes: 42 additions & 41 deletions itou/templates/search/includes/siaes_search_top.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,59 @@
{% load str_filters %}
{% load django_bootstrap5 %}

<div id="job-search-top"{% if request.htmx %} hx-swap-oob="true"{% endif %}>
{% if request.resolver_match.view_name == "search:employers_results" %}
<h2>Employeur{{ siaes_count|pluralizefr }}</h2>
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-2">
<div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between mb-3 mb-md-4">
<p class="mb-0">
{{ siaes_count }} résultat{{ siaes_count|pluralizefr }}
{% if form.is_valid %}
- Emplois inclusifs à <strong>{{ distance }} km</strong> du centre de <strong>{{ city }}</strong>
{% endif %}
<strong>{{ siaes_count }} résultat{{ siaes_count|pluralizefr }}</strong>
</p>
{% if siaes_count %}
<button class="btn btn-ico btn-link text-nowrap" data-bs-toggle="modal" data-bs-target="#companiesSortingTipModal">
<i class="ri-information-fill font-weight-medium" aria-hidden="true"></i>
<span>Comment sont triés ces résultats ?</span>
</button>
<div class="modal fade" id="companiesSortingTipModal" tabindex="-1" aria-labelledby="companiesSortingTipModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="companiesSortingTipModalLabel">Comment sont triés ces résultats ?</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
<p class="fw-bold">Pour les résultats d’employeurs inclusifs, l’ordre de priorité est le suivant&nbsp;:</p>
<ol>
<li>
Les employeurs actifs (c’est à dire les structures qui ont des membres inscrits) qui ont moins de candidatures par rapport au nombre de postes ouverts au recrutement
</li>
<li>Les employeurs actifs ayant des postes ouverts au recrutement</li>
<li>Les employeurs actifs ayant publié des fiches de postes</li>
<li>Les employeurs actifs ayant bloqué la réception des candidatures</li>
<li>Les employeurs inactifs (sans membres actifs)</li>
</ol>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal">J’ai compris</button>
<div class="d-lg-flex">
{% if siaes_count %}
<div>
<button class="btn btn-ico btn-link text-nowrap" data-bs-toggle="modal" data-bs-target="#companiesSortingTipModal">
<i class="ri-information-line font-weight-medium" aria-hidden="true"></i>
<span>Comment sont triés ces résultats ?</span>
</button>
<div class="modal fade" id="companiesSortingTipModal" tabindex="-1" aria-labelledby="companiesSortingTipModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="companiesSortingTipModalLabel">Comment sont triés ces résultats ?</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
<p class="fw-bold">Pour les résultats d’employeurs inclusifs, l’ordre de priorité est le suivant&nbsp;:</p>
<ol>
<li>
Les employeurs actifs (c’est à dire les structures qui ont des membres inscrits) qui ont moins de candidatures par rapport au nombre de postes ouverts au recrutement
</li>
<li>Les employeurs actifs ayant des postes ouverts au recrutement</li>
<li>Les employeurs actifs ayant publié des fiches de postes</li>
<li>Les employeurs actifs ayant bloqué la réception des candidatures</li>
<li>Les employeurs inactifs (sans membres actifs)</li>
</ol>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal">J’ai compris</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if form.company %}
{% bootstrap_field form.company wrapper_class="w-lg-400px" show_label=False %}
{% endif %}
{% endif %}
</div>
</div>
{% else %}
<h2>Poste{{ job_descriptions_count|pluralizefr }} ouvert{{ job_descriptions_count|pluralizefr }} au recrutement</h2>
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-2">
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-md-between mb-3 mb-md-4">
<p class="mb-0">
{{ job_descriptions_count }} résultat{{ job_descriptions_count|pluralizefr }}
{% if form.is_valid %}
- Emplois inclusifs à <strong>{{ distance }} km</strong> du centre de <strong>{{ city }}</strong>
{% endif %}
<strong>{{ job_descriptions_count }} résultat{{ job_descriptions_count|pluralizefr }}</strong>
</p>
{% if job_descriptions_count %}
<button class="btn btn-ico btn-link text-nowrap" data-bs-toggle="modal" data-bs-target="#jobDescriptionsSortingTipModal">
<i class="ri-information-fill font-weight-medium" aria-hidden="true"></i>
<i class="ri-information-line font-weight-medium" aria-hidden="true"></i>
<span>Comment sont triés ces résultats ?</span>
</button>
<div class="modal fade" id="jobDescriptionsSortingTipModal" tabindex="-1" aria-labelledby="jobDescriptionsSortingTipModalLabel" aria-hidden="true">
Expand Down
38 changes: 32 additions & 6 deletions itou/templates/search/siaes_search_results.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{% extends "layout/base.html" %}
{% load django_bootstrap5 %}
{% load static %}

{% block title %}
Expand All @@ -22,18 +23,42 @@
</form>
{% include "search/includes/siaes_search_tabs.html" %}
<div class="tab-content">
{% include "search/includes/siaes_search_top.html" %}
<form class="d-block w-100"
hx-get="{% url request.resolver_match.view_name %}"
<form hx-get="{% url request.resolver_match.view_name %}"
hx-trigger="change delay:.5s"
hx-include="#id_city"
hx-indicator="#job-search-results"
hx-target="#job-search-results"
hx-swap="outerHTML"
hx-include="#id_city"
hx-push-url="true">
<div class="row">
<div class="col-12 col-md-4">{% include "search/includes/siaes_search_filters.html" with form=form %}</div>
{% include "search/includes/siaes_search_results.html" %}
<div class="col-12">
{% include "search/includes/siaes_search_subtitle.html" %}
<div class="d-block w-100">
<div class="btn-dropdown-filter-group mb-3 mb-md-4">
{% include "includes/btn_dropdown_filter/radio.html" with field=form.distance only %}
{% include "includes/btn_dropdown_filter/checkboxes.html" with field=form.kinds only %}
{% if form.contract_types %}
{% include "includes/btn_dropdown_filter/checkboxes.html" with field=form.contract_types only %}
{% endif %}
{% if form.domains %}
{% include "includes/btn_dropdown_filter/checkboxes.html" with field=form.domains only %}
{% endif %}
{% include "search/includes/siaes_search_filters_departments.html" %}
<div class="ms-lg-auto">
<a href="{{ clear_filters_url }}" class="btn btn-ico btn-dropdown-filter" aria-label="Réinitialiser les filtres actifs">
<i class="ri-eraser-line font-weight-bold" aria-hidden="true"></i>
<span>Effacer tout</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
{% include "search/includes/siaes_search_top.html" %}
{% include "search/includes/siaes_search_results.html" %}
</div>
</div>
</form>
</div>
Expand All @@ -46,4 +71,5 @@
{% block script %}
{{ block.super }}
<script src='{% static "js/htmx_compat.js" %}'></script>
<script src='{% static "js/htmx_dropdown_filter.js" %}'></script>
{% endblock %}
7 changes: 2 additions & 5 deletions itou/www/search/forms.py
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
from django import forms
from django.urls import reverse_lazy
from django.utils.datastructures import MultiValueDict
from django.utils.safestring import mark_safe
from django.utils.text import format_lazy
from django_select2.forms import Select2Widget

Expand Down Expand Up @@ -91,12 +90,10 @@ def add_field_districts(self, department, districts):
def add_field_company(self, companies):
# Build list of choices
self.fields["company"] = forms.ChoiceField(
label=mark_safe(
'Nom de la structure <span class="badge badge-sm rounded-pill bg-important">Nouveau</span>'
),
label="Nom de la structure",
required=False,
choices=sorted(companies, key=lambda item: item[1]),
widget=Select2Widget(),
widget=Select2Widget(attrs={"data-placeholder": "Nom de la structure"}),
)


Expand Down
5 changes: 5 additions & 0 deletions itou/www/search/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
from itou.job_applications.models import JobApplication, JobApplicationWorkflow
from itou.prescribers.models import PrescriberOrganization
from itou.utils.pagination import pager
from itou.utils.urls import add_url_params
from itou.www.search.forms import JobDescriptionSearchForm, PrescriberSearchForm, SiaeSearchForm


Expand Down Expand Up @@ -45,6 +46,10 @@ def get(self, request, *args, **kwargs):
def get_context_data(self, **kwargs):
context = {
"back_url": reverse("search:employers_home"),
"clear_filters_url": add_url_params(
self.request.path,
{"city": kwargs["form"].data.get("city")},
),
"filters_query_string": "",
"job_descriptions_count": 0,
"siaes_count": 0,
Expand Down
Loading

0 comments on commit a42647f

Please sign in to comment.