search

FirebaseGoodies / FireAdmin

:seedling: A mini headless CMS built with Angular & Firebase
https://firebasegoodies.github.io/FireAdmin/demo/login?email=guest@fireadmin.com&password=fireadmin
MIT License
80 stars 23 forks source link

Add pagination in list view of pages and post #25

Open dhiraj-das opened 3 years ago

dhiraj-das commented 3 years ago

Hi AXeL!

How have you been? I was able to fork your project and customise it to fit my project structure. However, one thing I found missing was pagination in the list view screens of both Posts and Pages.

I am working on this item for my project but was wondering if you could show me a way. I'll raise a pull request for this project as well.

Thanks! Dhiraj

AXeL-dev commented 3 years ago

Hey Dhiraj,

I'm doing well, thanks for asking, i hope you're good as well.

However, one thing I found missing was pagination in the list view screens of both Posts and Pages.

I'm not sure if i get you, since pagination already exists on both pages you described (see the screenshot below).

image

dhiraj-das commented 3 years ago

Sorry by pagination I meant lazy loading

dhiraj-das commented 3 years ago

Right now I see all the documents are being fetched from firestore. I was thinking we can optimize it further by fetching only the first 10 docs first and then fetch the rest as and when the users clicks on the next page indicators.

AXeL-dev commented 3 years ago

Right now I see all the documents are being fetched from firestore. I was thinking we can optimize it further by fetching only the first 10 docs first and then fetch the rest as and when the users clicks on the next page indicators.

Indeed, currently the pagination is handled on the frontend side, which is not optimized, so yeah if you wanna go with lazy loading then you have to change the whole datatable component (i think, or maybe try to tweak it).

For the requests pagination you can use firestore query cursors => https://firebase.google.com/docs/firestore/query-data/query-cursors.

You can also find an example of lazy loading here ts, html.

I hope that helps :smile:.

dhiraj-das commented 3 years ago

Thanks AXeL! You're the best! I think I have enough information to get started.

On Sat, May 29, 2021 at 10:54 PM AXeL @.***> wrote:

Right now I see all the documents are being fetched from firestore. I was thinking we can optimize it further by fetching only the first 10 docs first and then fetch the rest as and when the users clicks on the next page indicators.

Indeed, currently the pagination is handled on the frontend side, which is not optimized, so yeah if you wanna go with lazy loading then you have to change the whole datatable component (i think, or maybe try to tweak it).

For the requests pagination you can use firestore query cursors => https://firebase.google.com/docs/firestore/query-data/query-cursors.

You can also find an example of lazy loading here ts https://github.com/AXeL-dev/ur-frontend-coding-challenge/blob/f3ce45187913444d6e0f03b11ef9820dbd581f5e/src/app/app.component.ts#L31, html https://github.com/AXeL-dev/ur-frontend-coding-challenge/blob/f3ce45187913444d6e0f03b11ef9820dbd581f5e/src/app/app.component.html#L2 .

I hope that helps 😄.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/FirebaseGoodies/FireAdmin/issues/25#issuecomment-850868595, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFRHNAK66PB3GSQM3CHRTQTTQEPNVANCNFSM45YOUAQA .