Management module card list component

[sfount]

A number of management modules make use of a 'card list' to display entities with a collection of useful attributes.

This pattern can currently be found on:

• Creditor group management
• Debtor group management
• Fiscal Year (Slight variation on the theme)

This pattern makes sense where there are entities with a lot of meta data but not too many records. Many records would best suit a grid but this view provides a middle ground of clearly legible but also able to provide a lot of information. Potential other candidates for this pattern are:

• Cash box management
• Patient group management

Example:

This issue proposes a design for a component to simplify, test and reduce duplication implementing this pattern across modules.

Component requirements:

• Display a generic list passed through binding
• Allow some method of sorting and filtering on the list in a user friendly way
• Include basic tests
• Allow templating for card layout, not all entities have exactly the same attributes

Potential usage:

<!-- name - sorted A-Z and filtered -->
<!-- age - sorted oldest, newest -->
<!-- size - sorted largest, smallest -->
<bh-card-list 
  data="debtors" 
  name="debtorName"
  age="debtorDate"
  size="debtorSize"
  template="/my/debtor/template.card.html">
</bh-card-list>

[mbayopanda]

Hi @sfount

What do you think to have a pagination on this bh-card-list, sometime the list is too long a pagination can be useful for avoiding to scroll down.

[sfount]

Hey @mbayopanda great suggestion! I have not included pagination with the initial pull request for two reasons:

• the use case in this PR does not expect to have many entities
• the UX for pagination in combination with filtering should also be carefully designed - it can be confusing for pagination to change when you filter for less results.

If this Component is merged and implemented then pagination would be a great feature to support on top of the base filtering and sorting!

(This comment relates to https://github.com/IMA-WorldHealth/bhima-2.X/pull/3137#discussion_r214874542)