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

    Dynamic Q-Expansion-Item Expand/Collapse All

    Help
    2
    3
    1506
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      mightyschwartz last edited by s.molinari

      I use Q-Expansion-Item components for my facets on my search page. My data model is not set in stone as my users are allowed to add/remove columns to the data and there could potentially be 50-60 columns I facet.

      I use the code below to render collapsible items to house those faceted attributes. I’d like to have the option to expand all or collapse all while also preserving the ability to individually expand/collapse each item. Is this doable?

      Maybe I could use a dictionary(“field => true/false”) as an all encompassing variable for all items and use dictionary[field] as the v-model for each item. When users request data, I could set the dictionary value for the field if it is not already set and just keep that rolling? Then expand/collapse all would roll through setting true/false?

      <div v-for="field in buckets" class="q-pb-xs" v-if="$attrs.aggregations">
            <q-expansion-item
              class="bg-light-blue-10 text-white q-pt-none q-pb-none bucket-content"
              expand-separator
              dense
              dark
              :label=getColumnName(field)
            >
              <q-card square flat bordered class="bucket-card">
                <q-card-actions vertical align="left" v-if="$attrs.aggregations[field]" class="">
                  <div v-if="$attrs.aggregations[field]['buckets'].length > 0" v-for="item in $attrs.aggregations[field]['buckets']" @click="addFilter(field, item.key)"
                       class="cursor-pointer bucket-link">
                    {{ item.key }} ({{ formatNumber(item.doc_count) }})
                  </div>
                  <div v-else>
                    No Data
                  </div>
                  <div v-if="$attrs.aggregations[field]['buckets'].length >= 5" class="cursor-pointer bucket-link" @click="loadBucketDialog(field)">Show more</div>
                </q-card-actions>
              </q-card>
            </q-expansion-item>
          </div>
      
      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        For @mightyschwartz (devided into two posts, so it is clearer you’v resolved the problem yourself. :))

        edit: I figured it out using the following… I seed the bucketStatus json object with true on load if the attribute for that field does not exist. If it does, I leave it as the user has it. For expand/collapse, I loop through that object to adjust the v-model value. However, the v-model does not respect changes to an object attribute, so I also take the altered object into a new variable and reset the one used for the v-model.

           expandAll(){
              for (let [key, value] of Object.entries(this.bucketStatus)) {
                this.bucketStatus[key] = true
              }
              // Workaround for v-model not acknowledging attribute changes
              let new_bucketStatus = this.bucketStatus
              this.bucketStatus = {}
              this.bucketStatus = new_bucketStatus
            },
            collapseAll(){
              for (let [key, value] of Object.entries(this.bucketStatus)) {
                this.bucketStatus[key] = false
              }
              // Workaround for v-model not acknowledging attribute changes
              let new_bucketStatus = this.bucketStatus
              this.bucketStatus = {}
              this.bucketStatus = new_bucketStatus
            },
            seedBucketStatus(){
              this.buckets.forEach((item) => {
                if (!this.bucketStatus.hasOwnProperty(item)) {
                  this.bucketStatus[item] = true
                }
              }, this)
            }
        
        1 Reply Last reply Reply Quote 0
        • s.molinari
          s.molinari last edited by

          If you want the post in your name, please add it and I’ll delete these two too.

          Scott

          1 Reply Last reply Reply Quote 0
          • First post
            Last post