Skip to content

Commit

Permalink
Filter job seeker job applications with HTMX
Browse files Browse the repository at this point in the history 
Instead of reloading the page, use HTMX to reload the content.
  • Loading branch information
@francoisfreitag
francoisfreitag committed Apr 8, 2024
1 parent e2d75b6 commit 2a00397
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 139 deletions.
6 changes: 0 additions & 6 deletions itou/static/js/job_applications_filters.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1 @@
function submitFiltersForm() {
$("#js-job-applications-filters-form").submit();
}
$("#js-job-applications-filters-form :input").change(submitFiltersForm);
$("#js-job-applications-filters-form duet-date-picker").on("duetChange", submitFiltersForm);

$("#js-job-applications-filters-apply-button").hide();
25 changes: 22 additions & 3 deletions itou/templates/apply/includes/list_job_applications.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ <h3 class="h4 mb-0" id="results">
<div class="flex-column flex-md-row btn-group btn-group-sm btn-group-action" role="group" aria-label="Actions sur les candidatures">
{% include "apply/includes/job_applications_export_button.html" %}
{% if filters_counter > 0 %}
<a href="{% if request.user.is_prescriber %}{% url 'apply:list_for_prescriber' %}{% else %}{% url 'apply:list_for_siae' %}{% endif %}" class="btn btn-secondary btn-ico mt-3 mt-md-0">
<a href="{% if request.user.is_prescriber %}{% url 'apply:list_for_prescriber' %}{% elif request.user.is_employer %}{% url 'apply:list_for_siae' %}{% else %}{% url 'apply:list_for_job_seeker' %}{% endif %}"
class="btn btn-secondary btn-ico mt-3 mt-md-0">
<i class="ri-arrow-go-back-line" aria-hidden="true"></i>
<span>Réinitialiser les filtres ({{ filters_counter }})</span>
</a>
Expand All @@ -24,7 +25,7 @@ <h3 class="h4 mb-0" id="results">
<img class="img-fluid" src="{% static 'img/illustration-siae-card-no-result.svg' %}" alt="" loading="lazy">
<p class="mb-1 mt-3">
<strong>
{% if request.user.is_prescriber %}
{% if request.user.is_prescriber or request.user.is_job_seeker %}
Aucune candidature pour le moment
{% elif request.user.is_employer %}
{% if pending_states_job_applications_count == 0 %}
Expand All @@ -45,6 +46,10 @@ <h3 class="h4 mb-0" id="results">
Pour recevoir des candidatures, vérifiez que les postes ouverts
<br class="d-none d-lg-inline">
dans votre structure sont bien à jour.
{% elif request.user.is_job_seeker %}
Vous trouverez ici vos candidatures, émises par un prescripteur
<br class="d-none d-lg-inline">
ou par vous même.
{% endif %}
</i>
</p>
Expand All @@ -58,6 +63,11 @@ <h3 class="h4 mb-0" id="results">
<i class="ri-briefcase-line ri-lg font-weight-normal"></i>
<span>Gérer les métiers et recrutements</span>
</a>
{% elif request.user.is_job_seeker %}
<a href="{% url 'search:employers_home' %}" class="btn btn-outline-primary btn-ico w-100 w-md-auto justify-content-center">
<i class="ri-briefcase-line ri-lg font-weight-normal"></i>
<span>Rechercher un emploi inclusif</span>
</a>
{% endif %}
</div>
{% if request.user.is_employer %}
Expand All @@ -66,7 +76,11 @@ <h3 class="h4 mb-0" id="results">
{% else %}
{% for job_application in job_applications_page %}
<div class="c-box c-box--results has-links-inside my-3 my-md-4">
{% include "apply/includes/list_card_body_company.html" %}
{% if request.user.is_job_seeker %}
{% include "apply/includes/list_card_body_jobseeker.html" %}
{% else %}
{% include "apply/includes/list_card_body_company.html" %}
{% endif %}
<div class="c-box--results__footer">
<div class="d-flex{% if job_application.pending_for_weeks >= job_application.WEEKS_BEFORE_CONSIDERED_OLD %} flex-column flex-md-row justify-content-md-between align-items-md-center{% else %} justify-content-end{% endif %}">
{% if job_application.pending_for_weeks >= job_application.WEEKS_BEFORE_CONSIDERED_OLD %}
Expand All @@ -87,6 +101,11 @@ <h3 class="h4 mb-0" id="results">
href="{% url 'apply:details_for_company' job_application_id=job_application.id %}?back_url={{ request.get_full_path|urlencode }}"
aria-label="Gérer la candidature de {{ job_application.job_seeker.get_full_name|mask_unless:job_application.user_can_view_personal_information }}"
{% matomo_event "candidature" "clic" "voir-candidature-employeur" %}>Voir sa candidature</a>
{% elif request.user.is_job_seeker %}
<a class="btn btn-outline-primary{% if job_application.pending_for_weeks >= job_application.WEEKS_BEFORE_CONSIDERED_OLD %} btn-block w-100 w-md-auto{% endif %}"
href="{% url 'apply:details_for_jobseeker' job_application_id=job_application.id %}?back_url={{ request.get_full_path|urlencode }}">
Voir ma candidature
</a>
{% endif %}
</div>
</div>
Expand Down
72 changes: 8 additions & 64 deletions itou/templates/apply/list_for_job_seeker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@
<span>Filtrer les candidatures</span>
</button>
<div class="c-aside-filters__card collapse show" id="asideFiltersCollapse">
<form method="get" id="js-job-applications-filters-form">
<form hx-get="{% url 'apply:list_for_job_seeker' %}"
hx-trigger="change delay:.5s, duetChange delay:.5s"
hx-indicator="#job-applications-section"
hx-target="#job-applications-section"
hx-swap="outerHTML"
hx-push-url="true">
<div class="c-aside-filters__card__body">
{% include "apply/includes/job_applications_filters/statut.html" %}
<hr>
Expand All @@ -30,75 +35,14 @@
</div>
</aside>
</div>

<div class="col-12 col-md-8">
<section aria-labelledby="results">
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-md-between mb-3 mb-md-4">
<h3 class="h4 mb-0" id="results">
{% with job_applications_page.paginator.count as counter %}
{{ counter }} <strong>résultat{{ counter|pluralizefr }}</strong>
{% endwith %}
</h3>
<div class="flex-column flex-md-row btn-group btn-group-sm btn-group-action" role="group" aria-label="Actions sur les candidatures">
{% include "apply/includes/job_applications_export_button.html" %}
{% if filters_counter > 0 %}
<a href="{% url 'apply:list_for_job_seeker' %}" class="btn btn-secondary btn-ico mt-3 mt-md-0">
<i class="ri-arrow-go-back-line" aria-hidden="true"></i>
<span>Réinitialiser les filtres ({{ filters_counter }})</span>
</a>
{% endif %}
</div>
</div>

{% if not job_applications_page %}
<div class="text-center my-3 my-md-4">
<img class="img-fluid" src="{% static 'img/illustration-siae-card-no-result.svg' %}" alt="" loading="lazy">
<p class="mb-1 mt-3">
<strong>Aucune candidature pour le moment</strong>
</p>
<p>
<i>
Vous trouverez ici vos candidatures, émises par un prescripteur
<br class="d-none d-lg-inline">
ou par vous même.
</i>
</p>
<a href="{% url 'search:employers_home' %}" class="btn btn-outline-primary btn-ico w-100 w-md-auto justify-content-center">
<i class="ri-briefcase-line ri-lg font-weight-normal"></i>
<span>Rechercher un emploi inclusif</span>
</a>
</div>
{% else %}
{% for job_application in job_applications_page %}
<div class="c-box c-box--results has-links-inside my-3 my-md-4">
{% include "apply/includes/list_card_body_jobseeker.html" %}
<div class="c-box--results__footer">
<div class="d-flex{% if job_application.pending_for_weeks >= job_application.WEEKS_BEFORE_CONSIDERED_OLD %} flex-column flex-md-row justify-content-md-between align-items-md-center{% else %} justify-content-end{% endif %}">
{% if job_application.pending_for_weeks >= job_application.WEEKS_BEFORE_CONSIDERED_OLD %}
<p class="text-warning fs-sm mb-3 mb-md-0">
<i class="ri-time-line ri-lg me-1" aria-hidden="true"></i>
En attente de réponse depuis {{ job_application.pending_for_weeks }} semaines.
</p>
{% endif %}
<a class="btn btn-outline-primary{% if job_application.pending_for_weeks >= job_application.WEEKS_BEFORE_CONSIDERED_OLD %} btn-block w-100 w-md-auto{% endif %}"
href="{% url 'apply:details_for_jobseeker' job_application_id=job_application.id %}?back_url={{ request.get_full_path|urlencode }}">
Voir ma candidature
</a>
</div>
</div>
</div>
{% endfor %}

{% include "includes/pagination.html" with page=job_applications_page %}
{% endif %}
</section>
</div>
<div class="col-12 col-md-8">{% include "apply/includes/list_job_applications.html" %}</div>
</div>
</div>
</section>
{% endblock %}

{% block script %}
{{ block.super }}
<script src='{% static "js/htmx_compat.js" %}'></script>
<script src='{% static "js/job_applications_filters.js" %}'></script>
{% endblock %}
6 changes: 5 additions & 1 deletion itou/www/apply/views/list_views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,11 @@ def list_for_job_seeker(request, template_name="apply/list_for_job_seeker.html")
"filters_form": filters_form,
"filters_counter": filters_counter,
}
return render(request, template_name, context)
return render(
request,
"apply/includes/list_job_applications.html" if request.htmx else template_name,
context,
)


@login_required
Expand Down
Loading

0 comments on commit 2a00397

Please sign in to comment.