From f0d7d33653392d8e7e9f47c58428bb022fa8b04d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Reuiller?= <sebastien@reuiller.email>
Date: Tue, 15 Oct 2024 17:50:05 +0200
Subject: [PATCH] quick fixes tender list

---
 .../tenders/siae_interested_list.html         | 273 +++++++++---------
 1 file changed, 142 insertions(+), 131 deletions(-)

diff --git a/lemarche/templates/tenders/siae_interested_list.html b/lemarche/templates/tenders/siae_interested_list.html
index b4eaea17a..2ce77008c 100644
--- a/lemarche/templates/tenders/siae_interested_list.html
+++ b/lemarche/templates/tenders/siae_interested_list.html
@@ -1,152 +1,163 @@
 {% extends BASE_TEMPLATE %}
 {% load dsfr_tags static %}
-
-{% block page_title %}Prestataires ciblés & intéressés par mon besoin{{ block.super }}{% endblock page_title %}
-
+{% block page_title %}
+    Prestataires ciblés & intéressés par mon besoin{{ block.super }}
+{% endblock page_title %}
 {% block breadcrumb %}
     {% dsfr_breadcrumb %}
 {% endblock breadcrumb %}
-
 {% block content %}
-<section>
-    <div class="fr-container">
-        <div class="fr-grid-row fr-mb-12v">
-            <div class="fr-col-12">
-                <div class="fr-card">
-                    <div class="fr-card__body">
-                        <div class="fr-card__content">
-                            <form method="get" role="search" id="filter-search-form">
-                                {% if form.non_field_errors %}
-                                    <section class="fr-my-4v fr-input-group fr-input-group--error">
-                                        {{ form.non_field_errors }}
-                                    </section>
-                                {% endif %}
-                                <div class="fr-grid-row fr-grid-row--gutters">
-                                    <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
-                                        <div class="form-group">
-                                            <label for="id_locations">{{ form.locations.label }}</label>
-                                            <div id="dir_form_locations" data-input-name="{{ form.locations.name }}"></div>
-                                            <div id="locations-selected" class="mt-2"></div>
-                                            {{ current_locations|json_script:"current-locations" }}
+    <section>
+        <div class="fr-container">
+            <div class="fr-grid-row fr-mb-12v">
+                <div class="fr-col-12">
+                    <div class="fr-card">
+                        <div class="fr-card__body">
+                            <div class="fr-card__content">
+                                <form method="get" role="search" id="filter-search-form">
+                                    {% if form.non_field_errors %}
+                                        <section class="fr-my-4v fr-input-group fr-input-group--error">
+                                            {{ form.non_field_errors }}
+                                        </section>
+                                    {% endif %}
+                                    <div class="fr-grid-row fr-grid-row--gutters">
+                                        <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
+                                            <div class="form-group">
+                                                <label for="id_locations">{{ form.locations.label }}</label>
+                                                <div id="dir_form_locations" data-input-name="{{ form.locations.name }}"></div>
+                                                <div id="locations-selected" class="mt-2"></div>
+                                                {{ current_locations|json_script:"current-locations" }}
+                                            </div>
+                                        </div>
+                                        <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">{% dsfr_form_field form.kind %}</div>
+                                        <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">{% dsfr_form_field form.territory %}</div>
+                                        <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">{% dsfr_form_field form.employees %}</div>
+                                        <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">{% dsfr_form_field form.ca %}</div>
+                                        <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
+                                            <div class="fr-mb-2v fr-hidden fr-unhidden-md">&nbsp;</div>
+                                            <button id="text-search-submit"
+                                                    class="fr-btn fr-btn--icon-right fr-icon-search-line"
+                                                    type="submit">Filtrer</button>
                                         </div>
                                     </div>
-                                    <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
-                                        {% dsfr_form_field form.kind %}
-                                    </div>
-                                    <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
-                                        {% dsfr_form_field form.territory %}
-                                    </div>
-                                    <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
-                                        {% dsfr_form_field form.employees %}
-                                    </div>
-                                    <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
-                                        {% dsfr_form_field form.ca %}
-                                    </div>
-                                    <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
-                                        <div class="fr-mb-2v fr-hidden fr-unhidden-md">&nbsp;</div>
-                                        <button id="text-search-submit" class="fr-btn fr-btn--icon-right fr-icon-search-line" type="submit">
-                                            Filtrer
-                                        </button>
-                                    </div>
-                                </div>
-                            </form>
+                                </form>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-
-        {% block htmx %}
-        <div id="tenderSiaeList">
-            <div class="fr-grid-row fr-grid-row--gutters fr-mb-8v">
-                <div class="fr-col-12">
-                    <div class="fr-tabs">
-                        <ul class="fr-tabs__list" role="tablist" aria-label="Filtre Status">
-                            {% url 'tenders:detail-siae-list' slug=tender.slug as TENDER_SIAE_LIST_URL %}
-                            {% url 'tenders:detail-siae-list' slug=tender.slug status="VIEWED" as TENDER_SIAE_DETAIL_CONTACT_VIEW_LIST_URL %}
-                            {% url 'tenders:detail-siae-list' slug=tender.slug status="INTERESTED" as TENDER_SIAE_DETAIL_CONTACT_CLICK_LIST_URL %}
-                            {% url 'tenders:detail-siae-list' slug=tender.slug status="COCONTRACTED" as TENDER_SIAE_DETAIL_CONTACT_COCONTRACTED_LIST_URL %}
-
-                            <li role="presentation">
-                                <a role="button" hx-push-url="true" hx-target="#tenderSiaeList" hx-swap="outerHTML" class="fr-tabs__tab"
-                                    hx-get="{{ TENDER_SIAE_LIST_URL }}?{{ current_search_query }}"
-                                    href="{{ TENDER_SIAE_LIST_URL }}?{{ current_search_query }}"
-                                    aria-controls="tender_siae_list_panel_"
-                                    aria-selected="{% if request.path == TENDER_SIAE_LIST_URL %}true{% else %}false{% endif %}">
-                                    Prestataires ciblés
-                                </a>
-                            </li>
-                            <li role="presentation">
-                                <a role="button" hx-push-url="true" hx-target="#tenderSiaeList" hx-swap="outerHTML" class="fr-tabs__tab"
-                                    hx-get="{{ TENDER_SIAE_DETAIL_CONTACT_VIEW_LIST_URL }}?{{ current_search_query }}"
-                                    href="{{ TENDER_SIAE_DETAIL_CONTACT_VIEW_LIST_URL }}?{{ current_search_query }}"
-                                    aria-controls="tender_siae_list_panel_VIEWED"
-                                    aria-selected="{% if request.path == TENDER_SIAE_DETAIL_CONTACT_VIEW_LIST_URL %}true{% else %}false{% endif %}">
-                                    Prestataires ciblés
-                                </a>
-                            </li>
-                            <li role="presentation">
-                                <a role="button" hx-push-url="true" hx-target="#tenderSiaeList" hx-swap="outerHTML" class="fr-tabs__tab" 
-                                    hx-get="{{ TENDER_SIAE_DETAIL_CONTACT_CLICK_LIST_URL }}?{{ current_search_query }}"
-                                    href="{{ TENDER_SIAE_DETAIL_CONTACT_CLICK_LIST_URL }}?{{ current_search_query }}"
-                                    aria-controls="tender_siae_list_panel_INTERESTED"
-                                    aria-selected="{% if request.path == TENDER_SIAE_DETAIL_CONTACT_CLICK_LIST_URL %}true{% else %}false{% endif %}">
-                                    Prestataires intéressés
-                                </a>
-                            </li>
-                            <li role="presentation">
-                                <a role="button" hx-push-url="true" hx-target="#tenderSiaeList" hx-swap="outerHTML" class="fr-tabs__tab"
-                                    hx-get="{{ TENDER_SIAE_DETAIL_CONTACT_COCONTRACTED_LIST_URL }}?{{ current_search_query }}"
-                                    href="{{ TENDER_SIAE_DETAIL_CONTACT_COCONTRACTED_LIST_URL }}?{{ current_search_query }}"
-                                    aria-controls="tender_siae_list_panel_COCONTRACTED"
-                                    aria-selected="{% if request.path == TENDER_SIAE_DETAIL_CONTACT_COCONTRACTED_LIST_URL %}true{% else %}false{% endif %}">
-                                    Prestataires ouverts à la co-traitance
-                                </a>
-                            </li>
-                        </ul>
-                        <div id="tender_siae_list_panel_{{ status }}" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" tabindex="0">
-                            <div class="fr-grid-row fr-grid-row--gutters fr-mb-4v">
-                                <div class="fr-col-12 fr-col-lg-6">
-                                    <h1>{{ siaes.count }} prestataire{{ siaes.count|pluralize }}</h1>
-                                </div>
-                                <div class="fr-col-12 fr-col-lg-6">
-                                    <ul class="fr-btns-group fr-btns-group--inline-md fr-btns-group--icon-left">
-                                        <li>
-                                            <a href="{% url 'siae:search_results_download' %}?tender={{ tender.slug }}&tendersiae_status={{ status|default:"" }}&{{ current_search_query }}&format=xls" id="tender-siae-interested-export-xls" class="fr-btn fr-btn--tertiary fr-icon-download-fill fr-btn--icon-left">
-                                                Télécharger la liste (.xls) 
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a href="{% url 'siae:search_results_download' %}?tender={{ tender.slug }}&tendersiae_status={{ status|default:"" }}&{{ current_search_query }}&format=csv" id="tender-siae-interested-export-csv" class="fr-btn fr-btn--tertiary fr-icon-download-fill fr-btn--icon-left">
-                                                Télécharger la liste (.csv)
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                            <div class="fr-grid-row fr-grid-row--gutters">
-                                {% for siae in siaes %}
-                                    <div class="fr-col-12">
-                                        {% include "siaes/_card_tender.html" with siae=siae %}
+            {% block htmx %}
+                <div id="tenderSiaeList">
+                    <div class="fr-grid-row fr-grid-row--gutters fr-mb-8v">
+                        <div class="fr-col-12">
+                            <div class="fr-tabs">
+                                <ul class="fr-tabs__list" role="tablist" aria-label="Filtre Status">
+                                    {% url 'tenders:detail-siae-list' slug=tender.slug as TENDER_SIAE_LIST_URL %}
+                                    {% url 'tenders:detail-siae-list' slug=tender.slug status="VIEWED" as TENDER_SIAE_DETAIL_CONTACT_VIEW_LIST_URL %}
+                                    {% url 'tenders:detail-siae-list' slug=tender.slug status="INTERESTED" as TENDER_SIAE_DETAIL_CONTACT_CLICK_LIST_URL %}
+                                    {% url 'tenders:detail-siae-list' slug=tender.slug status="COCONTRACTED" as TENDER_SIAE_DETAIL_CONTACT_COCONTRACTED_LIST_URL %}
+                                    <li role="presentation">
+                                        <a role="button"
+                                           hx-push-url="true"
+                                           hx-target="#tenderSiaeList"
+                                           hx-swap="outerHTML"
+                                           class="fr-tabs__tab"
+                                           hx-get="{{ TENDER_SIAE_LIST_URL }}?{{ current_search_query }}"
+                                           href="{{ TENDER_SIAE_LIST_URL }}?{{ current_search_query }}"
+                                           aria-controls="tender_siae_list_panel_None"
+                                           aria-selected="{% if request.path == TENDER_SIAE_LIST_URL %}true{% else %}false{% endif %}">
+                                            Prestataires ciblés
+                                        </a>
+                                    </li>
+                                    <li role="presentation">
+                                        <a role="button"
+                                           hx-push-url="true"
+                                           hx-target="#tenderSiaeList"
+                                           hx-swap="outerHTML"
+                                           class="fr-tabs__tab"
+                                           hx-get="{{ TENDER_SIAE_DETAIL_CONTACT_VIEW_LIST_URL }}?{{ current_search_query }}"
+                                           href="{{ TENDER_SIAE_DETAIL_CONTACT_VIEW_LIST_URL }}?{{ current_search_query }}"
+                                           aria-controls="tender_siae_list_panel_VIEWED"
+                                           aria-selected="{% if request.path == TENDER_SIAE_DETAIL_CONTACT_VIEW_LIST_URL %}true{% else %}false{% endif %}">
+                                            Prestataires qui ont vu
+                                        </a>
+                                    </li>
+                                    <li role="presentation">
+                                        <a role="button"
+                                           hx-push-url="true"
+                                           hx-target="#tenderSiaeList"
+                                           hx-swap="outerHTML"
+                                           class="fr-tabs__tab"
+                                           hx-get="{{ TENDER_SIAE_DETAIL_CONTACT_CLICK_LIST_URL }}?{{ current_search_query }}"
+                                           href="{{ TENDER_SIAE_DETAIL_CONTACT_CLICK_LIST_URL }}?{{ current_search_query }}"
+                                           aria-controls="tender_siae_list_panel_INTERESTED"
+                                           aria-selected="{% if request.path == TENDER_SIAE_DETAIL_CONTACT_CLICK_LIST_URL %}true{% else %}false{% endif %}">
+                                            Prestataires intéressés
+                                        </a>
+                                    </li>
+                                    <li role="presentation">
+                                        <a role="button"
+                                           hx-push-url="true"
+                                           hx-target="#tenderSiaeList"
+                                           hx-swap="outerHTML"
+                                           class="fr-tabs__tab"
+                                           hx-get="{{ TENDER_SIAE_DETAIL_CONTACT_COCONTRACTED_LIST_URL }}?{{ current_search_query }}"
+                                           href="{{ TENDER_SIAE_DETAIL_CONTACT_COCONTRACTED_LIST_URL }}?{{ current_search_query }}"
+                                           aria-controls="tender_siae_list_panel_COCONTRACTED"
+                                           aria-selected="{% if request.path == TENDER_SIAE_DETAIL_CONTACT_COCONTRACTED_LIST_URL %}true{% else %}false{% endif %}">
+                                            Prestataires ouverts à la co-traitance
+                                        </a>
+                                    </li>
+                                </ul>
+                                <div id="tender_siae_list_panel_{{ status }}"
+                                     class="fr-tabs__panel fr-tabs__panel--selected"
+                                     role="tabpanel"
+                                     tabindex="0">
+                                    <div class="fr-grid-row fr-grid-row--gutters fr-mb-4v">
+                                        <div class="fr-col-12 fr-col-lg-6">
+                                            <h1>{{ siaes.count }} prestataire{{ siaes.count|pluralize }}</h1>
+                                        </div>
+                                        <div class="fr-col-12 fr-col-lg-6">
+                                            <ul class="fr-btns-group fr-btns-group--inline-md fr-btns-group--icon-left">
+                                                <li>
+                                                    <a href="{% url 'siae:search_results_download' %}?tender={{ tender.slug }}&tendersiae_status={{ status|default:"" }}&{{ current_search_query }}&format=xls"
+                                                       id="tender-siae-interested-export-xls"
+                                                       class="fr-btn fr-btn--tertiary fr-icon-download-fill fr-btn--icon-left">
+                                                        Télécharger la liste (.xls)
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a href="{% url 'siae:search_results_download' %}?tender={{ tender.slug }}&tendersiae_status={{ status|default:"" }}&{{ current_search_query }}&format=csv"
+                                                       id="tender-siae-interested-export-csv"
+                                                       class="fr-btn fr-btn--tertiary fr-icon-download-fill fr-btn--icon-left">
+                                                        Télécharger la liste (.csv)
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div class="fr-grid-row fr-grid-row--gutters">
+                                        {% for siae in siaes %}
+                                            <div class="fr-col-12">{% include "siaes/_card_tender.html" with siae=siae %}</div>
+                                        {% endfor %}
+                                        {% include "includes/_pagination.html" %}
                                     </div>
-                                {% endfor %}
-                                {% include "includes/_pagination.html" %}
+                                </div>
                             </div>
-                        </div>                        
+                        </div>
                     </div>
                 </div>
-            </div>
+            {% endblock htmx %}
         </div>
-        {% endblock htmx %}
-    </div>
-</section>
-{% include "includes/_super_siae_arguments_badge.html" %}
-
+    </section>
+    {% include "includes/_super_siae_arguments_badge.html" %}
 {% endblock content %}
-
 {% block extra_js %}
-<script type="text/javascript" src="{% static 'js/perimeter_autocomplete_field.js' %}"></script>
-<script type="text/javascript">
+    <script type="text/javascript" src="{% static 'vendor/alpinejs@3.11.1.min.js'%}" defer></script>
+    <script type="text/javascript" src="{% static 'js/perimeter_autocomplete_field.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/multiselect.js' %}"></script>
+    
+    <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", function() {
         const LOCATION_AUTOCOMPLETE_ID = 'id_locations';
         const LOCATION_AUTOCOMPLETE_CONTAINER_SELECTOR = '#dir_form_locations';
@@ -156,5 +167,5 @@ <h1>{{ siaes.count }} prestataire{{ siaes.count|pluralize }}</h1>
         const locationsAutoComplete = new PerimetersMultiAutocomplete(LOCATION_AUTOCOMPLETE_ID, LOCATION_AUTOCOMPLETE_CONTAINER_SELECTOR, LOCATION_SELECTED_CONTAINER_SELECTOR, LOCATION_HIDDEN_INPUT_SELECTOR_PREFIX, LOCATION_CURRENT_ID);
         locationsAutoComplete.init();
     });
-</script>
+    </script>
 {% endblock extra_js %}