new Changes

resources/js/vue/Admin/components/core/Drawer.vue

@@ -127,6 +127,12 @@ export default {
         text: 'Packages',
         role: 'Admin'
       },
+      {
+        to: {name: 'All Cycle'},
+        icon: 'done',
+        text: 'Cycles',
+        role: 'Admin'
+      },
       {
         to: {name: 'Statistics'},
         icon: 'fas fa-chart-bar',

resources/js/vue/Admin/components/modal/barcode/Barcode.vue

@@ -1,18 +1,18 @@
 <template>
     <v-container grid-list-xs>
         <material-card color="black" title="Barcode Image">
-            <v-layout align-left justify-left wrap class="px-5 my-3">
+            <v-layout id="printMe" align-left justify-left wrap class="px-5 my-3">
                 <h3 class="ml-3">Barcode And QRCode Image</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
                 <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md6 sm6 v-if="barcodeimg">
                         <img :src="barcodeimg">
                     </v-flex>
                 </v-layout>
                 <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6>
+                    <v-flex xs12 md6 sm6 v-if="QRCodeimg">
                         <img :src="QRCodeimg">
                     </v-flex>
                 </v-layout>
@@ -32,22 +32,49 @@
 import { mapGetters } from "vuex";
 export default {
     data: () => ({
-        barcodeimg : {},
+        barcodeimg : null,
-        QRCodeimg : {}
+        QRCodeimg : null
     }),
     created() {
-        this.barcodeimg = this.getModalProperties.result.data.data.Barcode;
+        this.barcodeimg = this.getModalProperties.result.data.data.Barcode ? this.getModalProperties.result.data.data.Barcode : null;
-        this.QRCodeimg  = this.getModalProperties.result.data.data.QRCode;
+        this.QRCodeimg  = this.getModalProperties.result.data.data.QRCode ? this.getModalProperties.result.data.data.QRCode : null;
     },
     computed: {
         ...mapGetters("modal", ["getModalProperties"])
     },
     methods: {
         print() {
-            let popup = window.open();
+            const prtHtml = document.getElementById("printMe").innerHTML;
-            popup.document.write(`<img src="${this.barcodeimg}" style="padding:50px" /><img src="${this.QRCodeimg}" />`);
+
-            popup.focus(); 
+            // Get all stylesheets HTML
-            popup.print();
+            let stylesHtml = "";
+            for (const node of [
+                ...document.querySelectorAll('link[rel="stylesheet"], style')
+            ]) {
+                stylesHtml += node.outerHTML;
+            }
+
+            // Open the print window
+            const WinPrint = window.open(
+                "",
+                "",
+                "left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
+            );
+
+            WinPrint.document.write(`<!DOCTYPE html>
+            <html>
+            <head>
+                ${stylesHtml}
+            </head>
+            <body>
+                ${prtHtml}
+            </body>
+            </html>`);
+
+            WinPrint.document.close();
+            WinPrint.focus();
+            WinPrint.print();
+            WinPrint.close();
         }
     }
 };