I have all that configured but my question is that, for example, from the back to the front, 100 data are paged. Do I have to send those 100 data to the socket so that the socket is listening to them and verifying in real time if there have been changes? In the back I have my controller I have several methods that page but in the front I only have pages, let's say 10-20, 50 or whatever I choose
This is a part of my controller
public function index(Request $request)
{
try {
$only_validated = $request->only_validated ?? null;
$payrollType = $request->input('payroll_status');
if (isset($payrollType) && $payrollType == 'in_progress') {
$payrolls = Payroll::with('processed', 'user')
->where('cat_payroll_status_id', CatPayrollStatus::IN_PROGRESS)
->where('cat_payroll_calculation_type_id', CatPayrollCalculationType::PAYROLL)
->get();
return response()->json([
'success' => true,
'payrolls' => $payrolls,
]);
} else {
$rowsPerPage = $request->input('rowsPerPage');
$search = $request->input('search');
$where_query = [
['cat_payroll_status_id', "!=", CatPayrollStatus::IN_PROGRESS],
['cat_payroll_calculation_type_id', '=', CatPayrollCalculationType::PAYROLL]
];
if ($only_validated) {
$where_query[] = ['cat_payroll_status_id', "=", CatPayrollStatus::VALIDATED];
}
$payrolls = Payroll::with('status', 'processed')->search($search)
->where($where_query)
->orderBy('created_at', 'desc')
->paginate($rowsPerPage == 0 ? 500 : $rowsPerPage);
//here i put the socket but idk if that is on right way
broadcast(new SocketPayroll($payrolls));
return response()->json([
'success' => true,
'payrolls' => $payrolls,
]);
}
} catch (\Exception $e) {
error_log($e->getMessage());
return response()->json([
'success' => false,
'message' => 'Error'
]);
}
}
this is my event for the socket
<?php
namespace App\Events;
use App\Models\Payroll;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class SocketPayroll implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public Payroll $payroll;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct($payrolls)
{
$this->payrolls = $payrolls;
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel('payrollUpdated');
}
}
on my table view i have this
export default {
mounted() {
// get initial data from server (1st page)
this.init()
this.setupEcho()
and in the same table view
destroyed() {
clearTimeout(this.timeout);
},
methods: {
setupEcho() {
window.Echo.channel('payrollUpdated')
.listen('SocketPayroll', (event) => {
if (event.data && event.data.length > 0) {
this.data = event.data;
console.log('Message received from the server.:', event.message);
}
});
},
async init() {
this.onRequest({
pagination: this.pagination,
filter: undefined
})
this.timeout = setTimeout(this.init, 100000);
},
showPayroll(id) {
this.$router.push(`/prepayroll/${id}/show`);
},
editPrePayroll(id) {
this.$router.push(`/prepayroll/${id}/edit`)
},
viewPrePayrollErrors(id) {
this.$router.push(`/prepayroll/${id}/errors`)
},
showPayrollReports(id) {
this.$router.push(`/prepayroll/${id}/reports`)
},
downloadPayroll(id, code) {
this.$q.loading.show();
console.log('code', code);
const idArray = [id];
const params = { ids: idArray, code };
DataService.exportExcelPayroll(params).then((response) => {
console.log('response', response);
if (response.success) {
notifySuccess();
this.$router.push(`/prepayroll/${idArray[0]}/reports`)
} else {
notifyError()
}
}).finally(() => {
this.$q.loading.hide();
});
},
downloadPayroll2(id, code) {
const params = { id }
DataService.exportExcel(params).then((response) => {
const linkUrl = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = linkUrl
link.setAttribute('download', `${code}.xlsx`)
document.body.appendChild(link)
link.click()
});
},
// eslint-disable-next-line no-unused-vars
deletePrePayroll(id, index) {
this.loading = true;
DataService.destroy({ params: { id } }).then((data) => {
if (data.success) {
notifySuccess();
this.data.splice(index, 1);
} else {
notifyError();
}
this.loading = false;
}).catch(() => {
this.loading = false
})
},
executePrePayroll(id) {
this.$q.loading.show();
DataService.execute(id).then((response) => {
if (response.success) {
notifySuccess();
this.onRequest({
pagination: this.pagination,
filter: undefined
})
} else {
notifyError();
}
}).finally(() => {
this.$q.loading.hide();
})
},
blockPrePayroll(block, id) {
this.$q.loading.show();
const payload = {
is_blocked: block,
payroll_id: id
}
DataService.blockPrePayroll(payload).then(() => {
notifySuccess();
this.onRequest({
pagination: this.pagination,
filter: undefined
})
}).catch((err) => {
notifyError(err);
}).finally(() => {
this.$q.loading.hide();
})
},
onRequest(props) {
const { page, rowsPerPage } = props.pagination
const { search } = this
this.loading = true
DataService.index({ params: { page, rowsPerPage, search } }).then((payrolls) => {
this.data = payrolls.data
this.pagination.rowsPerPage = payrolls.per_page
this.pagination.page = payrolls.current_page
this.pagination.rowsNumber = payrolls.total
this.loading = false
}).catch(() => {
this.loading = false
})
},
},
computed: {
i'm new at laravel sorry for the inconveniences
