[BO] Remplacement composant de sélection multiple

assets/scripts/vanilla/controllers/form_visite.js

@@ -98,7 +98,7 @@ function histoCheckVisiteForms (formType) {
         }
 
         if (isVisiteDone) {
-          const selectConcludeProcedure = visiteForm.querySelector('select[name="visite-' + formType + '[concludeProcedure][]"]')
+          const selectConcludeProcedure = visiteForm.querySelector('input[name="visite-' + formType + '[concludeProcedure][]"]')
           if (!selectConcludeProcedure || selectConcludeProcedure.value === '') {
             selectConcludeProcedureError.classList.remove('fr-hidden')
             stopSubmit = true

assets/scripts/vanilla/services/component_search_checkbox.js

@@ -46,6 +46,9 @@ document.querySelectorAll('.search-checkbox-container')?.forEach(element => {
       searchCheckboxTriggerChange(element, initialValues)
     }
   })
+  element.addEventListener('click', function (event) {
+    event.stopPropagation()
+  })
   // reorder on uncheck
   checkboxesContainer.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
     checkbox.addEventListener('change', function () {

src/Entity/Enum/Qualification.php

@@ -2,8 +2,12 @@
 
 namespace App\Entity\Enum;
 
+use App\Entity\Behaviour\EnumTrait;
+
 enum Qualification: string
 {
+    use EnumTrait;
+
     case ACCOMPAGNEMENT_JURIDIQUE = 'ACCOMPAGNEMENT_JURIDIQUE';
     case ACCOMPAGNEMENT_SOCIAL = 'ACCOMPAGNEMENT_SOCIAL';
     case ACCOMPAGNEMENT_TRAVAUX = 'ACCOMPAGNEMENT_TRAVAUX';
@@ -25,11 +29,6 @@ enum Qualification: string
     case DANGER = 'DANGER';
     case SUROCCUPATION = 'SUROCCUPATION';
 
-    public function label(): string
-    {
-        return self::getLabelList()[$this->name];
-    }
-
     public static function getLabelList(): array
     {
         return [
@@ -56,20 +55,6 @@ public static function getLabelList(): array
         ];
     }
 
-    public static function fromLabel(string $label): self
-    {
-        $key = self::getKeyFromLabel($label);
-
-        return self::from($key);
-    }
-
-    public static function tryFromLabel(string $label): ?self
-    {
-        $key = self::getKeyFromLabel($label);
-
-        return self::tryFrom($key);
-    }
-
     private static function getKeyFromLabel(string $label): string|int|false
     {
         $label = trim($label);

src/Form/PartnerType.php

@@ -9,6 +9,7 @@
 use App\Entity\Territory;
 use App\Entity\User;
 use App\Entity\Zone;
+use App\Form\Type\SearchCheckboxEnumType;
 use App\Form\Type\SearchCheckboxType;
 use App\Manager\CommuneManager;
 use App\Repository\TerritoryRepository;
@@ -99,7 +100,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 ],
                 'disabled' => !$this->isAdminTerritory,
             ])
-            ->add('competence', EnumType::class, [
+            ->add('competence', SearchCheckboxEnumType::class, [
                 'class' => Qualification::class,
                 'choice_filter' => ChoiceList::filter(
                     $this,
@@ -111,15 +112,11 @@ function ($choice) {
                 'choice_label' => function ($choice) {
                     return $choice->label();
                 },
-                'row_attr' => [
-                    'class' => 'fr-select-group',
-                ],
-                'placeholder' => 'Sélectionner une ou plusieurs compétences',
+                'label' => 'Compétences (facultatif)',
+                'noselectionlabel' => 'Sélectionner une ou plusieurs compétences',
+                'nochoiceslabel' => 'Aucune compétence disponible',
                 'multiple' => true,
                 'expanded' => false,
-                'attr' => [
-                    'class' => 'fr-select',
-                ],
                 'help' => 'Choisissez une ou plusieurs compétences parmi la liste ci-dessous.',
                 'help_attr' => [
                     'class' => 'fr-hint-text',

src/Form/Type/SearchCheckboxEnumType.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\EnumType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class SearchCheckboxEnumType extends AbstractType
+{
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'expanded' => true,
+            'multiple' => true,
+            'attr' => ['class' => 'search-checkbox'],
+            'noselectionlabel' => '',
+            'nochoiceslabel' => '',
+        ]);
+    }
+
+    public function getParent(): string
+    {
+        return EnumType::class;
+    }
+
+    public function buildView(FormView $view, FormInterface $form, array $options): void
+    {
+        $view->vars['noselectionlabel'] = $options['noselectionlabel'];
+        $view->vars['nochoiceslabel'] = $options['nochoiceslabel'];
+    }
+}

templates/back/partner/_form.html.twig

@@ -41,11 +41,9 @@
 				</div>
 			</div>
 			<div class="fr-fieldset__element">
-				<div class="fr-select-group">
-					<label for="{{ form.competence.vars.id }}" class="fr-label">Compétences (facultatif)</label>
-					{{ form_widget(form.competence) }}
-					<span class="fr-hint-text">Maintenez la touche CTRL enfoncée pour sélectionner plusieurs compétences.</span>
-				</div>
+				{% if form.competence is defined %}
+					{{ form_row(form.competence) }}
+				{% endif %}
 			</div>
 		</fieldset>
 	</div>

templates/back/signalement/view/visites/visites-form-confirm-fields.html.twig

@@ -47,22 +47,29 @@
             <label for="visite-{{ formType }}-{{ intervention is defined ? intervention.id : '' }}-proprietaire-present-0">Non</label>
         </div>
     </fieldset>
-    <fieldset id="fieldset-conclude-procedure" class="fr-fieldset fr-fieldset--inline fr-mb-5v fr-hidden">
+    <fieldset id="fieldset-conclude-procedure" class="fr-fieldset fr-fieldset--inline fr-mb-5v fr-w-100 fr-hidden">
         <legend class="fr-fieldset__legend fr-text--regular required">
             Quelle est la conclusion de la visite ?
         </legend>
         <p id="signalement-confirm-visite-procedure-error" class="fr-error-text fr-hidden fr-my-3v">
             Veuillez préciser la conclusion de la visite.
         </p>
-        <select name="visite-{{ formType }}[concludeProcedure][]" class="fr-select" multiple="multiple">
-            {% set listProceduresTypes = enum('\\App\\Entity\\Enum\\ProcedureType') %}
-            {% for type in listProceduresTypes.cases() %}
-                <option value="{{ type.value }}">{{ type.label() }}</option>
-            {% endfor %}
-        </select>
-        <p class="fr-text--sm fr-pt-1v">
-            Maintenez la touche CTRL enfoncée pour sélectionner plusieurs motifs.
-        </p>
+        <div class="search-checkbox-container fr-input-group fr-w-100">
+            <input id="visite-{{ formType }}[concludeProcedure]_input" type="text" placeholder="Sélectionner une ou plusieurs conclusions" class="fr-input">
+            <div class="search-checkbox" class="fr-hidden">
+                {% set listProceduresTypes = enum('\\App\\Entity\\Enum\\ProcedureType') %}
+                {% for type in listProceduresTypes.cases() %}
+                <div class="fr-fieldset__element topped">
+                    <div class="fr-checkbox-group">
+                        <input name="visite-{{ formType }}[concludeProcedure][]" id="visite-{{ formType }}-{{ intervention is defined ? intervention.id : '' }}-checkboxes-{{ type.value }}" type="checkbox" value="{{ type.value }}">
+                        <label class="fr-label" for="visite-{{ formType }}-{{ intervention is defined ? intervention.id : '' }}-checkboxes-{{ type.value }}">
+                            {{ type.label() }}
+                        </label>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
     </fieldset>
 {% endif %}
 

templates/form/dsfr_theme.html.twig

@@ -108,6 +108,7 @@
     {{ block('attributes') }}
 {% endblock button_attributes %}
 
+{# custom type #}
 {% block choice_widget_expanded %}
     <div {{ block('widget_container_attributes') }}>
     {% if not form|length and nochoiceslabel is defined %}
@@ -125,16 +126,52 @@
     </div>
 {% endblock choice_widget_expanded %}
 
-{# custom type #}
 {% block search_checkbox_row %}
     <div class="search-checkbox-container fr-input-group {% if errors|length > 0 %}fr-select-group--error{% endif %}">   
         <div class="fr-input-group fr-mb-0">
             {% if label is not same as(false) %}
-                <label for="{{ id }}" class="fr-label">{{ label }}</label>
+                <label for="{{ id }}_input" class="fr-label">{{ label }}</label>
             {% endif %}
-            <input id="{{ id }}" type="text" placeholder="{{ noselectionlabel }}" class="fr-input">
+            <input id="{{ id }}_input" type="text" placeholder="{{ noselectionlabel }}" class="fr-input">
         </div>
         {{ block('choice_widget_expanded') }}
         {{ block('form_errors') }}
     </div>
+{% endblock %}
+
+{% block choice_enum_widget_expanded %}
+    <div {{ block('widget_container_attributes') }}>
+    {% if not form.vars|length and nochoiceslabel is defined %}
+        {{ nochoiceslabel }}
+    {% else %}
+        {% for child in form.vars.choices %}
+            <div class="fr-fieldset__element">
+                <div class="fr-checkbox-group">
+                    <input name="{{form.vars.full_name}}" id="checkboxes-{{child.value}}"
+                        type="checkbox" value="{{child.value}}"
+                        {% if child.value in form.vars.value %}
+                        checked="checked"
+                        {% endif %}
+                        >
+                    <label class="fr-label" for="checkboxes-{{child.value}}">
+                        {{child.label}}
+                    </label>
+                </div>
+            </div>
+        {% endfor %}
+    {% endif %}
+    </div>
+{% endblock choice_enum_widget_expanded %}
+
+{% block search_checkbox_enum_row %}
+    <div class="search-checkbox-container fr-input-group {% if errors|length > 0 %}fr-select-group--error{% endif %}">   
+        <div class="fr-input-group fr-mb-0">
+            {% if label is not same as(false) %}
+                <label for="{{ id }}_input" class="fr-label">{{ label }}</label>
+            {% endif %}
+            <input id="{{ id }}_input" type="text" placeholder="{{ noselectionlabel }}" class="fr-input">
+        </div>
+        {{ block('choice_enum_widget_expanded') }}
+        {{ block('form_errors') }}
+    </div>
 {% endblock %}