Pagination for forms on main page (#9)

* Pagination for forms on main page

* Fix tests

Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>

app/Http/Controllers/Forms/FormController.php

@@ -34,7 +34,7 @@ class FormController extends Controller
         $this->authorize('viewAny', Form::class);
 
         $workspaceIsPro = $workspace->is_pro;
-        $forms = $workspace->forms()->with(['creator','views','submissions'])->get()->map(function (Form $form) use ($workspace, $workspaceIsPro){
+        $forms = $workspace->forms()->with(['creator','views','submissions'])->paginate(10)->through(function (Form $form) use ($workspace, $workspaceIsPro){
             // Add attributes for faster loading
             $form->extra = (object) [
                 'loadedWorkspace' => $workspace,

resources/js/pages/forms/show.vue

@@ -306,7 +306,7 @@ import FormSubmissions from '../../components/open/forms/components/FormSubmissi
 const loadForms = function () {
   store.commit('open/forms/startLoading')
   store.dispatch('open/workspaces/loadIfEmpty').then(() => {
-    store.dispatch('open/forms/load', store.state['open/workspaces'].currentId)
+    store.dispatch('open/forms/loadIfEmpty', store.state['open/workspaces'].currentId)
   })
 }
 

resources/js/pages/home.vue

@@ -10,13 +10,11 @@
             Create a new form
           </fancy-link>
         </div>
-        <div v-if="formsLoading" class="text-center">
+
-          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+        <p v-if="!formsLoading && enrichedForms.length === 0 && !isFilteringForms">
-        </div>
-        <p v-else-if="enrichedForms.length === 0 && !isFilteringForms">
           You don't have any form yet.
         </p>
-        <div v-else class="mb-10">
+        <div v-else-if="forms.length > 0" class="mb-10">
           <text-input v-if="forms.length > 5" class="mb-6" :form="searchForm" name="search" label="Search a form"
                       placeholder="Name of form to search"
           />
@@ -66,6 +64,9 @@
             </template>.
           </p>
         </div>
+        <div v-if="formsLoading" class="text-center">
+          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+        </div>
       </div>
     </div>
     <open-form-footer class="mt-8 border-t" />
@@ -83,7 +84,7 @@ import OpenFormFooter from '../components/pages/OpenFormFooter'
 const loadForms = function () {
   store.commit('open/forms/startLoading')
   store.dispatch('open/workspaces/loadIfEmpty').then(() => {
-    store.dispatch('open/forms/load', store.state['open/workspaces'].currentId)
+    store.dispatch('open/forms/loadIfEmpty', store.state['open/workspaces'].currentId)
   })
 }
 

resources/js/store/modules/open/forms.js

@@ -2,6 +2,7 @@ import axios from 'axios'
 
 export const formsEndpoint = '/api/open/workspaces/{workspaceId}/forms'
 export const namespaced = true
+export let currentPage = 1
 
 // state
 export const state = {
@@ -36,6 +37,9 @@ export const mutations = {
   set (state, items) {
     state.content = items
   },
+  append (state, items) {
+    state.content = state.content.concat(items)
+  },
   addOrUpdate (state, item) {
     state.content = state.content.filter((val) => val.id !== item.id)
     state.content.push(item)
@@ -56,12 +60,26 @@ export const actions = {
   resetState (context) {
     context.commit('set', [])
     context.commit('stopLoading')
+    currentPage = 1
   },
   load (context, workspaceId) {
     context.commit('startLoading')
-    return axios.get(formsEndpoint.replace('{workspaceId}', workspaceId)).then((response) => {
+    return axios.get(formsEndpoint.replace('{workspaceId}', workspaceId)+'?page='+currentPage).then((response) => {
-      context.commit('set', response.data)
+      context.commit((currentPage == 1) ? 'set' : 'append', response.data.data)
-      context.commit('stopLoading')
+      if (currentPage < response.data.meta.last_page) {
+        currentPage += 1
+        context.dispatch('load', workspaceId)
+      } else {
+        context.commit('stopLoading')
+        currentPage = 1
+      }
     })
+  },
+  loadIfEmpty (context, workspaceId) {
+    if (context.state.content.length === 0) {
+      return context.dispatch('load', workspaceId)
+    }
+    context.commit('stopLoading')
+    return Promise.resolve()
   }
 }

tests/Feature/Forms/FormTest.php

@@ -28,12 +28,10 @@ it('can fetch forms', function () {
 
     $this->getJson(route('open.workspaces.forms.index', $workspace->id))
         ->assertSuccessful()
-        ->assertJsonCount(1)
+        ->assertJsonCount(3)
-        ->assertJson(function (AssertableJson $json) use ($form) {
+        ->assertSuccessful()
-            return $json->where('0.id', $form->id)
+        ->assertJsonPath('data.0.id', $form->id)
-                ->whereType('0.title', 'string')
+        ->assertJsonPath('data.0.title', $form->title);
-                ->whereType('0.properties', 'array');
-        });
 });
 
 it('can update a form', function () {
@@ -152,4 +150,4 @@ it('can create form with dark mode', function () {
                 ->where('dark_mode', 'dark')
                 ->etc();
         });
-});
+});