Fix duplicate upload + add scroll remembering (LycheeOrg#2693)

resources/js/components/diagnostics/ConfigurationsDiagnostics.vue

@@ -9,7 +9,7 @@ import { ref } from "vue";
 import Panel from "primevue/panel";
 import DiagnosticsService from "@/services/diagnostics-service";
 
-const configs = ref(undefined as string[] | undefined);
+const configs = ref<string[] | undefined>(undefined);
 
 function load() {
 	DiagnosticsService.config().then((response) => {

resources/js/components/diagnostics/ErrorsDiagnostics.vue

@@ -12,7 +12,7 @@ import { ref } from "vue";
 import Panel from "primevue/panel";
 import DiagnosticsService from "@/services/diagnostics-service";
 
-const errors = ref(undefined as App.Http.Resources.Diagnostics.ErrorLine[] | undefined);
+const errors = ref<App.Http.Resources.Diagnostics.ErrorLine[] | undefined>(undefined);
 
 function load() {
 	DiagnosticsService.errors().then((response) => {

resources/js/components/diagnostics/InfoDiagnostics.vue

@@ -9,7 +9,7 @@ import { ref } from "vue";
 import Panel from "primevue/panel";
 import DiagnosticsService from "@/services/diagnostics-service";
 
-const infos = ref(undefined as string[] | undefined);
+const infos = ref<string[] | undefined>(undefined);
 
 function load() {
 	DiagnosticsService.info().then((response) => {

resources/js/components/diagnostics/SpaceDiagnostics.vue

@@ -13,7 +13,7 @@ import Panel from "primevue/panel";
 import DiagnosticsService from "@/services/diagnostics-service";
 
 const requested = ref(false);
-const space = ref(undefined as string[] | undefined);
+const space = ref<string[] | undefined>(undefined);
 
 function load() {
 	requested.value = true;

resources/js/components/drawers/AlbumEdit.vue

@@ -78,18 +78,16 @@ import AlbumDelete from "@/components/forms/album/AlbumDelete.vue";
 import AlbumMove from "../forms/album/AlbumMove.vue";
 import AlbumTransfer from "../forms/album/AlbumTransfer.vue";
 import AlbumShare from "../forms/album/AlbumShare.vue";
-import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
 
 const props = defineProps<{
 	album: App.Http.Resources.Models.AlbumResource | App.Http.Resources.Models.SmartAlbumResource | App.Http.Resources.Models.TagAlbumResource;
 	config: App.Http.Resources.GalleryConfigs.AlbumConfig;
 }>();
 
-const lycheeStore = useLycheeStateStore();
-lycheeStore.init();
-
-const { are_details_open } = storeToRefs(lycheeStore);
+const togglableStore = useTogglablesStateStore();
+const { are_details_open } = storeToRefs(togglableStore);
 
 const activeTab = ref(0);
 const numUsers = ref(0);

resources/js/components/drawers/AlbumStatistics.vue

@@ -88,9 +88,9 @@ const props = defineProps<{
 const { getStatistics } = useAlbumsStatistics();
 
 const photosData = ref(getStatistics(props.photos));
-const totalAlbumSpace = ref(undefined as undefined | App.Http.Resources.Statistics.Album);
+const totalAlbumSpace = ref<App.Http.Resources.Statistics.Album | undefined>(undefined);
 
-const total = ref(undefined as undefined | TotalAlbum);
+const total = ref<TotalAlbum | undefined>(undefined);
 
 if (props.config.is_model_album) {
 	StatisticsService.getTotalAlbumSpace(props.album.id).then((response) => {

resources/js/components/drawers/PhotoEdit.vue

@@ -82,13 +82,13 @@ const props = defineProps<{
 const toast = useToast();
 const isEditOpen = defineModel("isEditOpen", { default: false }) as Ref<boolean>;
 
-const photo_id = ref(undefined as string | undefined);
-const title = ref(undefined as string | undefined);
-const description = ref(undefined as string | undefined);
-const uploadDate = ref(undefined as Date | undefined);
-const tags = ref([] as string[]);
-const license = ref(undefined as SelectOption<App.Enum.LicenseType> | undefined);
-const uploadTz = ref(undefined as string | undefined);
+const photo_id = ref<string | undefined>(undefined);
+const title = ref<string | undefined>(undefined);
+const description = ref<string | undefined>(undefined);
+const uploadDate = ref<Date | undefined>(undefined);
+const tags = ref<string[]>([]);
+const license = ref<SelectOption<App.Enum.LicenseType> | undefined>(undefined);
+const uploadTz = ref<string | undefined>(undefined);
 
 // TODO: updating exif data later
 

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

@@ -1,5 +1,11 @@
 <template>
-	<Dialog v-model:visible="visible" pt:root:class="border-none" modal :dismissable-mask="true">
+	<Dialog
+		v-model:visible="is_create_album_visible"
+		pt:root:class="border-none"
+		modal
+		:dismissable-mask="true"
+		@close="is_create_album_visible = false"
+	>
 		<template #container="{ closeCallback }">
 			<div v-focustrap class="flex flex-col relative max-w-full text-sm rounded-md pt-9">
 				<p class="mb-5 px-9">{{ $t("lychee.TITLE_NEW_ALBUM") }}</p>
@@ -30,18 +36,22 @@ import { useRouter } from "vue-router";
 import FloatLabel from "primevue/floatlabel";
 import Button from "primevue/button";
 import { useToast } from "primevue/usetoast";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
+import { storeToRefs } from "pinia";
 
 const props = defineProps<{
 	parentId: string | null;
 }>();
 
-const visible = defineModel("visible", { default: false });
+const togglableStore = useTogglablesStateStore();
+const { is_create_album_visible } = storeToRefs(togglableStore);
+
 const parentId = ref(props.parentId);
 
 const toast = useToast();
 const router = useRouter();
 
-const title = ref(undefined as undefined | string);
+const title = ref<string | undefined>(undefined);
 
 const isValid = computed(() => title.value !== undefined && title.value.length > 0 && title.value.length <= 100);
 
@@ -56,7 +66,7 @@ function create() {
 	})
 		.then((response) => {
 			title.value = undefined;
-			visible.value = false;
+			is_create_album_visible.value = false;
 			AlbumService.clearCache(parentId.value);
 			router.push(`/gallery/${response.data}`);
 		})

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

@@ -1,5 +1,11 @@
 <template>
-	<Dialog v-model:visible="visible" pt:root:class="border-none" modal :dismissable-mask="true">
+	<Dialog
+		v-model:visible="is_create_tag_album_visible"
+		pt:root:class="border-none"
+		modal
+		:dismissable-mask="true"
+		@close="is_create_tag_album_visible = false"
+	>
 		<template #container="{ closeCallback }">
 			<div v-focustrap class="flex flex-col relative max-w-full text-sm rounded-md pt-9">
 				<p class="mb-5 px-9">{{ $t("lychee.NEW_TAG_ALBUM") }}</p>
@@ -42,17 +48,17 @@ import InputText from "@/components/forms/basic/InputText.vue";
 import Button from "primevue/button";
 import AutoComplete from "primevue/autocomplete";
 import { useToast } from "primevue/usetoast";
-
-const props = defineProps<{
-	visible: boolean;
-}>();
+import { useTogglablesStateStore } from "@/stores/ModalsState";
+import { storeToRefs } from "pinia";
 
 const toast = useToast();
 const router = useRouter();
-const visible = ref(props.visible);
 
-const title = ref(undefined as undefined | string);
-const tags = ref([] as string[]);
+const togglableStore = useTogglablesStateStore();
+const { is_create_tag_album_visible } = storeToRefs(togglableStore);
+
+const title = ref<string | undefined>(undefined);
+const tags = ref<string[]>([]);
 
 const isValid = computed(() => title.value !== undefined && title.value.length > 0 && title.value.length <= 100);
 
@@ -73,13 +79,6 @@ function create() {
 			toast.add({ severity: "error", summary: "Oups", detail: error.message });
 		});
 }
-
-watch(
-	() => props.visible,
-	(newVisible, _oldVisible) => {
-		visible.value = newVisible;
-	},
-);
 </script>
 <style lang="css">
 .p-inputchips-input {

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

@@ -34,8 +34,8 @@ const props = defineProps<{
 
 const toast = useToast();
 const router = useRouter();
-const titleMovedTo = ref(undefined as string | undefined);
-const destination_id = ref(undefined as string | undefined | null);
+const titleMovedTo = ref<string | undefined>(undefined);
+const destination_id = ref<string | undefined | null>(undefined);
 const confirmation = computed(() => sprintf(trans("lychee.ALBUM_MOVE"), props.album.title, titleMovedTo.value));
 const error_no_target = ref(false);
 

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

@@ -264,17 +264,17 @@ const toast = useToast();
 const is_model_album = ref(true);
 const albumId = ref("");
 const title = ref("");
-const description = ref(null as null | string);
-const photoSortingColumn = ref(undefined as SelectOption<App.Enum.ColumnSortingPhotoType> | undefined);
-const photoSortingOrder = ref(undefined as SelectOption<App.Enum.OrderSortingType> | undefined);
-const albumSortingColumn = ref(undefined as SelectOption<App.Enum.ColumnSortingAlbumType> | undefined);
-const albumSortingOrder = ref(undefined as SelectOption<App.Enum.OrderSortingType> | undefined);
-const photoLayout = ref(undefined as SelectOption<App.Enum.PhotoLayoutType> | undefined);
-const license = ref(undefined as SelectOption<App.Enum.LicenseType> | undefined);
-const copyright = ref(undefined as undefined | string);
-const tags = ref([] as string[]);
-const aspectRatio = ref(undefined as SelectOption<App.Enum.AspectRatioType> | undefined);
-const header_id = ref(undefined as HeaderOption | undefined);
+const description = ref<string | null>(null);
+const photoSortingColumn = ref<SelectOption<App.Enum.ColumnSortingPhotoType> | undefined>(undefined);
+const photoSortingOrder = ref<SelectOption<App.Enum.OrderSortingType> | undefined>(undefined);
+const albumSortingColumn = ref<SelectOption<App.Enum.ColumnSortingAlbumType> | undefined>(undefined);
+const albumSortingOrder = ref<SelectOption<App.Enum.OrderSortingType> | undefined>(undefined);
+const photoLayout = ref<SelectOption<App.Enum.PhotoLayoutType> | undefined>(undefined);
+const license = ref<SelectOption<App.Enum.LicenseType> | undefined>(undefined);
+const copyright = ref<string | undefined>(undefined);
+const tags = ref<string[]>([]);
+const aspectRatio = ref<SelectOption<App.Enum.AspectRatioType> | undefined>(undefined);
+const header_id = ref<HeaderOption | undefined>(undefined);
 
 const headersOptions = computed(() => {
 	const list: HeaderOption[] = [

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

@@ -36,7 +36,7 @@ const props = defineProps<{
 
 const toast = useToast();
 
-const perms = ref(undefined as undefined | App.Http.Resources.Models.AccessPermissionResource[]);
+const perms = ref<App.Http.Resources.Models.AccessPermissionResource[] | undefined>(undefined);
 
 function load() {
 	SharingService.get(props.album.id).then((response) => {

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

@@ -33,7 +33,7 @@ const props = defineProps<{
 }>();
 
 const router = useRouter();
-const newOwner = ref(undefined as undefined | App.Http.Resources.Models.LightUserResource);
+const newOwner = ref<App.Http.Resources.Models.LightUserResource | undefined>(undefined);
 const confirmation = computed(() =>
 	sprintf(
 		"Are you sure you want to transfer to %s the ownership of album “%s” and all the photos it contains? Your access to this album will be lost.",

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

@@ -33,14 +33,14 @@ const props = defineProps<{
 	albumId: string | undefined;
 }>();
 
-const albumId = ref(props.albumId ?? (null as string | null));
+const albumId = ref<string | null>(props.albumId ?? null);
 const emits = defineEmits<{
 	selected: [target: App.Http.Resources.Models.TargetAlbumResource];
 	"no-target": [];
 }>();
 
-const options = ref(undefined as undefined | App.Http.Resources.Models.TargetAlbumResource[]);
-const selectedTarget = ref(undefined as App.Http.Resources.Models.TargetAlbumResource | undefined);
+const options = ref<App.Http.Resources.Models.TargetAlbumResource[] | undefined>(undefined);
+const selectedTarget = ref<App.Http.Resources.Models.TargetAlbumResource | undefined>(undefined);
 
 function load() {
 	AlbumService.getTargetListAlbums(albumId.value).then((response) => {

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

@@ -42,9 +42,9 @@ const emits = defineEmits<{
 	"no-target": [];
 }>();
 
-const options = ref(undefined as undefined | App.Http.Resources.Models.LightUserResource[]);
-const selectedTarget = ref(undefined as App.Http.Resources.Models.LightUserResource | undefined);
-const userList = ref(undefined as App.Http.Resources.Models.LightUserResource[] | undefined);
+const options = ref<App.Http.Resources.Models.LightUserResource[] | undefined>(undefined);
+const selectedTarget = ref<App.Http.Resources.Models.LightUserResource | undefined>(undefined);
+const userList = ref<App.Http.Resources.Models.LightUserResource[] | undefined>(undefined);
 
 function load() {
 	UsersService.get().then((response) => {

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

@@ -55,8 +55,8 @@ const emits = defineEmits<{
 }>();
 
 const toast = useToast();
-const titleMovedTo = ref(undefined as string | undefined);
-const destination_id = ref(undefined as string | undefined | null);
+const titleMovedTo = ref<string | undefined>(undefined);
+const destination_id = ref<string | undefined | null>(undefined);
 const error_no_target = ref(false);
 const confirmation = computed(() => {
 	if (props.album) {

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

@@ -55,8 +55,8 @@ const emits = defineEmits<{
 }>();
 
 const toast = useToast();
-const titleMovedTo = ref(undefined as string | undefined);
-const destination_id = ref(undefined as string | undefined | null);
+const titleMovedTo = ref<string | undefined>(undefined);
+const destination_id = ref<string | undefined | null>(undefined);
 const error_no_target = ref(false);
 
 function selected(target: App.Http.Resources.Models.TargetAlbumResource) {

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

@@ -42,7 +42,7 @@ const emits = defineEmits<{
 	updated: [];
 }>();
 
-const title = ref(undefined as undefined | string);
+const title = ref<string | undefined>(undefined);
 
 const question = computed(() => {
 	if (props.photo) {

resources/js/components/forms/photo/PhotoCopyDialog.vue

@@ -52,8 +52,8 @@ const emits = defineEmits<{
 }>();
 
 const toast = useToast();
-const titleCopyTo = ref(undefined as string | undefined);
-const destination_id = ref(undefined as string | undefined | null);
+const titleCopyTo = ref<string | undefined>(undefined);
+const destination_id = ref<string | undefined | null>(undefined);
 const error_no_target = ref(false);
 
 function selected(target: App.Http.Resources.Models.TargetAlbumResource) {

resources/js/components/forms/photo/PhotoTagDialog.vue

@@ -66,7 +66,7 @@ const question = computed(() => {
 });
 
 const shallOverride = ref(false);
-const tags = ref([] as string[]);
+const tags = ref<string[]>([]);
 
 function close() {
 	visible.value = false;

resources/js/components/forms/profile/ApiToken.vue

@@ -65,7 +65,7 @@ import { useToast } from "primevue/usetoast";
 const visible = defineModel<boolean>();
 
 const isDisabled = ref(true);
-const token = ref(undefined as undefined | string);
+const token = ref<string | undefined>(undefined);
 const tokenText = ref("");
 const toast = useToast();
 

resources/js/components/forms/profile/SetLogin.vue

@@ -74,12 +74,12 @@ import { trans } from "laravel-vue-i18n";
 
 const isApiTokenOpen = ref(false);
 
-const user = ref(undefined as undefined | App.Http.Resources.Models.UserResource);
-const oldPassword = ref(undefined as undefined | string);
-const username = ref(undefined as undefined | string);
-const password = ref(undefined as undefined | string);
-const password_confirmation = ref(undefined as undefined | string);
-const email = ref(undefined as undefined | string);
+const user = ref<App.Http.Resources.Models.UserResource | undefined>(undefined);
+const oldPassword = ref<string | undefined>(undefined);
+const username = ref<string | undefined>(undefined);
+const password = ref<string | undefined>(undefined);
+const password_confirmation = ref<string | undefined>(undefined);
+const email = ref<string | undefined>(undefined);
 
 const loginTitle = computed(() => trans("lychee.PROFILE"));
 

resources/js/components/forms/profile/SetOauth.vue

@@ -39,7 +39,7 @@ type OauthData = {
 	icon: string;
 };
 
-const oauths = ref(undefined as undefined | OauthData[]);
+const oauths = ref<OauthData[] | undefined>(undefined);
 const title = computed(() => {
 	if (oauths.value === undefined) {
 		return trans("lychee.LOADING");

resources/js/components/forms/profile/SetSecondFactor.vue

@@ -31,7 +31,7 @@ import { trans } from "laravel-vue-i18n";
 import Button from "primevue/button";
 import Fieldset from "primevue/fieldset";
 
-const u2f = ref(undefined as App.Http.Resources.Models.WebAuthnResource[] | undefined);
+const u2f = ref<App.Http.Resources.Models.WebAuthnResource[] | undefined>(undefined);
 const toast = useToast();
 
 const isWebAuthnUnavailable = computed(() => WebAuthnService.isWebAuthnUnavailable());

resources/js/components/forms/settings/BoolField.vue

@@ -26,7 +26,7 @@ const props = defineProps<{
 	config: App.Http.Resources.Models.ConfigResource;
 }>();
 
-const val = ref((props.config.value === "1") as boolean);
+const val = ref<boolean>(props.config.value === "1");
 
 const changed = computed(() => val.value !== (props.config.value === "1"));
 

resources/js/components/forms/settings/NumberField.vue

@@ -37,7 +37,7 @@ const props = defineProps<{
 	config: App.Http.Resources.Models.ConfigResource;
 }>();
 
-const val = ref(Number(props.config.value));
+const val = ref<number>(Number(props.config.value));
 
 const changed = computed(() => val.value !== Number(props.config.value));