From ba0b379dcdf87a981db9dc7ef466bdfa5c656538 Mon Sep 17 00:00:00 2001
From: SebastienReuiller <sebastien@reuiller.email>
Date: Tue, 1 Oct 2024 11:13:21 +0200
Subject: [PATCH] =?UTF-8?q?fix(Recherche):=20Les=20champs=20multiselect=20?=
 =?UTF-8?q?ne=20doivent=20pas=20s'activer=20lorsqu'ils=20sont=20d=C3=A9sac?=
 =?UTF-8?q?tiv=C3=A9s=20(#1440)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../includes/_widget_custom_multiselect.html  | 124 +++++++++---------
 lemarche/templates/siaes/search_results.html  |  21 +--
 2 files changed, 71 insertions(+), 74 deletions(-)

diff --git a/lemarche/templates/includes/_widget_custom_multiselect.html b/lemarche/templates/includes/_widget_custom_multiselect.html
index 5154b6b17..04d5e901e 100644
--- a/lemarche/templates/includes/_widget_custom_multiselect.html
+++ b/lemarche/templates/includes/_widget_custom_multiselect.html
@@ -1,65 +1,71 @@
 {% load static %}
-<div x-data="multiselect('{{ widget.attrs.id }}')" x-init="initOptions('{{ widget.groups_json|escapejs }}', '{{ widget.options_json|escapejs }}'{% if widget.value != None %}, '{{ widget.value_json|escapejs }}'{% endif %})" class="multiselect fr-checkbox-group" {{ widget.attrs }}  @reset-all-filter.document="reset()">
-    <template x-for="value in selectedValues" :key="value">
-        <input type="hidden" :name="name" :value="value">
-    </template>
-    <div class="fr-input-group"
-         style="display: flex;
-                align-items: center;
-                margin-bottom: 0">
-        <input type="text"
-               id="{{ widget.attrs.id }}"
-               class="fr-input fr-mt-1w"
-               x-model="searchQuery"
-               placeholder="Sélectionner des options"
-               @click="openDropdown()"
-               @input="filterOptions()"
-               style="flex-grow: 1">
-    </div>
-    <div class="fr-tags-group">
-        <template x-for="(label, index) in selected" :key="index">
-            <div class="fr-tag">
-                <span x-text="label"></span>
-                <button type="button" class="fr-tag__close" @click="removeSelection(index)">&times;</button>
-            </div>
+{% if widget.attrs.disabled %}
+    <select class="fr-select" id="{{ self.id }}" name="{{ self.id }}" disabled="">
+        <option value=""></option>
+    </select>
+{% else %}
+    <div x-data="multiselect('{{ widget.attrs.id }}')" x-init="initOptions('{{ widget.groups_json|escapejs }}', '{{ widget.options_json|escapejs }}'{% if widget.value != None %}, '{{ widget.value_json|escapejs }}'{% endif %})" class="multiselect fr-checkbox-group" {{ widget.attrs }}  @reset-all-filter.document="reset()">
+        <template x-for="value in selectedValues" :key="value">
+            <input type="hidden" :name="name" :value="value">
         </template>
-    </div>
-    <div x-show="open"
-         class="fr-checkbox-list"
-         @click.outside="Alpine.store('dropdown').close()"
-         :class="{ show: open }">
-        <template x-if="groups.length > 0">
-            <template x-for="group in filteredGroups" :key="group.name">
-                <div>
-                    <template x-if="group.name">
-                        <div class="fr-checkbox-group-title">
-                            <b x-text="group.name"></b>
-                        </div>
-                    </template>
-                    <template x-for="option in group.options" :key="option.value">
-                        <div class="fr-checkbox fr-py-1w">
-                            <input type="checkbox"
-                                   :id="option.id"
-                                   :value="option.value"
-                                   :checked="selectedValues.includes(option.value)"
-                                   @change="updateSelection(option.label, option.value)">
-                            <label :for="option.id" x-text="option.label"></label>
-                        </div>
-                    </template>
+        <div class="fr-input-group"
+             style="display: flex;
+                    align-items: center;
+                    margin-bottom: 0">
+            <input type="text"
+                   id="{{ widget.attrs.id }}"
+                   class="fr-input fr-mt-1w"
+                   x-model="searchQuery"
+                   placeholder="Sélectionner des options"
+                   @click="openDropdown()"
+                   @input="filterOptions()"
+                   style="flex-grow: 1">
+        </div>
+        <div class="fr-tags-group">
+            <template x-for="(label, index) in selected" :key="index">
+                <div class="fr-tag">
+                    <span x-text="label"></span>
+                    <button type="button" class="fr-tag__close" @click="removeSelection(index)">&times;</button>
                 </div>
             </template>
-        </template>
-        <template x-if="groups.length === 0">
-            <template x-for="option in filteredOptions" :key="option.value">
-                <div class="fr-checkbox fr-py-1w">
-                    <input type="checkbox"
-                           :id="option.id"
-                           :value="option.value"
-                           :checked="selectedValues.includes(option.value)"
-                           @change="updateSelection(option.label, option.value)">
-                    <label :for="option.id" x-text="option.label"></label>
-                </div>
+        </div>
+        <div x-show="open"
+             class="fr-checkbox-list"
+             @click.outside="Alpine.store('dropdown').close()"
+             :class="{ show: open }">
+            <template x-if="groups.length > 0">
+                <template x-for="group in filteredGroups" :key="group.name">
+                    <div>
+                        <template x-if="group.name">
+                            <div class="fr-checkbox-group-title">
+                                <b x-text="group.name"></b>
+                            </div>
+                        </template>
+                        <template x-for="option in group.options" :key="option.value">
+                            <div class="fr-checkbox fr-py-1w">
+                                <input type="checkbox"
+                                       :id="option.id"
+                                       :value="option.value"
+                                       :checked="selectedValues.includes(option.value)"
+                                       @change="updateSelection(option.label, option.value)">
+                                <label :for="option.id" x-text="option.label"></label>
+                            </div>
+                        </template>
+                    </div>
+                </template>
             </template>
-        </template>
+            <template x-if="groups.length === 0">
+                <template x-for="option in filteredOptions" :key="option.value">
+                    <div class="fr-checkbox fr-py-1w">
+                        <input type="checkbox"
+                               :id="option.id"
+                               :value="option.value"
+                               :checked="selectedValues.includes(option.value)"
+                               @change="updateSelection(option.label, option.value)">
+                        <label :for="option.id" x-text="option.label"></label>
+                    </div>
+                </template>
+            </template>
+        </div>
     </div>
-</div>
+{% endif %}
diff --git a/lemarche/templates/siaes/search_results.html b/lemarche/templates/siaes/search_results.html
index 251702a62..ac0368586 100644
--- a/lemarche/templates/siaes/search_results.html
+++ b/lemarche/templates/siaes/search_results.html
@@ -63,8 +63,8 @@
                             {% endif %}
                             <div class="fr-grid-row fr-grid-row--gutters">
                                 <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
-                                    <div class="fr-input-form">
-                                        <label for="id_perimeters">{{ form.perimeters.label }}</label>
+                                    <div class="fr-input-group">
+                                        <label for="id_perimeters" class="fr-label">{{ form.perimeters.label }}</label>
                                         <div id="dir_form_perimeters" data-input-name="{{ form.perimeters.name }}"></div>
                                         <div id="perimeters-selected" class="fr-mt-2v"></div>
                                         {{ current_perimeters|json_script:"current-perimeters" }}
@@ -72,7 +72,7 @@
                                 </div>
                                 <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">{% dsfr_form_field form.sectors %}</div>
                                 <div class="fr-col-12 fr-col-md-12 fr-col-lg-4 fr-hidden fr-unhidden-lg">
-                                    <div class="fr-mt-6v">
+                                    <div class="fr-mt-8v">
                                         <ul class="fr-btns-group fr-btns-group--inline-lg fr-btns-group--icon-right">
                                             <li>
                                                 <button id="filter-submit" class="fr-btn fr-icon-search-line" type="submit">Rechercher</button>
@@ -102,18 +102,9 @@
                                     </div>
                                 </div>
                                 <div x-show="open" class="fr-grid-row fr-grid-row--gutters">
-                                    <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
-                                        <label for="{{ form.kind.id_for_label }}">{{ form.kind.label }}</label>
-                                        {{ form.kind }}
-                                    </div>
-                                    <div class="form-group fr-col-12 fr-col-md-6 fr-col-lg-3">
-                                        <label for="{{ form.presta_type.id_for_label }}">{{ form.presta_type.label }}</label>
-                                        {{ form.presta_type }}
-                                    </div>
-                                    <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
-                                        <label for="{{ form.territory.id_for_label }}">{{ form.territory.label }}</label>
-                                        {{ form.territory }}
-                                    </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.presta_type %}</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.networks %}</div>
                                     <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
                                         <div class="fr-input-group{% if form.locations.field.widget.attrs.disabled %} fr-input-group--disabled{% endif %}">