From 7289a1724d8283fcaca28e5a2605589f2bbf2b96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Thu, 1 Apr 2021 22:39:54 +0200
Subject: [PATCH] [pricelist][tags] add tags

---
 src/flaschengeist.d.ts                        |   1 +
 .../pricelist/components/CalculationTable.vue | 127 +++++++++++---
 .../pricelist/components/DrinkTypes.vue       |   1 -
 .../pricelist/components/Pricelist.vue        |  29 +++
 src/plugins/pricelist/components/Tags.vue     | 166 ++++++++++++++++++
 src/plugins/pricelist/pages/Receipts.vue      |  20 ++-
 src/plugins/pricelist/pages/Settings.vue      |   7 +-
 src/plugins/pricelist/store.ts                |  23 +++
 8 files changed, 342 insertions(+), 32 deletions(-)
 create mode 100644 src/plugins/pricelist/components/Tags.vue

diff --git a/src/flaschengeist.d.ts b/src/flaschengeist.d.ts
index 216d696..0b0a806 100644
--- a/src/flaschengeist.d.ts
+++ b/src/flaschengeist.d.ts
@@ -132,5 +132,6 @@ declare namespace FG {
   interface Tag {
     id: number;
     name: string;
+    color: string;
   }
 }
diff --git a/src/plugins/pricelist/components/CalculationTable.vue b/src/plugins/pricelist/components/CalculationTable.vue
index b172e3a..976efed 100644
--- a/src/plugins/pricelist/components/CalculationTable.vue
+++ b/src/plugins/pricelist/components/CalculationTable.vue
@@ -123,26 +123,6 @@
             />
           </q-popup-edit>
         </q-td>
-        <q-td key="article_id" :props="drinks_props">
-          {{ drinks_props.row.article_id || 'o.A.' }}
-          <q-popup-edit
-            v-slot="scope"
-            v-model="drinks_props.row.article_id"
-            buttons
-            label-cancel="Abbrechen"
-            label-set="Speichern"
-            @update:modelValue="updateDrink(drinks_props.row)"
-          >
-            <q-input
-              v-model="scope.value"
-              filled
-              dense
-              autofocus
-              clearable
-              @keyup.enter="scope.set"
-            />
-          </q-popup-edit>
-        </q-td>
         <q-td key="drink_type" :props="drinks_props">
           {{ drinks_props.row.type.name }}
           <q-popup-edit
@@ -165,6 +145,79 @@
             />
           </q-popup-edit>
         </q-td>
+        <q-td key="tags" :props="drinks_props">
+          <q-badge
+            v-for="tag in drinks_props.row.tags"
+            :key="`${drinks_props.row.id}-${tag.id}`"
+            class="q-ma-xs"
+            rounded
+            :style="`background-color: ${tag.color}`"
+          >
+            {{ tag.name }}
+          </q-badge>
+          <q-popup-edit
+            v-model="drinks_props.row.tags"
+            buttons
+            label-cancel="Abbrechen"
+            label-set="Speichern"
+            @update:modelValue="updateDrink(drinks_props.row)"
+          >
+            <template #default="scope">
+              <q-select
+                v-model="scope.value"
+                multiple
+                :options="tags"
+                label="Tags"
+                option-label="name"
+                filled
+              >
+                <template #selected-item="item">
+                  <q-chip
+                    removable
+                    :tabindex="item.tabindex"
+                    :style="`background-color: ${item.opt.color}`"
+                    @remove="item.removeAtIndex(item.index)"
+                  >
+                    {{ item.opt.name }}
+                  </q-chip>
+                </template>
+                <template #option="item">
+                  <q-item v-bind="item.itemProps" v-on="item.itemEvents">
+                    <q-chip :style="`background-color: ${item.opt.color}`">
+                      <q-avatar
+                        v-if="item.selected"
+                        icon="mdi-check"
+                        color="positive"
+                        text-color="white"
+                      />
+                      {{ item.opt.name }}
+                    </q-chip>
+                  </q-item>
+                </template>
+              </q-select>
+            </template>
+          </q-popup-edit>
+        </q-td>
+        <q-td key="article_id" :props="drinks_props">
+          {{ drinks_props.row.article_id || 'o.A.' }}
+          <q-popup-edit
+            v-slot="scope"
+            v-model="drinks_props.row.article_id"
+            buttons
+            label-cancel="Abbrechen"
+            label-set="Speichern"
+            @update:modelValue="updateDrink(drinks_props.row)"
+          >
+            <q-input
+              v-model="scope.value"
+              filled
+              dense
+              autofocus
+              clearable
+              @keyup.enter="scope.set"
+            />
+          </q-popup-edit>
+        </q-td>
         <q-td key="volume_package" :props="drinks_props">
           {{ drinks_props.row.volume ? `${drinks_props.row.volume} L` : 'o.A.' }}
           <q-popup-edit
@@ -347,7 +400,8 @@ export default defineComponent({
     const store = usePricelistStore();
 
     onBeforeMount(() => {
-      void store.getDrinkTypes();
+      void store.getDrinkTypes(true);
+      void store.getTags();
       void store.getExtraIngredients();
       void store.get_min_prices();
       store.getPriceCalcColumn(user);
@@ -367,13 +421,7 @@ export default defineComponent({
         sortable: true,
         sort,
       },
-      {
-        name: 'article_id',
-        label: 'Artikelnummer',
-        field: 'article_id',
-        sortable: true,
-        sort,
-      },
+
       {
         name: 'drink_type',
         label: 'Kategorie',
@@ -382,6 +430,28 @@ export default defineComponent({
         sortable: true,
         sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
       },
+      {
+        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;
+        },
+      },
+      {
+        name: 'article_id',
+        label: 'Artikelnummer',
+        field: 'article_id',
+        sortable: true,
+        sort,
+      },
       {
         name: 'volume_package',
         label: 'Inhalt in l des Gebinde',
@@ -547,6 +617,7 @@ export default defineComponent({
       console,
       search,
       filter,
+      tags: computed(() => store.tags),
     };
   },
 });
diff --git a/src/plugins/pricelist/components/DrinkTypes.vue b/src/plugins/pricelist/components/DrinkTypes.vue
index 3071aae..9f51bec 100644
--- a/src/plugins/pricelist/components/DrinkTypes.vue
+++ b/src/plugins/pricelist/components/DrinkTypes.vue
@@ -60,7 +60,6 @@ export default defineComponent({
     const actualDrinkType = ref(emptyDrinkType);
 
     onBeforeMount(() => {
-      console.log(store);
       void store.getDrinkTypes();
     });
     const rows = computed(() => store.drinkTypes);
diff --git a/src/plugins/pricelist/components/Pricelist.vue b/src/plugins/pricelist/components/Pricelist.vue
index 2c539cc..ac0ddde 100644
--- a/src/plugins/pricelist/components/Pricelist.vue
+++ b/src/plugins/pricelist/components/Pricelist.vue
@@ -31,6 +31,19 @@
           />
         </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
@@ -150,6 +163,22 @@ export default defineComponent({
         sortable: true,
         sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
       },
+      {
+        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;
+        },
+      },
+
       {
         name: 'volumes',
         label: 'Preise',
diff --git a/src/plugins/pricelist/components/Tags.vue b/src/plugins/pricelist/components/Tags.vue
new file mode 100644
index 0000000..a2d3039
--- /dev/null
+++ b/src/plugins/pricelist/components/Tags.vue
@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <q-page padding>
+      <q-table title="Tags" :rows="rows" :row-key="(row) => row.id" :columns="columns">
+        <template #top-right>
+          <q-btn color="primary" icon="mdi-plus" label="Hinzufügen">
+            <q-menu v-model="popup" anchor="center middle" self="center middle" persistent>
+              <div>
+                <q-input
+                  v-model="newTag.name"
+                  filled
+                  dense
+                  label="Name"
+                  class="q-pa-sm"
+                  :rule="[notExists]"
+                />
+                <q-color
+                  :model-value="newTag.color"
+                  class="q-pa-sm"
+                  @change="
+                    (val) => {
+                      newTag.color = val;
+                    }
+                  "
+                />
+                <div class="row q-gutter-sm justify-around">
+                  <q-btn v-close-popup label="Abbrechen" />
+                  <q-btn label="Speichern" color="primary" @click="save" />
+                </div>
+              </div>
+            </q-menu>
+          </q-btn>
+        </template>
+        <template #header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              {{ col.label }}
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template #body="props">
+          <q-tr :props="props">
+            <q-td key="name" :props="props">
+              {{ props.row.name }}
+              <q-popup-edit
+                v-model="props.row.name"
+                buttons
+                label-cancel="Abbrechen"
+                label-set="Speichern"
+                @update:modelValue="updateTag(props.row)"
+              >
+                <template #default="scope">
+                  <div class="fit row justify-around">
+                    <q-input v-model="scope.value" :rules="[notExists]" dense filled />
+                  </div>
+                </template>
+              </q-popup-edit>
+            </q-td>
+            <q-td key="color" :props="props">
+              <div class="full-width row q-gutter-sm justify-end items-center">
+                <div>
+                  {{ props.row.color }}
+                </div>
+                <div class="color-box" :style="`background-color: ${props.row.color};`">&nbsp;</div>
+              </div>
+              <q-popup-edit
+                v-model="props.row.color"
+                buttons
+                label-cancel="Abbrechen"
+                label-set="Speichern"
+                @update:modelValue="updateTag(props.row)"
+              >
+                <template #default="slot">
+                  <div class="fit row justify-around">
+                    <q-color :model-value="slot.value" @change="(val) => (slot.value = val)" />
+                  </div>
+                </template>
+              </q-popup-edit>
+            </q-td>
+            <q-td>
+              <q-btn
+                icon="mdi-delete"
+                color="negative"
+                round
+                size="sm"
+                @click="deleteTag(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-page>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onBeforeMount, computed } from 'vue';
+import { usePricelistStore } from '../store';
+
+export default defineComponent({
+  name: 'Tags',
+  setup() {
+    const store = usePricelistStore();
+    onBeforeMount(() => {
+      void store.getTags();
+    });
+    const columns = [
+      {
+        name: 'name',
+        label: 'Name',
+        field: 'name',
+      },
+      {
+        name: 'color',
+        label: 'Farbe',
+        field: 'color',
+      },
+    ];
+    const rows = computed(() => store.tags);
+    const emptyTag = {
+      id: -1,
+      color: '#1976d2',
+      name: '',
+    };
+
+    async function save() {
+      await store.setTag(newTag.value);
+      popup.value = false;
+      newTag.value = emptyTag;
+    }
+
+    const newTag = ref(emptyTag);
+    const popup = ref(false);
+    function notExists(val: string) {
+      const index = store.tags.findIndex((a) => a.name === val);
+      if (index > -1) {
+        return 'Tag existiert bereits.';
+      }
+      return true;
+    }
+    return {
+      columns,
+      rows,
+      newTag,
+      popup,
+      save,
+      updateTag: store.updateTag,
+      notExists,
+      deleteTag: store.deleteTag,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.color-box {
+  min-width: 28px;
+  min-heigh: 28px;
+  max-width: 28px;
+  max-height: 28px;
+  border-width: 1px;
+  border-color: black;
+  border-radius: 5px;
+}
+</style>
diff --git a/src/plugins/pricelist/pages/Receipts.vue b/src/plugins/pricelist/pages/Receipts.vue
index 6f9c2ba..f29cf14 100644
--- a/src/plugins/pricelist/pages/Receipts.vue
+++ b/src/plugins/pricelist/pages/Receipts.vue
@@ -23,10 +23,26 @@
             "
             placeholder-src="no-image.svg"
           >
-            <div class="absolute-bottom-right text-subtitle2">
-              {{ props.row.name }}
+            <div class="absolute-bottom-right justify-end">
+              <div class="text-subtitle1 text-right">
+                {{ props.row.name }}
+              </div>
+              <div class="text-caption text-right">
+                {{ props.row.type.name }}
+              </div>
             </div>
           </q-img>
+          <q-card-section>
+            <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-card-section>
           <build-manual-volume :volumes="props.row.volumes" />
           <q-card-section>
             <div class="text-h6">Anleitung</div>
diff --git a/src/plugins/pricelist/pages/Settings.vue b/src/plugins/pricelist/pages/Settings.vue
index afe4675..4ef3fd3 100644
--- a/src/plugins/pricelist/pages/Settings.vue
+++ b/src/plugins/pricelist/pages/Settings.vue
@@ -40,6 +40,9 @@
         <q-tab-panel name="drink_types">
           <drink-types />
         </q-tab-panel>
+        <q-tab-panel name="tags">
+          <tags />
+        </q-tab-panel>
       </q-tab-panels>
     </q-page>
   </div>
@@ -51,11 +54,12 @@ import { Screen } from 'quasar';
 import DrinkTypes from 'src/plugins/pricelist/components/DrinkTypes.vue';
 import CalculationTable from 'src/plugins/pricelist/components/CalculationTable.vue';
 import ExtraIngredients from 'src/plugins/pricelist/components/ExtraIngredients.vue';
+import Tags from '../components/Tags.vue';
 import { usePricelistStore } from 'src/plugins/pricelist/store';
 
 export default defineComponent({
   name: 'Settings',
-  components: { ExtraIngredients, DrinkTypes, CalculationTable },
+  components: { ExtraIngredients, DrinkTypes, CalculationTable, Tags },
   setup() {
     interface Tab {
       name: string;
@@ -89,6 +93,7 @@ export default defineComponent({
       { name: 'pricelist', label: 'Getränke' },
       { name: 'extra_ingredients', label: 'Zutaten' },
       { name: 'drink_types', label: 'Getränketypen' },
+      { name: 'tags', label: 'Tags' },
     ];
 
     const tab = ref<string>('pricelist');
diff --git a/src/plugins/pricelist/store.ts b/src/plugins/pricelist/store.ts
index a8e56d2..6b058dc 100644
--- a/src/plugins/pricelist/store.ts
+++ b/src/plugins/pricelist/store.ts
@@ -96,6 +96,7 @@ export const usePricelistStore = defineStore({
     extraIngredients: [] as Array<FG.ExtraIngredient>,
     pricecalc_columns: [] as Array<string>,
     min_prices: [] as Array<number>,
+    tags: [] as Array<FG.Tag>,
   }),
 
   actions: {
@@ -319,6 +320,28 @@ export const usePricelistStore = defineStore({
       await api.delete(`pricelist/drinks/${drink.id}/picture`);
       drink.uuid = '';
     },
+    async getTags() {
+      const { data } = await api.get<Array<FG.Tag>>('/pricelist/tags');
+      this.tags = data;
+    },
+    async setTag(tag: FG.Tag) {
+      const { data } = await api.post<FG.Tag>('/pricelist/tags', tag);
+      this.tags.push(data);
+    },
+    async updateTag(tag: FG.Tag) {
+      const { data } = await api.put<FG.Tag>(`/pricelist/tags/${tag.id}`, tag);
+      const index = this.tags.findIndex((a) => a.id === data.id);
+      if (index > -1) {
+        this.tags[index] = data;
+      }
+    },
+    async deleteTag(tag: FG.Tag) {
+      await api.delete(`/pricelist/tags/${tag.id}`);
+      const index = this.tags.findIndex((a) => a.id === tag.id);
+      if (index > -1) {
+        this.tags.splice(index, 1);
+      }
+    },
   },
 });