123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- <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">
- <md-layout md-row>
- <div class="md-title">
- <md-icon class="group-icon">folder_open</md-icon> Group: {{ group.group }} <span class="counter">{{ counter }}</span>
- </div>
- </md-layout>
- </md-card-header>
- <md-card-content>
- <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-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-container>
- </md-list-item>
- </md-list>
- </md-card-content>
- </md-card>
- <md-card v-if="addNewGroup" md-with-hover @mouseenter.native="focusToNewGroup()" md-align="start">
- <md-card-header class="new-group-header">
- <div class="md-title">
- <md-input-container class="new-group" md-inline>
- <md-icon>create_new_folder</md-icon> <md-input ref="newGroup" v-model="newGroup" @keyup.enter.native="focusToNewAttendee()" class="group-add-name" placeholder="new group" />
- </md-input-container>
- </div>
- </md-card-header>
- <md-card-content>
- <md-list v-show="newGroup">
- <md-list-item class="attendee-add">
- <md-icon>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-container>
- </md-list-item>
- </md-list>
- </md-card-content>
- </md-card>
- <ibt-dialog ref="dialogObj" />
- </md-layout>
- </template>
- <script>
- import Attendee from './Attendee';
- import IbtDialog from './IbtDialog.vue';
- export default {
- props: {group: {}, day: {}, addNewGroup: {default: false}},
- data: function () {
- return { newAttendee: '', newGroup: '' }
- },
- computed: {
- counter: function() {
- return (this.group.attendees || []).length;
- }
- },
- beforeCreate: function() {
- this.attendeesUrl = this.$resource('attendees{/id}');
- },
- methods: {
- reset() {
- this.newAttendee = '';
- this.newGroup = '';
- },
- reload() {
- this.$emit('updated');
- this.focusToNewAttendee();
- },
- focusToNewGroup() {
- this.$refs.newGroup.$el.focus();
- },
- focusToNewAttendee() {
- this.$refs.newAttendeeInput.$el.focus();
- },
- addAttendee(group, newAttendee) {
- this.attendeesUrl.save({day: this.day, group: group, name: newAttendee}).then((response) => {
- return response.json();
- }, (response) => {
- this.$refs.dialogObj.show({text: 'unable to add the attendee'});
- }).then((json) => {
- this.reset();
- this.$emit('updated');
- });
- }
- },
- components: { Attendee, IbtDialog }
- };
- </script>
- <style>
- .group-layout {
- padding: 10px;
- }
- .new-group-header {
- background-color: lightsteelblue;
- padding-top: 0px !important;
- padding-bottom: 0px !important;
- }
- .new-group-header .md-title {
- margin-top: 0px !important;
- }
- .group-header {
- background-color: lightblue;
- }
- .group-icon {
- vertical-align: text-top;
- }
- .new-attendee {
- width: 50px;
- }
- .new-group {
- min-width: 250px;
- }
- .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>
|