src/plugins/pricelist/components/Pricelist.vue

@@ -1,19 +1,33 @@
 <template>
   <div>
-    <q-table title="Getränke" :columns="columns" :rows="drinks" row-key="name">
-      <template #body-cell-prices="{ row: { prices } }">
-        <q-td>
-          <div v-for="price in prices" :key="price.id" class="row">
-            <div class="col">
-              {{ setVolume(price.volume) }}
-            </div>
-            <div class="col">
-              {{ setCurrency(price.price) }}
-            </div>
-            <div class="col">
-              {{ price.description }}
-            </div>
-          </div>
+    <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>
@@ -34,7 +48,7 @@ export default defineComponent({
     },
     setCurrency(price: number) {
       return `${price.toFixed(2)}€`;
-    }
+    },
   },
   setup() {
     const store = usePricelistStore();
@@ -43,19 +57,53 @@ export default defineComponent({
       void store.getDrinks();
     });
     const drinks = computed(() => store.drinks);
-    const columns = [
+    const columns_drinks = [
       {
         name: 'name',
         label: 'Getränk',
-        field: 'name'
+        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'
-      }
+        field: 'prices',
+      },
     ];
-    return { columns, drinks };
-  }
+    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>