ComBen-DMS/PrintSlip.html at main · TheSortingHash/ComBen-DMS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <style>
      body { font-family: Arial, sans-serif; margin: 0; }

      .slip-container {
        display: flex; align-items: flex-start; justify-content: center;
        width: 100%; height: 100vh; padding-top: 5mm; box-sizing: border-box;
      }

      .slip-content {
        box-sizing: border-box; padding: 4mm; color: #000;
        text-align: left; border: 1px solid #000; font-size: 9pt;
        width: 105mm; /* A6 Width */
      }

      .slip-header { border-bottom: 1px solid #ccc; padding-bottom: 2mm; margin-bottom: 2mm; text-align: center; }
      .header-text { font-size: 9pt; font-weight: bold; margin: 0; }

      .slip-body { display: flex; align-items: flex-start; gap: 2mm; }
      .slip-left-panel { flex-grow: 1; }
      .slip-right-panel { flex-shrink: 0; text-align: center; }

      #qrcode { padding: 2px; }

      .meta-table { width: 100%; font-size: 8pt; margin-bottom: 3mm; border-collapse: collapse; }
      .meta-table td { padding: 1px 0; vertical-align: top; }
      .ref-number-cell { font-size: 12pt; font-weight: bold; }

      .docs-table { width: 100%; font-size: 7pt; border-collapse: collapse; margin-top: 2mm; border-top: 1px solid #000; }
      .docs-table th { text-align: left; font-weight: bold; border-bottom: 1px solid #ccc; padding: 2px;}
      .docs-table td { border-bottom: 1px solid #eee; padding: 2px; vertical-align: top; }

      /* NEW: Class to respect newlines from server */
      .multiline-text { white-space: pre-wrap; line-height: 1.3; }

      @page { size: 105mm 148mm; margin: 0; }

      @media print {
        .slip-container { padding: 0; height: auto; display: block; }
        .slip-content { border: none; width: 100%; }
      }
    </style>
  </head>
  <body>
    <div class="slip-container">
      <div class="slip-content">
        <div class="slip-header"><p class="header-text">HRMDD-ComBen Document Submission</p></div>

        <div class="slip-body">
            <div class="slip-left-panel">
                <table class="meta-table">
                    <tr><td style="width: 50px;">Ref #:</td><td class="ref-number-cell"><?= transactionId ?></td></tr>
                    <tr><td>Liaison:</td><td><?= details.ContactPerson ?></td></tr>
                    <tr><td>Dept:</td><td><?= details.CenterDept ?></td></tr>
                    <tr><td>Date:</td><td><?= new Date(details.SubmissionTimestamp).toLocaleString('en-US', { timeZone: 'Asia/Manila' }) ?></td></tr>
                </table>

                <table class="docs-table">
                    <thead>
                        <tr>
                            <th style="width: 25%">Owner</th>
                            <th style="width: 20%">Type</th>
                            <th style="width: 35%">Title</th>
                            <th style="width: 20%">Dates</th>
                        </tr>
                    </thead>
                    <tbody>
                        <? for (var i = 0; i < details.documents.length; i++) {
                           var doc = details.documents[i];
                           var ownerName = (doc.PrincipalName && doc.PrincipalName !== "") ? doc.PrincipalName : "(Liaison)";
                        ?>
                        <tr>
                            <td style="font-weight:bold;"><?= ownerName ?></td>
                            <td><?= doc.DocumentType ?></td>
                            <td class="multiline-text"><?= doc.DocumentTitle ?></td>
                            <td class="multiline-text"><?= doc.InclusiveDates ?></td>
                        </tr>
                        <? } ?>
                    </tbody>
                </table>
            </div>

            <div class="slip-right-panel">
                <div id="qrcode"></div>
            </div>
        </div>
      </div>
    </div>
    <script>
        const txId = "<?= transactionId ?>";
        const appUrl = "<?= appUrl ?>";
        const fullLink = `${appUrl}?action=update&id=${txId}`;

        // --- QR CODE FIX ---
        // Increased size to 150 and set correctLevel to Low (L) for cleaner dots
        const qrSize = 150;
        new QRCode(document.getElementById('qrcode'), {
            text: fullLink,
            width: qrSize,
            height: qrSize,
            correctLevel: QRCode.CorrectLevel.L
        });

        window.onload = function() { window.print(); };
    </script>
  </body>
</html>