Fix delete not working in Dock

resources/js/components/drawers/PhotoEdit.vue

@@ -1,8 +1,8 @@
 <template>
 	<Drawer v-model:visible="isEditOpen" :close-on-esc="false" position="right" pt:root:class="w-full p-card border-transparent">
-		<Card v-if="photo" id="lychee_sidebar" class="h-full pr-4 break-words max-w-4xl mx-auto">
+		<Card v-if="photo" id="lychee_sidebar" class="h-full pr-4 wrap-break-word max-w-4xl mx-auto">
 			<template #content>
-				<form class="w-full flex flex-col md:gap-y-4 md:grid md:grid-cols-[200px_minmax(auto,_1fr)] justify-center">
+				<form class="w-full flex flex-col md:gap-y-4 md:grid md:grid-cols-[200px_minmax(auto,1fr)] justify-center">
 					<label for="title" class="font-bold self-center">{{ $t("gallery.photo.edit.set_title") }}</label>
 					<InputText id="title" v-model="title" type="text" :invalid="!title" />
 

resources/js/components/forms/gallery-dialogs/DeleteDialog.vue

@@ -31,6 +31,7 @@ import Button from "primevue/button";
 import { useToast } from "primevue/usetoast";
 import { useRouter } from "vue-router";
 import { usePhotoRoute } from "@/composables/photo/photoRoute";
+import { usePhotoStore } from "@/stores/PhotoState";
 
 const toast = useToast();
 const props = defineProps<{
@@ -42,21 +43,25 @@ const props = defineProps<{
 
 const router = useRouter();
 const { getParentId } = usePhotoRoute(router);
+const photoStore = usePhotoStore();
 
 const visible = defineModel<boolean>("visible", { default: false });
 const emits = defineEmits<{
 	deleted: [];
 }>();
 
 const confirmation = computed(() => {
-	if (props.photo || (props.photoIds && props.photoIds?.length > 0)) {
+	if (photoStore.isLoaded || props.photo || (props.photoIds && props.photoIds?.length > 0)) {
 		return deleteConfirmationPhoto();
 	}
 
 	return deleteConfirmationAlbum();
 });
 
 function deleteConfirmationPhoto() {
+	if (photoStore.isLoaded) {
+		return sprintf(trans("dialogs.photo_delete.confirm"), photoStore!.photo!.title);
+	}
 	if (props.photo) {
 		return sprintf(trans("dialogs.photo_delete.confirm"), props.photo.title);
 	}
@@ -73,7 +78,7 @@ function deleteConfirmationAlbum() {
 function execute() {
 	visible.value = false;
 
-	if (props.photo || (props.photoIds && props.photoIds?.length > 0)) {
+	if (photoStore.isLoaded || props.photo || (props.photoIds && props.photoIds?.length > 0)) {
 		return executeDeletePhoto();
 	}
 
@@ -100,7 +105,9 @@ function executeDeleteAlbum() {
 
 function executeDeletePhoto() {
 	let photoDeletedIds = [];
-	if (props.photo) {
+	if (photoStore.isLoaded) {
+		photoDeletedIds.push(photoStore!.photo!.id);
+	} else if (props.photo) {
 		photoDeletedIds.push(props.photo.id);
 	} else {
 		photoDeletedIds = props.photoIds as string[];

resources/js/components/forms/gallery-dialogs/MoveDialog.vue

@@ -41,6 +41,7 @@ import Button from "primevue/button";
 import Dialog from "primevue/dialog";
 import { useRouter } from "vue-router";
 import { usePhotoRoute } from "@/composables/photo/photoRoute";
+import { usePhotoStore } from "@/stores/PhotoState";
 
 const props = defineProps<{
 	album?: App.Http.Resources.Models.ThumbAlbumResource;
@@ -52,6 +53,7 @@ const props = defineProps<{
 const router = useRouter();
 const { getParentId } = usePhotoRoute(router);
 const visible = defineModel<boolean>("visible", { default: false });
+const photoStore = usePhotoStore();
 
 const emits = defineEmits<{
 	moved: [];
@@ -95,13 +97,16 @@ const question = computed(() => {
 });
 
 const confirmation = computed(() => {
-	if (props.photo || (props.photoIds && props.photoIds?.length > 0)) {
+	if (photoStore.isLoaded || props.photo || (props.photoIds && props.photoIds?.length > 0)) {
 		return moveConfirmationPhoto();
 	}
 	return moveConfirmationAlbum();
 });
 
 function moveConfirmationPhoto() {
+	if (photoStore.isLoaded) {
+		return sprintf(trans("dialogs.move_photo.confirm"), photoStore!.photo!.title, titleMovedTo.value);
+	}
 	if (props.photo) {
 		return sprintf(trans("dialogs.move_photo.confirm"), props.photo.title, titleMovedTo.value);
 	}
@@ -117,7 +122,7 @@ function moveConfirmationAlbum() {
 
 function execute() {
 	visible.value = false;
-	if (props.photo || (props.photoIds && props.photoIds?.length > 0)) {
+	if (photoStore.isLoaded || props.photo || (props.photoIds && props.photoIds?.length > 0)) {
 		return executeMovePhoto();
 	}
 	executeMoveAlbum();
@@ -160,7 +165,9 @@ function executeMovePhoto() {
 		return;
 	}
 	let photoMovedIds = [];
-	if (props.photo) {
+	if (photoStore.isLoaded) {
+		photoMovedIds.push(photoStore!.photo!.id);
+	} else if (props.photo) {
 		photoMovedIds.push(props.photo.id);
 	} else {
 		photoMovedIds = props.photoIds as string[];

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

@@ -55,7 +55,7 @@
 	<template v-if="photoStore.isLoaded">
 		<PhotoEdit v-if="photoStore.rights?.can_edit" v-model:visible="is_photo_edit_open" />
 		<MoveDialog v-model:visible="is_move_visible" @moved="refresh" />
-		<DeleteDialog v-model:visible="is_delete_visible" @deleted="refresh" />
+		<DeleteDialog v-model:visible="is_delete_visible" @deleted="refresh(true)" />
 	</template>
 	<template v-else>
 		<PhotoTagDialog
@@ -211,8 +211,13 @@ async function load() {
 	photoStore.load();
 }
 
-async function refresh() {
+async function refresh(isDelete: boolean = false) {
 	await Promise.allSettled([layoutStore.load(), lycheeStore.load(), userStore.refresh(), albumStore.refresh()]);
+	if (isDelete) {
+		// If we have deleted a photo, we need to reset the photo store
+		router.push({ name: albumRoutes().album, params: { albumId: albumId.value } });
+		return;
+	}
 	photoStore.photoId = photoId.value;
 	photoStore.load();
 }