From 708f40938a6975ee541d60c88d023a84b1b44d5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Tue, 14 Jan 2020 23:10:09 +0100
Subject: [PATCH] add search for baruser

TODO: maybe we can change the filter in finanzerview too
---
 src/components/baruser/CreditLists.vue | 211 +++++++++++++++----------
 src/components/baruser/SearchBar.vue   |  15 +-
 src/components/finanzer/Overview.vue   |  83 +++++++---
 src/store/modules/barUsers.js          |  26 ++-
 src/store/modules/finanzerUsers.js     |  16 --
 5 files changed, 206 insertions(+), 145 deletions(-)

diff --git a/src/components/baruser/CreditLists.vue b/src/components/baruser/CreditLists.vue
index 35bff87..03db226 100644
--- a/src/components/baruser/CreditLists.vue
+++ b/src/components/baruser/CreditLists.vue
@@ -1,90 +1,116 @@
 <template>
   <div>
     <div v-for="user in users" :key="users.indexOf(user)">
-      <v-container>
-        <v-card>
-          <v-list-item>
-            <v-list-item-title class="title">{{user.firstname}} {{user.lastname}}</v-list-item-title>
-          </v-list-item>
-          <v-card-text>
-            <v-row>
-              <v-col cols="10">
-                <v-row>
-                  <v-col>
-                    <v-btn
-                      class="creditBtn"
-                      block
-                      @click="addAmount({username: user.username, amount: 200})"
-                      :color="color"
-                      :disabled="user.locked"
-                    >2 €</v-btn>
-                  </v-col>
-                  <v-col>
-                    <v-btn
-                      class="creditBtn"
-                      block
-                      @click="addAmount({username: user.username, amount: 100})"
-                      :color="color"
-                      :disabled="user.locked"
-                    >1 €</v-btn>
-                  </v-col>
-                  <v-col>
-                    <v-btn
-                      class="creditBtn"
-                      block
-                      @click="addAmount({username: user.username, amount: 50})"
-                      :color="color"
-                      :disabled="user.locked"
-                    >0,50 €</v-btn>
-                  </v-col>
-                </v-row>
-                <v-row>
-                  <v-col>
-                    <v-btn
-                      class="creditBtn"
-                      block
-                      @click="addAmount({username:user.username, amount: 40})"
-                      :color="color"
-                      :disabled="user.locked"
-                    >0,40 €</v-btn>
-                  </v-col>
-                  <v-col>
-                    <v-btn
-                      class="creditBtn"
-                      block
-                      @click="addAmount({username: user.username, amount: 20})"
-                      :color="color"
-                      :disabled="user.locked"
-                    >0,20 €</v-btn>
-                  </v-col>
-                  <v-col>
-                    <v-btn
-                      class="creditBtn"
-                      block
-                      @click="addAmount({username: user.username, amount: 10})"
-                      :color="color"
-                      :disabled="user.locked"
-                    >0,10 €</v-btn>
-                  </v-col>
-                </v-row>
-              </v-col>
-              <v-col align-self="center">
-                <v-row>
-                  <v-list-item>
-                    <v-list-item-action-text
-                      :class="getColor(user.type)"
-                    >{{(user.amount/100).toFixed(2)}} €</v-list-item-action-text>
-                  </v-list-item>
-                </v-row>
-              </v-col>
-            </v-row>
-            <v-alert
-              v-if="user.locked"
-              type="error"
-            >{{user.firstname}} darf nicht mehr anschreiben. {{user.firstname}} sollte sich lieber mal beim Finanzer melden.</v-alert>
-          </v-card-text>
-        </v-card>
-      </v-container>
+      <div v-if="isFiltered(user)">
+        <v-container>
+          <v-card>
+            <v-list-item>
+              <v-list-item-title class="title"
+                >{{ user.firstname }} {{ user.lastname }}</v-list-item-title
+              >
+            </v-list-item>
+            <v-card-text>
+              <v-row>
+                <v-col cols="10">
+                  <v-row>
+                    <v-col>
+                      <v-btn
+                        class="creditBtn"
+                        block
+                        @click="
+                          addAmount({ username: user.username, amount: 200 })
+                        "
+                        :color="color"
+                        :disabled="user.locked"
+                        >2 €</v-btn
+                      >
+                    </v-col>
+                    <v-col>
+                      <v-btn
+                        class="creditBtn"
+                        block
+                        @click="
+                          addAmount({ username: user.username, amount: 100 })
+                        "
+                        :color="color"
+                        :disabled="user.locked"
+                        >1 €</v-btn
+                      >
+                    </v-col>
+                    <v-col>
+                      <v-btn
+                        class="creditBtn"
+                        block
+                        @click="
+                          addAmount({ username: user.username, amount: 50 })
+                        "
+                        :color="color"
+                        :disabled="user.locked"
+                        >0,50 €</v-btn
+                      >
+                    </v-col>
+                  </v-row>
+                  <v-row>
+                    <v-col>
+                      <v-btn
+                        class="creditBtn"
+                        block
+                        @click="
+                          addAmount({ username: user.username, amount: 40 })
+                        "
+                        :color="color"
+                        :disabled="user.locked"
+                        >0,40 €</v-btn
+                      >
+                    </v-col>
+                    <v-col>
+                      <v-btn
+                        class="creditBtn"
+                        block
+                        @click="
+                          addAmount({ username: user.username, amount: 20 })
+                        "
+                        :color="color"
+                        :disabled="user.locked"
+                        >0,20 €</v-btn
+                      >
+                    </v-col>
+                    <v-col>
+                      <v-btn
+                        class="creditBtn"
+                        block
+                        @click="
+                          addAmount({ username: user.username, amount: 10 })
+                        "
+                        :color="color"
+                        :disabled="user.locked"
+                        >0,10 €</v-btn
+                      >
+                    </v-col>
+                  </v-row>
+                </v-col>
+                <v-col align-self="center">
+                  <v-row>
+                    <v-list-item>
+                      <v-list-item-action-text :class="getColor(user.type)"
+                        >{{
+                          (user.amount / 100).toFixed(2)
+                        }}
+                        €</v-list-item-action-text
+                      >
+                    </v-list-item>
+                  </v-row>
+                </v-col>
+              </v-row>
+              <v-alert v-if="user.locked" type="error"
+                >{{ user.firstname }} darf nicht mehr anschreiben.
+                {{ user.firstname }} sollte sich lieber mal beim Finanzer
+                melden.</v-alert
+              >
+            </v-card-text>
+          </v-card>
+        </v-container>
+      </div>
     </div>
   </div>
 </template>
@@ -102,8 +128,6 @@ export default {
   },
   created() {
     this.getUsers()
-    // eslint-disable-next-line no-console
-    console.log(this.users)
   },
   methods: {
     ...mapActions({
@@ -112,10 +136,23 @@ export default {
     }),
     getColor(type) {
       return type === 'credit' ? 'title green--text' : 'title red--text'
+    },
+    isFiltered(user) {
+      try {
+        return (
+          user.firstname.toLowerCase().includes(this.filter.toLowerCase()) ||
+          user.lastname.toLowerCase().includes(this.filter.toLowerCase())
+        )
+      } catch (e) {
+        return true
+      }
     }
   },
   computed: {
-    ...mapGetters({ users: 'barUsers/users' })
+    ...mapGetters({
+      users: 'barUsers/users',
+      filter: 'barUsers/filter'
+    })
   }
 }
 </script>
diff --git a/src/components/baruser/SearchBar.vue b/src/components/baruser/SearchBar.vue
index c1abe10..58efddf 100644
--- a/src/components/baruser/SearchBar.vue
+++ b/src/components/baruser/SearchBar.vue
@@ -13,6 +13,7 @@
           item-text="fullName"
           prepend-inner-icon="search"
           full-width
+          :search-input.sync="filter"
         />
         <v-btn text @click="addUser">Hinzufügen</v-btn>
       </v-toolbar-items>
@@ -28,7 +29,8 @@ export default {
   props: {},
   data() {
     return {
-      user: null
+      user: null,
+      filter: ''
     }
   },
   created() {
@@ -37,7 +39,8 @@ export default {
   methods: {
     ...mapActions({
       getAllUsers: 'barUsers/getAllUsers',
-      addCreditList: 'barUsers/addCreditList'
+      addCreditList: 'barUsers/addCreditList',
+      setFilter: 'barUsers/setFilter'
     }),
     addUser() {
       this.addCreditList(this.user)
@@ -46,9 +49,13 @@ export default {
   },
   computed: {
     ...mapGetters({ allUsers: 'barUsers/allUsers' })
+  },
+  watch: {
+    filter(val) {
+      this.setFilter(val)
+    }
   }
 }
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/components/finanzer/Overview.vue b/src/components/finanzer/Overview.vue
index 37da410..ec0c0ae 100644
--- a/src/components/finanzer/Overview.vue
+++ b/src/components/finanzer/Overview.vue
@@ -8,7 +8,7 @@
           <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-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>
@@ -17,7 +17,12 @@
       <v-spacer />
       <v-toolbar-items>
         <v-btn text @click="sendMails">Emails senden</v-btn>
-        <v-text-field v-model="filter" style="margin-top: 3px" append-icon="search" outlined></v-text-field>
+        <v-text-field
+          v-model="filter"
+          style="margin-top: 3px"
+          append-icon="search"
+          outlined
+        ></v-text-field>
       </v-toolbar-items>
     </v-toolbar>
     <v-expand-transition>
@@ -28,7 +33,7 @@
             text
             icon
             style="margin-right: 5px"
-            @click="errorExpand ? errorExpand = false : errorExpand = true"
+            @click="errorExpand ? (errorExpand = false) : (errorExpand = true)"
           >
             <v-icon :class="isExpand(errorExpand)" dense>$expand</v-icon>
           </v-btn>
@@ -40,14 +45,18 @@
               :key="errorMails.indexOf(error)"
               dense
               :type="computeError(error.error)"
-            >{{errorMessage(error)}}</v-alert>
+              >{{ errorMessage(error) }}</v-alert
+            >
           </div>
         </v-expand-transition>
       </v-card>
     </v-expand-transition>
     <div v-for="user in users" :key="users.indexOf(user)">
-      <v-card v-if="user.creditList[year] && isFiltered(user)" style="margin-top: 3px">
-        <v-card-title>{{user.lastname}}, {{user.firstname}}</v-card-title>
+      <v-card
+        v-if="user.creditList[year] && isFiltered(user)"
+        style="margin-top: 3px"
+      >
+        <v-card-title>{{ user.lastname }}, {{ user.firstname }}</v-card-title>
         <Table v-bind:user="user" v-bind:year="year" />
         <v-container fluid>
           <v-row align="start" align-content="start">
@@ -60,7 +69,10 @@
                   <v-chip
                     outlined
                     :text-color="getLastColor(user.creditList[year][1].last)"
-                  >{{(user.creditList[year][1].last / 100).toFixed(2)}}</v-chip>
+                    >{{
+                      (user.creditList[year][1].last / 100).toFixed(2)
+                    }}</v-chip
+                  >
                 </v-col>
               </v-row>
               <v-row>
@@ -71,10 +83,23 @@
                   <v-chip
                     outlined
                     x-large
-                    :text-color="getLastColor(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last))"
+                    :text-color="
+                      getLastColor(
+                        getAllSum(
+                          user.creditList[year][2].sum,
+                          user.creditList[year][1].last
+                        )
+                      )
+                    "
                   >
-                    {{(getAllSum(user.creditList[year][2].sum ,user.creditList[year][1].last) /
-                    100).toFixed(2)}}
+                    {{
+                      (
+                        getAllSum(
+                          user.creditList[year][2].sum,
+                          user.creditList[year][1].last
+                        ) / 100
+                      ).toFixed(2)
+                    }}
                   </v-chip>
                 </v-col>
               </v-row>
@@ -85,18 +110,26 @@
                   <v-label>Status:</v-label>
                 </v-col>
                 <v-col>
-                  <v-chip
-                    outlined
-                    :text-color="getLockedColor(user.locked)"
-                  >{{user.locked ? 'Gesperrt': 'nicht Gesperrt'}}</v-chip>
+                  <v-chip outlined :text-color="getLockedColor(user.locked)">{{
+                    user.locked ? 'Gesperrt' : 'nicht Gesperrt'
+                  }}</v-chip>
                 </v-col>
               </v-row>
               <v-card outlined>
                 <v-row>
-                  <v-card-title class="subtitle-2">Geld transferieren</v-card-title>
+                  <v-card-title class="subtitle-2"
+                    >Geld transferieren</v-card-title
+                  >
                   <v-spacer />
-                  <v-btn text icon style="margin-right: 5px" @click="setExpand(user)">
-                    <v-icon :class="isExpand(user.expand)" dense>$expand</v-icon>
+                  <v-btn
+                    text
+                    icon
+                    style="margin-right: 5px"
+                    @click="setExpand(user)"
+                  >
+                    <v-icon :class="isExpand(user.expand)" dense
+                      >$expand</v-icon
+                    >
                   </v-btn>
                 </v-row>
                 <v-expand-transition>
@@ -104,14 +137,21 @@
                     <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-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'}]"
+                            :items="[
+                              { value: 'amount', text: 'Schulden' },
+                              { value: 'credit', text: 'Guthaben' }
+                            ]"
                             item-text="text"
                             item-value="value"
                           ></v-select>
@@ -191,10 +231,7 @@ export default {
       }
     }
   },
-  created() {
-    // eslint-disable-next-line no-console
-    console.log(this.getData(this.createYears()))
-  },
+  created() {},
   methods: {
     ...mapActions({
       createYears: 'finanzerUsers/createYears',
diff --git a/src/store/modules/barUsers.js b/src/store/modules/barUsers.js
index ed4186a..6dab54b 100644
--- a/src/store/modules/barUsers.js
+++ b/src/store/modules/barUsers.js
@@ -3,7 +3,8 @@ import url from '@/plugins/routes'
 
 const state = {
   users: [],
-  allUsers: []
+  allUsers: [],
+  filter: ''
 }
 
 const mutations = {
@@ -16,11 +17,7 @@ const mutations = {
     }
   },
   setUsers: (state, users) => {
-    // eslint-disable-next-line no-console
-    console.log(users)
     for (let user in users) {
-      // eslint-disable-next-line no-console
-      console.log(user)
       let existuser = state.users.find(a => {
         return user === a.username
       })
@@ -43,8 +40,6 @@ const mutations = {
         })
       }
     }
-    // eslint-disable-next-line no-console
-    console.log(state.users)
     mutations.sortUsers(state)
   },
   sortUsers: state => {
@@ -55,6 +50,9 @@ const mutations = {
       if (a.firstname < b.firstname) return -1
       return 0
     })
+  },
+  setFilter: (state, filter) => {
+    state.filter = filter
   }
 }
 
@@ -65,8 +63,6 @@ const actions = {
       const response = await axios.get(url.bar, {
         headers: { Token: rootState.login.user.accessToken }
       })
-      // eslint-disable-next-line no-console
-      console.log(response.data)
       commit('setUsers', response.data)
     } catch (e) {
       if (e.response)
@@ -100,23 +96,20 @@ const actions = {
     }
   },
   async getAllUsers({ commit, rootState, dispatch }) {
-    // eslint-disable-next-line no-console
-    console.log('hier bin ich')
     try {
       const response = await axios.post(
         url.searchUser,
         { searchString: '' },
         { headers: { Token: rootState.login.user.accessToken } }
       )
-      // eslint-disable-next-line no-console
-      console.log(response)
       commit('setAllUsers', response.data)
     } catch (e) {
-      // eslint-disable-next-line no-console
-      console.log(e)
       if (e.response)
         if (e.response.data === 401) dispatch('logout', null, { root: true })
     }
+  },
+  setFilter({ commit }, data) {
+    commit('setFilter', data)
   }
 }
 
@@ -126,6 +119,9 @@ const getters = {
   },
   allUsers: state => {
     return state.allUsers
+  },
+  filter: state => {
+    return state.filter
   }
 }
 
diff --git a/src/store/modules/finanzerUsers.js b/src/store/modules/finanzerUsers.js
index d379a36..766f0f6 100644
--- a/src/store/modules/finanzerUsers.js
+++ b/src/store/modules/finanzerUsers.js
@@ -47,11 +47,7 @@ const mutations = {
     state.errorMail = null
   },
   setUsers: (state, users) => {
-    // eslint-disable-next-line no-console
-    console.log('users', users)
     for (let user in users) {
-      // eslint-disable-next-line no-console
-      console.log('user', user)
       let list = {}
       for (let creditList in users[user]['creditList']) {
         let amount = mutations.createAmount(
@@ -67,9 +63,6 @@ const mutations = {
       let existUser = state.users.find(a => {
         return a.username === user
       })
-
-      // eslint-disable-next-line no-console
-      console.log(existUser)
       if (existUser) {
         existUser.username = users[user].username
         existUser.firstname = users[user].firstname
@@ -92,9 +85,6 @@ const mutations = {
       }
     }
     mutations.sortUsers(state)
-
-    // eslint-disable-next-line no-console
-    console.log(state.users)
   },
   createAmount(creditList) {
     let amount = {
@@ -240,8 +230,6 @@ const mutations = {
 const actions = {
   // eslint-disable-next-line no-unused-vars
   async getAllUsers({ commit, rootState, dispatch }) {
-    // eslint-disable-next-line no-console
-    console.log(rootState)
     try {
       const response = await axios.post(
         url.searchUser,
@@ -261,12 +249,8 @@ const actions = {
       const response = await axios.get(url.getFinanzerMain, {
         headers: { Token: rootState.login.user.accessToken }
       })
-      // eslint-disable-next-line no-console
-      console.log('response', response.data)
       commit('setUsers', response.data)
     } catch (err) {
-      // eslint-disable-next-line no-console
-      console.log(err)
       if (err.response)
         if (err.response.status === 401)
           dispatch('logout', null, { root: true })