test

resources/js/components/forms/album/AlbumCreateDialog.vue

@@ -5,7 +5,7 @@
 				<p class="mb-5 px-9">{{ $t("lychee.TITLE_NEW_ALBUM") }}</p>
 				<div class="inline-flex flex-col gap-2 px-9">
 					<FloatLabel variant="on">
-						<InputText id="title" v-model="title" />
+						<InputText id="title" v-model="title" autofocus />
 						<label class="" for="title">{{ $t("lychee.ALBUM_TITLE") }}</label>
 					</FloatLabel>
 				</div>
@@ -25,7 +25,7 @@
 import AlbumService from "@/services/album-service";
 import Dialog from "primevue/dialog";
 import InputText from "@/components/forms/basic/InputText.vue";
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import FloatLabel from "primevue/floatlabel";
 import Button from "primevue/button";

resources/js/components/forms/basic/InputText.vue

@@ -10,6 +10,7 @@
 		:pt="props.pt"
 		:ptOptions="props.ptOptions"
 		:unstyled="props.unstyled"
+		:autofocus="props.autofocus"
 		@update:modelValue="($event) => emits('updated', $event)"
 	/>
 </template>
@@ -28,6 +29,7 @@ const props = defineProps<{
 	pt?: PassThrough<InputTextPassThroughOptions>;
 	ptOptions?: PassThroughOptions;
 	unstyled?: boolean;
+	autofocus?: boolean;
 	class?: string;
 }>();
 

resources/js/components/headers/AlbumHeader.vue

@@ -73,7 +73,7 @@
 <script setup lang="ts">
 import Button from "primevue/button";
 import Toolbar from "primevue/toolbar";
-import { computed, ref } from "vue";
+import { computed, ref, onMounted, onUnmounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 import UploadPanel from "@/components/modals/UploadPanel.vue";
 import { onKeyStroke } from "@vueuse/core";
@@ -127,6 +127,19 @@ const emits = defineEmits<{
 	toggleSlideShow: [];
 }>();
 
+
+onMounted(() => {
+	console.log('onMounted - AlbumHeader.vue');
+});
+
+onUnmounted(() => {
+	console.log('onUnmounted - AlbumHeader.vue');
+});
+
+onBeforeUnmount(() => {
+	console.log('onBeforeUnmount - AlbumHeader.vue');
+});
+
 function toggleUploadTrack() {
 	document.getElementById("upload_track_file")?.click();
 }
@@ -182,7 +195,17 @@ function refresh() {
 	emits("refresh");
 }
 
-onKeyStroke("n", () => !shouldIgnoreKeystroke() && (isCreateAlbumOpen.value = true));
+onKeyStroke("n", (e) =>
+{
+	console.log('AlbumHeader - onKeyStroke("n")');
+
+	if (shouldIgnoreKeystroke()) {
+		return;
+	}
+
+	e.preventDefault();
+	isCreateAlbumOpen.value = true;
+});
 onKeyStroke("u", () => !shouldIgnoreKeystroke() && (is_upload_visible.value = true));
 onKeyStroke("i", () => !shouldIgnoreKeystroke() && toggleDetails());
 onKeyStroke("l", () => !shouldIgnoreKeystroke() && props.user.id === null && (is_login_open.value = true));

resources/js/components/headers/AlbumsHeader.vue

@@ -1,7 +1,7 @@
 <template>
 	<LoginModal v-if="props.user.id === null" v-model:visible="is_login_open" @logged-in="refresh" @open-webauthn="isWebAuthnOpen = true" />
 	<WebauthnModal v-if="props.user.id === null && !isWebAuthnUnavailable" v-model:visible="isWebAuthnOpen" @logged-in="refresh" />
-	<!-- <UploadPanel v-if="canUpload" @refresh="refresh" key="upload_modal" /> -->
+	<UploadPanel v-if="canUpload" @refresh="refresh" key="upload_modal" />
 	<ImportFromServer v-if="canUpload" v-model:visible="isImportFromServerOpen" />
 	<ImportFromLink v-if="canUpload" v-model:visible="isImportFromLinkOpen" :parent-id="null" />
 	<DropBox v-if="canUpload" v-model:visible="isImportFromDropboxOpen" :album-id="null" />
@@ -94,7 +94,7 @@ import ImportFromLink from "@/components/modals/ImportFromLink.vue";
 import ImportFromServer from "@/components/modals/ImportFromServer.vue";
 import AlbumCreateDialog from "@/components/forms/album/AlbumCreateDialog.vue";
 import AlbumCreateTagDialog from "@/components/forms/album/AlbumCreateTagDialog.vue";
-import { computed, ComputedRef, ref } from "vue";
+import { computed, ComputedRef, ref, onBeforeUnmount, onMounted, onUnmounted } from "vue";
 import { onKeyStroke } from "@vueuse/core";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { isTouchDevice, shouldIgnoreKeystroke } from "@/utils/keybindings-utils";
@@ -129,6 +129,19 @@ const emits = defineEmits<{
 	help: [];
 }>();
 
+onMounted(() => {
+	console.log('onMounted - AlbumsHeader.vue');
+});
+
+onUnmounted(() => {
+	console.log('onUnmounted - AlbumsHeader.vue');
+});
+
+onBeforeUnmount(() => {
+	console.log('onBeforeUnmount - AlbumsHeader.vue');
+});
+
+
 // 'UPLOAD_PHOTO' => 'Upload Photo',
 // 	'IMPORT_LINK' => 'Import from Link',
 // 	'IMPORT_DROPBOX' => 'Import from Dropbox',
@@ -189,7 +202,19 @@ function openSearch() {
 	router.push({ name: "search" });
 }
 
-onKeyStroke("n", () => !shouldIgnoreKeystroke() && props.rights.can_upload && (isCreateAlbumOpen.value = true));
+onKeyStroke("n", (e) => {
+	console.log('AlbumsHeader - onKeyStroke("n")');
+	if (shouldIgnoreKeystroke()) {
+		return;
+	}
+
+	if (!props.rights.can_upload) {
+		return;
+	}
+
+	e.preventDefault();
+	isCreateAlbumOpen.value = true;
+});
 onKeyStroke("u", () => !shouldIgnoreKeystroke() && props.rights.can_upload && (is_upload_visible.value = true));
 onKeyStroke("l", () => !shouldIgnoreKeystroke() && props.user.id === null && (is_login_open.value = true));
 onKeyStroke("k", () => !shouldIgnoreKeystroke() && props.user.id === null && !isWebAuthnUnavailable.value && (isWebAuthnOpen.value = true));

resources/js/views/gallery-panels/Album.vue

@@ -166,7 +166,7 @@
 </template>
 <script setup lang="ts">
 import { useAuthStore } from "@/stores/Auth";
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, onUnmounted, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import AlbumThumbPanel from "@/components/gallery/AlbumThumbPanel.vue";
 import PhotoThumbPanel from "@/components/gallery/PhotoThumbPanel.vue";
@@ -331,6 +331,15 @@ const albumCallbacks = {
 	},
 };
 
+
+onMounted(() => {
+	console.log('onMounted - Album.vue');
+});
+
+onUnmounted(() => {
+	console.log('onUnmounted - Album.vue');
+});
+
 const { menu, Menu, photoMenuOpen, albumMenuOpen } = useContextMenu(
 	{
 		config: config,
@@ -380,19 +389,21 @@ window.addEventListener("dragover", dragEnd);
 window.addEventListener("drop", dropUpload);
 
 router.afterEach(() => {
-	window.removeEventListener("paste", onPaste);
-	window.removeEventListener("dragover", dragEnd);
-	window.removeEventListener("drop", dropUpload);
+ 	window.removeEventListener("paste", onPaste);
+ 	window.removeEventListener("dragover", dragEnd);
+ 	window.removeEventListener("drop", dropUpload);
 });
 
 watch(
 	() => route.params.albumid,
 	(newId, _oldId) => {
 		unselect();
 		albumid.value = newId as string;
+
 		window.addEventListener("paste", onPaste);
 		window.addEventListener("dragover", dragEnd);
 		window.addEventListener("drop", dropUpload);
+
 		refresh();
 	},
 );

resources/js/views/gallery-panels/Albums.vue

@@ -118,7 +118,7 @@
 <script setup lang="ts">
 import AlbumThumbPanel from "@/components/gallery/AlbumThumbPanel.vue";
 import { useAuthStore } from "@/stores/Auth";
-import { computed, ref } from "vue";
+import { computed, ref, onUnmounted, onMounted } from "vue";
 import AlbumsHeader from "@/components/headers/AlbumsHeader.vue";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
@@ -167,6 +167,15 @@ const { selectedAlbum, selectedAlbumsIdx, selectedAlbums, selectedAlbumsIds, alb
 const { isDeleteVisible, toggleDelete, isMergeAlbumVisible, toggleMergeAlbum, isMoveVisible, toggleMove, isRenameVisible, toggleRename } =
 	useGalleryModals(is_upload_visible);
 
+
+onMounted(() => {
+	console.log('onMounted - Albums.vue');
+});
+
+onUnmounted(() => {
+	console.log('onUnmounted - Albums.vue');
+});
+
 // Unused.
 const photoCallbacks = {
 	star: () => {},
@@ -230,6 +239,7 @@ const { onPaste, dragEnd, dropUpload } = useMouseEvents(rootRights, is_upload_vi
 window.addEventListener("paste", onPaste);
 window.addEventListener("dragover", dragEnd);
 window.addEventListener("drop", dropUpload);
+
 router.afterEach(() => {
 	window.removeEventListener("paste", onPaste);
 	window.removeEventListener("dragover", dragEnd);

vite.config.ts

@@ -25,6 +25,38 @@ const baseConfig =   {
       },
     }),
     i18n(),
+	{
+		name: 'develop-rewrite-middleware',
+		configureServer(server) {
+
+          const viteIndexPath = '/vite/index.html';
+
+		  server.middlewares.use((req, res, next) => {
+			if (!req.url) {
+				next();
+				return;
+			}
+
+			if (req.url === '/') {
+              req.url = viteIndexPath;
+			}
+
+			if (req.url === '/settings') {
+              req.url = viteIndexPath;
+			}
+
+			if (req.url === '/diagnostics') {
+				req.url = viteIndexPath;
+			}
+
+			if (req.url.startsWith('/gallery')) {
+			  req.url = viteIndexPath
+			}
+
+			next();
+		  });
+		}
+	  }
   ],
   server: {
     watch: {
@@ -39,7 +71,7 @@ const baseConfig =   {
         "**/vendor/**",
         "**/presets/**",
       ],
-    },
+    }
   },
   resolve: {
     alias: {