lesli_bell 0.1.0

data/lib/vue/apps/announcements/index.vue

@@ -0,0 +1,124 @@
+<script setup>
+/*
+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 vue tools
+import { ref, reactive, onMounted, watch, computed, inject } from "vue"
+import { useRouter, useRoute } from 'vue-router'
+
+// · import lesli stores
+import { useBellAnnouncement } from "LesliBell/stores/announcement"
+
+// · initialize/inject plugins
+const router = useRouter()
+const msg = inject("msg")
+const url = inject("url")
+const date = inject("date")
+
+
+// · implement stores
+const storeAnnouncement = useBellAnnouncement()
+
+
+// ·
+const translations = {
+    core: {
+        shared: I18n.t("core.shared")
+    },
+    bell: {
+        announcements: I18n.t("bell.announcements")
+    }
+}
+
+const columns = [{
+    field: "id",
+    label: translations.bell.announcements.column_id
+}, {
+    field: "name",
+    label: translations.bell.announcements.column_name
+}, {
+    field: "start_at",
+    label: translations.bell.announcements.column_start_at
+}, {
+    field: "end_at",
+    label: translations.bell.announcements.column_end_at
+}]
+
+// · initializing
+onMounted(() => {
+    storeAnnouncement.fetch()
+})
+
+</script>
+<template>
+    <section class="application-component">
+        <lesli-header :title="translations.bell.announcements.view_title_notifications">
+            <lesli-button :to="url.bell('announcements/new')" icon="add">
+                {{ translations.core.shared.view_btn_add }}
+            </lesli-button>
+        </lesli-header>
+
+        <lesli-table
+            :columns="columns"
+            :records="storeAnnouncement.records"
+            :pagination="storeAnnouncement.pagination"
+            @paginate="storeAnnouncement.paginate">
+            <template #id="{ value, record }">
+                <span :class="['tag', 'is-medium', 'is-' + record.category]">
+                    {{ value }}
+                </span>
+            </template>
+            <template #subject="{ column, value, record }">
+                <h4>{{ record.subject }}</h4>
+                <p>{{ record.body }}</p>
+            </template>
+            <template #url="{ value }">
+                <a :href="value" class="has-text-link hover">{{ value }}</a>
+            </template>
+            <template #start_at="{ value }">
+                <p>
+                    <span class="icon-text">
+                        <span class="icon">
+                            <span class="has-text-grey material-icons">
+                                calendar_month
+                            </span>
+                        </span>
+                        <span>
+                            {{ date.date(value) }}
+                        </span>
+                    </span>
+                </p>
+            </template>
+            <template #end_at="{ value }">
+                <p>
+                    <span class="icon-text">
+                        <span class="icon">
+                            <span class="has-text-grey material-icons">
+                                calendar_month
+                            </span>
+                        </span>
+                        <span>
+                            {{ date.date(value) }}
+                        </span>
+                    </span>
+                </p>
+            </template>
+        </lesli-table>
+
+    </section>
+</template>

data/lib/vue/apps/announcements/new.vue

@@ -0,0 +1,48 @@
+<script setup>
+/*
+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 vue tools
+import { onMounted } from "vue"
+
+// · import components
+import ComponentAnnouncementForm from "LesliBell/apps/announcements/components/form.vue"
+
+// ·
+const translations = {
+    core: {
+        shared: I18n.t("core.shared")
+    },
+    bell: {
+        notifications: I18n.t("bell.notifications"),
+        announcements: I18n.t("bell.announcements")
+    }
+}
+
+// · initializing
+onMounted(() => {})
+
+</script>
+<template>
+    <section class="application-component">
+
+        <lesli-header :title="translations.bell.announcements.view_title_new_announcement"></lesli-header>
+
+        <component-announcement-form></component-announcement-form>
+
+    </section>
+</template>

data/lib/vue/apps/notifications/components/notification-form.vue

@@ -0,0 +1,149 @@
+<script setup>
+/*
+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 vue tools
+import { onMounted, inject } from "vue"
+
+// · import store
+import { useBellNotification } from "LesliBell/stores/notification"
+
+// · import vue router composable
+import { useRouter, useRoute } from "vue-router"
+
+// · implement store
+const notificationStore = useBellNotification()
+
+// . Defining translations
+const translations = {
+    core: {
+        shared: I18n.t("core.shared")
+    },
+    bell: {
+        notifications: I18n.t("bell.notifications")
+    }
+}
+
+// · initialize/inject plugins
+const router = useRouter()
+
+// · initializing
+onMounted(() => {
+    notificationStore.getUsers()
+    notificationStore.getRoles()
+})
+
+/**
+ * @description This function is used to create a new notification
+ */
+const onCreate = () => {
+    notificationStore.createNotification().then(() => {
+        router.push(notificationStore.url.bell('notifications').toString())
+    })
+}
+
+</script>
+
+<template>
+    <lesli-loading v-if="notificationStore.loading"></lesli-loading>
+    <form @submit.prevent="onCreate" class="card py-4" v-else>
+        <div class="columns is-marginless has-border-bottom">
+            <div class="column is-4">
+                <label class="label">
+                    {{ translations.bell.notifications.column_subject }}
+                    <sup class="has-text-danger">*</sup>
+                </label>
+            </div>
+            <div class="column">
+                <div class="control is-clearfix">
+                    <input
+                        type="text"
+                        autocomplete="on"
+                        name="subject"
+                        required
+                        class="input"
+                        v-model="notificationStore.record.subject"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <div class="columns is-marginless has-border-bottom">
+            <div class="column is-4">
+                <label class="label">
+                    {{ translations.bell.notifications.column_body }}
+                </label>
+            </div>
+            <div class="column">
+                <textarea
+                    name="body"
+                    rows="3"
+                    maxlength="500"
+                    class="textarea"
+                    v-model="notificationStore.record.body"
+                ></textarea>
+            </div>
+        </div>
+
+        <div class="columns is-marginless has-border-bottom">
+            <div class="column is-4">
+                <label class="label">
+                    {{ translations.bell.notifications.view_text_receiver_users }}
+                </label>
+            </div>
+            <div class="column">
+                <div class="control is-clearfix">
+                    <lesli-input-tag
+                        v-model="notificationStore.receiverUsers"
+                        :placeholder="translations.core.shared.view_placeholder_search"
+                        :options="notificationStore.users"
+                        :filterFields="['name', 'email']"
+                        showField="email"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <div class="columns is-marginless has-border-bottom">
+            <div class="column is-4">
+                <label class="label">
+                    {{ translations.bell.notifications.view_text_receiver_roles }}
+                </label>
+            </div>
+            <div class="column">
+                <div class="control is-clearfix">
+                    <lesli-input-tag
+                        v-model="notificationStore.receiverRoles"
+                        :placeholder="translations.core.shared.view_placeholder_search"
+                        :options="notificationStore.roles"
+                        :filterFields="['name']"
+                        showField="name"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <div class="px-3 ql-bg-blue">
+            <button
+                type="submit"
+                class="button is-fullwidth has-text-centered submit-button is-primary"
+            >
+                {{ translations.core.shared.view_btn_save }}
+            </button>
+        </div>
+    </form>
+</template>

data/lib/vue/apps/notifications/index.vue

@@ -0,0 +1,129 @@
+<script setup>
+/*
+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 vue tools
+import { ref, reactive, onMounted, watch, computed, inject } from "vue"
+import { useRouter, useRoute } from 'vue-router'
+
+
+// · initialize/inject plugins
+const router = useRouter()
+const msg = inject("msg")
+const url = inject("url")
+const date = inject("date")
+
+
+// · import lesli stores
+import { useBellNotification } from "LesliBell/stores/notification"
+
+
+// · implement stores
+const storeNotification = useBellNotification()
+
+
+// ·
+const translations = {
+    core: {
+        shared: I18n.t("core.shared")
+    },
+    bell: {
+        notifications: I18n.t("bell.notifications")
+    }
+}
+
+const columns = [{
+    field: "id",
+    label: "ID"
+}, {
+    field: "subject",
+    label: "Notification"
+}, {
+    field: "url",
+    label: "Link"
+}, {
+    field: "status",
+    label: "Status",
+    align: "center"
+}, {
+    field: "created_at",
+    label: "Sent at"
+}]
+
+// · initializing
+onMounted(() => {
+    storeNotification.fetch()
+})
+
+</script>
+<template>
+    <section class="application-component">
+
+        <lesli-header :title="translations.bell.notifications.view_title_notifications">
+            <lesli-button :to="url.bell('notifications/new')" icon="add">
+                {{ translations.core.shared.view_btn_add }}
+            </lesli-button>
+        </lesli-header>
+
+        <lesli-table
+            :columns="columns"
+            :records="storeNotification.records"
+            :pagination="storeNotification.pagination"
+            @paginate="storeNotification.paginate">
+            <template #id="{ value, record }">
+                <span :class="['tag', 'is-medium', 'is-' + record.category]">
+                    {{ value }}
+                </span>
+            </template>
+            <template #subject="{ column, value, record }">
+                <h4>{{ record.subject }}</h4>
+                <p>{{ record.body }}</p>
+            </template>
+            <template #url="{ value }">
+                <a :href="value" class="has-text-link hover">{{ value }}</a>
+            </template>
+            <template #created_at="{ value }">
+                <p>
+                    <span class="icon-text">
+                        <span class="icon">
+                            <span class="has-text-grey material-icons">
+                                calendar_month
+                            </span>
+                        </span>
+                        <span>
+                            {{ date.date(value) }}
+                        </span>
+                    </span>
+                </p>
+                <p>
+                    <span class="icon-text">
+                        <span class="icon">
+                            <span class="has-text-grey material-icons">
+                                schedule
+                            </span>
+                        </span>
+                        <span>
+                            {{ date.time(value) }}
+                        </span>
+                    </span>
+                </p>
+            </template>
+        </lesli-table>
+
+    </section>
+</template>

data/lib/vue/apps/notifications/new.vue

@@ -0,0 +1,45 @@
+<script setup>
+/*
+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 vue tools
+import { onMounted } from "vue"
+
+// · import components and lazy loading implementation
+import ComponentNotificationForm from "LesliBell/apps/notifications/components/notification-form.vue"
+
+
+// ·
+const translations = {
+    core: {
+        shared: I18n.t("core.shared")
+    },
+    bell: {
+        notifications: I18n.t("bell.notifications")
+    }
+}
+
+</script>
+<template>
+    <section class="application-component">
+
+        <lesli-header :title="translations.bell.notifications.view_title_new_notification"></lesli-header>
+
+        <component-notification-form></component-notification-form>
+
+    </section>
+</template>

data/lib/vue/stores/announcement.js

@@ -0,0 +1,142 @@
+/*
+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 { useRouter } from 'vue-router'
+
+const translations = {
+    core: {
+        shared: I18n.t("core.shared")
+    },
+    bell: {
+        notifications: I18n.t("bell.announcements")
+    }
+}
+
+
+export const useBellAnnouncement = defineStore("bell.Announcement", {
+    state: () => {
+        return {
+            router: useRouter(),
+            loading: false,
+            users: [],
+            roles: [],
+            filteredUsers: [],
+            filteredRoles: [],
+            record: {
+                name: null,
+                category: null,
+                url: null,
+                base_path: null,
+                message: null,
+                status: null,
+                start_at: null,
+                end_at: null,
+                can_be_closed: null,
+            },
+            receiverUsers: [],
+            receiverRoles: [],
+            records: [],
+            pagination: {
+                page: 1
+            },
+            index: { 
+                pagination: {},
+                records: []
+            }
+        }
+    },
+    actions: {
+
+        /**
+        * @description This action is used to add pagination to announcement index
+        * @param {Integer} page the actual page showing in the index
+        */
+        paginate(page) {
+            this.pagination.page = page
+            this.fetch()
+        },
+
+        /**
+         * @description This action is used to fetch all the announcements for the current user
+         */
+        fetch() {
+            this.http.get(
+                this.url.bell("announcements")
+                .paginate(this.pagination.page)
+            ).then(result => {
+                this.pagination = result.pagination
+                this.records = result.records
+            })
+        },
+
+        /**
+         * @description This action is used to create a new announcement
+         */
+        post() {
+            this.loading = true
+            this.http.post(this.url.bell("announcements"), {
+                announcement: {
+                    ...this.record,
+                    user_receiver_emails: this.receiverUsers.map(user => user.email),
+                    role_receiver_names: this.receiverRoles.map(role => role.name),
+                }
+            }).then(() => {
+                this.msg.success(I18n.t("core.users.messages_success_operation"))
+                this.router.push(this.url.bell("announcements").s)
+            }).catch(error => {
+                this.msg.danger(I18n.t("core.shared.messages_danger_internal_error"))
+            }).finally(() => {
+                this.record = {}
+                this.receiverUsers = []
+                this.receiverRoles = []
+                this.loading = false
+            })
+        },
+
+        /**
+        * @description This action is used to get the list of users
+        */
+        getUsers() {
+            this.loading = true
+            this.http.get(this.url.admin('users/list')).then(result => {
+                this.users = result
+            }).catch(error => {
+                this.msg.danger(I18n.t("core.shared.messages_danger_internal_error"))
+            }).finally(() => {
+                this.loading = false
+            })
+        },
+
+        /**
+        * @description This action is used to get the list of roles
+        */
+        getRoles() {
+            this.loading = true
+            this.http.get(this.url.admin('roles/list')).then(result => {
+                this.roles = result
+            }).catch(error => {
+                this.msg.danger(I18n.t("core.shared.messages_danger_internal_error"))
+            }).finally(() => {
+                this.loading = false
+            })
+        },
+
+    }
+})