Skip to content

Commit edc73e8

Browse files
AlexisJavauxAlexisJavaux
committed
refactor(UI): Alpine modals, crbDropdown, table styling & CRUD fixes for all modules
AppService: - Refactored modal from Bootstrap to Alpine.js (x-show/x-cloak) - Replaced modal('show'/'hide') with Alpine events - Integrated crbDropdown for Type, Method, BodyType, AuthType, AuthAddTo - Fixed appendApplicationListServiceModal crash (wrong selector) - Styled tables with TestDataLib gradient headers pattern - Replaced delete confirmation with crbConfirmDelete (SweetAlert2) - Layout: Service+Type side by side, Method+FollowRedirect+BodyType on same line TestDataLib: - Refactored modal to Alpine.js with modern UI - Styled SubData table with gradient headers and SVG Add button - Bulk rename modal improvements TestCase: - Modal refactoring with Alpine.js components - Improved mass action labels and update panels - Simple creation modal enhancements ApplicationObject: - Modal refactoring with Alpine.js - List page improvements Global: - crbConfirmDelete utility (SweetAlert2) - cerberusDatatable improvements - New shared UI components and helpers
1 parent 85a83e9 commit edc73e8

18 files changed

Lines changed: 3926 additions & 2408 deletions

‎source/src/main/webapp/include/pages/testdatalib/bulkRename.html‎

Lines changed: 96 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,97 @@
1-
<!-- DataLib Bulk Rename -->
2-
<div data-backdrop="static" class="modal fade center"
3-
id="bulkRenameDataLibModal" tabindex="-1" role="dialog"
4-
aria-labelledby="bulkRenameDataLibModalLabel" aria-hidden="true">
5-
<div class="modal-dialog nomargintop nomarginbottom modal-l">
6-
<div class="modal-content">
7-
<div class="modal-header">
8-
<button type="button" class="close" data-dismiss="modal"
9-
aria-label="Close">
10-
<span aria-hidden="true">&times;</span>
11-
</button>
12-
<h4 class="modal-title" id="bulkRenameDataLibModalLabel">
13-
<span id="bulkRenameDataLibModalTitle">Bulk Rename</span>
14-
</h4>
15-
</div>
16-
<div class="modal-body">
17-
<form id="bulkRenameDataLibData" role="form">
18-
<!-- messages area-->
19-
<div id="DialogMessagesAreaEdit">
20-
<div class="alert" id="DialogMessagesAlertBulkRename"
21-
style="display: none;">
22-
<strong><span class="alert-description"
23-
id="DialogAlertDescriptionBulkRename"></span></strong>
24-
<button type="button" class="close" data-hide="alert"
25-
aria-hidden="true">
26-
<span
27-
class="glyphicon glyphicon-remove alert-right alert-close pull-right"></span>
28-
</button>
29-
</div>
30-
</div>
31-
<!-- current name and old name -->
32-
<div class="row">
33-
<div class="form-group col-xs-6">
34-
<label id="lbl_currentname" for="system" name='lbl_currentname'>Current Name JSP</label>
35-
<input id="dl_currentname" name="currentname" class="form-control"/>
36-
</div>
37-
<div class="form-group col-xs-6">
38-
<label id="lbl_newname" for="environment" name='lbl_newname'>New Name JSP</label>
39-
<input id="dl_newname" name="newname" class="form-control"/>
40-
</div>
41-
</div>
42-
</form>
43-
</div>
44-
<div class="modal-footer">
45-
<button type="button" class="btn btn-default" data-dismiss="modal" name="buttonClose">Close</button>
46-
<button type="button" id="bulkRenameValidate" class="btn btn-primary" name="bulkRename">Rename</button>
47-
</div>
48-
</div>
49-
</div>
1+
<!-- DataLib Bulk Rename - Alpine.js/Tailwind refactored -->
2+
<div
3+
x-data="{ open: false }"
4+
x-show="open"
5+
x-cloak
6+
@bulkrename-modal-open.window="open = true"
7+
@bulkrename-modal-close.window="open = false"
8+
class="crb_modal"
9+
id="bulkRenameDataLibModal">
10+
11+
<!-- Overlay -->
12+
<div class="absolute inset-0 bg-slate-900/60" @click="open = false"></div>
13+
14+
<!-- Modal Card -->
15+
<div class="relative bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-2xl flex flex-col transition-all duration-300 z-10 crb_card rounded-2xl"
16+
style="max-height: calc(100vh - 4rem); margin: 2rem 1rem; width: 520px;"
17+
x-transition:enter="transition ease-out duration-300"
18+
x-transition:enter-start="opacity-0 scale-95"
19+
x-transition:enter-end="opacity-100 scale-100"
20+
x-transition:leave="transition ease-in duration-200"
21+
x-transition:leave-start="opacity-100 scale-100"
22+
x-transition:leave-end="opacity-0 scale-95"
23+
@click.stop>
24+
25+
<!-- HEADER -->
26+
<div class="flex items-center justify-between px-6 py-3 border-b border-slate-200 dark:border-slate-700 shrink-0">
27+
<div class="flex items-center gap-3">
28+
<div class="h-10 w-10 rounded-xl bg-blue-600/10 flex items-center justify-center">
29+
<i data-lucide="replace" class="w-5 h-5 text-blue-600"></i>
30+
</div>
31+
<div>
32+
<h2 class="!text-lg !font-semibold !mb-0 !mt-0" id="bulkRenameDataLibModalLabel">
33+
<span id="bulkRenameDataLibModalTitle">Bulk Rename</span>
34+
</h2>
35+
<p class="text-xs text-slate-500 !mb-0">Rename all matching data library entries</p>
36+
</div>
37+
</div>
38+
<div class="flex items-center gap-1">
39+
<button @click="open = false; window.dispatchEvent(new CustomEvent('bulkrename-modal-close'))"
40+
class="h-8 w-8 rounded-lg flex items-center justify-center text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition">
41+
<i data-lucide="x" class="w-4 h-4"></i>
42+
</button>
43+
</div>
44+
</div>
45+
46+
<!-- Messages -->
47+
<div class="px-6 shrink-0" id="DialogMessagesAreaEdit">
48+
<div class="alert" id="DialogMessagesAlertBulkRename" style="display:none;">
49+
<strong><span class="alert-description" id="DialogAlertDescriptionBulkRename"></span></strong>
50+
<button type="button" class="close" data-hide="alert" aria-hidden="true">
51+
<span class="glyphicon glyphicon-remove alert-right alert-close pull-right"></span>
52+
</button>
53+
</div>
54+
</div>
55+
56+
<!-- SCROLLABLE BODY -->
57+
<div class="flex-1 overflow-y-auto px-6 pb-3 min-h-0">
58+
<form id="bulkRenameDataLibData" role="form" autocomplete="off">
59+
60+
<!-- Rename Section -->
61+
<div class="rounded-lg border border-slate-200 dark:border-slate-700 p-4 mt-3">
62+
<div class="flex items-center gap-2 mb-3">
63+
<i data-lucide="text-cursor-input" class="w-4 h-4 text-blue-600"></i>
64+
<span class="text-sm font-semibold text-slate-700 dark:text-slate-300">Rename Configuration</span>
65+
</div>
66+
<div class="flex gap-3">
67+
<div class="flex-1">
68+
<label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1" id="lbl_currentname" for="dl_currentname" name="lbl_currentname">Current Name</label>
69+
<input id="dl_currentname" name="currentname" placeholder="Current name..."
70+
class="w-full h-10 border rounded-md px-3 py-2 text-sm bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-300 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all">
71+
</div>
72+
<div class="flex-1">
73+
<label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1" id="lbl_newname" for="dl_newname" name="lbl_newname">New Name</label>
74+
<input id="dl_newname" name="newname" placeholder="New name..."
75+
class="w-full h-10 border rounded-md px-3 py-2 text-sm bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-300 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all">
76+
</div>
77+
</div>
78+
</div>
79+
80+
</form>
81+
</div>
82+
83+
<!-- FOOTER -->
84+
<div class="flex justify-end gap-2 px-6 py-3 shrink-0">
85+
<button type="button" @click="open = false; window.dispatchEvent(new CustomEvent('bulkrename-modal-close'))" name="buttonClose"
86+
class="px-4 py-2 rounded-md border border-slate-300 dark:border-slate-600 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition">Close</button>
87+
<button type="button" id="bulkRenameValidate" name="bulkRename"
88+
class="px-4 py-2 rounded-md bg-sky-400 text-white text-sm hover:bg-sky-500 transition">Rename</button>
89+
</div>
90+
</div>
5091
</div>
51-
<!--end <!-- DataLib Bulk Rename-->
92+
93+
<script>
94+
window.addEventListener('bulkrename-modal-open', function() {
95+
setTimeout(function() { if (window.lucide) lucide.createIcons(); }, 50);
96+
});
97+
</script>

‎source/src/main/webapp/include/transversal/TestCaseListMassActionLabel.html‎

Lines changed: 112 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,71 +3,123 @@
33
x-show="open"
44
x-cloak
55
@mass-label-open.window="openModal()"
6-
class="crb_modal">
7-
8-
<!-- Overlay -->
9-
<div class="absolute inset-0 bg-slate-900 opacity-60" @click="close()"></div>
10-
11-
<!-- Modal -->
12-
<div class="crb_card w-full max-w-4xl mx-4 transform-gpu"
13-
x-transition:enter="transition ease-out duration-300"
14-
x-transition:enter-start="opacity-0 scale-95"
15-
x-transition:enter-end="opacity-100 scale-100"
16-
x-transition:leave="transition ease-in duration-200"
17-
x-transition:leave-start="opacity-100 scale-100"
18-
x-transition:leave-end="opacity-0 scale-95"
19-
@click.away="close()">
20-
21-
<div class="px-6 py-4 flex justify-between">
22-
<h3 class="text-xl font-semibold">Label management</h3>
23-
<button @click="close()" class="text-xl leading-none hover:text-gray-600 dark:hover:text-gray-300">&times;</button>
24-
</div>
6+
class="crb_modal"
7+
id="massActionLabelModal">
258

26-
<div class="p-6 grid grid-cols-3 gap-4 max-h-[400px] overflow-auto">
27-
<div>
28-
<h4 class="font-semibold mb-2">Stickers</h4>
29-
<div id="selectLabelAddS"></div>
30-
</div>
31-
<div>
32-
<h4 class="font-semibold mb-2">Requirements</h4>
33-
<div id="selectLabelAddR"></div>
34-
</div>
35-
<div>
36-
<h4 class="font-semibold mb-2">Batteries</h4>
37-
<div id="selectLabelAddB"></div>
38-
</div>
39-
</div>
9+
<!-- Overlay -->
10+
<div class="absolute inset-0 bg-slate-900/60" @click="close()"></div>
11+
12+
<!-- Modal Card -->
13+
<div class="relative bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 shadow-2xl flex flex-col transition-all duration-300 z-10 crb_card w-full max-w-4xl rounded-2xl"
14+
style="max-height: calc(100vh - 4rem); margin: 2rem 1rem;"
15+
x-transition:enter="transition ease-out duration-300"
16+
x-transition:enter-start="opacity-0 scale-95"
17+
x-transition:enter-end="opacity-100 scale-100"
18+
x-transition:leave="transition ease-in duration-200"
19+
x-transition:leave-start="opacity-100 scale-100"
20+
x-transition:leave-end="opacity-0 scale-95"
21+
@click.stop>
22+
23+
<!-- HEADER -->
24+
<div class="flex items-center justify-between px-6 py-3 border-b border-slate-200 dark:border-slate-700 shrink-0">
25+
<div class="flex items-center gap-3">
26+
<div class="h-10 w-10 rounded-xl bg-blue-600/10 flex items-center justify-center">
27+
<i data-lucide="tags" class="w-5 h-5 text-blue-600"></i>
28+
</div>
29+
<div>
30+
<h2 class="!text-lg !font-semibold !mb-0 !mt-0">Label Management</h2>
31+
<p class="text-xs text-slate-500 !mb-0">Add or remove labels from selected test cases</p>
32+
</div>
33+
</div>
34+
<div class="flex items-center gap-1">
35+
<button @click="close()"
36+
class="h-8 w-8 rounded-lg flex items-center justify-center text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition">
37+
<i data-lucide="x" class="w-4 h-4"></i>
38+
</button>
39+
</div>
40+
</div>
41+
42+
<!-- SCROLLABLE BODY -->
43+
<div class="flex-1 overflow-y-auto px-6 pb-3 min-h-0">
44+
45+
<!-- Label columns -->
46+
<div class="grid grid-cols-3 gap-4 mt-3">
47+
48+
<!-- Stickers -->
49+
<div class="rounded-lg border border-slate-200 dark:border-slate-700 p-4">
50+
<div class="flex items-center gap-2 mb-3">
51+
<i data-lucide="bookmark" class="w-4 h-4 text-blue-600"></i>
52+
<span class="text-sm font-semibold text-slate-700 dark:text-slate-300">Stickers</span>
53+
</div>
54+
<div id="selectLabelAddS" class="space-y-1 max-h-[300px] overflow-auto"></div>
55+
</div>
56+
57+
<!-- Requirements -->
58+
<div class="rounded-lg border border-slate-200 dark:border-slate-700 p-4">
59+
<div class="flex items-center gap-2 mb-3">
60+
<i data-lucide="clipboard-list" class="w-4 h-4 text-blue-600"></i>
61+
<span class="text-sm font-semibold text-slate-700 dark:text-slate-300">Requirements</span>
62+
</div>
63+
<div id="selectLabelAddR" class="space-y-1 max-h-[300px] overflow-auto"></div>
64+
</div>
65+
66+
<!-- Batteries -->
67+
<div class="rounded-lg border border-slate-200 dark:border-slate-700 p-4">
68+
<div class="flex items-center gap-2 mb-3">
69+
<i data-lucide="battery-charging" class="w-4 h-4 text-blue-600"></i>
70+
<span class="text-sm font-semibold text-slate-700 dark:text-slate-300">Batteries</span>
71+
</div>
72+
<div id="selectLabelAddB" class="space-y-1 max-h-[300px] overflow-auto"></div>
73+
</div>
74+
75+
</div>
76+
</div>
77+
78+
<!-- FOOTER -->
79+
<div class="flex justify-end gap-2 px-6 py-3 shrink-0">
80+
<button type="button" @click="remove()"
81+
class="px-4 py-2 rounded-md border border-red-300 dark:border-red-600 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition">
82+
<span class="flex items-center gap-1.5">
83+
<i data-lucide="minus-circle" class="w-4 h-4"></i>
84+
Remove
85+
</span>
86+
</button>
87+
<button type="button" @click="add()"
88+
class="px-4 py-2 rounded-md bg-sky-400 text-white text-sm hover:bg-sky-500 transition">
89+
<span class="flex items-center gap-1.5">
90+
<i data-lucide="plus-circle" class="w-4 h-4"></i>
91+
Add
92+
</span>
93+
</button>
94+
</div>
4095

41-
<div class="flex justify-between px-6 py-4">
42-
<button class="btn-danger" @click="remove()">Remove</button>
43-
<button class="btn-primary" @click="add()">Add</button>
4496
</div>
45-
</div>
4697
</div>
4798

4899
<script>
49-
function massLabelModal() {
50-
return {
51-
open: false,
52-
53-
openModal() {
54-
this.open = true;
55-
this.$nextTick(() => {
56-
loadLabel(undefined, getUser().defaultSystem, "#selectLabelAdd", "4");
57-
});
58-
},
59-
60-
close() { this.open = false; },
61-
62-
add() {
63-
massActionModalSaveHandler_addLabel();
64-
this.close();
65-
},
66-
67-
remove() {
68-
massActionModalSaveHandler_removeLabel();
69-
this.close();
70-
}
100+
function massLabelModal() {
101+
return {
102+
open: false,
103+
104+
openModal() {
105+
this.open = true;
106+
this.$nextTick(() => {
107+
loadLabel(undefined, getUser().defaultSystem, "#selectLabelAdd", "4");
108+
if (window.lucide) lucide.createIcons();
109+
});
110+
},
111+
112+
close() { this.open = false; },
113+
114+
add() {
115+
massActionModalSaveHandler_addLabel();
116+
this.close();
117+
},
118+
119+
remove() {
120+
massActionModalSaveHandler_removeLabel();
121+
this.close();
122+
}
123+
}
71124
}
72-
}
73125
</script>

0 commit comments

Comments
 (0)