immagini dei prodotti marocco

visualizzazione di una pagina web su di un q-dialog

package.json

@@ -74,6 +74,7 @@
     "vue-svgicon": "^4.0.0-alpha.3",
     "vue-timeago3": "^2.3.0",
     "vue2-dragula": "^2.5.5",
+    "vue3-pdf-app": "^1.0.3",
     "vuex": "^4.1.0",
     "vuex-router-sync": "^6.0.0-rc.1"
   },

src/components/CLineChart/CLineChart.ts

@@ -7,7 +7,7 @@ import { useGlobalStore } from '@store/globalStore'
 import { useI18n } from '@/boot/i18n'
 import { useQuasar } from 'quasar'
 
-import { Chart, ChartItem, ChartConfiguration } from 'chart.js/auto'
+import { Chart, ChartItem, ChartConfiguration } from 'chart.js'
 
 
 export default defineComponent({

src/components/CProductCard/CProductCard.ts

@@ -19,6 +19,12 @@ import { shared_consts } from '@src/common/shared_vuejs'
 import { useRouter } from 'vue-router'
 
 import { costanti } from '@costanti'
+
+import VuePdfApp from 'vue3-pdf-app'
+// import this to use default icons for buttons
+import 'vue3-pdf-app/dist/icons/main.css'
+
+
 export default defineComponent({
   name: 'CProductCard',
   props: {
@@ -61,6 +67,8 @@ export default defineComponent({
 
     const fullscreenImage = ref(<any>null)
 
+    const apriSchedaPDF = ref(false)
+
     let myorder = reactive(<IOrder>{
       idapp: process.env.APP_ID,
       quantity: 0,
@@ -89,6 +97,7 @@ export default defineComponent({
     const startY = ref(0)
     const scale = ref(1)
 
+
     const valoriopt = computed(() => (item: any, addall: boolean, addnone: boolean) => {
       // console.log('valoriopt', item.table)
       return globalStore.getTableJoinByName(item.table, addall, addnone, item.filter)
@@ -271,6 +280,7 @@ export default defineComponent({
 
     function mounted() {
       load()
+
       // Start the timer when the component is mounted
       startTimer();
     }
@@ -456,6 +466,7 @@ export default defineComponent({
       updateproductmodif,
       isOrdineChiuso,
       ricarica,
+      apriSchedaPDF,
     }
   }
 })

src/components/CProductCard/CProductCard.vue

@@ -47,16 +47,7 @@
             style="bottom: -10px; right: 0px; transform: translateY(-50%)"
           />
         </div>
-        <!--<q-btn
-          v-if="!complete"
-          fab
-          color="primary"
-          icon="fas fa-info"
-          class="absolute semi-transparent"
-          style="top: 0; right: -15px; transform: translateY(-66%)"
-          :to="`/product/` + myproduct._id + '/' + cosa"
-        />
-        -->
+
         <q-list>
           <q-item>
             <q-item-section avatar>
@@ -253,7 +244,7 @@
         </div>
       </q-card-section>
       <q-card-section v-if="complete && myproduct.productInfo.link_scheda">
-        <div class="text-blue text-title row">
+        <div v-if="complete" class="text-blue text-title row">
           <q-icon size="sm" name="fas fa-list-ul" class="q-mr-sm" />
           {{ t('products.link_scheda') }}
         </div>
@@ -361,8 +352,11 @@
       <q-card-section v-if="isOrdGas()">
         <q-item
           v-if="
-            (myproduct.bookableAvailableQty > 0 && myproduct.bookableAvailableQty < shared_consts.MAX_QTA_PREORD) ||
-            (myproduct.maxbookableGASQty > 0 && myproduct.maxbookableGASQty < shared_consts.MAX_QTA_PREORD) || editOn
+            (myproduct.bookableAvailableQty > 0 &&
+              myproduct.bookableAvailableQty < shared_consts.MAX_QTA_PREORD) ||
+            (myproduct.maxbookableGASQty > 0 &&
+              myproduct.maxbookableGASQty < shared_consts.MAX_QTA_PREORD) ||
+            editOn
           "
           :clickable="tools.isManager()"
           @click="
@@ -754,6 +748,25 @@
             @click="addtoCart(true)"
           >
           </q-btn>
+          <q-btn
+            v-if="!complete && myproduct.productInfo.link_scheda"
+            rounded
+            color="primary"
+            icon="fas fa-file-alt"
+            label="Dettagli Scheda"
+            class="q-mb-xs q-mt-md"
+            @click="apriSchedaPDF = true"
+          />
+          <q-btn
+            v-else-if="!complete"
+            rounded
+            color="primary"
+            icon="fas fa-info"
+            label="Dettagli"
+            class="q-mb-xs q-mt-md"
+            :to="`/product/` + myproduct._id + '/' + cosa"
+          />
+
           <q-btn
             v-if="myorder.quantity + myorder.quantitypreordered > 0"
             rounded
@@ -819,7 +832,8 @@
       </CMyValueDb>
     </q-card>
 
-    <q-dialog v-model="openlistorders">
+    
+    <q-dialog v-if="myproduct" v-model="openlistorders">
       <q-card class="dialog_card">
         <q-toolbar class="bg-primary text-white">
           <q-toolbar-title>
@@ -902,6 +916,35 @@
       </q-card>
     </q-dialog>
 
+    <q-dialog v-if="myproduct && myproduct.productInfo && myproduct.productInfo.link_scheda" v-model="apriSchedaPDF" maximized>
+    <q-card>
+        <q-toolbar class="bg-primary text-white">
+          <q-toolbar-title>
+            {{ myproduct.productInfo.name }}
+          </q-toolbar-title>
+          <q-btn flat round color="white" label="CHIUDI" icon="close" v-close-popup></q-btn>
+        </q-toolbar>
+        <q-card-main>
+          <iframe :src="myproduct.productInfo.link_scheda" frameborder="0" width="100%" height="100%"></iframe>
+        </q-card-main>
+      </q-card>
+      <q-card-actions align="bottom">
+        <q-btn color="primary" label="Chiudi" @click="apriSchedaPDF = false" />
+      </q-card-actions>
+    </q-dialog>
+
+    <!--
+    <q-dialog v-if="myproduct && myproduct.productInfo && myproduct.productInfo.link_scheda" v-model="apriSchedaPDF" fullscreen>
+      <div class="q-pa-md">
+        <vue-pdf-app style="height: 100vh;" :pdf="myproduct.productInfo.link_scheda"></vue-pdf-app>
+        
+      </div>
+      <q-card-actions align="bottom">
+        <q-btn color="primary" label="Chiudi" @click="apriSchedaPDF = false" />
+      </q-card-actions>
+    </q-dialog>
+    -->
+
     <q-dialog
       v-model="isFullScreen"
       position="top"

src/views/login/vreg/vreg.ts

@@ -44,7 +44,7 @@ export default defineComponent({
       // console.log('load VREG')
       let param: ILinkReg = { idlink: '' }
       if (route.query.idlink)
-        param = { idlink: route.query.idlink!.toString() }
+        param = { idlink: route.query.idlink.toString() }
 
       // console.log('idlink = ', param)
       return userStore.vreg(param)