Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX/UI : Filtrer les candidatures avec HTMX (pour les candidats) #3869

Merged
merged 1 commit into from
Apr 8, 2024
Merged

UX/UI : Filtrer les candidatures avec HTMX (pour les candidats) #3869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions itou/static/js/job_applications_filters.js
View file
Open in desktop
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();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cette ligne dégagera sous peu, dans une PR à venir. On pourra ainsi supprimer le fichier JS entièrement :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#3898

25 changes: 22 additions & 3 deletions itou/templates/apply/includes/list_job_applications.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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