Skip to content

Commit a5737ef

Browse files
bcivelbcivel
committed
Fix creation of testfolder in testcase creation
Add id for testing purpose
1 parent 31bad79 commit a5737ef

File tree

1 file changed

+149
-33
lines changed

1 file changed

+149
-33
lines changed

‎source/src/main/webapp/include/transversalobject/TestCaseSimpleCreation.html‎

Lines changed: 149 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ <h3 class="text-xl font-semibold">Create Test Case</h3>
6262
<div class="p-4 space-y-2">
6363
<div class="font-semibold">Choose the application</div>
6464

65-
<!-- ✅ Bloc SELECTION d'application existante -->
65+
<!-- Bloc SELECTION d'application existante -->
6666
<div x-show="!creatingApplication" x-transition>
6767
<div class="relative" @click.away="open = false">
6868

@@ -108,31 +108,33 @@ <h3 class="text-xl font-semibold">Create Test Case</h3>
108108
</div>
109109
</div>
110110

111-
<!-- ✅ Bloc CREATION d'une nouvelle application -->
111+
<!-- Bloc CREATION d'une nouvelle application -->
112112
<div x-show="creatingApplication" x-transition
113113
class="space-y-2 mt-4 rounded p-4 bg-slate-50 dark:bg-slate-800"
114114
x-init="
115-
$watch('form.application', checkAllFilled);
116-
$watch('form.type', checkAllFilled);
117-
$watch('form.url', checkAllFilled);
118-
$watch('form.country', checkAllFilled);
119-
$watch('form.environment', checkAllFilled);
120-
121-
function checkAllFilled() {
122-
if(form.application && form.type && form.url && form.country && form.environment) {
123-
nextStepIfValid('application');
124-
}
125-
}
126-
">
115+
$watch('form.application', checkAllFilled);
116+
$watch('form.type', checkAllFilled);
117+
$watch('form.url', checkAllFilled);
118+
$watch('form.country', checkAllFilled);
119+
$watch('form.environment', checkAllFilled);
120+
121+
function checkAllFilled() {
122+
if(form.application && form.type && form.url && form.country && form.environment) {
123+
nextStepIfValid('application');
124+
}
125+
}
126+
">
127127
<!-- Ligne 1 : Name + URL -->
128128
<div class="flex gap-2 flex-wrap">
129129
<div class="flex-[1_1_33%] min-w-[150px]">
130130
<label>Name</label>
131-
<input type="text" x-model="form.application" class="w-full border rounded px-2 py-1 h-10">
131+
<input type="text" x-model="form.application" class="w-full border rounded px-2 py-1 h-10 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700
132+
bg-white border-slate-300 text-slate-900 hover:bg-slate-100 transition-all">
132133
</div>
133134
<div class="flex-[2_1_66%] min-w-[200px]">
134135
<label>URL</label>
135-
<input type="text" x-model="form.url" class="w-full border rounded px-2 py-1 h-10">
136+
<input type="text" x-model="form.url" class="w-full border rounded px-2 py-1 h-10 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700
137+
bg-white border-slate-300 text-slate-900 hover:bg-slate-100 transition-all">
136138
</div>
137139
</div>
138140

@@ -142,21 +144,24 @@ <h3 class="text-xl font-semibold">Create Test Case</h3>
142144
<label>Type</label>
143145
<select name="editTestCaseSimpleCreationApplicationType"
144146
x-model="form.type"
145-
class="w-full border rounded px-2 py-1 h-10">
147+
class="w-full border rounded px-2 py-1 h-10 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700
148+
bg-white border-slate-300 text-slate-900 hover:bg-slate-100 transition-all">
146149
</select>
147150
</div>
148151
<div class="flex-1 min-w-[120px]">
149152
<label>Country</label>
150153
<select name="editTestCaseSimpleCreationCountry"
151154
x-model="form.country"
152-
class="w-full border rounded px-2 py-1 h-10">
155+
class="w-full border rounded px-2 py-1 h-10 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700
156+
bg-white border-slate-300 text-slate-900 hover:bg-slate-100 transition-all">
153157
</select>
154158
</div>
155159
<div class="flex-1 min-w-[120px]">
156160
<label>Environment</label>
157161
<select name="editTestCaseSimpleCreationEnvironment"
158162
x-model="form.environment"
159-
class="w-full border rounded px-2 py-1 h-10">
163+
class="w-full border rounded px-2 py-1 h-10 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700
164+
bg-white border-slate-300 text-slate-900 hover:bg-slate-100 transition-all">
160165
</select>
161166
</div>
162167
</div>
@@ -174,29 +179,97 @@ <h3 class="text-xl font-semibold">Create Test Case</h3>
174179
</div>
175180

176181
<!-- Step 2: Description -->
177-
<div x-show="step === 1" class="border rounded p-4 space-y-2">
178-
<div class="font-semibold">Describe shortly your TestCase</div>
179-
<input type="text" id="editTestCaseSimpleCreationDescription" x-model="form.description" @keyup.enter="nextStepIfValid('description')" placeholder="As a user..." class="w-full border rounded px-2 py-1">
182+
<div x-show="step === 1" class="p-4 space-y-2">
183+
<label>Describe shortly your TestCase</label>
184+
<input type="text" id="editTestCaseSimpleCreationDescription" x-model="form.description" @keyup.enter="nextStepIfValid('description')" placeholder="As a user..."
185+
class="w-full h-10 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
186+
bg-white border-slate-300 text-slate-900 hover:bg-slate-100 transition-all">
180187
</div>
181188

182189
<!-- Step 3: Folder -->
183-
<div x-show="step === 2" class="border rounded p-4 space-y-2">
184-
<div class="font-semibold">Choose (or Create) a folder</div>
185-
<div class="flex gap-2 flex-wrap">
186-
<div class="flex-3 min-w-[150px]">
187-
<label>Test</label>
188-
<select x-model="form.testFolderId" id="editTestCaseSimpleCreationTestFolderId" @change="nextStepIfValid('testFolderId'); fetchNextTestCaseId()" class="w-full border rounded px-2 py-1">
189-
<option value="">-- Select Test Folder --</option>
190-
<template x-for="t in tests" :key="t"><option :value="t" x-text="t"></option></template>
191-
</select>
190+
<div x-show="step === 2" class="p-4 space-y-2">
191+
<div class="flex gap-2 flex-wrap items-end">
192+
<!-- Folder dropdown -->
193+
<div class="flex-1 min-w-[150px]">
194+
<label>Choose (or Create) a folder</label>
195+
<div x-data="folderDropdown({ model: form.testFolderId, items: tests })"
196+
x-effect="items = tests"
197+
class="relative w-full">
198+
199+
<!-- Bouton principal -->
200+
<button type="button"
201+
@click="open = !open"
202+
id="editTestCaseSimpleCreationTestFolder"
203+
class="flex h-10 items-center justify-between w-full rounded-md border px-3 py-2 text-sm
204+
dark:bg-slate-800 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700
205+
bg-white border-slate-300 text-slate-900 hover:bg-slate-100 transition-all">
206+
<span x-text="selectedLabel()"></span>
207+
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2"
208+
fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
209+
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
210+
</svg>
211+
</button>
212+
213+
<!-- Dropdown -->
214+
<div x-show="open"
215+
@click.away="open = false"
216+
x-transition
217+
class="absolute mt-1 w-full rounded-md border shadow-lg z-50
218+
dark:bg-slate-800 dark:border-slate-600 dark:text-slate-300
219+
bg-white border-slate-300 text-slate-900 max-h-64 overflow-hidden">
220+
221+
<!-- Barre de recherche -->
222+
<div class="p-2 border-b dark:border-slate-700">
223+
<input type="text" x-model="search" placeholder="Search or create..."
224+
id="editTestCaseSimpleCreationTestFolderSearch"
225+
class="w-full text-sm border rounded px-2 py-1 dark:bg-slate-700 dark:border-slate-600">
226+
</div>
227+
228+
<!-- Liste / création -->
229+
<div class="max-h-52 overflow-auto">
230+
231+
<!-- Résultats existants -->
232+
<template x-if="filteredItems().length > 0">
233+
<template x-for="item in filteredItems()" :key="item">
234+
<button type="button"
235+
:id="`editTestCaseSimpleCreationTestFolder${item}`"
236+
@click="select(item); form.testFolderId = item; $dispatch('folder-selected', item); $nextTick(() => fetchNextTestCaseId());"
237+
class="w-full text-left px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-700 transition">
238+
<span x-text="item"></span>
239+
</button>
240+
</template>
241+
</template>
242+
243+
<!-- Aucun résultat → proposer création -->
244+
<template x-if="filteredItems().length === 0">
245+
<button type="button"
246+
id="editTestCaseSimpleCreationTestFolderNew"
247+
@click="createNew(); form.testFolderId = selected; $nextTick(() => fetchNextTestCaseId());"
248+
class="w-full text-left px-3 py-2 text-sm italic hover:bg-slate-100 dark:hover:bg-slate-700 transition">
249+
Create "<span x-text="search"></span>"
250+
</button>
251+
</template>
252+
253+
</div>
254+
</div>
255+
</div>
192256
</div>
193-
<div class="flex-1 min-w-[100px]">
257+
258+
<!-- Test Case ID -->
259+
<div class="flex-1 min-w-[150px]">
194260
<label>Test Case ID</label>
195-
<input type="text" x-model="form.testcaseId" class="w-full border rounded px-2 py-1">
261+
<input type="text"
262+
x-model="form.testcaseId"
263+
id="editTestCaseSimpleCreationTestcaseId"
264+
class="w-full border rounded px-3 py-2 text-sm h-10
265+
dark:bg-slate-800 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700
266+
bg-white border-slate-300 text-slate-900 hover:bg-slate-100 transition-all">
196267
</div>
268+
197269
</div>
198270
</div>
199271

272+
200273
</form>
201274
</div>
202275

@@ -211,6 +284,49 @@ <h3 class="text-xl font-semibold">Create Test Case</h3>
211284
</div>
212285

213286
<script>
287+
function folderDropdown(config = {}) {
288+
return {
289+
open: false,
290+
search: '',
291+
items: config.items || [],
292+
selected: config.model ?? '',
293+
model: config.model ?? '',
294+
295+
filteredItems() {
296+
if (!Array.isArray(this.items)) return [];
297+
const q = this.search.toLowerCase();
298+
return this.items.filter(i => i.toLowerCase().includes(q));
299+
},
300+
301+
select(item) {
302+
this.selected = item;
303+
this.model = item;
304+
this.open = false;
305+
this.$dispatch('folder-selected', item);
306+
},
307+
308+
createNew() {
309+
if (!this.search.trim()) return;
310+
311+
const newItem = this.search.trim();
312+
313+
if (!Array.isArray(this.items)) {
314+
this.items = [];
315+
}
316+
317+
if (!this.items.includes(newItem)) {
318+
this.items.push(newItem);
319+
}
320+
321+
this.select(newItem);
322+
},
323+
324+
selectedLabel() {
325+
return this.selected || '-- Select Test Folder --';
326+
}
327+
}
328+
}
329+
214330
function testCaseModal() {
215331
return {
216332
open: false,

0 commit comments

Comments
 (0)