Advanced message search

[sazanof]

Signed-off-by: Mikhail Sazanov m@sazanof.ru

Hello! I would like to discuss the improvement related to the search for emails by sender, recipient, cc, bcc, subject of the letter, as well as by tags.

This is a PR draft, because, ideally, I would also like to search through the body of the letter. I looked at the code and realized that the body of the letter is searched here:

mail/lib/Service/Search/MailSearch.php

Line 168 in fe00d8b

private function getIdsLocally(Account $account, Mailbox $mailbox, SearchQuery $query, ?int $limit): array {

If &filter=my text is passed to the URL request, 2 search tokens will be generated and passed to this method ($query->getTextTokens())

However, there is a problem that I haven't figured out how to solve yet: I get the exception String contains non-ASCII characters.. Tested with Cyrillic characters. Moreover, if you write one word, there is no mistake. I looked at the ASCII characters table and all the characters used in the query are there. This is the first problem and perhaps the most important. Can you advise on this?

Also, in order to correctly search for a match in the topic, I replace the space with "+" so that the $query->addTextToken() method does not work. I can't say that this is a super solution, but that's how it is... But the search occurs clearly by the phrase.

I also didn't understand how to search by imap_label directly on the IMAP server. =(

The whole search uses the database, but I would like to add another switch "Message body"

I placed the search bar in an obvious place. I remember there was a PR nextcloud/contacts#2711

And I read several messages, that this place will be occupied by other buttons. However, it seems to me that the most optimal place here is for searching (in contacts and mail).

If you are interested in PR, I would ask you to check the operation of this functionality and discuss / get tips for further improvement. Thank you!

[sazanof]

also added the ability to pre-filter by type "And": unread, important, favorites

[JuliaKirschenheuter]

That is a great feature!
@nimishavijay what do you think design-wise?

[nimishavijay]

At first glance it looks really nice :) The placement makes sense to me, and it seems like it would search only within the current mailbox which is open? For eg, if you are in "Sent" then it would search through only "Sent" and not in "Inbox", is that correct?

I am not able to give more detailed feedback as I don't fully understand the language, could you please post screenshots in English so it is easier for me and anyone else to also review? :)

[sazanof]

@nimishavijay hello!

Yes, the search takes place in the folder that the user has open, with the exception of the folder "Priority" and "All" mailboxes

search by "And" conditions. if the "unread" and "important" checkboxes are marked, then as a result we are looking for unread letters marked "important"

[nimishavijay]

Ah thank you so much :)
It looks great! The placement and flow make sense to me, and as far as I understand that space would be occupied by other actions only during multiselect, and I think that's okay :)

Visually also it looks pretty good :) Only minor feedback from my end

• The icon for filter could be an MDI tune icon
• Instead of a toggle for the subject could it be a text input field, with a checkbox below that says "No subject" or something like that
• Additionally: if you entered text in the search field and then click on the filter icon, the subject could be prefilled with the value you entered
• I missed the "Important, unread, favourites" section in the beginning, possibly because it looks like a heading due to the placement. We could move it down below to the end, with the label "Marked as" and the 3 checkboxes
• For the "Search" and "Reset" buttons, it would be more in line with NC design if
  • the 2 buttons are justified justified to the right (right now they are at the center of the modal)
  • the primary button (Search) is on the right of the secondary button (Reset)
• Also I'm thinking we can replace the icon for "Reset" with an MDI replay icon or we could possibly keep the same icon and change the wording to "Clear", not sure about which to go with. Any preferences @jancborchardt?
• If possible we could also have a "Has attachments" checkbox? Could be pretty useful and Gmail also has one :)

Really nice work! :)

[jancborchardt]

Great feedback @nimishavijay, nothing to add! :)

Also I'm thinking we can replace the icon for "Reset" with an MDI replay icon or we could possibly keep the same icon and change the wording to "Clear", not sure about which to go with. Any preferences @jancborchardt?

Agree with your proposal of changing the wording to "Clear".

[sazanof]

@nimishavijay @jancborchardt HELLO!!!)

I removed the "Theme" switch altogether. it was initially present, as I was thinking of adding a "Body" switch in the future. So that you can choose why to search in the query:
Subject - off
Body - on

But since it's not possible to search through the body now, what's the point of one switch? Therefore, I think that by default, what was written in the search bar is searched in the Subject

please give feedback about corrected design =)

PS I will also try to make a filter by search date (sentdate)

[sazanof]

Hello everyone I will be glad if you take a look!

[nimishavijay]

Nice work! Super cool with the datetime picker :D

A few tiny changes:

• "Date interval" --> "Date"
• For the date time picker: How about instead of one field there are 2 separate fields for "from" and "to" dates on the same line? This way only one datetime picker is shown at a time so it's less busy :)
• "Search" button on the right of "Clear" button
• Clear button actually does look better with your original MDI close icon so we can so with that :)
• The entire "Marked as" row can be moved to the bottom, and we can also move "Has attachments" to the next row

Therefore, I think that by default, what was written in the search bar is searched in the Subject

This behaviour makes sense, I think we can also include the subject input field in the modal to easily make changes to the subject if needed. It can be the first item.

Really really nice work :)

[sazanof]

@nimishavijay
Thanks for the feedback! Take a look, give comments, please =)

[nimishavijay]

Looks great now! Only a couple of tiny changes:

• "Text" --> "Subject"
• We can remove the trailing ellipses ("...") from the placeholder text in the fields
• Swap the positions of "Search" and "Clear" buttons
• Many other clients don't have a time picker in their search so I think we can get rid of it
• "Pick a date and time" --> "Pick a start date" and "Pick an end date"

[sazanof]

Hello!
@nimishavijay
"Text" --> "Subject" - DONE
We can remove the trailing ellipses ("...") from the placeholder text in the fields - DONE
Swap the positions of "Search" and "Clear" buttons (they always jump over each other) - DONE
Many other clients don't have a time picker in their search so I think we can get rid of it - DONE
"Pick a date and time" --> "Pick a start date" and "Pick an end date" ......... I think it is not possible to change placeholder text without make changes in component
https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/DatetimePicker/DatetimePicker.vue#L305-L322

What else?

[jancborchardt]

Very very nice job @sazanof! :) Only minimal feedback:

• The modal needs a title (h2), inside the modal "Search in mailbox"
• Can the "x" close button also be placed inside the modal on the top right, or is that a component thing cc @GretaD ?
• The placeholder of "Subject" can then be changed to "Search term"
• The date placeholders would be more understandable as "Pick start date" and "Pick end date"
• The "Select recipient" placeholder could be individual to the field, like:
  • From: "Select sender"
  • To: "Select recipient"
  • Cc: "Select cc recipient"
  • Bcc: "Select bcc recipient"
• On the bottom "Favorite" is better as singular – "Marked as favorite"

Otherwise all good to go! :)

[sazanof]

Hi, @jancborchardt ! Thank you for review!
Surprize after updates =)
Now it remains to change the header a little and push the search here =)

I'm thinking of limiting myself to the search icon or showing the panel by clicking "search" icon.
Do you have any ideas?

The date placeholders would be more understandable as "Pick start date" and "Pick end date"

I think it is not possible to change placeholder text without make changes in component
https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/NcDatetimePicker/NcDatetimePicker.vue#L310-L327

[st3iny]

Help! Well, after update code to NcComponentTitle.vue from ComponentTitle.vue there are some visual inconsistencies with components Will this be corrected in the nexctoud-vue repository, or should I fix it here?

Don't worry, this is already fixed in nextcloud-vue.

[st3iny]

Tested and works.

The whole search uses the database, but I would like to add another switch "Message body"

That is a great idea! However, I'm currently not sure either how to implement it. IMO, we should move on with this PR and followup with improvements later.

[st3iny]

Out of curiosity: Are those changes required for the PR? They seem to be unrelated.

[sazanof]

That's right! I just wanted to vertically center the text "Loading messages"

[sazanof]

So, conflicts solved, css fixrd a little

[st3iny]

I'm not sure why the php tests fail. I'll investigate it a bit.

In the meantime, could you please fix all static analysis issues in your php code changes?
https://github.com/nextcloud/mail/actions/runs/3255416357/jobs/5344711652

[st3iny]

Tested and works! I love it!

Again, a big thank you from me and the rest of the Groupware team.

I added a couple of commits to fix styling and removed some dead debugging code. Could you please squash all commits (including my fixups) into one? Then we are ready to merge.

[sazanof]

@st3iny Thank you for help.

into one

I hope I did everything right

All points were addressed.

[miaulalala]

Thanks so much for your work, it is impressive!!!!! 🥳

[szaimen]

🎉🎉🎉🎉🎉