Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

added userSkeleton for finanzer

This commit is contained in:
Tim Gröger 2020-01-26 12:55:39 +01:00
parent ba5a50c35f
commit 23d24658cf
8 changed files with 305 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/finanzer/Overview.vue
View File

@ -63,7 +63,8 @@
</v-expand-transition> </v-expand-transition>
</v-card> </v-card>
</v-expand-transition> </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)"> <div v-for="user in users" :key="users.indexOf(user)">
<v-card <v-card
v-if="user.creditList[year] && isFiltered(user)" v-if="user.creditList[year] && isFiltered(user)"

82
src/components/finanzer/Skeleton/UserSkeleton.vue Normal file
View File

@ -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>

48
src/components/finanzer/User.vue
View File

@ -1,18 +1,26 @@
<template> <template>
<div>
<v-content v-if="loading" >
<UserSkeleton />
</v-content>
<v-content v-if="activeUser"> <v-content v-if="activeUser">
<v-toolbar tile> <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-spacer />
<v-toolbar-items> <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-items>
</v-toolbar> </v-toolbar>
<v-progress-linear v-if="activeUser.loading" indeterminate />
<v-expand-transition> <v-expand-transition>
<v-card style="margin-top: 3px" v-show="errorMail"> <v-card style="margin-top: 3px" v-show="errorMail">
<v-alert dense :type="computeError(errorMail)"> <v-alert dense :type="computeError(errorMail)">
{{ {{ errorMessage(errorMail) }}
errorMessage(errorMail)
}}
</v-alert> </v-alert>
</v-card> </v-card>
</v-expand-transition> </v-expand-transition>
@ -25,17 +33,17 @@
<v-label>Status:</v-label> <v-label>Status:</v-label>
</v-col> </v-col>
<v-col> <v-col>
<v-chip <v-chip outlined :text-color="getLockedColor(activeUser.locked)"
outlined >{{ activeUser.locked ? 'Gesperrt' : 'nicht Gesperrt' }}
:text-color="getLockedColor(activeUser.locked)" </v-chip>
>{{ activeUser.locked ? 'Gesperrt' : 'nicht Gesperrt' }}</v-chip>
</v-col> </v-col>
<v-col> <v-col>
<v-btn <v-btn
@click=" @click="
doLock({ user: activeUser, locked: !activeUser.locked }) doLock({ user: activeUser, locked: !activeUser.locked })
" "
>{{ activeUser.locked ? 'Entperren' : 'Sperren' }}</v-btn> >{{ activeUser.locked ? 'Entperren' : 'Sperren' }}
</v-btn>
</v-col> </v-col>
</v-row> </v-row>
<v-divider style="margin-bottom: 15px;" /> <v-divider style="margin-bottom: 15px;" />
@ -71,7 +79,8 @@
autoLock: autoLock.value autoLock: autoLock.value
}) })
" "
>Speichern</v-btn> >Speichern
</v-btn>
</v-row> </v-row>
</v-form> </v-form>
</v-card-text> </v-card-text>
@ -82,7 +91,11 @@
<v-form style="margin-left: 15px; margin-right: 15px"> <v-form style="margin-left: 15px; margin-right: 15px">
<v-row> <v-row>
<v-col> <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-col> <v-col>
<v-select <v-select
@ -141,9 +154,7 @@
getLastColor(activeUser.creditList[year][1].last) 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-chip>
</v-col> </v-col>
<v-col> <v-col>
@ -178,17 +189,19 @@
</v-card> </v-card>
</div> </div>
</v-content> </v-content>
</div>
</template> </template>
<script> <script>
import Table from './Table' import Table from './Table'
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
import UserSkeleton from "./Skeleton/UserSkeleton";
export default { export default {
name: 'User', name: 'User',
props: { props: {
id: String id: String
}, },
components: { Table }, components: {UserSkeleton, Table },
data() { data() {
return { return {
isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.', isNumber: value => !isNaN(value) || 'Betrag muss eine Zahl sein.',
@ -328,7 +341,8 @@ export default {
activeUser: 'finanzerUsers/activeUser', activeUser: 'finanzerUsers/activeUser',
errorMail: 'finanzerUsers/errorMail', errorMail: 'finanzerUsers/errorMail',
months: 'finanzerUsers/months', months: 'finanzerUsers/months',
selectYears: 'finanzerUsers/selectYears' selectYears: 'finanzerUsers/selectYears',
loading: 'finanzerUsers/addUserLoading'
}) })
}, },
watch: { watch: {

4
src/plugins/routes.js
View File

@ -1,6 +1,6 @@
//const main = 'https://192.168.5.128:5000/' //const main = 'https://192.168.5.128:5000/'
const main = 'http://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 main = 'https://groeger-clan.duckdns.org:5000/'
const url = { const url = {

10
src/store/modules/barUsers.js
View File

@ -89,7 +89,7 @@ const actions = {
commit('setUsersLoading', false) commit('setUsersLoading', false)
}, },
async addAmount({ commit, rootState, dispatch }, data) { async addAmount({ commit, rootState, dispatch }, data) {
commit('updateUser', {username: data.username, loading: true}) commit('updateUser', { username: data.username, loading: true })
try { try {
const response = await axios.post( const response = await axios.post(
url.barAddAmount, url.barAddAmount,
@ -101,10 +101,10 @@ const actions = {
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) 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) { async addCreditList({ commit, rootState, dispatch }, data) {
commit('updateUser', {username: data.username, loading: true}) commit('updateUser', { username: data.username, loading: true })
try { try {
const response = await axios.post( const response = await axios.post(
url.barGetUser, url.barGetUser,
@ -116,7 +116,7 @@ const actions = {
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) 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 }) { async getAllUsers({ commit, rootState, dispatch }) {
commit('setAllUsersLoading', true) commit('setAllUsersLoading', true)
@ -153,7 +153,7 @@ const getters = {
}, },
allUsersLoading: state => { allUsersLoading: state => {
return state.allUsersLoading return state.allUsersLoading
}, }
} }
export default { export default {

31
src/store/modules/finanzerUsers.js
View File

@ -26,7 +26,9 @@ const state = {
{ value: 12, text: 'Dezember' } { value: 12, text: 'Dezember' }
], ],
allUsersLoading: false, allUsersLoading: false,
usersLoading: false usersLoading: false,
emailLoading: false,
addUserLoading: false
} }
const mutations = { const mutations = {
@ -227,6 +229,12 @@ const mutations = {
}, },
setUsersLoading: (state, value) => { setUsersLoading: (state, value) => {
state.usersLoading = 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) commit('setActiveUser', username)
}, },
async addAmount({ commit, rootState, dispatch }, data) { async addAmount({ commit, rootState, dispatch }, data) {
commit('updateUsers', {username: data.user.username, loading: true}) commit('updateUsers', { username: data.user.username, loading: true })
try { try {
const response = await axios.post( const response = await axios.post(
url.finanzerAddAmount, url.finanzerAddAmount,
@ -291,10 +299,10 @@ const actions = {
if (err.response.status === 401) if (err.response.status === 401)
dispatch('logout', null, { root: true }) 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) { async addCredit({ commit, rootState, dispatch }, data) {
commit('updateUsers', {username: data.user.username, loading: true}) commit('updateUsers', { username: data.user.username, loading: true })
try { try {
const response = await axios.post( const response = await axios.post(
url.finanzerAddCredit, url.finanzerAddCredit,
@ -318,9 +326,10 @@ const actions = {
if (err.response.status === 401) if (err.response.status === 401)
dispatch('logout', null, { root: true }) 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) { async doLock({ commit, rootState, dispatch }, data) {
commit('updateUsers', { username: data.user.username, loading: true })
try { try {
const response = await axios.post( const response = await axios.post(
url.lockUser, url.lockUser,
@ -332,8 +341,10 @@ const actions = {
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) if (e.response.status === 401) dispatch('logout', null, { root: true })
} }
commit('updateUsers', { username: data.user.username, loading: false })
}, },
async saveConfig({ commit, rootState, dispatch }, data) { async saveConfig({ commit, rootState, dispatch }, data) {
commit('updateUsers', { username: data.user.username, loading: true })
try { try {
const response = await axios.post( const response = await axios.post(
url.finanzerSetConfig, url.finanzerSetConfig,
@ -349,8 +360,10 @@ const actions = {
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) if (e.response.status === 401) dispatch('logout', null, { root: true })
} }
commit('updateUsers', { username: data.user.username, loading: false })
}, },
async addUser({ commit, rootState, dispatch }, data) { async addUser({ commit, rootState, dispatch }, data) {
commit('setAddUserLoading', true)
try { try {
const response = await axios.post( const response = await axios.post(
url.finanzerAddUser, url.finanzerAddUser,
@ -362,8 +375,10 @@ const actions = {
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) if (e.response.status === 401) dispatch('logout', null, { root: true })
} }
commit('setAddUserLoading', false)
}, },
async sendMails({ commit, rootState, dispatch }) { async sendMails({ commit, rootState, dispatch }) {
commit('setEMailLoading', true)
try { try {
const response = await axios.get(url.finanzerSendAllMail, { const response = await axios.get(url.finanzerSendAllMail, {
headers: { Token: rootState.login.user.accessToken } headers: { Token: rootState.login.user.accessToken }
@ -373,8 +388,10 @@ const actions = {
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) if (e.response.status === 401) dispatch('logout', null, { root: true })
} }
commit('setEMailLoading', false)
}, },
async sendMail({ commit, rootState, dispatch }, data) { async sendMail({ commit, rootState, dispatch }, data) {
commit('updateUsers', { username: data.username, loading: true })
try { try {
const response = await axios.post( const response = await axios.post(
url.finanzerSendOneMail, url.finanzerSendOneMail,
@ -386,6 +403,7 @@ const actions = {
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) if (e.response.status === 401) dispatch('logout', null, { root: true })
} }
commit('updateUsers', { username: data.username, loading: false })
}, },
createYears({ commit }) { createYears({ commit }) {
commit('setYears') commit('setYears')
@ -434,6 +452,9 @@ const getters = {
}, },
usersLoading: state => { usersLoading: state => {
return state.usersLoading return state.usersLoading
},
addUserLoading: state => {
return state.addUserLoading
} }
} }

6
src/store/modules/serviceManagement.js
View File

@ -248,10 +248,10 @@ const actions = {
} }
}, },
setDayLoading({ commit, getters }, date) { setDayLoading({ commit, getters }, date) {
commit('setDayLoading', {date, getters}) commit('setDayLoading', { date, getters })
}, },
setDayNotLoading({commit, getters}, date) { setDayNotLoading({ commit, getters }, date) {
commit('setDayNotLoading', {date, getters}) commit('setDayNotLoading', { date, getters })
} }
} }
const getters = { const getters = {

4
src/store/modules/user.js
View File

@ -126,7 +126,7 @@ const mutations = {
const actions = { const actions = {
async getUser({ commit, rootState, dispatch }) { async getUser({ commit, rootState, dispatch }) {
commit("setLoading", true) commit('setLoading', true)
try { try {
const response = await axios.get(url.userMain, { const response = await axios.get(url.userMain, {
headers: { Token: rootState.login.user.accessToken } headers: { Token: rootState.login.user.accessToken }
@ -136,7 +136,7 @@ const actions = {
if (e.response) if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true }) if (e.response.status === 401) dispatch('logout', null, { root: true })
} }
commit("setLoading", false) commit('setLoading', false)
}, },
async addAmount({ commit, rootState, dispatch }, amount) { async addAmount({ commit, rootState, dispatch }, amount) {
try { try {