lesli 5.0.0

data/lib/vue/apps/dashboards/components/form.vue

@@ -0,0 +1,267 @@
+<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 { inject, onMounted, watch } from "vue"
+
+
+// · import stores
+import { useDashboard } from "Lesli/shared/stores/dashboard"
+
+
+// · import vue router composable
+import { useRouter, useRoute } from "vue-router"
+
+
+// · implement stores
+const storeDashboard = useDashboard()
+
+
+// · initialize/inject plugins
+const router = useRouter()
+const url = inject("url")
+const msg = inject("msg")
+const route = useRoute()
+
+
+// · defining props
+const props = defineProps({
+    isEditable: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    engine: {
+        type: String,
+        required: true,
+    },
+})
+
+
+// · translations
+const translations = {
+    dashboards: I18n.t('core.dashboards'),
+    components: I18n.t('core.dashboard/components'),
+    core: I18n.t('core.shared'),
+    roles: I18n.t('core.roles'),
+    main: I18n.t(`${storeDashboard.engine}.dashboards`),
+    main_components: I18n.t(`${storeDashboard.engine}.dashboard/components`)
+}
+
+
+const default_options = {
+    yes: { 
+        label: translations.core.view_text_yes, 
+        value: true
+    },
+    no: {
+        label: translations.core.view_text_no,
+        value: false
+    }
+}
+
+
+const layout_options = [{
+    label: '25%',
+    value: 3
+}, {
+    label: '33%',
+    value: 4
+}, {
+    label: '50%',
+    value: 6
+}, {
+    label: '66%',
+    value: 8
+}, {
+    label: '75%',
+    value: 9
+}, {
+    label: '100%',
+    value: 12
+}]
+
+
+/**
+ * @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)
+    })
+}
+
+
+/**
+* @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 = {
+        id: `${storeDashboard.new_component_id}-${storeDashboard.default_component_configuration.index}`,
+        name: '',
+        component_id: storeDashboard.new_component_id.replaceAll("_", "-"),
+        layout: storeDashboard.default_component_configuration.layout,
+        index: storeDashboard.default_component_configuration.index++,
+        query_configuration: {
+            filters: {},
+            pagination: {}
+        },
+        custom_configuration: {
+            arrangement: {}
+        }
+    }
+    storeDashboard.dashboard.components.push(new_component)
+}
+
+
+/**
+* @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
+    }  
+}
+
+
+/**
+* @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)=> {
+        return component.id != deleted_component.id
+    })
+
+    // We check if the component id is a real number. If it is, de stage it to delete it when saved
+    if(! isNaN(deleted_component.id)){
+        deleted_component._destroy = true
+        storeDashboard.deleted_components.push(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)
+    })
+}
+
+</script>
+<template>
+    <lesli-form class="mb-6" @submit="isEditable ? onUpdate() : onCreate()">
+        <div class="columns">
+            <div class="column is-4">
+                <!-- Name -->
+                <div class="field">
+                    <label class="label">
+                        {{translations.dashboards.column_name}}
+                        <sup class="has-text-danger">*</sup>
+                    </label>
+                    <div class="control">
+                        <input class="input" type="text" v-model="storeDashboard.dashboard.name" required>
+                    </div>
+                </div>
+            </div>
+
+            <div class="column is-4">
+                <!-- Role -->
+                <div class="field">
+                    <label class="label">{{ translations.dashboards.column_roles_id }}</label>
+                    <div class="control">
+                        <lesli-select
+                            v-model="storeDashboard.dashboard.roles_id"
+                            :options="storeDashboard.options.roles"
+                        ></lesli-select>
+                    </div>
+                </div>
+            </div>
+
+            <div class="column is-4">
+                <!-- Default -->
+                <div class="field">
+                    <label class="label">{{ translations.dashboards.column_default }}</label>
+                    <lesli-select
+                        v-model="storeDashboard.dashboard.default"
+                        :options="default_options">
+                    </lesli-select>
+                </div>
+            </div>
+        </div>
+
+        <!-- Save button -->
+        <div class="is-flex is-justify-content-space-between">
+            <div class="field">
+                <label class="label">
+                    {{ translations.dashboards.view_title_add_component }}
+                </label>
+                <div class="control">
+                    <lesli-select
+                        v-model="storeDashboard.new_component_id"
+                        :options="storeDashboard.options.component_ids"
+                        @change="addComponent">
+                    </lesli-select>
+                </div>
+            </div>
+            <div class="buttons">
+                <lesli-button icon="save" :loading="storeDashboard.loading">
+                    {{ translations.dashboards.view_btn_save_dashboard }}
+                </lesli-button> 
+                <lesli-button danger icon="delete" @click="onDeleteDashboard">
+                    {{ translations.dashboards.view_btn_delete_dashboard }}
+                </lesli-button>
+            </div>
+        </div>
+    </lesli-form>
+</template>

data/lib/vue/apps/dashboards/components/preview.vue

@@ -0,0 +1,172 @@
+<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, computed } from "vue"
+
+
+// · import lesli stores
+import { useDashboard } from "Lesli/shared/stores/dashboard"
+
+
+// · implement stores
+const storeDashboard = useDashboard()
+
+
+// · 
+const props = defineProps({
+    engine: {
+        type: String, 
+        require: true
+    },
+    components: {
+        type: Object,
+        require: true
+    }
+})
+
+
+// · 
+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
+}
+
+</script>
+<template>
+    <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]" v-if="!component._destroy">
+
+                <!-- 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>
+<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/workflows2/apps/actions/form.vue

@@ -0,0 +1,232 @@
+<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 { inject, watch, onMounted, ref } from "vue"
+import { useRouter, useRoute } from 'vue-router'
+
+
+// · import store
+import { useActions } from "Lesli/stores/shared/workflows/actions"
+import notificationForm from "./forms/notification-form.vue"
+import emailForm from "./forms/email-form.vue"
+import taskForm from "./forms/task-form.vue"
+import chatroomForm from "./forms/chatroom-form.vue"
+import cloudObjectFileForm from "./forms/cloud-object-file-form.vue"
+import cloudObjectCloneForm from "./forms/cloud-object-clone-form.vue"
+import sendCloudObjectFileForm from "./forms/send-cloud-object-file.vue"
+
+
+
+// · initialize/inject plugins
+const router = useRouter()
+const url = inject("url")
+
+
+// · defining props
+const props = defineProps({
+    isEditable: {
+        type: Boolean,
+        required: false,
+        default: false
+    }
+})
+
+
+// · implement stores
+const storeActions = useActions()
+
+// · defining translations
+const translations = {
+    core: I18n.t('core.shared'),
+    actions: I18n.t('core.workflow/actions')
+}
+
+onMounted(() => {
+    // · get workflow actions options
+    storeActions.getOptions()
+    storeActions.getUsers()
+    storeActions.getCloudObjectFileOptions()
+    storeActions.getTasksOptions()
+
+    if(!props.isEditable){
+        storeActions.reset()
+    }
+
+})
+
+const activeOptions = {
+    yes: { 
+        label: translations.core.view_text_yes, 
+        value: true
+    },
+    no: {
+        label: translations.core.view_text_no,
+        value: false
+    }
+}
+
+/**
+ * @description This function is used to update the action information
+ */
+ const onUpdate = () => {
+    storeActions.updateAction()
+}
+
+/**
+ * @description This function is used to create a new action
+ */
+const onCreate = () => {
+    storeActions.postAction()
+}
+
+
+</script>
+
+<template>
+    <form 
+        @submit.prevent="isEditable? onUpdate() : onCreate()"
+        v-if="!storeActions.loading">
+
+        <div class="columns is-marginless has-border-bottom">
+
+            <!-- Action name -->
+            <div class="column">
+                <label class="label">
+                    {{translations.actions.column_name}}
+                    <sup class="has-text-danger">*</sup>
+                </label>
+                
+                <div class="control">
+                    <input type="text" name="name" required class="input" v-model="storeActions.action.name" />
+                </div>
+            </div>
+
+            <!-- Active -->
+            <div class="column">
+                <label class="label">{{translations.actions.column_active}}</label>
+                <div class="control">
+                    <label :for="option.label" class="radio" v-for="option in activeOptions" :key="option">
+                        <input name="active" type="radio" :id="option.label" :value="option.value" v-model="storeActions.action.active"/>
+                        {{option.label}}
+                    </label>  
+                </div>
+            </div>
+
+            <!-- Execute inmediately -->
+            <div class="column">
+                <label class="label">
+                    {{ translations.actions.column_execute_immediately }}
+                </label>
+
+                <label class="checkbox">
+                    <input type="checkbox" v-model="storeActions.action.execute_immediately">
+                    <span v-if="storeActions.action.execute_immediately"> {{translations.core.view_text_yes}} </span>
+                    <span v-else> {{translations.core.view_text_no}} </span>
+                </label>                
+            </div>
+
+        </div>
+
+
+        <div class="columns is-marginless has-border-bottom">
+             <!-- Initial status -->
+            <div class="column">
+                <label class="label">{{ translations.actions.column_initial_status_id }}</label>
+                <div class="control">
+                    <lesli-select
+                        v-model="storeActions.action.initial_status_id"
+                        :options="storeActions.options['statuses']">
+                    </lesli-select>
+                </div>
+            </div>
+
+            <!-- Final status -->
+            <div class="column">
+                <label class="label">
+                    {{ translations.actions.column_final_status_id }}
+                    <sup class="has-text-danger">*</sup>
+                </label>
+
+                <div class="control">
+                    <lesli-select
+                        required
+                        v-model="storeActions.action.final_status_id"
+                        :options="storeActions.options['statuses']">
+                    </lesli-select>
+                </div>
+            </div>
+
+            <!-- Action type -->
+            <div class="column">
+                <label class="label">
+                    {{ translations.actions.column_action_type }}
+                    <sup class="has-text-danger">*</sup>
+                </label>
+                <div class="control">
+                    <lesli-select
+                        required
+                        v-model="storeActions.action.action_type"
+                        :options="storeActions.options['action_types']"
+                        :disabled="props.isEditable">
+                    </lesli-select>
+                    <span>{{ translations.actions.view_text_column_action_type_description }}</span>
+                </div>
+            </div>
+        </div>
+
+        <hr>
+
+        <notification-form v-if="storeActions.action.action_type == 'create_bell_notification'"></notification-form>
+        <email-form v-if="storeActions.action.action_type == 'send_core_email'"></email-form>
+        <task-form v-if="storeActions.action.action_type == 'create_focus_task'"></task-form>
+        <chatroom-form v-if="storeActions.action.action_type == 'send_talk_chatroom_message'"></chatroom-form>
+        <cloud-object-file-form v-if="storeActions.action.action_type == 'create_cloud_object_file'"></cloud-object-file-form>
+        <cloud-object-clone-form v-if="storeActions.action.action_type == 'cloud_object_clone'"></cloud-object-clone-form>
+        <send-cloud-object-file-form v-if="storeActions.action.action_type =='create_and_send_cloud_object_file'"></send-cloud-object-file-form>
+
+
+        <!-- Submit form button -->
+        <div class="columns is-marginless has-border-bottom">
+            <div class="column">
+                <lesli-button icon="save">
+                    save
+                </lesli-button>  
+            </div>
+        </div>
+    </form>
+
+</template>