lesli_calendar 0.2.0 → 0.2.2

data/lib/scss/calendar.scss

@@ -32,7 +32,7 @@ Building a better future, one line of code at a time.
 
 
 // · 
-@import "Lesli/scss/templates/dashboards";
+@import "Lesli/scss/templates/component";
 
 
 // · 
@@ -41,61 +41,10 @@ $focus-color: #28bca3;
 $support-color: #a56de2;
 
 
-// · 
-.lesli-calendar-agenda {
-
-    h3 {
-        color: lesli-css-color(silver, 900);
-        padding: 14px 0;
-    }
-
-    .event {
-        border-bottom: 1px solid lesli-css-color(silver, 300);
-        min-height: 100px;
-
-        .date {
-            flex: 0 0 70px;            
-            text-align: center;
-            color: lesli-css-color(silver, 900);
-
-            .day-number {
-                font-weight: 700;
-                font-size: 1.2rem;
-            }
-        }
-
-        .description {
-            line-height: 1.2;
-            font-size: 0.9rem;
-            padding: 3px 0 3px 18px;
-            border-left: 3px solid lesli-css-color(silver);
-
-            p:first-child {
-                margin-bottom: 4px;
-                font-weight: 700;
-                font-size: 0.9rem;
-            }
-
-            &.cloud-driver-events {
-                border-left-color: $driver-color;
-            }
-
-            &.cloud-focus-tasks {
-                border-left-color: $focus-color;
-            }
-
-            &.lesli-support {
-                border-left-color: $support-color;
-            }
-        }
-    }
-}
-
-
 // · 
 #lesli-calendar {
     background-color: white;
-    box-shadow: $lesli-box-shadow;
+    //box-shadow: $lesli-box-shadow;
 
     .fc-header-toolbar {
         height: 0px !important;
@@ -109,19 +58,24 @@ $support-color: #a56de2;
     .fc-scrollgrid {
         border: none !important;
 
+        // remove the last right border for the header
+        th[role="presentation"] {
+            border: none;
+        }
+
         // calendar header (day names)
         .fc-scrollgrid-section-header {
 
             .fc-col-header-cell {
-                padding: .8rem 0;
+                padding: 0 0 .8rem;
                 text-align: center;
                 border-left-width: 0;
                 border-right-width: 0;
+
                 a {
                     color: lesli-css-color(silver, 900)
                 }
             }
-
         }
 
         .fc-scrollgrid-section-body {

data/lib/scss/dashboard.scss

@@ -0,0 +1,31 @@
+/*
+
+Lesli
+
+Copyright (c) 2023, Lesli Technologies, S. A.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+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
+Building a better future, one line of code at a time.
+
+@contact  hello@lesli.tech
+@website  https://www.lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/

data/lib/vue/application.js

@@ -37,11 +37,13 @@ import translation from "Lesli/vue/translation"
 
 
 // · Import engine translations
-import translations from "LesliBabel/vue/stores/translations.json"
+import translations from "LesliCalendar/vue/stores/translations.json"
 
 
 // · Import apps and components
+import appDashboardShow from "LesliCalendar/vue/apps/dashboards/show.vue"
 import appCalendarShow from "LesliCalendar/vue/apps/calendars/show.vue"
+import appAgendaShow from "LesliCalendar/vue/apps/agendas/show.vue"
 import appEventsIndex from "LesliCalendar/vue/apps/events/index.vue"
 
 
@@ -52,7 +54,13 @@ translation(translations)
 // · 
 application("LesliCalendar", [{
     path: "/",
+    component: appDashboardShow
+}, {
+    path: "/calendar",
     component: appCalendarShow
+}, {
+    path: "/agenda",
+    component: appAgendaShow
 }, {
     path: "/events",
     component: appEventsIndex

data/lib/vue/apps/agendas/show.vue

@@ -0,0 +1,71 @@
+<script setup>
+/*
+Lesli
+
+Copyright (c) 2023, Lesli Technologies, S. A.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+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 LesliTech
+Building a better future, one line of code at a time.
+
+@contact  hello@lesli.tech
+@website  https://www.lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+// · import vue tools
+import { ref, reactive, onMounted, watch, computed, inject } from "vue"
+import { useRouter, useRoute } from "vue-router"
+
+
+// · 
+import { useCalendar } from "LesliCalendar/vue/stores/calendar.js"
+
+
+// · 
+const storeCalendar = useCalendar()
+const date = inject("date")
+
+
+// · Import components
+import componentCalendar from "LesliCalendar/vue/components/calendar.vue"
+import componentAgenda from "LesliCalendar/vue/components/agenda.vue"
+import componentPanelEvent from "LesliCalendar/vue/components/event.vue"
+
+onMounted(() => {
+    storeCalendar.getCalendar()
+})
+
+</script>
+<template>
+    <lesli-application-container>
+        <lesli-header :title="date.dateWords()">
+            <lesli-button solid icon="add">
+                Add event
+            </lesli-button>
+        </lesli-header>
+
+        <component-agenda>
+        </component-agenda>
+
+        <component-panel-event></component-panel-event>
+    </lesli-application-container>
+</template>

data/lib/vue/apps/calendars/show.vue

@@ -1,18 +1,32 @@
 <script setup>
 /*
-Copyright (c) 2023, all rights reserved.
+Lesli
 
-All the information provided by this platform is protected by international laws related  to 
-industrial property, intellectual property, copyright and relative international laws. 
-All intellectual or industrial property rights of the code, texts, trade mark, design, 
-pictures and any other information belongs to the owner of this platform.
+Copyright (c) 2023, Lesli Technologies, S. A.
 
-Without the written permission of the owner, any replication, modification,
-transmission, publication is strictly forbidden.
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
 
-For more information read the license file including with this software.
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
 
-// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+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 LesliTech
+Building a better future, one line of code at a time.
+
+@contact  hello@lesli.tech
+@website  https://www.lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
 // · 
 */
 
@@ -42,7 +56,7 @@ onMounted(() => {
 
 </script>
 <template>
-    <lesli-application-container dashboard>
+    <lesli-application-container>
         <lesli-header :title="date.dateWords()">
             <div class="field has-addons m-0">
                 <div class="control">
@@ -71,16 +85,8 @@ onMounted(() => {
             </lesli-button>
         </lesli-header>
 
-        <div class="columns">
-            <div class="column is-3">
-                <component-agenda>
-                </component-agenda>
-            </div>
-            <div class="column">
-                <component-calendar class="mt-4">
-                </component-calendar>
-            </div>
-        </div>
+        <component-calendar class="mt-4">
+        </component-calendar>
 
         <component-panel-event></component-panel-event>
     </lesli-application-container>

data/lib/vue/apps/dashboards/show.vue

@@ -0,0 +1,102 @@
+<script setup>
+/*
+Lesli
+
+Copyright (c) 2023, Lesli Technologies, S. A.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+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 LesliTech
+Building a better future, one line of code at a time.
+
+@contact  hello@lesli.tech
+@website  https://www.lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+// · import vue tools
+import { ref, reactive, onMounted, watch, computed, inject } from "vue"
+import { useRouter, useRoute } from "vue-router"
+
+
+// · 
+import { useCalendar } from "LesliCalendar/vue/stores/calendar.js"
+
+
+// · 
+const date = inject("date")
+const storeCalendar = useCalendar()
+
+
+// · Import components
+import componentAgenda from "LesliCalendar/vue/components/agenda.vue"
+import componentCalendar from "LesliCalendar/vue/components/calendar.vue"
+import componentPanelEvent from "LesliCalendar/vue/components/event.vue"
+
+
+// · 
+onMounted(() => {
+    storeCalendar.getCalendar()
+})
+</script>
+<template>
+    <lesli-application-container dashboard>
+        <lesli-header :title="date.dateWords()">
+            <div class="field has-addons m-0">
+                <div class="control">
+                    <lesli-button icon="arrow_back_ios">
+                        prev
+                    </lesli-button>
+                </div>
+                <div class="control">
+                    <lesli-button>
+                        today
+                    </lesli-button>
+                </div>
+                <div class="control">
+                    <button class="button is-primary is-light is-outlined">
+                        <span>next</span>
+                        <span class="icon">
+                            <span class="material-icons">
+                                arrow_forward_ios
+                            </span>
+                        </span>
+                    </button>
+                </div>
+            </div>
+            <lesli-button solid icon="add">
+                Add event
+            </lesli-button>
+        </lesli-header>
+
+        <!-- <pre><code>{{ storeCalendar.calendar }}</code></pre> -->
+
+        <div class="columns">
+            <div class="column is-3">
+                <component-agenda></component-agenda>
+            </div>
+            <div class="column">
+                <component-calendar></component-calendar>
+            </div>
+        </div>
+
+        <component-panel-event></component-panel-event>
+    </lesli-application-container>
+</template>

data/lib/vue/components/agenda.vue

@@ -19,7 +19,7 @@ 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  hello@lesli.tech
@@ -34,18 +34,21 @@ Building a better future, one line of code at a time.
 // · 
 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")
 
 
@@ -58,80 +61,98 @@ 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")
-
-        // 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")
-        }
 
+        // Extract date key from event start date
+        const dateKey = eventDate.format('YYYY-MM-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>
-            </div>
-            <div :class="['description', event.classNames]">
-                <p>{{ event.title }}</p>
-                <p>{{ event.description }}</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>
+        </template>
     </div>
 </template>

data/lib/vue/components/calendar.vue

@@ -32,7 +32,7 @@ Building a better future, one line of code at a time.
 
 
 // · Import components, libraries and tools
-import { onMounted, inject, ref } from "vue"
+import { onMounted, watch, inject, ref } from "vue"
 
 import { Calendar } from "@fullcalendar/core";
 import listPlugin from "@fullcalendar/list";
@@ -51,6 +51,7 @@ const storeCalendar = useCalendar()
 
 // · 
 const date = inject("date")
+const calendar = ref(false)
 
 
 function onDateClick() {
@@ -104,10 +105,37 @@ function onEventContent(args) {
 
 }
 
+
+function loadEvents() {
+
+    // Add calendar events 
+    storeCalendar.calendar.events.forEach(event => {
+        calendar.value.addEvent({
+            title: event.title,
+            start: event.date,
+            description: event.description,
+            classNames: event.classNames
+        })
+    })
+
+    // Add calendar events 
+    storeCalendar.calendar.events_support.forEach(event => {
+        calendar.value.addEvent({
+            title: event.title,
+            start: event.date,
+            description: event.description,
+            classNames: event.classNames
+        })
+    })
+
+}
+
+
+
 // · 
 onMounted(() => {
 
-    storeCalendar.calendar = new Calendar(document.getElementById("lesli-calendar"), {
+    calendar.value = new Calendar(document.getElementById("lesli-calendar"), {
         plugins: [
             dayGridPlugin,
             interactionPlugin,
@@ -126,12 +154,17 @@ onMounted(() => {
         //eventContent: onEventContent
     });
 
-    setTimeout(() => { storeCalendar.calendar.render(); }, 200)
+    loadEvents()
 
+    setTimeout(() => { calendar.value.render(); }, 200)
 })
 
-</script>
 
+// · 
+watch(() => storeCalendar.calendar.id, (a,b) => {
+    loadEvents()
+})
+</script>
 <template>
-    <div id="lesli-calendar"></div>
+    <div id="lesli-calendar" class="box"></div>
 </template>