fixed ##181

src/components/baruser/CreditLists.vue

@@ -23,18 +23,27 @@
       <AddAmountSkeleton v-if="loading && users.length === 0" />
     </v-container>
     <v-navigation-drawer v-model="menu" right app clipped>
-      <v-list-item-group>
+      <v-list-item-group :key="componentRenderer">
+        <v-list-item inactive>
+          <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)"
         >
-          <v-list-item three-line>
+          <v-list-item three-line inactive @click="storno(message)">
             <v-list-item-content>
+              <v-progress-linear indeterminate v-if="message.loading" />
               <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
               <v-list-item-subtitle>{{ message.message }}</v-list-item-subtitle>
-              <v-list-item-subtitle class="red--text" v-if="message.storno">STORNIERT!!!</v-list-item-subtitle>
+              <v-list-item-subtitle class="red--text" v-if="message.storno"
-              <v-list-item-action-text @click.stop="storno(message)"
+                >STORNIERT!!!</v-list-item-subtitle
+              >
+              <v-list-item-action-text
                 >Klicken um zu Stornieren
               </v-list-item-action-text>
             </v-list-item-content>
@@ -204,12 +213,15 @@ export default {
     return {
       color: 'green accent-4',
       menu: true,
-      dialog: false
+      dialog: false,
+      componentRenderer: 0,
+      timer: ''
     }
   },
   created() {
     this.menu = this.menu_from_store
     this.getUsers()
+    this.timer = setInterval(this.forceRender, 1000)
   },
   methods: {
     ...mapActions({
@@ -218,6 +230,9 @@ export default {
       deactivate: 'barUsers/deactivateMenu',
       commitStorno: 'barUsers/storno'
     }),
+    forceRender() {
+      this.componentRenderer += 1
+    },
     getColor(type) {
       return type === 'credit' ? 'title green--text' : 'title red--text'
     },
@@ -232,10 +247,15 @@ export default {
       }
     },
     storno(message) {
+      console.log('storno')
       if (!message.error) {
         if (!this.under5minutes(message.date)) this.dialog = true
         else {
-          this.commitStorno({username: message.user.username, amount: message.amount, date: message.date})
+          this.commitStorno({
+            username: message.user.username,
+            amount: message.amount,
+            date: message.date
+          })
         }
       }
     }
@@ -279,10 +299,22 @@ export default {
                 } else if (date.getMinutes() < 10) {
                   return 'vor ' + date.getMinutes() + ' Minuten'
                 } else {
-                  return now.getHours() + ':' + now.getMinutes()
+                  return (
+                    (now.getHours() < 10 ? '0' : '') +
+                    now.getHours() +
+                    ':' +
+                    (now.getMinutes() < 10 ? '0' : '') +
+                    now.getMinutes()
+                  )
                 }
               } else {
-                return now.getHours() + ':' + now.getMinutes()
+                return (
+                  (now.getHours() < 10 ? '0' : '') +
+                  now.getHours() +
+                  ':' +
+                  (now.getMinutes() < 10 ? '0' : '') +
+                  now.getMinutes()
+                )
               }
             }
           }
@@ -294,8 +326,10 @@ export default {
           '.' +
           now.getFullYear() +
           ' ' +
+          (now.getHours() < 10 ? '0' : '') +
           now.getHours() +
           ':' +
+          (now.getMinutes() < 10 ? '0' : '') +
           now.getMinutes()
         )
       }

src/store/modules/barUsers.js

@@ -99,6 +99,7 @@ const mutations = {
       user: data.user,
       error: data.error,
       storno: false,
+      loading: false,
       visible: true,
       amount: data.amount,
       date: new Date()
@@ -110,7 +111,8 @@ const mutations = {
       return msg.date - data.date === 0 ? true : false
     })
     if (message) {
-      message.storno = true
+      if (data.storno !== undefined) message.storno = data.storno
+      if (data.loading !== undefined) message.loading = data.loading
     }
   },
   setMenu: (state, value) => {
@@ -189,7 +191,7 @@ const actions = {
     commit('setAllUsersLoading', false)
   },
   async storno({ commit, rootState, dispatch }, data) {
-    commit('setUsersLoading', true)
+    commit('updateMessage', { date: data.date, loading: true })
     try {
       const response = await axios.post(
         url.barU.storno,
@@ -200,12 +202,12 @@ const actions = {
         { headers: { Token: rootState.login.user.accessToken } }
       )
       commit('setUsers', { [response.data.username]: response.data })
-      commit('updateMessage', { date: data.date })
+      commit('updateMessage', { date: data.date, storno: true })
     } catch (e) {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
-    commit('setUsersLoading', false)
+    commit('updateMessage', { date: data.date, loading: false })
   },
   setFilter({ commit }, data) {
     commit('setFilter', data)