added loading utilities for every view

src/components/baruser/CreditLists.vue

@@ -1,9 +1,12 @@
 <template>
   <div>
+    <v-container>
+      <AddAmountSkeleton v-if="loading" />
+    </v-container>
     <div v-for="user in users" :key="users.indexOf(user)">
       <div v-if="isFiltered(user)">
         <v-container>
-          <v-card>
+          <v-card :loading="user.loading">
             <v-list-item>
               <v-list-item-title class="title"
                 >{{ user.firstname }} {{ user.lastname }}</v-list-item-title
@@ -117,9 +120,11 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+import AddAmountSkeleton from '../user/Skeleton/AddAmountSkeleton'
 
 export default {
   name: 'CreditLists',
+  components: { AddAmountSkeleton },
   props: {},
   data() {
     return {
@@ -151,7 +156,8 @@ export default {
   computed: {
     ...mapGetters({
       users: 'barUsers/users',
-      filter: 'barUsers/filter'
+      filter: 'barUsers/filter',
+      loading: 'barUsers/usersLoading'
     })
   }
 }

src/components/baruser/SearchBar.vue

@@ -13,6 +13,7 @@
           item-text="fullName"
           prepend-inner-icon="search"
           full-width
+          :loading="loading"
           :search-input.sync="filter"
         />
         <v-btn text @click="addUser">Hinzufügen</v-btn>
@@ -48,7 +49,10 @@ export default {
     }
   },
   computed: {
-    ...mapGetters({ allUsers: 'barUsers/allUsers' })
+    ...mapGetters({
+      allUsers: 'barUsers/allUsers',
+      loading: 'barUsers/allUsersLoading'
+    })
   },
   watch: {
     filter(val) {

src/components/finanzer/Overview.vue

@@ -27,6 +27,7 @@
           item-text="fullName"
           prepend-inner-icon="search"
           full-width
+          :loading="allUsersLoading"
           :search-input.sync="filter"
         />
         <v-btn
@@ -62,10 +63,12 @@
         </v-expand-transition>
       </v-card>
     </v-expand-transition>
+    <TableSkeleton v-if="loading" />
     <div v-for="user in users" :key="users.indexOf(user)">
       <v-card
         v-if="user.creditList[year] && isFiltered(user)"
         style="margin-top: 3px"
+        :loading="user.loading"
       >
         <v-card-title>{{ user.lastname }}, {{ user.firstname }}</v-card-title>
         <Table v-bind:user="user" v-bind:year="year" />
@@ -206,9 +209,10 @@
 <script>
 import Table from './Table'
 import { mapGetters, mapActions } from 'vuex'
+import TableSkeleton from './Skeleton/TableSkeleton'
 export default {
   name: 'Overview',
-  components: { Table },
+  components: { TableSkeleton, Table },
   props: {},
   data() {
     return {
@@ -369,7 +373,9 @@ export default {
       errorMails: 'finanzerUsers/errorMails',
       year: 'finanzerUsers/year',
       years: 'finanzerUsers/years',
-      months: 'finanzerUsers/months'
+      months: 'finanzerUsers/months',
+      loading: 'finanzerUsers/usersLoading',
+      allUsersLoading: 'finanzerUsers/allUsersLoading'
     })
   }
 }

src/components/finanzer/Skeleton/TableSkeleton.vue

@@ -4,8 +4,10 @@
       <v-card-title>
         <v-skeleton-loader type="heading" />
       </v-card-title>
+      <v-container>
         <v-skeleton-loader type="table-thead"/>
         <v-skeleton-loader type="table-row-divider@3"/>
+      </v-container>
       <v-container fluid>
         <v-row align="start" align-content="start">
           <v-col>
@@ -37,8 +39,9 @@
             </v-row>
             <v-card outlined>
               <v-row>
-                <v-skeleton-loader type="list-item" />
+                <v-card-title>
-                <v-spacer />
+                  <v-skeleton-loader style="margin: 3px; margin-left: 10px" type="chip"/>
+                </v-card-title>
               </v-row>
             </v-card>
           </v-col>

src/components/user/AddAmount.vue

@@ -1,6 +1,7 @@
 <template>
-  <v-container v-if="user">
+  <v-container >
-    <v-card>
+    <AddAmountSkeleton v-if="loading" />
+    <v-card v-if="!loading">
       <v-list-item>
         <v-list-item-title class="title"
           >{{ user.firstname }} {{ user.lastname }}</v-list-item-title
@@ -99,8 +100,10 @@
 
 <script>
   import {mapGetters, mapActions} from 'vuex'
+  import AddAmountSkeleton from './Skeleton/AddAmountSkeleton'
 export default {
   name: 'AddAmount',
+  components: { AddAmountSkeleton },
   data() {
     return {
       color: 'green accent-4'
@@ -123,7 +126,8 @@ export default {
   computed: {
     ...mapGetters({
       user: 'user/user',
-      year: 'user/year'
+      year: 'user/year',
+      loading: 'user/loading'
     }),
   }
 }

src/components/user/CreditOverview.vue

@@ -9,10 +9,12 @@
           style="margin-top: 3px"
           append-icon="search"
           outlined
+          type="number"
           :rules="[isNumber]"
         ></v-text-field>
       </v-toolbar-items>
     </v-toolbar>
+    <CreditOverviewSkeleton v-if="loading" />
     <div v-for="year in years" :key="years.indexOf(year)">
       <v-card style="margin-top: 3px" v-if="isFiltered(year)">
         <v-card-title>{{ year }}</v-card-title>
@@ -67,9 +69,10 @@
 <script>
 import { mapGetters } from 'vuex'
 import Table from '../finanzer/Table'
+import CreditOverviewSkeleton from './Skeleton/CreditOverviewSkeleton'
 export default {
   name: 'CreditOverview',
-  components: { Table },
+  components: { CreditOverviewSkeleton, Table },
   data() {
     return {
       isNumber: value => Number.isInteger(parseInt(value === '' ? 0 : value)) || "Muss eine Zahl sein.",
@@ -89,7 +92,8 @@ export default {
   },
   computed: {
     ...mapGetters({
-      user: 'user/user'
+      user: 'user/user',
+      loading: 'user/loading'
     }),
     years() {
       let years = []

src/components/user/Skeleton/AddAmountSkeleton.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-card>
+    <v-card-title>
+      <v-skeleton-loader type="heading" />
+    </v-card-title>
+    <v-card-text>
+      <v-row>
+        <v-col cols="10">
+          <v-row>
+            <v-col>
+              <v-skeleton-loader type="button" />
+            </v-col>
+            <v-col>
+              <v-skeleton-loader type="button" />
+            </v-col>
+            <v-col>
+              <v-skeleton-loader type="button" />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-skeleton-loader type="button" />
+            </v-col>
+            <v-col>
+              <v-skeleton-loader type="button" />
+            </v-col>
+            <v-col>
+              <v-skeleton-loader type="button" />
+            </v-col>
+          </v-row>
+        </v-col>
+        <v-col align-self="center">
+          <v-row>
+            <v-list-item>
+              <v-skeleton-loader type="chip" />
+            </v-list-item>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'AddAmountSkeleton'
+}
+</script>
+
+<style scoped></style>

src/components/user/Skeleton/CreditOverviewSkeleton.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-card style="margin-top: 3px">
+    <v-card-title><v-skeleton-loader type="heading"/></v-card-title>
+    <v-container>
+      <v-skeleton-loader type="table-thead" />
+      <v-skeleton-loader type="table-row-divider@3" />
+    </v-container>
+    <v-container fluid>
+      <v-col>
+        <v-row>
+          <v-col>
+            <v-skeleton-loader type="chip" />
+          </v-col>
+          <v-col>
+            <v-skeleton-loader type="chip" />
+          </v-col>
+          <v-col>
+            <v-skeleton-loader type="chip" />
+          </v-col>
+          <v-col>
+            <v-skeleton-loader type="chip" />
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-container>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'CreditOverviewSkeleton'
+}
+</script>
+
+<style scoped></style>

src/components/vorstand/ServiceManagementComponents/Day.vue

@@ -9,7 +9,7 @@
       <v-card-text>
         <v-expand-transition>
           <v-row align="center" justify="center" v-if="day.loading">
-            <v-progress-circular indeterminate color="black" />
+            <v-progress-circular indeterminate color="grey" />
           </v-row>
         </v-expand-transition>
         <v-expand-transition>

src/store/modules/barUsers.js

@@ -4,7 +4,9 @@ import url from '@/plugins/routes'
 const state = {
   users: [],
   allUsers: [],
-  filter: ''
+  filter: '',
+  usersLoading: false,
+  allUsersLoading: false
 }
 
 const mutations = {
@@ -36,12 +38,21 @@ const mutations = {
           lastname: users[user].lastname,
           locked: users[user].locked,
           amount: users[user].amount,
-          type: users[user].type
+          type: users[user].type,
+          loading: false
         })
       }
     }
     mutations.sortUsers(state)
   },
+  updateUser: (state, data) => {
+    let index = state.users.indexOf(
+      state.users.find(a => {
+        return a.username === data.username
+      })
+    )
+    if (data.loading !== undefined) state.users[index].loading = data.loading
+  },
   sortUsers: state => {
     state.users = state.users.sort((a, b) => {
       if (a.lastname > b.lastname) return 1
@@ -53,12 +64,19 @@ const mutations = {
   },
   setFilter: (state, filter) => {
     state.filter = filter
+  },
+  setUsersLoading: (state, value) => {
+    state.usersLoading = value
+  },
+  setAllUsersLoading: (state, value) => {
+    state.allUsersLoading = value
   }
 }
 
 const actions = {
   // eslint-disable-next-line no-unused-vars
   async getUsers({ commit, rootState, dispatch }) {
+    commit('setUsersLoading', true)
     try {
       const response = await axios.get(url.bar, {
         headers: { Token: rootState.login.user.accessToken }
@@ -68,8 +86,10 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
+    commit('setUsersLoading', false)
   },
   async addAmount({ commit, rootState, dispatch }, data) {
+    commit('updateUser', {username: data.username, loading: true})
     try {
       const response = await axios.post(
         url.barAddAmount,
@@ -81,8 +101,10 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
+    commit('updateUser', {username: data.username, loading: false})
   },
   async addCreditList({ commit, rootState, dispatch }, data) {
+    commit('updateUser', {username: data.username, loading: true})
     try {
       const response = await axios.post(
         url.barGetUser,
@@ -94,8 +116,10 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
+    commit('updateUser', {username: data.username, loading: false})
   },
   async getAllUsers({ commit, rootState, dispatch }) {
+    commit('setAllUsersLoading', true)
     try {
       const response = await axios.post(
         url.searchUser,
@@ -107,6 +131,7 @@ const actions = {
       if (e.response)
         if (e.response.data === 401) dispatch('logout', null, { root: true })
     }
+    commit('setAllUsersLoading', false)
   },
   setFilter({ commit }, data) {
     commit('setFilter', data)
@@ -122,7 +147,13 @@ const getters = {
   },
   filter: state => {
     return state.filter
-  }
+  },
+  usersLoading: state => {
+    return state.usersLoading
+  },
+  allUsersLoading: state => {
+    return state.allUsersLoading
+  },
 }
 
 export default {

src/store/modules/finanzerUsers.js

@@ -75,7 +75,8 @@ const mutations = {
           locked: users[user].locked,
           autoLock: users[user].autoLock,
           creditList: list,
-          expand: false
+          expand: false,
+          loading: false
         })
       }
     }
@@ -204,6 +205,7 @@ const mutations = {
     if (data.locked !== undefined) state.users[index].locked = data.locked
     if (data.limit !== undefined) state.users[index].limit = data.limit
     if (data.autoLock !== undefined) state.users[index].autoLock = data.autoLock
+    if (data.loading !== undefined) state.users[index].loading = data.loading
   },
   setMails: (state, data) => {
     state.errorMails = data
@@ -265,6 +267,7 @@ const actions = {
     commit('setActiveUser', username)
   },
   async addAmount({ commit, rootState, dispatch }, data) {
+    commit('updateUsers', {username: data.user.username, loading: true})
     try {
       const response = await axios.post(
         url.finanzerAddAmount,
@@ -288,8 +291,10 @@ const actions = {
         if (err.response.status === 401)
           dispatch('logout', null, { root: true })
     }
+    commit('updateUsers', {username: data.user.username, loading: false})
   },
   async addCredit({ commit, rootState, dispatch }, data) {
+    commit('updateUsers', {username: data.user.username, loading: true})
     try {
       const response = await axios.post(
         url.finanzerAddCredit,
@@ -313,6 +318,7 @@ const actions = {
         if (err.response.status === 401)
           dispatch('logout', null, { root: true })
     }
+    commit('updateUsers', {username: data.user.username, loading: false})
   },
   async doLock({ commit, rootState, dispatch }, data) {
     try {

src/store/modules/login.js

@@ -5,6 +5,8 @@ import url from '@/plugins/routes'
 const state = {
   user: {
     username: null,
+    firstname: null,
+    lastname: null,
     accessToken: null,
     group: null
   },
@@ -30,12 +32,16 @@ const mutations = {
       state.user.username = data.username
       state.user.accessToken = data.accessToken
       state.user.group = data.group
+      state.user.firstname = data.firstname
+      state.user.lastname = data.lastname
     }
   },
   logout(state) {
     state.user.accessToken = null
     state.user.username = null
     state.user.group = null
+    state.user.firstname = null
+    state.user.lastname = null
   }
 }
 
@@ -44,12 +50,15 @@ const actions = {
     commit('loginStart')
     try {
       const response = await axios.post(url.login, { ...loginData })
+      console.log(response.data)
       localStorage.setItem(
         'user',
         JSON.stringify({
           username: response.data.username,
           accessToken: response.data.token,
-          group: response.data.group
+          group: response.data.group,
+          firstname: response.data.firstname,
+          lastname: response.data.lastname
         })
       )
       commit('loginStop', null)
@@ -66,7 +75,9 @@ const actions = {
       commit('updateAccessToken', {
         username: null,
         accessToken: null,
-        group: null
+        group: null,
+        firstname: null,
+        lastname: null
       })
     }
   },
@@ -84,6 +95,9 @@ const actions = {
 }
 
 const getters = {
+  loggingIn: state => {
+    return state.loggingIn
+  },
   getGroup: state => {
     return state.user.group
   },
@@ -122,6 +136,9 @@ const getters = {
   },
   isLoggedIn: state => {
     return state.user.accessToken ? true : false
+  },
+  user: state => {
+    return state.user
   }
 }
 

src/store/modules/user.js

@@ -3,7 +3,8 @@ import url from '@/plugins/routes'
 
 const state = {
   user: null,
-  creditList: []
+  creditList: [],
+  loading: false
 }
 
 const mutations = {
@@ -117,11 +118,15 @@ const mutations = {
       sum.nov_amount +
       sum.dez_amount
     return sum
+  },
+  setLoading(state, value) {
+    state.loading = value
   }
 }
 
 const actions = {
   async getUser({ commit, rootState, dispatch }) {
+    commit("setLoading", true)
     try {
       const response = await axios.get(url.userMain, {
         headers: { Token: rootState.login.user.accessToken }
@@ -131,6 +136,7 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
+    commit("setLoading", false)
   },
   async addAmount({ commit, rootState, dispatch }, amount) {
     try {
@@ -158,6 +164,9 @@ const getters = {
       if (currentYear > year) year = currentYear
     }
     return year
+  },
+  loading: state => {
+    return state.loading
   }
 }
 

src/views/Login.vue

@@ -37,6 +37,9 @@
                     @input="resetLoginError"
                   />
                 </v-form>
+                <div class="text-center">
+                  <v-progress-circular indeterminate v-if="loggingIn" />
+                </div>
               </v-card-text>
               <v-alert v-if="loginError" dense type="error">{{
                 loginError
@@ -74,7 +77,7 @@ export default {
     }
   },
   methods: mapActions(['doLogin', 'resetLoginError']),
-  computed: mapGetters(['loginError'])
+  computed: mapGetters(['loginError', 'loggingIn'])
 }
 </script>
 

src/views/MainView.vue

@@ -14,14 +14,14 @@
           <v-list-item-icon>
             <v-icon>person</v-icon>
           </v-list-item-icon>
-          <v-list-item-title>Account</v-list-item-title>
+          <v-list-item-title>{{user.firstname}} {{user.lastname}}</v-list-item-title>
         </v-list-item>
         <v-list-item v-if="isBar" class="title" link to="/main/bar/geruecht">
           <v-list-item-icon>
             <v-icon>local_bar</v-icon>
           </v-list-item-icon>
           <v-list-item-title>
-            Gerüchte
+            Bar
           </v-list-item-title>
         </v-list-item>
         <v-list-item v-if="isFinanzer" class="title" link to="/main/finanzer/overview">
@@ -70,7 +70,8 @@ export default {
       isBar: 'isBar',
       isUser: 'isUser',
       isFinanzer: 'isFinanzer',
-      isLoggedIn: 'isLoggedIn'
+      isLoggedIn: 'isLoggedIn',
+      user: 'user'
     })
   }
 }