From 8f8235e9d932e528b7611a2faae3801f3efefcda Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 23 Apr 2025 16:07:17 +0530
Subject: [PATCH] fix: edit and add event modal with title, description,
 timepicker & datepicker

---
 .../src/components/Modals/CalendarModal.vue   | 111 ++++++++++++++++--
 frontend/src/pages/Calendar.vue               |  13 +-
 2 files changed, 112 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Modals/CalendarModal.vue b/frontend/src/components/Modals/CalendarModal.vue
index 3933251d..1f506fe6 100644
--- a/frontend/src/components/Modals/CalendarModal.vue
+++ b/frontend/src/components/Modals/CalendarModal.vue
@@ -1,34 +1,125 @@
 <template>
   <Dialog v-model="show" :options="{ size: '2xl' }">
-    <template #body> Hello </template>
+    <template #body>
+      <div class="flex flex-col gap-5 m-6 mt-5">
+        <div class="flex justify-between items-center">
+          <div class="text-2xl font-semibold text-ink-gray-7">
+            {{ __('Schedule an event') }}
+          </div>
+          <Button variant="ghost" class="w-7" @click="show = false">
+            <FeatherIcon name="x" class="h-4 w-4" />
+          </Button>
+        </div>
+        <div class="">
+          <div class="flex flex-col w-full -ml-2">
+            <TextInput
+              ref="title"
+              variant="ghost"
+              v-model="_event.title"
+              :placeholder="__('Add title')"
+            />
+            <TextEditor
+              editor-class="!prose-sm overflow-auto min-h-[20px] max-h-80 px-2 rounded placeholder-ink-gray-4 focus:bg-surface-white focus:ring-0 text-ink-gray-8 transition-colors"
+              :bubbleMenu="true"
+              :content="_event.description"
+              @change="(val) => (_event.description = val)"
+              :placeholder="__('Add description')"
+            />
+          </div>
+          <div class="border-t my-4" />
+          <div class="flex justify-between items-center">
+            <div class="flex items-center gap-x-2">
+              <DurationIcon class="h-4 w-4 text-ink-gray-5" />
+              <DatePicker
+                class="max-w-28"
+                v-model="_event.date"
+                :formatter="(date) => getFormat(date, 'MMM D, YYYY')"
+                :placeholder="__('Start Date')"
+              />
+              <TimePicker
+                v-if="!_event.isFullDay"
+                class="max-w-20"
+                v-model="_event.from_time"
+                :placeholder="__('Start Time')"
+              />
+              <div class="text-base text-ink-gray-6">-</div>
+              <TimePicker
+                v-if="!_event.isFullDay"
+                class="max-w-20"
+                v-model="_event.to_time"
+                :placeholder="__('End Time')"
+              />
+              <DatePicker
+                class="max-w-28"
+                v-model="_event.date"
+                :formatter="(date) => getFormat(date, 'MMM D, YYYY')"
+                :placeholder="__('End Date')"
+              />
+            </div>
+            <Switch
+              v-model="_event.isFullDay"
+              class="text-ink-gray-6"
+              :label="__('All Day')"
+            />
+          </div>
+          <div class="border-t mt-4" />
+        </div>
+        <div class="flex justify-between items-center">
+          <div class="flex">
+            <div class="flex items-center gap-x-2">
+              <Button
+                v-if="_event.id"
+                variant="ghost"
+                theme="red"
+                @click="deleteEvent"
+              >
+                <FeatherIcon name="trash-2" class="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+          <Button :label="__('Save')" variant="solid" @click="saveEvent" />
+        </div>
+      </div>
+    </template>
   </Dialog>
 </template>
 
 <script setup>
-import { ref, nextTick, watch, computed } from 'vue'
+import DurationIcon from '@/components/Icons/DurationIcon.vue'
+import {
+  Switch,
+  TextInput,
+  TextEditor,
+  DatePicker,
+  TimePicker,
+} from 'frappe-ui'
+import { getFormat } from '@/utils'
+import { ref, nextTick, watch } from 'vue'
+
+const emit = defineEmits(['save', 'delete'])
 
 const show = defineModel()
 const event = defineModel('event')
 
-const loading = ref(false)
-const error = ref(null)
 const title = ref(null)
-const editMode = ref(false)
 
 let _event = ref({})
 
+function saveEvent() {
+  emit('save', _event.value)
+}
+
+function deleteEvent() {
+  emit('delete', _event.value.id)
+}
+
 watch(
   () => show.value,
   (value) => {
     if (!value) return
-    editMode.value = false
     nextTick(() => {
       title.value.el.focus()
       _event.value = { ...event.value }
-
-      if (_event.value.name) {
-        editMode.value = true
-      }
     })
   },
 )
diff --git a/frontend/src/pages/Calendar.vue b/frontend/src/pages/Calendar.vue
index 5a033bfd..b9ddc92d 100644
--- a/frontend/src/pages/Calendar.vue
+++ b/frontend/src/pages/Calendar.vue
@@ -79,7 +79,12 @@
         </p>
       </template>
     </Calendar>
-    <CalendarModal v-model="showModal" v-model:event="event" />
+    <CalendarModal
+      v-model="showModal"
+      v-model:event="event"
+      @save="saveEvent"
+      @delete="deleteEvent"
+    />
   </div>
 </template>
 <script setup>
@@ -88,7 +93,7 @@ import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import { sessionStore } from '@/stores/session'
 import { globalStore } from '@/stores/global'
-import { Calendar, createListResource, TabButtons } from 'frappe-ui'
+import { Calendar, createListResource, TabButtons, dayjs } from 'frappe-ui'
 
 const { user } = sessionStore()
 const { $dialog } = globalStore()
@@ -123,6 +128,10 @@ const events = createListResource({
     }))
   },
 
+function saveEvent(event) {
+  event.id ? updateEvent(event) : createEvent(event)
+}
+
 function getFromDate(event) {
   return event.date + ' ' + (event.from_time ? event.from_time : '00:00:00')
 }