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

View File

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

View File

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