Merge pull request 'feat(collection-label): refs #6602 add qr to the report' (!2292) from 6602-barcode-to-qr into dev

Reviewed-on: #2292
Reviewed-by: Javi Gallego <jgallego@verdnatura.es>

db/versions/10991-greenAsparagus/00-firstScript.sql

@@ -0,0 +1,2 @@
+ALTER TABLE vn.productionConfig MODIFY COLUMN id INT(10) UNSIGNED FIRST;
+ALTER TABLE vn.productionConfig ADD scannableCodeType enum('qr','barcode') DEFAULT 'barcode' NOT NULL;

modules/client/front/consumption/index.html

@@ -78,7 +78,6 @@
                         </vn-fetched-tags>
                     </vn-td>
                     <vn-td number>{{::sale.quantity | dashIfEmpty}}</vn-td> 
-                </vn-tr>
             </vn-tbody>
         </vn-table>
     </vn-card>

print/templates/reports/collection-label/assets/css/style.css

@@ -32,9 +32,12 @@ html {
 #bold {
 	font-weight: bold;
 }
-#barcode{
+.barcode{
 	width: 370px;
 }
+.qr{
+	max-height: 137px;
+}
 #shipped {
 	font-weight: bold;
 	width: 50px;

print/templates/reports/collection-label/collection-label.html

@@ -8,11 +8,15 @@
                     <td id="ticketFk">
                         {{labelData.clientFk ? `${labelData.ticketFk} « ${labelData.clientFk}` : labelData.ticketFk}}
                     </td>
-                    <td colspan="2" id="shipped">{{labelData.shipped || '---'}}</td>
+                    <td colspan="2" id="shipped">{{dashIfEmpty(labelData.shipped)}}</td>
                 </tr>
-                <tr>
+                <tr v-if="labelData?.qrData">
-                    <td rowspan="3"><div v-html="getBarcode(labelData.ticketFk)" id="barcode"></div></td>
+                    <td rowspan="3"><img :src="labelData.qrData" class="qr"/></td>
-                    <td id="outline" class="ellipsize">{{labelData.workerCode || '---'}}</td>
+                    <td id="outline" class="ellipsize">{{dashIfEmpty(labelData.workerCode)}}</td>
+                </tr>
+                <tr v-else>
+                    <td rowspan="3"><div v-html="getBarcode(labelData.ticketFk)" class="basrcode"></div></td>
+                    <td id="outline" class="ellipsize">{{dashIfEmpty(labelData.workerCode)}}</td>
                 </tr>
                 <tr>
                     <td id="outline" class="ellipsize">{{labelData.labelCount || 0}}</td>
@@ -21,11 +25,11 @@
                     <td id="outline" class="ellipsize">{{labelData.code == 'V' ? (labelData.size || 0) + 'cm' : (labelData.volume || 0) + 'm³'}}</td>
                 </tr>
                 <tr>
-                    <td><div id="agencyDescripton" class="ellipsize">{{getAgencyDescripton(labelData)}}</div></td>
+                    <td><div id="agencyDescripton" class="ellipsize">{{dashIfEmpty(getAgencyDescription(labelData))}}</div></td>
                     <td id="bold">{{labelData.lineCount || 0}}</td>
                 </tr>
                 <tr>
-                    <td id="nickname" class="ellipsize">{{labelData.nickName ? labelData.nickName.toUpperCase() : '---'}}</td>
+                    <td id="nickname" class="ellipsize">{{dashIfEmpty(labelData?.nickName.toUpperCase()) }}</td>
                     <td id="bold">{{labelData.shippedHour || labelData.zoneHour}}</td>
                 </tr>
             </tbody>

print/templates/reports/collection-label/collection-label.js

@@ -1,6 +1,7 @@
-const jsBarcode = require('jsbarcode');
 const {DOMImplementation, XMLSerializer} = require('xmldom');
 const vnReport = require('../../../core/mixins/vn-report.js');
+const {toDataURL} = require('qrcode');
+const jsBarcode = require('jsbarcode');
 
 module.exports = {
     name: 'collection-label',
@@ -27,10 +28,28 @@ module.exports = {
         } else
             ticketIds = [this.id];
 
-        this.labelsData = await this.rawSqlFromDef('labelsData', [ticketIds]);
+        const labels = await this.rawSqlFromDef('labelsData', [ticketIds]);
+
+        const [{scannableCodeType}] = await this.rawSqlFromDef('barcodeType');
+        if (scannableCodeType === 'qr') {
+            for (const labelData of labels)
+                labelData.qrData = await this.getQr(labelData?.ticketFk, labelData?.workerFk);
+        }
+
+        this.labelsData = labels;
         this.checkMainEntity(this.labelsData);
     },
     methods: {
+        async getQr(ticketFk, workerFk = null) {
+            const QRdata = JSON.stringify({
+                company: 'vnl',
+                user: workerFk,
+                created: Date.vnNew(),
+                table: 'ticket',
+                id: ticketFk
+            });
+            return toDataURL(QRdata, {margin: 0});
+        },
         getBarcode(id) {
             const xmlSerializer = new XMLSerializer();
             const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null);
@@ -52,18 +71,16 @@ module.exports = {
                 if (labelData.code == 'V')
                     value = value + `${labelData.wagon}-${labelData.level}`;
                 else
-                    value = value + `${labelData.color.substring(0, 4)}`;
+                    value = value + `${labelData.color?.substring(0, 4)}`;
             } else
                 value = '-'.repeat(19);
 
             return value;
         },
-        getAgencyDescripton(labelData) {
+        getAgencyDescription(labelData) {
             let value;
             if (labelData.agencyDescription)
                 value = labelData.agencyDescription.toUpperCase().substring(0, 11);
-            else
-                value = '---';
 
             if (labelData.routeFk) {
                 let routeFk = labelData.routeFk.toString();
@@ -72,5 +89,8 @@ module.exports = {
 
             return value;
         },
+        dashIfEmpty(value) {
+            return value || '---';
+        }
     },
 };

print/templates/reports/collection-label/sql/barcodeType.sql

@@ -0,0 +1,3 @@
+SELECT scannableCodeType
+    FROM productionConfig
+    LIMIT 1

print/templates/reports/collection-label/sql/labelsData.sql

@@ -11,6 +11,7 @@ SELECT c.itemPackingTypeFk code,
             IF(sgd.id, IFNULL(pc.itemPreviousDefaultSize, i.`size`), i.`size`)
         ) `size`,
         w.code workerCode,
+        w.id workerFk,
         TIME_FORMAT(t.shipped, '%H:%i') shippedHour,
         TIME_FORMAT(zo.`hour`, '%H:%i') zoneHour,
         DATE_FORMAT(t.shipped, '%d/%m/%y') shipped,