Merge remote-tracking branch 'origin/L4-end'

src/App.vue

@@ -1,5 +1,13 @@
+<script setup>
+import { inject } from "vue";
+
+const GStore = inject("GStore");
+</script>
 <template>
   <div id="app">
+    <div id="flashMessage" v-if="GStore?.flashMessage">
+      {{ GStore.flashMessage }}
+    </div>
     <div id="nav">
       <router-link :to="{ name: 'EventList' }">Events</router-link> |
       <router-link :to="{ name: 'About' }">About</router-link>
@@ -9,28 +17,28 @@
 </template>
 
 <style>
-  #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-  }
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
 
-  #nav {
-    padding: 30px;
-  }
+#nav {
+  padding: 30px;
+}
 
-  #nav a {
-    font-weight: bold;
-    color: #2c3e50;
-  }
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
 
-  #nav a.router-link-exact-active {
-    color: #42b983;
-  }
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
 
-  h4 {
-    font-size: 20px;
-  }
+h4 {
+  font-size: 20px;
+}
 </style>

src/components/EventCard.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { defineProps } from "vue";
+
 defineProps({
   event: {
     type: Object,
@@ -13,6 +15,7 @@ defineProps({
     :to="{ name: 'EventDetails', params: { id: event.id } }"
   >
     <div class="event-card">
+      <h2>{{ event.title }}</h2>
       <h2>{{ event.title }}</h2>
       <span>@{{ event.time }} on {{ event.date }}</span>
     </div>
@@ -27,12 +30,27 @@ defineProps({
   border: 1px solid #39495c;
   margin-bottom: 18px;
 }
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  margin-bottom: 18px;
+}
 
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
 .event-card:hover {
   transform: scale(1.01);
   box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
 }
 
+.event-link {
+  color: #2c3e50;
+  text-decoration: none;
+}
 .event-link {
   color: #2c3e50;
   text-decoration: none;

src/main.js

@@ -1,9 +1,10 @@
-import { createApp } from "vue";
+import { createApp, reactive } from "vue";
 import App from "./App.vue";
 import router from "./router";
+const GStore = reactive({ flashMessage: "" });
 
 const app = createApp(App);
 
-app.use(router);
+app.use(router).provide("GStore", GStore);
 
 app.mount("#app");

src/router/index.js

@@ -1,25 +1,74 @@
 import { createRouter, createWebHistory } from "vue-router";
 import EventList from "@/views/EventList.vue";
-import EventDetails from "@/views/EventDetails.vue";
+import EventLayout from "@/views/event/Layout.vue";
+import EventDetails from "@/views/event/Details.vue";
+import EventRegister from "@/views/event/Register.vue";
+import EventEdit from "@/views/event/Edit.vue";
+import EventLayout from "@/views/event/Layout.vue";
+import EventDetails from "@/views/event/Details.vue";
+import EventRegister from "@/views/event/Register.vue";
+import EventEdit from "@/views/event/Edit.vue";
 import About from "@/views/About.vue";
+import NotFound from "@/views/NotFound.vue";
+import NetworkError from "@/views/NetworkError.vue";
 
 const routes = [
   {
     path: "/",
     name: "EventList",
     component: EventList,
+    props: (route) => ({ page: parseInt(route.query.page) || 1 }),
   },
   {
-    path: "/event/:id",
-    name: "EventDetails",
+    path: "/events/:id",
+    name: "EventLayout",
     props: true,
-    component: EventDetails,
+    component: EventLayout,
+    children: [
+      {
+        path: "",
+        name: "EventDetails",
+        component: EventDetails,
+      },
+      {
+        path: "register",
+        name: "EventRegister",
+        component: EventRegister,
+      },
+      {
+        path: "edit",
+        name: "EventEdit",
+        component: EventEdit,
+      },
+    ],
+  },
+  {
+    path: "/event/:afterEvent(.*)",
+    redirect: (to) => {
+      return { path: "/events/" + to.params.afterEvent };
+    },
   },
   {
     path: "/about",
     name: "About",
     component: About,
   },
+  {
+    path: "/:catchAll(.*)",
+    name: "NotFound",
+    component: NotFound,
+  },
+  {
+    path: "/404/:resource",
+    name: "404Resource",
+    component: NotFound,
+    props: true,
+  },
+  {
+    path: "/network-error",
+    name: "NetworkError",
+    component: NetworkError,
+  },
 ];
 
 const router = createRouter({

src/services/EventService.js

@@ -1,19 +1,19 @@
-import axios from 'axios'
+import axios from "axios";
 
 const apiClient = axios.create({
-  baseURL: 'https://my-json-server.typicode.com/Code-Pop/Touring-Vue-Router',
+  baseURL: "https://my-json-server.typicode.com/Code-Pop/Touring-Vue-Router",
   withCredentials: false,
   headers: {
-    Accept: 'application/json',
-    'Content-Type': 'application/json'
-  }
-})
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  },
+});
 
 export default {
-  getEvents() {
-    return apiClient.get('/events')
+  getEvents(perPage, page) {
+    return apiClient.get("/events?_limit=" + perPage + "&_page=" + page);
   },
   getEvent(id) {
-    return apiClient.get('/events/' + id)
-  }
-}
+    return apiClient.get("/events/" + id);
+  },
+};

src/views/EventDetails.vue

@@ -24,3 +24,4 @@ onMounted(() => {
     <p>{{ event.description }}</p>
   </div>
 </template>
+

src/views/EventList.vue

@@ -1,25 +1,69 @@
 <script setup>
-  import EventCard from "@/components/EventCard.vue";
-  import EventService from "@/services/EventService.js";
-  import { onMounted, ref } from "vue";
+import { ref, onMounted, computed, watchEffect, defineProps } from "vue";
+import EventCard from "@/components/EventCard.vue";
+import EventService from "@/services/EventService.js";
+import { useRouter } from "vue-router";
 
-  const events = ref("");
+const props = defineProps(["page"]);
 
-  onMounted(() => {
-    EventService.getEvents()
+const router = useRouter();
+
+const events = ref(null);
+const totalEvents = ref(0);
+const events = ref(null);
+const totalEvents = ref(0);
+
+const page = computed(() => props.page);
+const page = computed(() => props.page);
+
+const hasNextPage = computed(() => {
+  const totalPages = Math.ceil(totalEvents.value / 2);
+  return page.value < totalPages;
+});
+const hasNextPage = computed(() => {
+  const totalPages = Math.ceil(totalEvents.value / 2);
+  return page.value < totalPages;
+});
+
+onMounted(() => {
+  watchEffect(() => {
+    events.value = null;
+    EventService.getEvents(2, page.value)
       .then((response) => {
         events.value = response.data;
+        totalEvents.value = response.headers["x-total-count"];
       })
-      .catch((error) => {
-        console.log(error);
+      .catch(() => {
+        router.push({ name: "NetworkError" });
       });
   });
+});
 </script>
 
 <template>
+  <div>
   <h1>Events for Good</h1>
   <div class="events">
     <EventCard v-for="event in events" :key="event.id" :event="event" />
+
+    <div class="pagination">
+      <router-link
+        id="page-prev"
+        :to="{ name: 'EventList', query: { page: page - 1 } }"
+        rel="prev"
+        v-if="page != 1"
+        >&#60; Previous</router-link
+      >
+
+      <router-link
+        id="page-next"
+        :to="{ name: 'EventList', query: { page: page + 1 } }"
+        rel="next"
+        v-if="hasNextPage"
+        >Next &#62;</router-link
+      >
+    </div>
+    </div>
   </div>
 </template>
 
@@ -29,4 +73,41 @@
   flex-direction: column;
   align-items: center;
 }
+.pagination {
+  display: flex;
+  width: 290px;
+}
+.pagination a {
+  flex: 1;
+  text-decoration: none;
+  color: #2c3e50;
+}
+.events {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.pagination {
+  display: flex;
+  width: 290px;
+}
+.pagination a {
+  flex: 1;
+  text-decoration: none;
+  color: #2c3e50;
+}
+
+#page-prev {
+  text-align: left;
+}
+#page-prev {
+  text-align: left;
+}
+
+#page-next {
+  text-align: right;
+}
+#page-next {
+  text-align: right;
+}
 </style>

src/views/NetworkError.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="networkError">
+    <h1>Uh-Oh!</h1>
+
+    <h3>
+      It looks like you're experiencing some network issues, please take a
+      breath and <a href="#" @click="$router.go(-1)">click here</a> to try
+      again.
+    </h3>
+  </div>
+</template>

src/views/NotFound.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  resource: {
+    type: String,
+    required: true,
+    default: "page",
+  },
+});
+</script>
+<template>
+  <h1>Oops!</h1>
+  <h3>The {{ resource }} you're looking for is not here.</h3>
+  <router-link :to="{ name: 'EventList' }">Back to the home page</router-link>
+</template>

src/views/event/Details.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { defineProps } from "vue";
+
+defineProps(["event"]);
+</script>
+
+<template>
+   <div>
+  <p>{{ event.time }} on {{ event.date }} @ {{ event.location }}</p>
+   <p>{{ event.description }}</p>
+</div>
+</template>