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>
This commit is contained in:
Chirag 2022-10-17 13:15:41 +05:30 committed by GitHub
parent 8f528155f5
commit bd7d20feb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 35 additions and 18 deletions

View File

@ -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,

View File

@ -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)
})
}

View File

@ -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" />
</div>
<p v-else-if="enrichedForms.length === 0 && !isFilteringForms">
<p v-if="!formsLoading && 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)
})
}

View File

@ -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) => {
context.commit('set', response.data)
context.commit('stopLoading')
return axios.get(formsEndpoint.replace('{workspaceId}', workspaceId)+'?page='+currentPage).then((response) => {
context.commit((currentPage == 1) ? 'set' : 'append', response.data.data)
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()
}
}

View File

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