No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. ebena
    E
    • Profile
    • Following 0
    • Followers 0
    • Topics 6
    • Posts 12
    • Best 2
    • Groups 0

    ebena

    @ebena

    2
    Reputation
    11
    Profile views
    12
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    ebena Follow

    Best posts made by ebena

    • Cannot Print with Cordova

      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?

      posted in Help
      E
      ebena
    • RE: Cannot Print with Cordova

      @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.

      posted in Help
      E
      ebena

    Latest posts made by ebena

    • RE: Cannot Print with Cordova

      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.

      posted in Help
      E
      ebena
    • RE: Cannot Print with Cordova

      @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.

      posted in Help
      E
      ebena
    • Cannot Print with Cordova

      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?

      posted in Help
      E
      ebena
    • RE: How to manipulate JSON / Array for QTable

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

      posted in Help
      E
      ebena
    • RE: How to manipulate JSON / Array for QTable

      @rab it work,
      thank you.

      posted in Help
      E
      ebena
    • How to manipulate JSON / Array for QTable

      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?

      posted in Help
      E
      ebena
    • RE: Is it possible to load/render components in Qdialog?

      @jraez Thank you so much.
      It work.

      posted in Framework
      E
      ebena
    • How to load page or components in Qdialog?

      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?

      posted in Help
      E
      ebena
    • Is it possible to load/render components in Qdialog?

      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?

      posted in Framework
      E
      ebena
    • RE: Qtable- How to achieve Master-Details

      @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.

      posted in Framework
      E
      ebena