nobswebdev
ebe8b9aa2f
Replace min-h-screen on viewer and delete mains with flex-1 inside a growing router outlet.
60 lines
1.9 KiB
Vue
60 lines
1.9 KiB
Vue
<template>
|
|
<main class="mx-auto flex max-w-lg flex-1 flex-col items-center justify-center gap-3 p-8 text-center">
|
|
<p v-if="state === 'invalid'" class="text-sm text-muted-foreground">
|
|
This delete link is incomplete. Use the delete URL from your upload results.
|
|
</p>
|
|
|
|
<p v-else-if="state === 'deleting'" class="text-sm text-muted-foreground">Deleting image...</p>
|
|
|
|
<p v-else-if="state === 'deleted'" class="text-sm text-muted-foreground"> The image has been deleted. </p>
|
|
|
|
<p v-else-if="state === 'notFound'" class="text-sm text-muted-foreground"> This image was not found. </p>
|
|
|
|
<p v-else-if="state === 'error'" class="text-sm text-destructive">
|
|
Could not delete this image. Try again later.
|
|
</p>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import axios, { HttpStatusCode } from 'axios';
|
|
import { onBeforeMount, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useUploadStore } from '@/stores/upload';
|
|
import type { DeleteViewState } from '@/types/delete/DeleteViewState';
|
|
|
|
const route = useRoute();
|
|
const uploadStore = useUploadStore();
|
|
|
|
const state = ref<DeleteViewState>('deleting');
|
|
|
|
onBeforeMount(async () => {
|
|
const uploadId = route.params.id;
|
|
const deleteToken = route.query.token;
|
|
|
|
if (typeof uploadId !== 'string' || !uploadId || typeof deleteToken !== 'string' || !deleteToken) {
|
|
state.value = 'invalid';
|
|
|
|
return;
|
|
}
|
|
|
|
state.value = 'deleting';
|
|
|
|
try {
|
|
await uploadStore.deleteUpload(uploadId, deleteToken);
|
|
|
|
state.value = 'deleted';
|
|
} catch (error) {
|
|
if (axios.isAxiosError(error) && error.response?.status === HttpStatusCode.NotFound) {
|
|
state.value = 'notFound';
|
|
|
|
return;
|
|
}
|
|
|
|
console.error('[delete] failed', { uploadId, error });
|
|
|
|
state.value = 'error';
|
|
}
|
|
});
|
|
</script>
|