How properly retrieve data from third party api Freshdesk?

I have an issue with retrieving data from the Freshdesk Developers API. I'm trying to return tickets that do not yet have a purchase assigned in our system, based on certain filters. When I output the data using something like dd(), I can see that it returns a total of 187 tickets. However, in my frontend data grid, I only see 30 tickets displayed, with 5 tickets per page.

A possible solution could be to always return only 30 records, with the remaining records generated as fake ones. But on the specific page where the user is currently located, only the real records should be shown. The fake ones would appear on other pages where the user is not currently present. This means that only 30 records are actually fetched at a time, but it would always load the next batch of 30 real records as the user navigates.

The problem is that the API doesn’t allow me to load all 187 tickets at once. Unfortunately, I have no idea how to implement this so that it works correctly. Therefore, I’m reaching out to see if anyone on StackOverflow has dealt with a similar issue.

This is my method in controller for retrieving tickets.

public function getTicketsWithoutPurchase(Request $request)
{
$this->checkPermissions("index");

$groupIds = [77000033482, 77000271931, 77000008014, 77000008015, 77000269172, 77000017316, 77000008013, 77000008012];

$groupQuery = implode(' OR ', array_map(function ($id) {
return "group_id:$id";
}, $groupIds));

$statusQuery = "status:2 OR status:3";

$query = '"(' . $groupQuery . ') AND (' . $statusQuery . ')"';

$page = $request->input('page', 1);

$response = FreshdeskService::filterTickets($query, 'lp', $page);

if ($response['success']) {
$tickets = $response['response']['results'] ?? [];
$totalTickets = $response['response']['total'] ?? 0;
$perPage = 30;
$start = ($page - 1) * $perPage;
dd($start);

$totalPages = ceil($totalTickets / $perPage);

if ($page > $totalPages) {
$data = collect()->pad($perPage, [
'id' => null,
'subject' => 'Fake Ticket',
'updated_at' => null,
'to_emails' => 'No Email provided',
'status' => null,
'group' => null
]);
} else {
$ticketCollection = collect($tickets);

$data = $ticketCollection->map(function ($ticket) {
return [
'id' => $ticket['id'] ?? null,
'subject' => $ticket['subject'] ?? '-',
'updated_at' => $ticket['updated_at'] ?? '-',
'to_emails' => $ticket['to_emails'] ?? 'No Email provided',
'status' => $ticket['status'],
'group' => $ticket['group_id']
];
});
}

return self::watchDataTable($data, $request);
}

return response()->json(['message' => 'Could not retrieve tickets'], 500);
}


This is method for filter tickets in freshdesk service

public static function filterTickets(string $query, $alias): array
{
return self::simpleRequest("search/tickets?query=" . urlencode($query), [], "GET", $alias);
}


And this is frontend component

<template>
<div>
<div class="row">
<div class="col-lg-12">

<div class="box box-info" style="min-height: 400px;">
<div class="box-header">
<h4 class="box-title">
<i class="fa fa-chain-broken"></i>
{{ this.$t('purchases.select_ticket_for_purchase') }}
</h4>
</div>
<div class="box-body">
<div class="col-lg-12">
<data-table :settings="freshdeskGridTableSettings" ref="uploadTable"></data-table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
// props: {
// model: { type: Object, required: true },
// },
data() {
return {
freshdeskGridTableSettings: {
fetchUrl: "/data/no-purchase",
columns: [
{
key: "id",
label: "purchases.ticket_id",
hidden: false,
},

{
key: "subject",
label: "purchases.subject",
searchable: false,
sortable: false
},
{
key: "updated_at",
label: "purchases.updated_at",
searchable: false,
sortable: false
},
{
key: "to_emails",
label: "purchases.to_emails",
searchable: false,
sortable: false
},
{
key: "status",
label: "purchases.status",
searchable: false,
sortable: false
},
// {
// key: "agent",
// label: "purchases.agent",
// searchable: false,
// sortable: false
// },
{
key: "group",
label: "purchases.group",
searchable: true,
sortable: false
},
{
type: "event",
key: "add",
// callback: this.newPosition,
permissions: ["manage purchases"],
icon: "fa-plus",
label: "purchases.add_ticket",
classes: "btn btn-success",
// conditions: {
// visible: [{ model: this.model, property: "status", operator: "le", value: 110 }]
// }
}
],
defaultSearchParams: {
// purchase_id: this.model.id,
},
showSearch: true,
showSearchColumn: true,
showPageLength: true,
defaultSortBy: "id",
defaultOrder: "desc",
defaultPerPage: 5,
pageLengths: [5, 10, 25, 50, 100],
columnId: "id",

},
};
},
methods: {
addTicket(){
this.axios.post()
}
},
};
</script>



And this is what I'm using for it -> https://developers.freshdesk.com/api/#filter_tickets.

Continue reading...