Switch to Vue.js

[korelstar]

This PR tracks the current work on switching to vuejs (see #241). There is a long way to go (the whole client-part has to be re-implemented) and for now, this reflects my first steps with vuejs, only. However, I want to be transparent, so that two people don't work on the same thing. I will make a detailed plan later and I should mention, that I'm very low on time for this. Any help is welcome, especially from experienced people.

I will update this first post in order to reflect the current state of implementation as well as the current plannings.

General

• Vue environment based on vueexample
• update building instructions in README.md
• minimize dependencies / JS Output (check with webpack-bundle-analyzer)
• review by vuejs-experienced people (from time to time and before merging)

Components and functionality

• App
  • Search: set notes filter
  • load default note or show welcome screen
• Router (will use Router from vue-router)
• NotesService (uses vuex)
  • load list of notes
  • extract categories from list of notes
  • error handling
• Routing (uses vue-router)
  • switch between notes
  • NEW: welcome screen if there are no notes, see First run experience #14
• Navigation (uses AppNavigation from nextcloud-vue)
  • New note
    • show button
    • action: create new note in current category and route to note
  • Categories
    • show categories from notes with notes count
    • sort categories
    • set label of collapsible to current note
    • action: set filter on notes list, close collapsible
  • Notes list
    • show notes
    • highlight current note
    • sort notes
    • filter notes by current category
    • filter notes by current search
    • group notes by category (if category filter is active)
    • action: favorite
    • action: delete
    • action: open note
    • NEW: action: show all notes in the category of a note
  • Settings
    • show/edit notes path
    • show/edit default extension
• Editor (see SimpleMDE maintenance status #204)
  • NEW: switch to EasyMDE
  • load current note
  • update window title
  • integrate editor
  • action: auto save
  • action: manual save
  • action: full-screen mode
  • warning when closing website if there are unsaved notes
  • NEW: show placeholder if note is empty
• NEW: sidebar (instead of status-bar)
  • show word count
  • show category
  • edit category
  • show existing categories as suggestion (using Multiselect from nextcloud-vue)
  • show and toggle favorite

Related Issues

• Fixes Move away from AngularJS, ideally to Vue.js (standard for Nextcloud apps) #241 (Move away from AngularJS)
• Fixes First run experience #14 (First run experience)
• Fixes Put star on the left side of the note #2 (Put star on the left side of the note)
• Fixes Last line of note partially obscured by status bar #296 (Last line of note partially obscured by status bar)
• Fixes Full-screen mode: scrolling not possible #279 (Full-screen mode: scrolling not possible)
• Fixes Markdown: New list item makes scrollbar appear until text is put in #119 (Markdown: New list item makes scrollbar appear until text is put in)
• Fixes when selecting text, the App navigation bar opens #282 (when selecting text, the sidebar opens)
• Fixes Weird editor behaviour when using Copy & Paste on text in Markdown syntax #199 (Weird editor behaviour when using Copy & Paste on text in Markdown syntax)
• Fixes Fit text horizontally #182 (Fit text horizontally)
• partly: SimpleMDE maintenance status #204 (SimpleMDE maintenance status)

[korelstar]

Okay, I don't want to wait any longer and there were no veto, so I'll merge this now. Any issues can be fixed in master, then.

I have found two issues which I would like to be fixed until the next release:

1. When executing make build-js-production, webpack complains about the asset size: the generated notes.js has 937 KiB. I have no idea how to fix this (create chunks?).
2. When installed on Nextcloud 16, there is a warning in the browser console, that @babel/polyfill is loaded more than once and that there may be some bad consequences if different version of the polyfills are applied sequentially. This warning doesn't appear on Nextcloud 15 though. However, I don't want to go without Polyfill due to heavy usage of ES6 in this project.

Any ideas or PRs are welcome, @nextcloud/vue :-)

[stefan-niedermann]

congratulations :) Indeed, there is no veto from me, the app looks great so far!

[PretentiousPotatoPeeler]

Congrats! Any idea when this will be included in a next release?

[korelstar]

There are still some issues open, that I would like to integrate in the next major release (see here: https://github.com/nextcloud/notes/milestone/9). However, I can't tell a concrete date for finishing this.