lesli 5.0.0

data/lib/vue/application.js

@@ -0,0 +1,269 @@
+/*
+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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+// · Loading core framework and libraries
+import { createPinia } from "pinia"
+import { createApp, nextTick } from "vue"
+import { createWebHistory, createRouter } from "vue-router";
+import debug from "lesli-js/debug/browser"
+
+
+// custom console.log implementation for Lesli
+window.debug = debug
+
+
+// · Loading application layout components
+import componentApplicationHeader from "Lesli/layouts/application-header.vue"
+import componentApplicationEngines from "Lesli/layouts/application-engines.vue"
+/*
+import componentApplicationFooter from "Lesli/layouts/application-footer.vue"
+import componentApplicationSearch from "Lesli/layouts/application-search.vue"
+import componentApplicationSidebar from "Lesli/layouts/application-sidebar.vue"
+
+import componentApplicationAnnouncement from "Lesli/layouts/application-announcements.vue"
+
+import componentApplicationPanelTasks from "Lesli/panels/panel-tasks.vue"
+import componentApplicationPanelFiles from "Lesli/panels/panel-files.vue"
+import componentApplicationPanelTickets from "Lesli/panels/panel-tickets.vue"
+import componentApplicationPanelProfile from "Lesli/panels/panel-profile.vue"
+import componentApplicationPanelNotifications from "Lesli/panels/panel-notifications.vue"
+import componentApplicationPanelAnnouncements from "Lesli/panels/panel-announcements.vue"
+*/
+
+// · Loading global layout components
+import { 
+    lesliElementApplication,
+    lesliElementAutocomplete, 
+    lesliElementAvatar, 
+    lesliElementButton, 
+    lesliElementCalendar, 
+    lesliElementCard, 
+    lesliElementCollapse, 
+    lesliElementContent,
+    lesliElementControl, 
+    lesliElementDropdown, 
+    lesliElementEmpty, 
+    lesliElementForm, 
+    lesliElementHeader, 
+    lesliElementIcon, 
+    lesliElementInput, 
+    lesliElementInputTag, 
+    lesliElementLink, 
+    lesliElementLoading, 
+    lesliElementMap, 
+    lesliElementNavbar, 
+    lesliElementFileUploader,
+    lesliElementNavigationList, 
+    lesliElementPagination, 
+    lesliElementPanel, 
+    lesliElementSelect, 
+    lesliElementTable, 
+    lesliElementTabs, 
+    lesliElementTabItem, 
+    lesliElementToggle, 
+    lesliElementToolbar 
+} from "lesli-vue/elements"
+
+
+
+// · Loading vue/pinia plugins as composables
+import { 
+    useLesliMsg, 
+    useLesliUrl, 
+    useLesliDate, 
+    useLesliHttp, 
+    useLesliUtils, 
+    useLesliDialog 
+} from "lesli-vue/composables"
+
+
+
+
+// · engine: List of controllers apps loaded
+// · routes: Array of routes for Vue 
+// · example: app("CloudAudit", [])
+export default (engine, routes=[]) => {
+
+    // · Base path for the engines/core url's
+    const base_path = "/";
+
+
+    // · Vue app configuration container
+    let appbuilder = { }
+
+
+    // · Loading Lesli local layout components
+    appbuilder["components"] = { 
+        "application-component-header": componentApplicationHeader,
+        "application-component-engines": componentApplicationEngines,
+        /*
+        "application-component-footer": componentApplicationFooter,
+        "application-component-search": componentApplicationSearch,
+        "application-component-sidebar": componentApplicationSidebar,
+        "application-component-announcements": componentApplicationAnnouncement,
+        "application-component-panel-tasks": componentApplicationPanelTasks,
+        "application-component-panel-files": componentApplicationPanelFiles,
+        "application-component-panel-tickets": componentApplicationPanelTickets,
+        "application-component-panel-profile": componentApplicationPanelProfile,
+        "application-component-panel-announcements": componentApplicationPanelAnnouncements,
+        "application-component-panel-notifications": componentApplicationPanelNotifications
+        */
+    }
+
+
+    // · Use pinia as app state management
+    const pinia = createPinia()
+
+
+    // · Loading pinia handmade plugins
+    pinia.use(() => ({ msg: useLesliMsg() }))
+    pinia.use(() => ({ url: useLesliUrl() }))
+    pinia.use(() => ({ http: useLesliHttp() }))
+    pinia.use(() => ({ date: useLesliDate() }))
+    pinia.use(() => ({ utils: useLesliUtils() }))
+    pinia.use(() => ({ dialog: useLesliDialog() }))
+
+    
+    // · Global vue router
+    var router = createRouter({
+        history: createWebHistory(base_path),
+        routes: routes.map(route => {
+            // concat the base path to all routes
+            // this allow to use the rails route constants
+            // example: projects_path is equal to /crm/projects
+            route.path = base_path.concat(lesli.engine_paths[engine]).concat(route.path)
+            return route
+        })
+    })
+
+
+    // · 
+    router.afterEach((to, from) => {
+
+        // Use next tick to handle router history correctly
+        nextTick(() => {
+
+            // update the page title according to the working app
+            document.title = `${lesli?.company?.name} · ${(to.path.substring(1) || 'Dashboard')}`;
+
+            // default class for the specific instance
+            document.body.className = lesli?.instance
+
+            // using the path as class id for the body
+            // the class will be: "engine-controller"
+            var cssclass = to.path
+            .substring(1)         // remove the first slash
+            .split("/")           // create an array splited by slashes
+            .filter(e => e != "") // remove empty strings
+            .slice(0, 2)          // get the first two items of the array
+            .join("-");           // create a string joined by dashes
+
+            // add the css class to the body
+            if (cssclass) { document.body.classList.add("cloud_".concat(cssclass)) }
+
+        })
+    })
+
+
+    // · Create a beautiful Vue 3 app
+    let app = createApp(appbuilder)
+
+
+    // · Provide composables to make them available in all the components
+    app.provide('msg', useLesliMsg())
+    app.provide('url', useLesliUrl())
+    app.provide('http', useLesliHttp())
+    app.provide('date', useLesliDate())
+    app.provide('date', useLesliDate())
+    app.provide('utils', useLesliUtils())
+    app.provide('dialog', useLesliDialog())
+
+
+    // · Extending vue
+    app.use(pinia)
+    app.use(router)
+
+    
+    // · Loading Lesli handmade global components
+    app.component("lesli-application", lesliElementApplication)
+    app.component("lesli-icon", lesliElementIcon)
+    app.component("lesli-empty", lesliElementEmpty)
+    app.component("lesli-header", lesliElementHeader)
+    app.component("lesli-select", lesliElementSelect)
+    app.component("lesli-toolbar", lesliElementToolbar)
+    app.component("lesli-loading", lesliElementLoading)
+    app.component("lesli-table", lesliElementTable)
+    app.component("lesli-collapse", lesliElementCollapse)
+    app.component("lesli-tab-item", lesliElementTabItem)
+    app.component("lesli-tabs", lesliElementTabs)
+    app.component("lesli-panel", lesliElementPanel)
+    app.component("lesli-button", lesliElementButton)
+    app.component("lesli-calendar", lesliElementCalendar)
+    app.component("lesli-input-tag", lesliElementInputTag)
+    app.component("lesli-file-uploader", lesliElementFileUploader)
+    app.component("lesli-navigation-list", lesliElementNavigationList)
+    app.component("lesli-avatar", lesliElementAvatar)
+    app.component("lesli-toggle", lesliElementToggle)
+    app.component("lesli-dropdown", lesliElementDropdown)
+    app.component("lesli-map", lesliElementMap)
+    //app.component("lesli-gallery", lesliElementGallery)
+    app.component("lesli-autocomplete", lesliElementAutocomplete)
+    app.component("lesli-pagination", lesliElementPagination)
+    app.component("lesli-form", lesliElementForm)
+    app.component("lesli-input", lesliElementInput)
+    app.component("lesli-control", lesliElementControl)
+    app.component("lesli-card", lesliElementCard)
+    app.component("lesli-content", lesliElementContent)
+
+
+    // · Mount app once DOM is ready
+    document.addEventListener("DOMContentLoaded", () => {
+
+        // · mount the app on the main html tag
+        app.mount("#lesli-application")
+
+        // · development message about vue app loaded
+        if (lesli_application_development) { 
+            debug.info(`${engine} --> ${lesli.engine_paths[engine]}`, "vue/application")
+        }
+
+        // · console production message
+        if (lesli_application_production) { 
+            console.clear()
+            debug.lesli_message_warning(lesli?.company?.name) 
+            debug.info("Lesli application", lesli_application_version) 
+        }
+
+    });
+
+    return app;
+}

data/lib/vue/apps/cloudobjects/action.vue

@@ -0,0 +1,193 @@
+<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 · Your Smart Business Assistant. 
+
+Made with ♥ by https://www.lesli.tech
+Building a better future, one line of code at a time.
+
+@contact  hello@lesli.tech
+@website  https://lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+
+*/
+
+
+// · import vue tools
+import { onMounted } from "vue"
+
+// · import store
+import { useCloudObjectAction } from "Lesli/stores/cloud-objects/action"
+
+// · import components
+
+
+// · defining translations
+const translations = {
+    core: I18n.t('core.shared')
+}
+
+// · implement store
+const actionStore = useCloudObjectAction()
+
+// · defining props
+const props = defineProps({
+    // · prop that indicates the cloud module that will be used for interacting with the backend.
+    cloudModule: {
+        type: String,
+        required: true,
+    },
+    // · prop that indicates the resource that you need to interact with.
+    cloudObject: {
+        type: String,
+        required: true,
+    },
+    // · prop that indicates the object id of the resource that you need to interact with.
+    cloudObjectId: {
+        type: String,
+        required: true,
+    }
+})
+
+actionStore.cloudModule = props.cloudModule
+actionStore.cloudObject = props.cloudObject 
+actionStore.cloudObjectId = props.cloudObjectId
+
+function  completedActions(group){
+    return group.actions.filter(action => action.complete).length
+}
+
+
+onMounted(() => {
+    actionStore.getActions()
+})
+
+</script>
+
+<template>
+    <h2 class=" title is-4">
+        {{ translations.core.view_text_quick_actions }}
+    </h2>
+
+    <form @submit.prevent="actionStore.createGroup">
+        <fieldset>
+            <div class="columns">
+                <div class="column is-10">
+                    <div class="field">
+                        <label class="label">{{ translations.core.view_text_cloud_object_actions_add_new_group }}<sup class="has-text-danger">*</sup></label>
+                        <div class="control">
+                            <input class="input" type="text" v-model="actionStore.new_group_name" required>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="column is-2">
+                    <div class="field">
+                        <label class="label">&nbsp;</label>
+                        <div class="control">
+                            <lesli-button icon="add">
+                                {{ translations.core.view_btn_add }}
+                            </lesli-button> 
+                        </div>
+                    </div>
+                </div>
+            
+            </div>
+        </fieldset>
+    </form>
+
+    <hr>
+
+    <div class="columns is-multiline">
+                    
+        <div class="column is-6" v-for="(group, name, index) in actionStore.actions_groups" :key="name">
+
+            <div class="card">
+                <div
+                    :class="['card-header', {'has-text-success': completedActions(group) == group.actions.length}]"
+                    role="button"
+                    :aria-controls="`action-group-${index}`"
+                >
+                    <p class="card-header-title">
+                        {{name}}
+                    </p>
+                    <a class="card-header-icon">
+                        <span>{{completedActions(group)}}/{{group.actions.length}}</span>
+                        &nbsp;
+                        <span class="icon">
+                            <span class="material-icons">check_box</span>
+                        </span>
+                    </a>
+                </div>
+
+                <div class="card-content">
+                    <div class="content">
+                        <form @submit.prevent="actionStore.createAction(name)">
+                            <fieldset>
+                                <div class="columns">
+                                    <div class="column is-10">
+                                        <div class="field">
+                                            <label class="label">{{ translations.core.view_text_cloud_object_actions_add_new }}<sup class="has-text-danger">*</sup></label>
+                                            <div class="control">
+                                                <input class="input" type="text" required v-model="group.new_action.instructions">
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="column is-2">
+                                        <div class="field">
+                                            <label class="label">&nbsp;</label>
+                                            <div class="control">
+                                                <lesli-button icon="add">
+                                                    {{ translations.core.view_btn_add }}
+                                                </lesli-button> 
+                                            </div>
+                                        </div>
+                                    </div>
+                                
+                                </div>
+                            </fieldset>
+                        </form>
+                        <hr>
+
+                        <div class="panel-block is-justify-content-space-between" v-for="(action, index) in group.actions" :key="index">
+                            <div class="is-pulled-left">
+
+                                <input type="checkbox" v-model="action.complete" @input="actionStore.putAction(action)">{{action.instructions}}
+                                <br>
+                                <sub><small>{{action.user_creator_name}} - {{action.created_at_text}}</small></sub>
+                            </div>
+                            <div class="is-pulled-right">
+                                <button v-if="! action.submitting" class="delete is-small" @click="actionStore.deleteAction(name, action)"></button>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    
+</template>

data/lib/vue/apps/cloudobjects/discussion/content.vue

@@ -0,0 +1,60 @@
+<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 · Your Smart Business Assistant. 
+
+Made with ♥ by https://www.lesli.tech
+Building a better future, one line of code at a time.
+
+@contact  hello@lesli.tech
+@website  https://lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+
+*/
+
+
+// · import store
+import { useCloudObjectDiscussionStore } from "Lesli/cloudobjects/stores/discussion"
+
+import DiscussionElement from "Lesli/cloudobjects/components/discussion/element.vue"
+
+const discussionStore = useCloudObjectDiscussionStore()
+
+</script>
+
+<template>
+    <div class="discussion-content mt-6">
+        <discussion-element v-for="discussion in discussionStore.mergedArray" :key="discussion.id" :discussion="discussion">
+            <template v-slot:replies>
+                <!-- Discussion responses -->
+                <div class="pl-2 pb-4" v-if="discussion.type === 'discussion'">
+                    <discussion-element v-for="response in discussion.responses" :key="response.id" :discussion="response" is-reply></discussion-element>
+                </div>
+            </template>
+        </discussion-element>
+        <lesli-pagination
+            :pagination="discussionStore.pagination"
+            @paginate="discussionStore.paginateDiscussions">
+        </lesli-pagination>
+    </div>
+</template>

data/lib/vue/apps/cloudobjects/discussion/element.vue

@@ -0,0 +1,132 @@
+<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 · Your Smart Business Assistant. 
+
+Made with ♥ by https://www.lesli.tech
+Building a better future, one line of code at a time.
+
+@contact  hello@lesli.tech
+@website  https://lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+
+*/
+
+
+// · import vue tools
+import { computed, ref } from "vue"
+
+// · import components
+import NewComment from "Lesli/cloudobjects/components/discussion/new.vue" 
+
+// · import store
+import { useCloudObjectDiscussionStore } from "Lesli/cloudobjects/stores/discussion"
+
+const props = defineProps({
+    // · the discussion or activity log that will be displayed.
+    discussion: {
+        type: Object,
+        required: true,
+    },
+    isReply: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const translations = {
+    core: {
+        shared: I18n.t("core.shared"),
+    }
+}
+
+// · this variable is used to show the reply form.
+const isReplyActive = ref(false)
+
+// · implement store
+const discussionStore = useCloudObjectDiscussionStore() 
+
+// · computed property that returns the discussion or activity log content that will be displayed in the component's element. 
+const getDiscussionContent = computed(() => {
+
+    if (props.discussion.type === 'activityLog' && props.discussion?.category == 'action_create_notification') return `${props.discussion.description}`
+    
+    if (props.discussion.type === 'activityLog') return `${props.discussion.field_name}: (${props.discussion.value_from}) - (${props.discussion.value_to})`
+
+    if (props.discussion.type === 'discussion' || props.isReply) return props.discussion.content
+})
+
+/**
+ * @description This function is called when user clicks on discussion's delete button.
+ */
+const onDeleteDiscussion = () => {
+    discussionStore.deleteDiscussion(props.discussion.id)
+}
+
+/**
+ * @description This function shows and hides the reply form.
+ */
+const showReply = () => {
+    isReplyActive.value = !isReplyActive.value
+}
+</script>
+
+<template>
+    <div class="discussion-content">
+        <div class="discussion-content-item pt-4 px-4">
+            <div class="avatar mr-4">
+                <lesli-avatar :name="props.discussion.user_name"/>
+            </div>
+            <div class="info mt-2">
+                <!-- Discussion's header -->
+                <p>
+                    <span class="has-text-weight-bold">{{ props.discussion.user_name }}</span>
+                    <span v-if="props.discussion.type !== 'discussion'" class="ml-4">{{ props.discussion.category }}</span>
+                </p>
+                
+
+                <!-- Discussion's content -->
+                <p class="mt-2 has-text-weight-bold">{{ getDiscussionContent }}</p>
+
+                <!-- Discussion's footer -->
+                <div class="mt-4 pb-2 is-flex is-align-items-center">
+                    <span class="mr-6">{{ props.discussion.created_at }}</span>
+                    <template v-if="props.discussion.type === 'discussion' || props.isReply">
+                        <button @click="onDeleteDiscussion" v-if="discussionStore.currentUserId === discussion.users_id" class="is-transparent button mr-4 has-text-weight-bold has-text-danger">
+                            {{ translations.core.shared.view_btn_delete }}
+                        </button>
+                        <button @click="showReply" v-if="!props.isReply" class="is-transparent button has-text-weight-bold has-text-primary">
+                            {{ translations.core.shared.view_btn_reply }}
+                        </button>
+                    </template>
+                </div>
+
+                <!-- Reply component to answer a discussion -->
+                <new-comment is-reply v-if="isReplyActive" :main-discussion="props.discussion" @on-add-comment="showReply"></new-comment>
+
+                <!-- Replies are defined in the content component -->
+                <slot name="replies"></slot>
+            </div>
+        </div>
+    </div>
+</template>