Improve flexibility for options on `collection_order_toggle_indicator` component

[aaron-contreras]

Currently, the way to provide what we render for default, ascending and descending sort options for the collection_order_toggle_indicator component is only via a "text" option. Also, options for asc and desc are rendered as "unescaped", while the default option gets rendered as plaintext. I can see the why behind this (perhaps to provide some unicode characters as the ascending and descending arrows and wanting those to be unescaped).

I feel a bit limited by the current behavior. Instead, I'd like to use arrow bs_icons for example on matestack-ui-bootstrap for these or provide my own rendering or template for what these should render. I propose using slots somewhat similar to the interface as we have in bs_card on matestack-ui-bootstrap, where you can provide a body via a text option or define a method that provides the rendering for body and add it as a slot.

Also, I'd like default, asc, and desc as text to all render as plaintext and not some plaintext and some unescaped. If we want unescaped text for asc and desc we could have the text be unescaped from the caller's side. This is more flexible in my opinion and doesn't hide the fact that whatever string/text is passed in as an argument is unescaped.

An example of the desired API would look something like this:

# EXAMPLE 1
# all rendered as plaintext

collection_order_toggle_indicator(
  key: :title,
  default: "unsorted",
  asc: "asc",
  desc: "desc"
)

# EXAMPLE 2
# or some as custom provided slots

collection_order_toggle_indicator(
  key: :title,
  default: "unsorted",
  slots: {
    asc: method(:asc_partial)
  }
  desc: "desc"
)

def asc_partial
  span do
     plain "I came from a method"
  end
end

# EXAMPLE 3
# or all as custom provided slots

collection_order_toggle_indicator(
  key: :title,
  slots: {
    default: method(:default_partial),
    asc: method(:asc_partial),
    desc: method(:desc_partial)
  }
)

def default_partial
  plain "We all came from a method"
end

def asc_partial
  plain "We all came from a method"
end

def desc_partial
  plain "We all came from a method"
end

[aaron-contreras]

Experimented and cooked something up to demonstrate what I wanted to achieve on the dummy app for matestack-ui-bootstrap. Let me know your thoughts 😉 @jonasjabari . This is using sort-up and sort-down bootstrap icons and the code snippet looks like this:

NOTE:
In case you're wondering where this sorting capability on the smart collection component is coming from, this is provided by some other features I'm building on it to allow for this. It's not a current feature on main or develop.

def table_head
  #...
  collection_order_toggle_indicator key: key,
                                    slots: {
                                      asc: method(:asc_partial),
                                      desc: method(:desc_partial)
                                    }
  #...
end

def asc_partial
  bs_icon name: 'sort-up'
end

def desc_partial
  bs_icon name: 'sort-down'
end

[jonasjabari]

@aaron-contreras I like this idea! Feel free to work on this improvement!
Thinking about sorting - just as a note - I feel like a dropdown which enables the user to select a column which should be used for sorting could be a nice and generic way to enable sorting as well. A second dropdown for asc/desc would be required then as well. This approach of sorting would also work with a non-table way of display the collection content (e.g. in cards like seen here: https://dummy.matestack.io/dummy/products) (I guess this is just another improvement we can tackle afterwards)

[aaron-contreras]

@jonasjabari Nice. I had a similar thought. My idea of it was that I could provide in the collection_config

{
  sorting: true # or sortable?
  columns: {
    # columns defined here
  }
}

and this would enable sorting on all columns being the standard case.

However, if I wanted to provide a custom sorting slot that would be used like you indicated in a non-table way or in any other scenario, I could do something like this which would generate the corresponding dropdowns you talked about:

{
  sorting: {
    some_column_name: {
      text: "Sort by some_column_name",
      default: :asc
    },
    # all columns I would like to provide the dropdowns for sorting
  }
}

or if I want to provide my own sorting rendering

{
  slots: {
    collection_rendering: method(:my_collection_rendering),
    sort_rendering: method(:my_sort_rendering)
  }
}