Use AppSidebar

[raimund-schluessler]

Move the right side details view to vue-components AppSidebar component. Requirement for future new features such as repeating tasks, since the sidebar runs out of space and tabs are necessary. Closes #664.

Needs the latest master of nextcloud-vue components.

Build to test the current state: tasks.tar.gz

Todo:

• Show start- and enddate and task list dropdown in AppSidebar header
• Correctly style all properties
• Add explicit option to edit title to dropdown (in case only a link is shown, there is not other way to edit it then)
• Move delete button into dropdown, closes Too easy to delete a task by mistake #1328
• Allow to clear status field
• Allow to download / export a single task, closes [Feature Request] Allow to download/export a single task #103
• Consistently style multiselect placeholders, closes inconsistent font family / size in task view #1061
• Add a link to the calendar if Calendar and show tasks in calendar are enabled, closes Add link to calendar for tasks with due date #803
• Check proper translation of multiselect placeholders, closes l10n: There is no translation of string text in Transifex #1248
• Fix last-modified and created time strings, check for valid dates, closes l10n: Capital letter w "last" #1414
• Check that the datepicker is shown correctly, closes Datepicker does not display sunday column #935
• Find solution for sync status indicator

Needs:

• Moving title when editing Prevent title with subtitle from moving when editing nextcloud-libraries/nextcloud-vue#1822
• Datepicker overflow fix Datepicker in sidebar cut-off at certain zoom levels nextcloud-libraries/nextcloud-vue#998
• Avatar component in calendar picker throws error Avatar errors with username is null nextcloud-libraries/nextcloud-vue#1856
• Prevent ActionLink overflow (a needs box-sizing: border-box;) ActionLink padding overflows Actions dropdown nextcloud-libraries/nextcloud-vue#1887
• Single action icon misaligned Single ActionLink icon misaligned when using MD icon nextcloud-libraries/nextcloud-vue#1884
• New major release of nextcloud/vue https://github.com/nextcloud/nextcloud-vue/milestone/60

Nice to have:

• Allow material design icons in AppSidebarTabs Allow material-design-icons in AppSidebarTabs nextcloud-libraries/nextcloud-vue#1859

I will move the following to follow-up PRs as this PR is already huge:

• Include the location field Include location field #7
• Show URL field [Feature Request] Add URL field to task detail #1079
• Show an undo timer when deleting a task prompt to delete a task or provide undo delete #1408
• Allow to edit created and completed date [Feature Request] Editable completed dates #1184
• Add tests for new components

[codecov]

Codecov Report

Merging #1030 (42b0387) into master (a072ab1) will increase coverage by 4.29%.
The diff coverage is 36.17%.

❗ Current head 42b0387 differs from pull request most recent head 0ab8d29. Consider uploading reports for the commit 0ab8d29 to get more accurate results

@@            Coverage Diff             @@
##           master    #1030      +/-   ##
==========================================
+ Coverage   27.95%   32.24%   +4.29%     
==========================================
  Files          48       54       +6     
  Lines        2740     2791      +51     
  Branches      536      537       +1     
==========================================
+ Hits          766      900     +134     
+ Misses       1827     1752      -75     
+ Partials      147      139       -8     

[szaimen]

and reworked the notes component to use the same logic as priority and dates. So I hope the issue of the notes not saving is resolved. Please have a look:

Great! Unfortunately, I can still reproduce this behaviour but I've found out that If I close the keyboard first and then click anywhere, it saves the changes that I've made. But this is of course a bit counter-intuitive...

[raimund-schluessler]

and reworked the notes component to use the same logic as priority and dates. So I hope the issue of the notes not saving is resolved. Please have a look:

Great! Unfortunately, I can still reproduce this behaviour but I've found out that If I close the keyboard first and then click anywhere, it saves the changes that I've made. But this is of course a bit counter-intuitive...

Hm, very weird. I use the same approach as for priority, progress and dates. And it works well for all devices I have available. I don't know if I can debug this.

[raimund-schluessler]

@szaimen In case you have access to the console, do you see anything regarding notes when clicking outside?

[szaimen]

No, there is unfortunately nothing in the logs. I've made a short video demonstrating this behaviour:
DevTools - 192.168.178.27_apps_tasks_#_collections_all_tasks_6B24C7EF-66EB-4679-B0D7-21805332D14D.ics 2021-04-28 13-03-24.zip

[raimund-schluessler]

No, there is unfortunately nothing in the logs. I've made a short video demonstrating this behaviour:
DevTools - 192.168.178.27_apps_tasks_#_collections_all_tasks_6B24C7EF-66EB-4679-B0D7-21805332D14D.ics 2021-04-28 13-03-24.zip

I can't really see where you click (or touch?) in this video. However, I will pack a test version which logs to the console when certain functions are called. Maybe we can figure out what is not called then.

[raimund-schluessler]

@szaimen And could you please test, if the note is saved when you click somewhere into the AppSidebar, e.g. onto the Notes tab?

[szaimen]

And could you please test, if the note is saved when you click somewhere into the AppSidebar, e.g. onto the Notes tab?

I've already done that. It's the same: the change only gets saved if I close the keyboard first.

[raimund-schluessler]

@szaimen I build a version which prints to the console when the sidebar is closed, when the notes, priority and dates are saved and when the components are unmounted or destroyed (which should lead to saving the edited value). Please have a look and let me know what the console shows when you edit a note.

tasks.tar.gz

If this also doesn't help to figure out the problem: Is the simulator you showed in the video freely available? Then I could just test it like you.

[szaimen]

I've figured out what the problem is. It seems to be related to the keyboard that seems to block any input due to the word suggestions. When I validate the word that I try to type or type in a space or backspace, everything in the notes field gets safed and hence it works.
But as long as it is only one word that isn't validated, yet, this error always occurs. Since this seems to be related to the way how inputs seem to work here (Android with chromium based browser and android keyboard), I guess this is no error that you can fix in the tasks app.
@raimund-schluessler Sry for this and thank you for your efforts!

[szaimen]

BTW: what you call a simulator is actually the official way how to debug Android Chromium sessions ;) So you would still need an Android phone to do this...

[raimund-schluessler]

I've figured out what the problem is. It seems to be related to the keyboard that seems to block any input due to the word suggestions. When I validate the word that I try to type or type in a space or backspace, everything in the notes field gets safed and hence it works.
But as long as it is only one word that isn't validated, yet, this error always occurs. Since this seems to be related to the way how inputs seem to work here (Android with chromium based browser and android keyboard), I guess this is no error that you can fix in the tasks app.
@raimund-schluessler Sry for this and thank you for your efforts!

Ok, thanks for having a look. Seems a bit unfortunate, but really sounds as if fixing in the Tasks app is difficult.
@szaimen I guess it doesn't work for the current version of the app either?

[raimund-schluessler]

BTW: what you call a simulator is actually the official way how to debug Android Chromium sessions ;) So you would still need an Android phone to do this...

Ah, alright. This wouldn't help much in my case 🙈

[szaimen]

@szaimen I guess it doesn't work for the current version of the app either?

Actually, somehow it seems to work there. So it always safes correctly with the current version...

[raimund-schluessler]

@szaimen Here comes my last try to fix this for now. I added back a @change handler which I removed during refactoring, but which is there in the current release. Maybe this makes a difference.

tasks.tar.gz

[szaimen]

Thanks! Unfortunately, it still doesn't work but since this error only occurs if you type in only one word, I guess it is fine 👍

[raimund-schluessler]

I will merge this now, since I want to go on with moving to material design icons and cleaning up the SCSS files. Feedback is still very welcome, we will handle it in follow-up PRs.

[szaimen]

🎉