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. olaf
    O
    • Profile
    • Following 0
    • Followers 0
    • Topics 9
    • Posts 21
    • Best 2
    • Groups 0

    olaf

    @olaf

    2
    Reputation
    7
    Profile views
    21
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    olaf Follow

    Best posts made by olaf

    • How to scrollTo a row in a sorted table.

      Hi,

      I have got a table which can be sorted. I want to know how I can find the row index of a row after sorting so I can pass it to the scrollTo method.
      I have made a codepen sample to show the problem.
      Just run the sample and press the scroll to button.
      https://codepen.io/olafxso/pen/eYNydPR

      After that you will see it scrolls to row ‘15 jelly bean’. (it is know the last visible row in the table)

      Then sort the column Calories by clicking on the column header.
      The hit the button again. You will see it scrolls to row ‘51 Ice cream sandwhich’

      Well I would like to know how to scrollto row 15 after sorting a table column.

      Thanks for any idea’s!

      posted in Help
      O
      olaf
    • RE: How to scrollTo a row in a sorted table.

      Hi @cmanique ,

      Thanks for pointing me to the computedRows property. I changed it by using the array map prototype.
      This works well after filtering and sorting .

        scrollTo: function () {
            const index = this.$refs.table.computedRows.map(e => e.index).indexOf(15)
            this.$refs.table.scrollTo(index)
          }
      

      I am also pretty new with vue, quasar and javascript. So if any body has got some improvements, I would like to know it.

      posted in Help
      O
      olaf

    Latest posts made by olaf

    • RE: How to extend a dialog

      Hi @jraez
      I found a solution of extending templates by using https://github.com/mrodal/vue-inheritance-loader
      This solution keeps the template syntax. The root dialog component now looks like:

      <template extendable>
          <q-dialog v-model="visible">
            <q-card>
              <q-card-section>
                <div class="text-h6">Title</div>
              </q-card-section>
      
              <q-card-section class="q-pt-none">
                <extension-point></extension-point>
              </q-card-section>
      
              <q-card-actions align="right">
                <q-btn flat label="OK" color="primary" v-close-popup />
              </q-card-actions>
            </q-card>
          </q-dialog>
      </template>
      
      <script>
      
      export default {
        name: 'DialogWithSlot',
      
        data () {
          return {
            visible: false
          }
        },
        methods: {
          showMessage () {
            this.visible = true
          }
        }
      }
      </script>
      
      

      and the child dialog looks like:

      <template extends="components/DialogWithSlot.vue">
         <extensions>
          <extension>
            {{messageProp}}
          </extension>
        </extensions>
      </template>
      
      <script>
      import DialogWithSlot from 'components/DialogWithSlot.vue'
      
      export default {
        name: 'DialogWithSlotImpl',
      
        extends: DialogWithSlot,
      
        props: ['messageProp'],
      
        data () {
          return {
          }
        }
      }
      </script>
      
      

      Looks very easy and straight forward to me.

      posted in Help
      O
      olaf
    • RE: How to extend a dialog

      Hi @jraez ,

      Your solution does show the dialog. But its content (the message) is missing. So it does not work

      posted in Help
      O
      olaf
    • RE: How to use a parent (Dialog) component

      Hi @jraez ,

      Thanks for your help! I have tried it, but it is still broken.
      I didn’t like the dialog plugin approach, so have recreated a similar topic with a different approach: https://forum.quasar-framework.org/topic/5541/how-to-extend-a-dialog

      Perhaps you can look into this?

      posted in Help
      O
      olaf
    • How to extend a dialog

      Hi,

      I want to extend a custom dialog component with a slot for its content.
      Therefore I have created this DialogWithSlot.vue:

      <template>
        <q-dialog v-model="visible">
          <q-card>
            <q-card-section>
              <div class="text-h6">Title</div>
            </q-card-section>
      
            <q-card-section class="q-pt-none">
              <slot></slot>
            </q-card-section>
      
            <q-card-actions align="right">
              <q-btn flat label="OK" color="primary" v-close-popup/>
            </q-card-actions>
          </q-card>
        </q-dialog>
      </template>
      
      <script>
      export default {
        name: 'DialogWithSlot',
      
        data() {
          return {
            visible: false
          }
        },
        methods: {
          showMessage() {
            this.visible = true
          }
        }
      }
      </script>
      

      Using this dialog can be done using

      <template>
        <q-page class="flex flex-center">
          <!--
            This dialog 'dialog-with-slot' approach works, but I want to move it to a seperate component
          -->
          <q-btn label="dialog with slot works" @click="openMessage('this is a message')"/>
          <dialog-with-slot ref="dlg">{{message}}</dialog-with-slot>
        </q-page>
      </template>
      
      <script>
      import DialogWithSlot from 'components/DialogWithSlot.vue'
      
      export default {
        name: 'PageInput',
      
        data() {
          return {
            message: false
          }
        },
        methods: {
          openMessage(msg) {
            this.message = msg
            this.$refs.dlg.showMessage()
          }
        },
        components: {
          DialogWithSlot
        }
      }
      </script>
      

      But now I want to have it in a seperated component file. So I have created this DialogWithSlotImpl.vue:

      <template>
        <dialog-with-slot>{{messageProp}}</dialog-with-slot>
      </template>
      
      <script>
      import DialogWithSlot from 'components/DialogWithSlot.vue'
      
      export default {
        name: 'DialogWithSlotImpl',
      
        extends: DialogWithSlot,
      
        props: ['messageProp'],
      
        data() {
          return {}
        },
        components: {
          DialogWithSlot
        }
      }
      </script>
      
      

      and use it like this:

      <template>
        <q-page class="flex flex-center">
          <!--
            This dialog 'dialog-with-slot-impl' approach don't work,
            How can I access the method (showMessage())
          -->
          <q-btn
            label="dialog with slot impl don't work"
            @click="openMessageImpl('this is yet another message')"
          />
          <dialog-with-slot-impl ref="implDlg" :messageProp="message"/>
        </q-page>
      </template>
      
      <script>
      import DialogWithSlotImpl from 'components/DialogWithSlotImpl.vue'
      
      export default {
        name: 'PageInput',
      
        data() {
          return {
            message: false
          }
        },
        methods: {
          openMessageImpl(msg) {
            this.message = msg
            this.$refs.implDlg.showMessage()
          }
        },
        components: {
          DialogWithSlotImpl
        }
      }
      </script>
      

      But this don’t work. The method showMessage() don’t get called.

      A complete codesandbox can be found here.
      https://codesandbox.io/s/extending-dialog-6mniu

      Somebody any idea’s

      posted in Help
      O
      olaf
    • RE: How to use a parent (Dialog) component

      Hi,

      Thanks for you idea’s. I have tried to implement it by adding a new UserDialog3.vue in the codesandbox https://codesandbox.io/s/reusable-dialog-component-nkdfn

      This generates an error: Component template requires a root element, rather than just text.
      Googling about this error I find out pug might be installed. So I have tried to install it following this document: https://quasar.dev/quasar-cli/cli-documentation/handling-webpack#Pug
      I have runed the command yarn add --dev pug pug-plain-loader

      and changed the build section in quasar.conf.js :

          build: {
            scopeHoisting: true,
            vueRouterMode: 'history',
            extendWebpack (cfg) {
              cfg.module.rules.push({
                test: /\.pug$/,
                loader: 'pug-plain-loader'
              }),
              chainWebpack (chain) {
                chain.module.rule('pug')
                  .test(/\.pug$/)
                  .use('pug-plain-loader')
                    .loader('pug-plain-loader')
              }        
            }      
          },
      

      Now I keep getting a 502 error: 502 Bad Gateway. We had trouble connecting to the server, try restarting it or check the logs to see what happened.
      I have tried to remove the pug settings from the quasar.conf.js, but this does not work. I cannot find the log either.

      Any idea’s?

      posted in Help
      O
      olaf
    • How to use a parent (Dialog) component

      Hi,

      I would like to create a default parent component from a QDialog. I have created a component/DefaultDialog.vue:

      <template>
        <q-dialog ref="defaultDialog" @hide="onDialogHide">
          <q-card>
            <q-card-section class="row text-white bg-primary q-pa-sm">
              <div class="text-h6 q-pl-sm">{{title}}</div>
              <q-space/>
              <q-btn v-close-popup flat round dense icon="close"/>
            </q-card-section>
      
            <form @submit.prevent="saveForm">
              <q-card-section>
                <!-- dynamic section.. I want to use slots to fill this section -->
                <slot></slot>
              </q-card-section>
      
              <q-card-actions align="right" class="inset-shadow q-pr-md">
                <q-btn label="Save" color="primary" type="submit"/>
              </q-card-actions>
            </form>
          </q-card>
        </q-dialog>
      </template>
      
      <script>
      export default {
        name: 'DefaultDialog',
      
        props: ['title'],
      
        methods: {
          show() {
            this.$refs.defaultDialog.show()
          },
          hide() {
            this.$refs.defaultDialog.hide()
          },
          onDialogHide() {
            this.$emit('hide')
          },
          saveForm() {
            this.$emit('saveForm')
          }
        }
      }
      </script>
      

      Now I want to use it and tried this ‘components/UserDialog2.vue’:

      <template>
        <default-dialog>
          <q-input outlined label="Name"/>
        </default-dialog>
      </template>
      
      <script>
      import DefaultDialog from 'components/DefaultDialog'
      
      export default {
        mixins: [DefaultDialog],
        components: {
          DefaultDialog
        }
      }
      </script>
      
      

      I want to open the dialog using:

      this.$q.dialog({
         component: UserDialog2,
         parent: this
      })
      

      When its opened the input is not shown.
      I have created a full codesandbox app: https://codesandbox.io/s/reusable-dialog-component-nkdfn
      Here you can find: components/UserDialog.vue

      I want to split the dialog part so I can reuse it.
      Therefore I have create components/UserDialog2.vue. this uses components/DefaultDialog.vue
      I think I am almost there but something went wrong. There comes an error: ‘Error in mounted hook: “TypeError: this.$refs.defaultDialog is undefined”’

      Does anybody have got a idea?
      Thanks!

      posted in Help
      O
      olaf
    • RE: How to scrollTo a row in a sorted table.

      Hi @cmanique ,

      Thanks for pointing me to the computedRows property. I changed it by using the array map prototype.
      This works well after filtering and sorting .

        scrollTo: function () {
            const index = this.$refs.table.computedRows.map(e => e.index).indexOf(15)
            this.$refs.table.scrollTo(index)
          }
      

      I am also pretty new with vue, quasar and javascript. So if any body has got some improvements, I would like to know it.

      posted in Help
      O
      olaf
    • How to scrollTo a row in a sorted table.

      Hi,

      I have got a table which can be sorted. I want to know how I can find the row index of a row after sorting so I can pass it to the scrollTo method.
      I have made a codepen sample to show the problem.
      Just run the sample and press the scroll to button.
      https://codepen.io/olafxso/pen/eYNydPR

      After that you will see it scrolls to row ‘15 jelly bean’. (it is know the last visible row in the table)

      Then sort the column Calories by clicking on the column header.
      The hit the button again. You will see it scrolls to row ‘51 Ice cream sandwhich’

      Well I would like to know how to scrollto row 15 after sorting a table column.

      Thanks for any idea’s!

      posted in Help
      O
      olaf
    • RE: How to programmatically scrollTo a row in a QTable

      hi @Pratik-Patel

      Thanks for your solution. There is one issue now.
      I actually have got a full height table with a fixed header. I have add the css for that in you codepen approach.

      I have update the scrollto method to jump to row 60.
      When you scroll down beyond row 60 and press the button it scrolls to row 61. Row 60 is behind the table header.

      It also does not update the table repaints correct. The table has got some blurred lines. Scroll to row 0. Then press to the button. You will see it jumps to row 60 as last row, but the first 4 rows are blurred.

      Do you (or somebody else) have got an idea how to fix this?

      posted in Help
      O
      olaf
    • RE: How to programmatically scrollTo a row in a QTable

      somebody any idea’s?

      posted in Help
      O
      olaf