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

23
components/admin/AdminStorageItem.vue
View File

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