flaschengeist-frontend/src/plugins/pricelist/pages/InnerPricelist.vue

<template>
  <calculation-table v-if="!list" nodetails>
    <q-btn icon="mdi-view-list" round @click="list = !list">
      <q-tooltip> Zur Listenansicht wechseln </q-tooltip>
    </q-btn>
  </calculation-table>
  <pricelist v-if="list">
    <q-btn icon="mdi-cards-variant" round @click="list = !list">
      <q-tooltip> Zur Kartenansicht wechseln </q-tooltip>
    </q-btn>
  </pricelist>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, computed } from 'vue';
import CalculationTable from '../components/CalculationTable.vue';
import Pricelist from 'src/plugins/pricelist/components/Pricelist.vue';
import { usePricelistStore } from 'src/plugins/pricelist/store';
import { useMainStore } from 'src/stores';
export default defineComponent({
  name: 'InnerPricelist',
  components: { Pricelist, CalculationTable },
  setup() {
    const store = usePricelistStore();
    const mainStore = useMainStore();

    onBeforeMount(() => {
      void store.getDrinks();
      void store.getPriceListView(mainStore.currentUser.userid);
    });

    const list = computed({
      get: () => store.pricelist_view,
      set: (val: boolean) => store.updatePriceListView(mainStore.currentUser.userid, val),
    });
    return { list };
  },
});
</script>