Move app to Vue.js

[raimund-schluessler]

I started migrating the app to Vue.js now.

Basically nothing is functional at the moment, but the build is working and the store and the router are in place and operative. Furthermore, all templates are rudimentary moved to vue (the angular attributes are still present as a memory aid) and the collections are loaded from the server.

Any feedback is appreciated, especially on:

• how to load the tasks from the server (shared caldav library?)
• how to keep the tasks in the store

I guess @skjnldsv and @georgehrke might want to have a look ;)

Things left to do for feature parity with the angular version:

• Only show root tasks as root tasks, not all tasks in a calendar
• Implement sorting the tasks
• Check that sort direction is the same as in master
• Fix sorting by priority
• Implement standard sort order
• Actually load tasks from server, store changes there (create, edit and delete)
• Actually load calendars from server, store changes there (create, edit and delete)
• Only show calendars with VTODO property set
• Specify color on calendar creation
• Check that a calendar name is only used once
• Create calendars with VTODO component only
• Get the correct readOnly state from the server
• Only load uncompleted tasks on initial app load
• Load completed subtasks when opening task details view
• Allow to select date and time for due and start date (needs date- and timepickers for Vue)
• Directly copy the url of a calendar on click (don't show an input element)
• Implement client-side search
• Implement drag- and drop of tasks to other tasks or calendars
• Implement week view
• Show categories/tags in the details view
• Linkify links in the summary and note
• Fix this warning: @babel/polyfill is loaded more than once on this page. This is probably not desirable/intended and may have consequences if different versions of the polyfills are applied sequentially. If you do need to load the polyfill more than once, use @babel/polyfill/noConflict instead to bypass the warning.
• Check performance of Array.filter()
• Check size of bundle https://chrisbateman.github.io/webpack-visualizer/

Things to improve over the previous version:

• Fix date input format Manual date input expects wrong format #21, Display date according to locale [Feature Request] Display date according to locale #45
• Fix client side search Search broken #22
• Fix dark theme Adjust app for dark theme #218
• Allow to select a default list [Feature Request] Set a default list #26
• Speed up the app App is very slow with many tasks #27
• Implement deleting multiple/all completed tasks [Feature Request] Bulk deletion of completed tasks. #69
• Add markdown support for notes field [Feature Request] Markdown support #76
• Fix drag and drop Drag and drop broken #78
• Show subtasks with due/start date properly in week/today view Subtasks don't display properly in "Today" and "Week" Smart Collections #83
• Make the app work in IE IE11 : nothing appears #92
• Allow to change calendar of task in details view Add option to change calendar/list of existing tasks in properties sidebar #97
• Improve highlighting selected task Highlight selected task / mouse over highlighting (maybe use priority colours) #104
• Implement colorpicker Implement colorpicker instead of random color button #110
• Return task icon by function Return task icon type by function #113
• Show important subtasks on parents star icon Indicate wether a parent's subtasks is important on the star icon #115
• Rework category feature Rework category/tags css  #117
• Allow to create tasks without latin characters Unable to create task list without latin alphanumeric characters in the name #148
• Fix plural handling Add plural handling to e.g. 5 minutes #150
• Remove js maps Safari 11: app.min.js.map, 404 (Not Found), Chrome works #151
• Fix calendar list order List order is random #152
• Reconsider angular expression vs ng-bind Angular expression evaluation vs. ng-bind directive #160
• Fix saving due date after task creation Due date not saved directly after task creation #167
• Fix invalid priority value Invalid priority value #180

[skjnldsv]

Quick look and feedbacks :)

• you should use the same makefile functiosn names than the other nc app for clarification accross all of our apps. Easier for people to understand ;)
• Please also ouse the same directory structure than the other. You can find a vue template here and a vue nc app example here (very rough one we used as a sandbox, but maybe you will find this interesting :)

You can also take a look at the contacts migration, we set up very strict coding rules and config files to make sure e have the cleanest app possible: https://github.com/nextcloud/contacts/tree/vue 🤗

Questions:

• why still use gulp, webpack should be enough? I'm not the most expert in gulp, so I have no idea of the advantages of having both :)

[raimund-schluessler]

Thanks for the feedback. 😃

you should use the same makefile functiosn names than the other nc app for clarification accross all of our apps. Easier for people to understand ;)

I will have a look.

Please also ouse the same directory structure than the other.

Means, the vue/js files should be in src?

why still use gulp, webpack should be enough?

I would like to get rid of it as well. It currently is used to compile the sprite file and concat the scss files. I will have a look how to do this with webpack only.

[skjnldsv]

Means, the vue/js files should be in src?

Yes :)

I would like to get rid of it as well. It currently is used to compile the sprite file and concat the scss files. I will have a look how to do this with webpack only.

Well, you can create a single tasks.scss app which import all the other scss, the server will then compile a single file ;)
For the sprite file, I have no idea :(

[raimund-schluessler]

I improved the webpack configuration, basically copied your webpack config from contacts. I couldn't get rid of gulp completely yet, but it might be possible by using a plain npm module. I still have to adjust the makefile, though.

[skjnldsv]

I couldn't get rid of gulp completely yet, but it might be possible by using a plain npm module. I still have to adjust the makefile, though.

Maybe it's just required for your setup then :)
It's not necessarily a pasbad thing ;)

[raimund-schluessler]

I could get rid of Gulp, svg-sprite is used as a plain node module now. The config looks quite a bit cleaner now.

[raimund-schluessler]

Moved to #194 (comment).

[raimund-schluessler]

@skjnldsv @georgehrke Is this a good solution to filter VTODO calendars or should this be in the CDAV library?

[skjnldsv]

Congrats!!! 🎉

[nachoparker]

Many thanks for this! can't wait to try it out

[dmp1ce]

Wow! I just received v0.10.0 and I can now use my tasks tab again. Thank you and nice work!

[Orhideous]

Works like a charm. Thank you!

[nachoparker]

thank you, it works very well. Just two little points that I'll address in other issues but performance is so much better

[michalroxorpl]

Hello everyone, this modification is absolute awesome :-), thank you for making my live better with it.
I only wish, there would be a better support for subtasks / markdown understanding in terms of how new subtasks are recognized.
The nextcloud tasks addon requires following format of subtasks:
- [ ] description
However, the OpenTasks android application supported by nextcloud / dav sync uses following format:
[ ] description

This small difference makes what is added in an OpenTasks app as a subtask visible as text on the nextcloud tasks subpage, on the other hand inserting a Markdown formatted subtask / internal task on nextcloud tasks subpage produces a non-formatted string with square brackets, that is not understood as subtask and not rendered correctly by OpenTasks.

I am not sure if I should request any modification here or on OpenTasks's project page; if I knew what and where to modify I could test it immediately on my NC installation.

I tought it might be somewhere in tasks.js file, but it looks too complicated for me.
I'll be grateful for any suggestions.

[raimund-schluessler]

@michalroxorpl Could you please create a separate issue for this? Maybe we can adjust the configuration of the Markdown plugin we use to also recognize tasks without the leading dash.

[raimund-schluessler]

@michalroxorpl I just had a quick look at the markdown-it documentation and it seems a list item has to start with -, + or * (and tasks are list items as well).

So while all of this

- [ ] Test0
+ [ ] Test1
* [ ] Test2

will be a task item, omitting the leading -, + or * is not following the markdown standard. So it would be best to adjust the behaviour of OpenTasks. Please file an issue there.