lesli 5.0.0

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

@@ -0,0 +1,108 @@
+<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 { watch } from "vue"
+
+// · import store
+import { useCloudObjectDiscussionStore } from "Lesli/cloudobjects/stores/discussion"
+
+// · defining translations
+const translations = {
+    core: {
+        shared: I18n.t("core.shared"),
+    }
+}
+
+// · implement store
+const discussionStore = useCloudObjectDiscussionStore()
+
+watch(discussionStore.filters, (filters) => {
+
+    // · if the toolbar text is not empty, and the filters changed then search
+    if (discussionStore.stringToFind) {
+        discussionStore.search(discussionStore.stringToFind)
+    } else {
+        // · if the toolbar text is empty, fetch with the new filters
+        if (filters.showDiscussion) discussionStore.fetchDiscussions()
+        if (filters.showActivityLog) discussionStore.fetchActivityLogs()
+    }
+
+    // · if showDiscussion filter is false, then clear the discussions
+    if (!filters.showDiscussion) discussionStore.discussions = []
+
+    // · if showActivityLog filter is false, then clear the activity logs
+    if (!filters.showActivityLog) discussionStore.activityLogs = []
+})
+</script>
+
+<template>
+    <div class="discussion-filters mt-2">
+        
+        <!-- Discussion filter -->
+        <div class="discussion-filters-item">
+            <p class="mb-2">{{ translations.core.shared.view_text_discussions }}</p>
+            <lesli-toggle v-model="discussionStore.filters.showDiscussion"/>
+        </div>
+
+        <!-- Activity logs filter -->
+        <div class="discussion-filters-item">
+            <p class="mb-2">{{ translations.core.shared.view_text_activity_logs }}</p>
+            <lesli-toggle v-model="discussionStore.filters.showActivityLog"/>
+        </div>
+        
+        <div class="discussion-filters-item mt-5">
+            <lesli-select
+                :options="[
+                    {
+                        label: '10',
+                        value: 10
+                    }, {
+                        label: '15',
+                        value: 15
+                    }, {
+                        label: '30',
+                        value: 30
+                    }, {
+                        label: '50',
+                        value: 50
+                    },
+                ]"
+                v-model="discussionStore.filters.per_page"
+                @change="discussionStore.fetchDiscussions()">
+            </lesli-select>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,130 @@
+<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 { ref, computed } from "vue"
+
+// · import store
+import { useCloudObjectDiscussionStore } from "Lesli/cloudobjects/stores/discussion"
+
+// · defining props
+const props = defineProps({
+    isReply: {
+        type: Boolean,
+        default: false,
+    },
+    mainDiscussion: {
+        type: Object,
+        default: null,
+    },
+});
+
+// · defining emits
+const emit = defineEmits(["onAddComment"])
+
+// · defining translations
+const translations = {
+    core: {
+        shared: I18n.t("core.shared"),
+    }
+}
+
+// · implement stores
+const discussionStore = useCloudObjectDiscussionStore()
+
+// · comment to add a new discussion
+const comment = ref(null)
+
+// · component's title
+const title = computed(() => props.isReply ? translations.core.shared.view_text_reply : translations.core.shared.view_text_add_new_comment)
+
+// · button's text
+const buttonText = computed(() => props.isReply ? translations.core.shared.view_btn_add_reply : translations.core.shared.view_btn_add_comment)
+
+/**
+ * @description function to be called when the user clicks on the 'Add Comment' or 'Add Reply' button
+ */
+const onAddComment = () => {
+    if (!comment.value) return
+
+    // · the discussion model to be used for adding a new discussion
+    let discussionModel = `${discussionStore.utils.singularize(discussionStore.cloudObject)}_discussion`
+
+    const payload = {}
+
+    if (props.isReply) {
+        // · add the discussion id to the payload when is a reply
+        payload[discussionModel] = {
+            content: comment.value,
+            discussion_parent_id: props.mainDiscussion.id
+        }
+    } else {
+        // · payload for a basic discussion
+        payload[discussionModel] = {
+            content: comment.value
+        }
+    }
+
+    // · add a new discussion
+    discussionStore.createDiscussion(payload)
+    
+    // · emit event after adding a new discussion
+    emit("onAddComment")
+
+    // · clear the comment
+    comment.value = null
+}
+</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="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>
+    </div>
+</template>

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

@@ -0,0 +1,98 @@
+<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 { useCloudObjectDiscussionStore } from "Lesli/cloudobjects/stores/discussion"
+
+// · import components
+import DiscussionNew from "Lesli/cloudobjects/components/discussion/new.vue"
+import DiscussionContent from "Lesli/cloudobjects/components/discussion/content.vue"
+import DiscussionFilters from "Lesli/cloudobjects/components/discussion/filters.vue"
+
+// · defining translations
+const translations = {
+    core: {
+        shared: I18n.t("core.shared"),
+    }
+}
+
+// · implement store
+const discussionStore = useCloudObjectDiscussionStore()
+
+// · 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,
+    },
+    onlyDiscussions: {
+        type: Boolean,
+        required: false,
+        default: false
+    }
+});
+
+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()
+})
+</script>
+
+<template>
+    <div class="p-2 discussion">
+        <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>
+        <discussion-content></discussion-content>
+    </div>
+</template>

data/lib/vue/apps/cloudobjects/file/grid.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 · 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, ref } from "vue";
+
+// · import store
+import { useCloudObjectFileStore } from "Lesli/cloudobjects/stores/file.js";
+import { useLayout } from "Lesli/shared/stores/layout";
+
+// · implement store
+const store = useCloudObjectFileStore();
+const storeLayout = useLayout();
+
+// · defining translations
+const translations = {
+    core: {
+        shared: I18n.t("core.shared"),
+    },
+};
+
+// . Controls whether the modal is displayed
+const showModal = ref(false);
+// . Stores the currently displayed file
+const currentFile = ref(null);
+// . Stores the index of the currently displayed file
+const currentIndex = ref(0)
+
+/**
+ * @description function that is called when the user click on the new file button.
+ */
+const onClickNewFile = () => {
+    storeLayout.showFiles = !storeLayout.showFiles;
+};
+
+/**
+ * @description open the modal and set the current file and its index
+ */
+const openModal = (file) => {
+    currentFile.value = file
+    currentIndex.value = store.files.indexOf(file)
+    showModal.value = true
+};
+
+/**
+ * @description display the previous image in the array of files
+ */
+const prevImage = () => {
+    if (currentIndex.value > 0) {
+        currentIndex.value -= 1
+        currentFile.value = store.files[currentIndex.value]
+      }
+}
+
+/**
+ * @description display the next image in the array of files
+ */
+const nextImage = () => {
+    if (currentIndex.value < store.files.length - 1) {
+        currentIndex.value += 1
+        currentFile.value = store.files[currentIndex.value]
+    }
+}
+
+/**
+ * @description delete image and close modal
+ */
+const deleteImage = () => {
+    store.deleteFile(currentFile.value.id)
+    currentFile.value = null
+    currentIndex.value = 0
+    showModal.value = false
+}
+
+onMounted(() => {
+    // · fetch the files from server
+    store.fetchFiles();
+});
+</script>
+
+<template>
+    <div class="grid-container">
+        <div class="file-container" v-for="file in store.files" :key="file">
+            <img
+                @click="openModal(file)"
+                :src="store.getUrl(file.id)"
+                :alt="file.name"
+                v-if="file.file_type == 'image'"
+            />
+            <video controls v-else-if="file.file_type == 'video'">
+                <source :src="store.getUrl(file.id)" type="video/mp4" />
+            </video>
+            <iframe
+                v-else-if="file.file_type == 'document'"
+                id="preview-document"
+                :src="store.getUrl(file.id)"
+                frameborder="0"
+            ></iframe>
+
+            <button
+                class="delete-button"
+                @click="store.deleteFile(file.id)"
+                type="button"
+            >
+                <span class="icon">
+                    <span class="material-icons">delete</span>
+                </span>
+            </button>
+        </div>
+        <div class="add-button">
+            <button
+                type="button"
+                class="add-file button"
+                @click="onClickNewFile"
+            >
+                <span class="icon">
+                    <span class="material-icons">add_box</span>
+                </span>
+                <span>
+                    {{ translations.core.shared.view_title_new_file }}
+                </span>
+            </button>
+        </div>
+
+        <Teleport to="body">
+            <div v-if="showModal" @click="showModal = false" class="file-backdrop"></div>
+            <div v-if="showModal" class="file-modal">
+                <img
+                    :src="store.getUrl(currentFile.id)"
+                    :alt="currentFile.name"
+                    v-if="currentFile.file_type == 'image'"
+                />
+
+                <video controls v-else-if="currentFile.file_type == 'video'">
+                    <source :src="store.getUrl(currentFile.id)" type="video/mp4" />
+                </video>
+
+                <iframe
+                    v-else-if="currentFile.file_type == 'document'"
+                    id="preview-document"
+                    :src="store.getUrl(currentFile.id)"
+                    frameborder="0"
+                ></iframe>
+                <div class="buttons">
+                    <button @click="deleteImage" class="button is-primary is-danger">
+                        <span class="icon">
+                            <span class="material-icons">
+                                delete
+                            </span>
+                        </span>
+                        <span>Delete</span>
+                    </button>
+                    <div class="nav-buttons">
+
+                        <button @click="prevImage" class="button is-primary">
+                            <span class="icon">
+                                <span class="material-icons">
+                                    arrow_back
+                                </span>
+                            </span>
+                            <span>Previous image</span>
+                        </button>
+                        <button @click="nextImage" class="button is-primary">
+                            <span>Next image</span>
+                            <span class="icon">
+                                <span class="material-icons">
+                                    arrow_forward
+                                </span>
+                            </span>
+                            
+                        </button>
+                    </div>
+                </div>
+                <button  @click="showModal = false" class="button is-primary btn-close">
+                    <span class="icon">
+                        <span class="material-icons">
+                            close
+                        </span>
+                    </span>
+                </button>
+            </div>
+        </Teleport>
+    </div>
+</template>

data/lib/vue/apps/cloudobjects/file/list.vue

@@ -0,0 +1,106 @@
+<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, ref } from "vue"
+
+// · import store
+import { useCloudObjectFileStore } from "Lesli/cloudobjects/stores/file.js"
+import { useLayout } from "Lesli/shared/stores/layout"
+
+// · implement store
+const store = useCloudObjectFileStore()
+const storeLayout = useLayout()
+
+// · defining translations
+const translations = {
+    core: {
+        shared: I18n.t("core.shared"),
+    }
+}
+
+// · columns of the table
+const columns = [
+    {
+        field: "name",
+        label: translations.core.shared.column_files_name,
+    },
+    {
+        field: "file_type",
+        label: translations.core.shared.column_files_file_type,
+    },
+    {
+        field: "created_at",
+        label: translations.core.shared.column_created_at,
+    },
+]
+
+
+/**
+* @description function that is called when the user click on the new file button.
+*/
+const onClickNewFile = () => {
+    storeLayout.showFiles = !storeLayout.showFiles
+}
+
+onMounted(() => {
+    // · fetch the files from server
+    store.fetchFiles()
+})
+
+</script>
+
+<template>
+
+    <div class="is-flex is-justify-content-end mb-4">
+        <button class="button is-primary"  type="button" @click="onClickNewFile">
+            <span >
+                {{ translations.core.shared.view_title_new_file }}
+            </span>
+            <span class="icon is-small">
+                <span class="material-icons">add</span>
+            </span>
+        </button>
+    </div>
+
+    <lesli-table :columns="columns" :records="store.files">
+        <template #options="record">
+                <a class="dropdown-item" :href="`${store.getUrl(record.value)}.json`" target="_blank">{{ translations.core.shared.view_btn_view_file }}</a>
+                <a class="dropdown-item" :href="`${store.getUrl(record.value)}.json?download=true`" download>{{ translations.core.shared.view_btn_download }}</a>
+                <a class="dropdown-item" @click="store.deleteFile(record.value)">{{ translations.core.shared.view_btn_delete }}</a>
+        </template>
+    </lesli-table>
+
+</template>