Dynamic Q-Expansion-Item Expand/Collapse All

mightyschwartz

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>

s.molinari

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)
    }

s.molinari

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

Scott