[pricelist] cleanup some code

src/plugins/pricelist/components/CalculationTable.vue

@@ -1,7 +1,7 @@
 <template>
   <q-table
     v-model:pagination="pagination"
-    title="Kalkulationstabelle"
+    title="Preistabelle"
     :columns="columns"
     :rows="drinks"
     :visible-columns="visibleColumn"
@@ -14,12 +14,12 @@
     <template #top-right>
       <div class="row justify-end q-gutter-sm">
         <search-input v-model="search" :keys="search_keys" />
-        <q-btn label="Aufpreise">
+        <q-btn v-if="!public && !nodetails" label="Aufpreise">
           <q-menu anchor="center middle" self="center middle">
             <min-price-setting />
           </q-menu>
         </q-btn>
-        <q-select
+        <!--<q-select
           v-model="visibleColumn"
           multiple
           filled
@@ -31,8 +31,14 @@
           :options="[...columns, ...column_calc, ...column_prices]"
           option-value="name"
           options-cover
-        />
+          />-->
-        <q-btn color="primary" round icon="mdi-plus" @click="newDrink">
+        <q-btn
+          v-if="!public && !nodetails && editable"
+          color="primary"
+          round
+          icon="mdi-plus"
+          @click="newDrink"
+        >
           <!--<q-menu v-model="showNewDrink" anchor="center middle" self="center middle" persistent>
             <new-drink @close="showNewDrink = false" />
           </q-menu>-->
@@ -49,7 +55,11 @@
               props.row.uuid ? `/api/pricelist/picture/${props.row.uuid}?size=256` : 'no-image.svg'
             "
           >
-            <div class="absolute-top-right justify-end" style="background-color: transparent">
+            <div
+              v-if="!public && !nodetails && editable"
+              class="absolute-top-right justify-end"
+              style="background-color: transparent"
+            >
               <q-btn
                 round
                 icon="mdi-pencil"
@@ -77,7 +87,7 @@
               {{ tag.name }}
             </q-badge>
           </q-card-section>
-          <q-card-section>
+          <q-card-section v-if="!public && !nodetails">
             <div class="fit row">
               <q-input
                 v-if="props.row.article_id"
@@ -131,7 +141,7 @@
             </div>
           </q-card-section>
           <q-card-section v-if="props.row.volumes.length > 0 && notLoading">
-            <drink-price-volumes :model-value="props.row.volumes" />
+            <drink-price-volumes :model-value="props.row.volumes" :public="public" :nodetails="nodetails" />
           </q-card-section>
         </q-card>
       </div>
@@ -168,15 +178,38 @@ export default defineComponent({
     DrinkPriceVolumes,
     DrinkModify,
   },
-  setup() {
+  props: {
+    public: {
+      type: Boolean,
+      default: false,
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+    nodetails: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
     const mainStore = useMainStore();
     const store = usePricelistStore();
 
     onBeforeMount(() => {
-      void store.getPriceCalcColumn(user);
+      void store.getDrinks();
+      try {
+        user.value = mainStore.currentUser.userid;
+      } catch {
+        user.value = undefined;
+      }
+
+      if (user.value) {
+        store.getPriceCalcColumn(user.value);
+      }
     });
 
-    const user = mainStore.currentUser.userid;
+    const user = ref<string>();
 
     const columns = [
       {
@@ -190,6 +223,7 @@ export default defineComponent({
         sortable: true,
         sort,
         filterable: true,
+        public: true,
       },
 
       {
@@ -200,6 +234,7 @@ export default defineComponent({
         sortable: true,
         sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
         filterable: true,
+        public: true,
       },
       {
         name: 'tags',
@@ -216,6 +251,7 @@ export default defineComponent({
           return retVal;
         },
         filterable: true,
+        public: true,
       },
       {
         name: 'article_id',
@@ -224,6 +260,7 @@ export default defineComponent({
         sortable: true,
         sort,
         filterable: true,
+        public: false,
       },
       {
         name: 'volume_package',
@@ -231,6 +268,7 @@ export default defineComponent({
         field: 'volume',
         sortable: true,
         sort,
+        public: false,
       },
       {
         name: 'package_size',
@@ -238,6 +276,7 @@ export default defineComponent({
         field: 'package_size',
         sortable: true,
         sort,
+        public: false
       },
       {
         name: 'cost_per_package',
@@ -246,6 +285,7 @@ export default defineComponent({
         format: (val: number | null) => (val ? `${val.toFixed(3)}€` : ''),
         sortable: true,
         sort,
+        public: false,
       },
       {
         name: 'cost_per_volume',
@@ -287,6 +327,7 @@ export default defineComponent({
         },
         filterable: true,
         sortable: false,
+        public: false
       },
     ];
     const column_calc = [
@@ -327,11 +368,11 @@ export default defineComponent({
     const visibleColumn = computed({
       get: () => store.pricecalc_columns,
       set: (val) => {
-        store.updatePriceCalcColumn(user, val);
+        store.updatePriceCalcColumn(<string>user.value, val);
       },
     });
 
-    const search_keys = computed(() => columns.filter((column) => column.filterable));
+    const search_keys = computed(() => columns.filter((column) => column.filterable && ((props.public || props.nodetails) ? column.public : true)));
 
     const pagination = ref({
       sortBy: 'name',

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

@@ -31,7 +31,7 @@ export default defineComponent({
   name: 'BuildManual',
   props: {
     steps: {
-      type: Array as PropType<Array<string>>,
+      type: Array as PropType<Array<string>> || undefined,
       required: true,
     },
     editable: {

src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue

@@ -1,66 +0,0 @@
-<template>
-  <q-btn color="positive" icon-right="add" label="Abgabe hinzufügen" size="xs">
-    <q-menu anchor="center middle" self="center middle">
-      <div class="row justify-around q-pa-sm">
-        <q-input
-          v-model.number="newVolume.volume"
-          filled
-          dense
-          label="Liter"
-          type="number"
-          min="0"
-          step="0.01"
-        />
-      </div>
-      <div class="row justify-between q-pa-sm">
-        <q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
-        <q-btn v-close-popup label="Speichern" color="primary" @click="addVolume(rows)" />
-      </div>
-    </q-menu>
-  </q-btn>
-</template>
-
-<script lang="ts">
-import { DrinkPriceVolume } from '../../../store';
-import { ref, defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'NewVolume',
-  props: {
-    pricePerVolume: {
-      type: undefined,
-      required: true,
-    },
-  },
-  emits: { addVolume: (val: DrinkPriceVolume) => !!val },
-  setup(_, { emit }) {
-    const emptyVolume: DrinkPriceVolume = {
-      id: -1,
-      _volume: 0,
-      min_prices: [],
-      prices: [],
-      ingredients: [],
-    };
-    const newVolume = ref<DrinkPriceVolume>(emptyVolume);
-
-    function cancelAddVolume() {
-      setTimeout(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        newVolume.value = emptyVolume;
-      }, 200);
-    }
-    function addVolume() {
-      emit('addVolume', <DrinkPriceVolume>newVolume.value);
-    }
-
-    return {
-      addVolume,
-      cancelAddVolume,
-      newVolume,
-    };
-  },
-});
-</script>
-
-<style scoped></style>

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

@@ -30,7 +30,7 @@
           </q-btn>
         </div>
       </div>
-      <div class="full-width row q-gutter-sm q-pa-sm justify-around">
+      <div v-if="!public && !nodetails" class="full-width row q-gutter-sm q-pa-sm justify-around">
         <div v-for="(min_price, index) in volume.min_prices" :key="index">
           <q-badge class="text-body1" color="primary"> {{ min_price.percentage }}% </q-badge>
           <div class="text-body1">{{ min_price.price.toFixed(3) }}€</div>
@@ -93,6 +93,7 @@
       </div>
       <div class="q-pa-sm">
         <ingredients
+            v-if="!public"
           v-model="volume.ingredients"
           :editable="editable"
           @update="updateVolume(volume)"
@@ -131,6 +132,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    public: {
+      type: Boolean,
+      default: false,
+    },
+    nodetails: {
+      type: Boolean,
+      default: false,
+    }
   },
   emits: {
     'update:modelValue': (val: Array<DrinkPriceVolume>) => val,

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

@@ -1,204 +0,0 @@
-<template>
-  <q-table
-    :columns="columns"
-    :rows="rows"
-    dense
-    :visible-columns="visibleColumns"
-    row-key="id"
-    flat
-  >
-    <template #header="props">
-      <q-tr :props="props">
-        <q-th auto-width />
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          {{ col.label }}
-        </q-th>
-      </q-tr>
-    </template>
-
-    <template #body="props">
-      <q-tr :props="props">
-        <q-td auto-width>
-          <q-btn
-            v-if="!drink.cost_price_pro_volume"
-            size="sm"
-            color="accent"
-            round
-            dense
-            :icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-            @click="props.expand = !props.expand"
-          />
-          <q-btn
-            v-if="props.row.ingredients.length === 0 && props.row.prices.length === 0"
-            size="xs"
-            color="negative"
-            round
-            dense
-            icon="mdi-delete"
-            class="q-mx-sm"
-            @click="deleteVolume(props.row, drink)"
-          />
-        </q-td>
-        <q-td key="volume" :props="props">
-          {{ parseFloat(props.row.volume).toFixed(3) }}L
-          <q-popup-edit
-            v-if="rows.cost_price_pro_volume"
-            v-model="props.row.volume"
-            buttons
-            label-cancel="Abbrechen"
-            label-set="Speichern"
-            @save="updateVolume(props.row, drink)"
-          >
-            <q-input v-model.number="props.row.volume" dense filled type="number" suffix="L" />
-          </q-popup-edit>
-        </q-td>
-        <q-td key="min_prices" :props="props">
-          <div
-            v-for="(min_price, index) in props.row.min_prices"
-            :key="`min_prices` + index"
-            class="row justify-between"
-          >
-            <div class="col">
-              <q-badge color="primary">{{ min_price.percentage }}%</q-badge>
-            </div>
-            <div class="col" style="text-align: end">
-              {{ min_price.price ? min_price.price.toFixed(3) : Number(0).toFixed(2) }}€
-            </div>
-          </div>
-        </q-td>
-        <q-td key="prices" :props="props">
-          <!--<price-table
-            :columns="column_prices"
-            :rows="props.row.prices"
-            :row="props.row"
-            :visible-columns="visibleColumns"
-            @updateDrink="updateDrink"
-          />-->
-        </q-td>
-      </q-tr>
-      <q-tr v-show="props.expand" :props="props">
-        <q-td colspan="100%">
-          <ingredients
-            :ingredients="props.row.ingredients"
-            :volume="props.row"
-            @updateDrink="updateDrink"
-            @addIngredient="addIngredient"
-            @deleteIngredient="deleteIngredient"
-          />
-        </q-td>
-      </q-tr>
-    </template>
-    <template #bottom>
-      <div class="full-width row justify-end">
-        <new-volume
-          :price-per-volume="drink.cost_price_pro_volume"
-          @addVolume="addVolume($event, drink)"
-        />
-      </div>
-    </template>
-    <template #no-data>
-      <div class="full-width row justify-end">
-        <new-volume
-          :price-per-volume="drink.cost_price_pro_volume"
-          @addVolume="addVolume($event, drink)"
-        />
-      </div>
-    </template>
-  </q-table>
-</template>
-
-<script lang="ts">
-import { Drink, DrinkPriceVolume } from '../../store';
-import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
-import NewVolume from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue';
-import { PropType, defineComponent } from 'vue';
-
-const columns = [
-  {
-    name: 'volume',
-    label: 'Abgabe in l',
-    field: 'volume',
-  },
-  {
-    name: 'min_prices',
-    label: 'Minimal Preise',
-    field: 'min_prices',
-  },
-  {
-    name: 'prices',
-    label: 'Preise',
-    field: 'prices',
-  },
-];
-
-export default defineComponent({
-  name: 'DrinkPriceVolumsTable',
-  components: { Ingredients, NewVolume },
-  props: {
-    visibleColumns: {
-      type: Array,
-      default: columns,
-    },
-    columns: {
-      type: Array,
-      default: columns,
-    },
-    rows: {
-      type: Array as PropType<Array<DrinkPriceVolume>>,
-      required: true,
-    },
-    drink: {
-      type: Object as PropType<Drink>,
-      required: true,
-    },
-  },
-  emits: { updateDrink: () => true },
-  setup(_, { emit }) {
-    //const store = usePricelistStore();
-
-    function addVolume(volume: DrinkPriceVolume, drink: Drink) {
-      drink.volumes.push(volume);
-      updateDrink();
-    }
-
-    function updateDrink() {
-      emit('updateDrink');
-    }
-    function deleteVolume() {
-      //store.deleteVolume(volume, drink);
-      return;
-    }
-    const column_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',
-      },
-    ];
-
-    function addIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
-      volume.ingredients.push(ingredient);
-      updateDrink();
-    }
-    function deleteIngredient() {
-      //store.deleteIngredient(ingredient, volume);
-      return;
-    }
-
-    return { addVolume, updateDrink, deleteVolume, column_prices, addIngredient, deleteIngredient };
-  },
-});
-</script>
-
-<style scoped></style>

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

@@ -141,7 +141,7 @@
           </div>
           <div class="full-width row jusitfy-between q-gutter-sm q-pa-sm">
             <q-btn v-close-popup label="Abbrechen" @click="cancelAddIngredient" />
-            <q-btn v-close-popup label="Speichern" color="positive" @click="addIngredient" />
+            <q-btn v-close-popup label="Speichern" color="primary" @click="addIngredient" />
           </div>
         </q-menu>
       </q-btn>

src/plugins/pricelist/components/Pricelist.vue

@@ -1,265 +0,0 @@
-<template>
-  <div>
-    <q-table
-      class="full-width"
-      title="Getränke"
-      :columns="columns_drinks"
-      :rows="drinks"
-      row-key="name"
-      :visible-columns="visibleColumn"
-      :filter="search"
-      :filter-method="filter"
-    >
-      <template #top-right>
-        <div class="row q-gutter-sm">
-          <search-input v-model="search" :keys="search_keys" />
-          <q-select
-            v-model="visibleColumn"
-            multiple
-            filled
-            dense
-            options-dense
-            display-value="Sichtbarkeit"
-            emit-value
-            map-options
-            :options="[...columns_drinks, ...columns_volumes, ...columns_prices]"
-            option-value="name"
-            options-cover
-          />
-        </div>
-      </template>
-      <template #body-cell-tags="props">
-        <q-td :props="props">
-          <q-badge
-            v-for="tag in props.row.tags"
-            :key="`${props.row.id}-${tag.id}`"
-            class="q-ma-xs"
-            rounded
-            :style="`background-color: ${tag.color}`"
-          >
-            {{ tag.name }}
-          </q-badge>
-        </q-td>
-      </template>
-      <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
-            :visible-columns="visibleColumn"
-          >
-            <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
-                  :visible-columns="visibleColumn"
-                >
-                  <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>
-      <template #body-cell-picture="drinks_props">
-        <q-td :props="drinks_props" style="min-width: 256px">
-          <q-img
-            loading="lazy"
-            :src="
-              drinks_props.row.uuid
-                ? `/api/pricelist/picture/${drinks_props.row.uuid}?size=256`
-                : 'no-image.svg'
-            "
-            placeholder-src="no-image.svg"
-            fit="contain"
-            style="max-height: 300px"
-          >
-            <template #error>
-              <div class="absolute-full flex flex-center bg-negative text-white">
-                Cannot load image
-              </div>
-            </template>
-          </q-img>
-        </q-td>
-      </template>
-    </q-table>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, onBeforeMount, computed, ref } from 'vue';
-import { usePricelistStore } from '../store';
-import { useMainStore } from 'src/stores';
-import SearchInput from './SearchInput.vue';
-import { filter, Search } from '../utils/filter';
-import { sort } from '../utils/sort';
-export default defineComponent({
-  name: 'Pricelist',
-  components: { SearchInput },
-  filters: {
-    setVolume(volume: number) {
-      if (volume * 10 > 1) {
-        return `${volume}l`;
-      }
-      return `${volume * 100}cl`;
-    },
-    setCurrency(price: number) {
-      return `${price.toFixed(2)}€`;
-    },
-  },
-  props: {
-    public: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup() {
-    let user: string | null;
-    onBeforeMount(() => {
-      void store.getDrinks();
-      try {
-        user = mainStore.currentUser.userid;
-      } catch {
-        user = null;
-      }
-
-      if (user) {
-        store.getPriceCalcColumn(user);
-      }
-    });
-    const store = usePricelistStore();
-    const drinks = computed(() => store.drinks);
-    const columns_drinks = [
-      {
-        name: 'picture',
-        label: 'Bild',
-        align: 'center',
-      },
-      {
-        name: 'name',
-        label: 'Name',
-        field: 'name',
-        align: 'center',
-        sortable: true,
-        filterable: 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),
-        filterable: true,
-      },
-      {
-        name: 'tags',
-        label: 'Tags',
-        field: 'tags',
-        format: (val: Array<FG.Tag>) => {
-          let retVal = '';
-          val.forEach((tag, index) => {
-            if (index > 0) {
-              retVal += ', ';
-            }
-            retVal += tag.name;
-          });
-          return retVal;
-        },
-        filterable: true,
-      },
-
-      {
-        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',
-      },
-    ];
-
-    const canBeVisible = createVisibleColumns();
-    const _visibleColumns = ref(canBeVisible);
-    const visibleColumn = computed({
-      get: () => {
-        if (user) {
-          return store.pricecalc_columns;
-        } else {
-          return _visibleColumns.value;
-        }
-      },
-      set: (val) => {
-        if (user) {
-          store.updatePriceCalcColumn(user, val);
-        } else {
-          _visibleColumns.value = val;
-        }
-      },
-    });
-    const mainStore = useMainStore();
-
-    function createVisibleColumns() {
-      const retVal: Array<string> = [];
-      columns_drinks.forEach((drink) => retVal.push(drink.name));
-      columns_volumes.forEach((volume) => retVal.push(volume.name));
-      columns_prices.forEach((price) => {
-        if (user || price.name !== 'public') retVal.push(price.name);
-      });
-      return retVal;
-    }
-    const search = ref<Search>({ label: '', value: '', key: '' });
-    const search_keys = computed(() => columns_drinks.filter((column) => column.filterable));
-    return {
-      columns_drinks,
-      columns_volumes,
-      columns_prices,
-      drinks,
-      visibleColumn,
-      search,
-      filter,
-      search_keys,
-    };
-  },
-});
-</script>

src/plugins/pricelist/pages/InnerPricelist.vue

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

src/plugins/pricelist/pages/OuterPricelist.vue

@@ -1,12 +1,12 @@
 <template>
-  <pricelist public />
+  <calculation-table public />
 </template>
 
 <script>
-import Pricelist from '../components/Pricelist.vue';
+import CalculationTable from '../components/CalculationTable.vue';
 export default {
   name: 'OuterPricelist',
-  components: { Pricelist },
+  components: { CalculationTable },
 };
 </script>
 

src/plugins/pricelist/pages/Settings.vue

@@ -32,7 +32,7 @@
         class="q-ma-none q-pa-none fit row justify-center content-start items-start"
       >
         <q-tab-panel name="pricelist">
-          <calculation-table />
+          <calculation-table editable />
         </q-tab-panel>
         <q-tab-panel name="extra_ingredients">
           <extra-ingredients />