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>

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

@ -1,194 +1,207 @@
<template> <template>
<v-content v-if="activeUser"> <div>
<v-toolbar tile> <v-content v-if="loading" >
<v-toolbar-title>{{ activeUser.lastname }}, {{ activeUser.firstname }}</v-toolbar-title> <UserSkeleton />
<v-spacer /> </v-content>
<v-toolbar-items> <v-content v-if="activeUser">
<v-btn @click="sendMail({ username: activeUser.username })" text>Email senden</v-btn> <v-toolbar tile>
</v-toolbar-items> <v-toolbar-title
</v-toolbar> >{{ activeUser.lastname }},
<v-expand-transition> {{ activeUser.firstname }}</v-toolbar-title
<v-card style="margin-top: 3px" v-show="errorMail"> >
<v-alert dense :type="computeError(errorMail)"> <v-spacer />
{{ <v-toolbar-items>
errorMessage(errorMail) <v-btn @click="sendMail({ username: activeUser.username })" text
}} >Email senden</v-btn
</v-alert> >
</v-card> </v-toolbar-items>
</v-expand-transition> </v-toolbar>
<v-card style="margin-top: 3px;"> <v-progress-linear v-if="activeUser.loading" indeterminate />
<v-card-title>Konfiguration</v-card-title> <v-expand-transition>
<v-card-text> <v-card style="margin-top: 3px" v-show="errorMail">
<v-form style="margin-left: 15px; margin-right: 15px"> <v-alert dense :type="computeError(errorMail)">
<v-row> {{ errorMessage(errorMail) }}
<v-col> </v-alert>
<v-label>Status:</v-label> </v-card>
</v-col> </v-expand-transition>
<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)">
<v-card style="margin-top: 3px;"> <v-card style="margin-top: 3px;">
<v-card-title>{{ year }}</v-card-title> <v-card-title>Konfiguration</v-card-title>
<Table v-bind:user="activeUser" v-bind:year="year" /> <v-card-text>
<v-container fluid> <v-form style="margin-left: 15px; margin-right: 15px">
<v-col>
<v-row> <v-row>
<v-col> <v-col>
<v-label>Vorjahr:</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="
getLastColor(activeUser.creditList[year][1].last)
"
>
{{
(activeUser.creditList[year][1].last / 100).toFixed(2)
}}
</v-chip> </v-chip>
</v-col> </v-col>
<v-col> <v-col>
<v-label>Gesamt:</v-label> <v-btn
</v-col> @click="
<v-col> doLock({ user: activeUser, locked: !activeUser.locked })
<v-chip
outlined
x-large
:text-color="
getLastColor(
getAllSum(
activeUser.creditList[year][2].sum,
activeUser.creditList[year][1].last
)
)
" "
> >{{ activeUser.locked ? 'Entperren' : 'Sperren' }}
{{ </v-btn>
(
getAllSum(
activeUser.creditList[year][2].sum,
activeUser.creditList[year][1].last
) / 100
).toFixed(2)
}}
</v-chip>
</v-col> </v-col>
</v-row> </v-row>
</v-col> <v-divider style="margin-bottom: 15px;" />
</v-container> <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>
</div> <v-card style="margin-top: 3px;">
</v-content> <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> </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 {