Frontend: Upgrade Vuetify from v1.5 to v3.7

[dennisameling]

Description

As a developer, I want to use the current stable versions of Vue and Vuetify so that I have access to the latest features, user interface components, and bug fixes.

Acceptance Criteria

• Vue and Vuetify MUST be upgraded to the latest stable versions, along with all required dependencies
• All currently implemented functionality MUST continue to work as before
• User interface performance and loading time MUST NOT be negatively affected by the upgrade
• The upgraded frontend MAY look different based on the design changes introduced with Vuetify 3
• The upgraded frontend MUST work in the latest Firefox, Safari and Chrome browser versions
• The upgraded frontend MUST be fully responsive for compatibility with mobile and desktop devices
• Existing unit and acceptance tests MUST run successfully without errors
• Existing documentation, e.g. in the developer guide, SHOULD be updated as needed
• The browser console SHOULD not display any errors or warnings
• Any remaining issues that are not blockers MUST be fully documented so that they can be resolved later

Frontend Templates and Components

The following user interface templates and components need to be checked for compatibility with Vue and Vuetify 3 and, if necessary, updated to ensure they continue to work as expected:

• Application Layout
  • v-app
  • v-content
• Components
  • PNavigation in "component/navigation.vue"
  • PNotify in "component/notify.vue"
  • PLoadingBar in "component/loading-bar.vue"
  • PScrollTop in "component/scroll-top.vue"
  • PAuthHeader in "component/auth/header.vue"
  • PAuthFooter in "component/auth/footer.vue"
  • PPhotoViewer in "component/photo-viewer.vue"
  • PVideoPlayer in "component/video/player.vue"
  • PPhotoToolbar in "component/photo/toolbar.vue"
  • PPhotoCards in "component/photo/cards.vue"
  • PPhotoMosaic in "component/photo/mosaic.vue"
  • PPhotoList in "component/photo/list.vue"
  • PPhotoPreview in "component/photo/preview.vue"
  • PPhotoClipboard in "component/photo/clipboard.vue"
  • PAlbumClipboard in "component/album/clipboard.vue"
  • PAlbumToolbar in "component/album/toolbar.vue"
  • PLabelClipboard in "component/label/clipboard.vue"
  • PFileClipboard in "component/file/clipboard.vue"
  • PSubjectClipboard in "component/subject/clipboard.vue"
  • PAboutFooter in "component/footer.vue"
  • IconLivePhoto in "component/icon/live-photo.vue"
  • IconSponsor in "component/icon/sponsor.vue"
  • IconPrism in "component/icon/prism.vue"
• Pages
  • Photos in "page/photos.vue"
  • Albums in "page/albums.vue"
  • AlbumPhotos in "page/album/photos.vue"
  • Places in "page/places.vue";
  • Browse in "page/library/browse.vue"
  • Errors in "page/library/errors.vue"
  • Labels in "page/labels.vue"
  • People in "page/people.vue"
  • Library in "page/library.vue"
  • Settings in "page/settings.vue"
  • Admin in "page/admin.vue"
  • Login in "page/auth/login.vue"
  • Discover in "page/discover.vue"
  • About in "page/about/about.vue"
  • Feedback in "page/about/feedback.vue"
  • License in "page/about/license.vue"
  • Help in "page/help.vue"
  • Connect in "page/connect.vue"
• Dialogs
  • PVideoViewer in "dialog/video/viewer.vue"
  • PConfirmDialog in "dialog/confirm.vue"
  • PServiceAddDialog in "dialog/service/add.vue"
  • PServiceRemoveDialog in "dialog/service/remove.vue"
  • PServiceEditDialog in "dialog/service/edit.vue"
  • PPhotoArchiveDialog in "dialog/photo/archive.vue"
  • PPhotoAlbumDialog in "dialog/photo/album.vue"
  • PPhotoEditDialog in "dialog/photo/edit.vue"
  • PPhotoDeleteDialog in "dialog/photo/delete.vue"
  • PFileDeleteDialog in "dialog/file/delete.vue"
  • PAlbumEditDialog in "dialog/album/edit.vue"
  • PAlbumDeleteDialog in "dialog/album/delete.vue"
  • PLabelDeleteDialog in "dialog/label/delete.vue"
  • PPeopleMergeDialog in "dialog/people/merge.vue"
  • PUploadDialog in "dialog/upload.vue"
  • PShareDialog in "dialog/share.vue"
  • PShareUploadDialog in "dialog/share/upload.vue"
  • PWebdavDialog in "dialog/webdav.vue"
  • PReloadDialog in "dialog/reload.vue"
  • PSponsorDialog in "dialog/sponsor.vue"
  • PAccountAppsDialog in "dialog/account/apps.vue"
  • PAccountPasscodeDialog in "dialog/account/passcode.vue"
  • PAccountPasswordDialog in "dialog/account/password.vue"

Documentation

Vue Migration

• https://v3-migration.vuejs.org/ (from Vue v2 to v3)

Vuetify Migration

• https://v2.vuetifyjs.com/en/getting-started/upgrade-guide/ (from v1.5 to v2)
• https://vuetifyjs.com/en/getting-started/upgrade-guide/ (from v2 to v3)
• https://vuetifyjs.com/en/features/blueprints/ (Vuetify 3 design system)

Developer Guide

• https://docs.photoprism.app/developer-guide/ui/introduction/
• https://docs.photoprism.app/developer-guide/ui/infinite-scrolling/
• https://docs.photoprism.app/developer-guide/ui/maps/
• https://docs.photoprism.app/developer-guide/tests/#acceptance-tests

Related Issues

• Upgrade to Vuetify 2 #886
• Places: Upgrade MapLibre GL JS from v3.6 to v5.1 #4058
• UX: Add a hybrid Photo/Video Viewer (Lightbox) #1307
• UX: Restore scroll position when navigating back #2648
• UI: Pseudo-virtualize mosaic, cards and list view #2292
• UI: Deduplication of photo cards, mosaic and list view components #2434

Screenshots

Cards View

Photo Edit Dialog

Settings Page

Hybrid Photo/Video Viewer

3D Globe View in Places

[lastzero]

I assume we will need to update Vuetify to v3 along with Vue to do this? However, that will be a bigger task to say the least. It will also involve testing and updating all of our custom frontend CSS, as the base classes and styles will change...

[alexislefebvre]

See

• Upgrade to Vuetify 2 #886

(for some reason GitHub shows a nice link only when putting the id in a bullet list)