[FEAT] Proj. pagination

src/stores/useProjectStore.ts

@@ -15,13 +15,19 @@ export const useProjectStore = defineStore('project', () => {
   const projects = ref<Project[]>([]);
   const currentProject = ref<Project | null>(null);
   const isLoading = ref(false);
+  const page = ref(1);
+  const perPage = ref(12);
+  const totalItems = ref(0);
+  const totalPages = ref(0);
 
-  async function fetchProjects() {
+  async function fetchProjects(pageVal = 1, perPageVal = 12, searchVal = '') {
     if (!authStore.user) return;
     isLoading.value = true;
     try {
-      const records = await authStore.pb.collection('projects').getList(1, 50, {
+      const filter = searchVal ? `name ~ "${searchVal}"` : '';
+      const records = await authStore.pb.collection('projects').getList(pageVal, perPageVal, {
         sort: '-updated',
+        filter,
       });
       projects.value = records.items.map((r: any) => ({
         id: r.id,
@@ -30,6 +36,10 @@ export const useProjectStore = defineStore('project', () => {
         created: r.created,
         updated: r.updated,
       }));
+      page.value = records.page;
+      perPage.value = records.perPage;
+      totalItems.value = records.totalItems;
+      totalPages.value = records.totalPages;
     } catch (error) {
       console.error('Failed to fetch projects:', error);
     } finally {
@@ -53,7 +63,8 @@ export const useProjectStore = defineStore('project', () => {
         created: record.created,
         updated: record.updated,
       };
-      await fetchProjects();
+      // Refresh current page
+      await fetchProjects(page.value, perPage.value);
     } catch (error) {
       console.error('Failed to create project:', error);
       throw error;
@@ -76,7 +87,9 @@ export const useProjectStore = defineStore('project', () => {
         data: record.data,
         updated: record.updated,
       };
-      await fetchProjects();
+      // No need to fetch all, just update locals or re-fetch current page if desired.
+      // For now, let's re-fetch to keep consistency.
+      await fetchProjects(page.value, perPage.value);
     } catch (error) {
       console.error('Failed to update project:', error);
       throw error;
@@ -115,7 +128,9 @@ export const useProjectStore = defineStore('project', () => {
       if (currentProject.value?.id === id) {
         currentProject.value = null;
       }
-      await fetchProjects();
+      // If we delete the last item on a page, we might want to go back a page.
+      // For simplicity, just refetch current page.
+      await fetchProjects(page.value, perPage.value);
     } catch (error) {
       console.error('Failed to delete project:', error);
     } finally {
@@ -127,6 +142,10 @@ export const useProjectStore = defineStore('project', () => {
     projects,
     currentProject,
     isLoading,
+    page,
+    perPage,
+    totalItems,
+    totalPages,
     fetchProjects,
     createProject,
     updateProject,