Added paginated submissions and support for generalized pagination.

gymboard-api/src/main/java/nl/andrewlalis/gymboard_api/config/SecurityConfig.java

@@ -54,7 +54,8 @@ public class SecurityConfig {
 						"/auth/users/*/access",
 						"/auth/users/*/followers",
 						"/auth/users/*/following",
-						"/users/*/recent-submissions"
+						"/users/*/recent-submissions",
+						"/users/*/submissions"
 				).permitAll()
 				.requestMatchers(// Allow the following POST endpoints to be public.
 						HttpMethod.POST,

gymboard-api/src/main/java/nl/andrewlalis/gymboard_api/domains/api/controller/UserSubmissionsController.java

@@ -2,6 +2,8 @@ package nl.andrewlalis.gymboard_api.domains.api.controller;
 
 import nl.andrewlalis.gymboard_api.domains.api.dto.SubmissionResponse;
 import nl.andrewlalis.gymboard_api.domains.api.service.submission.UserSubmissionService;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RestController;
@@ -20,4 +22,9 @@ public class UserSubmissionsController {
 	public List<SubmissionResponse> getRecentSubmissions(@PathVariable String userId) {
 		return submissionService.getRecentSubmissions(userId);
 	}
+
+	@GetMapping(path = "/users/{userId}/submissions")
+	public Page<SubmissionResponse> getSubmissions(@PathVariable String userId, Pageable pageable) {
+		return submissionService.getSubmissions(userId, pageable);
+	}
 }

gymboard-api/src/main/java/nl/andrewlalis/gymboard_api/domains/api/service/submission/UserSubmissionService.java

@@ -6,7 +6,9 @@ import nl.andrewlalis.gymboard_api.domains.auth.dao.UserRepository;
 import nl.andrewlalis.gymboard_api.domains.auth.model.User;
 import nl.andrewlalis.gymboard_api.domains.auth.service.UserAccessService;
 import nl.andrewlalis.gymboard_api.util.PredicateBuilder;
+import org.springframework.data.domain.Page;
 import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
 import org.springframework.http.HttpStatus;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
@@ -14,6 +16,12 @@ import org.springframework.web.server.ResponseStatusException;
 
 import java.util.List;
 
+import static nl.andrewlalis.gymboard_api.util.DataUtils.findByIdOrThrow;
+
+/**
+ * Service for dealing with user submissions; primarily fetching them in a
+ * variety of ways.
+ */
 @Service
 public class UserSubmissionService {
 	private final UserRepository userRepository;
@@ -28,8 +36,7 @@ public class UserSubmissionService {
 
 	@Transactional(readOnly = true)
 	public List<SubmissionResponse> getRecentSubmissions(String userId) {
-		User user = userRepository.findById(userId)
-				.orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND));
+		User user = findByIdOrThrow(userId, userRepository);
 		userAccessService.enforceUserAccess(user);
 
 		return submissionRepository.findAll((root, query, criteriaBuilder) -> {
@@ -43,4 +50,16 @@ public class UserSubmissionService {
 			return pb.build();
 		}, PageRequest.of(0, 5)).map(SubmissionResponse::new).toList();
 	}
+
+	@Transactional(readOnly = true)
+	public Page<SubmissionResponse> getSubmissions(String userId, Pageable pageable) {
+		User user = findByIdOrThrow(userId, userRepository);
+		userAccessService.enforceUserAccess(user);
+
+		return submissionRepository.findAll((root, query, criteriaBuilder) -> {
+			PredicateBuilder pb = PredicateBuilder.and(criteriaBuilder);
+			pb.with(criteriaBuilder.equal(root.get("user"), user));
+			return pb.build();
+		}, pageable).map(SubmissionResponse::new);
+	}
 }

gymboard-app/src/api/main/models.ts

@@ -2,3 +2,53 @@ export interface GeoPoint {
   latitude: number;
   longitude: number;
 }
+
+export interface Page<Type> {
+  content: Array<Type>;
+  empty: boolean;
+  first: boolean;
+  last: boolean;
+  number: number;
+  totalElements: number;
+  totalPages: number;
+}
+
+export interface PaginationOptions {
+  page: number;
+  size: number;
+  sort?: Array<PaginationSort> | PaginationSort;
+}
+
+export function defaultPaginationOptions(): PaginationOptions {
+  return { page: 0, size: 10 };
+}
+
+export function toQueryParams(options: PaginationOptions): Record<string, any> {
+  const params: Record<string, any> = {
+    page: options.page,
+    size: options.size
+  };
+  if (options.sort) {
+    if (Array.isArray(options.sort)) {
+      params.sort = options.sort.map(s => s.propertyName + ',' + s.sortDir);
+    } else {
+      params.sort = options.sort.propertyName + ',' + options.sort.sortDir;
+    }
+  }
+  return params;
+}
+
+export class PaginationSort {
+  public readonly propertyName: string;
+  public readonly sortDir: PaginationSortDir;
+
+  constructor(propertyName: string, sortDir: PaginationSortDir = PaginationSortDir.ASC) {
+    this.propertyName = propertyName;
+    this.sortDir = sortDir;
+  }
+}
+
+export enum PaginationSortDir {
+  ASC = 'asc',
+  DESC = 'desc'
+}

gymboard-app/src/api/main/users.ts

@@ -1,12 +1,21 @@
 import {api} from 'src/api/main';
 import {AuthStoreType} from 'stores/auth-store';
 import {ExerciseSubmission, parseSubmission} from 'src/api/main/submission';
+import {defaultPaginationOptions, Page, PaginationOptions, toQueryParams} from 'src/api/main/models';
 
 class UsersModule {
   public async getRecentSubmissions(userId: string, authStore: AuthStoreType): Promise<Array<ExerciseSubmission>> {
     const response = await api.get(`/users/${userId}/recent-submissions`, authStore.axiosConfig);
     return response.data.map(parseSubmission);
   }
+
+  public async getSubmissions(userId: string, authStore: AuthStoreType, paginationOptions: PaginationOptions = defaultPaginationOptions()): Promise<Page<ExerciseSubmission>> {
+    const config = structuredClone(authStore.axiosConfig);
+    config.params = toQueryParams(paginationOptions);
+    const response = await api.get(`/users/${userId}/submissions`, {...toQueryParams(paginationOptions), ...authStore.axiosConfig});
+    response.data.content = response.data.content.map(parseSubmission);
+    return response.data;
+  }
 }
 
 export default UsersModule;

gymboard-app/src/pages/user/UserSubmissionsPage.vue

@@ -1,14 +1,19 @@
 <template>
   <div>
-    <div v-if="recentSubmissions.length > 0">
+    <div v-if="loadedSubmissions.length > 0">
       <q-list separator>
         <ExerciseSubmissionListItem
-          v-for="sub in recentSubmissions"
+          v-for="sub in loadedSubmissions"
           :submission="sub"
           :key="sub.id"
           :show-name="false"
         />
       </q-list>
+      <div class="text-center">
+        <q-btn id="loadMoreButton" v-if="lastSubmissionsPage && !lastSubmissionsPage.last" @click="loadNextPage(true)">
+          Load more
+        </q-btn>
+      </div>
     </div>
   </div>
 </template>
@@ -17,11 +22,12 @@
 import {useI18n} from 'vue-i18n';
 import {useQuasar} from 'quasar';
 import {useAuthStore} from 'stores/auth-store';
-import {onMounted, ref, Ref} from 'vue';
+import {nextTick, onMounted, ref, Ref} from 'vue';
 import {ExerciseSubmission} from 'src/api/main/submission';
 import api from 'src/api/main';
 import ExerciseSubmissionListItem from 'components/ExerciseSubmissionListItem.vue';
 import {showApiErrorToast} from 'src/utils';
+import {Page, PaginationOptions, PaginationSortDir} from 'src/api/main/models';
 
 interface Props {
   userId: string;
@@ -32,14 +38,38 @@ const i18n = useI18n();
 const quasar = useQuasar();
 const authStore = useAuthStore();
 
-const recentSubmissions: Ref<ExerciseSubmission[]> = ref([]);
+const lastSubmissionsPage: Ref<Page<ExerciseSubmission> | undefined> = ref();
+const loadedSubmissions: Ref<ExerciseSubmission[]> = ref([]);
+const paginationOptions: PaginationOptions = {page: 0, size: 10};
 onMounted(async () => {
-  try {
-    recentSubmissions.value = await api.users.getRecentSubmissions(props.userId, authStore);
-  } catch (error: any) {
-    showApiErrorToast(i18n, quasar);
-  }
+  resetPagination();
+  await loadNextPage(false);
 });
+
+async function loadNextPage(scroll: boolean) {
+  try {
+    lastSubmissionsPage.value = await api.users.getSubmissions(props.userId, authStore, paginationOptions);
+    loadedSubmissions.value.push(...lastSubmissionsPage.value.content);
+    paginationOptions.page++;
+    await nextTick();
+    const button = document.getElementById('loadMoreButton');
+    if (scroll && button) {
+      button.scrollIntoView({ behavior: 'smooth' });
+    }
+  } catch (error: any) {
+    if (error.response) {
+      showApiErrorToast(i18n, quasar);
+    } else {
+      console.log(error);
+    }
+  }
+}
+
+function resetPagination() {
+  paginationOptions.page = 0;
+  paginationOptions.size = 10;
+  paginationOptions.sort = { propertyName: 'performedAt', sortDir: PaginationSortDir.DESC };
+}
 </script>
 
 <style scoped>

gymboard-app/src/stores/auth-store.ts

@@ -7,6 +7,7 @@
 
 import { defineStore } from 'pinia';
 import { User } from 'src/api/main/auth';
+import {AxiosRequestConfig} from "axios";
 
 interface AuthState {
   user: User | null;
@@ -19,7 +20,7 @@ export const useAuthStore = defineStore('authStore', {
   },
   getters: {
     loggedIn: (state) => state.user !== null && state.token !== null,
-    axiosConfig(state) {
+    axiosConfig(state): AxiosRequestConfig {
       if (this.token !== null) {
         return {
           headers: { Authorization: 'Bearer ' + state.token },