🎉 mock json server added and service created for get events 🎉

Author: uzaif313

db.json

@@ -0,0 +1,76 @@
+{
+ "events": [
+ {
+ "id": 1,
+ "title": "Beach Cleanup",
+ "date": "Aug 28 2018",
+ "time": "10:00",
+ "location": "Daytona Beach",
+ "description": "Let's clean up this beach.",
+ "organizer": "Adam Jahr",
+ "category": "sustainability",
+ "attendees": [
+ {
+ "id": "abc123",
+ "name": "Adam Jahr"
+ },
+ {
+ "id": "def456",
+ "name": "Gregg Pollack"
+ },
+ {
+ "id": "ghi789",
+ "name": "Beth Swanson"
+ },
+ {
+ "id": "jkl101",
+ "name": "Mary Gordon"
+ }
+ ]
+ },
+ {
+ "id": 2,
+ "title": "Park Cleanup",
+ "date": "Nov 12 2018",
+ "time": "12:00",
+ "location": "132 N Magnolia Street, Orlando, Florida",
+ "description": "We're going to clean up this park.",
+ "organizer": "Adam Jahr",
+ "category": "nature",
+ "attendees": [
+ {
+ "id": "ghi789",
+ "name": "Beth Swanson"
+ },
+ {
+ "id": "jkl101",
+ "name": "Mary Gordon"
+ }
+ ]
+ },
+ {
+ "id": 3,
+ "title": "Pet Adoption Day",
+ "date": "Dec 2 2018",
+ "time": "12:00",
+ "location": "132 N Magnolia Street, Orlando, Florida",
+ "description": "Help animals find new homes.",
+ "organizer": "Gregg Pollack",
+ "category": "animal welfare",
+ "attendees": [
+ {
+ "id": "abc123",
+ "name": "Adam Jahr"
+ },
+ {
+ "id": "ghi789",
+ "name": "Beth Swanson"
+ },
+ {
+ "id": "jkl101",
+ "name": "Mary Gordon"
+ }
+ ]
+ }
+ ]
+}

package-lock.json

@@ -8,6 +8,7 @@
  "lint": "vue-cli-service lint"
  },
  "dependencies": {
+ "axios": "^0.18.0",
  "lodash": "^4.17.11",
  "vue": "^2.5.22",
  "vue-router": "^3.0.1",

package.json

@@ -0,0 +1,15 @@
+<template>
+ <div>
+
+ </div>
+</template>
+
+<script>
+ export default {
+ 
+ }
+</script>
+
+<style scoped>
+
+</style>

src/components/BaseButton.vue

@@ -3,6 +3,7 @@
  <svg class="icon" :width="width" :height="height">
  <use v-bind="{ 'xlink:href': '/feather-sprite.svg#' + name }"></use>
  </svg>
+ <slot></slot>
  </div>
 </template>
 

src/components/BaseIcon.vue

@@ -1,33 +1,27 @@
 <template>
  <router-link
  class="event-link"
- :to="{ name: 'event-show', params: { id: '3' } }"
+ :to="{ name: 'event-show', params: { id: event.id } }"
  >
  <div class="event-card -shadow">
  <span class="eyebrow">@{{ event.time }} on {{ event.date }}</span>
  <h4>{{ event.title }}</h4>
- <BaseIcon name="users" width="15" height="15" />
- <span>{{ event.attendees.length }}</span>
+ <BaseIcon name="users" width="15" height="15"
+ >{{ event.attendees.length }} attending</BaseIcon
+ >
  </div>
  </router-link>
 </template>
 
 <script>
 export default {
- data() {
- return {
- event: {
- id: 1,
- title: 'Park Cleanup',
- date: 'Tue Aug 20 2019',
- time: '5:00 AM',
- attendees: [
- { id: 'abc123', name: 'Pratik Panchal' },
- { id: 'pqr123', name: 'Prakash' },
- { id: 'xyz321', name: 'Chetan' }
- ]
- }
+ props: {
+ event: {
+ type: Object
  }
+ },
+ data() {
+ return {}
  }
 }
 </script>

src/components/EventCard.vue

@@ -0,0 +1,19 @@
+import axios from 'axios'
+
+const apiClient = axios.create({
+ baseURL: 'http://localhost:3000',
+ withCredentials: false,
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json'
+ }
+})
+
+export default {
+ getEvents() {
+ return apiClient.get('/events')
+ },
+ getEvent(id) {
+ return apiClient.get(`events/${id}`)
+ }
+}

src/services/EventService.js

@@ -2,15 +2,30 @@
  <div>
  <h1>Event List Page</h1>
 
- <EventCard />
+ <EventCard v-for="event in events" v-bind:key="event.id" :event="event" />
  </div>
 </template>
 
 <script>
 import EventCard from '@/components/EventCard.vue'
+import EventService from '@/services/EventService.js'
 export default {
+ data() {
+ return {
+ events: []
+ }
+ },
  components: {
  EventCard
+ },
+ created() {
+ EventService.getEvents()
+ .then(response => {
+ this.events = response.data
+ })
+ .catch(error => {
+ console.log(error)
+ })
  }
 }
 </script>

src/views/EventList.vue

@@ -1,17 +1,79 @@
 <template>
  <div>
- <h1>Event Show Page{{ id }}</h1>
+ <div class="event-header">
+ <span class="eyebrow">@{{ event.time }} on {{ event.date }}</span>
+ <h1 class="title">{{ event.title }}</h1>
+ <h5>Organized by {{ event.organizer }}</h5>
+ <h5>Category: {{ event.category }}</h5>
+ </div>
+
+ <BaseIcon name="map">
+ <h2>Location</h2>
+ </BaseIcon>
+
+ <address>{{ event.location }}</address>
+
+ <h2>Event details</h2>
+ <p>{{ event.description }}</p>
+
+ <h2>
+ Attendees
+ <span class="badge -fill-gradient">
+ {{
+ event.attendees ? event.attendees.length : 0
+ }}
+ </span>
+ </h2>
+ <ul class="list-group">
+ <li v-for="(attendee, index) in event.attendees" :key="index" class="list-item">
+ <b>{{ attendee.name }}</b>
+ </li>
+ </ul>
  </div>
 </template>
 
 <script>
+import EventService from '@/services/EventService.js'
 export default {
  props: {
  id: {
- type: String
+ type: [String, Number]
+ }
+ },
+ data() {
+ return {
+ event: {}
  }
+ },
+ created() {
+ EventService.getEvent(this.id)
+ .then(response => {
+ this.event = response.data
+ })
+ .catch(err => {
+ console.log(err)
+ })
  }
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.location {
+ margin-bottom: 0;
+}
+.location > .icon {
+ margin-left: 10px;
+}
+.event-header > .title {
+ margin: 0;
+}
+.list-group {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.list-group > .list-item {
+ padding: 1em 0;
+ border-bottom: solid 1px #e5e5e5;
+}
+</style>