nuxt-frontend/components/RightMenu/Settings.vue

<template>
  <v-expansion-panels flat accordion tile v-model="panel" multiple>
    <v-expansion-panel>
      <v-expansion-panel-header>Table</v-expansion-panel-header>
      <v-expansion-panel-content>
        <draggable v-model="columnsSorted">
          <transition-group>
            <div v-for="(column, i) in columnsSorted" :key="column.value">
              <v-card class="mx-auto" outlined tile flat v-if="!column.fixed">
                <v-card-text
                  class="d-flex justify-space-between font-weight-black"
                >
                  <small class="mr-4">{{ i - 1 + ':' }}</small>
                  <small>{{ $t(column.text) }}</small>
                  <v-spacer></v-spacer>
                  <v-btn
                    icon
                    x-small
                    class="mr-4"
                    @click="toggleVisibility(column.value)"
                  >
                    <v-icon x-small>{{
                      column.display
                        ? 'icon-visible-true'
                        : 'icon-visible-false'
                    }}</v-icon>
                  </v-btn>
                  <v-btn icon x-small class="mr-2">
                    <v-icon>icon-dragdrop</v-icon>
                  </v-btn>
                </v-card-text>
              </v-card>
            </div>
          </transition-group>
        </draggable>
      </v-expansion-panel-content>
    </v-expansion-panel>
    <v-expansion-panel>
      <v-expansion-panel-header>Filters </v-expansion-panel-header>
      <v-expansion-panel-content>
        <draggable v-model="filters">
          <transition-group>
            <div v-for="(filter, i) in filters" :key="filter.title">
              <v-card class="mx-auto" outlined tile flat v-if="!filter.fixed">
                <v-card-text
                  class="d-flex justify-space-between font-weight-black"
                >
                  <small class="mr-4">{{ i + 1 + ':' }}</small>
                  <small>
                    {{ $t(`learning.filters.${filter.title}`) }}
                  </small>
                  <v-spacer></v-spacer>
                  <!-- <v-btn icon x-small class="mr-4">
                    <v-icon>icon-visible-true</v-icon>
                  </v-btn> -->
                  <v-btn icon x-small class="mr-2">
                    <v-icon>icon-dragdrop</v-icon>
                  </v-btn>
                </v-card-text>
              </v-card>
              <template v-if="i === 4">
                <div class="my-4">Meer filters:</div>
              </template>
            </div>
          </transition-group>
        </draggable>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable,
  },
  computed: {
    columns() {
      return this.$store.state.learning.columns
    },
    subMenu() {
      return this.$store.getters.rightDrawer.subMenu
    },
    panel: {
      get() {
        const submenus = ['columns', 'filters']
        const index = submenus.indexOf(this.subMenu)
        return [index]
      },
      set(v) {},
    },
    columnsSorted: {
      get() {
        return this.$store.state.learning.columnsSorted
      },
      async set(v) {
        await this.$store.commit('learning/SORT_COLUMNS', v)
        await this.storeLocallyColumnsSorted()
      },
    },
    filters: {
      get() {
        return this.$store.state.learning.filters
      },
      async set(v) {
        await this.$store.commit('learning/SORT_FILTERS', v)
        await this.storeLocallyFiltersSorted()
      },
    },
  },
  methods: {
    async storeLocallyColumnsSorted() {
      await localStorage.setItem(
        'learning_products_cols',
        JSON.stringify(this.columnsSorted)
      )
    },

    async storeLocallyFiltersSorted() {
      const filtersIdsSorted = this.filters.map(({ id }) => id)

      await localStorage.setItem(
        'learning_products_filters',
        JSON.stringify(filtersIdsSorted)
      )
    },

    async toggleVisibility(value) {
      // if no columns sorted, make a copy from columns
      if (this.columnsSorted.length <= 0) {
        await this.$store.dispatch('learning/setColumns')
      }

      // Find column index
      const columnIndex = this.columnsSorted.findIndex(
        (element) => element.value === value
      )

      // find the column to change and edit
      let colsSortedCopy = [...this.columnsSorted]
      colsSortedCopy[columnIndex] = {
        ...colsSortedCopy[columnIndex],
        display: !colsSortedCopy[columnIndex].display,
      }

      // store in colSsorted
      await this.$store.commit('learning/SORT_COLUMNS', colsSortedCopy)

      // copy in localStorage
      this.storeLocallyColumnsSorted()
    },
  },
}
</script>