TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-22 12:03:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

(admin) defer display of images in storage view

Browse Source
This commit is contained in:
Valentyne Stigloher 2025-03-17 12:24:02 +01:00
parent 908d3e1518
commit 40a57edaf9
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/admin/AdminStorageItem.vue
View File

@ -9,20 +9,30 @@ const props = defineProps<{
const chunk = computed(() => props.itemKey.replace(/^.+:/, ''));
const isOpen = ref(false);
const contentUrl = computed(() => `/api/admin/storage/items/${props.itemKey}`);
const contentAsyncData = useFetch(contentUrl.value, {
immediate: false,
});
watch(isOpen, async () => {
if (isOpen.value) {
await contentAsyncData.execute();
}
});
const adminStorageRefresh = inject(adminStorageRefreshInjectionKey);
const dialogue = useDialogue();
const remove = async () => {
try {
await dialogue.confirm(`Are you sure you want to remove ${props.itemKey}?`, 'danger');
} catch (error) {
console.error(error);
return;
if (error === undefined) {
return;
}
throw error;
}
await $fetch(contentUrl.value, { method: 'DELETE' });
if (adminStorageRefresh) {
@ -32,7 +42,7 @@ const remove = async () => {
</script>
<template>
<details @toggle="$event.newState === 'open' ? contentAsyncData.execute() : undefined">
<details @toggle="isOpen = $event.newState === 'open'">
<summary>
<span class="py-1 d-inline-flex justify-content-between align-items-start">
<code>{{ chunk }}</code>
@ -46,8 +56,15 @@ const remove = async () => {
</summary>
<div class="ps-3">
<img v-if="itemKey.endsWith('.png')" :src="contentUrl" :alt="`Image content for storage key ${itemKey}`">
<pre v-else class="mb-0">{{ contentAsyncData.data }}</pre>
<template v-if="contentAsyncData.status.value === 'success'">
<img
v-if="itemKey.endsWith('.png')"
:src="contentUrl"
:alt="`Image content for storage key ${itemKey}`"
>
<pre v-else class="mb-0">{{ contentAsyncData.data }}</pre>
</template>
<Spinner v-else />
</div>
</details>
</template>