lesli_calendar 0.2.0

data/lib/vue/application.js

@@ -0,0 +1,59 @@
+/*
+
+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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+// · Import Lesli builders
+import application from "Lesli/vue/application"
+import translation from "Lesli/vue/translation"
+
+
+// · Import engine translations
+import translations from "LesliBabel/vue/stores/translations.json"
+
+
+// · Import apps and components
+import appCalendarShow from "LesliCalendar/vue/apps/calendars/show.vue"
+import appEventsIndex from "LesliCalendar/vue/apps/events/index.vue"
+
+
+// · Buil Lesli translations
+translation(translations)
+
+
+// · 
+application("LesliCalendar", [{
+    path: "/",
+    component: appCalendarShow
+}, {
+    path: "/events",
+    component: appEventsIndex
+}])

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

@@ -0,0 +1,87 @@
+<script setup>
+/*
+Copyright (c) 2023, all rights reserved.
+
+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.
+
+Without the written permission of the owner, any replication, modification,
+transmission, publication is strictly forbidden.
+
+For more information read the license file including with this software.
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+// · 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 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>
+
+        <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-panel-event></component-panel-event>
+    </lesli-application-container>
+</template>

data/lib/vue/apps/events/index.vue

@@ -0,0 +1,48 @@
+<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 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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+// · import vue tools
+import { ref, reactive, onMounted, watch, computed, inject } from "vue"
+import { useRouter, useRoute } from "vue-router"
+
+
+// · Import components
+
+
+</script>
+<template>
+    <lesli-application-container>
+        <lesli-header title="Events">
+        </lesli-header>
+    </lesli-application-container>
+</template>

data/lib/vue/components/agenda.vue

@@ -0,0 +1,137 @@
+<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 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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+// · 
+import { onMounted, watch, ref, inject } from "vue"
+
+import dayjs from "dayjs"
+import isSameOrAfter from "dayjs/plugin/isSameOrAfter"
+dayjs.extend(isSameOrAfter)
+
+// · 
+
+
+
+// · import lesli stores
+import { useCalendar } from "LesliCalendar/vue/stores/calendar"
+
+
+const date = inject("date")
+
+
+// · implement stores
+const storeCalendar = useCalendar()
+
+
+// · 
+const agenda = ref([])
+const today = dayjs()
+
+
+// · 
+function merge() {
+
+    let events = [
+        ...storeCalendar.calendarData.events, 
+        ...storeCalendar.calendarData.events_support
+    ]
+    
+    let count = 0
+
+    events = events.filter(event => {
+
+        // limit the number of events to show in the agenda
+        if (count >= 6) {
+            return 
+        }
+
+        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")
+        }
+
+
+        if (event.description) { 
+            event.description = event.description
+            .replace(/<[^>]*>?/gm, '') // remove html tags from string
+            .substring(0, 40) + '...'  // get a excerpt of the description
+        }
+
+        event.classNames = event.classNames
+
+        count++
+
+        return event
+
+    })
+    
+    events = events.sort((a,b) => a.time > b.time)
+
+    agenda.value = events
+}
+
+
+// · 
+watch(() => storeCalendar.calendarData.events_support, () => merge())
+
+</script>
+<template>
+    <div class="lesli-calendar-agenda">
+        <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>
+            </div>
+        </div>
+    </div>
+</template>

data/lib/vue/components/calendar.vue

@@ -0,0 +1,137 @@
+<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 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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+// · Import components, libraries and tools
+import { onMounted, inject, ref } from "vue"
+
+import { Calendar } from "@fullcalendar/core";
+import listPlugin from "@fullcalendar/list";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+
+
+// · import lesli stores
+import { useCalendar } from 'LesliCalendar/vue/stores/calendar'
+
+
+// · implement stores
+const storeCalendar = useCalendar()
+
+
+// · 
+const date = inject("date")
+
+
+function onDateClick() {
+    // const storeEvent = useEvent()
+    // this.reset()
+    // storeEvent.showModal = !storeEvent.showModal
+}
+
+
+function onEventClick(args) {
+
+    if (args.event?._def?.extendedProps?.engine == "lesli-support") {
+        window.open(
+            "http://localhost:3000/support/tickets/" + args.event?._def?.extendedProps?.ticket, 
+            "_blank", 
+            "noreferrer"
+        );
+        return 
+    }
+    
+    // const storeEvent = useEvent()
+    // const storeGuests = useGuests()
+    // arg.jsEvent.preventDefault()
+    // this.event_id = parseInt(arg.event.id)
+    // this.http.get(this.url.driver(`events/${this.event_id}`))
+    // .then(result => {
+    //     this.event = result
+    //     storeEvent.showModal = !storeEvent.showModal
+    //     storeGuests.getAttendants()
+    //     storeGuests.getUsers()
+    // })
+}
+
+
+function onEventContent(args) {
+
+    console.log(args.event._def.extendedProps.engine)
+
+    let title = document.createElement("span")
+    let time = document.createElement("span")
+    title.innerHTML = args.event.title
+    time.innerHTML = date.time(args.event._def.extendedProps.dateStart)
+
+    if (args.event._def.extendedProps.dateEnd) {
+        time.innerHTML += (" - " + date.time(args.event._def.extendedProps.dateEnd))
+    }
+    
+    title.classList.add("event-title")
+    time.classList.add("event-time")
+    return { domNodes: [title, time] }
+
+}
+
+// · 
+onMounted(() => {
+
+    storeCalendar.calendar = new Calendar(document.getElementById("lesli-calendar"), {
+        plugins: [
+            dayGridPlugin,
+            interactionPlugin,
+            timeGridPlugin,
+            listPlugin
+        ],
+        firstDay: 1,
+        headerToolbar: false,
+        initialView: "dayGridMonth",
+        showNonCurrentDates: true,
+        dayMaxEvents: true, // allow "more" link when too many events
+        editable: true,
+        events: [],
+        eventClick: onEventClick,
+        dateClick: onDateClick,
+        //eventContent: onEventContent
+    });
+
+    setTimeout(() => { storeCalendar.calendar.render(); }, 200)
+
+})
+
+</script>
+
+<template>
+    <div id="lesli-calendar"></div>
+</template>

data/lib/vue/components/event.vue

@@ -0,0 +1,47 @@
+<script setup>
+/*
+Copyright (c) 2023, all rights reserved.
+
+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.
+
+Without the written permission of the owner, any replication, modification,
+transmission, publication is strictly forbidden.
+
+For more information read the license file including with this software.
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// ·
+*/
+
+// · Import components, libraries and tools
+import { onMounted } from 'vue'
+
+
+// · 
+import { useEvents } from "LesliCalendar/vue/stores/events"
+
+
+const storeEvents = useEvents()
+
+
+// import ComponentDiscussions from "LesliVue/cloud-objects/discussion.vue"
+// import ComponentFiles from "LesliVue/cloud-objects/file.vue"
+// import ComponentGuests from './guests.vue'
+import ComponentForm from './form.vue'
+
+</script>
+
+<template>
+
+    <lesli-panel v-model:open="storeEvents.showModal">
+        <template #header>
+        </template>
+
+        <template #default>
+            
+        </template>
+    </lesli-panel>
+</template>

data/lib/vue/components/form.vue

@@ -0,0 +1,143 @@
+<script setup>
+/*
+Copyright (c) 2023, all rights reserved.
+
+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.
+
+Without the written permission of the owner, any replication, modification,
+transmission, publication is strictly forbidden.
+
+For more information read the license file including with this software.
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// ·
+*/
+
+// · import lesli stores
+import { useCalendar } from 'LesliCalendar/vue/stores/calendar'
+import { useEvents } from 'LesliCalendar/vue/stores/events'
+
+// · implement stores
+const storeCalendar = useCalendar()
+const storeEvent = useEvents()
+
+const translations = {
+    events: I18n.t('driver.events'),
+    core: I18n.t('core.shared'),
+}
+
+const submitEvent = () => {
+    if (storeCalendar.event.id) {
+        storeCalendar.putEvent()
+    }
+    else {
+        storeCalendar.postEvent()
+    }
+}
+
+</script>
+
+<template>
+    <form @submit.prevent="submitEvent">
+        <fieldset>
+            <div class="columns">
+                <div class="column">
+                    <field label="column_user_main_id">
+                        <p>{{ translations.events.column_user_main_id }}</p>
+                        <input class="input is-default" type="text" name="organizer_name"
+                            v-model="storeCalendar.event.organizer_name" readonly />
+                    </field>
+                    <field>
+                        <p>{{ translations.events.column_title }}</p>
+                        <input class="input is-default" type="text" name="title" v-model="storeCalendar.event.title"
+                            required />
+                    </field>
+                    <field>
+                        <p>{{ translations.events.column_time_start }}</p>
+                        <lesli-calendar v-model="storeCalendar.event.time_start" mode="dateTime">
+                        </lesli-calendar>
+                    </field>
+                    <field>
+                        <p>{{ translations.events.column_budget }}
+                            ({{ storeCalendar.lesli.settings.currency.symbol }})</p>
+                        <input class="input is-default" type="number" name="budget" min="0" step="0.01"
+                            v-model="storeCalendar.event.budget" />
+                    </field>
+                    <field>
+                        <p>{{ translations.events.column_showed_up_count }}</p>
+                        <input class="input is-default" type="number" name="showed_up_count" min="0" step="1"
+                            v-model="storeCalendar.event.showed_up_count" />
+                    </field>
+                </div>
+                <div class="column">
+                    <field>
+                        <p>{{ translations.events.column_cloud_driver_catalog_event_types_id }}</p>
+                        <lesli-select v-model="storeCalendar.event.cloud_driver_catalog_event_types_id" icon="public"
+                            :options="storeEvent.options.event_types">
+                        </lesli-select>
+                    </field>
+                    <field>
+                        <p>{{ translations.events.column_location }}</p>
+                        <input class="input is-default" type="text" name="address"
+                            v-model="storeCalendar.event.location" />
+                    </field>
+                    <field>
+                        <p>{{ translations.events.column_time_end }}</p>
+                        <lesli-calendar v-model="storeCalendar.event.time_end" mode="dateTime">
+                        </lesli-calendar>
+                    </field>
+                    <field>
+                        <p>{{ translations.events.column_real_cost }}
+                            ({{ storeCalendar.lesli.settings.currency.symbol }})</p>
+                        <input class="input is-default" type="number" name="real_cost" min="0" step="0.01"
+                            v-model="storeCalendar.event.real_cost" />
+                    </field>
+                    <field>
+                        <p>{{ translations.events.column_signed_up_count }}</p>
+                        <input class="input is-default" type="number" name="signed_up_count" min="0" step="1"
+                            v-model="storeCalendar.event.signed_up_count" />
+                    </field>
+                </div>
+            </div>
+            <div class="columns">
+                <div class="column">
+                    <field>
+                        <p>{{ translations.events.column_description }}</p>
+                        <div class="control">
+                            <textarea v-model="storeCalendar.event.description" class="textarea"
+                                name="description"></textarea>
+                        </div>
+                    </field>
+                </div>
+            </div>
+            <div class="columns">
+                <div class="column">
+                    <field>
+                        <label class="checkbox">
+                            {{ translations.events.view_text_mark_as_public }}
+                            <input type="checkbox" name="public" v-model="storeCalendar.event.public">
+                        </label>
+                    </field>
+                </div>
+                <div class="column">
+                    <field>
+                        <label class="checkbox">
+                            {{ "Is proposal?" }}
+                            <input type="checkbox" name="is_proposal" v-model="storeCalendar.event.is_proposal">
+                        </label>
+                    </field>
+                    <field v-show="storeCalendar.event.is_proposal">
+                        <p>{{ translations.events.column_estimated_duration }}</p>
+                        <input class="input is-default" type="number" name="estimated_mins_durations" min="10" step="10"
+                            v-model="storeCalendar.event.estimated_mins_durations" />
+                    </field>
+                </div>
+            </div>
+            <lesli-button type="submit" icon="save">{{ translations.core.view_btn_save }}</lesli-button>  
+        </fieldset>
+    </form>
+
+</template>