Löschen, Modifizieren und Hinzufügen von Freigetränken

Der Vorstand kann nun Freigetränke löschen, modifizieren und hinzufügen.

src/components/vorstand/FreeDrinkList/FreeDrinkListConfig.vue

@@ -9,83 +9,121 @@
           <template
               v-for="(free_drink_config, index) in free_drink_list_config">
             <v-list-item
-                :key="index">
+                :key="free_drink_config.label"
+            >
               <v-list-item-content>
-                <v-row>
+                <FreeDrinkListConfigConfigItem :free_drink_config="free_drink_config" @save="save" @delete_free_drink_list_config="delete_free_drink_config" />
-                  <v-col>
-                    <v-text-field
-                        outlined
-                        label="Label"
-                        :value="free_drink_config.label"
-                    />
-                  </v-col>
-                  <v-col>
-                    <v-autocomplete
-                        outlined
-                        label="Zugeordnetes Getränk"
-                        :items="priceList"
-                        :item-text="item => {return item.name + '/' + (item.price_club/100).toFixed(2) + '€'}"
-                        item-value="id"
-                        :value="free_drink_config.drink"
-                    />
-                  </v-col>
-                  <v-col>
-                    <v-autocomplete
-                        outlined
-                        label="Freigetränkaufnahme"
-                        multiple
-                        :items="free_drink_types"
-                        item-text="name"
-                        item-value="id"
-                        :value="free_drink_config.free_drink_types"
-                    />
-                  </v-col>
-                  <v-col>
-                    <v-text-field
-                        outlined
-                        label="Preis in €"
-                        type="number"
-                        :value="(free_drink_config.price / 100).toFixed(2)"
-                    />
-                  </v-col>
-                </v-row>
               </v-list-item-content>
             </v-list-item>
             <v-divider
-                v-if="index + 1 < free_drink_list_config.length"
+                v-if="(index + 1 < free_drink_list_config.length) || new_free_drink_list_config"
                 :key="index"
             />
           </template>
+          <v-list-item v-if="new_free_drink_list_config">
+            <v-list-item-content>
+              <FreeDrinkListConfigConfigItem :free_drink_config="default_model" @save="save" @delete_free_drink_config="new_free_drink_list_config=false"/>
+            </v-list-item-content>
+          </v-list-item>
         </v-list>
       </v-card-text>
       <v-card-actions>
-        <v-btn @click="log">
+        <v-spacer />
-          LOG
+        <v-btn fab color="success" @click="new_free_drink_list_config=true" v-if="!new_free_drink_list_config">
+          <v-icon>mdi-plus</v-icon>
         </v-btn>
       </v-card-actions>
     </v-card>
     <v-card tile>
       <v-card-title>Gründe für Freigetränke</v-card-title>
     </v-card>
+
+    <v-dialog v-model="check_delete_free_drink_list_config" max-width="400">
+        <v-card>
+          <v-card-title>
+            Wirklich löschen?
+          </v-card-title>
+          <v-card-text>
+            Willst du wirklich <span class="font-weight-black">{{check_model.label}}</span> mit dem Getränk <span class="font-weight-black">{{check_model.drink.name}}</span> löschen?
+            Wenn du dies löscht, wird auch der ganze Verlauf gelöscht. Dh. es ist nicht mehr vollständig nachvollziehbar, was getrunken wurde.
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer/>
+            <v-btn @click="cancel_delete()">Abbrechen</v-btn>
+            <v-btn @click="accept_delete()" color="error">Löschen</v-btn>
+          </v-card-actions>
+        </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions} from 'vuex'
+import FreeDrinkListConfigConfigItem
+  from '@/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem'
 export default {
   name: 'FreeDrinkListConfig',
+  components: { FreeDrinkListConfigConfigItem },
+  data() {
+    return {
+      new_free_drink_list_config: false,
+      default_model: {
+        id: -1,
+        label: null,
+        free_drink_types: null,
+        drink: null,
+        price: null
+      },
+      check_model: {
+        label: null,
+        drink: {name: null}
+      },
+      default_check_model: {
+        label: null,
+        drink: {name: null}
+      },
+      check_delete_free_drink_list_config: false
+    }
+  },
   methods: {
+    ...mapActions('freeDrinkList', ['set_free_drink_list_config', 'delete_free_drink_list_config', 'update_free_drink_list_config']),
     log() {
       console.log(this.free_drink_list_config)
+    },
+    reset(free_drink_config) {
+      let data = this.model.find(item => {
+        return item.id == free_drink_config.id
+      })
+      this.set_free_drink_config(data.origin)
+      this.model.splice(this.model.indexOf(data), 1)
+
+    },
+    cancel_delete() {
+      this.check_delete_free_drink_list_config = false
+      this.check_model = Object.assign({}, this.default_check_model)
+    },
+    accept_delete() {
+      this.delete_free_drink_list_config(this.check_model)
+      this.cancel_delete()
+    },
+    delete_free_drink_config(free_drink_config) {
+      Object.assign(this.check_model, free_drink_config)
+      this.check_delete_free_drink_list_config = true
+      console.log(this.check_delete_free_drink_list_config)
+    },
+    save(free_drink_config) {
+      if (free_drink_config.id > 0) {
+        this.update_free_drink_list_config(free_drink_config)
+      } else {
+        this.set_free_drink_list_config(free_drink_config)
+      }
     }
   },
   computed: {
     ...mapGetters('freeDrinkList', [
       'free_drink_list_config',
-      'free_drink_list_reasons',
+      'free_drink_list_reasons'
-        'free_drink_types'
+    ])
-    ]),
-    ...mapGetters('priceList', ["priceList"])
   }
 }
 </script>

src/components/vorstand/FreeDrinkList/FreeDrinkListConfigComponents/FreeDrinkListConfigConfigItem.vue

@@ -0,0 +1,116 @@
+<template>
+<div>
+  <v-form :ref="free_drink_config.id">
+    <v-row>
+      <v-col>
+        <v-text-field
+            outlined
+            label="Label"
+            :value="free_drink_config.label"
+            @change="set_model($event, 'label')"
+        />
+      </v-col>
+      <v-col>
+        <v-autocomplete
+            outlined
+            label="Zugeordnetes Getränk"
+            :items="priceList"
+            :item-text="item => {return item.name + '/' + (item.price_club/100).toFixed(2) + '€'}"
+            item-value="id"
+            :value="free_drink_config.drink"
+            @change="set_model($event, 'drink')"
+            return-object
+        />
+      </v-col>
+      <v-col>
+        <v-autocomplete
+            outlined
+            label="Freigetränkaufnahme"
+            multiple
+            :items="free_drink_types"
+            item-text="name"
+            item-value="id"
+            :value="free_drink_config.free_drink_types"
+            return-object
+            @change="set_model($event, 'free_drink_types')"
+        />
+      </v-col>
+      <v-col>
+        <v-text-field
+            outlined
+            label="Preis in €"
+            type="number"
+            :value="(free_drink_config.price/100).toFixed(2)"
+            @change="set_model(Math.round($event*100), 'price')"
+        />
+      </v-col>
+    </v-row>
+  </v-form>
+  <v-row justify="end">
+    <v-btn
+        v-if="free_drink_config.id > 0"
+        icon
+        class="mr-3"
+        @click="$emit('delete_free_drink_list_config', free_drink_config)">
+      <v-icon>mdi-delete</v-icon>
+    </v-btn>
+    <v-btn
+      v-else
+      fab
+      color="error"
+      x-small
+      class="mr-4"
+      @click="$emit('delete_free_drink_config')"
+      >
+      <v-icon>mdi-minus</v-icon>
+    </v-btn>
+    <v-btn
+        v-if="!is_same || free_drink_config.id < 0"
+        class="mr-3"
+        color="success"
+        @click="() => {$emit('save', model); $emit('delete_free_drink_config'); model = null}"
+    >
+      Save
+    </v-btn>
+  </v-row>
+</div>
+</template>
+
+<script>
+import {mapGetters} from 'vuex'
+export default {
+name: "FreeDrinkListConfigConfigItem",
+  props: ['free_drink_config'],
+  data() {
+  return {
+    model: null
+  }
+  },
+  methods: {
+    set_model(event, type) {
+      console.log(!!this.model)
+      if (!this.model) {
+        this.model = Object.assign({}, this.free_drink_config)
+      }
+      if (type == 'drink') {
+        this.model.drink_id = event.id
+      }
+      this.model[type] = event
+      console.log(this.model)
+    }
+  },
+  computed: {
+  ...mapGetters('freeDrinkList', [
+    'free_drink_types']),
+    ...mapGetters('priceList', ["priceList"]),
+    is_same() {
+      console.log(this.model ? 'yo': 'no')
+      return this.model ? JSON.stringify(this.model) == JSON.stringify(this.free_drink_config) : true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/plugins/routes.js

@@ -33,6 +33,7 @@ const url = {
   deleteDrinkListHistory: main + 'deleteDrinkListHistory',
   freeDrinkListReasons: main + 'freeDrinkListReasons',
   freeDrinkTypes: main + 'freeDrinkTypes',
+  deleteFreeDrinkListConfig: main + 'deleteFreeDrinkListConfig',
   vorstand: {
     sm: {
       addUser: main + 'sm/addUser',

src/store/modules/freeDrinkList.js

@@ -63,6 +63,12 @@ const mutations = {
   },
   set_free_drink_types_loading(state, loading) {
     state.free_drink_types_loading = loading
+  },
+  set_free_drink_config(state, data) {
+    let config = state.free_drink_list_config.find(item => {
+      return item.id == data.id
+    })
+    Object.assign(config, data)
   }
 }
 
@@ -185,6 +191,63 @@ const actions = {
     } finally {
       commit('set_free_drink_types_loading', false)
     }
+  },
+  async set_free_drink_list_config({commit, dispatch, rootState}, data) {
+    try {
+      commit('set_free_drink_list_config_loading', true)
+      const response = await axios.post(url.freeDrinkListConfig, {...data},{
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_config', 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_config_loading', false)
+    }
+  },
+  async update_free_drink_list_config({commit, dispatch, rootState}, data) {
+    try {
+      commit('set_free_drink_list_config_loading', true)
+      const response = await axios.put(url.freeDrinkListConfig, {...data},{
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_config', 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_config_loading', false)
+    }
+  },
+  async delete_free_drink_list_config({commit, dispatch, rootState}, data) {
+    try {
+      commit('set_free_drink_list_config_loading', true)
+      const response = await axios.post(url.deleteFreeDrinkListConfig, {...data},{
+        headers: { Token: rootState.login.user.accessToken },
+        timeout
+      })
+      commit('set_free_drink_list_config', 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_config_loading', false)
+    }
   }
 }
 
@@ -267,6 +330,9 @@ const getters = {
   },
   free_drink_types_loading(state) {
     return state.free_drink_types_loading
+  },
+  free_drink_list_config_by_id: (state) => (id) => {
+    return state.free_drink_list_config.find(item => { return item.id == id})
   }
 }