nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

notification implementation into the toaster

Browse Source
This commit is contained in:
Čarodej
2022-03-12 08:40:35 +01:00
parent 0e45092795
commit 9e973b89ce
16 changed files with 294 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/broadcasting.php
View File

@@ -37,7 +37,7 @@ return [
'cluster' => env('PUSHER_APP_CLUSTER'), 'cluster' => env('PUSHER_APP_CLUSTER'),
'encrypted' => true, 'encrypted' => true,
'host' => env('PUSHER_APP_HOST'), 'host' => env('PUSHER_APP_HOST'),
'port' => 6001, 'port' => 8002,
'scheme' => env('APP_ENV') === 'local' ? 'http' : 'https', 'scheme' => env('APP_ENV') === 'local' ? 'http' : 'https',
], ],
], ],

BIN
public/audio/blop.wav Normal file
View File

Binary file not shown.

140
public/mix-manifest.json
View File

@@ -1,75 +1,75 @@
{ {
"/js/main.js": "/js/main.js", "/js/main.js": "/js/main.js",
"/chunks/request.js": "/chunks/request.js?id=9f35a28f17cf0081", "/chunks/request.js": "/chunks/request.js?id=33e1def79a2b3088",
"/chunks/request-upload.js": "/chunks/request-upload.js?id=143750d456a5d143", "/chunks/request-upload.js": "/chunks/request-upload.js?id=575487e7851294ba",
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=3c2fc454c3fce8d2", "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=19a0784e59d768ec",
"/chunks/status-check.js": "/chunks/status-check.js?id=1ce085bce8a9e959", "/chunks/status-check.js": "/chunks/status-check.js?id=6bae83a7e38d3b1c",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=957577e6eb9bae5d", "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=0d001d4505d2f5e9",
"/chunks/database.js": "/chunks/database.js?id=cd8195615624bf64", "/chunks/database.js": "/chunks/database.js?id=d5695176ac8edfb9",
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=1153d1ccda1626d3", "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=c58071cb9d14e595",
"/chunks/app-setup.js": "/chunks/app-setup.js?id=8f3130f31073813a", "/chunks/app-setup.js": "/chunks/app-setup.js?id=ad92e971daa0f86d",
"/chunks/admin-account.js": "/chunks/admin-account.js?id=3ca1c2c54a26a225", "/chunks/admin-account.js": "/chunks/admin-account.js?id=286b9872565b5e96",
"/chunks/shared.js": "/chunks/shared.js?id=061c5bef191b4eeb", "/chunks/shared.js": "/chunks/shared.js?id=8bc860799e9e02e9",
"/chunks/shared/browser.js": "/chunks/shared/browser.js?id=838aefcacf6b225b", "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=4646ca03695e5f24",
"/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=8cc8a58938f6a3c1", "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=ea864000ec2646d4",
"/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=dc1a48627066c81d", "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=92c75a6c77689046",
"/chunks/not-found.js": "/chunks/not-found.js?id=026c52609cff0249", "/chunks/not-found.js": "/chunks/not-found.js?id=36763aa314e00327",
"/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=250d923cb7001cf2", "/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=a3906226272982b1",
"/chunks/admin.js": "/chunks/admin.js?id=69e6ada3d3062506", "/chunks/admin.js": "/chunks/admin.js?id=da1e0f1255856e3a",
"/chunks/dashboard.js": "/chunks/dashboard.js?id=94dfb7c678309b6e", "/chunks/dashboard.js": "/chunks/dashboard.js?id=a554aec2e4a1d679",
"/chunks/invoices.js": "/chunks/invoices.js?id=0817b6e71b0da736", "/chunks/invoices.js": "/chunks/invoices.js?id=f89964a5a55ace45",
"/chunks/subscriptions.js": "/chunks/subscriptions.js?id=aa4ca6695a4c43f2", "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=62582c26b6288d7d",
"/chunks/pages.js": "/chunks/pages.js?id=b18e753a266e4d6e", "/chunks/pages.js": "/chunks/pages.js?id=38c76f5552161514",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=0122891b250ee8c7", "/chunks/page-edit.js": "/chunks/page-edit.js?id=dbdaf49f7c709ab9",
"/chunks/plans.js": "/chunks/plans.js?id=8950c28ea8d9273d", "/chunks/plans.js": "/chunks/plans.js?id=b5e1384c6e697927",
"/chunks/users.js": "/chunks/users.js?id=16f7770d2b8a7043", "/chunks/users.js": "/chunks/users.js?id=f41910a94ca4e36f",
"/chunks/user-create.js": "/chunks/user-create.js?id=5b1f7e752521c02a", "/chunks/user-create.js": "/chunks/user-create.js?id=c620606ec7eef9d7",
"/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=44bbf94f2267d262", "/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=5515d5a19259eadf",
"/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=cfb50d511c78ec04", "/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=94d6ef85f6a58265",
"/chunks/user.js": "/chunks/user.js?id=c12de27dc40aef36", "/chunks/user.js": "/chunks/user.js?id=7e567c0cb7f641d6",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=3c2bbf0a6ef97c1c", "/chunks/user-detail.js": "/chunks/user-detail.js?id=4b171a846c808667",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=e5c9e1b59264172a", "/chunks/user-storage.js": "/chunks/user-storage.js?id=835667dbe1fdf9b1",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=21154e4250e890b3", "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=6dbd7192bad160d9",
"/chunks/user-password.js": "/chunks/user-password.js?id=d6d72d8a0f08cac4", "/chunks/user-password.js": "/chunks/user-password.js?id=41e945a8e10bd4e4",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=b95a20df2fd09190", "/chunks/user-delete.js": "/chunks/user-delete.js?id=2184dc78049878ec",
"/chunks/plan.js": "/chunks/plan.js?id=2444730c1a0a42fc", "/chunks/plan.js": "/chunks/plan.js?id=37a04161ac1973ad",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=f75a62dc82dfd06d", "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=2cc70b67d00bbda1",
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=889139d2e1679331", "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=b1d3ffbb79e69310",
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=14cb6e7146563c8c", "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=4e9d13b048f1d8f0",
"/chunks/payments.js": "/chunks/payments.js?id=5ea275fedd8d638a", "/chunks/payments.js": "/chunks/payments.js?id=2a6dba57de536b0d",
"/chunks/payments/billings.js": "/chunks/payments/billings.js?id=a0757d9c2608d7ad", "/chunks/payments/billings.js": "/chunks/payments/billings.js?id=e8f23f4fb51d2bb2",
"/chunks/payments/settings.js": "/chunks/payments/settings.js?id=09b5ed53c184aefc", "/chunks/payments/settings.js": "/chunks/payments/settings.js?id=4e3da3de7b57a89a",
"/chunks/app-settings.js": "/chunks/app-settings.js?id=b0ca7cdad56e46fd", "/chunks/app-settings.js": "/chunks/app-settings.js?id=ac94675bfea2ac48",
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=47f92b72e275c2c8", "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=19980ab8fd75125c",
"/chunks/app-index.js": "/chunks/app-index.js?id=6255a58886c31bc6", "/chunks/app-index.js": "/chunks/app-index.js?id=d1722a2c5d30b142",
"/chunks/app-environment.js": "/chunks/app-environment.js?id=9d37862ac5c57c1e", "/chunks/app-environment.js": "/chunks/app-environment.js?id=7018c929bffb3a78",
"/chunks/app-others.js": "/chunks/app-others.js?id=918ccb0a9edff971", "/chunks/app-others.js": "/chunks/app-others.js?id=ecbfebacc4f269cb",
"/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=9e6099c710a1f774", "/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=11df2ce06e785892",
"/chunks/app-adsense.js": "/chunks/app-adsense.js?id=ce66e5cd4d33b77f", "/chunks/app-adsense.js": "/chunks/app-adsense.js?id=ec2fa21b02c99cb9",
"/chunks/app-server.js": "/chunks/app-server.js?id=000b75779c7b2df7", "/chunks/app-server.js": "/chunks/app-server.js?id=8964b98aee4cca69",
"/chunks/app-language.js": "/chunks/app-language.js?id=9fea501b5651db74", "/chunks/app-language.js": "/chunks/app-language.js?id=2ae6285274dacd0d",
"/chunks/homepage.js": "/chunks/homepage.js?id=cc55de7273bd9699", "/chunks/homepage.js": "/chunks/homepage.js?id=1b595dee57a8f161",
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=a20e623585f77df6", "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=f8c67b2a376ff03e",
"/chunks/contact-us.js": "/chunks/contact-us.js?id=5d02f74ec520ae00", "/chunks/contact-us.js": "/chunks/contact-us.js?id=3c7d7bba5e7fc172",
"/chunks/successfully-email-verified.js": "/chunks/successfully-email-verified.js?id=cadce663beaa7f88", "/chunks/successfully-email-verified.js": "/chunks/successfully-email-verified.js?id=261b02aed36069be",
"/chunks/successfully-email-send.js": "/chunks/successfully-email-send.js?id=f14b81ce738531a5", "/chunks/successfully-email-send.js": "/chunks/successfully-email-send.js?id=fe054c1e34d7863b",
"/chunks/sign-in.js": "/chunks/sign-in.js?id=5d8ffa33a3b2ef19", "/chunks/sign-in.js": "/chunks/sign-in.js?id=115555a1dd6fea58",
"/chunks/sign-up.js": "/chunks/sign-up.js?id=7ef0f23926cf5303", "/chunks/sign-up.js": "/chunks/sign-up.js?id=098d7f41b85066bf",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=283220c4946806d4", "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d6193ed0b07e7957",
"/chunks/create-new-password.js": "/chunks/create-new-password.js?id=59775b0f2612479a", "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=d00212636148a14b",
"/chunks/settings.js": "/chunks/settings.js?id=1f116c3d7c5ddd10", "/chunks/settings.js": "/chunks/settings.js?id=ed4299f11d4b0c3d",
"/chunks/profile.js": "/chunks/profile.js?id=ec621bd75eada0ee", "/chunks/profile.js": "/chunks/profile.js?id=1217f457145491ec",
"/chunks/settings-password.js": "/chunks/settings-password.js?id=3e094b17498f56df", "/chunks/settings-password.js": "/chunks/settings-password.js?id=b6704f4cbf14c67d",
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=cddf4c1f69a29992", "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=90ba712f3728443b",
"/chunks/billing.js": "/chunks/billing.js?id=9a21ec44813c1ac7", "/chunks/billing.js": "/chunks/billing.js?id=9bfdcd415e017b77",
"/chunks/platform.js": "/chunks/platform.js?id=755afc245020a06e", "/chunks/platform.js": "/chunks/platform.js?id=cafa4df1f4f3c021",
"/chunks/files.js": "/chunks/files.js?id=ea0f4500b46bef98", "/chunks/files.js": "/chunks/files.js?id=edc3a874b5605183",
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=5b98e7e6bd0ffb67", "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=3ba777e7f02d9b99",
"/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=98c0b0670116e2e7", "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=cf49fc14467d14b8",
"/chunks/trash.js": "/chunks/trash.js?id=74b178eb50c86823", "/chunks/trash.js": "/chunks/trash.js?id=664fe8a996fb5a37",
"/chunks/team-folders.js": "/chunks/team-folders.js?id=58560da0602c1d6c", "/chunks/team-folders.js": "/chunks/team-folders.js?id=0a671d7d78a374c2",
"/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=c7b7a7703f4f6d11", "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=8dcb286ee97a19d8",
"/chunks/invitation.js": "/chunks/invitation.js?id=4884f1794da246a6", "/chunks/invitation.js": "/chunks/invitation.js?id=d9f64dbf0aad8554",
"/css/tailwind.css": "/css/tailwind.css", "/css/tailwind.css": "/css/tailwind.css",
"/css/app.css": "/css/app.css" "/css/app.css": "/css/app.css"
} }

2
resources/js/App.vue
View File

@@ -20,7 +20,7 @@
</template> </template>
<script> <script>
import ToasterWrapper from './components/Others/Notifications/ToasterWrapper' import ToasterWrapper from './components/Others/Notifications/ToasterNotifications'
import CookieDisclaimer from './components/Others/CookieDisclaimer' import CookieDisclaimer from './components/Others/CookieDisclaimer'
import Spinner from './components/FilesView/Spinner' import Spinner from './components/FilesView/Spinner'
import Vignette from './components/Others/Vignette' import Vignette from './components/Others/Vignette'

14
resources/js/components/Notifications/Notification.vue
View File

@@ -1,21 +1,21 @@
<template> <template>
<article <article
class="delay-[3000ms] duration-700 transition-all relative z-20 mb-1.5 flex items-start space-x-4 rounded-xl p-2.5" class="delay-[3000ms] duration-700 transition-all relative z-[11] mb-1.5 flex items-start space-x-4 rounded-xl p-2.5"
:class="{'dark:bg-4x-dark-foreground bg-light-background/80': isUnread}" :class="{'dark:bg-4x-dark-foreground bg-light-background/80': isUnread}"
> >
<user-plus-icon <user-plus-icon
v-if="notification.data.attributes.type === 'team-invitation'" v-if="notification.data.attributes.category === 'team-invitation'"
size="20" size="22"
class="vue-feather text-theme shrink-0" class="vue-feather text-theme shrink-0"
/> />
<upload-cloud-icon <upload-cloud-icon
v-if="['file-request', 'remote-upload-done'].includes(notification.data.attributes.type)" v-if="['file-request', 'remote-upload-done'].includes(notification.data.attributes.category)"
size="20" size="22"
class="vue-feather text-theme shrink-0" class="vue-feather text-theme shrink-0"
/> />
<div> <div>
<b class="mb-1.5 block text-sm font-extrabold"> <b class="mb-1.5 block font-extrabold">
{{ notification.data.attributes.title }} {{ notification.data.attributes.title }}
</b> </b>
@@ -119,7 +119,7 @@ export default {
}) })
}, },
closeCenter() { closeCenter() {
this.$store.commit('TOGGLE_NOTIFICATION_CENTER') this.$store.commit('CLOSE_NOTIFICATION_CENTER')
}, },
}, },
created() { created() {

46
resources/js/components/Others/Notifications/Toaster.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<transition appear name="fade">
<div
class="relative w-full overflow-hidden rounded-xl bg-opacity-80 p-4 shadow-lg backdrop-blur-2xl"
:class="{
'bg-red-50 dark:bg-2x-dark-foreground': item.type === 'danger',
'bg-green-50 dark:bg-2x-dark-foreground': item.type === 'success',
}"
>
<!--Content-->
<div class="flex items-center justify-between">
<div class="flex items-start">
<div>
<check-icon v-if="item.type === 'success'" size="22" class="vue-feather dark:text-green-600 text-green-600" />
<x-icon v-if="item.type === 'danger'" size="22" class="vue-feather dark:text-red-600 text-red-600" />
</div>
<p
class="px-4 font-bold"
:class="{
'text-green-600': item.type === 'success',
'text-red-600': item.type === 'danger',
}"
>
{{ item.message }}
</p>
</div>
</div>
</div>
</transition>
</template>
<script>
import { CheckIcon } from 'vue-feather-icons'
export default {
name: 'Toaster',
components: {
CheckIcon,
},
props: [
'barColor',
'item',
],
}
</script>

101
resources/js/components/Others/Notifications/ToasterItem.vue
View File

@@ -1,101 +0,0 @@
<template>
<transition appear name="fade">
<div
v-if="isActive"
class="relative mt-4 w-full overflow-hidden rounded-xl bg-opacity-80 p-4 shadow-lg backdrop-blur-lg backdrop-filter md:w-96"
:class="{
'bg-red-50 dark:bg-2x-dark-foreground': isDanger,
'bg-green-50 dark:bg-2x-dark-foreground': isSuccess,
}"
>
<!--Content-->
<div class="flex items-center justify-between">
<div class="flex items-center">
<div>
<check-icon v-if="isSuccess" size="22" class="vue-feather dark:text-green-600 text-green-600" />
<x-icon v-if="isDanger" size="22" class="vue-feather dark:text-red-600 text-red-600" />
</div>
<p
class="px-4 font-bold"
:class="{
'text-green-600': isSuccess,
'text-red-600': isDanger,
}"
>
{{ item.message }}
</p>
</div>
<div @click="isActive = false" class="cursor-pointer p-2">
<x-icon size="16" class="vue-feather text-black opacity-50 dark:text-white" />
</div>
</div>
<!--Progress bar-->
<div class="absolute bottom-0 left-0 right-0">
<span
class="bar-animation block h-1 w-0"
:class="{
'bg-green-400': isSuccess,
'bg-red-400': isDanger,
}"
></span>
</div>
</div>
</transition>
</template>
<script>
import { XIcon, CheckIcon } from 'vue-feather-icons'
export default {
components: {
CheckIcon,
XIcon,
},
props: ['item'],
computed: {
isDanger() {
return this.item.type === 'danger'
},
isSuccess() {
return this.item.type === 'success'
},
},
data() {
return {
isActive: 1,
}
},
created() {
setTimeout(() => (this.isActive = 0), 6000)
},
}
</script>
<style lang="scss" scoped>
.bar-animation {
animation: progressbar 6s linear;
}
@keyframes progressbar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.fade-enter-active,
.fade-leave-active {
transition: 0.3s ease;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100%);
}
</style>

79
resources/js/components/Others/Notifications/ToasterNotifications.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<div
v-if="toasters.length || notifications.length"
class="fixed bottom-4 right-4 left-4 z-50 sm:w-[360px] sm:left-auto lg:bottom-8 lg:right-8"
>
<ToasterWrapper
v-for="notification in notifications"
:key="notification.data.id"
class="mt-4 overflow-hidden rounded-xl dark:bg-2x-dark-foreground bg-white/80 backdrop-blur-2xl shadow-xl"
bar-color="bg-theme"
>
<Notification :notification="notification" class="z-10 !mb-0 !px-4 !pt-4 !pb-5" />
</ToasterWrapper>
<ToasterWrapper
v-for="(toaster, i) in toasters"
:key="i"
class="mt-4 overflow-hidden rounded-xl shadow-xl"
:bar-color="getToasterColor(toaster)"
>
<Toaster :item="toaster" />
</ToasterWrapper>
</div>
</template>
<script>
import Notification from '../../Notifications/Notification'
import ToasterWrapper from './ToasterWrapper'
import {events} from '../../../bus'
import Toaster from './Toaster'
export default {
components: {
ToasterWrapper,
Notification,
Toaster,
},
data() {
return {
notifications: [],
toasters: [],
}
},
methods: {
getToasterColor(toaster) {
return {
danger: 'bg-red-400',
success: 'bg-green-400',
}[toaster.type]
}
},
created() {
events.$on('toaster', (toaster) => this.toasters.push(toaster))
events.$on('notification', (notification) => this.notifications.push(notification))
/*events.$emit('notification', {
data: {
type: 'file-request',
id: 'df954d23-f9d4-4677-85c8-abfd48aaa090',
attributes: {
action: {
type: 'route',
params: {
route: 'Files',
button: 'Show Files',
id: 'ae37b1d8-c147-489a-83ab-2a3c7cb86263',
},
},
created_at: '',
description: "Your file request for 'Multi Level Folder' folder was filled successfully.",
read_at: '',
title: 'File Request Filled',
category: 'file-request',
},
},
})*/
},
}
</script>

76
resources/js/components/Others/Notifications/ToasterWrapper.vue
View File

@@ -1,24 +1,64 @@
<template> <template>
<div v-if="notifications.length > 0" class="fixed bottom-4 right-4 left-4 z-50 md:left-auto lg:bottom-8 lg:right-8"> <transition v-if="isActive" appear name="fade">
<ToasterItem :item="item" v-for="(item, i) in notifications" :key="i" /> <div class="relative">
</div> <div @click="isActive = false" class="absolute z-[20] right-0 top-0 cursor-pointer p-2">
<x-icon size="16" class="vue-feather text-black opacity-10 dark:text-white" />
</div>
<slot />
<!--Progress bar-->
<div class="absolute bottom-0 left-0 right-0 z-20">
<span class="bar-animation block h-1 w-0" :class="barColor"></span>
</div>
</div>
</transition>
</template> </template>
<script> <script>
import ToasterItem from './ToasterItem' import { XIcon } from 'vue-feather-icons'
import { events } from '../../../bus'
export default { export default {
components: { name: 'Toast',
ToasterItem, props: [
}, 'barColor'
data() { ],
return { components: {
notifications: [], XIcon,
} },
}, data() {
created() { return {
events.$on('toaster', (notification) => this.notifications.push(notification)) isActive: 1,
}, }
} },
created() {
setTimeout(() => (this.isActive = 0), 6000)
},
}
</script> </script>
<style lang="scss" scoped>
.bar-animation {
animation: progressbar 6s linear both;
}
@keyframes progressbar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.fade-enter-active,
.fade-leave-active {
transition: 0.3s ease;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100%);
}
</style>

3
resources/js/store/modules/app.js vendored
View File

@@ -175,6 +175,9 @@ const mutations = {
TOGGLE_NOTIFICATION_CENTER(state) { TOGGLE_NOTIFICATION_CENTER(state) {
state.isVisibleNotificationCenter = !state.isVisibleNotificationCenter state.isVisibleNotificationCenter = !state.isVisibleNotificationCenter
}, },
CLOSE_NOTIFICATION_CENTER(state) {
state.isVisibleNotificationCenter = false
},
} }
const getters = { const getters = {

24
resources/js/store/modules/broadcasting.js vendored
View File

@@ -1,3 +1,5 @@
import {events} from "../../bus";
const defaultState = { const defaultState = {
isRunningConnection: false, isRunningConnection: false,
} }
@@ -8,8 +10,26 @@ const actions = {
commit('SET_RUNNING_COMMUNICATION') commit('SET_RUNNING_COMMUNICATION')
Echo.private(`App.Users.Models.User.${getters.user.data.id}`) Echo.private(`App.Users.Models.User.${getters.user.data.id}`)
.notification(() => { .notification((notification) => {
// TODO: call sound
// Play audio
new Audio('/audio/blop.wav').play();
// Call toaster notification
events.$emit('notification', {
data: {
type: notification.category,
id: notification.id,
attributes: {
action: notification.action,
description: notification.description,
title: notification.title,
category: notification.category,
},
},
})
// Reload user data to update notifications
dispatch('getAppData') dispatch('getAppData')
}); });
}, },

8
src/App/Console/Commands/DemoNotificationDataCommand.php
View File

@@ -1,5 +1,4 @@
<?php <?php
namespace App\Console\Commands; namespace App\Console\Commands;
use App\Users\Models\User; use App\Users\Models\User;
@@ -27,7 +26,6 @@ class DemoNotificationDataCommand extends Command
*/ */
protected $description = 'Set up demo notifications data'; protected $description = 'Set up demo notifications data';
/** /**
* Execute the console command. * Execute the console command.
*/ */
@@ -74,7 +72,7 @@ class DemoNotificationDataCommand extends Command
'data' => json_encode([ 'data' => json_encode([
'type' => 'team-invitation', 'type' => 'team-invitation',
'title' => 'New Team Invitation', 'title' => 'New Team Invitation',
'description' => "Jane Doe invite you to join into Team Folder.", 'description' => 'Jane Doe invite you to join into Team Folder.',
'action' => [ 'action' => [
'type' => 'invitation', 'type' => 'invitation',
'params' => [ 'params' => [
@@ -119,7 +117,7 @@ class DemoNotificationDataCommand extends Command
'params' => [ 'params' => [
'route' => 'Files', 'route' => 'Files',
'button' => 'Show Files', 'button' => 'Show Files',
'id' => $fileRequestFolder->id, 'id' => $fileRequestFolder->id,
], ],
], ],
]), ]),
@@ -206,7 +204,7 @@ class DemoNotificationDataCommand extends Command
// Create thumbnail only if image is larger than predefined image sizes // Create thumbnail only if image is larger than predefined image sizes
if ($intervention->getWidth() > $size['size']) { if ($intervention->getWidth() > $size['size']) {
// Generate thumbnail // Generate thumbnail
$intervention->resize($size['size'], null, fn($constraint) => $constraint->aspectRatio())->stream(); $intervention->resize($size['size'], null, fn ($constraint) => $constraint->aspectRatio())->stream();
// Store thumbnail to disk // Store thumbnail to disk
Storage::put("files/$user->id/{$size['name']}-{$file_name}", $intervention); Storage::put("files/$user->id/{$size['name']}-{$file_name}", $intervention);

2
src/App/Console/Kernel.php
View File

@@ -1,11 +1,11 @@
<?php <?php
namespace App\Console; namespace App\Console;
use App\Console\Commands\DemoNotificationDataCommand;
use Illuminate\Console\Scheduling\Schedule; use Illuminate\Console\Scheduling\Schedule;
use App\Console\Commands\SetupDevEnvironment; use App\Console\Commands\SetupDevEnvironment;
use App\Console\Commands\SetupProdEnvironment; use App\Console\Commands\SetupProdEnvironment;
use Support\Scheduler\Actions\ReportUsageAction; use Support\Scheduler\Actions\ReportUsageAction;
use App\Console\Commands\DemoNotificationDataCommand;
use Support\Scheduler\Actions\DeleteFailedFilesAction; use Support\Scheduler\Actions\DeleteFailedFilesAction;
use Illuminate\Foundation\Console\Kernel as ConsoleKernel; use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
use Support\Scheduler\Actions\DeleteUnverifiedUsersAction; use Support\Scheduler\Actions\DeleteUnverifiedUsersAction;

2
src/Domain/Notifications/Resources/NotificationResource.php
View File

@@ -18,7 +18,7 @@ class NotificationResource extends JsonResource
'id' => $this->id, 'id' => $this->id,
'type' => $this->type, 'type' => $this->type,
'attributes' => [ 'attributes' => [
'type' => $this->data['type'], 'category' => $this->data['category'],
'title' => $this->data['title'], 'title' => $this->data['title'],
'description' => $this->data['description'], 'description' => $this->data['description'],
'action' => $this->data['action'] ?? null, 'action' => $this->data['action'] ?? null,

2
src/Domain/Teams/Notifications/InvitationIntoTeamFolder.php
View File

@@ -59,7 +59,7 @@ class InvitationIntoTeamFolder extends Notification implements ShouldQueue
public function toArray(mixed $notifiable): array public function toArray(mixed $notifiable): array
{ {
return [ return [
'type' => 'team-invitation', 'category' => 'team-invitation',
'title' => 'New Team Invitation', 'title' => 'New Team Invitation',
'description' => "{$this->invitation->inviter->settings->name} invite you to join into Team Folder.", 'description' => "{$this->invitation->inviter->settings->name} invite you to join into Team Folder.",
'action' => [ 'action' => [

2
src/Domain/UploadRequest/Notifications/UploadRequestFulfilledNotification.php
View File

@@ -49,7 +49,7 @@ class UploadRequestFulfilledNotification extends Notification implements ShouldQ
public function toArray(mixed $notifiable): array public function toArray(mixed $notifiable): array
{ {
return [ return [
'type' => 'file-request', 'category' => 'file-request',
'title' => 'File Request Filled', 'title' => 'File Request Filled',
'description' => "Your file request for '{$this->uploadRequest->parent->name}' folder was filled successfully.", 'description' => "Your file request for '{$this->uploadRequest->parent->name}' folder was filled successfully.",
'action' => [ 'action' => [