Quasar Framework

ebena

Please I need help with identifying while I cannot print using Cordova printer plugins with this code.

<script>
import { LocalStorage } from 'quasar'
export default {
  name: 'AnalysisPage',
  data () {
    return {
      analysisData: '',
      selected: []
    }
  },
  mounted () {
    if (LocalStorage.has('analysisData')) {
      this.analysisData = LocalStorage.getItem('analysisData')
      LocalStorage.remove('analysisData')
    }
    if (LocalStorage.has('selected')) {
      this.selected = JSON.parse(LocalStorage.getItem('selected'))
    }
  },
  methods: {

printReport () {
      var newstr = document.getElementById('analysis').innerHTML
      var div = document.createElement('div')
      div.className = 'listPrint'
      div.innerHTML = this.getIngredientList()
      const prtHtml = '<h4>Feeding System</h4>'
      let styleHtml = ''
      for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
        styleHtml += node.outerHTML
      }
      const winPrint = window.open('')
      winPrint.document.write(`<!DOCTYPE html>
        <html>
        <head>
        <title>Feeding System|FeedCalc</title>
        ${styleHtml}
        </head>
        <body>
        ${prtHtml}`
      )
      winPrint.document.body.append(div)
      winPrint.document.write(`${newstr}`)
      winPrint.document.write(`</body>
        </html>`)
      winPrint.document.close()
      cordova.plugins.printer.print(winPrint, 'analysis.html')
    },

 getIngredientList () {
      var table = '<table><tr><th>Ingredients</th><th>Quantity (Kg)</th><th>Price / Kg</th><th>% / Diet</th></tr><tr>'
      // const fragment = new DocumentFragment()
      if (this.selected.length) {
        for (let i = 0; i < this.selected.length; ++i) {
          table += '<td>' + this.selected[i].name + '</td><td>' + this.selected[i].qty + '</td><td>' + this.selected[i].pricekg + '</td><td>' + (this.selected[i].qty * 100 / this.analysisData.total).toFixed(2) + '</td></<td></tr><tr>'
        }
      }
      table += '</tr></table>'
      return table
    }
}

My intention is to print two different sections of the page. One section is printed as it is, using innerHTML, while the list of items selected from a multiple selection Qtable from the second is used to form a table using this.getIngredientList()

On initiating print, the app generate a page accurately, but no printer dialog shows up.

Please, what am I not doing right?

ebena

@metalsadman, thank you. I have been trying to debug it.

I changed to

winPrint.cardova.plugins.printer.print()
winPrint.close()

And it displays print dialog and prints.
However, winPrint.close() is not executed. the generated page by winPrint= window.open() remain opened and I have to forced the app to exit. Any thoughts on why page got sticker after printing.

ebena

although, I haven’t figure out the why window.close() refused to be called/executed, this is what I finally used,
** pass the HTML equivalent of the page to Cordova printer.


    const winPrint = (`<!DOCTYPE html>
            <html>
            <head>
            <title>ShopIt</title>
            ${styleHtml}
            </head>
            <body>
            ${prtHtml}`
          )

     cordova.plugins.printer.print(winPrint, { name: 'report' })

I hope this helps someone.

Thanks to @metalsadman for his time and support.

ebena

@metalsadman, thank you. I have been trying to debug it.

I changed to

winPrint.cardova.plugins.printer.print()
winPrint.close()

And it displays print dialog and prints.
However, winPrint.close() is not executed. the generated page by winPrint= window.open() remain opened and I have to forced the app to exit. Any thoughts on why page got sticker after printing.

ebena

Please I need help with identifying while I cannot print using Cordova printer plugins with this code.

<script>
import { LocalStorage } from 'quasar'
export default {
  name: 'AnalysisPage',
  data () {
    return {
      analysisData: '',
      selected: []
    }
  },
  mounted () {
    if (LocalStorage.has('analysisData')) {
      this.analysisData = LocalStorage.getItem('analysisData')
      LocalStorage.remove('analysisData')
    }
    if (LocalStorage.has('selected')) {
      this.selected = JSON.parse(LocalStorage.getItem('selected'))
    }
  },
  methods: {

printReport () {
      var newstr = document.getElementById('analysis').innerHTML
      var div = document.createElement('div')
      div.className = 'listPrint'
      div.innerHTML = this.getIngredientList()
      const prtHtml = '<h4>Feeding System</h4>'
      let styleHtml = ''
      for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
        styleHtml += node.outerHTML
      }
      const winPrint = window.open('')
      winPrint.document.write(`<!DOCTYPE html>
        <html>
        <head>
        <title>Feeding System|FeedCalc</title>
        ${styleHtml}
        </head>
        <body>
        ${prtHtml}`
      )
      winPrint.document.body.append(div)
      winPrint.document.write(`${newstr}`)
      winPrint.document.write(`</body>
        </html>`)
      winPrint.document.close()
      cordova.plugins.printer.print(winPrint, 'analysis.html')
    },

 getIngredientList () {
      var table = '<table><tr><th>Ingredients</th><th>Quantity (Kg)</th><th>Price / Kg</th><th>% / Diet</th></tr><tr>'
      // const fragment = new DocumentFragment()
      if (this.selected.length) {
        for (let i = 0; i < this.selected.length; ++i) {
          table += '<td>' + this.selected[i].name + '</td><td>' + this.selected[i].qty + '</td><td>' + this.selected[i].pricekg + '</td><td>' + (this.selected[i].qty * 100 / this.analysisData.total).toFixed(2) + '</td></<td></tr><tr>'
        }
      }
      table += '</tr></table>'
      return table
    }
}

My intention is to print two different sections of the page. One section is printed as it is, using innerHTML, while the list of items selected from a multiple selection Qtable from the second is used to form a table using this.getIngredientList()

On initiating print, the app generate a page accurately, but no printer dialog shows up.

Please, what am I not doing right?

ebena

With above solution by @rab, master details using QTable is easily achievable.

ebena

@rab it work,
thank you.

ebena

if the below array is used as data for Qtable

user = { fname: "mike", lname : "duke", age : 35, hobby :"swimming"}

we will get,

fname	lname	age	hobby
mike	duke	35	swimming

Q1. how can I manipulate the user array and/or Qtable property to makes it into

keys	values
fname	mike
lname	duke
age	35
hobby	swimming

The user array would be dynamically loaded from API and content varies,

Q2. is there any other quasar components for viewing/listing this as shown above?

ebena

@jraez Thank you so much.
It work.

ebena

Is there any way to load or render components into Qdialog? Please I need to know if it is possible and if any example/sample of such methods is available

A scenario.

<q-toolbar>
   <q-select v-model="event" :option="eventtype" @input="onEventChange()" label="Select Event" />
</q-toolbar>

<q-dialog>

</q-dialog>

And in the script,

<script>
import eventList from 'statics/data/event.json'

export default {
    data () {
         return {
             event: null,
             dialog: false,
             app: {
                title: ' '
                url: ' '
         }
   },
 computed: {
     eventtype () {
         return eventList
    }
},
methods: {
  onEventChange () {
    if (this.event === "New Entry" {
       this.app.title = 'New Entry Form'
       this.app.url = 'components/forms/newEntryForm.Vue'
} else  if (this.event === "Edit Entry" {
      this.app.title = 'Edit User details'
      this.app.url = 'components/forms/editForm.Vue'
}

}
</script>

Question
How can I use Qdialog to load either newEntryForm.vue or editForm.vue depending on event selected by the user?

ebena

Is there any way to load or render components into Qdialog? Please I need to know if it is possible and if any example/sample of such methods is available

A scenario.

<q-toolbar>
   <q-select v-model="event" :option="eventtype" @input="onEventChange()" label="Select Event" />
</q-toolbar>

<q-dialog>

</q-dialog>

And in the script,

<script>
import eventList from 'statics/data/event.json'

export default {
    data () {
         return {
             event: null,
             dialog: false,
             app: {
                title: ' '
                url: ' '
         }
   },
 computed: {
     eventtype () {
         return eventList
    }
},
methods: {
  onEventChange () {
    if (this.event === "New Entry" {
       this.app.title = 'New Entry Form'
       this.app.url = 'components/forms/newEntryForm.Vue'
} else  if (this.event === "Edit Entry" {
      this.app.title = 'Edit User details'
      this.app.url = 'components/forms/editForm.Vue'
}

}
</script>

Question
How can I use Qdialog to load either newEntryForm.vue or editForm.vue depending on event selected by the user?

ebena

@metalsadman thank you.
I’ve managed to get Master-Details arrangements to work. But I have to ditched the idea of using two qtable because I couldn’t flip content of details (staff) table.
Now I opted for qlist/qitem to list the details of selected staff

Please, does qtable have ‘flipped’ property?
I mean since only one record is expected, is it possible to make/flip columns into row, and row as column.

ebena

@ebena

Best posts made by ebena

Latest posts made by ebena