Merge pull request #8564 from ProcessMaker/defect/FOUR-25983

defect/FOUR-25983: [47027] Ellucian - Printed Form cuts fields after PDF Preview when it starts at top of a new page

Author: nolanpro

resources/js/requests/components/screenDetail.vue

@@ -1,27 +1,26 @@
 <template>
-  <div class="card h-100">
+  <div class="card">
     <b-overlay
-          id="overlay-background"
-          :show="disabled"
-          :variant="variant"
-          :opacity="opacity"
-          :blur="blur"
-          rounded="sm"
+      id="overlay-background"
+      :show="disabled"
+      :variant="variant"
+      :opacity="opacity"
+      :blur="blur"
+      rounded="sm"
+    >
+      <div class="w-100 d-print-none" align="right">
+        <button
+          type="button"
+          @click="print"
+          class="btn btn-secondary ml-2"
+          :aria-label="$t('Print')"
+          v-if="canPrint"
+          :disabled="disabled"
         >
-    <div class="w-100 d-print-none" align="right">
-      <button
-        type="button"
-        @click="print"
-        class="btn btn-secondary ml-2"
-        :aria-label="$t('Print')"
-        v-if="canPrint"
-        :disabled="disabled"
-      >
-        <i class="fas fa-print"></i> {{ $t("Print") }}
-      </button>
-    </div>
-    <div v-for="page in printablePages" :key="page" class="card">
-      <div class="card-body h-100" :style="cardStyles">
+          <i class="fas fa-print"></i> {{ $t("Print") }}
+        </button>
+      </div>
+      <div class="card-body" :style="cardStyles">
         <component
           ref="print"
           :is="component"
@@ -34,20 +33,19 @@
           token-id=""
         />
       </div>
-    </div>
-    <div class="w-100 d-print-none" align="right">
-      <button
-        type="button"
-        @click="print"
-        v-if="canPrint"
-        class="btn btn-secondary ml-2"
-        :aria-label="$t('Print')"
-        :disabled="disabled"
-      >
-        <i class="fas fa-print"></i> {{ $t("Print") }}
-      </button>
-    </div>
-  </b-overlay>
+      <div class="w-100 d-print-none" align="right">
+        <button
+          type="button"
+          @click="print"
+          v-if="canPrint"
+          class="btn btn-secondary ml-2"
+          :aria-label="$t('Print')"
+          :disabled="disabled"
+        >
+          <i class="fas fa-print"></i> {{ $t("Print") }}
+        </button>
+      </div>
+    </b-overlay>
   </div>
 </template>
 
@@ -106,13 +104,9 @@
         }
       },
       printablePages() {
-        const pages = [0];
-        if (this.rowData.config instanceof Array) {
-          this.rowData.config.forEach(page => {
-            this.findPagesInNavButtons(page, pages);
-          });
-        }
-        return pages;
+        // New strategy: always return only page 0
+        // This avoids any problem with the detection of pages
+        return [0];
       },
       component() {
         if ('renderComponent' in this.rowData.config) {
@@ -157,11 +151,10 @@
       },
       loadPages() {
         this.$nextTick(() => {
-          this.$refs.print.forEach((page, index) => {
-            if (page.setCurrentPage) {
-              page.setCurrentPage(this.printablePages[index]);
-            }
-          });
+          if (this.$refs.print && this.$refs.print.setCurrentPage) {
+            // Force page 0
+            this.$refs.print.setCurrentPage(0);
+          }
         });
       },
       findPagesInNavButtons(object, found = []) {
@@ -175,7 +168,72 @@
           });
         } else if (object.config && object.config.event === 'pageNavigate' && object.config.eventData) {
           const page = parseInt(object.config.eventData);
-          found.indexOf(page) === -1 ? found.push(page) : null;
+          if (found.indexOf(page) === -1) {
+            found.push(page);
+          }
+        }
+        // Also search in the structure of pages of the form
+        if (object.component === 'FormMultiColumn' && object.config && object.config.pages) {
+          object.config.pages.forEach((page, index) => {
+            if (found.indexOf(index) === -1) {
+              found.push(index);
+            }
+          });
+        }
+        // Search in components that can have pagination
+        if (object.component === 'FormPage' && object.config && object.config.page) {
+          const page = parseInt(object.config.page);
+          if (found.indexOf(page) === -1) {
+            found.push(page);
+          }
+        }
+      },
+      hasRealContent(item) {
+        // Verify if the element has real content that should be shown
+        if (!item) return false;
+        
+        // If it is a component that should not be shown in print, it does not have content
+        if (item.component === 'FormButton' || item.component === 'FileUpload' || item.component === 'PhotoVideo') {
+          return false;
+        }
+        
+        // If it has items, verify if any of them has content
+        if (item.items && item.items.length > 0) {
+          return item.items.some(child => this.hasRealContent(child));
+        }
+        
+        // If it is an array, verify if any of them has content
+        if (item instanceof Array) {
+          return item.some(child => this.hasRealContent(child));
+        }
+        
+        // If it has a valid component, it has content
+        if (item.component && item.component !== 'FormButton' && item.component !== 'FileUpload' && item.component !== 'PhotoVideo') {
+          return true;
+        }
+        
+        return false;
+      },
+      findAllPagesWithContent(config, pages) {
+        if (config instanceof Array) {
+          config.forEach((item, index) => {
+            if (this.hasRealContent(item)) {
+              if (pages.indexOf(index) === -1) {
+                pages.push(index);
+              }
+            }
+            // Search recursively in the items
+            if (item.items) {
+              this.findAllPagesWithContent(item.items, pages);
+            }
+          });
+        } else if (config.items) {
+          this.findAllPagesWithContent(config.items, pages);
+        } else if (config.component && config.component !== 'FormButton' && config.component !== 'FileUpload' && config.component !== 'PhotoVideo') {
+          // If it is a valid component, include page 0
+          if (pages.indexOf(0) === -1) {
+            pages.push(0);
+          }
         }
       },
       /**
@@ -212,7 +270,25 @@
         ProcessMaker.EventBus.$emit('form-data-updated', data);
       },
       print() {
-        window.print();
+        // Ensure that the content is rendered completely before printing
+        this.$nextTick(() => {
+          // Force the re-rendering of all components
+          this.$forceUpdate();
+          
+          // Small delay to ensure that the DOM is updated
+          setTimeout(() => {
+            // Apply specific styles for print
+            document.body.classList.add('printing');
+            
+            // Open the print dialog
+            window.print();
+            
+            // Clean the class after a time
+            setTimeout(() => {
+              document.body.classList.remove('printing');
+            }, 1000);
+          }, 100);
+        });
         return true;
       }
     },
@@ -230,3 +306,70 @@
   }
 </script>
 
+<style scoped>
+@media print {
+  .card {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+    page-break-inside: avoid;
+  }
+  
+  .card-body {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
+  }
+  
+  .h-100 {
+    height: auto !important;
+    max-height: none !important;
+  }
+  
+  /* Ensure that all elements of the form are visible */
+  .card-body * {
+    overflow: visible !important;
+  }
+  
+  /* Avoid that the elements are cut */
+  .form-group,
+  .form-control,
+  .input-group {
+    overflow: visible !important;
+    height: auto !important;
+  }
+}
+
+/* Additional styles when printing */
+body.printing .card {
+  overflow: visible !important;
+  height: auto !important;
+  max-height: none !important;
+}
+
+body.printing .card-body {
+  overflow: visible !important;
+  height: auto !important;
+  max-height: none !important;
+}
+
+body.printing .h-100 {
+  height: auto !important;
+  max-height: none !important;
+}
+
+/* Avoid empty pages */
+@media print {
+  .card:empty,
+  .card-body:empty {
+    display: none !important;
+  }
+  
+  /* Ensure that the content is shown correctly */
+  .card {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+}
+</style>
+