#7: notes for attendees

src/Attendee.vue

@@ -1,12 +1,23 @@
 <template>
-    <md-list-item class="attendee-list-item" :key="attendee._id">
+    <md-list-item class="attendee-list-item md-double-line" :key="attendee._id">
         <md-icon>person</md-icon>
-        <span v-if="!edit">{{attendee.name}}</span>
-        <md-input-container md-inline v-if="edit">
-            <md-input @keyup.enter.native="updateAttendee()" v-model="attendee.name" ref="updateAttendeeName" />
-        </md-input-container>
+        <div v-if="!edit" class="md-list-text-container">
+            <span>{{ attendee.name }}</span>
+            <span v-if="attendee.notes" class="attendee-notes">{{ attendee.notes }}</span>
+        </div>
+        <div v-if="edit">
+            <md-input-container md-inline>
+                <md-input @keyup.enter.native="updateAttendee()" @keydown.esc.native="edit = false" v-model="attendee.name" ref="updateAttendeeName" />
+            </md-input-container>
+            <div class="notes-editor-list-item">
+                <md-input-container md-inline>
+                    <label>notes</label>
+                    <md-input class="attendee-notes" @keyup.enter.native="updateAttendee()" @keydown.esc.native="edit = false" v-model="attendee.notes" />
+                </md-input-container>
+            </div>
+        </div>
 
-        <md-menu v-if="isAuthorized(attendee.created_by)" md-align-trigger>
+        <md-menu v-if="isAuthorized(attendee.created_by) && !edit" md-align-trigger>
             <md-button class="md-icon-button" md-menu-trigger>
                 <md-icon>more_vert</md-icon>
             </md-button>
@@ -97,4 +108,31 @@ export default {
     min-width: 250px;
 }
 
+.attendee-notes {
+    font-style: italic !important;
+}
+
+.notes-editor-list-item {
+    margin-bottom: 0px !important;
+    padding-left: 16px;
+}
+
+.notes-editor-list-item ul {
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+}
+
+.notes-editor-list-item .md-theme-default.md-list {
+    background-color: transparent;
+}
+
+
+.notes-editor-list-item button:hover {
+    background-color: transparent !important;
+}
+
+.attendee-notes {
+    max-width: 120px;
+}
+
 </style>

src/Group.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- XXX: too much duplication in this template -->
     <md-layout class="group-layout" md-col gutter="120" md-align="start">
         <md-card v-if="!addNewGroup" md-with-hover @mouseenter.native="focusToNewAttendee()">
             <md-card-header class="group-header">
@@ -12,11 +13,22 @@
                 <md-list md-dense>
                     <attendee v-for="attendee in group.attendees || []" :attendee="attendee" @updated="reload" />
                     <md-list-item class="attendee-add">
-                        <md-icon>person_add</md-icon>
+                        <md-icon @click.native="addAttendee(group.group)">person_add</md-icon>
                         <md-input-container class="new-attendee">
                             <label>new attendee</label>
-                            <md-input ref="newAttendeeInput" @keyup.enter.native="addAttendee(group.group, newAttendee)" v-model="newAttendee" class="attendee-add-name" />
+                            <md-input ref="newAttendeeInput" @keyup.enter.native="addAttendee(group.group)" v-model="newAttendee" />
                         </md-input-container>
+
+                        <md-list-expand>
+                            <md-list>
+                                <md-list-item class="md-inset">
+                                    <md-input-container>
+                                        <label>notes</label>
+                                        <md-input class="new-attendee-notes" @keyup.enter.native="addAttendee(group.group)" v-model="newAttendeeNotes" />
+                                    </md-input-container>
+                                </md-list-item>
+                            </md-list>
+                        </md-list-expand>
                     </md-list-item>
                 </md-list>
             </md-card-content>
@@ -32,11 +44,22 @@
             <md-card-content>
                 <md-list v-show="newGroup">
                     <md-list-item class="attendee-add">
-                        <md-icon>person_add</md-icon>
+                        <md-icon @click.native="addAttendee(newGroup)">person_add</md-icon>
                         <md-input-container>
                             <label>new attendee</label>
-                            <md-input ref="newAttendeeInput" @keyup.enter.native="addAttendee(newGroup, newAttendee)" v-model="newAttendee" class="attendee-add-name" />
+                            <md-input ref="newAttendeeInput" @keyup.enter.native="addAttendee(newGroup)" v-model="newAttendee" />
                         </md-input-container>
+
+                        <md-list-expand>
+                            <md-list>
+                                <md-list-item class="md-inset">
+                                    <md-input-container>
+                                        <label>notes</label>
+                                        <md-input class="new-attendee-notes" @keyup.enter.native="addAttendee(newGroup)" v-model="newAttendeeNotes" />
+                                    </md-input-container>
+                                </md-list-item>
+                            </md-list>
+                        </md-list-expand>
                     </md-list-item>
                 </md-list>
             </md-card-content>
@@ -53,7 +76,11 @@ export default {
     props: {group: {}, day: {}, addNewGroup: {default: false}},
 
     data: function () {
-        return { newAttendee: '', newGroup: '' }
+        return {
+            newAttendee: '',
+            newAttendeeNotes: '',
+            newGroup: ''
+        }
     },
 
     computed: {
@@ -69,6 +96,7 @@ export default {
     methods: {
         reset() {
             this.newAttendee = '';
+            this.newAttendeeNotes = '';
             this.newGroup = '';
         },
 
@@ -86,7 +114,14 @@ export default {
         },
 
         addAttendee(group, newAttendee) {
-            this.attendeesUrl.save({day: this.day, group: group, name: newAttendee}).then((response) => {
+            newAttendee = newAttendee || this.newAttendee;
+            var attendee = {
+                day: this.day,
+                group: group,
+                name: newAttendee,
+                notes: this.newAttendeeNotes
+            };
+            this.attendeesUrl.save(attendee).then((response) => {
                 return response.json();
             }, (response) => {
                 this.$refs.dialogObj.show({text: 'unable to add the attendee'});
@@ -150,4 +185,8 @@ export default {
     line-height: 1;
 }
 
+.new-attendee-notes {
+    max-width: 120px;
+}
+
 </style>