Update the add event modal and functionality

Author: YSHgroup

components.d.ts

@@ -8,11 +8,17 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BButton: typeof import('bootstrap-vue-next')['BButton']
+    BButtonGroup: typeof import('bootstrap-vue-next')['BButtonGroup']
     BCard: typeof import('bootstrap-vue-next')['BCard']
+    BCardBody: typeof import('bootstrap-vue-next')['BCardBody']
+    BCardBordy: typeof import('bootstrap-vue-next')['BCardBordy']
+    BCardFooter: typeof import('bootstrap-vue-next')['BCardFooter']
     BCardText: typeof import('bootstrap-vue-next')['BCardText']
     BCol: typeof import('bootstrap-vue-next')['BCol']
     BContainer: typeof import('bootstrap-vue-next')['BContainer']
     BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
+    BFormInvalidFeedback: typeof import('bootstrap-vue-next')['BFormInvalidFeedback']
+    BFormTextarea: typeof import('bootstrap-vue-next')['BFormTextarea']
     BNav: typeof import('bootstrap-vue-next')['BNav']
     BRow: typeof import('bootstrap-vue-next')['BRow']
     EventModal: typeof import('./src/components/EventModal.vue')['default']

src/components/EventModal.vue

@@ -1,24 +1,79 @@
 <script setup lang="ts">
 import { useCalendarStore } from '@/stores/calendar';
 import { storeToRefs } from 'pinia';
-import { watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const calendarStore = useCalendarStore()
-const { modal } = storeToRefs(calendarStore)
-const { setModal } = calendarStore
+const { modal, getAddedEvents } = storeToRefs(calendarStore)
+const { setModal, setAddedEvents } = calendarStore
 
-watch(modal, () => {
-  console.log('---', modal.value)
+const eventTitle = ref('')
+const startDateTime = ref<string | Date>( new Date() )
+const endDateTime = ref<string | Date>( new Date() )
+const contentText = ref('')
+
+const titleState = computed(() => (eventTitle.value?.length > 2 ? true : false))
+
+const addEvent = () => {
+  setAddedEvents({
+    title: eventTitle.value,
+    startDataTime: startDateTime.value,
+    endDataTime: endDateTime.value,
+    contentText: contentText.value
+  }, 'add')
+}
+
+watch(getAddedEvents.value, () => {
+  console.log('--->>>>', getAddedEvents.value)
 })
 </script>
 
 <template>
   <teleport to="body">
     <div class="modal-wrapper" v-if="modal">
-      <BCard header="Add Event" header-tag="header" footer="Card Footer" footer-tag="footer"
-        class="fc-modal text-center bg-white" title="Add Event">
-        <BCardText>Header and footers using props.</BCardText>
-        <BButton variant="primary" @click="setModal()">Close</BButton>
+      <BCard 
+        header="Calendar Modal" 
+        header-tag="header" 
+        class="fc-modal text-center bg-white fs-5 p-0 min"
+        title="Add Event"
+        style="min-width: 400px;"
+      >
+        <BCardBody class="fs-6 pt-0">
+          <div role="group" class="text-start">
+            <BCol cols="12" class="p-1">
+              <label for="title">Title:</label>
+              <BFormInput id="title" v-model="eventTitle" placeholder="Enter event title" :state="titleState" trim />
+              <BFormInvalidFeedback id="input-live-feedback"> Enter at least 3 letters </BFormInvalidFeedback>
+            </BCol>
+            <BCol cols="12" class="p-1">
+              <label for="start">Start:</label>
+              <VueDatePicker aria-label="start" v-model="startDateTime" placeholder="Pick the start time" />
+            </BCol>
+            <BCol cols="12" class="p-1">
+              <label for="end">Until:</label>
+              <VueDatePicker aria-label="end" v-model="endDateTime" placeholder="Pick the End time" />
+            </BCol>
+            <BCol cols="12" class="p-1">
+              <BFormTextarea
+                id="textarea"
+                v-model="contentText"
+                placeholder="Enter something..."
+                rows="3"
+                max-rows="6"
+              />
+            </BCol>
+          </div>
+
+        </BCardBody>
+
+        <template v-slot:footer>
+          <div tag="footer" class="d-flex justify-content-end">
+            <BButtonGroup>
+              <BButton variant="primary" @click="setModal()">Close</BButton>
+              <BButton variant="success" @click="addEvent()">Add</BButton>
+            </BButtonGroup>
+          </div>
+        </template>
       </BCard>
     </div>
 

src/interfaces/eventTypes.ts

@@ -0,0 +1,7 @@
+export interface CustomEvent {
+  id?: string | number
+  title: string
+  startDataTime: string | Date
+  endDataTime: string | Date
+  contentText?: string
+}

src/interfaces/index.ts

@@ -1,3 +1,4 @@
 import type * as FullCalendar from './builtInTypes'
+import type { CustomEvent } from './eventTypes'
 
-export type {FullCalendar}
+export type { FullCalendar, CustomEvent }

src/stores/calendar.ts

@@ -1,22 +1,39 @@
 import { ref, computed } from 'vue'
-import { createPinia } from 'pinia'
-import { defineStore } from 'pinia'
+import { createPinia, defineStore } from 'pinia'
+import type { CustomEvent } from '@/interfaces'
 
 export const pinia = createPinia()
 
 export const useCalendarStore = defineStore('calendar', () => {
   const calendarApi = ref()
   const modal = ref(false)
+  const addedEvents = ref<CustomEvent[]>([])
 
   const getCalendarApi = computed(() => calendarApi.value)
+  const getAddedEvents = computed(() => addedEvents.value)
 
   const setCalendarApi = (value: any) => {
     calendarApi.value = value
   }
-
   const setModal = () => {
     modal.value = !modal.value
   }
+  const setAddedEvents = (value: CustomEvent | string | number , type: string) => {
+    const id = addedEvents.value.length
+    const  newEvent = { ...value as CustomEvent, id }
+
+    switch (type) {
+      case 'add':
+        addedEvents.value.push(newEvent as CustomEvent)
+        break
+      case 'delete':
+        delete addedEvents.value[value as any]
+        break
+      default:
+        break
+    }
+    addedEvents.value.push()
+  }
 
-  return { calendarApi, modal, getCalendarApi, setCalendarApi, setModal }
+  return { calendarApi, modal, addedEvents, getCalendarApi, getAddedEvents, setCalendarApi, setModal, setAddedEvents }
 })