lib/vue/components/agenda.vue in lesli_calendar-0.2.1 vs lib/vue/components/agenda.vue in lesli_calendar-0.2.2

@@ -17,11 +17,11 @@
 You should have received a copy of the GNU General Public License
 along with this program. If not, see http://www.gnu.org/licenses/.
 
 Lesli · Ruby on Rails SaaS Development Framework.
 
-Made with ♥ by https://www.lesli.tech
+Made with ♥ by LesliTech
 Building a better future, one line of code at a time.
 
 @contact  [e-mail]
 @website  https://www.lesli.tech
 @license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
@@ -32,22 +32,25 @@
 
 
 // · 
 import { onMounted, watch, ref, inject } from "vue"
 
+
+// · 
 import dayjs from "dayjs"
 import isSameOrAfter from "dayjs/plugin/isSameOrAfter"
-dayjs.extend(isSameOrAfter)
 
+
 // · 
+dayjs.extend(isSameOrAfter)
 
 
-
 // · import lesli stores
 import { useCalendar } from "LesliCalendar/vue/stores/calendar"
 
 
+// · 
 const date = inject("date")
 
 
 // · implement stores
 const storeCalendar = useCalendar()
@@ -56,82 +59,100 @@
 // · 
 const agenda = ref([])
 const today = dayjs()
 
 
-// · 
-function merge() {
+// Function to merge and group events by date
+function mergeAndGroupEvents() {
 
-    let events = [
-        ...storeCalendar.calendarData.events, 
-        ...storeCalendar.calendarData.events_support
-    ]
-    
-    let count = 0
+    // Get current date and time
+    const currentDate = dayjs();
 
-    events = events.filter(event => {
+    // Combine events and support events into one array
+    const mergedEvents = [
+        ...storeCalendar.calendar.events, 
+        ...storeCalendar.calendar.events_support
+    ];
 
-        // limit the number of events to show in the agenda
-        if (count >= 6) {
-            return 
-        }
+    // Filter out past events
+    const filteredEvents = mergedEvents.filter(event => {
+        return !dayjs(event.start).isBefore(currentDate, "day");
+    });
 
+    // Group events by date
+    const groupedEvents = filteredEvents.reduce((acc, event) => {
+
         let eventDate = dayjs(event.start)
-        
-        // Do not process past events
-        if (eventDate.isBefore(today, "day")) {
-            return 
-        } 
 
-        // show today event description by default
-        event.dayName = "Today"
-        event.dayNumber = eventDate.format("HH:mm")
+        // Extract date key from event start date
+        const dateKey = eventDate.format('YYYY-MM-DD');
 
-        // If the event is NOT today, show only the time
-        if (!eventDate.isSame(today, "day")) {
-            event.dayName = eventDate.format("ddd")
-            event.dayNumber = eventDate.format("DD")
-        }
+        // Create array for the date key if it doesn't exist
+        if (!acc[dateKey]) {
 
+            let dayName = "Today"
+            let dayNumber = eventDate.format("HH:mm")
 
+            if (!eventDate.isSame(currentDate, "day")) {
+                dayName = eventDate.format("ddd")
+                dayNumber = eventDate.format("DD")
+            }
+
+            acc[dateKey] = {
+                dayName: dayName,
+                dayNumber: dayNumber,
+                events: []
+            }
+        }
+
         if (event.description) { 
             event.description = event.description
             .replace(/<[^>]*>?/gm, '') // remove html tags from string
-            .substring(0, 40) + '...'  // get a excerpt of the description
+            .substring(0, 35) + '...'  // get a excerpt of the description
         }
 
-        event.classNames = event.classNames
+        // Add event to the array corresponding to its date
+        acc[dateKey].events.push(event);
 
-        count++
+        return acc;
+    }, {});
 
-        return event
+    // Sort the groups by date
+    const sortedGroupedEvents = Object.keys(groupedEvents)
+        .sort()
+        .reduce((acc, key) => {
+            acc[key] = groupedEvents[key];
+            return acc;
+        }, {});
 
-    })
-    
-    events = events.sort((a,b) => a.time > b.time)
-
-    agenda.value = events
+    agenda.value = sortedGroupedEvents;
 }
 
+onMounted(() => {
+    mergeAndGroupEvents()
+})
 
 // · 
-watch(() => storeCalendar.calendarData.events_support, () => merge())
+watch(() => storeCalendar.calendar.id, (a,b) => {
+    mergeAndGroupEvents()
+})
 
 </script>
 <template>
-    <div class="lesli-calendar-agenda">
+    <div class="lesli-calendar-agenda box">
         <h3>Upcoming events</h3>
-        <div 
-            class="is-flex is-align-items-center event" 
-            v-for="(event, index) in agenda"
-            :key="index">
-            <div class="date">
-                <p class="day-name">{{ event.dayName }}</p>
-                <p class="day-number">{{ event.dayNumber }}</p>
+        <template v-for="day in agenda">
+            <div class="event is-flex is-align-items-center">
+                <div class="date">
+                    <p class="day-name">{{ day.dayName }}</p>
+                    <p class="day-number">{{ day.dayNumber }}</p>
+                </div>
+                <div class="description">
+                    <div :class="event.classNames" v-for="(event, index) in day.events" :key="index">
+                        <p>{{ event.title }}</p>
+                        <p>{{ event.description }}</p>
+                    </div>
+                </div>
             </div>
-            <div :class="['description', event.classNames]">
-                <p>{{ event.title }}</p>
-                <p>{{ event.description }}</p>
-            </div>
-        </div>
+        </template>
     </div>
 </template>