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. cmanique
    • Profile
    • Following 0
    • Followers 0
    • Topics 3
    • Posts 9
    • Best 6
    • Groups 0

    cmanique

    @cmanique

    9
    Reputation
    4
    Profile views
    9
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    cmanique Follow

    Best posts made by cmanique

    • RE: quasar.dev source code / global search

      @metalsadman thanks a lot for the info! Cool that the docs app source code is available!

      posted in Help
      cmanique
      cmanique
    • RE: QTable footer with total count for each column visible

      @aislan

      So, I gave it a shot with the most naive approach possible.

      Assuming you have data of visibility of columns and column configuration (notice I added a sums boolean to check if you are doing that for a given column):

        data () {
          return {
            visibleColumns: ['calories', 'desc', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron'],
            columns: [
              {
                name: 'desc',
                required: true,
                label: 'Dessert (100g serving)',
                align: 'left',
                field: row => row.name,
                format: val => `${val}`,
                sortable: true
              },
              { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
              { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
              { name: 'carbs', label: 'Carbs (g)', field: 'carbs', sums: true },
              { name: 'protein', label: 'Protein (g)', field: 'protein' },
              { name: 'sodium', label: 'Sodium (mg)', field: 'sodium', sums: true },
              { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
              { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
            ],
      

      Then you can write a computed in the likes of:

          bottomColumns: function () {
            var retVal = []
            for (let i = 0; i < this.columns.length; i++) {
              var isVisible = false
              for (let j = 0; j < this.visibleColumns.length; j++) {
                if (this.visibleColumns[j] === this.columns[i].name) {
                  isVisible = true
                  break
                }
              }
              if (isVisible) {
                if (this.columns[i].sums) {
                  // need to calculate sum, wonder how
                  retVal.push({ name: this.columns[i].name, text: ' the sum of ' + this.columns[i].name })
                } else {
                  retVal.push({ name: this.columns[i].name, text: '' })
                }
              }
            }
            return retVal
          }
      

      And use it in the bottom-row in the following way:

              <template v-slot:bottom-row>
                <q-tr>
                  <q-td v-bind:key="column.name" v-for="column in bottomColumns">
                    {{ column.text }}
                  </q-td>
                </q-tr>
              </template>
      

      Which outputs something like this:

      c598deb1-e02e-473e-a750-bc2c023de77f-image.png

      And if you hide columns, works just as well:

      7f376bd3-cf6f-46df-9558-3d0a5ccb54be-image.png

      How you will calculate the sums, and if they are based on the current page or total, beats me.
      I think it’s a reasonable hack, dunno about performance and I’m sure it can be vastly improved.

      HTH

      posted in Framework
      cmanique
      cmanique
    • RE: How to scrollTo a row in a sorted table.

      @olaf

      This is my first answer here, so I hope someone has better ideas 😃

      From what I could understand the scrollTo() is the index on the current state of the table, which apparently you get from computedRows, so you do need to scroll to the index of your row in the computedRows array.

      I tried to do something with filter, but I’m not proficient enough with javascript and failed to return the index of the filtered object.
      Apparently you cannot break forEach, so the following code worked for me:

          scrollTo: function () {
            for (let i = 0; i < this.$refs.table.computedRows.length; i++) {
              if (this.$refs.table.computedRows[i].index === 15) {
                this.$refs.table.scrollTo(i)
                break
              }
            }
          }
      

      For the obvious reasons I strongly discourage the usage of this in large data sets and I hope there’s a cleaner solution!

      posted in Help
      cmanique
      cmanique
    • RE: QTable footer with total count for each column visible

      @aislan

      I think you could easily achieve this with the bottom-row slot:

              <template v-slot:bottom-row>
                <q-tr>
                  <q-td colspan="100%">
                    Bottom row
                  </q-td>
                </q-tr>
              </template>
      

      There’s an example on the docs page

      From what I could understand it doesn’t work if virtual-scroll is set, but for your use case that’s probably not very relevant.
      If you are worried about filtering out columns, I think by writing a method that reads a table visibleColumns property, and having some property on the config stating if the column should be added or not, I should be rather easy.

      I’ll try and get an example running actually, it’s a fairly common requirement.

      posted in Framework
      cmanique
      cmanique
    • quasar.dev source code / global search

      Hi all,

      I would like to implement a global search like the one at https://quasar.dev/vue-components/ (when you type /, etc), see the screenshot below:

      dc921ef0-7a21-47dd-99bf-2608f9ecfb72-image.png

      I was wondering if either the source code for that layout is available and if not, how to achieve that the search input can be seamlessly integrated with the toolbar, although I believe it is part of the list in the drawer.
      Any pointers on how to globally intercept the pressing of “/” and focus the input would be super cool.

      Thanks in advance

      posted in Help
      cmanique
      cmanique
    • Best practices on how to globally scale down theme / layout

      Hi all,

      I’m currently evaluating Quasar for a complex web app (pretty sure we’ll stick with it, look’s pretty cool).

      I’ve been fiddling with basic stuff, since I’m mostly evaluating capabilities.

      One thing that strikes me is that the default styles are quite big for fonts and containers alike. I meddled with "dense as you can see below:

      bc7cba6a-f392-4291-9e11-ac3fdf6f9bd8-image.png

      but I am looking for a more global way of compacting stuff, since parts of the web app will contain a lot of information.

      Is there any variable controlling the global “scale” of the theme, layout, etc?

      What would be the best possible path that would avoid changing css in pretty much every component?

      Thanks in advance and it really is a great framework!

      posted in Help
      cmanique
      cmanique

    Latest posts made by cmanique

    • Tree with Partial Page Rendering

      Hi all,

      I’m assessing the migration of a JSF (Oracle ADF) App to Quasar, and I came across this tricky requirement:

      24048ce9-e129-40a0-aa3b-ae52262d0cee-image.png

      The drawer inside the yellow border belongs to main layout and routes to modules, like this reference data management one.

      Both the tree and form inside the green and blue borders are, at the moment on a single page, which is a a route from the main layout, hence being inside a page container.

      So, the tricky part is that the tree can provide multiple actions for very different entities, although the tree itself if based on the same data set, by wizardry of weird queries and datamodels.

      Ideally I would use child routes for the different forms, but that, as far as I can tell, would make me loose the state of the tree, since it is inside the page container.

      I think a sort of workaround would be to make components that represent each type of form and chain a lot of v-if’s, but that would severely gimp what I can do with routes as far as something like /rdm/entity/:name

      And as final resort, I have the chance to have second drawer (on the right or something like that), that would keep the tree at the layout level, but would make everyone have a crap user experience.

      So, am I missing something here? I know SPA’s rarely have this kind of state complexity (and I didn’t even get to the place where the tree needs to be contextually refresh because of deleting and adding content), but I think my options are too complicated and I hope there’s a better way.

      Any pointers are very welcome.

      Thanks in advance

      posted in Help
      cmanique
      cmanique
    • RE: Best practices on how to globally scale down theme / layout

      @metalsadman thanks for the info.
      I was digging up on github and found that there’s something similar to this requirement on v2.0.

      It seems the right approach, but it’s quite the rewrite and breaking change.

      Let’s see how this unfolds.

      Thanks!

      posted in Help
      cmanique
      cmanique
    • RE: Best practices on how to globally scale down theme / layout

      Bump.

      Any pointers most welcome

      posted in Help
      cmanique
      cmanique
    • RE: QTable footer with total count for each column visible

      @aislan

      So, I gave it a shot with the most naive approach possible.

      Assuming you have data of visibility of columns and column configuration (notice I added a sums boolean to check if you are doing that for a given column):

        data () {
          return {
            visibleColumns: ['calories', 'desc', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron'],
            columns: [
              {
                name: 'desc',
                required: true,
                label: 'Dessert (100g serving)',
                align: 'left',
                field: row => row.name,
                format: val => `${val}`,
                sortable: true
              },
              { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
              { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
              { name: 'carbs', label: 'Carbs (g)', field: 'carbs', sums: true },
              { name: 'protein', label: 'Protein (g)', field: 'protein' },
              { name: 'sodium', label: 'Sodium (mg)', field: 'sodium', sums: true },
              { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
              { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
            ],
      

      Then you can write a computed in the likes of:

          bottomColumns: function () {
            var retVal = []
            for (let i = 0; i < this.columns.length; i++) {
              var isVisible = false
              for (let j = 0; j < this.visibleColumns.length; j++) {
                if (this.visibleColumns[j] === this.columns[i].name) {
                  isVisible = true
                  break
                }
              }
              if (isVisible) {
                if (this.columns[i].sums) {
                  // need to calculate sum, wonder how
                  retVal.push({ name: this.columns[i].name, text: ' the sum of ' + this.columns[i].name })
                } else {
                  retVal.push({ name: this.columns[i].name, text: '' })
                }
              }
            }
            return retVal
          }
      

      And use it in the bottom-row in the following way:

              <template v-slot:bottom-row>
                <q-tr>
                  <q-td v-bind:key="column.name" v-for="column in bottomColumns">
                    {{ column.text }}
                  </q-td>
                </q-tr>
              </template>
      

      Which outputs something like this:

      c598deb1-e02e-473e-a750-bc2c023de77f-image.png

      And if you hide columns, works just as well:

      7f376bd3-cf6f-46df-9558-3d0a5ccb54be-image.png

      How you will calculate the sums, and if they are based on the current page or total, beats me.
      I think it’s a reasonable hack, dunno about performance and I’m sure it can be vastly improved.

      HTH

      posted in Framework
      cmanique
      cmanique
    • RE: QTable footer with total count for each column visible

      @aislan

      I think you could easily achieve this with the bottom-row slot:

              <template v-slot:bottom-row>
                <q-tr>
                  <q-td colspan="100%">
                    Bottom row
                  </q-td>
                </q-tr>
              </template>
      

      There’s an example on the docs page

      From what I could understand it doesn’t work if virtual-scroll is set, but for your use case that’s probably not very relevant.
      If you are worried about filtering out columns, I think by writing a method that reads a table visibleColumns property, and having some property on the config stating if the column should be added or not, I should be rather easy.

      I’ll try and get an example running actually, it’s a fairly common requirement.

      posted in Framework
      cmanique
      cmanique
    • RE: How to scrollTo a row in a sorted table.

      @olaf

      This is my first answer here, so I hope someone has better ideas 😃

      From what I could understand the scrollTo() is the index on the current state of the table, which apparently you get from computedRows, so you do need to scroll to the index of your row in the computedRows array.

      I tried to do something with filter, but I’m not proficient enough with javascript and failed to return the index of the filtered object.
      Apparently you cannot break forEach, so the following code worked for me:

          scrollTo: function () {
            for (let i = 0; i < this.$refs.table.computedRows.length; i++) {
              if (this.$refs.table.computedRows[i].index === 15) {
                this.$refs.table.scrollTo(i)
                break
              }
            }
          }
      

      For the obvious reasons I strongly discourage the usage of this in large data sets and I hope there’s a cleaner solution!

      posted in Help
      cmanique
      cmanique
    • Best practices on how to globally scale down theme / layout

      Hi all,

      I’m currently evaluating Quasar for a complex web app (pretty sure we’ll stick with it, look’s pretty cool).

      I’ve been fiddling with basic stuff, since I’m mostly evaluating capabilities.

      One thing that strikes me is that the default styles are quite big for fonts and containers alike. I meddled with "dense as you can see below:

      bc7cba6a-f392-4291-9e11-ac3fdf6f9bd8-image.png

      but I am looking for a more global way of compacting stuff, since parts of the web app will contain a lot of information.

      Is there any variable controlling the global “scale” of the theme, layout, etc?

      What would be the best possible path that would avoid changing css in pretty much every component?

      Thanks in advance and it really is a great framework!

      posted in Help
      cmanique
      cmanique
    • RE: quasar.dev source code / global search

      @metalsadman thanks a lot for the info! Cool that the docs app source code is available!

      posted in Help
      cmanique
      cmanique
    • quasar.dev source code / global search

      Hi all,

      I would like to implement a global search like the one at https://quasar.dev/vue-components/ (when you type /, etc), see the screenshot below:

      dc921ef0-7a21-47dd-99bf-2608f9ecfb72-image.png

      I was wondering if either the source code for that layout is available and if not, how to achieve that the search input can be seamlessly integrated with the toolbar, although I believe it is part of the list in the drawer.
      Any pointers on how to globally intercept the pressing of “/” and focus the input would be super cool.

      Thanks in advance

      posted in Help
      cmanique
      cmanique