added userSkeleton for finanzer

2020-01-26 12:55:39 +01:00 · 2020-01-26 12:55:39 +01:00 · 23d24658cf
parent ba5a50c35f
commit 23d24658cf
8 changed files with 305 additions and 187 deletions
--- 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)"
--- a/src/components/finanzer/Skeleton/UserSkeleton.vue
+++ 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>
--- a/src/components/finanzer/User.vue
+++ b/src/components/finanzer/User.vue
@ -1,18 +1,26 @@
 <template>
+  <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-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-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)
-          }}
+            {{ errorMessage(errorMail) }}
          </v-alert>
        </v-card>
      </v-expand-transition>
@ -25,17 +33,17 @@
                <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-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>
+                  >{{ activeUser.locked ? 'Entperren' : 'Sperren' }}
+                </v-btn>
              </v-col>
            </v-row>
            <v-divider style="margin-bottom: 15px;" />
@ -71,7 +79,8 @@
                    autoLock: autoLock.value
                  })
                "
-            >Speichern</v-btn>
+                >Speichern
+              </v-btn>
            </v-row>
          </v-form>
        </v-card-text>
@ -82,7 +91,11 @@
          <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-text-field
+                  :rules="[isNumber]"
+                  label="Betrag"
+                  v-model="amount"
+                ></v-text-field>
              </v-col>
              <v-col>
                <v-select
@ -141,9 +154,7 @@
                      getLastColor(activeUser.creditList[year][1].last)
                    "
                  >
-                  {{
-                  (activeUser.creditList[year][1].last / 100).toFixed(2)
-                  }}
+                    {{ (activeUser.creditList[year][1].last / 100).toFixed(2) }}
                  </v-chip>
                </v-col>
                <v-col>
@ -178,17 +189,19 @@
        </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: {
--- 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 = {
--- 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 {
--- 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
  }
 }

--- 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 = {
--- 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 {