finished centralization of query creation.

DatasetController.java: changed mapping for simplification
index.html: Changed option text also for simplification
main.js: replaced dedicated query methods for search, sort & filter with a central one, also refactored the url parameter generation process.

Also removed resolved TODOs and added comments
This commit is contained in:
J-Klinke 2024-07-01 12:05:21 +02:00
parent 32ba4995be
commit e5a4b1186e
3 changed files with 28 additions and 60 deletions

View File

@ -65,7 +65,7 @@ public class DatasetController {
return getDatasetById(id); // new ResponseEntity<>(null, HttpStatus.OK);
}
@PutMapping("/id/{id}/vote")
@PutMapping("/id/{id}/stars")
public Dataset postMethodName(@PathVariable("id") UUID id,
@RequestParam("stars") int stars) {
if (stars > 0 && stars < 6) {

View File

@ -34,34 +34,31 @@ addButton.addEventListener("click", () => {
filterButton.addEventListener("change", () => {
const filterString = filterButton.value;
if (filterString !== filterButton.querySelector("#default-filter").value) {
filter(filterString);
fetchQuery(createQuery());
}
});
searchButton.addEventListener("click", () => {
const searchString = searchBar.value;
search(searchString);
fetchQuery(createQuery());
});
searchBar.addEventListener("input", () => {
updateSections();
clearTimeout(searchBarTimeout);
searchBarTimeout = setTimeout(() => {
const searchString = searchBar.value;
search(searchString);
fetchQuery(createQuery());
}, searchDelay);
});
searchBar.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
const searchString = searchBar.value;
search(searchString);
fetchQuery(createQuery());
}
});
sortButton.addEventListener("change", () => {
const sortString = sortButton.value;
sort(sortString);
fetchQuery(createQuery());
});
resetButton.addEventListener("click", () => {
@ -91,53 +88,24 @@ for (const downvoteButton of downvoteButtons) {
// functions of the main page
function navigateToAdd() {
//TODO: url to add page not yet implemented, add here
window.location.href = "/add";
}
function filter(filterString) {
updateSections();
filterString = filterString.toUpperCase();
let fetchURL = new URL(apiEndpoint, baseURL);
fetchURL.searchParams.append("type", filterString);
fetchURL.searchParams.append("size", defaultPagingValue);
console.log(fetchURL); // TODO: remove
fetchQuery(fetchURL);
}
function getFilterQuery() {
let filterString= filterButton.value.toUpperCase();
return "?type=" + filterString;
if (filterString === "NONE") {
return ["type", "%"]
} else if (document.querySelector('#filter-btn option:checked').parentElement.label === "Standard categories") {
return ["type", filterString];
} else {
return ["category", filterString];
}
function search(searchString) {
updateSections();
let fetchURL = new URL(apiEndpoint + "/search", baseURL);
fetchURL.searchParams.append("search", searchString.length === 0 ? "%" : searchString);
console.log(fetchURL); // TODO: remove
fetchQuery(fetchURL);
}
function getSearchQuery() {
let searchString = searchBar.value;
return "?search=" + (searchString.length === 0 ? "%" : searchString);
return (searchString.length === 0 ? "%" : (searchString + "%"));
}
function sort(sortString) {
let query = sortString.toLowerCase().split(" ");
if (query[1] === "a-z" || query[1] === "↑" || query[1] === "oldest-newest") {
query[1] = "asc";
} else {
query[1] = "desc";
}
updateSections();
let fetchURL = new URL(apiEndpoint, baseURL);
fetchURL.searchParams.append("sort", query[0]);
fetchURL.searchParams.append("direction", query[1]);
console.log(fetchURL); // TODO: remove
fetchQuery(fetchURL);
}
function getSortQuery() {
let sortString = sortButton.value.toLowerCase().split(" ");
if (sortString[1] === "a-z" || sortString[1] === "↑" || sortString[1] === "oldest-newest") {
@ -145,19 +113,19 @@ function getSortQuery() {
} else {
sortString[1] = "desc";
}
return "?sort=" + sortString[0] + "&direction=" + sortString[1];
return sortString
}
// creates query for the whole toolbar, so that searching, sorting and filtering are always combined
function createQuery() {
updateSections();
let queryURL = new URL(apiEndpoint + "/search", baseURL);
queryURL.append(getSearchQuery());
queryURL.append(getFilterQuery());
queryURL.append(getSortQuery());
queryURL.append("&size=" + defaultPagingValue);
console.log(queryURL); // TODO: remove
fetchQuery(queryURL);
queryURL.searchParams.append("search", getSearchQuery());
queryURL.searchParams.append(getFilterQuery()[0], getFilterQuery()[1]);
queryURL.searchParams.append("sort", getSortQuery()[0]);
queryURL.searchParams.append("direction", getSortQuery()[1]);
queryURL.searchParams.append("size", defaultPagingValue.toString(10));
return queryURL;
}
export function vote(entryID, up) {
@ -165,7 +133,6 @@ export function vote(entryID, up) {
`${apiEndpoint}/id/${entryID}/${up ? "up" : "down"}vote`,
baseURL,
);
console.log(fetchURL); // TODO: remove
fetch(fetchURL, {
method: "PUT",
headers: {
@ -183,6 +150,7 @@ function incrementPageCount() {
lastQuery.currentPage++;
}
// updates the page display. If no query is present, the initial page is shown, otherwise the search results.
function updateSections() {
if (searchBar.value === "" && sortButton.value === sortButton.querySelector("#default-sort").value
&& filterButton.value === filterButton.querySelector("#default-filter").value) {
@ -217,6 +185,6 @@ window.onload = function () {
fetchCategories();
updateSections();
if (searchBar.value !== "") {
search(searchBar.value);
fetchQuery(createQuery());
}
}

View File

@ -42,8 +42,8 @@
<option>Title Z-A</option>
<option>Stars ↑</option>
<option>Stars ↓</option>
<option>Votes ↑</option>
<option>Votes ↓</option>
<option>Upvotes ↑</option>
<option>Upvotes ↓</option>
</select>
<div class="divider"></div>
<select class="btn flat" id="filter-btn" title="Filter entries">Filter