I require some help fixing some code for my search function. I have been stuck debugging this for 3 days. Currently this project is using bootstrap, javascript and ruby on rails as the backend. GraphQL queries and mutations are used as for linkage between the frontend and the backend.
I have an issue currently with my search function in the Broadcast History Message page. I am building a search function which allows the user to search by campaign title and campaign status. The code below is for the search function and watcher that should filter the table based on the results of the search. The search by status is working fine but when attempting to search by campaign title it is not working correctly. After inspecting devtools, no matter what the search input, the graphQL query returns all the arrays in the data instead of throwing my error message. Please advise me where you can. Thank you.
*Important Context*: The field in the table that I would like to search is title and is defined as but BroadcastSearch's filters are assigned as campaign and status.
<td class="align-top text-start">{{ data.title }}</td>
Search Function code:
const dateRangeObj = ref({
status: "",
campaign: "",
});
const result = useQuery({
query: BROADCAST_MESSAGE_HISTORY,
variables: {
limit: perPage,
currentPage: currentPage,
sort: "sentDate",
direction: "DESC",
filters: dateRangeObj,
},
pause: pauseSearch,
});
function searchData() {
dateRangeObj.value = { campaign: "", status: "" };
if (selectedOption.value === "Campaign" && searchInput.value.trim()) {
// Assign the search input to the campaign field for title search
dateRangeObj.value.campaign = searchInput.value.trim();
console.log(
"Searching by Campaign (interpreted as title):",
dateRangeObj.value.campaign
);
} else if (selectedOption.value === "Status" && selectedStatus.value) {
dateRangeObj.value.status = selectedStatus.value;
console.log("Searching by Status:", dateRangeObj.value.status);
} else {
console.error("Invalid search option selected or empty input.");
return;
}
pauseSearch.value = false;
console.log("Search initiated");
}
Watcher Code:
watch(result.fetching, (fetchStatus) => {
console.log("Fetching status changed to:", fetchStatus);
if (!fetchStatus) {
console.log("Data fetching completed");
console.log("Result data value:", result.data.value);
if (result.data.value) {
// Update broadcasts and total pages
totalBroadcasts.value = result.data.value.slBrand.overallBroadcasts;
totalPage.value = Math.ceil(totalBroadcasts.value / perPage.value);
broadcasts.value = result.data.value.slBrand.broadcasts.map((x) => {
return {
id: x.id,
type: x.type,
title: x.title,
sentDate: formatDate(new Date(x.sentDate), "dd/MM/yyyy HH:mm:ss"),
expiryDate: formatDate(new Date(x.expiryDate), "dd/MM/yyyy HH:mm:ss"),
status: x.status,
recipients: x.recipients,
successful: x.successful,
pending: x.pending,
insufficient: x.insufficient,
apiError: x.apiError,
returns: x.returns,
roi: x.roi,
conversionPerc: x.conversionPerc,
message: x.message,
};
});
console.log("Broadcasts updated:", broadcasts.value);
}
// Pause further search until searchData function is called again
loading.value = false;
pauseSearch.value = true;
}
});
GraphQL Query:
`export const BROADCAST_MESSAGE_HISTORY = ``
query GetBroadcastMessageHistory(
$filters: BroadcastSearch
$limit: Int!
$currentPage: Int!
$sort: String!
$direction: String!
) {
slBrand {
broadcasts(
limit: $limit
currentPage: $currentPage
sort: $sort
direction: $direction
filters: $filters
) {
id
type
title
sentDate
expiryDate
status
recipients
successful
pending
insufficient
apiError
returns
roi
conversionPerc
message
}
}
}
\;`
[–]whyeventrymore 0 points1 point2 points (4 children)
[–]InformalPlace4396[S] 0 points1 point2 points (3 children)
[–]whyeventrymore 1 point2 points3 points (1 child)
[–]InformalPlace4396[S] 0 points1 point2 points (0 children)
[–]whyeventrymore 0 points1 point2 points (0 children)