[pricelist] sorting

package.json

@@ -15,6 +15,7 @@
     "axios": "^0.21.0",
     "cordova": "^10.0.0",
     "core-js": "^3.7.0",
+    "prettier": "^2.2.1",
     "quasar": "^1.14.5",
     "uuid": "^8.3.2",
     "vue-router": "3.3.2"

src/plugins/pricelist/components/CalculationTable.vue

@@ -597,10 +597,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeMount, ref, computed } from '@vue/composition-api';
+import { defineComponent, onBeforeMount, ref, computed, ComputedRef } from '@vue/composition-api';
 import store, { DrinkPriceVolume, Drink } from '../store/altStore';
 import PriceTable from 'src/plugins/pricelist/components/CalculationTable/PriceTable.vue';
 import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
+function sort(a: string | number, b: string | number) {
+  if (a > b) return 1;
+  if (b > a) return -1;
+  return 0;
+}
 export default defineComponent({
   name: 'CalculationTable',
   components: { PriceTable, Ingredients },
@@ -610,39 +615,53 @@ export default defineComponent({
         name: 'name',
         label: 'Getränkename',
         field: 'name',
+        sortable: true,
+        sort,
       },
       {
         name: 'article_id',
         label: 'Artikelnummer',
         field: 'article_id',
+        sortable: true,
+        sort,
       },
       {
         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: 'volume_package',
         label: 'Inhalt in l des Gebinde',
         field: 'volume',
+        sortable: true,
+        sort,
       },
       {
         name: 'package_size',
         label: 'Gebindegröße',
         field: 'package_size',
+        sortable: true,
+        sort,
       },
       {
         name: 'cost_price_package_netto',
         label: 'Preis Netto/Gebinde',
         field: 'cost_price_package_netto',
         format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
+        sortable: true,
+        sort,
       },
       {
         name: 'cost_price_pro_volume',
         label: 'Preis mit 19%/Liter',
         field: 'cost_price_pro_volume',
         format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
+        sortable: true,
+        sort: (a: ComputedRef, b: ComputedRef) => sort(a.value, b.value),
       },
       {
         name: 'volumes',