lesli_calendar 0.2.1 → 0.2.2

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,10 +154,17 @@ onMounted(() => {
         //eventContent: onEventContent
     });
 
-    setTimeout(() => { storeCalendar.calendar.render(); }, 200)
+    loadEvents()
+
+    setTimeout(() => { calendar.value.render(); }, 200)
+})
 
+
+// · 
+watch(() => storeCalendar.calendar.id, (a,b) => {
+    loadEvents()
 })
 </script>
 <template>
-    <div id="lesli-calendar"></div>
+    <div id="lesli-calendar" class="box"></div>
 </template>

data/lib/vue/stores/calendar.js

@@ -34,8 +34,8 @@ export const useCalendar = defineStore("calendar.calendar", {
 
         return {
             title: "",
-            calendar: {},
-            calendarData: {},
+            calendar: { events: [], events_support: [] },
+            calendarObject: {},
 
 
 
@@ -94,30 +94,7 @@ export const useCalendar = defineStore("calendar.calendar", {
 
         getCalendar() {
             this.http.get(this.url.calendar("calendar")).then(result => {
-                this.calendarData = result
-
-                // Add calendar events 
-                this.calendarData.events.forEach(event => {
-                    this.calendar.addEvent({
-                        title: event.title,
-                        start: event.date,
-                        description: event.description,
-                        classNames: event.classNames
-                    })
-                })
-
-                return 
-
-                this.calendarData.events_support = this.calendarData.events.map(event => {
-                    return {
-                        title: event.subject,
-                        start: event.deadline,
-                        ticket: event.id,
-                        description: event.description,
-                        engine: "lesli-support",
-                        classNames: "lesli-support"
-                    }
-                })
+                this.calendar = result
             }).catch(error => {
                 console.log(error)
             })

data/lib/vue/stores/translations.json

@@ -20,6 +20,8 @@
         "button_save": "Save",
         "button_settings": "Settings",
         "button_show": "Show",
+        "message_operation_error": "Operation failed. Please try again.",
+        "message_operation_success": "Operation completed successfully",
         "toolbar_search": "Search...",
         "view_discussions": "Discussions",
         "view_files": "Files",
@@ -50,6 +52,8 @@
         "button_save": "Guardar",
         "button_settings": "Configuración",
         "button_show": "Ver",
+        "message_operation_error": "Operación fallida. Por favor, inténtelo de nuevo.",
+        "message_operation_success": "Operacion realizada satisfactoriamente",
         "toolbar_search": "Buscar...",
         "view_discussions": "Discusiones",
         "view_files": "Archivos",
@@ -80,6 +84,8 @@
         "button_save": ":lesli.shared.button_save:",
         "button_settings": ":lesli.shared.button_settings:",
         "button_show": ":lesli.shared.button_show:",
+        "message_operation_error": ":lesli.shared.message_operation_error:",
+        "message_operation_success": ":lesli.shared.message_operation_success:",
         "toolbar_search": ":lesli.shared.toolbar_search:",
         "view_discussions": ":lesli.shared.view_discussions:",
         "view_files": ":lesli.shared.view_files:",
@@ -110,6 +116,8 @@
         "button_save": ":lesli.shared.button_save:",
         "button_settings": ":lesli.shared.button_settings:",
         "button_show": ":lesli.shared.button_show:",
+        "message_operation_error": ":lesli.shared.message_operation_error:",
+        "message_operation_success": ":lesli.shared.message_operation_success:",
         "toolbar_search": ":lesli.shared.toolbar_search:",
         "view_discussions": ":lesli.shared.view_discussions:",
         "view_files": ":lesli.shared.view_files:",
@@ -140,6 +148,8 @@
         "button_save": ":lesli.shared.button_save:",
         "button_settings": ":lesli.shared.button_settings:",
         "button_show": ":lesli.shared.button_show:",
+        "message_operation_error": ":lesli.shared.message_operation_error:",
+        "message_operation_success": ":lesli.shared.message_operation_success:",
         "toolbar_search": ":lesli.shared.toolbar_search:",
         "view_discussions": ":lesli.shared.view_discussions:",
         "view_files": ":lesli.shared.view_files:",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lesli_calendar
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - The Lesli Development Team
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-09 00:00:00.000000000 Z
+date: 2024-10-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -50,10 +50,12 @@ files:
 - app/assets/images/lesli_calendar/calendar-logo.svg
 - app/assets/javascripts/lesli_calendar/application.js
 - app/assets/stylesheets/lesli_calendar/application.css
+- app/controllers/lesli_calendar/agendas_controller.rb
 - app/controllers/lesli_calendar/application_controller.rb
 - app/controllers/lesli_calendar/calendars_controller.rb
 - app/controllers/lesli_calendar/dashboards_controller.rb
 - app/controllers/lesli_calendar/events_controller.rb
+- app/helpers/lesli_calendar/agendas_helper.rb
 - app/helpers/lesli_calendar/application_helper.rb
 - app/helpers/lesli_calendar/calendars_helper.rb
 - app/helpers/lesli_calendar/dashboards_helper.rb
@@ -61,14 +63,17 @@ files:
 - app/jobs/lesli_calendar/application_job.rb
 - app/mailers/lesli_calendar/application_mailer.rb
 - app/models/lesli_calendar/account.rb
+- app/models/lesli_calendar/agenda.rb
 - app/models/lesli_calendar/application_record.rb
 - app/models/lesli_calendar/calendar.rb
 - app/models/lesli_calendar/dashboard.rb
 - app/models/lesli_calendar/event.rb
 - app/services/lesli_calendar/calendar_service.rb
 - app/services/lesli_calendar/event_service.rb
-- app/views/lesli_calendar/calendars/_calendar.html.erb
-- app/views/lesli_calendar/calendars/_form.html.erb
+- app/views/lesli_calendar/agendas/edit.html.erb
+- app/views/lesli_calendar/agendas/index.html.erb
+- app/views/lesli_calendar/agendas/new.html.erb
+- app/views/lesli_calendar/agendas/show.html.erb
 - app/views/lesli_calendar/calendars/edit.html.erb
 - app/views/lesli_calendar/calendars/index.html.erb
 - app/views/lesli_calendar/calendars/new.html.erb
@@ -97,6 +102,7 @@ files:
 - db/migrate/v1.0/0301110110_create_lesli_calendar_events.rb
 - db/seed/development.rb
 - db/seed/production.rb
+- db/seed/seeds.json
 - db/seed/test.rb
 - db/seeds.rb
 - db/tables/0301010210_create_lesli_driver_catalog_event_types.rb
@@ -109,11 +115,15 @@ files:
 - lib/lesli_calendar.rb
 - lib/lesli_calendar/engine.rb
 - lib/lesli_calendar/version.rb
+- lib/scss/agenda.scss
 - lib/scss/application.scss
 - lib/scss/calendar.scss
+- lib/scss/dashboard.scss
 - lib/tasks/lesli_calendar_tasks.rake
 - lib/vue/application.js
+- lib/vue/apps/agendas/show.vue
 - lib/vue/apps/calendars/show.vue
+- lib/vue/apps/dashboards/show.vue
 - lib/vue/apps/events/index.vue
 - lib/vue/components/agenda.vue
 - lib/vue/components/calendar.vue

data/app/views/lesli_calendar/calendars/_calendar.html.erb

@@ -1,2 +0,0 @@
-<div id="<%= dom_id calendar %>">
-</div>