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:
parent
8f528155f5
commit
bd7d20feb9
|
@ -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,
|
||||
|
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue