change icons and added userConfigChange

This commit is contained in:
Tim Gröger 2020-01-26 23:55:59 +01:00
parent ba5a50c35f
commit 7d27421659
18 changed files with 2386 additions and 2045 deletions

4022
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -8,6 +8,8 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@mdi/font": "^4.8.95",
"@mdi/js": "^4.8.95",
"core-js": "^3.4.3",
"vue": "^2.6.10",
"vue-router": "^3.1.3",

View File

@ -5,23 +5,31 @@
</v-btn>
<v-toolbar-title>WU5-Dashboard</v-toolbar-title>
<v-spacer />
<v-btn icon v-if="isFinanzer" href="finanzer">
<v-icon>attach_money</v-icon>
<v-btn icon v-if="isFinanzer">
<v-icon>{{attach_money}}</v-icon>
</v-btn>
<v-btn icon v-if="isBar">
<v-icon>local_bar</v-icon>
<v-icon>{{local_bar}}</v-icon>
</v-btn>
<v-btn icon v-if="isUser">
<v-icon>person</v-icon>
<v-icon>{{person}}</v-icon>
</v-btn>
</v-app-bar>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import { mdiCurrencyEur, mdiGlassCocktail, mdiAccount } from '@mdi/js'
export default {
name: 'TitleBar',
data () {
return {
attach_money: mdiCurrencyEur,
local_bar: mdiGlassCocktail,
person: mdiAccount
}
},
computed: {
...mapGetters(['isBar', 'isFinanzer', 'isUser', 'isLoggedIn'])
},

View File

@ -2,7 +2,7 @@
<v-list>
<v-list-item link to="/main/bar/geruecht">
<v-list-item-icon>
<v-icon>local_drink</v-icon>
<v-icon>{{ glass_mug_variant }}</v-icon>
</v-list-item-icon>
<v-list-item-title>
Geruecht
@ -12,8 +12,14 @@
</template>
<script>
import { mdiGlassMugVariant } from '@mdi/js'
export default {
name: 'BarNavigation'
name: 'BarNavigation',
data() {
return {
glass_mug_variant: mdiGlassMugVariant
}
}
}
</script>

View File

@ -11,11 +11,14 @@
placeholder="Suche Person"
:items="allUsers"
item-text="fullName"
prepend-inner-icon="search"
full-width
:loading="loading"
:search-input.sync="filter"
/>
>
<template v-slot:prepend-inner>
<v-icon>{{search_person}}</v-icon>
</template>
</v-autocomplete>
<v-btn text @click="addUser">Hinzufügen</v-btn>
</v-toolbar-items>
</v-toolbar>
@ -24,6 +27,7 @@
<script>
import { mapGetters, mapActions } from 'vuex'
import { mdiAccountSearch } from '@mdi/js'
export default {
name: 'SearchBar',
@ -31,7 +35,8 @@ export default {
data() {
return {
user: null,
filter: ''
filter: '',
search_person: mdiAccountSearch
}
},
created() {

View File

@ -3,13 +3,13 @@
<v-list>
<v-list-item class="title" link to="/main/finanzer/overview">
<v-list-item-icon>
<v-icon>home</v-icon>
<v-icon>{{home}}</v-icon>
</v-list-item-icon>
<v-list-item-title>Gesamtübersicht</v-list-item-title>
</v-list-item>
<v-list-item link to="/main/finanzer/servicemanagement">
<v-list-item-icon>
<v-icon>work</v-icon>
<v-icon>{{work}}</v-icon>
</v-list-item-icon>
<v-list-item-title>Dienstverwaltung</v-list-item-title>
</v-list-item>
@ -35,8 +35,15 @@
<script>
import { mapGetters, mapActions } from 'vuex'
import {mdiHome, mdiBriefcase} from '@mdi/js'
export default {
name: 'FinanzerNavigation',
data () {
return {
home: mdiHome,
work: mdiBriefcase
}
},
methods: {
...mapActions({
addUser: 'finanzerUsers/addUser'

View File

@ -5,13 +5,13 @@
<v-spacer />
<v-toolbar-items>
<v-btn text icon @click="countYear(false)">
<v-icon>keyboard_arrow_left</v-icon>
<v-icon>{{keyboard_arrow_left}}</v-icon>
</v-btn>
<v-list-item>
<v-list-item-title class="title">{{ year }}</v-list-item-title>
</v-list-item>
<v-btn text icon @click="countYear(true)" :disabled="isActualYear">
<v-icon>keyboard_arrow_right</v-icon>
<v-icon>{{keyboard_arrow_right}}</v-icon>
</v-btn>
</v-toolbar-items>
<v-spacer />
@ -25,11 +25,14 @@
placeholder="Suche Person"
:items="allUsers"
item-text="fullName"
prepend-inner-icon="search"
full-width
:loading="allUsersLoading"
:search-input.sync="filter"
/>
>
<template v-slot:prepend-inner>
<v-icon>{{search_person}}</v-icon>
</template>
</v-autocomplete>
<v-btn
text
@click="addToUser(user)"
@ -210,12 +213,16 @@
import Table from './Table'
import { mapGetters, mapActions } from 'vuex'
import TableSkeleton from './Skeleton/TableSkeleton'
import {mdiChevronLeft, mdiChevronRight, mdiAccountSearch} from '@mdi/js'
export default {
name: 'Overview',
components: { TableSkeleton, Table },
props: {},
data() {
return {
keyboard_arrow_left: mdiChevronLeft,
keyboard_arrow_right: mdiChevronRight,
search_person: mdiAccountSearch,
errorExpand: false,
filter: '',

View File

@ -1,7 +1,7 @@
<template>
<v-container >
<AddAmountSkeleton v-if="loading" />
<v-card v-if="!loading">
<v-card v-if="!loading" :loading="addLoading">
<v-list-item>
<v-list-item-title class="title"
>{{ user.firstname }} {{ user.lastname }}</v-list-item-title
@ -127,7 +127,8 @@ export default {
...mapGetters({
user: 'user/user',
year: 'user/year',
loading: 'user/loading'
loading: 'user/loading',
addLoading: 'user/addLoading'
}),
}
}

View File

@ -0,0 +1,210 @@
<template>
<div>
<v-card v-if="user" :loading="loading" style="margin-top: 3px">
<v-card-title>{{ user.firstname }} {{ user.lastname }}</v-card-title>
<v-card-text>
<v-row>
<v-col cols="12" sm="6">
<v-text-field
outlined
label="Vornamen"
:placeholder="user.firstname"
v-model="firstname"
readonly
/>
</v-col>
<v-col cols="12" sm="6">
<v-text-field
outlined
label="Nachname"
:placeholder="user.lastname"
v-model="lastname"
readonly
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6">
<v-text-field
outlined
label="Benutzername"
:placeholder="user.username"
v-model="username"
readonly
></v-text-field>
</v-col>
<v-col cols="12" sm="6">
<v-text-field
ref="mail"
outlined
label="E-Mail"
:placeholder="user.mail"
v-model="mail"
readonly
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6">
<v-text-field
outlined
label="Password"
type="password"
v-model="password"
/>
</v-col>
<v-col cols="12" sm="6">
<v-text-field
ref="password"
outlined
label="Password bestätigen"
type="password"
:disabled="!password"
:rules="[equal_password]"
/>
</v-col>
</v-row>
<v-divider />
<v-row>
<v-col cols="12" sm="4">
<v-text-field
outlined
label="Sperrlimit"
readonly
:value="(user.limit / 100).toFixed(2).toString() + '€'"
/>
</v-col>
<v-col cols="12" sm="4">
<v-combobox
outlined
label="Sperrstatus"
v-model="lock"
append-icon
readonly
>
<template v-slot:selection="data">
<v-chip :color="lockColor">
{{ data.item }}
</v-chip>
</template>
</v-combobox>
</v-col>
<v-col cols="12" sm="4">
<v-combobox
outlined
label="Autosperre"
v-model="autoLock"
readonly
append-icon
>
<template v-slot:selection="data">
<v-chip :color="autoLockColor">
{{ data.item }}
</v-chip>
</template>
</v-combobox>
</v-col>
</v-row>
<v-row>
<v-col>
<v-combobox
outlined
multiple
label="Gruppen"
readonly
v-model="user.group"
append-icon
>
<template v-slot:selection="data">
<v-icon>{{
data.item === 'user'
? person
: data.item === 'bar'
? bar
: data.item === 'moneymaster'
? finanzer
: false
}}</v-icon>
</template>
</v-combobox>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="save">Save</v-btn>
</v-card-actions>
<v-expand-transition>
<v-alert type="error" v-if="error">{{error}}</v-alert>
</v-expand-transition>
</v-card>
</div>
</template>
<script>
import { mdiAccount, mdiGlassCocktail, mdiCurrencyEur } from '@mdi/js'
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'Config',
data() {
return {
person: mdiAccount,
bar: mdiGlassCocktail,
finanzer: mdiCurrencyEur,
username: null,
mail: null,
firstname: null,
lastname: null,
password: null,
equal_password: value =>
this.password === value || 'Passwörter sind nicht identisch.',
email: value => {
if(value.length > 0) {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'keine gültige E-Mail';
}
return true
}
}
},
methods: {
...mapActions({
saveConfig: 'user/saveConfig'
}),
save() {
let user = {}
if (this.firstname) user.firstname = this.firstname
if (this.lastname) user.lastname = this.lastname
if (this.username) user.username = this.username
if (this.$refs.mail.validate()) {
if (this.mail) user.mail = this.mail
}
if (this.$refs.password.validate()) {
if (this.password) user.password = this.password
}
this.saveConfig({oldUsername: user.username, ...user})
}
},
computed: {
...mapGetters({
user: 'user/user',
error: 'user/error',
loading: 'user/loading'
}),
lock() {
return this.user.lock ? 'gesperrt' : 'nicht gesperrt'
},
lockColor() {
return this.user.lock ? 'red' : 'green'
},
autoLock() {
return this.user.autoLock ? 'aktiviert' : 'deaktiviert'
},
autoLockColor() {
return this.user.autoLock ? 'green' : 'red'
}
}
}
</script>
<style scoped></style>

View File

@ -2,7 +2,7 @@
<v-list>
<v-list-item link to="/main/user/add">
<v-list-item-icon>
<v-icon>home</v-icon>
<v-icon>{{account}}</v-icon>
</v-list-item-icon>
<v-list-item-title>
Home
@ -10,16 +10,30 @@
</v-list-item>
<v-list-item link to="/main/user/overview">
<v-list-item-icon>
<v-icon>account_balance</v-icon>
<v-icon>{{bank}}</v-icon>
</v-list-item-icon>
<v-list-item-title>Finanzübersicht</v-list-item-title>
</v-list-item>
<v-list-item link to="/main/user/config">
<v-list-item-icon>
<v-icon>{{account_card_details}}</v-icon>
</v-list-item-icon>
<v-list-item-title>Einstellung</v-list-item-title>
</v-list-item>
</v-list>
</template>
<script>
import {mdiAccountCardDetails, mdiHome, mdiBank} from '@mdi/js'
export default {
name: 'UserNavigation'
name: 'UserNavigation',
data () {
return {
account_card_details: mdiAccountCardDetails,
account: mdiHome,
bank: mdiBank
}
}
}
</script>

View File

@ -8,7 +8,7 @@
<v-spacer />
<v-toolbar-items>
<v-btn text icon @click="changeMonth(-1)">
<v-icon>keyboard_arrow_left</v-icon>
<v-icon>{{keyboard_arrow_left}}</v-icon>
</v-btn>
<v-list-item>
<v-list-item-title class="title"
@ -17,7 +17,7 @@
>
</v-list-item>
<v-btn text icon @click="changeMonth(1)">
<v-icon>keyboard_arrow_right</v-icon>
<v-icon>{{keyboard_arrow_right}}</v-icon>
</v-btn>
</v-toolbar-items>
<v-spacer />
@ -47,12 +47,15 @@
<script>
import { mapGetters, mapActions } from 'vuex'
import {mdiChevronLeft, mdiChevronRight} from '@mdi/js'
import Day from './ServiceManagementComponents/Day'
export default {
name: 'ServiceManagement',
components: { Day },
data() {
return {
keyboard_arrow_left: mdiChevronLeft,
keyboard_arrow_right: mdiChevronRight,
id: 0,
date: new Date(),
monthArray: [

View File

@ -22,7 +22,6 @@
:items="allUsers"
item-text="fullName"
label="Dienste"
prepend-inner-icon="group_add"
filled
color="green"
@input="searchInput=null"
@ -31,6 +30,9 @@
@focus="focused=true"
>
<template v-slot:prepend-inner>
<v-icon>{{account_add}}</v-icon>
</template>
<template v-slot:selection="data">
<v-chip
v-bind="data.attrs"
@ -59,6 +61,7 @@
<script>
import { mapGetters, mapActions } from 'vuex'
import {mdiAccountPlus} from '@mdi/js'
export default {
name: 'Day',
props: {
@ -66,6 +69,7 @@ export default {
},
data() {
return {
account_add: mdiAccountPlus,
searchInput: null,
focused: false
}

View File

@ -1,7 +1,7 @@
//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 = 'https://groeger-clan.duckdns.org:5000/'
const main = 'https://groeger-clan.duckdns.org:5000/'
const url = {
login: main + 'login',
@ -26,6 +26,9 @@ const url = {
deleteUser: main + 'sm/deleteUser',
getUser: main + 'sm/getUser'
}
},
user: {
config: main + 'user/saveConfig'
}
}

View File

@ -1,11 +1,10 @@
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'material-design-icons-iconfont'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'md'
iconfont: 'mdiSvg'
}
})

View File

@ -15,6 +15,7 @@ import FinanzerNavigation from '../components/finanzer/FinanzerNavigation'
import Overview from '../components/finanzer/Overview'
import User from '../components/finanzer/User'
import ServiceManagement from '../components/vorstand/ServiceManagement'
import Config from "@/components/user/Config";
Vue.use(VueRouter)
@ -43,6 +44,11 @@ const routes = [
path: 'overview',
name: 'userOverview',
component: CreditOverview
},
{
path: 'config',
name: 'userConfig',
component: Config
}
]
},

View File

@ -4,7 +4,9 @@ import url from '@/plugins/routes'
const state = {
user: null,
creditList: [],
loading: false
loading: false,
addLoading: false,
error: ''
}
const mutations = {
@ -21,6 +23,7 @@ const mutations = {
}
state.user.creditList = list
state.creditList = []
state.error = ''
// eslint-disable-next-line no-console
console.log(state.user)
},
@ -121,6 +124,13 @@ const mutations = {
},
setLoading(state, value) {
state.loading = value
},
setAddLoading(state, value) {
state.addLoading = value
},
setError(state, value) {
state.error = value
console.log(state)
}
}
@ -132,6 +142,7 @@ const actions = {
headers: { Token: rootState.login.user.accessToken }
})
commit('setUser', response.data)
commit('setError', '')
} catch (e) {
if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true })
@ -139,6 +150,7 @@ const actions = {
commit("setLoading", false)
},
async addAmount({ commit, rootState, dispatch }, amount) {
commit('setAddLoading', true)
try {
const response = await axios.post(
url.userAddAmount,
@ -146,10 +158,30 @@ const actions = {
{ headers: { Token: rootState.login.user.accessToken } }
)
commit('setUser', response.data)
commit('setError', '')
} catch (e) {
if (e.response)
if (e.response.status === 401) dispatch('logout', null, { root: true })
}
commit('setAddLoading', false)
},
async saveConfig({ commit, rootState, dispatch }, data) {
commit('setLoading', true)
try {
const response = await axios.post(url.user.config, {...data}, {headers: {Token: rootState.login.user.accessToken}})
console.log(response.data)
commit('setUser', response.data)
commit('setError', '')
} catch (e) {
if (e.response) {
if (e.response.status === 401) dispatch('logout', null, {root: true})
if (e.response.data) {
console.log(e.response.data)
commit('setError', e.response.data.error)
}
}
}
commit('setLoading', false)
}
}
@ -167,7 +199,14 @@ const getters = {
},
loading: state => {
return state.loading
},
addLoading: state => {
return state.addLoading
},
error: state => {
return state.error
}
}
export default {

View File

@ -14,7 +14,6 @@
<v-text-field
label="Login"
name="login"
prepend-icon="person"
type="text"
v-model="username"
ref="first"
@ -22,20 +21,27 @@
doLogin({ username: username, password: password })
"
@input="resetLoginError"
/>
>
<template v-slot:prepend-inner>
<v-icon>{{account}}</v-icon>
</template>
</v-text-field>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
v-model="password"
@keyup.enter="
doLogin({ username: username, password: password })
"
@input="resetLoginError"
/>
>
<template v-slot:prepend-inner>
<v-icon>{{lock}}</v-icon>
</template>
</v-text-field>
</v-form>
<div class="text-center">
<v-progress-circular indeterminate v-if="loggingIn" />
@ -65,15 +71,17 @@
<script>
// eslint-disable-next-line no-unused-vars
import { mapActions } from 'vuex'
import { mapGetters } from 'vuex'
import { mapActions, mapGetters } from 'vuex'
import { mdiAccount, mdiLock } from '@mdi/js'
export default {
name: 'Login',
components: {},
data() {
return {
username: null,
password: null
password: null,
account: mdiAccount,
lock: mdiLock
}
},
methods: mapActions(['doLogin', 'resetLoginError']),

View File

@ -12,13 +12,13 @@
<v-list>
<v-list-item v-if="isUser" class="title" link to="/main/user/add">
<v-list-item-icon>
<v-icon>person</v-icon>
<v-icon>{{person}}</v-icon>
</v-list-item-icon>
<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-icon>{{glass_cocktail}}</v-icon>
</v-list-item-icon>
<v-list-item-title>
Bar
@ -26,7 +26,7 @@
</v-list-item>
<v-list-item v-if="isFinanzer" class="title" link to="/main/finanzer/overview">
<v-list-item-icon>
<v-icon>attach_money</v-icon>
<v-icon>{{attach_money}}</v-icon>
</v-list-item-icon>
<v-list-item-title>Finanzer</v-list-item-title>
</v-list-item>
@ -39,7 +39,7 @@
<v-list>
<v-list-item>
<v-list-item-icon>
<v-icon>exit_to_app</v-icon>
<v-icon>{{exit_to_app}}</v-icon>
</v-list-item-icon>
<v-list-item-title>
<v-btn block text @click="logout">Logout</v-btn>
@ -54,8 +54,17 @@
<script>
import { mapActions, mapGetters } from 'vuex'
import {mdiAccount, mdiCurrencyEur, mdiExitToApp, mdiGlassCocktail} from '@mdi/js'
export default {
name: 'MainView',
data () {
return {
person: mdiAccount,
attach_money: mdiCurrencyEur,
exit_to_app: mdiExitToApp,
glass_cocktail: mdiGlassCocktail
}
},
components: { },
created() {
},