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. erakis
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 11
    • Best 1
    • Groups 0

    erakis

    @erakis

    1
    Reputation
    433
    Profile views
    11
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    erakis Follow

    Best posts made by erakis

    • Datatable - Dynamic update problems

      Hi,

      I’m trying to present a tab controls follow by a unique data-table under. Data-table columns/data is updated according the selected tab of the tab control.

      I made an exemple that simulate what I need and here is what I’ve noticed

      1. The data-table is sometime missing some columns even if they exists in the columns definition variables.
      2. The data table is sometimes visible, other times not. When that happens, just move it in the DOM order and it re-appears. In my case, I sometimes place it in the tab control and other times after. It tends to disappear between each change “hot plug”.

      Here is a screenshot of the example

      0_1508956397242_upload-2ac11102-d0db-4ce4-a68a-f88c290a54c6

      How it works

      1. You click on a tab and then the data-table will get new colums definition plus new data rows.
      2. On the debug pane of Chrome, I ouput :
        • The static columns (those are not changing dynamically)
        • The new dynamic columns (those are changing dynamically)
        • The final columns array resulting of the merge of (static + dynamic columns)
        • The number of rows
      3. You will notice shortly that sometime the data-table is not rending ALL the columns present in the dynamicDataTableColumns variables.

      Screenshot of missing columns

      0_1508960990906_upload-322c316a-d345-4f53-a1e5-eb92d5291393

      The datatable is now suppose to have 7 columns graph, name1, name2, s, r, z, 8 but only those are visible graph, name1, name2, 8. Where are s, r, z columns ?

      Now, the code

      <template>
      
       <div>
      
          <q-tabs ref="tabsReportList" class="shadow-2" inverted two-lines @select="handleTabChange">
      
              <q-tab slot="title"
                v-for="r in tabList"
                :key="r.name"
                :name="r.name"
                :label="r.name"/>
      
                <q-data-table
                    :data="datatableData"
                    :config="configDataTable"
                    :columns="dynamicDataTableColumns">
                </q-data-table>    
      
          </q-tabs>
      
          <!-- <q-data-table
              :data="datatableData"
              :config="configDataTable"
              :columns="dynamicDataTableColumns">
          </q-data-table>        -->
          
          <span v-html="simulationInfo"></span>
      
        </div>
      </template>
      
      <script>
      import _ from 'lodash'
      import { QDataTable, QTabs, QTab } from 'quasar'
      
      export default {
        name: 'index',
        components: {
          QDataTable,
          QTabs,
          QTab
        },
        data () {
          return {
            tabList: [],
      
            configDataTable: {
              /* rowHeight: '1.4rem', */
              responsive: true,
              pagination: {
                rowsPerPage: 10,
                options: [5, 10, 15, 30, 50, 100]
              }
            },
      
            staticDataTableColumns: [
              {
                label: 'Graph',
                field: 'graph',
                /* width: '2rem', */
                format () {
                  return `<i class="material-icons" style="font-size: 1.6rem">show_chart</i>`
                }
              },
              {
                label: 'Name 1',
                field: 'name1'
                /* width: '2rem', */
              },
              {
                label: 'Name 2',
                field: 'name2'
                /* width: '2rem', */
              }
            ],
      
            dynamicDataTableColumns: [],
      
            datatableData: [],
      
            simulationInfo: ''
          }
        },
        computed: {},
        methods: {
          handleTabChange (activeTabName) {
            // Generate dynamic new columns
            const countDynamicColumns = 1 + Math.floor(Math.random() * 10)
            const newDynamicColumns = _.times(countDynamicColumns, () =>
              _.random(35).toString(36)
            ).reduce((acc, cur) => {
              acc.push({
                label: cur,
                /* width: '1.5rem', */
                field: cur
              })
              return acc
            }, [])
      
            // Merge static columns with new dynamic column
            console.log(`staticDataTableColumns :${JSON.stringify(this.staticDataTableColumns)} \n--> (${this.staticDataTableColumns.length} columns)`)
            console.log(`newDynamicColumns :${JSON.stringify(newDynamicColumns)} \n--> (${newDynamicColumns.length}) columns`)
            this.dynamicDataTableColumns = this.staticDataTableColumns.concat(newDynamicColumns)
            console.log(`dynamicDataTableColumns :${JSON.stringify(this.dynamicDataTableColumns)} \n--> (${this.dynamicDataTableColumns.length}) columns`)
      
            // Simulate new data
            const rowsCount = 5
            const that = this
            var newData = []
            for (let i = 0; i < rowsCount; ++i) {
              let r = {}
              for (let i = 0; i < that.dynamicDataTableColumns.length; ++i) {
                r[that.dynamicDataTableColumns[i].field] = Math.floor(
                  Math.random() * 200
                )
              }
              newData.push(r)
            }
            this.datatableData = newData
            console.log(`datatableData :${JSON.stringify(this.datatableData)} \n--> (${this.datatableData.length}) rows`)
      
            // Update simulation information
            let simInfo =
              `Column count :${this.dynamicDataTableColumns.length} (` +
              _.map(this.dynamicDataTableColumns, 'field').join(',') +
              ')'
            simInfo += `<br>Rows count :${this.datatableData.length}`
            this.simulationInfo = simInfo
          }
        },
        created () {
          // Simulate dynamic tabs entries
          this.tabList = Array.apply(null, Array(5)).reduce((acc, cur, idx) => {
            acc.push({
              name: `Tab-${idx.toString()}`
            })
            return acc
          }, [])
        }
      }
      </script>
      
      <style lang="stylus">
      </style>
      

      Maybe I made a mistake or maybe those bugs a real ?

      I know Quasar is going to upgrade to 0.15 but do you have an approximative date ? I already tried other frameworks first as (element.io) but it was not responsive first so I abandoned it. Now I was undecided between (Quasar vs Vuetify). I finally choosed Quasar for :

      • Compatibility with Cordova
      • Responsive first and layout + component works all flawlessly on mobile
      • Tons of components

      What was missing before I start using it :

      • i18n for framework’s components. I already use vue-i18n for the rest.

      What is NOW missing after I tried it :

      • The data-table is not enough customizable, not enough data manipulation function
        • Custom function search getting row by row
        • We can’t create a column not associated to a specific field (Ex: a link),

      But I’m running out of time and the data-table is critical component for me so If I can’t get it work shortly I will regrettably have to migrate to another framework.

      Best regards,

      posted in Help
      erakis
      erakis

    Latest posts made by erakis

    • RE: QField template and tabindex problem with vue-imask

      I found it!

      The problem is the solution proposed in the help
      https://quasar.dev/vue-components/input#Using-third-party-mask-processors

      <q-field
        filled
        v-model="price"
        label="Price with v-money directive"
        hint="Mask: $ #,###.00 #"
      >
        <template v-slot:control="{ id, floatingLabel, value, emitValue }">
          <input :id="id" class="q-field__input text-right" :value="value" @change="e => emitValue(e.target.value)" v-money="moneyFormatForDirective" v-show="floatingLabel">
        </template>
      </q-field>
      

      Removing v-show="floatingLabel" fix the problem.

      It make sense becasue when the TAB key is press, the focus should go to the next box but the box is hidden because there no data in it and it doesn’t have the focus.

      posted in Help
      erakis
      erakis
    • QField template and tabindex problem with vue-imask

      Hi,

      I use a QField component to wrap a vue-imask component. As explain here
      https://quasar.dev/vue-components/input#Using-third-party-mask-processors.

      But when the field is empty and I press the TAB key to navigate between elements, the focus is never give to the next input field. However, if the next box does not have an emtpy value this is working. What is causing that and how to fix it ?

      Here is an example of the problem
      https://codesandbox.io/s/great-shannon-t82qd?file=/src/pages/Index.vue

      If you uncoment the first line to use a raw input, the tab navigation work all the time, even if the field is empty. But if you use the i-mask component the navigation by TAB key will only work if the next input is not empty.

                <!-- <input style="width: 200px" value="props.value"> -->
                <i-mask-input v-model="props.row.value"/>
      
      posted in Help
      erakis
      erakis
    • RE: Missing quasar source maps?

      @Hawkeye64 said in Missing quasar source maps?:

      Would be nice if you were able to try this on a new system (like Virtualbox ubuntu/windows).

      I already did that on my personnal laptop on (Arch Linux) where I never done any Quasar, Webpack, yarn, npm/node or Web dev at all.

      I’ve also done the same test on the computer (Windows 10 x64) of one of my coworker (embedded c programmer), same problem as a previously mentionned. By same problem I mean look at the screen shot 😞

      This is surely related to Webpack but I wanted to be sure that Quasar was not using it incorrectly.

      Anyway… things are not perfect for debugging *.Vue file but I will live with that. I’m just surprise that no one else has noticed this problem this problem easily reproducible.

      Thank you for your help and patience @Hawkeye64

      posted in Help
      erakis
      erakis
    • RE: Missing quasar source maps?

      @Hawkeye64

      In my previous post I explain that I created a fresh new project named test-3. I created it from a new computer, also on a (Linux/Windows), same problem… So the migration issue can be dismissed.

      As I wrote on Discord :

      I’m now able to debug but what I did not see is that I need to scroll down 202 lines of commented blank code until I could saw the debuggable source code. Also I had found at random the file that contains the real source code of Preference.vue?xxx…

      Screenshot: https://imgur.com/a/8n5ROBG

      As I remember… this was not like that before v1

      posted in Help
      erakis
      erakis
    • RE: Missing quasar source maps?

      @Hawkeye64

      I’m getting this problem using quasar dev and not quasar build .... The problem is that I’m unable to debug vue file with the code source on the Browser side. It’s like bundled code only…

      Even if I put the debugger; keyword in the created event of App.vue, it is not fired at all.

      To be more clear, here is what I’ve done :

      > yarn global add @quasar/cli
      > quasar create test-3
      
      # ESLint, Vuex, Axios, Vue-i18n, IE11 support, yarn, Airbnb, etc...
      
      > cd test-3
      > quasar dev
      
       Dev mode.......... spa
       Pkg quasar........ v1.1.6
       Pkg @quasar/app... v1.1.3
       Debugging......... enabled
      
       app:quasar-conf Reading quasar.conf.js +0ms
       app:dev Checking listening address availability (0.0.0.0:8080)... +16ms
       app:webpack Extending SPA Webpack config +613ms
       app:generator Generating Webpack entry point +297ms
       app:dev-server Booting up... +19ms
      
      
       SPA █████████████████████████ [100%] in ~14s
      

      This is what it look like when browsing the source code on Chrome : https://imgur.com/a/BLyToF4

      Could it be related to missing or broken source map ? I’m not really a pro for Webpack stuff related, so I’m kindly stuck.

      Note that debugging *.js file work however.

      All of that was properly working until I migrate from v0.15 to v1.

      I tried on different computer, different OS ((Windows, Linux Arch), same problem.

      Is there something I don’t understand about debugging ?

      posted in Help
      erakis
      erakis
    • RE: Missing quasar source maps?

      Thank you @Hawkeye64,

      1. In the mean time until the next release, what could I do to get debug working because I’m stuck ? Use github repo directly from package.json ?
      2. How much time before releasing the next release ?
      3. I’m a bit lost, what is the difference between quasarand quasar/app ?.

      no one reported in over a year.

      1. Does it means that no one debug on the browser side since one year or no one use the version 1.x ?
      2. From which version it stop working, maybe could a downgrade until the next release ?
      posted in Help
      erakis
      erakis
    • RE: Missing quasar source maps?

      I have the same problem too.

      I’ve tried many things like

      1. Removed node_modules and reinstall all
      2. Run quasar upgrade -i
      3. Play with a couple of webpack settings in quasar-conf.js file
      4. Running quasar --debug build before running quasar dev
      5. Remove all global packages yarn/npm related to quasar, quasar/cli, quasar/app, etc…
      6. Put a debugger; call in the created() event of App.vue.
      7. Try with another browser, like Firefox

      Nothing work, the debugger is NOT fired. Worst, I’ve also notice that I only see the bundled code on the browser, no source code at all.

      • Here is my quasar-conf.js -> https://pastebin.com/KMq5RDgt
      • quasar info -> https://pastebin.com/RVjXRpCu

      Could it be related to this bug/fix f241fa28405448aea9e872a23ce2a0cd ? If yes, which version should I use ? And how to properly replace it.

      I’m definitely stuck.

      posted in Help
      erakis
      erakis
    • RE: Datatable - Dynamic update problems

      Thank your for your time,

      I already tried using a q-tab-pane but same problem here.

      I tried keep-alive but same problem.

      I will post my question on github too as I will not be able to come here any longer. I’m unable to change my password on this forum and my session cookie will probably end shortly,

      posted in Help
      erakis
      erakis
    • RE: Reset password not sending email

      @Fernando2684 , thank you for your time.

      At the back-end, check the procedure you are calling from the front-end

      But what do you mean by back-end vs front-end ?

      Validate the email credentials you are using, and the configuration to send emails

      My email is correct. I then also tried to changed it to my gmail account but my password is required and I don’t know my password. I made a mistake when I put it in my keepass.

      try to use mailtrap instead of hotmail before, it is used for testing purposes and could help you a lot
      I would suggest also to create a sendgrid account and configure over there your hotmail account to send these kind of emails you want.

      I don’t understand why a fake SMTP server or a email delivery service could help my cause ? I’m talking about the forum of quasar framework (http://forum.quasar-framework.org) that is not sending me my reset password email.

      This is even worse when I’m going in my profile there an option to associate my github account to this forum. But clicking on the link gave me this error

      /auth/github Not Found
      You seem to have stumbled upon a page that does not exist. Return to the home page.
      

      Juste to bad, this forum has too many failed 😞

      1. Searching is not accurate
      2. Can’t associate my github account
      3. Can’t change my password
      4. When posting a new question, we do not see it in the right order in the list.

      I think I will use github to submit my questions.

      posted in Hangout
      erakis
      erakis
    • Reset password not sending email

      Hi,

      I need to reset my password as I don’t remember what I used first. I use 3 times the form to reset my password but I never received the email. I look to my junk folder many times since. I’m using an Hotmail address.

      Now I can still post here because of the session keep alive but soon I will be out of luck 😞

      Can the forum manager help me please?
      Best regards,

      posted in Hangout
      erakis
      erakis