Skip to content

Commit e660e3b

Browse files
CarliPinellCarliPinell
committed
Solving issue reported with Print pdf screen
1 parent f13da1c commit e660e3b

1 file changed

Lines changed: 193 additions & 49 deletions

File tree

‎resources/js/requests/components/screenDetail.vue‎

Lines changed: 193 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
<template>
2-
<div class="card h-100">
2+
<div class="card">
33
<b-overlay
4-
id="overlay-background"
5-
:show="disabled"
6-
:variant="variant"
7-
:opacity="opacity"
8-
:blur="blur"
9-
rounded="sm"
4+
id="overlay-background"
5+
:show="disabled"
6+
:variant="variant"
7+
:opacity="opacity"
8+
:blur="blur"
9+
rounded="sm"
10+
>
11+
<div class="w-100 d-print-none" align="right">
12+
<button
13+
type="button"
14+
@click="print"
15+
class="btn btn-secondary ml-2"
16+
:aria-label="$t('Print')"
17+
v-if="canPrint"
18+
:disabled="disabled"
1019
>
11-
<div class="w-100 d-print-none" align="right">
12-
<button
13-
type="button"
14-
@click="print"
15-
class="btn btn-secondary ml-2"
16-
:aria-label="$t('Print')"
17-
v-if="canPrint"
18-
:disabled="disabled"
19-
>
20-
<i class="fas fa-print"></i> {{ $t("Print") }}
21-
</button>
22-
</div>
23-
<div v-for="page in printablePages" :key="page" class="card">
24-
<div class="card-body h-100" :style="cardStyles">
20+
<i class="fas fa-print"></i> {{ $t("Print") }}
21+
</button>
22+
</div>
23+
<div class="card-body" :style="cardStyles">
2524
<component
2625
ref="print"
2726
:is="component"
@@ -34,20 +33,19 @@
3433
token-id=""
3534
/>
3635
</div>
37-
</div>
38-
<div class="w-100 d-print-none" align="right">
39-
<button
40-
type="button"
41-
@click="print"
42-
v-if="canPrint"
43-
class="btn btn-secondary ml-2"
44-
:aria-label="$t('Print')"
45-
:disabled="disabled"
46-
>
47-
<i class="fas fa-print"></i> {{ $t("Print") }}
48-
</button>
49-
</div>
50-
</b-overlay>
36+
<div class="w-100 d-print-none" align="right">
37+
<button
38+
type="button"
39+
@click="print"
40+
v-if="canPrint"
41+
class="btn btn-secondary ml-2"
42+
:aria-label="$t('Print')"
43+
:disabled="disabled"
44+
>
45+
<i class="fas fa-print"></i> {{ $t("Print") }}
46+
</button>
47+
</div>
48+
</b-overlay>
5149
</div>
5250
</template>
5351

@@ -106,13 +104,10 @@
106104
}
107105
},
108106
printablePages() {
109-
const pages = [0];
110-
if (this.rowData.config instanceof Array) {
111-
this.rowData.config.forEach(page => {
112-
this.findPagesInNavButtons(page, pages);
113-
});
114-
}
115-
return pages;
107+
// New strategy: always return only page 0
108+
// This avoids any problem with the detection of pages
109+
console.log('🔍 printablePages devuelve: [0] (forzado)');
110+
return [0];
116111
},
117112
component() {
118113
if ('renderComponent' in this.rowData.config) {
@@ -157,11 +152,10 @@
157152
},
158153
loadPages() {
159154
this.$nextTick(() => {
160-
this.$refs.print.forEach((page, index) => {
161-
if (page.setCurrentPage) {
162-
page.setCurrentPage(this.printablePages[index]);
163-
}
164-
});
155+
if (this.$refs.print && this.$refs.print.setCurrentPage) {
156+
// Force page 0
157+
this.$refs.print.setCurrentPage(0);
158+
}
165159
});
166160
},
167161
findPagesInNavButtons(object, found = []) {
@@ -175,7 +169,72 @@
175169
});
176170
} else if (object.config && object.config.event === 'pageNavigate' && object.config.eventData) {
177171
const page = parseInt(object.config.eventData);
178-
found.indexOf(page) === -1 ? found.push(page) : null;
172+
if (found.indexOf(page) === -1) {
173+
found.push(page);
174+
}
175+
}
176+
// Also search in the structure of pages of the form
177+
if (object.component === 'FormMultiColumn' && object.config && object.config.pages) {
178+
object.config.pages.forEach((page, index) => {
179+
if (found.indexOf(index) === -1) {
180+
found.push(index);
181+
}
182+
});
183+
}
184+
// Search in components that can have pagination
185+
if (object.component === 'FormPage' && object.config && object.config.page) {
186+
const page = parseInt(object.config.page);
187+
if (found.indexOf(page) === -1) {
188+
found.push(page);
189+
}
190+
}
191+
},
192+
hasRealContent(item) {
193+
// Verify if the element has real content that should be shown
194+
if (!item) return false;
195+
196+
// If it is a component that should not be shown in print, it does not have content
197+
if (item.component === 'FormButton' || item.component === 'FileUpload' || item.component === 'PhotoVideo') {
198+
return false;
199+
}
200+
201+
// If it has items, verify if any of them has content
202+
if (item.items && item.items.length > 0) {
203+
return item.items.some(child => this.hasRealContent(child));
204+
}
205+
206+
// If it is an array, verify if any of them has content
207+
if (item instanceof Array) {
208+
return item.some(child => this.hasRealContent(child));
209+
}
210+
211+
// If it has a valid component, it has content
212+
if (item.component && item.component !== 'FormButton' && item.component !== 'FileUpload' && item.component !== 'PhotoVideo') {
213+
return true;
214+
}
215+
216+
return false;
217+
},
218+
findAllPagesWithContent(config, pages) {
219+
if (config instanceof Array) {
220+
config.forEach((item, index) => {
221+
if (this.hasRealContent(item)) {
222+
if (pages.indexOf(index) === -1) {
223+
pages.push(index);
224+
}
225+
}
226+
// Search recursively in the items
227+
if (item.items) {
228+
this.findAllPagesWithContent(item.items, pages);
229+
}
230+
});
231+
} else if (config.items) {
232+
this.findAllPagesWithContent(config.items, pages);
233+
} else if (config.component && config.component !== 'FormButton' && config.component !== 'FileUpload' && config.component !== 'PhotoVideo') {
234+
// If it is a valid component, include page 0
235+
if (pages.indexOf(0) === -1) {
236+
pages.push(0);
237+
}
179238
}
180239
},
181240
/**
@@ -212,7 +271,25 @@
212271
ProcessMaker.EventBus.$emit('form-data-updated', data);
213272
},
214273
print() {
215-
window.print();
274+
// Ensure that the content is rendered completely before printing
275+
this.$nextTick(() => {
276+
// Force the re-rendering of all components
277+
this.$forceUpdate();
278+
279+
// Small delay to ensure that the DOM is updated
280+
setTimeout(() => {
281+
// Apply specific styles for print
282+
document.body.classList.add('printing');
283+
284+
// Open the print dialog
285+
window.print();
286+
287+
// Clean the class after a time
288+
setTimeout(() => {
289+
document.body.classList.remove('printing');
290+
}, 1000);
291+
}, 100);
292+
});
216293
return true;
217294
}
218295
},
@@ -230,3 +307,70 @@
230307
}
231308
</script>
232309

310+
<style scoped>
311+
@media print {
312+
.card {
313+
overflow: visible !important;
314+
height: auto !important;
315+
max-height: none !important;
316+
page-break-inside: avoid;
317+
}
318+
319+
.card-body {
320+
overflow: visible !important;
321+
height: auto !important;
322+
max-height: none !important;
323+
}
324+
325+
.h-100 {
326+
height: auto !important;
327+
max-height: none !important;
328+
}
329+
330+
/* Ensure that all elements of the form are visible */
331+
.card-body * {
332+
overflow: visible !important;
333+
}
334+
335+
/* Avoid that the elements are cut */
336+
.form-group,
337+
.form-control,
338+
.input-group {
339+
overflow: visible !important;
340+
height: auto !important;
341+
}
342+
}
343+
344+
/* Additional styles when printing */
345+
body.printing .card {
346+
overflow: visible !important;
347+
height: auto !important;
348+
max-height: none !important;
349+
}
350+
351+
body.printing .card-body {
352+
overflow: visible !important;
353+
height: auto !important;
354+
max-height: none !important;
355+
}
356+
357+
body.printing .h-100 {
358+
height: auto !important;
359+
max-height: none !important;
360+
}
361+
362+
/* Avoid empty pages */
363+
@media print {
364+
.card:empty,
365+
.card-body:empty {
366+
display: none !important;
367+
}
368+
369+
/* Ensure that the content is shown correctly */
370+
.card {
371+
page-break-inside: avoid;
372+
break-inside: avoid;
373+
}
374+
}
375+
</style>
376+

0 commit comments

Comments
 (0)