Skip to content

Commit

Permalink
Tender list: improve tender card, breadcrumbs, tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
raphodn committed Aug 1, 2024
1 parent 9f157d8 commit 786afbf
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 101 deletions.
4 changes: 2 additions & 2 deletions lemarche/templates/tenders/_closed_badge.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<p class="fr-mb-2w">
<span>
{% if tender.deadline_date_is_outdated_annotated %}
<p class="fr-badge fr-badge--sm">
{{ tender_kind_display|default:tender.get_kind_display }} clôturé{% if tender.kind == "QUOTE" %}e{% endif %}
Expand All @@ -17,4 +17,4 @@
<p class="fr-badge fr-badge--sm fr-badge--green-emeraude">Nouveau</p>
{% endif %}
{% endif %}
</p>
</span>
66 changes: 31 additions & 35 deletions lemarche/templates/tenders/_list_item_buyer.html
Original file line number Diff line number Diff line change
@@ -1,56 +1,52 @@
{% load static humanize %}

<div class="card siae-fr-card">
<div class="fr-card fr-card--horizontal fr-mb-3w">
<div class="fr-card__body">
<div class="fr-grid-row">
<div class="fr-col-md-8 with-data-url" style="border-right:1px solid;cursor:pointer;" data-url="{% url 'tenders:detail' tender.slug %}">
<p class="mb-1">
{% include "tenders/_closed_badge.html" with tender=tender %}
{% if tender.is_draft %}
<span class="badge badge-sm badge-base badge-pill badge-outline-warning float-right">
<i class="ri-draft-fill"></i>Brouillon
</span>
{% elif tender.is_pending_validation_or_validated %}
<span class="badge badge-sm badge-base badge-pill badge-outline-info float-right">
<i class="ri-loader-fill"></i>En cours de validation
</span>
{% elif tender.is_sent %}
<span class="badge badge-sm badge-base badge-pill badge-outline-success float-right">
<i class="ri-mail-send-line"></i>Envoyé
</span>
{% endif %}
</p>
<div class="fr-col-12 fr-col-md-8 with-data-url" style="border-right:1px solid;cursor:pointer;" data-url="{% url 'tenders:detail' tender.slug %}">
<div class="fr-card__content">
<div class="fr-card__start">
<ul class="fr-badges-group">
<li>
{% include "tenders/_closed_badge.html" with tender=tender %}
</li>
<li>
{% include "tenders/_status_badge.html" with tender=tender %}
</li>
</ul>
</div>

<h2 class="py-2">{{ tender.title }}</h2>
<h2 class="fr-card__title">{{ tender.title }}</h2>

<div class="fr-grid-row">
<div class="fr-col-md-4">
<i class="ri-time-line"></i>
Créé le {{ tender.created_at|date }}
<div class="fr-card__end">
<ul class="fr-tags-group">
<li>
<span class="fr-tag fr-icon-time-line fr-tag--icon-left">Créé le {{ tender.created_at|date }}</span>
</li>
{% if tender.is_sent %}
<li>
<span class="fr-tag fr-icon-time-line fr-tag--icon-left">Publié le {{ tender.first_sent_at|date }}</span>
</li>
{% endif %}
</ul>
</div>
{% if tender.is_sent %}
<div class="fr-col-md-4">
<i class="ri-time-line"></i>
Publié le {{ tender.first_sent_at|date }}
</div>
{% endif %}
</div>
</div>
<div class="fr-col-md-4 text-center my-auto">
<div class="fr-col-12 fr-col-md-4 text-center my-auto">
<hr class="d-md-none" />
{% if tender.is_sent %}
{% if tender.siae_detail_contact_click_since_last_seen_date_count_annotated %}
<span class="badge badge-base badge-pill badge-pilotage">
<p class="badge badge-base badge-pill badge-pilotage">
<i class="ri-thumb-up-line ri-xl"></i>&nbsp;{{ tender.siae_detail_contact_click_since_last_seen_date_count_annotated }} nouveau{{ tender.siae_detail_contact_click_since_last_seen_date_count_annotated|pluralize:"x" }} prestataire{{ tender.siae_detail_contact_click_since_last_seen_date_count_annotated|pluralize }} intéressé{{ tender.siae_detail_contact_click_since_last_seen_date_count_annotated|pluralize }}
</span>
</p>
{% endif %}
<div class="fr-grid-row">
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-6" style="border-right:1px solid;">
<p class="font-weight-bold mt-2">
<i class="ri-focus-2-line font-weight-light"></i>&nbsp;{{ tender.siae_email_send_count_annotated|default:0 }} prestataire{{ tender.siae_email_send_count_annotated|pluralize }} ciblé{{ tender.siae_email_send_count_annotated|pluralize }}
</p>
{% if tender.siae_email_send_count_annotated %}
<a href="{% url 'tenders:detail-siae-list' tender.slug %}" id="show-tender-siae-list-btn" class="btn btn-sm btn-primary">
<a href="{% url 'tenders:detail-siae-list' tender.slug %}" id="show-tender-siae-list-btn" class="fr-btn fr-btn--sm">
Voir
</a>
{% endif %}
Expand All @@ -60,7 +56,7 @@ <h2 class="py-2">{{ tender.title }}</h2>
<i class="ri-thumb-up-line font-weight-light"></i>&nbsp;{{ tender.siae_detail_contact_click_count_annotated|default:0 }} prestataire{{ tender.siae_detail_contact_click_count_annotated|pluralize }} intéressé{{ tender.siae_detail_contact_click_count_annotated|pluralize }}
</p>
{% if tender.siae_detail_contact_click_count_annotated %}
<a href="{% url 'tenders:detail-siae-list' tender.slug "INTERESTED" %}" id="show-tender-siae-list-btn" class="btn btn-sm btn-primary">
<a href="{% url 'tenders:detail-siae-list' tender.slug "INTERESTED" %}" id="show-tender-siae-list-btn" class="fr-btn fr-btn--sm">
Voir
</a>
{% endif %}
Expand Down
13 changes: 13 additions & 0 deletions lemarche/templates/tenders/_status_badge.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{% if tender.is_draft %}
<span class="fr-badge fr-badge--sm fr-badge--warning">
<i class="ri-draft-fill"></i>Brouillon
</span>
{% elif tender.is_pending_validation_or_validated %}
<span class="fr-badge fr-badge--sm fr-badge--info">
<i class="ri-loader-fill"></i>En cours de validation
</span>
{% elif tender.is_sent %}
<span class="fr-badge fr-badge--sm fr-badge--success">
<i class="ri-mail-send-line"></i>Envoyé
</span>
{% endif %}
114 changes: 50 additions & 64 deletions lemarche/templates/tenders/list.html
Original file line number Diff line number Diff line change
@@ -1,25 +1,12 @@
{% extends BASE_TEMPLATE %}
{% load bootstrap4 static %}
{% load bootstrap4 static dsfr_tags process_dict %}

{% block title %}{{ page_title }}{{ block.super }}{% endblock %}

{% block breadcrumbs %}
<section>
<div class="fr-container">
<div class="fr-grid-row">
<div class="fr-col-12">
<nav class="c-breadcrumb c-breadcrumb--marche" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ HOME_PAGE_PATH }}">Accueil</a></li>
<li class="breadcrumb-item"><a href="{% url 'dashboard:home' %}">Tableau de bord</a></li>
<li class="breadcrumb-item active" aria-current="page" title="{{ page_title }}">{{ page_title }}</li>
</ol>
</nav>
</div>
</div>
</div>
</section>
{% endblock %}
{% block breadcrumb %}
{% process_dict root_dir=HOME_PAGE_PATH links=breadcrumb_links current=page_title as breadcrumb_data %}
{% dsfr_breadcrumb breadcrumb_data %}
{% endblock breadcrumb %}

{% block content %}
<section>
Expand All @@ -31,8 +18,8 @@ <h1>{{ page_title }}</h1>
<!-- "buyer": can create new tenders -->
{% if user.kind != user.KIND_SIAE %}
<div class="fr-col-12 fr-col-md-auto">
<a href="{% url 'tenders:create' %}" id="tender-list-create" class="btn btn-primary">
<i class="ri-add-fill ri-lg mr-2"></i>Publier un besoin d'achat
<a href="{% url 'tenders:create' %}" id="tender-list-create" class="fr-btn fr-btn--icon-right fr-icon-add-circle-line">
Publier un besoin d'achat
</a>
</div>
{% else %}
Expand All @@ -49,65 +36,64 @@ <h1>{{ page_title }}</h1>
<div class="fr-col-12 my-5">
<!-- "buyer": display tenders which the user is the author -->
{% if user.kind != user.KIND_SIAE %}
<br />
{% block htmx %}
<div id="tendersList">
<ul role="navigation" class="nav nav-tabs" style="border-bottom:0;">
<div id="tendersList" class="fr-tabs">
<ul class="fr-tabs__list" role="tablist">
{% url 'tenders:list' as TENDERS_LIST_URL %}
{% url 'tenders:list' status=tender_constants.STATUS_DRAFT as TENDERS_DRAFT_LIST_URL %}
{% url 'tenders:list' status=tender_constants.STATUS_PUBLISHED as TENDERS_PUBLISHED_LIST_URL %}
{% url 'tenders:list' status=tender_constants.STATUS_SENT as TENDERS_SENT_LIST_URL %}

<li class="nav-item">
<a role="button" hx-push-url="true" hx-get="{{ TENDERS_LIST_URL }}"
class="nav-link{% if request.get_full_path == TENDERS_LIST_URL %} active{% endif %}"
hx-target="#tendersList" hx-swap="outerHTML">
<li role="presentation">
<button role="tab" class="fr-tabs__tab" aria-selected="{% if request.get_full_path == TENDERS_LIST_URL %}true{% else %}false{% endif %}"
hx-push-url="true" hx-get="{{ TENDERS_LIST_URL }}" hx-target="#tendersList" hx-swap="outerHTML">
Tous
</a>
</button>
</li>
<li class="nav-item">
<a role="button" hx-push-url="true" hx-get="{{ TENDERS_DRAFT_LIST_URL }}"
class="nav-link{% if request.get_full_path == TENDERS_DRAFT_LIST_URL %} active{% endif %}"
hx-target="#tendersList" hx-swap="outerHTML">
<li role="presentation">
<button role="tab" class="fr-tabs__tab" aria-selected="{% if request.get_full_path == TENDERS_DRAFT_LIST_URL %}true{% else %}false{% endif %}"
hx-push-url="true" hx-get="{{ TENDERS_DRAFT_LIST_URL }}" hx-target="#tendersList" hx-swap="outerHTML">
Brouillon
</a>
</button>
</li>
<li class="nav-item">
<a role="button" hx-push-url="true" hx-get="{{ TENDERS_PUBLISHED_LIST_URL }}"
class="nav-link{% if request.get_full_path == TENDERS_PUBLISHED_LIST_URL %} active{% endif %}"
hx-target="#tendersList" hx-swap="outerHTML">
<li role="presentation">
<button role="tab" class="fr-tabs__tab" aria-selected="{% if request.get_full_path == TENDERS_PUBLISHED_LIST_URL %}true{% else %}false{% endif %}"
hx-push-url="true" hx-get="{{ TENDERS_PUBLISHED_LIST_URL }}" hx-target="#tendersList" hx-swap="outerHTML">
En cours de validation
</a>
</button>
</li>
<li class="nav-item">
<a role="button" hx-push-url="true" hx-get="{{ TENDERS_SENT_LIST_URL }}"
class="nav-link{% if request.get_full_path == TENDERS_SENT_LIST_URL %} active{% endif %}"
hx-target="#tendersList" hx-swap="outerHTML">
<li role="presentation">
<button role="tab" class="fr-tabs__tab" aria-selected="{% if request.get_full_path == TENDERS_SENT_LIST_URL %}true{% else %}false{% endif %}"
hx-push-url="true" hx-get="{{ TENDERS_SENT_LIST_URL }}" hx-target="#tendersList" hx-swap="outerHTML">
Envoyé
</a>
</button>
</li>
</ul>
{% for tender in tenders %}
{% include "tenders/_list_item_buyer.html" with tender=tender %}
{% endfor %}
{% include "includes/_pagination.html" %}
{% if not tenders %}
<p class="text-muted my-5">
{% if request.get_full_path == TENDERS_LIST_URL %}
Publiez un besoin pour trouver des prestataires inclusifs près de chez vous.
{% endif %}
{% if request.get_full_path == TENDERS_DRAFT_LIST_URL %}
Vous n'avez aucun besoin en brouillon pour le moment.
{% endif %}
{% if request.get_full_path == TENDERS_PUBLISHED_LIST_URL %}
Vous n'avez aucun besoin en cours de validation pour le moment.
{% endif %}
{% if request.get_full_path == TENDERS_SENT_LIST_URL %}
Vous n'avez aucun besoin d'envoyé pour le moment.
<br />
Contacter notre équipe en cas de problème avec un de vos dépôts de besoins en cours de validation.
{% endif %}
</p>
{% endif %}
<div id="{{ request.resolver_match.url_name }}_panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" tabindex="0">
{% for tender in tenders %}
{% include "tenders/_list_item_buyer.html" with tender=tender %}
{% endfor %}
{% include "includes/_pagination.html" %}
{% if not tenders %}
<p class="text-muted my-5">
{% if request.get_full_path == TENDERS_LIST_URL %}
Publiez un besoin pour trouver des prestataires inclusifs près de chez vous.
{% endif %}
{% if request.get_full_path == TENDERS_DRAFT_LIST_URL %}
Vous n'avez aucun besoin en brouillon pour le moment.
{% endif %}
{% if request.get_full_path == TENDERS_PUBLISHED_LIST_URL %}
Vous n'avez aucun besoin en cours de validation pour le moment.
{% endif %}
{% if request.get_full_path == TENDERS_SENT_LIST_URL %}
Vous n'avez aucun besoin d'envoyé pour le moment.
<br />
Contacter notre équipe en cas de problème avec un de vos dépôts de besoins en cours de validation.
{% endif %}
</p>
{% endif %}
</div>
</div>
{% endblock %}
<!-- "siae": display opportunities -->
Expand Down
1 change: 1 addition & 0 deletions lemarche/www/tenders/views.py
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,7 @@ def get_context_data(self, **kwargs):
)
context["tender_constants"] = tender_constants
context["filter_form"] = self.filter_form
context["breadcrumb_links"] = [{"title": "Tableau de bord", "url": reverse_lazy("dashboard:home")}]
return context


Expand Down

0 comments on commit 786afbf

Please sign in to comment.