[ui] Add pagination to IndividualsGrid

[sduenas]

We should find a way to show on the IndividualsGrid all the individuals stored on the registry. Right now, the components shows all the individuals that are passed in the individuals prop.

Not sure what the best method is. We can consider to have infinite scroll or to add arrows to paginate. Maybe this should be part of a different component two. vuetify provides options to do both solutions. We should explore if there are more solutions too.

[dlumbrer]

I've been trying the pagination component (https://vuetifyjs.com/en/components/paginations/), but I'm not sure if this is what we want, this is how it looks like:

I'm going to mockup some other approaches (infinite table and so on).

CC @sduenas @jsmanrique

[dlumbrer]

Update regarding the infinite scrolling tables:

I went to this issue (that is still open): https://github.com/vuetifyjs/vuetify/issues/3538

It seems that by default there isn't a component to do the infinite scroll, but the answers suggest using other components from vuetify in order to do this (p.e: https://github.com/vuetifyjs/vuetify/issues/3538#issuecomment-620695587).

It needs some code to do it, I can do it, but for a mockup maybe is too much development.

Any suggestion @sduenas @jsmanrique?

[sduenas]

@dlumbrer the idea of having cards to represent the individuals is with the idea of moving and merge cards. So far, that's not possible in vuetify unless we use other common js libraries.

For that behaviour maybe the best option would have been an infinite scroll. The user would have been able to load more individuals when needed to keep merging or applying other actions such as delete. I'm not sure how we can have the same behaviour with pagination.

For example, if a user decides to remove some individuals, when the action is executed, the pagination should reload the first page and refresh the pagination selectors. With an infinite loop that transition is more natural.

Ideas of what would be better?

[dlumbrer]

@dlumbrer the idea of having cards to represent the individuals is with the idea of moving and merge cards. So far, that's not possible in vuetify unless we use other common js libraries.

For that behaviour maybe the best option would have been an infinite scroll. The user would have been able to load more individuals when needed to keep merging or applying other actions such as delete. I'm not sure how we can have the same behaviour with pagination.

What I was thinking about this is something like "pinned" cards. For instance, if you want to merge an individual from the beginning of the list (starts with A) with another individual that is at the end of the list (starts with Z), you can pin the first individual (marking it with a color or icon) and then going through the table (or infinite scrolling) with the pinned individual always there. Then, we can move the pinned individual to the other individual.

Another thing that came to my mind is to have in any part of the page a "box" with the title like "Put the cards here to merge!", and when the user moves one individual card there, the card will be there always and the user can navigate through the pagination (or infinite scroll) to find more individuals to merge.

WDYT?

For example, if a user decides to remove some individuals, when the action is executed, the pagination should reload the first page and refresh the pagination selectors. With an infinite loop that transition is more natural.

I totally agree, I found this example (https://codepen.io/mednabouli/pen/EdKzzL), we can do the same for the infinite scroll without adding more JS libraries.

Ideas of what would be better?

Shall I go through the infinite scrolling (with one of the functionalities that I described) then?

[sduenas]

@dlumbrer the idea of having cards to represent the individuals is with the idea of moving and merge cards. So far, that's not possible in vuetify unless we use other common js libraries. For that behaviour maybe the best option would have been an infinite scroll. The user would have been able to load more individuals when needed to keep merging or applying other actions such as delete. I'm not sure how we can have the same behaviour with pagination.

What I was thinking about this is something like "pinned" cards. For instance, if you want to merge an individual from the beginning of the list (starts with A) with another individual that is at the end of the list (starts with Z), you can pin the first individual (marking it with a color or icon) and then going through the table (or infinite scrolling) with the pinned individual always there. Then, we can move the pinned individual to the other individual.

Another thing that came to my mind is to have in any part of the page a "box" with the title like "Put the cards here to merge!", and when the user moves one individual card there, the card will be there always and the user can navigate through the pagination (or infinite scroll) to find more individuals to merge.

WDYT?

I was thinking of similar solutions. I'm not an expert on this so I'm not sure if those are the best behaviour.

For example, if a user decides to remove some individuals, when the action is executed, the pagination should reload the first page and refresh the pagination selectors. With an infinite loop that transition is more natural.

I totally agree, I found this example (https://codepen.io/mednabouli/pen/EdKzzL), we can do the same for the infinite scroll without adding more JS libraries.

Ideas of what would be better?

Shall I go through the infinite scrolling (with one of the functionalities that I described) then?

Yeah. Why don't you try with the solution you pasted above and we can see how it works with a real example?

[dlumbrer]

@dlumbrer the idea of having cards to represent the individuals is with the idea of moving and merge cards. So far, that's not possible in vuetify unless we use other common js libraries. For that behaviour maybe the best option would have been an infinite scroll. The user would have been able to load more individuals when needed to keep merging or applying other actions such as delete. I'm not sure how we can have the same behaviour with pagination.

What I was thinking about this is something like "pinned" cards. For instance, if you want to merge an individual from the beginning of the list (starts with A) with another individual that is at the end of the list (starts with Z), you can pin the first individual (marking it with a color or icon) and then going through the table (or infinite scrolling) with the pinned individual always there. Then, we can move the pinned individual to the other individual. Another thing that came to my mind is to have in any part of the page a "box" with the title like "Put the cards here to merge!", and when the user moves one individual card there, the card will be there always and the user can navigate through the pagination (or infinite scroll) to find more individuals to merge. WDYT?

I was thinking of similar solutions. I'm not an expert on this so I'm not sure if those are the best behaviour.

For example, if a user decides to remove some individuals, when the action is executed, the pagination should reload the first page and refresh the pagination selectors. With an infinite loop that transition is more natural.

I totally agree, I found this example (https://codepen.io/mednabouli/pen/EdKzzL), we can do the same for the infinite scroll without adding more JS libraries.

Ideas of what would be better?

Shall I go through the infinite scrolling (with one of the functionalities that I described) then?

Yeah. Why don't you try with the solution you pasted above and we can see how it works with a real example?

This is the first approach of the infinite loop, WDYT?

[sduenas]

Looks good to me, let's use this solution.

[dlumbrer]

I submitted the PR, it needed more work than the expected, sorry for the delay @sduenas.

[dlumbrer]

@sduenas, I have a small comment about the change you suggest in the PR.

I was trying to do it but the "IndividualsGrid" component has the individuals data as a "prop". The way that the props work (If I'm right), Is that the properties of the component are changed by its parent, not by itself.

If we want to change the data dynamically in the IndividualsGrid component, we should use "data" instead of "props". Or we can pass the data as it is in the PR.

WDYT?

[sduenas]

My idea was to have some kind of iterator so I guess that can be passed using "props" too, or am I wrong?

[dlumbrer]

My idea was to have some kind of iterator so I guess that can be passed using "props" too, or am I wrong?

But that iterator cannot change the "individuals" prop, because is in the component. Maybe I'm not understanding you, could you explain to me more deeply the idea of passing an iterator?

[sduenas]

My idea was to have some kind of iterator so I guess that can be passed using "props" too, or am I wrong?

But that iterator cannot change the "individuals" prop, because is in the component. Maybe I'm not understanding you, could you explain to me more deeply the idea of passing an iterator?

It took me a while to figure out what you trying to say, sorry. Then, would make sense to create a father component that implements the infinite scrolling and updates the array from there?

[dlumbrer]

My idea was to have some kind of iterator so I guess that can be passed using "props" too, or am I wrong?

But that iterator cannot change the "individuals" prop, because is in the component. Maybe I'm not understanding you, could you explain to me more deeply the idea of passing an iterator?

It took me a while to figure out what you trying to say, sorry.

Sorry, perhaps I didn't explain it well.

Then, would make sense to create a father component that implements the infinite scrolling and updates the array from there?

Yes, I was thinking about that. I was thinking on isolate the "data" retrieve process in a component (having the App.vue as a parent), putting there the logic of the infinite scroll and the IndividualsGrid component would be the son of this new component.

[dlumbrer]

I updated the PR with the new component added, please @sduenas , check it when you can.

I'm not sure if we have to define stories for this new component (because it doesn't have UI)

[dlumbrer]

Hi @sduenas ,

I updated the PR according to what we talked about the last time.

Check it when you have time!

[sduenas]

Closed by #311