From 1c5d92b36bab89989f1e839822860b61e259470d Mon Sep 17 00:00:00 2001
From: The4thLaw <The4thLaw@users.noreply.github.com>
Date: Tue, 26 Mar 2024 19:44:11 +0100
Subject: [PATCH] Replaced vue-portal with Teleports.

Refs #156
---
 source/demyo-vue-frontend/package-lock.json     | 17 -----------------
 source/demyo-vue-frontend/package.json          |  1 -
 .../src/components/AppTasks.vue                 |  4 ++--
 .../src/layouts/DefaultLayout.vue               |  8 ++++----
 source/demyo-vue-frontend/src/main.js           |  3 ---
 .../src/pages/albums/AlbumView.vue              |  4 ++--
 .../src/pages/series/SeriesView.vue             |  9 ++++-----
 .../tests/unit/pages/albums/AlbumView.spec.js   |  3 +--
 8 files changed, 13 insertions(+), 36 deletions(-)

diff --git a/source/demyo-vue-frontend/package-lock.json b/source/demyo-vue-frontend/package-lock.json
index b932c783..cd8f0f2b 100644
--- a/source/demyo-vue-frontend/package-lock.json
+++ b/source/demyo-vue-frontend/package-lock.json
@@ -18,7 +18,6 @@
         "filepond-plugin-image-preview": "^4.6.11",
         "lodash": "^4.17.20",
         "pinia": "^2.1.7",
-        "portal-vue": "^3.0.0",
         "roboto-fontface": "^0.10.0",
         "tiny-async-pool": "^2.1.0",
         "vue": "^3.4.21",
@@ -7695,22 +7694,6 @@
         "pathe": "^1.1.0"
       }
     },
-    "node_modules/portal-vue": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-3.0.0.tgz",
-      "integrity": "sha512-9eprMxNURLx6ijbcgkWjYNcTWJYu/H8QF8nyAeBzOmk9lKCea01BW1hYBeLkgz+AestmPOvznAEOFmNuO4Adjw==",
-      "engines": {
-        "node": ">=14.19"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.4"
-      },
-      "peerDependenciesMeta": {
-        "vue": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
diff --git a/source/demyo-vue-frontend/package.json b/source/demyo-vue-frontend/package.json
index 9ce8a252..111f6cbb 100644
--- a/source/demyo-vue-frontend/package.json
+++ b/source/demyo-vue-frontend/package.json
@@ -26,7 +26,6 @@
     "filepond-plugin-image-preview": "^4.6.11",
     "lodash": "^4.17.20",
     "pinia": "^2.1.7",
-    "portal-vue": "^3.0.0",
     "roboto-fontface": "^0.10.0",
     "tiny-async-pool": "^2.1.0",
     "vue": "^3.4.21",
diff --git a/source/demyo-vue-frontend/src/components/AppTasks.vue b/source/demyo-vue-frontend/src/components/AppTasks.vue
index 1968f42d..650d42ee 100644
--- a/source/demyo-vue-frontend/src/components/AppTasks.vue
+++ b/source/demyo-vue-frontend/src/components/AppTasks.vue
@@ -1,5 +1,5 @@
 <template>
-	<portal to="appTasks">
+	<Teleport to="#teleport-appTasks">
 		<v-menu v-model="inputVal">
 			<template #activator="{ props }">
 				<v-btn variant="text" icon="mdi-dots-vertical" v-bind="props" />
@@ -8,7 +8,7 @@
 				<slot />
 			</v-list>
 		</v-menu>
-	</portal>
+	</Teleport>
 </template>
 
 <script>
diff --git a/source/demyo-vue-frontend/src/layouts/DefaultLayout.vue b/source/demyo-vue-frontend/src/layouts/DefaultLayout.vue
index ebd9e2cf..b084462c 100644
--- a/source/demyo-vue-frontend/src/layouts/DefaultLayout.vue
+++ b/source/demyo-vue-frontend/src/layouts/DefaultLayout.vue
@@ -6,7 +6,7 @@
 			width="33vw" mobile-breakpoint="sm"
 			:disable-resize-watcher="true"
 		>
-			<portal-target name="appSidePane" />
+			<div id="teleport-appSidePane" />
 		</v-navigation-drawer>
 
 		<!-- Once https://github.com/vuetifyjs/vuetify/issues/16150 is resolved, switch back to 20em -->
@@ -94,15 +94,15 @@
 					</div>
 				</v-expand-x-transition>
 			</template>
-			<portal-target name="appBarAddons" />
-			<portal-target name="appTasks" />
+			<div id="teleport-appBarAddons" />
+			<div id="teleport-appTasks" />
 		</v-app-bar>
 
 		<v-main id="l-DefaultLayout__mainContent">
 			<!-- First part of the details pane management -->
 			<v-dialog v-if="$vuetify.display.smAndDown" v-model="displayDetailsPane">
 				<v-card>
-					<portal-target name="appSidePane" />
+					<div id="teleport-appSidePane" />
 				</v-card>
 			</v-dialog>
 			<v-container id="l-DefaultLayout__mainContainer" fluid>
diff --git a/source/demyo-vue-frontend/src/main.js b/source/demyo-vue-frontend/src/main.js
index 5477be77..75707b5b 100644
--- a/source/demyo-vue-frontend/src/main.js
+++ b/source/demyo-vue-frontend/src/main.js
@@ -1,5 +1,4 @@
 import '@mdi/font/css/materialdesignicons.css'
-import portalVue from 'portal-vue'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import { createApp } from 'vue'
 // From https://gitlab.com/totol.toolsuite/vue-3-fullscreen-image
@@ -27,8 +26,6 @@ app.mixin({
 
 app.use(router)
 app.use(i18n)
-// TODO: Vue 3: migrate to teleport (?)
-app.use(portalVue)
 app.use(vuetify)
 app.use(fullscreenImagePlugin)
 
diff --git a/source/demyo-vue-frontend/src/pages/albums/AlbumView.vue b/source/demyo-vue-frontend/src/pages/albums/AlbumView.vue
index 895c3f2a..78d0706a 100644
--- a/source/demyo-vue-frontend/src/pages/albums/AlbumView.vue
+++ b/source/demyo-vue-frontend/src/pages/albums/AlbumView.vue
@@ -1,8 +1,8 @@
 <template>
 	<v-container fluid>
-		<portal v-if="!loading" to="appBarAddons">
+		<Teleport v-if="!loading" to="#teleport-appBarAddons">
 			<FavouriteButton :model-id="album.id" type="Album" />
-		</portal>
+		</Teleport>
 
 		<AppTasks v-if="!loading" v-model="appTasksMenu">
 			<AppTask
diff --git a/source/demyo-vue-frontend/src/pages/series/SeriesView.vue b/source/demyo-vue-frontend/src/pages/series/SeriesView.vue
index 422c9447..9b50cf76 100644
--- a/source/demyo-vue-frontend/src/pages/series/SeriesView.vue
+++ b/source/demyo-vue-frontend/src/pages/series/SeriesView.vue
@@ -1,8 +1,8 @@
 <template>
 	<v-container fluid>
-		<portal v-if="!loading" to="appBarAddons">
+		<Teleport v-if="!loading" to="#teleport-appBarAddons">
 			<FavouriteButton :model-id="series.id" type="Series" />
-		</portal>
+		</Teleport>
 
 		<AppTasks v-if="!loading" v-model="appTasksMenu">
 			<AppTask
@@ -373,15 +373,14 @@ export default {
 				})
 			}
 
-			// This is intentionnally async
-			this.loadAlbums()
+			void this.loadAlbums()
 
 			this.derivativeCount = await dcPromise
 
 			if (this.albumCount === 0 && this.derivativeCount > 0) {
 				// If there are no albums but there are derivatives, load the derivatives
 				this.currentTab = 1
-				this.loadDerivatives()
+				void this.loadDerivatives()
 			}
 		},
 
diff --git a/source/demyo-vue-frontend/tests/unit/pages/albums/AlbumView.spec.js b/source/demyo-vue-frontend/tests/unit/pages/albums/AlbumView.spec.js
index d1c9aa8d..864d7e60 100644
--- a/source/demyo-vue-frontend/tests/unit/pages/albums/AlbumView.spec.js
+++ b/source/demyo-vue-frontend/tests/unit/pages/albums/AlbumView.spec.js
@@ -1,6 +1,5 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
-import PortalVue from 'portal-vue'
 import VueRouter from 'vue-router'
 
 jest.mock('@/i18n', () => ({
@@ -22,9 +21,9 @@ jest.mock('@/services/album-service', () => ({
 // eslint-disable-next-line import/first
 import AlbumView from '@/pages/albums/AlbumView.vue'
 
+// TODO: Vue 3: fix unit tests. See https://vitest.dev/guide/migration.html#migrating-from-jest maybe
 const localVue = createLocalVue()
 localVue.use(VueRouter)
-localVue.use(PortalVue)
 const router = new VueRouter()
 
 describe('FormActions.vue', () => {