lesli 5.0.11 → 5.0.13

data/lib/vue/layouts/application-header.vue

@@ -53,9 +53,14 @@ const url = inject("url")
 
 // · defining props
 const props = defineProps({
+    showProfile: {
+        type: Boolean,
+        default: false,
+        required: false
+    },
     showEngines: {
         type: Boolean,
-        default: true,
+        default: false,
         required: false
     },
     showBell: {
@@ -68,7 +73,7 @@ const props = defineProps({
         default: false,
         required: false
     },
-    showTickets:{
+    showSupport: {
         type: Boolean,
         default: false,
         required: false
@@ -89,7 +94,8 @@ const props = defineProps({
 // · translations
 const translations = {
     lesli: {
-        application: i18n.t("lesli.application"),
+        shared: {},
+        application: {},
     }
 }
 
@@ -122,15 +128,108 @@ function safeEngineUrl() {
 </script>
 <template>
     <header ref="lesliApplicationHeader" class="lesli-application-header">
-        <div class="lesli-application-header-container container">
-            <a :href="safeEngineUrl()">
-                <figure class="image lesli-brand">
+        <lesli-navbar>
+            <template v-slot:brand>
+                <a :href="safeEngineUrl()">
                     <slot name="brand"></slot>
-                </figure>
-            </a>
+                </a>
+            </template>
+            <template v-slot:end>
+
+                <slot name="end"></slot>
+
+                <!-- tickets -->
+                <div class="navbar-item" v-if="props.showSupport">
+                    <a  class="header-indicator"
+                        @click="() => { storeLayout.showSupport = true }">
+                        <span class="count" v-if="storeLayout.header.support > 0"></span>
+                        <span class="ri-ticket-2-line"></span>
+                    </a>
+                </div>
+
+                <!-- tasks -->
+                <div class="navbar-item" v-if="props.showFocus">
+                    <a  class="header-indicator"
+                        @click="() => { storeLayout.showSuppor = true }">
+                        <span class="ri-list-check-3">
+                        </span>
+                        <span class="count" v-if="storeLayout.header.support > 0">
+                        </span>
+                    </a>
+                </div>
+
+                <!-- notifications -->
+                <div class="navbar-item" v-if="props.showBell">
+                    <a class="header-indicator">
+                        <span :class="['ri-notification-3-line', { 'is-active' : storeLayout.header.notifications > 0 }]">
+                        </span>
+                        <span class="count">
+                        </span>
+                    </a>
+                </div>
+
+                <!-- engines selector  -->
+                <div class="navbar-item" v-if="props.showEngines">
+                    <a @click="toggleEngines()">
+                        <span class="ri-apps-2-line"></span>
+                    </a>
+                </div>
+
+                <!-- profile options -->
+                <div class="navbar-item" v-if="props.showProfile">
+                    <div class="dropdown is-hoverable">
+                        <div class="dropdown-trigger">
+                            <a @click="storeLayout.showProfile = true">
+                                <span class="ri-user-smile-line">
+                                </span>
+                            </a>
+                        </div>
+                        <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                            <div class="dropdown-content">
+                                <a :href="url.admin('profile')" class="dropdown-item py-3">
+                                    <span class="icon-text">
+                                        <span class="icon has-text-grey-dark">
+                                            <span class="ri-questionnaire-line"></span>
+                                        </span>
+                                        <span>Help</span>
+                                    </span>
+                                </a>
+                                <a :href="url.admin('profile')" class="dropdown-item py-3">
+                                    <span class="icon-text">
+                                        <span class="icon has-text-grey-dark">
+                                            <span class="ri-equalizer-line"></span>
+                                        </span>
+                                        <span>Settings</span>
+                                    </span>
+                                </a>
+                                <a :href="url.admin('profile')" class="dropdown-item py-3">
+                                    <span class="icon-text">
+                                        <span class="icon has-text-grey-dark">
+                                            <span class="ri-user-line"></span>
+                                        </span>
+                                        <span>Profile</span>
+                                    </span>
+                                </a>
+                                <hr class="dropdown-divider" />
+                                <a href="/logout" class="dropdown-item py-3">
+                                    <span class="icon-text">
+                                        <span class="icon has-text-grey-dark">
+                                            <span class="ri-logout-box-r-line"></span>
+                                        </span>
+                                        <span>Logout</span>
+                                    </span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </lesli-navbar>
+        <!--
+        <div class="lesli-application-header-container container">
             <div class="lesli-application-header-left">
                 <div class="control is-medium has-icons-left has-text-grey">
-                    <span class="icon is-left has-text-gray">
+                    <span class="icon is-left has-text-grey-dark">
                         <span class="material-icons" v-if="!storeSearch.loading">
                             search
                         </span>
@@ -147,85 +246,7 @@ function safeEngineUrl() {
                     />
                 </div>
             </div>
-            <div class="lesli-application-header-right">
-
-                <!-- -->
-                <slot></slot>
-
-
-                <!-- engines selector -->
-                <a  v-if="props.showEngines"
-                    class="header-indicator" 
-                    @click="toggleEngines()">
-                    <span class="ri-apps-2-line"></span>
-                </a>
-
-                <!-- Tickets -->
-                <a 
-                    v-if="props.showTickets"
-                    class="header-indicator" 
-                    @click="() => { storeLayout.showTickets = true }">
-                    <span :class="['ri-ticket-2-line', { 'is-active' : storeLayout.header.tickets > 0 }]">
-                    </span>
-                    <span class="count" v-if="storeLayout.header.tickets > 0">
-                        {{ storeLayout.header.tickets }}
-                    </span>
-                </a>
-
-                <!-- Tasks -->
-                <a  v-if="props.showFocus"
-                    class="header-indicator" 
-                    @click="() => { if (storeLayout.header.tasks > 0 ) { storeLayout.showTasks = true }}">
-                    <span :class="['ri-list-check-3', { 'is-active' : storeLayout.header.tasks > 0 }]">
-                    </span>
-                    <span class="count" v-if="storeLayout.header.tasks > 0">
-                        {{ storeLayout.header.tasks }}
-                    </span>
-                </a>
-
-                <!-- Notifications -->
-                <a 
-                    v-if="props.showBell"
-                    class="header-indicator" 
-                    @click="() => { if (storeLayout.header.notifications > 0 ) { storeLayout.showNotifications = true }}">
-                    <span :class="['ri-notification-3-line', { 'is-active' : storeLayout.header.notifications > 0 }]">
-                    </span>
-                    <span class="count" v-if="storeLayout.header.notifications > 0">
-                        {{ storeLayout.header.notifications }}
-                    </span>
-                </a>
-
-                <!-- Profile options -->
-                <div class="dropdown is-right is-hoverable header-user-options">
-                    <div class="dropdown-trigger">
-                        <span class="icon has-text-link">
-                            <span class="ri-user-smile-line" @click="storeLayout.showProfile = true">
-                            </span>
-                        </span>
-                    </div>
-                    <div class="dropdown-menu" id="dropdown-menu" role="menu">
-                        <div class="dropdown-content">
-                            <a :href="url.admin('profile')" class="dropdown-item py-3">
-                                <span class="icon-text">
-                                    <span class="icon has-text-grey-dark">
-                                        <span class="ri-user-line"></span>
-                                    </span>
-                                    <span>{{ translations.lesli.application.navigation_my_profile }}</span>
-                                </span>
-                            </a>
-                            <hr class="dropdown-divider">
-                            <a href="/logout" class="dropdown-item py-3">
-                                <span class="icon-text">
-                                    <span class="icon has-text-grey-dark">
-                                        <span class="ri-logout-box-r-line"></span>
-                                    </span>
-                                    <span>{{ translations.lesli.application.navigation_logout }}</span>
-                                </span>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
+        -->
     </header>
 </template>

data/lib/vue/panels/{panel-notifications.vue → panel-bell-notifications.vue}

@@ -18,18 +18,17 @@ 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. 
+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
-@website  https://lesli.tech
+@website  https://www.lesli.tech
 @license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
 
-// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
 // · 
-
 */
 
 
@@ -38,13 +37,14 @@ import { ref, reactive, onMounted, watch, computed, inject } from "vue"
 
 
 // · import stores
-import { useUser } from "LesliApp/administration/stores/user"
-import { useLayout } from "Lesli/vue/stores/layout"
+import { useLayout } from "Lesli/vue/shared/stores/layout"
+import { useNotifications } from "Lesli/vue/panels/stores/bell-notifications"
+
 
 
 // · implement stores
-const storeUser = useUser()
 const storeLayout = useLayout()
+const storeNotifications = useNotifications()
 
 
 // · initialize/inject plugins
@@ -52,28 +52,22 @@ const url = inject("url")
 const date = inject("date")
 
 
-// · emit the page selected received from the pagination component
-function paginate(page) {
-    storeUser.paginateNotifications(page)
-}
-
-
 // · 
 watch(() => storeLayout.showNotifications, () => {
-    storeUser.fetchNotifications()
+    storeNotifications.get()
 })
 
 </script>
 <template>
-    <lesli-panel class="lesli-panel-notifications" v-model:open="storeLayout.showNotifications">
+    <lesli-panel class="lesli-panel-bell-notifications" v-model:open="storeLayout.showNotifications">
         <template #header>
-            Notifications ({{ storeUser.notifications.pagination.total }})
+            Notifications ({{ storeNotifications.notifications.pagination.total }})
         </template>
         <template #default>
             <div class="block">
                 <ul class="">
                     <li class="lesli-notification pt-3 pb-2 px-4"
-                        v-for="notification in storeUser.notifications.records">
+                        v-for="notification in storeNotifications.notifications.records">
                         <a  :href="notification.url"
                             :class="['mb-2 is-block', `notification-${ notification.category }`]">
                             <h4 :class="['notification-title', `has-text-${ notification.category }-dark`]">
@@ -99,7 +93,9 @@ watch(() => storeLayout.showNotifications, () => {
                 </ul>
             </div>
             <div class="block px-5">
-                <lesli-pagination :pagination="storeUser.notifications.pagination" @paginate="paginate" mode="simple"></lesli-pagination>
+                <!-- 
+                <lesli-pagination :pagination="storeNotifications.notifications.pagination" @paginate="paginate" mode="simple"></lesli-pagination>
+                -->
             </div>
         </template>
     </lesli-panel>

data/lib/vue/panels/panel-support-tickets.vue

@@ -0,0 +1,163 @@
+<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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+// TODO: Move this to own engine
+
+
+// · import vue tools
+import { inject, watch } from "vue"
+import { useRouter } from "vue-router"
+
+
+// · import store
+import { useLayout } from "Lesli/vue/shared/stores/layout"
+import { useTickets } from "Lesli/vue/panels/stores/support-tickets"
+
+
+// · 
+import { LesliTextEditor } from "lesli-vue/components"
+
+
+// · initialize/inject plugins
+const router = useRouter()
+const url = inject("url")
+
+
+// · implement stores
+const storeLayout = useLayout()
+const storeTicketsPanel = useTickets()
+
+
+// · defining translations
+const translations = {
+    tickets: {},
+    lesli: {
+        shared:{}
+    }
+}
+
+
+// · 
+const columns = [{
+    field: "subject",
+    label: "subject"
+}, {
+    field: "status_name",
+    label: "Status"
+}]
+
+
+// . Reset form on create
+storeTicketsPanel.resetForm()
+
+
+// . 
+watch(() => storeLayout.showSupportTickets, () => {
+    if (storeLayout.showSupportTickets) {
+        storeTicketsPanel.fetchTickets()
+
+        if (!storeTicketsPanel.loaded) {
+            //storeTicketsPanel.getTicketOptions()
+        }
+    }    
+})
+
+</script>
+
+<template>
+    <lesli-panel class="lesli-panel-support-tickets" v-model:open="storeLayout.showSupportTickets">
+        <template #header>
+            Support tickets
+        </template>
+        <template #default>
+            <div class="lastest-tickets" v-if="storeTicketsPanel.tickets.length > 0">
+                <h4>Latest tickets</h4>
+                <lesli-table
+                    class="is-narrow"
+                    :columns="columns"
+                    :records="storeTicketsPanel.tickets"
+                    :loading="storeTicketsPanel.loading"
+                    :href="(ticket) => url.support('tickets/:id', ticket.id)">
+                </lesli-table>
+            </div>
+            <hr>
+            <div class="form">
+                <lesli-form flat @submit="storeTicketsPanel.postTicket">
+                    <div class="field">
+                        <label class="label">
+                            {{ translations.tickets.column_subject }}
+                            {{ translations.tickets.column_subject }}
+                            <sup class="has-text-danger">*</sup>
+                        </label>
+                        <div class="control">
+                            <input type="text" class="input" required v-model="storeTicketsPanel.ticket.subject">
+                        </div>
+                    </div>
+
+                    <div class="field">
+                        <label class="label">
+                            {{ translations.tickets.column_type }}
+                            <sup class="has-text-danger">*</sup>
+                        </label>
+                        <div class="control">
+                            <lesli-select
+                                :options="storeTicketsPanel.typesSelect"
+                                v-model="storeTicketsPanel.ticket.cloud_help_catalog_ticket_types_id">
+                            </lesli-select>
+                        </div>
+                    </div>
+
+                    <div class="field">
+                        <label class="label">
+                            {{ translations.tickets.column_description }}
+                            <sup class="has-text-danger">*</sup>
+                        </label>
+                        <div class="control">
+                            <lesli-text-editor mode="small" v-model="storeTicketsPanel.ticket.description">
+                            </lesli-text-editor>
+                        </div>
+                    </div>
+
+                    <div class="field">
+                        <div class="control">
+                            <lesli-button icon="save">
+                                {{ translations.lesli.shared.button_save }}
+                            </lesli-button>   
+                        </div>
+                    </div>
+                </lesli-form>
+            </div>
+        </template>
+    </lesli-panel>
+</template>

data/lib/vue/panels/stores/bell-notifications.js

@@ -0,0 +1,46 @@
+/*
+Copyright (c) 2022, 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 { defineStore } from "pinia"
+
+
+// · 
+export const useNotifications = defineStore("lesli.panelBellNotifications", {
+    state: () => {
+        return {
+            loading: false,
+            notifications: {
+                pagination: {},
+                records: []
+            }
+        }
+    },
+    actions: {
+
+        get() {
+            this.http.get(this.url.bell("notifications")).then(result => {
+                this.notifications.pagination = result.pagination
+                this.notifications.records = result.records
+                console.log(result)
+            }).catch(error => {
+                console.log(error)
+            })
+        }
+    }
+})

data/lib/vue/panels/stores/support-tickets.js

@@ -0,0 +1,103 @@
+/*
+Copyright (c) 2022, 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 { defineStore } from "pinia"
+//import { useLayout } from "LesliVue/stores/layout"
+
+
+// · 
+export const useTickets = defineStore("lesli.panelSupportTickets", {
+    state: () => {
+        return {
+            loading: false,
+            loaded: false,
+            ticket: {
+                cloud_help_catalog_ticket_types_id: 2,
+                cloud_help_catalog_ticket_workspaces_id: null,
+                subject: "",
+                description: "",
+                reference_url: null
+            },
+            tickets: {},
+            options: {
+                types: [],
+                categories: [],
+                priorities: []
+            },
+            typesSelect : [],
+            workspaceSelect: [],
+            //storeLayout: useLayout()
+        }
+    },
+    actions: {
+
+        fetchTickets() {
+            this.loading = true
+            this.http.get(this.url.support("tickets")
+                .paginate(1,3) // Here we only fetch the last 3 tickets assigned to show in the support ticket panel
+                .filter({search_type: ['active'], user_type:['own']})
+            ).then(result => {
+                this.tickets = result.records
+            }).catch(error => {
+                this.msg.danger(I18n.t("core.shared.messages_danger_internal_error"))
+            }).finally(() => {
+                this.loading = false
+            })
+        },
+
+        postTicket(){
+            this.loading = true
+            this.ticket.reference_url = window.location.href
+
+            this.http.post(this.url.support('tickets'), this.ticket).then(result => {
+                this.msg.success(I18n.t("core.users.messages_success_operation"))
+                this.resetForm()
+                //this.storeLayout.showTickets = false
+            }).catch(error => {
+                this.msg.danger(I18n.t("core.shared.messages_danger_internal_error"))
+            }).finally(() => {
+                this.loading = false
+            })
+        },
+
+        resetForm(){
+            this.ticket.subject = ''
+            this.ticket.description = ""
+            this.ticket.type = 2
+        },
+
+        getTicketOptions() {
+            this.loaded = true
+            this.http.get(this.url.support('tickets/options')).then(result => {
+                this.options = result
+
+                result.types.map((type)=>{
+                    this.typesSelect.push({label: type.name, value: type.id})
+                })
+
+                result.workspaces.map((workspace)=>{
+                    this.workspaceSelect.push({label: workspace.name, value: workspace.id})
+                })
+
+            }).catch(error => {
+                this.msg.danger(I18n.t("core.shared.messages_danger_internal_error"))
+            })
+        },
+    }
+})