From 23d24658cfec5e125f719b58bcd4ea457dd978ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sun, 26 Jan 2020 12:55:39 +0100
Subject: [PATCH] added userSkeleton for finanzer

---
 src/components/finanzer/Overview.vue          |   3 +-
 .../finanzer/Skeleton/UserSkeleton.vue        |  82 ++++
 src/components/finanzer/User.vue              | 352 +++++++++---------
 src/plugins/routes.js                         |   4 +-
 src/store/modules/barUsers.js                 |  10 +-
 src/store/modules/finanzerUsers.js            |  31 +-
 src/store/modules/serviceManagement.js        |   6 +-
 src/store/modules/user.js                     |   4 +-
 8 files changed, 305 insertions(+), 187 deletions(-)
 create mode 100644 src/components/finanzer/Skeleton/UserSkeleton.vue

diff --git a/src/components/finanzer/Overview.vue b/src/components/finanzer/Overview.vue
index a6df30b..6514900 100644
--- a/src/components/finanzer/Overview.vue
+++ b/src/components/finanzer/Overview.vue
@@ -63,7 +63,8 @@
         </v-expand-transition>
       </v-card>
     </v-expand-transition>
-    <TableSkeleton v-if="loading" />
+    <v-progress-linear v-if="loading && users.length !== 0" indeterminate />
+    <TableSkeleton v-if="loading && users.length === 0" />
     <div v-for="user in users" :key="users.indexOf(user)">
       <v-card
         v-if="user.creditList[year] && isFiltered(user)"
diff --git a/src/components/finanzer/Skeleton/UserSkeleton.vue b/src/components/finanzer/Skeleton/UserSkeleton.vue
new file mode 100644
index 0000000..86d2cf6
--- /dev/null
+++ b/src/components/finanzer/Skeleton/UserSkeleton.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <v-toolbar tile>
+      <v-toolbar-title>
+        <v-row>
+          <v-col>
+            <v-skeleton-loader type="chip" />
+          </v-col>
+          <v-col>
+            <v-skeleton-loader type="chip" />
+          </v-col>
+        </v-row>
+      </v-toolbar-title>
+      <v-spacer />
+      <v-toolbar-items>
+        <v-skeleton-loader type="button" />
+      </v-toolbar-items>
+    </v-toolbar>
+    <v-card style="margin-top: 3px;">
+      <v-card-title><v-skeleton-loader type="heading"/></v-card-title>
+      <v-card-text>
+        <v-form style="margin-left: 15px; margin-right: 15px">
+          <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="button" />
+            </v-col>
+          </v-row>
+          <v-divider style="margin-bottom: 15px;" />
+          <v-row>
+            <v-col>
+              <v-skeleton-loader type="chip" />
+            </v-col>
+            <v-col>
+              <v-skeleton-loader type="chip" />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-skeleton-loader type="button" />
+          </v-row>
+        </v-form>
+      </v-card-text>
+    </v-card>
+    <v-card style="margin-top: 3px;">
+      <v-card-title><v-skeleton-loader type="chip"/></v-card-title>
+      <v-card-text>
+        <v-form style="margin-left: 15px; margin-right: 15px">
+          <v-row>
+            <v-col>
+              <v-skeleton-loader type="chip" />
+            </v-col>
+            <v-col>
+              <v-skeleton-loader type="chip" />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-skeleton-loader type="chip" />
+            </v-col>
+            <v-col>
+              <v-skeleton-loader type="chip" />
+            </v-col>
+          </v-row>
+        </v-form>
+        <v-skeleton-loader type="button" />
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserSkeleton'
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/finanzer/User.vue b/src/components/finanzer/User.vue
index 4ba9f54..7f09a1d 100644
--- a/src/components/finanzer/User.vue
+++ b/src/components/finanzer/User.vue
@@ -1,194 +1,207 @@
 <template>
-  <v-content v-if="activeUser">
-    <v-toolbar tile>
-      <v-toolbar-title>{{ activeUser.lastname }}, {{ activeUser.firstname }}</v-toolbar-title>
-      <v-spacer />
-      <v-toolbar-items>
-        <v-btn @click="sendMail({ username: activeUser.username })" text>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)">
-          {{
-          errorMessage(errorMail)
-          }}
-        </v-alert>
-      </v-card>
-    </v-expand-transition>
-    <v-card style="margin-top: 3px;">
-      <v-card-title>Konfiguration</v-card-title>
-      <v-card-text>
-        <v-form style="margin-left: 15px; margin-right: 15px">
-          <v-row>
-            <v-col>
-              <v-label>Status:</v-label>
-            </v-col>
-            <v-col>
-              <v-chip
-                outlined
-                :text-color="getLockedColor(activeUser.locked)"
-              >{{ 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>
-            </v-col>
-          </v-row>
-          <v-divider style="margin-bottom: 15px;" />
-          <v-row>
-            <v-col>
-              <v-text-field
-                :rules="[isNumber]"
-                label="Betrag des Sperrlimits in € (EURO)"
-                v-model="limit"
-              ></v-text-field>
-            </v-col>
-            <v-col>
-              <v-select
-                return-object
-                v-model="autoLock"
-                label="Automatische Sperre"
-                :items="[
-                  { value: true, text: 'Aktiviert' },
-                  { value: false, text: 'Deaktiviert' }
-                ]"
-                item-text="text"
-                item-value="value"
-              />
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-btn
-              block
-              @click="
-                saveConfig({
-                  user: activeUser,
-                  limit: limit,
-                  autoLock: autoLock.value
-                })
-              "
-            >Speichern</v-btn>
-          </v-row>
-        </v-form>
-      </v-card-text>
-    </v-card>
-    <v-card style="margin-top: 3px;">
-      <v-card-title>Geld transferieren</v-card-title>
-      <v-card-text>
-        <v-form style="margin-left: 15px; margin-right: 15px">
-          <v-row>
-            <v-col>
-              <v-text-field :rules="[isNumber]" label="Betrag" v-model="amount"></v-text-field>
-            </v-col>
-            <v-col>
-              <v-select
-                return-object
-                v-model="type"
-                label="Typ"
-                :items="[
-                  { value: 'amount', text: 'Schulden' },
-                  { value: 'credit', text: 'Guthaben' }
-                ]"
-                item-text="text"
-                item-value="value"
-              ></v-select>
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>
-              <v-select
-                return-object
-                v-model="selectedYear"
-                label="Jahr"
-                :items="selectYears"
-                item-text="text"
-                item-value="value"
-              ></v-select>
-            </v-col>
-            <v-col>
-              <v-select
-                return-object
-                v-model="selectedMonth"
-                label="Monat"
-                :items="months"
-                item-text="text"
-                item-value="value"
-              ></v-select>
-            </v-col>
-          </v-row>
-        </v-form>
-        <v-btn block @click="add">Hinzufügen</v-btn>
-      </v-card-text>
-    </v-card>
-    <div v-for="year in years" :key="years.indexOf(year)">
+  <div>
+    <v-content v-if="loading" >
+      <UserSkeleton />
+    </v-content>
+    <v-content v-if="activeUser">
+      <v-toolbar tile>
+        <v-toolbar-title
+          >{{ activeUser.lastname }},
+          {{ activeUser.firstname }}</v-toolbar-title
+        >
+        <v-spacer />
+        <v-toolbar-items>
+          <v-btn @click="sendMail({ username: activeUser.username })" text
+            >Email senden</v-btn
+          >
+        </v-toolbar-items>
+      </v-toolbar>
+      <v-progress-linear v-if="activeUser.loading" indeterminate />
+      <v-expand-transition>
+        <v-card style="margin-top: 3px" v-show="errorMail">
+          <v-alert dense :type="computeError(errorMail)">
+            {{ errorMessage(errorMail) }}
+          </v-alert>
+        </v-card>
+      </v-expand-transition>
       <v-card style="margin-top: 3px;">
-        <v-card-title>{{ year }}</v-card-title>
-        <Table v-bind:user="activeUser" v-bind:year="year" />
-        <v-container fluid>
-          <v-col>
+        <v-card-title>Konfiguration</v-card-title>
+        <v-card-text>
+          <v-form style="margin-left: 15px; margin-right: 15px">
             <v-row>
               <v-col>
-                <v-label>Vorjahr:</v-label>
+                <v-label>Status:</v-label>
               </v-col>
               <v-col>
-                <v-chip
-                  outlined
-                  :text-color="
-                    getLastColor(activeUser.creditList[year][1].last)
-                  "
-                >
-                  {{
-                  (activeUser.creditList[year][1].last / 100).toFixed(2)
-                  }}
+                <v-chip outlined :text-color="getLockedColor(activeUser.locked)"
+                  >{{ activeUser.locked ? 'Gesperrt' : 'nicht Gesperrt' }}
                 </v-chip>
               </v-col>
               <v-col>
-                <v-label>Gesamt:</v-label>
-              </v-col>
-              <v-col>
-                <v-chip
-                  outlined
-                  x-large
-                  :text-color="
-                    getLastColor(
-                      getAllSum(
-                        activeUser.creditList[year][2].sum,
-                        activeUser.creditList[year][1].last
-                      )
-                    )
+                <v-btn
+                  @click="
+                    doLock({ user: activeUser, locked: !activeUser.locked })
                   "
-                >
-                  {{
-                  (
-                  getAllSum(
-                  activeUser.creditList[year][2].sum,
-                  activeUser.creditList[year][1].last
-                  ) / 100
-                  ).toFixed(2)
-                  }}
-                </v-chip>
+                  >{{ activeUser.locked ? 'Entperren' : 'Sperren' }}
+                </v-btn>
               </v-col>
             </v-row>
-          </v-col>
-        </v-container>
+            <v-divider style="margin-bottom: 15px;" />
+            <v-row>
+              <v-col>
+                <v-text-field
+                  :rules="[isNumber]"
+                  label="Betrag des Sperrlimits in € (EURO)"
+                  v-model="limit"
+                ></v-text-field>
+              </v-col>
+              <v-col>
+                <v-select
+                  return-object
+                  v-model="autoLock"
+                  label="Automatische Sperre"
+                  :items="[
+                    { value: true, text: 'Aktiviert' },
+                    { value: false, text: 'Deaktiviert' }
+                  ]"
+                  item-text="text"
+                  item-value="value"
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-btn
+                block
+                @click="
+                  saveConfig({
+                    user: activeUser,
+                    limit: limit,
+                    autoLock: autoLock.value
+                  })
+                "
+                >Speichern
+              </v-btn>
+            </v-row>
+          </v-form>
+        </v-card-text>
       </v-card>
-    </div>
-  </v-content>
+      <v-card style="margin-top: 3px;">
+        <v-card-title>Geld transferieren</v-card-title>
+        <v-card-text>
+          <v-form style="margin-left: 15px; margin-right: 15px">
+            <v-row>
+              <v-col>
+                <v-text-field
+                  :rules="[isNumber]"
+                  label="Betrag"
+                  v-model="amount"
+                ></v-text-field>
+              </v-col>
+              <v-col>
+                <v-select
+                  return-object
+                  v-model="type"
+                  label="Typ"
+                  :items="[
+                    { value: 'amount', text: 'Schulden' },
+                    { value: 'credit', text: 'Guthaben' }
+                  ]"
+                  item-text="text"
+                  item-value="value"
+                ></v-select>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-select
+                  return-object
+                  v-model="selectedYear"
+                  label="Jahr"
+                  :items="selectYears"
+                  item-text="text"
+                  item-value="value"
+                ></v-select>
+              </v-col>
+              <v-col>
+                <v-select
+                  return-object
+                  v-model="selectedMonth"
+                  label="Monat"
+                  :items="months"
+                  item-text="text"
+                  item-value="value"
+                ></v-select>
+              </v-col>
+            </v-row>
+          </v-form>
+          <v-btn block @click="add">Hinzufügen</v-btn>
+        </v-card-text>
+      </v-card>
+      <div v-for="year in years" :key="years.indexOf(year)">
+        <v-card style="margin-top: 3px;">
+          <v-card-title>{{ year }}</v-card-title>
+          <Table v-bind:user="activeUser" v-bind:year="year" />
+          <v-container fluid>
+            <v-col>
+              <v-row>
+                <v-col>
+                  <v-label>Vorjahr:</v-label>
+                </v-col>
+                <v-col>
+                  <v-chip
+                    outlined
+                    :text-color="
+                      getLastColor(activeUser.creditList[year][1].last)
+                    "
+                  >
+                    {{ (activeUser.creditList[year][1].last / 100).toFixed(2) }}
+                  </v-chip>
+                </v-col>
+                <v-col>
+                  <v-label>Gesamt:</v-label>
+                </v-col>
+                <v-col>
+                  <v-chip
+                    outlined
+                    x-large
+                    :text-color="
+                      getLastColor(
+                        getAllSum(
+                          activeUser.creditList[year][2].sum,
+                          activeUser.creditList[year][1].last
+                        )
+                      )
+                    "
+                  >
+                    {{
+                      (
+                        getAllSum(
+                          activeUser.creditList[year][2].sum,
+                          activeUser.creditList[year][1].last
+                        ) / 100
+                      ).toFixed(2)
+                    }}
+                  </v-chip>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-container>
+        </v-card>
+      </div>
+    </v-content>
+  </div>
 </template>
 
 <script>
 import Table from './Table'
 import { mapGetters, mapActions } from 'vuex'
+import UserSkeleton from "./Skeleton/UserSkeleton";
 export default {
   name: 'User',
   props: {
     id: String
   },
-  components: { Table },
+  components: {UserSkeleton, Table },
   data() {
     return {
       isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
@@ -328,7 +341,8 @@ export default {
       activeUser: 'finanzerUsers/activeUser',
       errorMail: 'finanzerUsers/errorMail',
       months: 'finanzerUsers/months',
-      selectYears: 'finanzerUsers/selectYears'
+      selectYears: 'finanzerUsers/selectYears',
+      loading: 'finanzerUsers/addUserLoading'
     })
   },
   watch: {
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index 5d3723f..daf463a 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -1,6 +1,6 @@
 //const main = 'https://192.168.5.128:5000/'
-const main = 'http://localhost:5000/'
-//const main = 'http://192.168.5.118:5000/'
+//const main = 'http://localhost:5000/'
+const main = 'http://192.168.5.118:5000/'
 //const main = 'https://groeger-clan.duckdns.org:5000/'
 
 const url = {
diff --git a/src/store/modules/barUsers.js b/src/store/modules/barUsers.js
index 67ea8e1..be28632 100644
--- a/src/store/modules/barUsers.js
+++ b/src/store/modules/barUsers.js
@@ -89,7 +89,7 @@ const actions = {
     commit('setUsersLoading', false)
   },
   async addAmount({ commit, rootState, dispatch }, data) {
-    commit('updateUser', {username: data.username, loading: true})
+    commit('updateUser', { username: data.username, loading: true })
     try {
       const response = await axios.post(
         url.barAddAmount,
@@ -101,10 +101,10 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
-    commit('updateUser', {username: data.username, loading: false})
+    commit('updateUser', { username: data.username, loading: false })
   },
   async addCreditList({ commit, rootState, dispatch }, data) {
-    commit('updateUser', {username: data.username, loading: true})
+    commit('updateUser', { username: data.username, loading: true })
     try {
       const response = await axios.post(
         url.barGetUser,
@@ -116,7 +116,7 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
-    commit('updateUser', {username: data.username, loading: false})
+    commit('updateUser', { username: data.username, loading: false })
   },
   async getAllUsers({ commit, rootState, dispatch }) {
     commit('setAllUsersLoading', true)
@@ -153,7 +153,7 @@ const getters = {
   },
   allUsersLoading: state => {
     return state.allUsersLoading
-  },
+  }
 }
 
 export default {
diff --git a/src/store/modules/finanzerUsers.js b/src/store/modules/finanzerUsers.js
index bc5bdef..8d20843 100644
--- a/src/store/modules/finanzerUsers.js
+++ b/src/store/modules/finanzerUsers.js
@@ -26,7 +26,9 @@ const state = {
     { value: 12, text: 'Dezember' }
   ],
   allUsersLoading: false,
-  usersLoading: false
+  usersLoading: false,
+  emailLoading: false,
+  addUserLoading: false
 }
 
 const mutations = {
@@ -227,6 +229,12 @@ const mutations = {
   },
   setUsersLoading: (state, value) => {
     state.usersLoading = value
+  },
+  setEMailLoading: (state, value) => {
+    state.emailLoading = value
+  },
+  setAddUserLoading: (state, value) => {
+    state.addUserLoading = value
   }
 }
 
@@ -267,7 +275,7 @@ const actions = {
     commit('setActiveUser', username)
   },
   async addAmount({ commit, rootState, dispatch }, data) {
-    commit('updateUsers', {username: data.user.username, loading: true})
+    commit('updateUsers', { username: data.user.username, loading: true })
     try {
       const response = await axios.post(
         url.finanzerAddAmount,
@@ -291,10 +299,10 @@ const actions = {
         if (err.response.status === 401)
           dispatch('logout', null, { root: true })
     }
-    commit('updateUsers', {username: data.user.username, loading: false})
+    commit('updateUsers', { username: data.user.username, loading: false })
   },
   async addCredit({ commit, rootState, dispatch }, data) {
-    commit('updateUsers', {username: data.user.username, loading: true})
+    commit('updateUsers', { username: data.user.username, loading: true })
     try {
       const response = await axios.post(
         url.finanzerAddCredit,
@@ -318,9 +326,10 @@ const actions = {
         if (err.response.status === 401)
           dispatch('logout', null, { root: true })
     }
-    commit('updateUsers', {username: data.user.username, loading: false})
+    commit('updateUsers', { username: data.user.username, loading: false })
   },
   async doLock({ commit, rootState, dispatch }, data) {
+    commit('updateUsers', { username: data.user.username, loading: true })
     try {
       const response = await axios.post(
         url.lockUser,
@@ -332,8 +341,10 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
+    commit('updateUsers', { username: data.user.username, loading: false })
   },
   async saveConfig({ commit, rootState, dispatch }, data) {
+    commit('updateUsers', { username: data.user.username, loading: true })
     try {
       const response = await axios.post(
         url.finanzerSetConfig,
@@ -349,8 +360,10 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
+    commit('updateUsers', { username: data.user.username, loading: false })
   },
   async addUser({ commit, rootState, dispatch }, data) {
+    commit('setAddUserLoading', true)
     try {
       const response = await axios.post(
         url.finanzerAddUser,
@@ -362,8 +375,10 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
+    commit('setAddUserLoading', false)
   },
   async sendMails({ commit, rootState, dispatch }) {
+    commit('setEMailLoading', true)
     try {
       const response = await axios.get(url.finanzerSendAllMail, {
         headers: { Token: rootState.login.user.accessToken }
@@ -373,8 +388,10 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
+    commit('setEMailLoading', false)
   },
   async sendMail({ commit, rootState, dispatch }, data) {
+    commit('updateUsers', { username: data.username, loading: true })
     try {
       const response = await axios.post(
         url.finanzerSendOneMail,
@@ -386,6 +403,7 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
+    commit('updateUsers', { username: data.username, loading: false })
   },
   createYears({ commit }) {
     commit('setYears')
@@ -434,6 +452,9 @@ const getters = {
   },
   usersLoading: state => {
     return state.usersLoading
+  },
+  addUserLoading: state => {
+    return state.addUserLoading
   }
 }
 
diff --git a/src/store/modules/serviceManagement.js b/src/store/modules/serviceManagement.js
index 7c41514..2b1b82e 100644
--- a/src/store/modules/serviceManagement.js
+++ b/src/store/modules/serviceManagement.js
@@ -248,10 +248,10 @@ const actions = {
     }
   },
   setDayLoading({ commit, getters }, date) {
-    commit('setDayLoading', {date, getters})
+    commit('setDayLoading', { date, getters })
   },
-  setDayNotLoading({commit, getters}, date) {
-    commit('setDayNotLoading', {date, getters})
+  setDayNotLoading({ commit, getters }, date) {
+    commit('setDayNotLoading', { date, getters })
   }
 }
 const getters = {
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 79c8cf1..b2f7a02 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -126,7 +126,7 @@ const mutations = {
 
 const actions = {
   async getUser({ commit, rootState, dispatch }) {
-    commit("setLoading", true)
+    commit('setLoading', true)
     try {
       const response = await axios.get(url.userMain, {
         headers: { Token: rootState.login.user.accessToken }
@@ -136,7 +136,7 @@ const actions = {
       if (e.response)
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
-    commit("setLoading", false)
+    commit('setLoading', false)
   },
   async addAmount({ commit, rootState, dispatch }, amount) {
     try {