(admin) feature to delete storage items

components/admin/AdminStorageItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { formatSize } from '~/src/helpers.ts';
+import { adminStorageRefreshInjectionKey } from '~/src/injectionKeys.ts';
 
 const props = defineProps<{
     itemKey: string;
@@ -13,15 +14,33 @@ const contentUrl = computed(() => `/api/admin/storage/items/${props.itemKey}`);
 const contentAsyncData = useFetch(contentUrl.value, {
     immediate: false,
 });
+
+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;
+    }
+    await $fetch(contentUrl.value, { method: 'DELETE' });
+    if (adminStorageRefresh) {
+        await adminStorageRefresh();
+    }
+};
 </script>
 
 <template>
     <details @toggle="$event.newState === 'open' ? contentAsyncData.execute() : undefined">
         <summary>
-            <span class="py-1 d-inline-flex justify-content-between">
+            <span class="py-1 d-inline-flex justify-content-between align-items-start">
                 <code>{{ chunk }}</code>
                 <span>
                     <span class="badge text-bg-info">{{ formatSize(size) }}</span>
+                    <button type="button" class="btn btn-sm btn-outline-danger" @click="remove()">
+                        <Icon v="trash" />
+                    </button>
                 </span>
             </span>
         </summary>

pages/admin/storage.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import AdminStorageTree from '~/components/admin/AdminStorageTree.vue';
+import { adminStorageRefreshInjectionKey } from '~/src/injectionKeys.ts';
 
 const sizesAsyncData = useFetch('/api/admin/storage/sizes', { lazy: true });
 
+provide(adminStorageRefreshInjectionKey, sizesAsyncData.refresh);
+
 const tree = computed(() => {
     const tree = new Map();
     for (const [key, size] of Object.entries(sizesAsyncData.data.value ?? {})) {

server/api/admin/storage/items/[key].delete.ts

@@ -0,0 +1,18 @@
+export default defineEventHandler(async (event) => {
+    const { isGranted } = await useAuthentication(event);
+    if (!isGranted('code')) {
+        throw createError({
+            status: 401,
+            statusMessage: 'Unauthorised',
+        });
+    }
+
+    const key = getRouterParam(event, 'key');
+    if (key === undefined) {
+        throw createError({
+            status: 404,
+            statusMessage: 'Not Found',
+        });
+    }
+    await useStorage().removeItem(key);
+});

src/injectionKeys.ts

@@ -9,3 +9,5 @@ export const changeSourceInjectionKey = Symbol() as InjectionKey<{
     remove: (source: Source) => void;
     edit: (source: Source) => void;
 }>;
+
+export const adminStorageRefreshInjectionKey = Symbol() as InjectionKey<() => Promise<void>>;