Actions on multiple messages

[StCyr]

Feature Request

I would like to be able to perform actions (eg: delete) on multiple messages at once.

Summary

It looks a bit complicated to implement at first sight. So, I'd like to have some help here :-)

Here's a proposal to start the discussion.

Proposal

What I think is necessary to implement to get this functionality is:

1. Implement a new store object/array to keep track of the currently selected messages
2. Be able to divert CTRL+click and SHIFT+click from their regular behaviour in the Envelope/EnvelopList component (=> to update the above-mentioned store object for example)
3. New component to display in place of the Message/NewMessageDetail/NoMessageSelected components when multiple messages are selected. This component would show the possible actions (inspired by OWA)

Decision

1. The tracking of the currently selected messages must be implemented with a property of the EnvelopeList component;
2. Show an "action header" at the top of the EnvelopeList component rather than create a new component to show the possible actions.

TODO

• create a selection array in the envelopeList component
• handle ctrl/shift/meta+click events in the envelope component
• show an action header at the top of the envelopeList component when multiple
• style the action header better
• make the header's position fixed
• implement "mark read/unread" actions
• implement "delete" action
• automatically add the currently viewed message to the selection list
• clear the selection list when needed
• verify the algorithm used to populate the selection property
• proper icons for "mark read" and "mark unread"

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[ChristophWurst]

I'm pretty sure that is at least one existing ticket for this. But I can't find it right now. 😆

IMO the selection is a local state. It's only relevant to the component that renders the list. This shouldn't go into a store.

Generally speaking this functionality isn't specific to this app. It doesn't make sense to have a specific implementation for every app that renders a list. Instead, this should be added to the https://github.com/nextcloud/nextcloud-vue components (nextcloud-libraries/nextcloud-vue#616). And then apps can specify if actions are available for multi select.

👍 on the CTRL+click behavior for power users on a desktop system.

Not sure about the 3). It could also be fine to just keep showing the previously shown message. It definitely shouldn't be the (only) place for the actions, as this element is not visible on mobile.

[StCyr]

I'm pretty sure that is at least one existing ticket for this. But I can't find it right now. 😆

I didn't find neither. Strange uh?

IMO the selection is a local state. It's only relevant to the component that renders the list. This shouldn't go into a store.

Generally speaking this functionality isn't specific to this app. It doesn't make sense to have a specific implementation for every app that renders a list. Instead, this should be added to the https://github.com/nextcloud/nextcloud-vue components (nextcloud/nextcloud-vue#616). And then apps can specify if actions are available for multi select.

I've hacked a little bit and that might be not too dificult to implement this functionality using HTML classes and DOM selectors:

1. You ctrl+click on an envelope, it add/remove a "selected" class to/from the envelope.
2. When clicking on an action, it is applied to all envelope with the "selected" class;

Gotcha:

1. A simple way to remove the "selected" class from all envelope (that's: reset the multiple selection state) must be implemented
2. Should the action labels be changed when multiple envelopes are selected?

👍 on the CTRL+click behavior for power users on a desktop system.

Not sure about the 3). It could also be fine to just keep showing the previously shown message. It definitely shouldn't be the (only) place for the actions, as this element is not visible on mobile.

Yeah, it could also be fine.

But, if multiple messages are selected and we let the user perform actions on them using the usual envelope Actions menu, then it must be clear for the user that the action he's about to perform will act on multiple messages; Again, should the action labels be automaticaly changed when multiple envelopes are selected?

[ChristophWurst]

I didn't find neither. Strange uh?

Yeah 🙈

But, if multiple messages are selected and we let the user perform actions on them using the usual envelope Actions menu, then it must be clear for the user that the action he's about to perform will act on multiple messages; Again, should the action labels be automaticaly changed when multiple envelopes are selected?

That is correct. The individual actions on each envelope should still only affect one envelope. But once you select more than message there could be a new header that appears lile

x message selected ··· <- and that open a actions menu with actions that are applied to all selected messages

[StCyr]

That is correct. The individual actions on each envelope should still only affect one envelope. But once you select more than message there could be a new header that appears lile

x message selected ··· <- and that open a actions menu with actions that are applied to all selected messages

Nice idea. Is there already a component for such a header? :-)

[StCyr]

Hey,

I've started working on this here: https://github.com/nextcloud/mail/tree/feature/2273/multi-select

But I'm struggling to have the view to update directly when the user CTRL+Click on envelopes.

I guess it's a reactivity issue but I can't find the solution.

Any idea why the view doesn't update? @ChristophWurst ? Is it because envelope.flags.selected doesn't exist when the envelopes are fectched?

[ChristophWurst]

Did you use Vue.set(envelope, 'selected', true)? Otherwise yes, this will cause reactivity issues if you just set the property directly and it didn't exist before.

[ChristophWurst]

but sounds like you're storing the selected information in the store. and as discussed before I would not consider this global state. The selected state is only relevant to the list of envelopes. It should be stored there (simple array of IDs)

[StCyr]

yeah fixed it :-)

[StCyr]

hey @ChristophWurst,

I've now something working properly with the selected state stored in EnvelopeList.

Now, this selected state should be reset everytime the user makes a "non-selective" action (eg: the user starts making a selection, but then changes his mind and click on the "+ New message" button).

Do you have any idea how to achieve this?

[ChristophWurst]

Do you have any idea how to achieve this?

I would only clear that state when the view is shown. E.g. with the mounted event in Vue or similar. When the users decides to write a new message the list is still shows, so I'd argue we shouldn't clear the selection.

[laurentiu2]

#485

[small1]

I am going to see if i can open a small bounty for this. This feature is badly needed :)