From 72e2606ed24079eddf0369a16a9db7128d2248ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Thu, 20 Aug 2020 22:05:20 +0200
Subject: [PATCH] =?UTF-8?q?Backendconnection=20f=C3=BCr=20FreeDrinkListHis?=
 =?UTF-8?q?toryWorkgroup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Es können jetzt auch Freigetränke für mit verschiedenen Gründen und Beschreibungen angelegt werden. Count ist vernachlässigt worden und muss größer als 0 sein. Es kann ebenfalls storniert werden.
---
 package-lock.json                             |  29 +-
 package.json                                  |   2 +-
 src/components/baruser/BarFreedrinks.vue      |  42 ++-
 .../user/freedrink/freedrinkUserView.vue      | 333 +++++++++++-------
 src/plugins/routes.js                         |   1 +
 src/store/modules/freeDrinkList.js            |  47 ++-
 6 files changed, 282 insertions(+), 172 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e8b918a..b099db4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1707,10 +1707,13 @@
           "dev": true
         },
         "serialize-javascript": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.0.0.tgz",
-          "integrity": "sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw==",
-          "dev": true
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
+          "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
         },
         "source-map": {
           "version": "0.6.1",
@@ -4538,9 +4541,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",
@@ -6842,9 +6845,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
       "dev": true
     },
     "lodash.defaultsdeep": {
@@ -11026,9 +11029,9 @@
       "dev": true
     },
     "vuetify": {
-      "version": "2.2.29",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.2.29.tgz",
-      "integrity": "sha512-UI1i8kEdV+s7tNQe2yJJMPlvxGTE8cZfUAXEGV2yO4owHmeybn6p5YzFpJqimoKkfX6ok+zV29+6yIKfkyUDAA=="
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.9.tgz",
+      "integrity": "sha512-E5K9flTvS21tCkHgqDBMl0BY/Rld4SLUaJpQ+sQdL8/2uPcWmWLrdumn4SI8LBFojE0UP1GSaH4zKuxLL36fYg=="
     },
     "vuetify-loader": {
       "version": "1.4.4",
diff --git a/package.json b/package.json
index 7240f50..b36db1e 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.10",
     "vue-router": "^3.2.0",
-    "vuetify": "^2.2.29",
+    "vuetify": "^2.3.8",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
diff --git a/src/components/baruser/BarFreedrinks.vue b/src/components/baruser/BarFreedrinks.vue
index 10ecf09..bc47eba 100644
--- a/src/components/baruser/BarFreedrinks.vue
+++ b/src/components/baruser/BarFreedrinks.vue
@@ -110,27 +110,6 @@
           <v-list-item-title class="headline">Verlauf</v-list-item-title>
         </v-list-item>
         <v-divider />
-        <!-- <div
-          v-for="message in messages"
-          three-line
-          :key="messages.indexOf(message)"
-          class="history-item"
-        >
-          <v-list-item three-line inactive @click="canceledAmount(message)">
-            <v-list-item-content>
-              <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
-              <v-list-item-subtitle>
-                {{
-                createMessage(message)
-                }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle class="red--text" v-if="message.canceled">STORNIERT!!!</v-list-item-subtitle>
-              <v-list-item-action-text
-                v-if="isStronoEnabled(message.date) && !message.canceled"
-              >Klicken um zu Stornieren</v-list-item-action-text>
-            </v-list-item-content>
-          </v-list-item>
-        </div> -->
         <div
           v-for="freeDrinkHistory in free_drink_list_history"
           :key="freeDrinkHistory.id"
@@ -322,7 +301,26 @@ export default {
       this.canceledMessage.canceled = true
       this.update_free_drink_list_history(this.canceledMessage)
       this.cancelCanceled()
-    }
+    },
+    acceptStorno() {
+      this.stornoMessage.storno = true
+      this.amount -= this.stornoMessage.amount
+      console.log(this.amount, this.stornoMessage)
+      this.cancelStorno()
+    },
+    stornoAmount(message) {
+      if (!this.isStronoEnabled(message.date) || message.storno) {
+        return
+      }
+
+      this.showConfirmStornoDialog = true
+      this.stornoMessage = message
+    },
+
+    cancelStorno() {
+      this.showConfirmStornoDialog = null
+      this.stornoMessage = null
+    },
   },
   computed: {
     ...mapGetters('freeDrinkList', [
diff --git a/src/components/user/freedrink/freedrinkUserView.vue b/src/components/user/freedrink/freedrinkUserView.vue
index 4362dea..1a94a5a 100644
--- a/src/components/user/freedrink/freedrinkUserView.vue
+++ b/src/components/user/freedrink/freedrinkUserView.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-container>
-      <v-card class="mx-auto" outlined>
+      <v-card class="mx-auto" outlined v-if="!first_loading" :loading="loading">
         <v-card-title>
           <div class="title">Freigetränk für Versammlungen/Arbeit</div>
           <v-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
@@ -9,95 +9,38 @@
           </v-btn>
         </v-card-title>
         <v-card-text>
-          <v-row v-if="!loading">
+          <v-row v-if="!first_loading">
             <v-col cols="12">
               <v-row>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(140, 'Bier')"
-                  >Bier</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
+                <v-col
+                  v-for="freeDrink in free_drink_list_config_workgroup"
+                  :key="freeDrink.id"
+                  cols="6"
+                  xs="3"
+                  sm="4"
+                  class="drinkCol"
+                >
                   <v-btn
                     class="drinkBtn"
                     block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(200, 'Cuba')"
-                  >Cuba</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(50, 'Schnaps')"
-                  >Schnaps</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(200, 'Wein')"
-                  >Wein</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(200, 'Gin Tonic')"
-                  >Gin Tonic</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(100, 'Fritz')"
-                  >Fritz</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(100, 'Saft')"
-                  >Saft</v-btn>
-                </v-col>
-                <v-col cols="6" xs="3" sm="4" class="drinkCol">
-                  <v-btn
-                    class="drinkBtn"
-                    block
-                    :disabled="locked"
-                    :color="color"
-                    @click="addAmount(30, 'Wasser')"
-                  >Wasser</v-btn>
+                    :color="color_fix"
+                    @click="addAmount(freeDrink, freeDrinkTypeWorkgroup)"
+                    >{{ freeDrink.label }}</v-btn
+                  >
                 </v-col>
               </v-row>
-              <v-row v-if="!loading">
-                <v-col cols="8">
-                  <v-text-field
-                    outlined
-                    type="number"
-                    label="Benutzerdefinierter Betrag"
-                    :disabled="locked"
-                    v-model="customValue"
-                  ></v-text-field>
-                </v-col>
-                <v-col cols="2">
-                  <v-btn fab :color="color" :disabled="locked" @click="addAmount(customValue)">
-                    <v-icon>{{ plus }}</v-icon>
-                  </v-btn>
+              <v-row v-if="!first_loading" class="justify-end">
+                <v-col cols="3">
+                  <v-list-item>
+                    <v-list-item-content class="text-center">
+                      <v-list-item-action-text class="title">
+                        {{
+                          free_drink_list_history_workgroup_without_canceled.length
+                        }}
+                        Getränke
+                      </v-list-item-action-text>
+                    </v-list-item-content>
+                  </v-list-item>
                 </v-col>
               </v-row>
             </v-col>
@@ -113,52 +56,80 @@
         </v-list-item>
         <v-divider />
         <div
-          v-for="message in messages"
-          :key="messages.indexOf(message)"
-          class="history-item"
+          v-for="freeDrinkHistory in free_drink_list_history_workgroup"
+          :key="freeDrinkHistory.id"
         >
-          <!-- <v-list-item three-line inactive @click="stornoAmount(message)"> -->
-          <v-list-item inactive>
+          <v-list-item
+            three-line
+            inactive
+            @click="canceledAmount(freeDrinkHistory)"
+          >
             <v-list-item-content>
-              <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
-              <v-list-item-action-text>
+              <v-list-item-title>{{
+                now(freeDrinkHistory.timestamp)
+              }}</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ freeDrinkHistory.free_drink_config.label }} wurde für
                 {{
-                createMessage(message)
+                  (freeDrinkHistory.free_drink_config.price / 100).toFixed(2)
                 }}
-              </v-list-item-action-text>
-              <!-- <v-list-item-subtitle class="red--text" v-if="message.storno">STORNIERT!!!</v-list-item-subtitle>
+                € hinzugefügt.
+              </v-list-item-subtitle>
+              <v-list-item-subtitle
+                class="red--text"
+                v-if="freeDrinkHistory.canceled"
+                >STORNIERT!!!</v-list-item-subtitle
+              >
               <v-list-item-action-text
-                v-if="isStronoEnabled(message.date) && !message.storno"
-              >Klicken um zu Stornieren</v-list-item-action-text>-->
+                v-if="
+                  isStronoEnabled(freeDrinkHistory.timestamp) &&
+                    !freeDrinkHistory.canceled
+                "
+                >Klicken um zu Stornieren</v-list-item-action-text
+              >
             </v-list-item-content>
           </v-list-item>
         </div>
       </v-list-item-group>
     </v-navigation-drawer>
 
-    <!-- <v-dialog v-model="showConfirmStornoDialog" max-width="290">
+    <v-dialog v-model="showConfirmCanceledDialog" max-width="290">
       <v-card>
         <v-card-title>Willst du wirklich??</v-card-title>
-        <v-card-text v-if="stornoMessage">
-          Willst du wirklich den Betrag
-          {{ (stornoMessage.amount / 100).toFixed(2) }}€ von
-          den Dienstgetränke stornieren?
+        <v-card-text v-if="canceledMessage">
+          {{ canceledMessage.free_drink_type.name }}: Willst du wirklich ein
+          {{ canceledMessage.free_drink_config.label }} im Wert von
+          {{ (canceledMessage.free_drink_config.price / 100).toFixed(2) }} €
+          stornieren?
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn text @click="cancelStorno">Abbrechen</v-btn>
-          <v-btn text @click="acceptStorno">Stornieren</v-btn>
+          <v-btn text @click="cancelCanceled">Abbrechen</v-btn>
+          <v-btn text @click="acceptCanceled">Stornieren</v-btn>
         </v-card-actions>
       </v-card>
-    </v-dialog>-->
+    </v-dialog>
 
     <v-dialog v-model="showReasonDialog" max-width="290">
       <v-card>
         <v-card-title>Willst du wirklich??</v-card-title>
         <v-card-text>
-          <v-combobox v-model="selectedReason" :items="getReason()" label="Grund fürs Getränk"></v-combobox>
-          <v-textarea label="Beschreibung" v-model="reasonDescription"></v-textarea>
-          <v-text-field type="number" label="Anzahl der Getränke" v-model="drinkCount"></v-text-field>
+          <v-combobox
+            v-model="selectedReason"
+            :items="free_drink_list_reasons"
+            item-value="id"
+            item-text="name"
+            label="Grund fürs Getränk"
+          ></v-combobox>
+          <v-textarea
+            label="Beschreibung"
+            v-model="reasonDescription"
+          ></v-textarea>
+          <v-text-field
+            type="number"
+            label="Anzahl der Getränke"
+            v-model="drinkCount"
+          ></v-text-field>
         </v-card-text>
         <v-card-actions>
           <v-spacer />
@@ -168,37 +139,81 @@
       </v-card>
     </v-dialog>
 
-    <v-container v-if="loading">
+    <v-container v-if="first_loading">
       <AddAmountSkeleton />
     </v-container>
+
+    <v-snackbar
+      :color="
+        snackbar_messages.length > 0
+          ? snackbar_messages[0].error
+            ? 'error'
+            : 'success'
+          : 'success'
+      "
+      bottom
+      :timeout="0"
+      :multi-line="true"
+      :value="
+        snackbar_messages.length > 0 ? snackbar_messages[0].visible : null
+      "
+      vertical
+    >
+      <v-list-item
+        v-for="(message, index) in snackbar_messages"
+        :key="index"
+        :style="
+          message.error
+            ? 'background-color: #FF5252;'
+            : 'background-color: #4CAF50;'
+        "
+        v-show="message.visible"
+      >
+        <v-list-item-content>
+          <v-list-item-title style="color: white">
+            {{ createMessage(message) }}
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-action v-if="message.error">
+          <v-btn icon @click="message.visible = false">
+            <v-icon color="white">
+              mdi-close
+            </v-icon>
+          </v-btn>
+        </v-list-item-action>
+      </v-list-item>
+    </v-snackbar>
   </div>
 </template>
 <script>
 // eslint-disable-next-line no-unused-vars
 import AddAmountSkeleton from '../Skeleton/AddAmountSkeleton'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import { mdiPlus, mdiMenu } from '@mdi/js'
 
 export default {
   name: 'FreedrinkUserView',
   components: { AddAmountSkeleton },
   created() {
-    this.loading = false
     // this.timer = setInterval(() => (this.componentRenderer += 1), 1000)
+    this.get_free_drink_list_config()
+    this.get_free_drink_list_history()
+    this.get_free_drink_list_reasons()
   },
   data() {
     return {
       plus: mdiPlus,
       menuIcon: mdiMenu,
-      loading: true,
       locked: false,
-      showConfirmStornoDialog: false,
+      showConfirmCanceledDialog: false,
       showReasonDialog: false,
-      stornoMessage: null,
       customValue: null,
       color: 'green accent-4',
+      color_fix: 'green accent-4',
       messages: [],
       amount: 0,
+      free_drink: null,
+      free_drink_type_id: null,
       selectedDrink: null,
       drinkCount: 1,
       timer: '',
@@ -206,10 +221,19 @@ export default {
       isMenuShow: false,
       selectedReason: null,
       reasonDescription: null,
-      snackbarTimeout: 3000
+      freeDrinkTypeWorkgroup: 2,
+      snackbarTimeout: 3000,
+      canceledMessage: null
     }
   },
   methods: {
+    ...mapActions('freeDrinkList', [
+      'get_free_drink_list_config',
+      'get_free_drink_list_history',
+      'get_free_drink_list_reasons',
+      'set_free_drink_list_history',
+      'update_free_drink_list_history'
+    ]),
     getReason() {
       const reasonArray = []
       if (!this.user) {
@@ -233,12 +257,11 @@ export default {
 
       return reasonArray
     },
-    addAmount(amount, drink) {
-      if (amount) {
+    addAmount(free_drink, free_drink_type_id) {
+      if (free_drink) {
         this.showReasonDialog = true
-        this.amount = amount
-        this.selectedDrink = drink
-        console.log(this.user)
+        this.free_drink = free_drink
+        this.free_drink_type_id = free_drink_type_id
       }
     },
     stornoAmount(message) {
@@ -257,10 +280,13 @@ export default {
 
     confirmFreeDrink() {
       if (this.drinkCount >= 0) {
-        console.log(this.selectedReason)
-        console.log(this.reasonDescription)
-        console.log(this.drinkCount)
-        this.generateMessage()
+        this.set_free_drink_list_history({
+          ...this.free_drink,
+          free_drink_type_id: this.free_drink_type_id,
+          free_drink_list_reason_id: this.selectedReason.id,
+          description: this.reasonDescription,
+          count: this.drinkCount
+        })
       }
       this.cancelFreedrink()
     },
@@ -271,6 +297,8 @@ export default {
       this.selectedReason = null
       this.reasonDescription = null
       this.drinkCount = 0
+      this.free_drink_type_id = null
+      this.free_drink = null
     },
     generateMessage() {
       this.messages.push({
@@ -285,18 +313,22 @@ export default {
     createMessage(message) {
       var text = ''
       if (message.error) {
-        text = 'ERROR: Freigetränk konnt enicht genommen werden'
+        text =
+          'ERROR: ' +
+          message.free_drink_type.name +
+          ': Konnte ' +
+          message.label +
+          ' für ' +
+          (message.price / 100).toFixed(2) +
+          '€ nicht hinzufügen.'
       } else {
         text =
-          this.user.firstname +
-          ' hat sich ' +
-          message.drinkCount +
-          ' ' +
-          this.selectedDrink +
-          ' als Freigetränk im Wert von ' +
-          (message.drinkCount * message.amount / 100).toFixed(2) +
-          '€ genommen weil ' +
-          message.selectedReason
+          message.free_drink_type.name +
+          ': ' +
+          message.label +
+          ' wurde für ' +
+          (message.price / 100).toFixed(2) +
+          '€ hinzugefügt.'
       }
       return text
     },
@@ -311,12 +343,39 @@ export default {
       this.amount -= this.stornoMessage.amount
       console.log(this.amount, this.stornoMessage)
       this.cancelStorno()
-    }
+    },
+    acceptCanceled() {
+      this.canceledMessage.canceled = true
+      this.update_free_drink_list_history(this.canceledMessage)
+      this.cancelCanceled()
+    },
+    canceledAmount(historyElement) {
+      if (!this.isStronoEnabled(historyElement.timestamp)) {
+        return
+      }
+      this.showConfirmCanceledDialog = true
+      this.canceledMessage = historyElement
+    },
+
+    cancelCanceled() {
+      this.showConfirmCanceledDialog = null
+      this.canceledMessage = null
+    },
   },
   computed: {
     ...mapGetters({
       user: 'user/user'
     }),
+    ...mapGetters('freeDrinkList', [
+      'free_drink_list_config_workgroup',
+      'free_drink_list_history',
+      'loading',
+      'free_drink_list_reasons',
+      'free_drink_list_reasons_loading',
+      'free_drink_list_history_workgroup_without_canceled',
+      'free_drink_list_history_workgroup',
+      'snackbar_messages'
+    ]),
     now() {
       return now => {
         var actual = new Date()
@@ -371,6 +430,13 @@ export default {
         var actual = new Date()
         return actual - now < 60000
       }
+    },
+    first_loading() {
+      return (
+        this.loading &&
+        this.free_drink_list_history.length == 0 &&
+        this.free_drink_list_config_workgroup.length == 0
+      )
     }
   },
   beforeDestroy() {
@@ -404,4 +470,3 @@ export default {
   cursor: pointer;
 }
 </style>
-
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index ae326d3..6d9c6e1 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -31,6 +31,7 @@ const url = {
   freeDrinkListConfig: main + 'freeDrinkListConfig',
   freeDrinkListHistory: main + 'freeDrinkListHistory',
   deleteDrinkListHistory: main + 'deleteDrinkListHistory',
+  freeDrinkListReasons: main + 'freeDrinkListReasons',
   vorstand: {
     sm: {
       addUser: main + 'sm/addUser',
diff --git a/src/store/modules/freeDrinkList.js b/src/store/modules/freeDrinkList.js
index 84ca3a7..338aafb 100644
--- a/src/store/modules/freeDrinkList.js
+++ b/src/store/modules/freeDrinkList.js
@@ -5,8 +5,10 @@ const timeout = 20000
 const state = {
   free_drink_list_config: [],
   free_drink_list_history: [],
+  free_drink_list_reasons: [],
   free_drink_list_config_loading: false,
   free_drink_list_history_loading: false,
+  free_drink_list_reasons_loading: false,
   snackbar_messages: []
 }
 
@@ -34,6 +36,9 @@ const mutations = {
   set_free_drink_list_history_loading(state, loading) {
     state.free_drink_list_history_loading = loading
   },
+  set_free_drink_list_reasons_loading(state, loading) {
+    state.free_drink_list_reasons_loading = loading
+  },
   add_snackbar_message(state, { data, error }) {
     data.error = error
     data.visible = true
@@ -47,6 +52,9 @@ const mutations = {
     }, 5000)
     console.log(data)
     state.snackbar_messages.unshift(data)
+  },
+  set_free_drink_list_reasons(state, data) {
+    state.free_drink_list_reasons = data
   }
 }
 
@@ -114,12 +122,12 @@ const actions = {
   async update_free_drink_list_history({ commit, dispatch, rootState }, data) {
     try {
       commit('set_free_drink_list_history_loading', true)
-      await axios.put(
+      const response = await axios.put(
         url.freeDrinkListHistory,
         { ...data },
         { headers: { Token: rootState.login.user.accessToken }, timeout }
       )
-      commit('set_free_drink_list_history', data)
+      commit('set_free_drink_list_history', response.data)
       commit('add_snackbar_message', { data, error: false })
     } catch (e) {
       dispatch('connectionError/addError', null, { root: true })
@@ -131,6 +139,25 @@ const actions = {
     } finally {
       commit('set_free_drink_list_history_loading', false)
     }
+  },
+  async get_free_drink_list_reasons({ commit, dispatch, rootState }) {
+    try {
+      commit('set_free_drink_list_reasons_loading', true)
+      const response = await axios.get(url.freeDrinkListReasons, {
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_reasons', response.data)
+    } catch (e) {
+      dispatch('connectionError/addError', null, { root: true })
+      if (e.message == 'Network Error') {
+        dispatch('connectionError/addError', null, { root: true })
+      }
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    } finally {
+      commit('set_free_drink_list_reasons_loading', false)
+    }
   }
 }
 
@@ -183,6 +210,16 @@ const getters = {
     })
     return credit
   },
+  free_drink_list_history_workgroup_without_canceled(state) {
+    return state.free_drink_list_history.filter(item => {
+      return item.free_drink_type.id == 2 && !item.canceled
+    })
+  },
+  free_drink_list_history_workgroup(state) {
+    return state.free_drink_list_history.filter(item => {
+      return item.free_drink_type.id == 2
+    })
+  },
   loading(state) {
     return (
       state.free_drink_list_history_loading ||
@@ -191,6 +228,12 @@ const getters = {
   },
   snackbar_messages(state) {
     return state.snackbar_messages
+  },
+  free_drink_list_reasons(state) {
+    return state.free_drink_list_reasons
+  },
+  free_drink_list_reasons_loading(state) {
+    return state.free_drink_list_reasons_loading
   }
 }