lesli 5.0.4 → 5.0.5

data/lib/vue/shared/dashboards/apps/edit.vue

@@ -0,0 +1,215 @@
+<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 { onMounted, inject } from "vue"
+import { useRouter, useRoute } from "vue-router"
+
+
+// · import stores
+import { useDashboard } from "Lesli/shared/stores/dashboard"
+
+
+// · import components
+import dashboardForm from "../components/form.vue"
+
+
+// ·
+const route = useRoute()
+const router = useRouter()
+const url = inject("url")
+
+
+// · implement stores
+const storeDashboard = useDashboard()
+
+
+// · defining props
+const props = defineProps({
+    components: {
+        type: Object,
+        require: false,
+        default: {}
+    }
+})
+
+
+// · translations
+const translations = {
+    main: I18n.t(`${props.engine}.dashboards`),
+    dashboards: I18n.t('core.dashboards'),
+    core: I18n.t('core.shared')
+}
+
+
+// · 
+const onDeleteDashboard = () => {
+    storeDashboard.deleteDashboard().then(()=> {
+        router.push(url[props.engine]('dashboards').s)
+    })
+}
+
+
+// · 
+function sizeIncrease(component) {
+    if (component.layout >= 12) {
+        return 
+    }
+    component.layout++
+}
+
+
+// · 
+function sizeDecrease(component) {
+    if (component.layout <= 3) {
+        return 
+    }
+    component.layout--
+}
+
+
+// · 
+function remove(component) {    
+    component._destroy = true
+}
+
+
+// · 
+onMounted(() => {
+    storeDashboard.setEngine(lesli.engine)
+    storeDashboard.getDashboard(route.params.id)
+    storeDashboard.getDashboardOptions()
+})
+
+</script>
+<template>
+    <lesli-application-container>
+        <lesli-header :title="storeDashboard.dashboard.name">
+            <lesli-button icon="list">
+                {{ translations.core.view_btn_list }}
+            </lesli-button>
+        </lesli-header>
+
+        <!-- Dashboard general configuration -->
+        <dashboard-form is-editable></dashboard-form>
+
+        <!-- Dashboard components -->
+        <template v-if="storeDashboard.dashboard.components">
+            <div class="columns is-multiline is-variable is-4 dashboard-components">
+                <template v-for="(component, index) in storeDashboard.dashboard.components" :key="index">
+                    <div :class="['column', 'is-' + component?.layout]">
+
+                        <!-- Dashboard widget component when in edition mode -->
+                        <div class="edit">
+
+                            <!-- Dashboard widget preview -->
+                            <component 
+                                :component.sync="component" 
+                                :is="props.components[component.component_id]">
+                            </component>
+
+                            <!-- Edition controls -->
+                            <div class="mt-4 mb-2">
+                                <div class="field has-addons is-justify-content-center">
+                                    <p class="control">
+                                        <button class="button is-small" @click="sizeDecrease(component)">
+                                            <span class="icon is-small">
+                                                <span class="material-icons">
+                                                    remove
+                                                </span>
+                                            </span>
+                                        </button>
+                                    </p>
+                                    <p class="control control-label has-text-centered">
+                                        size    
+                                    </p>
+                                    <p class="control">
+                                        <button class="button is-small" @click="sizeIncrease(component)">
+                                            <span class="icon is-small">
+                                                <span class="material-icons">
+                                                    add
+                                                </span>
+                                            </span>
+                                        </button>
+                                    </p>
+                                </div>
+
+                                <div class="field has-addons is-justify-content-center">
+                                    <p class="control">
+                                        <button class="button is-small" @click="sizeDecrease(component)">
+                                            <span class="icon is-small">
+                                                <span class="material-icons">
+                                                    chevron_left
+                                                </span>
+                                            </span>
+                                        </button>
+                                    </p>
+                                    <p class="control control-label has-text-centered px-4">
+                                        position
+                                    </p>
+                                    <p class="control">
+                                        <button class="button is-small" @click="sizeIncrease(component)">
+                                            <span class="icon is-small">
+                                                <span class="material-icons">
+                                                    chevron_right
+                                                </span>
+                                            </span>
+                                        </button>
+                                    </p>
+                                </div>
+
+                                <div class="has-text-centered">
+                                    <lesli-button small danger icon="delete" @click="remove(component)">
+                                        remove
+                                    </lesli-button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </template>
+
+    </lesli-application-container>
+</template>
+<style>
+.dashboard-components .edit {
+    border-radius: 6px;
+    padding: 1.2rem 1.4rem;
+    border: 1px solid #CCC;
+    background-color: #FFF8F8;
+}
+.dashboard-components .edit .control-label {
+    width: 100px;
+}
+</style>

data/lib/vue/{apps → shared}/dashboards/apps/index.vue

@@ -1,6 +1,5 @@
 <script setup>
 /*
-
 Lesli
 
 Copyright (c) 2023, Lesli Technologies, S. A.
@@ -18,18 +17,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
 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
 
-// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
 // · 
-
 */
 
 

data/lib/vue/{apps → shared}/dashboards/apps/show.vue

@@ -17,7 +17,7 @@ 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 platform.
+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.
@@ -45,32 +45,42 @@ const storeDashboard = useDashboard()
 
 // · 
 const props = defineProps({
-    engine: {
-        type: String, 
-        require: true
-    },
     components: {
         type: Object,
-        require: true
+        require: false,
+        default: {}
     }
 })
 
 
 // · 
 onMounted(() => {
-    storeDashboard.engine = props.engine
-    storeDashboard.getDashboard(props.engine)
+    storeDashboard.setEngine(lesli.engine)
+    storeDashboard.getDashboard()
 })
 
 </script>
 <template>
-    <application-component>
-        <div class="columns is-multiline is-variable is-4 dashboard-components">
-            <div 
-                v-for="(component, index) in storeDashboard.dashboard.components" :key="index"
-                :class="['column', 'is-' + component?.layout]">
-                <component :component.sync="component" :is="components[component.component_id]"></component>
+    <lesli-application-container>
+
+        <lesli-header :title="storeDashboard.dashboard.name"></lesli-header>
+
+        <template v-if="storeDashboard.dashboard.components">
+            <div class="columns is-multiline is-variable is-4 dashboard-components">
+                <template v-for="(component, index) in storeDashboard.dashboard.components" :key="index">
+                    <div :class="['column', 'is-' + component?.layout]">
+                        <component 
+                            :component.sync="component" 
+                            :is="props.components[component.component_id]">
+                        </component>
+                    </div>
+                </template>
             </div>
-        </div>
-    </application-component>
+        </template>
+
+        <lesli-empty 
+            v-if="!storeDashboard.dashboard.components || storeDashboard.dashboard.components.length <= 0" 
+            text="Empty dashboard">
+        </lesli-empty>
+    </lesli-application-container>
 </template>

data/lib/vue/{apps → shared}/dashboards/components/form.vue

@@ -56,17 +56,12 @@ const msg = inject("msg")
 const route = useRoute()
 
 
-// · defining props
+// · 
 const props = defineProps({
     isEditable: {
         type: Boolean,
-        required: false,
-        default: false,
-    },
-    engine: {
-        type: String,
-        required: true,
-    },
+        require: false
+    }
 })
 
 
@@ -81,6 +76,7 @@ const translations = {
 }
 
 
+// · 
 const default_options = {
     yes: { 
         label: translations.core.view_text_yes, 
@@ -93,6 +89,7 @@ const default_options = {
 }
 
 
+// · 
 const layout_options = [{
     label: '25%',
     value: 3
@@ -114,27 +111,21 @@ const layout_options = [{
 }]
 
 
-/**
- * @description This function is used to update the workflow information
- */
+// · 
 const onUpdate = () => {
     storeDashboard.updateDashboard()
 }
 
 
-/**
- * @description This function is used to create a new workflow
- */
+// · 
 const onCreate = () => {
     storeDashboard.postDashboard().then(()=> {
-        router.push(url[props.engine]('dashboards').s)
+        router.push(url[storeDashboard.engine]('dashboards').s)
     })
 }
 
 
-/**
-* @description This function is used to add a new component to dashboard
-*/
+// · 
 function addComponent(){
     msg.warning(translations.dashboards.messages_warning_save_changes_reminder)
     let new_component = {
@@ -155,9 +146,7 @@ function addComponent(){
 }
 
 
-/**
-* @description This function is used to select a component
-*/
+// · 
 function selectDashboardComponent(selected_component){
     if(storeDashboard.dashboard.components.find( component => component.id == selected_component.id)){
         storeDashboard.selected_dashboard_component = selected_component
@@ -165,9 +154,7 @@ function selectDashboardComponent(selected_component){
 }
 
 
-/**
-* @description This function is used to remove a component from the dashboard
-*/
+// · 
 function removeComponent(deleted_component){
     msg.warning(translations.dashboards.messages_warning_save_changes_reminder)
     storeDashboard.dashboard.components = storeDashboard.dashboard.components.filter((component)=> {
@@ -182,32 +169,30 @@ function removeComponent(deleted_component){
 }
 
 
-onMounted(() => {
-    storeDashboard.engine = props.engine
-    if (!props.isEditable){
-        storeDashboard.resetDashboard()
-    } else {
-        storeDashboard.fetchDashboard(route.params?.id)
-    }
-})
-
-// This function is used to delete a dashboard
+// · 
 function onDeleteDashboard() {
     storeDashboard.deleteDashboard().then(()=> {
         router.push(url[props.engine]('dashboards').s)
     })
 }
 
+
+// · 
+onMounted(() => {
+    if (!props.isEditable){
+        storeDashboard.resetDashboard()
+    }
+})
 </script>
 <template>
     <lesli-form class="mb-6" @submit="isEditable ? onUpdate() : onCreate()">
         <div class="columns">
+
+            <!-- Name -->
             <div class="column is-4">
-                <!-- Name -->
                 <div class="field">
                     <label class="label">
-                        {{translations.dashboards.column_name}}
-                        <sup class="has-text-danger">*</sup>
+                        {{ "translations.dashboards.column_name" }}
                     </label>
                     <div class="control">
                         <input class="input" type="text" v-model="storeDashboard.dashboard.name" required>
@@ -215,10 +200,10 @@ function onDeleteDashboard() {
                 </div>
             </div>
 
+            <!-- Role -->
             <div class="column is-4">
-                <!-- Role -->
                 <div class="field">
-                    <label class="label">{{ translations.dashboards.column_roles_id }}</label>
+                    <label class="label">{{ "translations.dashboards.column_roles_id" }}</label>
                     <div class="control">
                         <lesli-select
                             v-model="storeDashboard.dashboard.roles_id"
@@ -228,10 +213,10 @@ function onDeleteDashboard() {
                 </div>
             </div>
 
+            <!-- Default -->
             <div class="column is-4">
-                <!-- Default -->
                 <div class="field">
-                    <label class="label">{{ translations.dashboards.column_default }}</label>
+                    <label class="label">{{ "translations.dashboards.column_default" }}</label>
                     <lesli-select
                         v-model="storeDashboard.dashboard.default"
                         :options="default_options">
@@ -240,11 +225,12 @@ function onDeleteDashboard() {
             </div>
         </div>
 
-        <!-- Save button -->
         <div class="is-flex is-justify-content-space-between">
+
+            <!-- Components -->
             <div class="field">
                 <label class="label">
-                    {{ translations.dashboards.view_title_add_component }}
+                    {{ "translations.dashboards.view_title_add_component" }}
                 </label>
                 <div class="control">
                     <lesli-select
@@ -254,6 +240,8 @@ function onDeleteDashboard() {
                     </lesli-select>
                 </div>
             </div>
+
+            <!-- Save button -->
             <div class="buttons">
                 <lesli-button icon="save" :loading="storeDashboard.loading">
                     {{ translations.dashboards.view_btn_save_dashboard }}