add active members count and fixing style for small screens

resolve tickets #220 and ticket #221
https://groeger-clan.duckdns.org/redmine/issues/220
https://groeger-clan.duckdns.org/redmine/issues/221

src/components/user/Config.vue

@@ -107,7 +107,7 @@
           </v-col>
         </v-row>
         <v-row>
-          <v-col>
+          <v-col v-bind:class="{ fulllineText: isFulllineText }">
             <v-combobox
               outlined
               multiple
@@ -131,17 +131,17 @@
               </template>
             </v-combobox>
           </v-col>
-          <v-col>
+          <v-col v-bind:class="{ fulllineText: isFulllineText }">
             <v-text-field outlined :value="computeStatus" readonly label="Mitgliedsstatus"/>
           </v-col>
-          <v-col>
+          <v-col v-bind:class="{ fulllineText: isFulllineText }">
             <v-text-field outlined :value="user.voting ? 'ja' : 'nein'" readonly label="Stimmrecht" />
           </v-col>
         </v-row>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn text color="primary" @click="save">Save</v-btn>
+        <v-btn text color="primary" @click="save">Speicherns</v-btn>
       </v-card-actions>
       <v-expand-transition>
         <v-alert type="error" v-if="error">{{ error }}</v-alert>
@@ -172,6 +172,7 @@ export default {
       lastname: null,
       password: null,
       controlPassword: null,
+      isFulllineText: false,
       equal_password: value =>
         this.password === value || 'Passwörter sind nicht identisch.',
       email: value => {
@@ -183,11 +184,21 @@ export default {
       }
     }
   },
+  mounted() {
+    this.$nextTick(function() {
+        window.addEventListener('resize', this.getWindowWidth);
+      this.getWindowWidth()
+
+    })
+  },
   methods: {
     ...mapActions({
       saveConfig: 'user/saveConfig',
       getStatus: 'user/getStatus'
     }),
+     getWindowWidth() {
+        this.isFulllineText = document.documentElement.clientWidth <= 600;
+      },
     save() {
       let user = {}
       if (this.firstname) user.firstname = this.firstname
@@ -237,4 +248,7 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.fulllineText{
+  flex-basis: unset;
+}</style>

src/components/vorstand/UserManager.vue

@@ -85,7 +85,7 @@
       <v-card-text>
         <v-container>
           <v-row>
-            <v-col>
+            <v-col v-bind:class="{ fulllineText: isFulllineText }">
               <v-text-field
                 outlined
                 :value="users.length"
@@ -93,7 +93,15 @@
                 readonly
               />
             </v-col>
-            <v-col>
+            <v-col v-bind:class="{ fulllineText: isFulllineText }">
+              <v-text-field
+                outlined
+                :value="allActiveUsers"
+                label="Anzahl aller aktiven Mitglieder"
+                readonly
+              />
+            </v-col>
+            <v-col v-bind:class="{ fulllineText: isFulllineText }">
               <v-text-field
                 outlined
                 :value="allVotings"
@@ -117,6 +125,7 @@ export default {
     return {
       editIcon: mdiPencil,
       searchIcon: mdiMagnify,
+      isFulllineText: false,
       editUser: false,
       disableVoting: null,
       search: null,
@@ -160,6 +169,15 @@ export default {
       }
     }
   },
+
+  mounted() {
+    this.$nextTick(function() {
+        window.addEventListener('resize', this.getWindowWidth);
+      this.getWindowWidth()
+
+    })
+  },
+
   methods: {
     ...mapActions({
       getUsers: 'usermanager/getUsers',
@@ -167,6 +185,9 @@ export default {
       updateStatusUser: 'usermanager/updateStatusUser',
       updateVoting: 'usermanager/updateVoting'
     }),
+     getWindowWidth() {
+        this.isFulllineText = document.documentElement.clientWidth <= 750;
+      },
     close() {
       this.editUser = false
       setTimeout(() => {
@@ -228,9 +249,16 @@ export default {
       }
     },
     allVotings() {
+      console.log(this.users);
       return this.users.filter(a => {
         return a.voting
       }).length
+    },
+
+    allActiveUsers(){
+      return this.users.filter(a => {
+        return a.statusgroup === 1
+      }).length
     }
   },
   created() {
@@ -240,4 +268,8 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.fulllineText{
+  flex-basis: unset;
+}
+</style>