From a6a4deff70496790d0bda8447b979c8ecf04a10b Mon Sep 17 00:00:00 2001
From: Davide Alberani <da@erlug.linux.it>
Date: Tue, 17 Jan 2017 19:25:56 +0100
Subject: [PATCH] fixes #9: number of attendees counter

---
 src/Group.vue | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/Group.vue b/src/Group.vue
index b57b466..507bd84 100644
--- a/src/Group.vue
+++ b/src/Group.vue
@@ -4,7 +4,7 @@
             <md-card-header class="group-header">
                 <md-layout md-row>
                     <div class="md-title">
-                        <md-icon class="group-icon">folder_open</md-icon>&nbsp;Group: {{ group.group }}
+                        <md-icon class="group-icon">folder_open</md-icon>&nbsp;Group: {{ group.group }}&nbsp;<span class="counter">{{ counter }}</span>
                     </div>
                 </md-layout>
             </md-card-header>
@@ -54,6 +54,12 @@ export default {
         return { newAttendee: '', newGroup: '' }
     },
 
+    computed: {
+        counter: function() {
+            return (this.group.attendees || []).length;
+        }
+    },
+
     beforeCreate: function() {
         this.attendeesUrl = this.$resource('attendees{/id}');
     },
@@ -127,4 +133,17 @@ export default {
 .new-group-header i:after {
     background-color: initial !important;
 }
+
+.counter {
+    margin-left: 4px;
+    position: relative;
+    bottom: 12px;
+    background-color: #eee;
+    color: #666;
+    padding: 2px 5px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 200;
+    line-height: 1;
+}
 </style>