Multiple Named Queues

[lmcardle]

Has there been any thought into having multiple named queues, instead of just one queue as it exist today? My use case is that I have 2 sections on the page for flash type notifications...eventually there may be 3. Ideally, I would like to use this exact same component for all of them, the hbs code would simply loop over a different queue, i.e.:

{{#each flashMessages.queueFoo as |flash|}}
  {{! flash from queue named foo}}
{{/each}}

{{#each flashMessages.queueBar as |flash|}}
  {{! flash from queue named bar}}
{{/each}}

If there has not been any previous discussion on this...any thoughts on doing this? I would be happy to do the work and submit a pull request, but first I wanted to see if this has been previously discussed.

[poteto]

There hasn't been prior discussion, but I'd be open to this with some thought around:

1. How will consuming apps specify names for multiple queues? In the config, I presume?
2. What is the additional API to specify the queue for each flash message?
   • What is the default behavior?

[GCheung55]

I like the idea for different queues to handle different tiers of messaging:

1. Application tier.
   • Imagine an error from model save in the route or controller showing a flash message at the top of the app.
2. Component tier.
   • Imagine multiple components with an input field of their own that saves on change, a success or error would display in close proximity to that field.

In response to your question, @poteto:

1. I think config would be the right place.
2. This ties in with where the queues are configured. A queue would be specified as an option, defaulting to the default queue. If the queue doesn't exist, throw.

// Throw here if `foo` queue doesn't exist.
flashMessages.success(message, {queue: 'foo'});

{{#each flashMessages.queue.foo as |flash|}}
    {{! flash from queue named foo}}
{{/each}}

[keighl]

The addon is actually flexible enough to do this as is. Since we can pass in arbitrary extra values to a flash message, a flash "context" is pretty trivial:

export default Ember.Component.extend({
    flashMessages: Ember.inject.service("flashMessages"),

    // Create a filtered flash queue by ctx
    flashQueue: Ember.computed.filterBy("flashMessages.queue", "ctx", "foo"),

    actions: {
        doSomething() {
            flashMessages.success("Success!", {ctx: "foo"});
        }
    }
});

{{#each flashQueue as |flash|}}
  {{flash-message flash=flash}}
{{/each}}

... only shows foo contextual messages.

[shime]

@keighl this is not a solution to this problem since that will display flash message in the default queue as well.

[keighl]

@shime If you're using the default queue, I suppose. When I implemented this context thing last year in a project, I didn't use the default queue since the whole point was that I needed contextual/scoped flashes.