Finalise Vuetify app as SPA

We want to turn AlekSIS frontend into an SPA finally. To do so, we need to find a way to still incorporate legacy views.

The rough plan is:

• Turn the Vuetify base template into a Vuetify component that is used as base component for all views
• Remove all decorations and the whole outer UI from the Materialize base template
• Implement menu generation in Vue, based on the routes in Vue router
• Make a generic component that loads legacy fragments from Django and renders them in an iframe
  • This requires correct handling of URL routes on both sides

TODOS:

• Routes with permissions (@yuha)
• Page Title/Favicon
• fix Sidenav Search
• Browser Titles
• fix highlighting in sidenav
• Vue Router 404
• Custom Footer Menu
• Fix iframe viewport size/breaking points
• make SPA reload user-related information as soon as login happens
• Language form in sidenav
• basic SW fixes
• Include routes from apps
• Include messages from apps
• end Impersonation in account menu
• introduce handling of failing queries due to network issues
• Additional rules for views
• Tests
  • Test with Alsijil: Messages, Course book (@yuha)
  • Test Sentry integration
  • Test Docker build
  • Test regular deployment steps and update handbook
  • Test dev environment setup steps and update handbook
• Nicer 404
• Check translations (en and de, @hansegucker)
• Test progress page (@hansegucker)
• change whoAmI resolver (DummyPerson when admin and no Person)/change handling of null whoAmI response (@yuha)
• anonymous user graphQL errors and faulty message when not logged in
• faulty login URLs
• Importing of messages does not work for vite production mode (since imports directories resulting from virtual modules are not evaluated properly in messages.js)
• reconsider handling of graphql errors when network connection is lost (ping query?) (@yuha)
• show user if offline (@yuha)
• Find and define a clean way to set page titles in components
• Refetch/Invalidate all querys (like whoAmI etc.) on login/logout/impersonate (@yuha)
  • Purge Apollo cache completely!
• Admin has Login- and SignUp-Button, despite being logged in or having signup disabled, due to reliance on permissions/rules only (the permission check for an admin is always true)
• External links are opened within iframe
• Factor out local GraphQL definitions into separate file
• Factor out Apollo configuration, utility code, etc. into separate files
• Most important encapsulations:
  • Everything that is specific to legacy pages is in LegacyBaseComponent
  • All utility code offered to components is in the AleksisVue plugin
  • Can we get rid of window.app?
• Pass GraphQL endpoint from Django
• Fix query importing (do not use require, maybe do not use ApolloQuery too much)
• Person page without data given (e. g. when offline & data not cached) is completely empty without any information
• add revisioning to additional precache paths
• Fix type errors in SideNav
• Fix type error in Additional Image (if person.secondaryImageUrl passed from PersonOverview is null)

changed due date to December 16, 2022

added part::frontend workflow::discussing labels

assigned to @yuha

added #760 (closed) as child task

added #761 (closed) as child task

added #762 (closed) as child task

added #763 (closed) as child task

added #764 (closed) as child task

created branch 759-finalise-vuetify-app-as-spa to address this issue

mentioned in merge request !1123 (merged)

mentioned in merge request !1124 (closed)

mentioned in issue #766 (closed)

changed the description

marked the checklist item end Impersonation in account menu as completed

marked the checklist item Nicer 404 as completed

marked the checklist item faulty login URLs as completed

marked the checklist item anonymous user graphQL errors and faulty message when not logged in as completed

changed the description

marked the checklist item Importing of messages does not work for vite production mode (since imports directories resulting from virtual modules are not evaluated properly in messages.js) as completed

marked the checklist item basic SW fixes as completed

changed the description

changed the description

changed the description

changed the description

changed the description

marked the checklist item change whoAmI resolver (DummyPerson when admin and no Person)/change handling of null whoAmI response (@yuha) as completed

changed the description

marked the checklist item Test progress page (@hansegucker) as completed

changed the description

changed the description

changed the description

marked the checklist item Check translations (en and de, @hansegucker) as completed

marked the checklist item External links are opened within iframe as completed

marked the checklist item Find and define a clean way to set page titles in components as completed

changed the description

marked the checklist item Admin has Login- and SignUp-Button, despite being logged in or having signup disabled, due to reliance on permissions/rules only (the permission check for an admin is always true) as completed

marked the checklist item show user if offline (@yuha) as completed

marked the checklist item reconsider handling of graphql errors when network connection is lost (ping query?) (@yuha) as completed

created branch 759-finalise-vuetify-app-as-spa-2 to address this issue

changed the description

changed the description

marked the checklist item Factor out Apollo configuration, utility code, etc. into separate files as completed

marked the checklist item Factor out local GraphQL definitions into separate file as completed