flaschengeist-frontend/src/plugins/pricelist/components/Pricelist.vue

<template>
  <q-table
    title="Preisliste"
    :columns="columns"
    :rows="drinks"
    :visible-columns="visibleColumns"
    :filter="search"
    :filter-method="filter"
    dense
    :pagination="pagination"
    :fullscreen="fullscreen"
  >
    <template #top-right>
      <div class="row justify-end q-gutter-sm">
        <search-input v-model="search" :keys="options" />
        <q-select
          v-model="visibleColumns"
          multiple
          filled
          dense
          options-dense
          display-value="Sichtbarkeit"
          emit-value
          map-options
          :options="options"
          option-value="name"
          options-cover
        />
        <slot></slot>
        <q-btn
          round
          :icon="fullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
          @click="fullscreen = !fullscreen"
        />
      </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="text-caption"
          rounded
          :style="`background-color: ${tag.color}`"
        >
          {{ tag.name }}
        </q-badge>
      </q-td>
    </template>
    <template #body-cell-public="props">
      <q-td :props="props">
        <q-toggle
          v-model="props.row.public"
          disable
          checked-icon="mdi-earth"
          unchecked-icon="mdi-earth-off"
        />
      </q-td>
    </template>
  </q-table>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount, ref } from 'vue';
import { usePricelistStore } from '../store';
import { useMainStore } from 'src/stores';
import { Search, filter } from 'src/plugins/pricelist/utils/filter';
import SearchInput from 'src/plugins/pricelist/components/SearchInput.vue';
export default defineComponent({
  name: 'Pricelist',
  components: { SearchInput },
  props: {
    public: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const store = usePricelistStore();
    const user = ref('');

    onBeforeMount(() => {
      if (!props.public) {
        user.value = useMainStore().currentUser.userid;
        void store.getDrinks();
        void store.getPriceCalcColumn(user.value);
      } else {
        user.value = '';
      }
    });

    const columns = [
      {
        name: 'name',
        label: 'Name',
        field: 'name',
        sortable: true,
        filterable: true,
      },
      {
        name: 'type',
        label: 'Kategorie',
        field: 'type',
        sortable: true,
        filterable: true,
        format: (val: FG.DrinkType) => val.name,
      },
      {
        name: 'tags',
        label: 'Tags',
        field: 'tags',
        filterable: true,

        format: (val: Array<FG.Tag>) => {
          let retVal = '';
          val.forEach((tag, index) => {
            if (index >= val.length - 1 && index > 0) {
              retVal += ', ';
            }
            retVal += tag.name;
          });
          return retVal;
        },
      },
      {
        name: 'volume',
        label: 'Inhalt',
        field: 'volume',
        filterable: true,
        sortable: true,
        format: (val: number) => `${val.toFixed(3)}L`,
      },
      {
        name: 'price',
        label: 'Preis',
        field: 'price',
        sortable: true,
        filterable: true,
        format: (val: number) => `${val.toFixed(2)}€`,
      },
      {
        name: 'public',
        label: 'Öffentlich',
        field: 'public',
        format: (val: boolean) => (val ? 'Öffentlich' : 'nicht Öffentlich'),
      },
      {
        name: 'description',
        label: 'Beschreibung',
        field: 'description',
        filterable: true,
      },
    ];

    const _options = computed(() => {
      const retVal: Array<{ name: string; label: string; field: string }> = [];
      columns.forEach((col) => {
        if (props.public) {
          if (col.name !== 'public') {
            retVal.push(col);
          }
        } else {
          retVal.push(col);
        }
      });
      return retVal;
    });

    const _colums = computed<Array<string>>(() => {
      const retVal: Array<string> = [];
      columns.forEach((col) => {
        if (props.public) {
          if (col.name !== 'public') {
            retVal.push(col.name);
          }
        } else {
          retVal.push(col.name);
        }
      });
      return retVal;
    });

    const _visibleColumns = ref(_colums.value);

    const visibleColumns = computed({
      get: () => (props.public ? _visibleColumns.value : store.pricecalc_columns),
      set: (val) => {
        if (!props.public) {
          void store.updatePriceCalcColumn(user.value, val);
        } else {
          _visibleColumns.value = val;
        }
      },
    });

    const search = ref<Search>({
      value: '',
      key: '',
      label: '',
    });

    const pagination = ref({
      sortBy: 'name',
      rowsPerPage: 10,
    });

    const fullscreen = ref(false);

    return {
      drinks: computed(() => store.pricelist),
      columns,
      visibleColumns,
      options: _options,
      search,
      filter,
      pagination,
      fullscreen,
    };
  },
});
</script>

<style scoped></style>