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

added loading utilities for every view

This commit is contained in:
Tim Gröger 2020-01-23 23:25:21 +01:00 committed by crimsen
parent 3bf0467726
commit ba5a50c35f
16 changed files with 2211 additions and 2032 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4012
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
src/components/baruser/CreditLists.vue
View File

@ -1,9 +1,12 @@
<template>
<div>
<v-container>
<AddAmountSkeleton v-if="loading" />
</v-container>
<div v-for="user in users" :key="users.indexOf(user)">
<div v-if="isFiltered(user)">
<v-container>
<v-card>
<v-card :loading="user.loading">
<v-list-item>
<v-list-item-title class="title"
>{{ user.firstname }} {{ user.lastname }}</v-list-item-title
@ -117,9 +120,11 @@
<script>
import { mapGetters, mapActions } from 'vuex'
import AddAmountSkeleton from '../user/Skeleton/AddAmountSkeleton'
export default {
name: 'CreditLists',
components: { AddAmountSkeleton },
props: {},
data() {
return {
@ -151,7 +156,8 @@ export default {
computed: {
...mapGetters({
users: 'barUsers/users',
filter: 'barUsers/filter'
filter: 'barUsers/filter',
loading: 'barUsers/usersLoading'
})
}
}

6
src/components/baruser/SearchBar.vue
View File

@ -13,6 +13,7 @@
item-text="fullName"
prepend-inner-icon="search"
full-width
:loading="loading"
:search-input.sync="filter"
/>
<v-btn text @click="addUser">Hinzufügen</v-btn>
@ -48,7 +49,10 @@ export default {
}
},
computed: {
...mapGetters({ allUsers: 'barUsers/allUsers' })
...mapGetters({
allUsers: 'barUsers/allUsers',
loading: 'barUsers/allUsersLoading'
})
},
watch: {
filter(val) {

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

@ -27,6 +27,7 @@
item-text="fullName"
prepend-inner-icon="search"
full-width
:loading="allUsersLoading"
:search-input.sync="filter"
/>
<v-btn
@ -62,10 +63,12 @@
</v-expand-transition>
</v-card>
</v-expand-transition>
<TableSkeleton v-if="loading" />
<div v-for="user in users" :key="users.indexOf(user)">
<v-card
v-if="user.creditList[year] && isFiltered(user)"
style="margin-top: 3px"
:loading="user.loading"
>
<v-card-title>{{ user.lastname }}, {{ user.firstname }}</v-card-title>
<Table v-bind:user="user" v-bind:year="year" />
@ -206,9 +209,10 @@
<script>
import Table from './Table'
import { mapGetters, mapActions } from 'vuex'
import TableSkeleton from './Skeleton/TableSkeleton'
export default {
name: 'Overview',
components: { Table },
components: { TableSkeleton, Table },
props: {},
data() {
return {
@ -369,7 +373,9 @@ export default {
errorMails: 'finanzerUsers/errorMails',
year: 'finanzerUsers/year',
years: 'finanzerUsers/years',
months: 'finanzerUsers/months'
months: 'finanzerUsers/months',
loading: 'finanzerUsers/usersLoading',
allUsersLoading: 'finanzerUsers/allUsersLoading'
})
}
}

7
src/components/finanzer/Skeleton/TableSkeleton.vue
View File

@ -4,8 +4,10 @@
<v-card-title>
<v-skeleton-loader type="heading" />
</v-card-title>
<v-container>
<v-skeleton-loader type="table-thead"/>
<v-skeleton-loader type="table-row-divider@3"/>
</v-container>
<v-container fluid>
<v-row align="start" align-content="start">
<v-col>
@ -37,8 +39,9 @@
</v-row>
<v-card outlined>
<v-row>
<v-skeleton-loader type="list-item" />
<v-spacer />
<v-card-title>
<v-skeleton-loader style="margin: 3px; margin-left: 10px" type="chip"/>
</v-card-title>
</v-row>
</v-card>
</v-col>

10
src/components/user/AddAmount.vue
View File

@ -1,6 +1,7 @@
<template>
<v-container v-if="user">
<v-card>
<v-container >
<AddAmountSkeleton v-if="loading" />
<v-card v-if="!loading">
<v-list-item>
<v-list-item-title class="title"
>{{ user.firstname }} {{ user.lastname }}</v-list-item-title
@ -99,8 +100,10 @@
<script>
import {mapGetters, mapActions} from 'vuex'
import AddAmountSkeleton from './Skeleton/AddAmountSkeleton'
export default {
name: 'AddAmount',
components: { AddAmountSkeleton },
data() {
return {
color: 'green accent-4'
@ -123,7 +126,8 @@ export default {
computed: {
...mapGetters({
user: 'user/user',
year: 'user/year'
year: 'user/year',
loading: 'user/loading'
}),
}
}

8
src/components/user/CreditOverview.vue
View File

@ -9,10 +9,12 @@
style="margin-top: 3px"
append-icon="search"
outlined
type="number"
:rules="[isNumber]"
></v-text-field>
</v-toolbar-items>
</v-toolbar>
<CreditOverviewSkeleton v-if="loading" />
<div v-for="year in years" :key="years.indexOf(year)">
<v-card style="margin-top: 3px" v-if="isFiltered(year)">
<v-card-title>{{ year }}</v-card-title>
@ -67,9 +69,10 @@
<script>
import { mapGetters } from 'vuex'
import Table from '../finanzer/Table'
import CreditOverviewSkeleton from './Skeleton/CreditOverviewSkeleton'
export default {
name: 'CreditOverview',
components: { Table },
components: { CreditOverviewSkeleton, Table },
data() {
return {
isNumber: value => Number.isInteger(parseInt(value === '' ? 0 : value)) || "Muss eine Zahl sein.",
@ -89,7 +92,8 @@ export default {
},
computed: {
...mapGetters({
user: 'user/user'
user: 'user/user',
loading: 'user/loading'
}),
years() {
let years = []

50
src/components/user/Skeleton/AddAmountSkeleton.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<v-card>
<v-card-title>
<v-skeleton-loader type="heading" />
</v-card-title>
<v-card-text>
<v-row>
<v-col cols="10">
<v-row>
<v-col>
<v-skeleton-loader type="button" />
</v-col>
<v-col>
<v-skeleton-loader type="button" />
</v-col>
<v-col>
<v-skeleton-loader type="button" />
</v-col>
</v-row>
<v-row>
<v-col>
<v-skeleton-loader type="button" />
</v-col>
<v-col>
<v-skeleton-loader type="button" />
</v-col>
<v-col>
<v-skeleton-loader type="button" />
</v-col>
</v-row>
</v-col>
<v-col align-self="center">
<v-row>
<v-list-item>
<v-skeleton-loader type="chip" />
</v-list-item>
</v-row>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<script>
export default {
name: 'AddAmountSkeleton'
}
</script>
<style scoped></style>

35
src/components/user/Skeleton/CreditOverviewSkeleton.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<v-card style="margin-top: 3px">
<v-card-title><v-skeleton-loader type="heading"/></v-card-title>
<v-container>
<v-skeleton-loader type="table-thead" />
<v-skeleton-loader type="table-row-divider@3" />
</v-container>
<v-container fluid>
<v-col>
<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="chip" />
</v-col>
<v-col>
<v-skeleton-loader type="chip" />
</v-col>
</v-row>
</v-col>
</v-container>
</v-card>
</template>
<script>
export default {
name: 'CreditOverviewSkeleton'
}
</script>
<style scoped></style>

2
src/components/vorstand/ServiceManagementComponents/Day.vue
View File

@ -9,7 +9,7 @@
<v-card-text>
<v-expand-transition>
<v-row align="center" justify="center" v-if="day.loading">
<v-progress-circular indeterminate color="black" />
<v-progress-circular indeterminate color="grey" />
</v-row>
</v-expand-transition>
<v-expand-transition>

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

@ -4,7 +4,9 @@ import url from '@/plugins/routes'
const state = {
users: [],
allUsers: [],
filter: ''
filter: '',
usersLoading: false,
allUsersLoading: false
}
const mutations = {
@ -36,12 +38,21 @@ const mutations = {
lastname: users[user].lastname,
locked: users[user].locked,
amount: users[user].amount,
type: users[user].type
type: users[user].type,
loading: false
})
}
}
mutations.sortUsers(state)
},
updateUser: (state, data) => {
let index = state.users.indexOf(
state.users.find(a => {
return a.username === data.username
})
)
if (data.loading !== undefined) state.users[index].loading = data.loading
},
sortUsers: state => {
state.users = state.users.sort((a, b) => {
if (a.lastname > b.lastname) return 1
@ -53,12 +64,19 @@ const mutations = {
},
setFilter: (state, filter) => {
state.filter = filter
},
setUsersLoading: (state, value) => {
state.usersLoading = value
},
setAllUsersLoading: (state, value) => {
state.allUsersLoading = value
}
}
const actions = {
// eslint-disable-next-line no-unused-vars
async getUsers({ commit, rootState, dispatch }) {
commit('setUsersLoading', true)
try {
const response = await axios.get(url.bar, {
headers: { Token: rootState.login.user.accessToken }
@ -68,8 +86,10 @@ const actions = {
if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true })
}
commit('setUsersLoading', false)
},
async addAmount({ commit, rootState, dispatch }, data) {
commit('updateUser', {username: data.username, loading: true})
try {
const response = await axios.post(
url.barAddAmount,
@ -81,8 +101,10 @@ const actions = {
if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true })
}
commit('updateUser', {username: data.username, loading: false})
},
async addCreditList({ commit, rootState, dispatch }, data) {
commit('updateUser', {username: data.username, loading: true})
try {
const response = await axios.post(
url.barGetUser,
@ -94,8 +116,10 @@ const actions = {
if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true })
}
commit('updateUser', {username: data.username, loading: false})
},
async getAllUsers({ commit, rootState, dispatch }) {
commit('setAllUsersLoading', true)
try {
const response = await axios.post(
url.searchUser,
@ -107,6 +131,7 @@ const actions = {
if (e.response)
if (e.response.data === 401) dispatch('logout', null, { root: true })
}
commit('setAllUsersLoading', false)
},
setFilter({ commit }, data) {
commit('setFilter', data)
@ -122,7 +147,13 @@ const getters = {
},
filter: state => {
return state.filter
}
},
usersLoading: state => {
return state.usersLoading
},
allUsersLoading: state => {
return state.allUsersLoading
},
}
export default {

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

@ -75,7 +75,8 @@ const mutations = {
locked: users[user].locked,
autoLock: users[user].autoLock,
creditList: list,
expand: false
expand: false,
loading: false
})
}
}
@ -204,6 +205,7 @@ const mutations = {
if (data.locked !== undefined) state.users[index].locked = data.locked
if (data.limit !== undefined) state.users[index].limit = data.limit
if (data.autoLock !== undefined) state.users[index].autoLock = data.autoLock
if (data.loading !== undefined) state.users[index].loading = data.loading
},
setMails: (state, data) => {
state.errorMails = data
@ -265,6 +267,7 @@ const actions = {
commit('setActiveUser', username)
},
async addAmount({ commit, rootState, dispatch }, data) {
commit('updateUsers', {username: data.user.username, loading: true})
try {
const response = await axios.post(
url.finanzerAddAmount,
@ -288,8 +291,10 @@ const actions = {
if (err.response.status === 401)
dispatch('logout', null, { root: true })
}
commit('updateUsers', {username: data.user.username, loading: false})
},
async addCredit({ commit, rootState, dispatch }, data) {
commit('updateUsers', {username: data.user.username, loading: true})
try {
const response = await axios.post(
url.finanzerAddCredit,
@ -313,6 +318,7 @@ const actions = {
if (err.response.status === 401)
dispatch('logout', null, { root: true })
}
commit('updateUsers', {username: data.user.username, loading: false})
},
async doLock({ commit, rootState, dispatch }, data) {
try {

21
src/store/modules/login.js
View File

@ -5,6 +5,8 @@ import url from '@/plugins/routes'
const state = {
user: {
username: null,
firstname: null,
lastname: null,
accessToken: null,
group: null
},
@ -30,12 +32,16 @@ const mutations = {
state.user.username = data.username
state.user.accessToken = data.accessToken
state.user.group = data.group
state.user.firstname = data.firstname
state.user.lastname = data.lastname
}
},
logout(state) {
state.user.accessToken = null
state.user.username = null
state.user.group = null
state.user.firstname = null
state.user.lastname = null
}
}
@ -44,12 +50,15 @@ const actions = {
commit('loginStart')
try {
const response = await axios.post(url.login, { ...loginData })
console.log(response.data)
localStorage.setItem(
'user',
JSON.stringify({
username: response.data.username,
accessToken: response.data.token,
group: response.data.group
group: response.data.group,
firstname: response.data.firstname,
lastname: response.data.lastname
})
)
commit('loginStop', null)
@ -66,7 +75,9 @@ const actions = {
commit('updateAccessToken', {
username: null,
accessToken: null,
group: null
group: null,
firstname: null,
lastname: null
})
}
},
@ -84,6 +95,9 @@ const actions = {
}
const getters = {
loggingIn: state => {
return state.loggingIn
},
getGroup: state => {
return state.user.group
},
@ -122,6 +136,9 @@ const getters = {
},
isLoggedIn: state => {
return state.user.accessToken ? true : false
},
user: state => {
return state.user
}
}

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

@ -3,7 +3,8 @@ import url from '@/plugins/routes'
const state = {
user: null,
creditList: []
creditList: [],
loading: false
}
const mutations = {
@ -117,11 +118,15 @@ const mutations = {
sum.nov_amount +
sum.dez_amount
return sum
},
setLoading(state, value) {
state.loading = value
}
}
const actions = {
async getUser({ commit, rootState, dispatch }) {
commit("setLoading", true)
try {
const response = await axios.get(url.userMain, {
headers: { Token: rootState.login.user.accessToken }
@ -131,6 +136,7 @@ const actions = {
if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true })
}
commit("setLoading", false)
},
async addAmount({ commit, rootState, dispatch }, amount) {
try {
@ -158,6 +164,9 @@ const getters = {
if (currentYear > year) year = currentYear
}
return year
},
loading: state => {
return state.loading
}
}

5
src/views/Login.vue
View File

@ -37,6 +37,9 @@
@input="resetLoginError"
/>
</v-form>
<div class="text-center">
<v-progress-circular indeterminate v-if="loggingIn" />
</div>
</v-card-text>
<v-alert v-if="loginError" dense type="error">{{
loginError
@ -74,7 +77,7 @@ export default {
}
},
methods: mapActions(['doLogin', 'resetLoginError']),
computed: mapGetters(['loginError'])
computed: mapGetters(['loginError', 'loggingIn'])
}
</script>

7
src/views/MainView.vue
View File

@ -14,14 +14,14 @@
<v-list-item-icon>
<v-icon>person</v-icon>
</v-list-item-icon>
<v-list-item-title>Account</v-list-item-title>
<v-list-item-title>{{user.firstname}} {{user.lastname}}</v-list-item-title>
</v-list-item>
<v-list-item v-if="isBar" class="title" link to="/main/bar/geruecht">
<v-list-item-icon>
<v-icon>local_bar</v-icon>
</v-list-item-icon>
<v-list-item-title>
Gerüchte
Bar
</v-list-item-title>
</v-list-item>
<v-list-item v-if="isFinanzer" class="title" link to="/main/finanzer/overview">
@ -70,7 +70,8 @@ export default {
isBar: 'isBar',
isUser: 'isUser',
isFinanzer: 'isFinanzer',
isLoggedIn: 'isLoggedIn'
isLoggedIn: 'isLoggedIn',
user: 'user'
})
}
}