add id on dropdown and datepicker for testing purpose

Author: bcivel

source/src/main/webapp/ReportingCampaignStatistics.jsp

@@ -163,6 +163,7 @@
                         <div class="mt-6">
                             <button
                               class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md h-10"
+                              id="reportingCampaingStatisticsLoadButton"
                               @click.prevent="$dispatch('load-stats')">
                               Load
                             </button>

source/src/main/webapp/include/templates/datepicker.html

@@ -4,6 +4,7 @@
         <!-- Bouton principal -->
         <button type="button"
                 @click="toggle()"
+                :id="id + '-mainbutton'"
                 class="flex h-10 items-center justify-between w-full rounded-md border px-3 py-2 text-sm
                    dark:bg-slate-800 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700
                    bg-white border-slate-300 text-slate-900 hover:bg-slate-100 transition-all">
@@ -23,17 +24,17 @@
 
             <!-- Tabs en haut -->
             <div class="w-full flex bg-slate-200 dark:bg-slate-700 p-1 rounded-lg shadow-sm mb-8 h-10">
-                <button type="button" @click="goToTab('years')" class="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md transition-colors duration-200" :class="activeTab==='years' ? 'bg-slate-50 font-semibold dark:bg-slate-900' : 'bg-slate-200 dark:bg-slate-700 text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'">Année</button>
-                <button type="button" @click="goToTab('months')" class="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md transition-colors duration-200" :class="activeTab==='months' ? 'bg-slate-50 font-semibold dark:bg-slate-900' : 'bg-slate-200 dark:bg-slate-700 text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'">Mois</button>
-                <button type="button" @click="goToTab('days')" class="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md transition-colors duration-200" :class="activeTab==='days' ? 'bg-slate-50 font-semibold dark:bg-slate-900' : 'bg-slate-200 dark:bg-slate-700 text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'">Jour</button>
-                <button type="button" @click="goToTab('hours')" class="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md transition-colors duration-200" :class="activeTab==='hours' ? 'bg-slate-50 font-semibold dark:bg-slate-900' : 'bg-slate-200 dark:bg-slate-700 text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'">Heure</button>
+                <button type="button" :id="parent.id + '-years'" @click="goToTab('years')" class="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md transition-colors duration-200" :class="activeTab==='years' ? 'bg-slate-50 font-semibold dark:bg-slate-900' : 'bg-slate-200 dark:bg-slate-700 text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'">Année</button>
+                <button type="button" :id="parent.id + '-months'" @click="goToTab('months')" class="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md transition-colors duration-200" :class="activeTab==='months' ? 'bg-slate-50 font-semibold dark:bg-slate-900' : 'bg-slate-200 dark:bg-slate-700 text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'">Mois</button>
+                <button type="button" :id="parent.id + '-days'" @click="goToTab('days')" class="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md transition-colors duration-200" :class="activeTab==='days' ? 'bg-slate-50 font-semibold dark:bg-slate-900' : 'bg-slate-200 dark:bg-slate-700 text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'">Jour</button>
+                <button type="button" :id="parent.id + '-hours'" @click="goToTab('hours')" class="flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md transition-colors duration-200" :class="activeTab==='hours' ? 'bg-slate-50 font-semibold dark:bg-slate-900' : 'bg-slate-200 dark:bg-slate-700 text-slate-700 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white'">Heure</button>
             </div>
 
             <!-- Header avec navigation < > -->
             <div class="flex items-center justify-between mb-2">
-                <button @click="previous()" class="p-2 hover:bg-gray-100 rounded-lg">&lt;</button>
+                <button :id="parent.id + '-previous'" @click="previous()" class="p-2 hover:bg-gray-100 rounded-lg">&lt;</button>
                 <div class="font-bold" x-text="headerText"></div>
-                <button @click="next()" class="p-2 hover:bg-gray-100 rounded-lg">&gt;</button>
+                <button :id="parent.id + '-next'" @click="next()" class="p-2 hover:bg-gray-100 rounded-lg">&gt;</button>
             </div>
 
             <!-- Contenu principal selon tab -->
@@ -57,6 +58,7 @@
                     <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 w-full max-w-[500px]">
                         <template x-for="(month, index) in monthNames" :key="index">
                             <button type="button"
+                                    :id="parent.id + '-month-' + index"
                                     @click.stop="selectedMonth = index; goToTab('days')"
                                     :class="{'bg-blue-500 text-white': index===selectedMonth, 'hover:bg-gray-100': index!==selectedMonth}"
                                     class="aspect-square flex items-center justify-center rounded-lg text-sm transition"
@@ -79,6 +81,7 @@
                         <div class="grid grid-cols-7 gap-1">
                             <template x-for="day in calendarDays" :key="day.day+'-'+day.isCurrentMonth">
                                 <button type="button"
+                                        :id="parent.id + '-day-' + day.day+'-'+day.isCurrentMonth"
                                         @click="selectDate(day)"
                                         x-text="day.day"
                                         :class="{
@@ -115,6 +118,7 @@
 <script>
     function dateTimePicker(config = {}) {
         return {
+            id: config.id || 'datepicker',
             open: false,
             model: config.model,
             modelField: config.modelField,

source/src/main/webapp/include/templates/selectMultipleDropdown.html

@@ -17,12 +17,14 @@
       <div class="flex gap-1 items-center" @click.stop>
         <!-- Select all items -->
         <button @click="selectAll()" x-show="open" type="button"
+                :id="id + '-all'"
                 class="text-[10px] px-2 py-0.5 bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 rounded">
           <span x-text="$store.labels.getLabel('common','all')">All</span>
         </button>
 
         <!-- Clear all selections -->
         <button @click="clearAll()" x-show="open" type="button"
+                :id="id + '-none'"
                 class="text-[10px] px-2 py-0.5 bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 rounded">
           <span x-text="$store.labels.getLabel('common','none')">None</span>
         </button>
@@ -32,19 +34,20 @@
     <!-- Dropdown content, teleported to <body> to avoid overflow clipping -->
     <template x-teleport="body">
       <div x-show="open"
-           @click.outside="open = false"
            x-transition
            class="absolute rounded-md border shadow-lg z-50
                   dark:bg-slate-800 dark:border-slate-600 dark:text-slate-300
                   bg-white border-slate-300 text-slate-900"
-           :style="{ top: `${top}px`, left: `${left}px`, minWidth: `${width}px` }">
+           :style="{ top: `${top}px`, left: `${left}px`, minWidth: `${width}px` }"
+           :id="id + '-dropdown'">
 
         <div class="bg-white dark:bg-slate-800 max-h-64 overflow-hidden rounded-md dark:border-slate-600">
 
           <!-- Search bar -->
-          <div class="p-2 border-b dark:border-slate-700">
-            <input type="text" x-model="search" :placeholder="$store.labels.getLabel('common','search')"
-                   class="w-full text-sm border rounded px-2 py-1 dark:bg-slate-700 dark:border-slate-600">
+          <div class="p-2 border-b dark:border-slate-700 border-slate-300">
+            <input type="text" x-model="search" :placeholder="$store.labels.getLabel('common','search')" :id="id + '-search'"
+                   class="w-full text-sm border rounded px-2 py-1 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700
+                                                bg-white border-slate-300 text-slate-900 hover:bg-slate-100">
           </div>
 
           <!-- Selectable list of items -->
@@ -102,7 +105,7 @@
           this.$el.appendChild(tpl);
 
           // Load dropdown items using the provided loader function
-          this.items = this.loader();
+          this.items = await this.loader();
 
           // Set preselected values (if any)
           if (this.preselected.length) {
@@ -114,7 +117,16 @@
 
           // Close dropdown when clicking outside of it
           document.addEventListener('click', e => {
-            if (this.open && !this.$el.contains(e.target)) this.open = false;
+            const dropdown = document.getElementById(this.id + '-dropdown');
+
+            if (
+                    this.open &&
+                    !this.$el.contains(e.target) &&
+                    dropdown &&
+                    !dropdown.contains(e.target)
+            ) {
+              this.open = false;
+            }
           });
 
           // Listen to external refresh event for dynamic updates