[pricelist] some styling on pricelist

src/plugins/pricelist/components/BuildManual/BuildManualVolumePart.vue

@@ -37,8 +37,7 @@
         <div class="text-body1">{{ price.price.toFixed(2) }}€</div>
         <q-badge v-if="price.public" class="text-caption"> öffentlich </q-badge>
         <div class="text-caption text-weight-thin">
-          {{ price.description
-          }}
+          {{ price.description }}
         </div>
       </div>
     </div>

src/plugins/pricelist/components/CalculationTable/BuildManual.vue

@@ -5,7 +5,7 @@
     class="full-width row q-gutter-sm justify-between q-py-sm"
   >
     <div class="row">
-      <div>{{ index + 1}}.</div>
+      <div>{{ index + 1 }}.</div>
       <div class="q-pl-sm">
         {{ step }}
       </div>

src/plugins/pricelist/components/Pricelist.vue

@@ -79,7 +79,11 @@
 import { defineComponent, onBeforeMount, computed, ref } from 'vue';
 import { usePricelistStore } from '../store';
 import { useMainStore } from 'src/stores';
-
+function sort(a: string | number, b: string | number) {
+  if (a > b) return 1;
+  if (b > a) return -1;
+  return 0;
+}
 export default defineComponent({
   name: 'Pricelist',
   filters: {
@@ -120,12 +124,22 @@ export default defineComponent({
       {
         name: 'picture',
         label: 'Bild',
+        align: 'center',
       },
       {
         name: 'name',
         label: 'Getränk',
         field: 'name',
         align: 'center',
+        sortable: true,
+      },
+      {
+        name: 'drink_type',
+        label: 'Kategorie',
+        field: 'type',
+        format: (val: FG.DrinkType) => `${val.name}`,
+        sortable: true,
+        sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
       },
       {
         name: 'volumes',

src/plugins/pricelist/pages/InnerPricelist.vue

@@ -0,0 +1,14 @@
+<template>
+  <pricelist />
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Pricelist from '../components/Pricelist.vue';
+export default defineComponent({
+  name: 'InnerPricelist',
+  components: { Pricelist },
+  setup() {
+    return {};
+  },
+});
+</script>

src/plugins/pricelist/pages/Pricelist.vue

@@ -1,100 +0,0 @@
-<template>
-  <q-page padding>
-    <q-card>
-      <q-table title="Getränke" :columns="columns_drinks" :rows="drinks" row-key="name">
-        <template #body-cell-volumes="props">
-          <q-td :props="props">
-            <q-table
-              :columns="columns_volumes"
-              :rows="props.row.volumes"
-              hide-header
-              :hide-bottom="props.row.volumes.length < 5"
-              flat
-            >
-              <template #body-cell-prices="props_volumes">
-                <q-td :props="props_volumes">
-                  <q-table
-                    :columns="columns_prices"
-                    :rows="props_volumes.row.prices"
-                    hide-header
-                    :hide-bottom="props_volumes.row.prices.length < 5"
-                    flat
-                  >
-                    <template #body-cell-public="props_prices">
-                      <q-td :props="props_prices">
-                        <q-toggle v-model="props_prices.row.public" disable />
-                      </q-td>
-                    </template>
-                  </q-table>
-                </q-td>
-              </template>
-            </q-table>
-          </q-td>
-        </template>
-      </q-table>
-    </q-card>
-  </q-page>
-</template>
-<script lang="ts">
-import { defineComponent, onBeforeMount, computed } from 'vue';
-import { usePricelistStore } from '../store';
-
-export default defineComponent({
-  name: 'Pricelist',
-  setup() {
-    const store = usePricelistStore();
-
-    onBeforeMount(() => {
-      void store.getDrinks();
-    });
-    const drinks = computed(() => store.drinks);
-    const columns_drinks = [
-      {
-        name: 'name',
-        label: 'Getränk',
-        field: 'name',
-        align: 'center',
-      },
-      {
-        name: 'volumes',
-        label: 'Preise',
-        field: 'volumes',
-        align: 'center',
-      },
-    ];
-    const columns_volumes = [
-      {
-        name: 'volume',
-        label: 'Inhalt',
-        field: 'volume',
-        format: (val: number) => `${val.toFixed(3)}L`,
-        align: 'left',
-      },
-      {
-        name: 'prices',
-        label: 'Preise',
-        field: 'prices',
-      },
-    ];
-    const columns_prices = [
-      {
-        name: 'price',
-        label: 'Preis',
-        field: 'price',
-        format: (val: number) => `${val.toFixed(2)}€`,
-      },
-      {
-        name: 'description',
-        label: 'Beschreibung',
-        field: 'description',
-      },
-      {
-        name: 'public',
-        label: 'Öffentlich',
-        field: 'public',
-      },
-    ];
-    return { columns_drinks, columns_volumes, columns_prices, drinks };
-  },
-});
-</script>

src/plugins/pricelist/routes/index.ts

@@ -19,7 +19,7 @@ export const innerRoutes: FG_Plugin.MenuRoute[] = [
         route: {
           path: 'pricelist',
           name: 'drinks-pricelist',
-          component: () => import('../pages/Pricelist.vue'),
+          component: () => import('../pages/InnerPricelist.vue'),
         },
       },
       {