add service for create event

package.json

@@ -11,12 +11,14 @@
     "axios": "^1.1.3",
     "core-js": "^3.8.3",
     "lodash": "^4.17.21",
+    "uuid": "^9.0.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.188",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-babel": "~5.0.0",

src/services/EventService.ts

@@ -1,3 +1,4 @@
+import { iEvent } from '@/types'
 import axios, { AxiosInstance } from 'axios'
 
 // single axios instance could be used fot the entire app
@@ -17,4 +18,7 @@ export default {
   getEvent(id: string) {
     return apiClient.get('/events/' + id)
   },
+  postEvent(event: iEvent) {
+    return apiClient.post('/events', { event })
+  },
 }

src/views/CreateEvent.vue

@@ -1,6 +1,6 @@
 <template>
   <h2>create event forms</h2>
-  <form>
+  <form @submit.prevent="submitForm">
     <BaseInput v-model="event.title" label="Title" type="text" />
     <BaseInput v-model="event.description" label="Descirption" type="text" />
     <BaseInput v-model="event.location" label="Location" type="text" />
@@ -23,6 +23,8 @@
     />
 
     <pre>{{ event }}</pre>
+
+    <button type="submit">Submit</button>
   </form>
 </template>
 
@@ -33,7 +35,9 @@ import BaseRadioGroup from '@/components/BaseRadioGroup.vue'
 import BaseSelect from '@/components/BaseSelect.vue'
 import { iEvent } from '@/types'
 import { defineComponent } from 'vue'
-
+import EventService from '@/services/EventService'
+import { AxiosError, AxiosResponse } from 'axios'
+import { v4 as uuidv4 } from 'uuid'
 export default defineComponent({
   data() {
     return {
@@ -71,6 +75,13 @@ export default defineComponent({
     // BaseRadio,
     BaseRadioGroup,
   },
+  methods: {
+    submitForm() {
+      EventService.postEvent({ ...this.event, id: uuidv4() })
+        .then((res: AxiosResponse) => console.log({ res }))
+        .catch((err: AxiosError) => console.log({ err }))
+    },
+  },
 })
 </script>