add progress circal in user list for finanzer navigation

src/components/finanzer/FinanzerNavigation.vue

@@ -1,11 +1,7 @@
 <template>
   <div>
     <v-list>
-      <v-list-item
+      <v-list-item class="title" link to="/main/finanzer/overview">
-        class="title"
-        link
-        to="/main/finanzer/overview"
-      >
         <v-list-item-icon>
           <v-icon>home</v-icon>
         </v-list-item-icon>
@@ -15,23 +11,19 @@
         <v-list-item-icon>
           <v-icon>work</v-icon>
         </v-list-item-icon>
-        <v-list-item-title>
+        <v-list-item-title>Dienstverwaltung</v-list-item-title>
-          Dienstverwaltung
-        </v-list-item-title>
       </v-list-item>
     </v-list>
     <v-divider />
     <v-list>
       <div v-for="user in users" v-bind:key="users.indexOf(user)">
-        <v-list-item
+        <v-list-item :to="{ name: 'activeUser', params: { id: user.username } }" link>
-          :to="{ name: 'activeUser', params: { id: user.username } }"
+          <v-list-item-title>{{ user.lastname }}, {{ user.firstname }}</v-list-item-title>
-          link
-        >
-          <v-list-item-title
-            >{{ user.lastname }}, {{ user.firstname }}
-          </v-list-item-title>
         </v-list-item>
       </div>
+      <v-list-item>
+        <v-progress-circular indeterminate color="grey" v-if="loading" />
+      </v-list-item>
     </v-list>
   </div>
 </template>
@@ -42,13 +34,14 @@ export default {
   name: 'FinanzerNavigation',
   methods: {
     ...mapActions({
-      addUser: 'finanzerUsers/addUser',
+      addUser: 'finanzerUsers/addUser'
     })
   },
   computed: {
     ...mapGetters({
       users: 'finanzerUsers/users',
-      allUsers: 'finanzerUsers/allUsers'
+      allUsers: 'finanzerUsers/allUsers',
+      loading: 'finanzerUsers/usersLoading'
     })
   }
 }

src/components/finanzer/User.vue

@@ -1,21 +1,19 @@
 <template>
   <v-content v-if="activeUser">
     <v-toolbar tile>
-      <v-toolbar-title
+      <v-toolbar-title>{{ activeUser.lastname }}, {{ activeUser.firstname }}</v-toolbar-title>
-        >{{ activeUser.lastname }}, {{ activeUser.firstname }}</v-toolbar-title
-      >
       <v-spacer />
       <v-toolbar-items>
-        <v-btn @click="sendMail({ username: activeUser.username })" text
+        <v-btn @click="sendMail({ username: activeUser.username })" text>Email senden</v-btn>
-          >Email senden</v-btn
-        >
       </v-toolbar-items>
     </v-toolbar>
     <v-expand-transition>
       <v-card style="margin-top: 3px" v-show="errorMail">
-        <v-alert dense :type="computeError(errorMail)">{{
+        <v-alert dense :type="computeError(errorMail)">
+          {{
           errorMessage(errorMail)
-        }}</v-alert>
+          }}
+        </v-alert>
       </v-card>
     </v-expand-transition>
     <v-card style="margin-top: 3px;">
@@ -30,16 +28,14 @@
               <v-chip
                 outlined
                 :text-color="getLockedColor(activeUser.locked)"
-                >{{ activeUser.locked ? 'Gesperrt' : 'nicht Gesperrt' }}</v-chip
+              >{{ activeUser.locked ? 'Gesperrt' : 'nicht Gesperrt' }}</v-chip>
-              >
             </v-col>
             <v-col>
               <v-btn
                 @click="
                   doLock({ user: activeUser, locked: !activeUser.locked })
                 "
-                >{{ activeUser.locked ? 'Entperren' : 'Sperren' }}</v-btn
+              >{{ activeUser.locked ? 'Entperren' : 'Sperren' }}</v-btn>
-              >
             </v-col>
           </v-row>
           <v-divider style="margin-bottom: 15px;" />
@@ -75,8 +71,7 @@
                   autoLock: autoLock.value
                 })
               "
-              >Speichern</v-btn
+            >Speichern</v-btn>
-            >
           </v-row>
         </v-form>
       </v-card-text>
@@ -87,11 +82,7 @@
         <v-form style="margin-left: 15px; margin-right: 15px">
           <v-row>
             <v-col>
-              <v-text-field
+              <v-text-field :rules="[isNumber]" label="Betrag" v-model="amount"></v-text-field>
-                :rules="[isNumber]"
-                label="Betrag"
-                v-model="amount"
-              ></v-text-field>
             </v-col>
             <v-col>
               <v-select
@@ -149,10 +140,11 @@
                   :text-color="
                     getLastColor(activeUser.creditList[year][1].last)
                   "
-                  >{{
-                    (activeUser.creditList[year][1].last / 100).toFixed(2)
-                  }}</v-chip
                 >
+                  {{
+                  (activeUser.creditList[year][1].last / 100).toFixed(2)
+                  }}
+                </v-chip>
               </v-col>
               <v-col>
                 <v-label>Gesamt:</v-label>
@@ -341,6 +333,7 @@ export default {
   },
   watch: {
     activeUser(newVal) {
+      // eslint-disable-next-line no-console
       console.log(newVal)
       this.limit = (newVal.limit / 100).toFixed(2)
       this.autoLock = {
@@ -349,6 +342,7 @@ export default {
       }
     },
     id(newVal) {
+      // eslint-disable-next-line no-console
       console.log(newVal)
       this.setActiveUser(newVal)
     }

src/plugins/routes.js

@@ -1,6 +1,6 @@
 //const main = 'https://192.168.5.128:5000/'
-//const main = 'https://localhost:5000/'
+const main = 'http://localhost:5000/'
-const main = 'http://192.168.5.118:5000/'
+//const main = 'http://192.168.5.118:5000/'
 //const main = 'https://groeger-clan.duckdns.org:5000/'
 
 const url = {

src/router/index.js

@@ -97,7 +97,6 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   store.dispatch('fetchAccessToken')
-  console.log('fullPath', to.fullPath)
   if (to.fullPath.includes('/main')) {
     if (to.fullPath.includes('/main/finanzer')) {
       if (!store.state.login.user.group.includes('moneymaster')) {

src/store/modules/finanzerUsers.js

@@ -24,7 +24,9 @@ const state = {
     { value: 10, text: 'Oktober' },
     { value: 11, text: 'November' },
     { value: 12, text: 'Dezember' }
-  ]
+  ],
+  allUsersLoading: false,
+  usersLoading: false
 }
 
 const mutations = {
@@ -217,12 +219,19 @@ const mutations = {
   setYear: (state, value) => {
     if (value) state.year++
     else state.year--
+  },
+  setAllUsersLoading: (state, value) => {
+    state.allUsersLoading = value
+  },
+  setUsersLoading: (state, value) => {
+    state.usersLoading = value
   }
 }
 
 const actions = {
   // eslint-disable-next-line no-unused-vars
   async getAllUsers({ commit, rootState, dispatch }) {
+    commit('setAllUsersLoading', true)
     try {
       const response = await axios.post(
         url.searchUser,
@@ -236,8 +245,10 @@ const actions = {
         if (err.response.status === 401)
           dispatch('logout', null, { root: true })
     }
+    commit('setAllUsersLoading', false)
   },
   async getUsers({ commit, rootState, dispatch }) {
+    commit('setUsersLoading', true)
     try {
       const response = await axios.get(url.getFinanzerMain, {
         headers: { Token: rootState.login.user.accessToken }
@@ -248,6 +259,7 @@ const actions = {
         if (err.response.status === 401)
           dispatch('logout', null, { root: true })
     }
+    commit('setUsersLoading', false)
   },
   setActiveUser({ commit }, username) {
     commit('setActiveUser', username)
@@ -410,6 +422,12 @@ const getters = {
   },
   months: state => {
     return state.months
+  },
+  allUsersLoading: state => {
+    return state.allUsersLoading
+  },
+  usersLoading: state => {
+    return state.usersLoading
   }
 }
 

src/store/modules/user.js

@@ -11,6 +11,7 @@ const mutations = {
     state.user = user
     let list = {}
     for (let creditList in user['creditList']) {
+      // eslint-disable-next-line no-console
       console.log(creditList)
       let amount = mutations.createAmount(user['creditList'][creditList])
       let credit = mutations.createCredit(user['creditList'][creditList])
@@ -19,6 +20,7 @@ const mutations = {
     }
     state.user.creditList = list
     state.creditList = []
+    // eslint-disable-next-line no-console
     console.log(state.user)
   },
   createAmount(creditList) {