fix(concierge): fix printing desk QR codes (PPT-2373)

Author: MrYuion

apps/concierge/src/app/desks/desk-qr-code-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, inject } from '@angular/core';
+import { Component, ViewEncapsulation, computed, inject } from '@angular/core';
 import { SettingsService } from '@placeos/common';
 import { DesksStateService } from './desks-state.service';
 
@@ -22,15 +22,13 @@ import { IconComponent, SafePipe, TranslatePipe } from '@placeos/components';
                     <icon>close</icon>
                 </button>
             </div>
-            <div
-                class="flex h-[calc(100vh-5rem)] flex-wrap overflow-auto print:h-auto"
-            >
+            <div class="desk-qr-list flex h-[calc(100vh-5rem)] flex-wrap overflow-auto">
                 @for (desk of desks(); track desk) {
                     <a
                         [href]="desk.qr_link | safe: 'url'"
                         target="_blank"
                         ref="noopener noreferrer"
-                        class="mx-auto flex w-[28%] flex-col items-center justify-center landscape:w-[21%] print:h-[25vh] print:landscape:h-[33.33vh]"
+                        class="desk-qr-item mx-auto flex w-[28%] flex-col items-center justify-center landscape:w-[21%]"
                     >
                         <div
                             class="border-base-200 bg-base-100 mx-4 my-2 block rounded-lg border p-2"
@@ -47,7 +45,52 @@ import { IconComponent, SafePipe, TranslatePipe } from '@placeos/components';
             </div>
         </div>
     `,
-    styles: [``],
+    styles: [
+        `
+            .desk-qr-body-print {
+                display: none;
+            }
+
+            body.desk-qr-printing .desk-qr-body-print {
+                display: block;
+            }
+
+            @media print {
+                @page {
+                    margin: 8mm;
+                }
+
+                body.desk-qr-printing > * {
+                    display: none !important;
+                }
+
+                body.desk-qr-printing .desk-qr-body-print {
+                    display: block !important;
+                    position: static;
+                    inset: auto;
+                    width: 100%;
+                    margin: 0;
+                    padding: 0;
+                }
+
+                body.desk-qr-printing .desk-qr-body-print .desk-qr-list {
+                    display: grid !important;
+                    grid-template-columns: repeat(3, minmax(0, 1fr));
+                    gap: 0.25rem;
+                    height: auto !important;
+                    overflow: visible !important;
+                }
+
+                body.desk-qr-printing .desk-qr-body-print .desk-qr-item {
+                    width: 100% !important;
+                    margin: 0 !important;
+                    break-inside: avoid;
+                    page-break-inside: avoid;
+                }
+            }
+        `,
+    ],
+    encapsulation: ViewEncapsulation.None,
     imports: [
         CommonModule,
         MatDialogModule,
@@ -61,7 +104,20 @@ export class DeskQrCodeModalComponent {
     private _settings = inject(SettingsService);
     private _state = inject(DesksStateService);
 
-    public readonly print = () => window.print();
+    public print() {
+        this.desks();
+        const source = document.querySelector('.desk-qr-list') as HTMLElement;
+        if (!source) return window.print();
+        this._cleanupPrintView();
+        const print_root = document.createElement('div');
+        print_root.className = 'desk-qr-body-print';
+        print_root.appendChild(source.cloneNode(true));
+        document.body.appendChild(print_root);
+        document.body.classList.add('desk-qr-printing');
+        const on_after_print = () => this._cleanupPrintView();
+        window.addEventListener('afterprint', on_after_print, { once: true });
+        setTimeout(() => window.print(), 50);
+    }
 
     public readonly desks = computed(() =>
         this._state.desks().map((_) => {
@@ -84,4 +140,10 @@ export class DeskQrCodeModalComponent {
         item.qr_code = generateQRCode(link);
         return item.qr_code;
     }
+
+    private _cleanupPrintView() {
+        document.body.classList.remove('desk-qr-printing');
+        const print_root = document.querySelector('.desk-qr-body-print');
+        if (print_root) print_root.remove();
+    }
 }