change icons and added userConfigChange

package.json

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

src/components/TitleBar.vue

@@ -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'])
   },

src/components/baruser/BarNavigation.vue

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

src/components/baruser/SearchBar.vue

@@ -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() {

src/components/finanzer/FinanzerNavigation.vue

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

src/components/finanzer/Overview.vue

@@ -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: '',

src/components/user/AddAmount.vue

@@ -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'
     }),
   }
 }

src/components/user/Config.vue

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

src/components/user/UserNavigation.vue

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

src/components/vorstand/ServiceManagement.vue

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

src/components/vorstand/ServiceManagementComponents/Day.vue

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

src/plugins/routes.js

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

src/plugins/vuetify.js

@@ -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'
   }
 })

src/router/index.js

@@ -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
           }
         ]
       },

src/store/modules/user.js

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

src/views/Login.vue

@@ -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']),

src/views/MainView.vue

@@ -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() {
   },