lesli 5.0.11 → 5.0.12

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

@@ -0,0 +1,170 @@
+<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 { computed, ref } from "vue"
+
+
+// · import components
+import NewComment from "./new.vue" 
+
+
+// · import store
+import { useCloudObjectDiscussionStore } from "../stores/discussion.js"
+
+
+// · implement store
+const discussionStore = useCloudObjectDiscussionStore() 
+
+
+// · 
+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)
+
+
+// · 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
+})
+
+
+// · 
+const onDeleteDiscussion = () => {
+    discussionStore.deleteDiscussion(props.discussion.id)
+}
+
+
+// · 
+const showReply = () => {
+    isReplyActive.value = !isReplyActive.value
+}
+
+/*
+<div class="">
+    <div class="">
+        <div class="avatar mr-4">
+            <lesli-avatar :name="props.discussion.user_name">
+            </lesli-avatar>
+        </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 }} 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 }} 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>
+*/
+
+</script>
+<template>
+    <div class="media">
+        <div class="media-left">
+            <lesli-avatar :name="props.discussion.user_name">
+            </lesli-avatar>
+        </div>
+        <div class="media-content">
+            <div class="content">
+                <div class="mb-4">
+                    <strong>{{ props.discussion.user_name }}</strong>
+                    <small>{{ props.discussion.created_at_date }}</small>
+                    <br />
+                    {{ getDiscussionContent }}
+                </div>
+                <div class="field">
+                    <div class="control">
+                        <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 }} Delete
+                            </button>
+                            <lesli-button small icon="reply" @click="showReply" v-if="!props.isReply">
+                                {{ translations.core.shared.view_btn_reply }} Reply
+                            </lesli-button>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

data/lib/vue/{refactor/shared/cloudobjects → cloudobjects}/discussion/filters.vue

@@ -37,7 +37,7 @@ Building a better future, one line of code at a time.
 import { watch } from "vue"
 
 // · import store
-import { useCloudObjectDiscussionStore } from "Lesli/vue/cloudobjects/stores/discussion"
+import { useCloudObjectDiscussionStore } from "../stores/discussion.js"
 
 // · defining translations
 const translations = {

data/lib/vue/{refactor/shared/cloudobjects → cloudobjects}/discussion/new.vue

@@ -37,7 +37,7 @@ Building a better future, one line of code at a time.
 import { ref, computed } from "vue"
 
 // · import store
-import { useCloudObjectDiscussionStore } from "Lesli/vue/cloudobjects/stores/discussion"
+import { useCloudObjectDiscussionStore } from "../stores/discussion.js"
 
 // · defining props
 const props = defineProps({
@@ -109,22 +109,26 @@ const onAddComment = () => {
 </script>
 
 <template>
-    <div class="discussion-comment mb-2 mt-2">
-        <div class="discussion-comment-input">
-            <p class="is-size-5 mb-4">{{ title }}</p>
-            <textarea
-                name="comment"
-                rows="2"
-                maxlength="1000"
-                class="textarea"
-                :placeholder="translations.core.shared.view_placeholder_enter_comment"
-                v-model="comment"
-            />
+    <div>
+        <div class="field">
+            <label class="label">{{ title }} Add new comment</label>
+            <div class="control">
+                <textarea
+                    name="comment"
+                    rows="2"
+                    maxlength="1000"
+                    class="textarea has-fixed-size"
+                    :placeholder="translations.core.shared.view_placeholder_enter_comment + 'Type your comments :)'"
+                    v-model="comment">
+                </textarea>
+            </div>
         </div>
-        <div class="is-flex is-justify-content-flex-end pb-2">
-            <button @click="onAddComment" class="discussion-comment-button mt-4 button is-primary has-text-weight-bold">
-                {{ buttonText }}
-            </button>
+        <div class="field is-grouped is-grouped-right">
+            <div class="control">
+                <lesli-button solid icon="save" @click="onAddComment">
+                    {{ buttonText }} Add comment
+                </lesli-button>
+            </div>
         </div>
     </div>
 </template>

data/lib/vue/{refactor/shared/cloudobjects → cloudobjects}/discussion.vue

@@ -1,6 +1,5 @@
 <script setup>
 /*
-
 Lesli
 
 Copyright (c) 2023, Lesli Technologies, S. A.
@@ -18,31 +17,37 @@ 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
 
-// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
 // · 
-
 */
 
 
 // · import vue tools
-import { onMounted } from "vue"
+import { onMounted, watch } from "vue"
 
-// · import store
-import { useCloudObjectDiscussionStore } from "Lesli/vue/cloudobjects/stores/discussion"
 
 // · import components
-import DiscussionNew from "Lesli/vue/cloudobjects/components/discussion/new.vue"
-import DiscussionContent from "Lesli/vue/cloudobjects/components/discussion/content.vue"
-import DiscussionFilters from "Lesli/vue/cloudobjects/components/discussion/filters.vue"
+import DiscussionNew from "./discussion/new.vue"
+import DiscussionContent from "./discussion/content.vue"
+import DiscussionFilters from "./discussion/filters.vue"
+
+
+// · import store
+import { useCloudObjectDiscussionStore } from "./stores/discussion.js"
+
+
+// · implement store
+const discussionStore = useCloudObjectDiscussionStore()
+
 
 // · defining translations
 const translations = {
@@ -51,8 +56,6 @@ const translations = {
     }
 }
 
-// · implement store
-const discussionStore = useCloudObjectDiscussionStore()
 
 // · defining props
 const props = defineProps({
@@ -68,7 +71,7 @@ const props = defineProps({
     },
     // · prop that indicates the object id of the resource that you need to interact with.
     cloudObjectId: {
-        type: String,
+        type: [String, Number],
         required: true,
     },
     onlyDiscussions: {
@@ -78,21 +81,19 @@ const props = defineProps({
     }
 });
 
-discussionStore.cloudModule = props.cloudModule
-discussionStore.cloudObject = props.cloudObject 
-discussionStore.cloudObjectId = props.cloudObjectId
 
 onMounted(() => {
-    if (discussionStore.filters.showActivityLog && !props.onlyDiscussions) discussionStore.fetchActivityLogs()
-    if (discussionStore.filters.showDiscussion) discussionStore.fetchDiscussions()
+    discussionStore.cloudModule = props.cloudModule
+    discussionStore.cloudObject = props.cloudObject 
+    discussionStore.cloudObjectId = props.cloudObjectId
+    discussionStore.fetchDiscussions()
 })
 </script>
-
 <template>
-    <div class="p-2 discussion">
+    <div class="lesli-cloud-object-discussion m-auto py-6">
         <discussion-new></discussion-new>
-        <lesli-toolbar @search="discussionStore.search" :search-placeholder="translations.core.shared.view_placeholder_discussion_search" class="mt-4"></lesli-toolbar>
-        <discussion-filters v-if="!props.onlyDiscussions"></discussion-filters>
+        <!-- lesli-toolbar @search="discussionStore.search" :search-placeholder="translations.core.shared.view_placeholder_discussion_search" class="mt-4"></lesli-toolbar -->
+        <!-- discussion-filters v-if="!props.onlyDiscussions"></discussion-filters -->
         <discussion-content></discussion-content>
     </div>
 </template>

data/lib/vue/{refactor/stores/cloudobjects → cloudobjects/stores}/discussion.js

@@ -17,27 +17,25 @@ 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
 
-// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
 // · 
-
 */
 
 
-// · This store is needed to make http requests, manage the reactivity 
-// · of certain global properties available to child components of the 
-// · cloud object.
-
+// · 
 import { defineStore } from "pinia"
 
+
+// · 
 export const useCloudObjectDiscussionStore = defineStore("cloudObjectDiscussion", {
     state: () => {
         return {
@@ -109,18 +107,11 @@ export const useCloudObjectDiscussionStore = defineStore("cloudObjectDiscussion"
     },
     actions: {
 
-        /**
-        * @param {number} page number to which I want to go.
-        * @description Sets a new page number, applying query parameters to fetch data once again.
-        */
         paginateDiscussions(page){
             this.pagination.page = page
             this.fetchDiscussions()
         },
 
-        /**
-        * @description This action is used to fetch the list of discussion
-        */
         fetchDiscussions(url) {
             this.loading = true
 

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

@@ -68,7 +68,7 @@ const props = defineProps({
         default: false,
         required: false
     },
-    showTickets:{
+    showSupportTickets: {
         type: Boolean,
         default: false,
         required: false
@@ -130,7 +130,7 @@ function safeEngineUrl() {
             </a>
             <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>
@@ -162,9 +162,9 @@ function safeEngineUrl() {
 
                 <!-- Tickets -->
                 <a 
-                    v-if="props.showTickets"
+                    v-if="props.showSupportTickets"
                     class="header-indicator" 
-                    @click="() => { storeLayout.showTickets = true }">
+                    @click="() => { storeLayout.showSupportTickets = true }">
                     <span :class="['ri-ticket-2-line', { 'is-active' : storeLayout.header.tickets > 0 }]">
                     </span>
                     <span class="count" v-if="storeLayout.header.tickets > 0">
@@ -187,7 +187,7 @@ function safeEngineUrl() {
                 <a 
                     v-if="props.showBell"
                     class="header-indicator" 
-                    @click="() => { if (storeLayout.header.notifications > 0 ) { storeLayout.showNotifications = true }}">
+                    @click="() => { if (!storeLayout.header.notifications ) { 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">

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,161 @@
+<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: i18n.t("lesli_support.tickets"),
+    lesli: i18n.t("lesli")
+}
+
+
+// · 
+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>