Made calendar events displayed

Author: almerk

client/src/components/Main.vue

@@ -1,8 +1,6 @@
 <template>
 <div id="main">
  <aside>
- DDDD
- <h2>{{ events.length}}</h2>
  <toolbar></toolbar>
  </aside>
  <main>
@@ -33,7 +31,6 @@ export default {
  },
  computed:{
  events(){ 
- console.log(this.$store.state.objects);
  return this.$store.getters.events;
  },
  },

client/src/components/calendar.event.vue

@@ -1,12 +1,12 @@
 <template>
- <div :class="[getSize(todoEvent)]" @click="eventClick(todoEvent.id)" :id="`event-${todoEvent.id}`">
+ <div @click="eventClick(event.id)" :id="`event-${event.id}`">
  <label>Name</label> 
- <header>{{ todoEvent.title }}</header>
- <label>User</label>
- <user :id="todoEvent.userId"></user>
+ <header>{{ event.name }}</header>
+ <!-- <label>User</label> -->
+ <!-- <user :id="event.userId"></user> -->
  <span>
- <label v-if="todoEvent.completed">Completed</label>
- <label v-else>Not completed</label>
+ <!-- <label v-if="event.completed">Completed</label>
+ <label v-else>Not completed</label> -->
  </span>
 
  </div>
@@ -19,7 +19,7 @@ export default {
  user
  },
  props: {
- 'todo-event': Object
+ 'event': Object
  },
  data() {
  return {
@@ -28,7 +28,7 @@ export default {
  },
  methods: {
  getSize(item) {
- return this.sizes[item.title.length % this.sizes.length];
+ return this.sizes[item.name.length % this.sizes.length];
  },
  eventClick(id){
  this.$router.push({ path:`/events/${id}`});

client/src/components/feed.vue

@@ -1,6 +1,6 @@
 <template>
  <div id="feed">
- <calendar-event v-for="event in events" :key="event.id" :event="event" :class="[{selected:todo.id == selectedEventId}, 'item']">
+ <calendar-event v-for="event in events" :key="event.id" :event="event" :class="[{selected:event.id == selectedEventId}, 'item']">
  </calendar-event>
  </div> 
 </template>

client/src/components/toolbar.vue

@@ -3,17 +3,14 @@
  <header>
  {{ header }}
  </header>
- <router-link to="/events/199">199</router-link>
- <router-link to="/events/100">100</router-link>
- <router-link to="/events/1">1</router-link>
  </div>
 </template>
 
 <script>
 export default {
  data() {
  return {
- header:"📅 Vue todos sample" 
+ header:"📅 Calendario" 
  } 
  }
 }