@@ -14,69 +14,110 @@ <h4>{{ 'COPY_OUTPUT.TITLE' | translate }}</h4>
1414 @if (relatedTableStates().length > 0) {
1515 < div class ="row mb-3 ">
1616 < div class ="col-12 ">
17- < div class ="mb-2 d-flex align-items-center ">
18- < button class ="btn btn-primary btn-sm me-2 " type ="button " (click) ="selectAllRelated(true) ">
19- < i class ="fa fa-check fa-sm "> </ i > {{ 'COPY_OUTPUT.SELECT_ALL' | translate }}
20- </ button >
21- < button class ="btn btn-primary btn-sm me-2 " type ="button " (click) ="selectAllRelated(false) ">
22- < i class ="fa fa-times fa-sm "> </ i > {{ 'COPY_OUTPUT.SELECT_NONE' | translate }}
23- </ button >
24- </ div >
25-
26- < div class ="related-tables-list mb-2 ">
27- @for (r of relatedTableStates(); track r.tableName) {
28- < label class ="me-3 ">
29- < input type ="checkbox " [checked] ="r.included " (change) ="toggleRelatedTable(r.tableName) " />
30- {{ r.tableName }} ({{ r.count }})
31- </ label >
32- }
17+ < div class ="related-tables-grid mb-2 table-responsive ">
18+ < table class ="table table-sm mb-0 ">
19+ < thead >
20+ < tr >
21+ < th > Table</ th >
22+ < th style ="width: 110px ">
23+ < input type ="checkbox " [checked] ="allIncluded() " (change) ="setAllIncluded($any($event.target).checked) " />
24+ </ th >
25+ < th style ="width: 160px ">
26+ < div class ="form-check form-switch ">
27+ < input
28+ class ="form-check-input "
29+ type ="checkbox "
30+ id ="header-copy-mode "
31+ [checked] ="allCopyModeIsRaw() "
32+ (change) ="setAllCopyMode($any($event.target).checked ? 'RAW' : 'ALL') "
33+ />
34+ < label class ="form-check-label ms-2 " for ="header-copy-mode "> {{
35+ allCopyModeIsRaw() ? 'Raw INSERT' : 'Temp Table'
36+ }}</ label >
37+ </ div >
38+ </ th >
39+ </ tr >
40+ </ thead >
41+ < tbody >
42+ @for (r of relatedTableStates(); track r.tableName) {
43+ < tr >
44+ < td >
45+ < div class ="fw-semibold ">
46+ {{ r.tableName }} < small class ="text-muted "> ({{ r.count }})</ small >
47+ </ div >
48+ </ td >
49+ < td class ="align-middle ">
50+ < input type ="checkbox " [checked] ="r.included " (change) ="toggleRelatedTable(r.tableName) " />
51+ </ td >
52+ < td >
53+ < div class ="form-check form-switch ">
54+ < input
55+ class ="form-check-input "
56+ type ="checkbox "
57+ id ="switch-{{ r.tableName }} "
58+ [checked] ="r.copyMode === 'RAW' "
59+ (change) ="setCopyModeForTable(r.tableName, $any($event.target).checked ? 'RAW' : 'ALL') "
60+ [tooltip] ="
61+ r.copyMode === 'RAW'
62+ ? r.columns && r.columns.length > 0
63+ ? 'Raw INSERT (explicit columns)'
64+ : 'Raw INSERT (columns will be inferred)'
65+ : 'Temp Table (uses temporary table)'
66+ "
67+ />
68+ < label class ="form-check-label ms-2 " for ="switch-{{ r.tableName }} "> {{
69+ r.copyMode === 'RAW' ? 'Raw INSERT' : 'Temp Table'
70+ }}</ label >
71+ </ div >
72+ </ td >
73+ </ tr >
74+ }
75+ </ tbody >
76+ </ table >
3377 </ div >
3478 </ div >
3579 </ div >
3680 }
3781
38- < div class ="row ">
82+ < div class ="row mb-3 ">
3983 < div class ="col-12 ">
40- < div class ="sql-output-container mb-3 ">
84+ < div class ="d-flex justify-content-between align-items-start mb-2 ">
85+ < div class ="fw-semibold "> Generated SQL</ div >
86+ < div >
87+ < button class ="btn btn-sm btn-outline-secondary me-2 " (click) ="toggleSqlExpanded() " type ="button ">
88+ @if (sqlExpanded()) {
89+ Collapse
90+ } @else {
91+ Expand
92+ }
93+ </ button >
94+ < button class ="btn btn-sm btn-outline-secondary " (click) ="copy() " type ="button ">
95+ < i class ="fa fa-copy fa-sm "> </ i >
96+ </ button >
97+ </ div >
98+ </ div >
99+
100+ < div class ="sql-output-container mb-3 " [style.maxHeight] ="sqlExpanded() ? 'none' : '240px' " style ="overflow: auto ">
41101 < keira-highlightjs-wrapper [code] ="copyQuery() " />
42102 </ div >
43- < button
44- id ="copy-btn "
45- class ="btn btn-secondary btn-sm me-2 "
46- (click) ="copy() "
47- type ="button "
48- [tooltip] ="'COPY_OUTPUT.COPY_TOOLTIP' | translate "
49- placement ="top "
50- >
51- < i class ="fa fa-copy fa-sm "> </ i > {{ 'COPY_OUTPUT.COPY' | translate }}
52- </ button >
53103
54- < button
55- id ="execute-btn "
56- class ="btn btn-primary btn-sm me-2 "
57- (click) ="execute() "
58- type ="button "
59- [disabled] ="executing() || executed() "
60- [tooltip] ="'COPY_OUTPUT.EXECUTE_TOOLTIP' | translate "
61- placement ="top "
62- >
63- < i class ="fa fa-bolt fa-sm "> </ i >
64- @if (executing()) {
65- < i class ="fas fa-spinner fa-spin "> </ i >
66- }
67- {{ executed() ? ('COPY_OUTPUT.EXECUTED' | translate) : ('COPY_OUTPUT.EXECUTE' | translate) }}
68- </ button >
104+ < div class ="d-flex gap-2 ">
105+ < button id ="copy-btn " class ="btn btn-secondary " (click) ="copy() " type ="button ">
106+ < i class ="fa fa-copy fa-sm "> </ i > {{ 'COPY_OUTPUT.COPY' | translate }}
107+ </ button >
69108
70- < button
71- class ="btn btn-success btn-sm "
72- (click) ="continue() "
73- type ="button "
74- [disabled] ="!executed() "
75- [tooltip] ="'COPY_OUTPUT.CONTINUE_TOOLTIP' | translate "
76- placement ="top "
77- >
78- < i class ="fa fa-arrow-right fa-sm "> </ i > {{ 'COPY_OUTPUT.CONTINUE' | translate }}
79- </ button >
109+ < button id ="execute-btn " class ="btn btn-primary " (click) ="execute() " type ="button " [disabled] ="executing() || executed() ">
110+ < i class ="fa fa-bolt fa-sm "> </ i >
111+ @if (executing()) {
112+ < i class ="fas fa-spinner fa-spin "> </ i >
113+ }
114+ {{ executed() ? ('COPY_OUTPUT.EXECUTED' | translate) : ('COPY_OUTPUT.EXECUTE' | translate) }}
115+ </ button >
116+
117+ < button class ="btn btn-success " (click) ="continue() " type ="button " [disabled] ="!executed() ">
118+ < i class ="fa fa-arrow-right fa-sm "> </ i > {{ 'COPY_OUTPUT.CONTINUE' | translate }}
119+ </ button >
120+ </ div >
80121 </ div >
81122 </ div >
82123 </ div >
0 commit comments