jk wrote a reply+100 XP
4mos ago
Thanks for the reply Shiv. How would you display a toast notification? The only way I could think of is passing query parameters.
const props = defineProps({
csvs: {
type: Object,
required: true,
},
success: {
type: [Boolean, null],
required: false,
},
updatedCsv: {
type: Object,
required: false,
},
});
useEchoNotification(
`App.Models.User.${userId.value}`,
(notification) => {
router.get(
route("csvs.index"),
{
only: ['users'],
success: true,
csvId: notification.csvId,
},
{
preserveScroll: true,
},
);
},
"App.Notifications.ExportDatabaseCompleted",
);
return Inertia::render('csvs/Index', [
'csvs' => CsvResource::collection(Csv::latest()->paginate(15)),
'success' => $request->query('success'),
'updatedCsv' => Csv::find($request->query('csvId')),
]);
jk started a new conversation+100 XP
4mos ago
The csvs.index page displays a table of csvs with path, completed status, and download link. Csvs can have their export completed with all attributes or export incomplete with none of the attributes. When a Notification broadcast is received, the payload contains a csv's attributes needed to update an incomplete csv. The problem I have is understanding how to update my csvs props data when a notification is broadcast, without a page reload. From my understanding of Vue, you are not supposed to modify the props data.
// csvs.index page
const props = defineProps({
csvs: {
type: Object,
required: true,
},
});
useEchoNotification(
`App.Models.User.${userId.value}`,
(notification) => {
// modify the csv with payload
console.log(notification.csvId);
console.log(notification.userId);
console.log(notification.path);
},
"App.Notifications.ExportDatabaseCompleted",
);
<template v-for="csv in csvs.data" :key="csv.id">
<TableText>{{ csv.id }}</TableText>
<TableText>{{ csv.path }}</TableText>
The overall workflow may be irrelevant to the question. User requests a csv export. A csv export Job is queued up, and the user is redirected immediately to csvs.index page. After the job is completes or fails, a ExportDatabaseCompleted Notification is broadcast. The Notification carries a csv payload with the mentioned id, user id, path, etc. The Notification is caught in the csvs.index page.
Thank you for any help offered.