Merge branch 'master' into ia

bcivel · bcivel · commit fb3b49139c7b · 2026-03-18T10:34:58.000+01:00
diff --git a/source/src/main/webapp/ReportingCampaignStatistics.jsp b/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>
diff --git a/source/src/main/webapp/TestCaseList.jsp b/source/src/main/webapp/TestCaseList.jsp
@@ -49,13 +49,11 @@
                 <%@ include file="include/global/messagesArea.html"%>
                 <%@ include file="include/utils/modal-confirmation.html"%>
                 <%@ include file="include/transversalobject/TestCase.html"%>
-                <jsp:include page="include/transversal/TestCaseSimpleCreation.html"/>
                 <jsp:include page="include/transversal/TestCaseSimpleExecution.html"/>
                 <%@ include file="include/transversalobject/Application.html"%>
                 <%@ include file="include/pages/testcaselist/importTestCaseFromTestLink.html"%>
                 <jsp:include page="include/transversal/TestCaseListMassActionUpdate.html"/>
                 <jsp:include page="include/transversal/TestCaseListMassActionLabel.html"/>
-                <jsp:include page="include/transversal/TestCaseSimpleCreationImport.html"/>
                 <jsp:include page="include/templates/selectDropdown.html"/>
 
                 <h1 class="page-title-line" id="title">Test Case</h1>
diff --git a/source/src/main/webapp/include/templates/datepicker.html b/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,
diff --git a/source/src/main/webapp/include/templates/selectDropdown.html b/source/src/main/webapp/include/templates/selectDropdown.html
@@ -31,10 +31,11 @@
                 <div class="bg-white dark:bg-slate-800 max-h-64 overflow-hidden rounded">
 
                     <!-- Search -->
-                    <div class="p-2 border-b dark:border-slate-700">
+                    <div class="p-2 border-b dark:border-slate-700 border-slate-300">
                         <input x-model="search" type="text" placeholder="Search..."
                                :id="id + '-search'"
-                               class="w-full text-sm border rounded px-2 py-1 dark:bg-slate-700 dark:border-slate-600">
+                               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>
 
                     <!-- Items -->
diff --git a/source/src/main/webapp/include/templates/selectMultipleDropdown.html b/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
diff --git a/source/src/main/webapp/include/transversal/TestCaseSimpleCreation.html b/source/src/main/webapp/include/transversal/TestCaseSimpleCreation.html
@@ -19,7 +19,7 @@
          x-transition:leave="transition ease-in duration-200"
          x-transition:leave-start="opacity-100 scale-100"
          x-transition:leave-end="opacity-0 scale-95"
-         @click.away="open = false">
+         @click.away="if (!$event.target.closest('.single-select-dropdown')) open = false">
 
         <!-- HEADER -->
         <div class="flex items-center justify-between px-6 py-4 mb-8">
@@ -89,44 +89,26 @@ <h2 class="!text-lg !font-semibold !mb-0 !mt-2" x-text="$store.labels.getLabel('
 
                         <!-- Bloc SELECTION d'application existante -->
                         <div x-show="!creatingApplication" x-transition>
-                            <div class="relative" @click.away="open = false">
-
-                                <!-- Bouton dropdown -->
-                                <button type="button"
-                                        @click="open = !open"
-                                        id="editTestCaseSimpleCreationApplication"
-                                        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">
-                                    <span x-text="applicationDropdown.selectedLabel()"></span>
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2"
-                                         fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
-                                    </svg>
-                                </button>
-
-                                <!-- Liste dropdown -->
-                                <div x-show="open" x-transition
-                                     class="absolute mt-1 w-full 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 max-h-48 overflow-auto">
-                                    <template x-for="item in applicationDropdown.items" :key="item">
-                                        <div>
-                                            <button type="button"
-                                                    :id="`editTestCaseSimpleCreationApplication_${item}`"
-                                                    @click="applicationDropdown.select(item); form.application = item; nextStepIfValid('application'); open=false"
-                                                    class="w-full flex items-center gap-2 px-3 py-2 dark:hover:bg-slate-700 hover:bg-slate-100 transition-colors">
-                                                <span x-text="item"></span>
-                                            </button>
-                                        </div>
-                                    </template>
-                                </div>
+                            <div x-data="singleSelectDropdown({
+                                id: 'editTestCaseSimpleCreationApplication',
+                                loader: async () => {
+                                    try {
+                                        const r = await fetch('ReadApplication');
+                                        const d = await r.json();
+                                        return d.contentTable.map(a => a.application);
+                                    } catch (e) {
+                                        console.error('Failed to load applications:', e);
+                                        return [];
+                                    }
+                                }
+                            })"
+                                 x-modelable="selectedValue"
+                                 x-model="form.application">
                             </div>
 
-                            <!-- Bouton "Créer une nouvelle application" -->
                             <div class="mt-2">
                                 <button type="button"
-                                        @click="creatingApplication = true; form.application=''; open=false"
+                                        @click="creatingApplication = true; form.application=''"
                                         class="text-sm text-blue-600 hover:underline">
                                     + Create a new application
                                 </button>
@@ -380,10 +362,8 @@ <h2 class="!text-lg !font-semibold !mb-0 !mt-2" x-text="$store.labels.getLabel('
             environments: [],
             appTypes: [],
 
-            applicationDropdown: { items: [], selected:'', open:false, select(item){ this.selected=item; this.open=false; }, selectedLabel(){ return this.selected || '-- Select --'; } },
 
             async setDefaultTest(test){
-                await this.loadApplications();
                 await this.loadTests();
                 await this.loadInvariants();
 
@@ -395,12 +375,6 @@ <h2 class="!text-lg !font-semibold !mb-0 !mt-2" x-text="$store.labels.getLabel('
                 }
             },
 
-            async loadApplications(){
-                const resp = await fetch('ReadApplication');
-                const data = await resp.json();
-                this.applications = data.contentTable.map(c => c.application);
-                this.applicationDropdown.items = this.applications;
-            },
 
             async loadTests(){
                 const resp = await fetch('ReadTest?iSortCol_0=0&sSortDir_0=asc&sColumns=test&iDisplayLength=100');
@@ -471,7 +445,6 @@ <h2 class="!text-lg !font-semibold !mb-0 !mt-2" x-text="$store.labels.getLabel('
                     .then(respData => {
                         console.log("Create response:", respData);
 
-                        // 🔹 Tolère les 2 conventions de Cerberus : "OK" ou "success"
                         if (respData.messageType === 'success' || respData.messageType === 'OK') {
                             if (respData.test && respData.testcase) {
                                 window.location.href = `./TestCaseScript.jsp?test=${encodeURIComponent(respData.test)}&testcase=${encodeURIComponent(respData.testcase)}&oneclickcreation=true`;
@@ -490,9 +463,14 @@ <h2 class="!text-lg !font-semibold !mb-0 !mt-2" x-text="$store.labels.getLabel('
             },
 
             async init(){
-                await this.loadApplications();
                 await this.loadTests();
                 await this.loadInvariants();
+
+                this.$watch('form.application', (value) => {
+                    if (value && this.step === 0) {
+                        this.nextStepIfValid('application');
+                    }
+                });
             }
         }
     }
diff --git a/source/src/main/webapp/js/global/table-filter.js b/source/src/main/webapp/js/global/table-filter.js
@@ -511,21 +511,27 @@ function _buildColumnFilter(opts) {
         + '<line x1="10" y1="18" x2="14" y2="18"/>'
         + '</svg>';
 
+    var filterId = 'columnButtonFilter_' + index;
     var $triggerBtn = $('<span>')
-        .attr({ 'data-col-index': index, title: hasValues ? valueFiltered.join(', ') : '' })
+        .attr({ id: filterId, 'data-col-index': index, title: hasValues ? valueFiltered.join(', ') : '' })
         .addClass(
             'col-filter-trigger inline-flex items-center justify-end ml-auto cursor-pointer rounded transition-colors duration-150 ' +
             (hasValues
-                ? 'text-blue-500 dark:text-blue-400'
+                ? 'text-blue-500 dark:text-blue-400 font-bold'
                 : 'text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400')
         )
         .html(svgFunnel);
 
     // Injecter l'icône dans le th principal (à côté du label de colonne).
     // On cible le <th> de la première ligne de headers via columnVisibleIndex.
     var $th = $($('#' + tableId + '_wrapper .dataTables_scrollHeadInner table thead tr:first th')[opts.columnVisibleIndex]);
-    $th.find('.col-filter-trigger').remove(); // éviter les doublons au refresh
-    $th.append($triggerBtn);
+
+    if (!$th.find('.th-content').length) {
+        $th.wrapInner('<div class="th-content flex items-center w-full"></div>');
+    }
+
+    $th.find('.col-filter-trigger').remove();
+    $th.find('.th-content').append($triggerBtn);
 
     // filterHeader reste vide — c'est juste un spacer structurel
     $(tableCell).empty();
diff --git a/source/src/main/webapp/js/pages/ApplicationObjectList.js b/source/src/main/webapp/js/pages/ApplicationObjectList.js
