WIP: Real API calls

src/components/dialog/confirm/ConfirmBody.vue

@@ -2,13 +2,15 @@
   <div
     class="flex flex-col px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
   >
-    <p v-if="confirmationText">
+    <p v-if="promptText">
-      {{ confirmationText }}
+      {{ promptText }}
     </p>
   </div>
 </template>
 <script setup lang="ts">
+import type { MaybeRefOrGetter } from 'vue'
+
 defineProps<{
-  confirmationText?: string
+  promptText?: MaybeRefOrGetter<string>
 }>()
 </script>

src/platform/assets/components/AssetCard.vue

@@ -128,6 +128,7 @@ import EditableText from '@/components/common/EditableText.vue'
 import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
 import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { assetService } from '@/platform/assets/services/assetService'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
@@ -163,15 +164,14 @@ const { isLoading, error } = useImage({
   alt: asset.name
 })
 
-async function confirmDeletion() {
+function confirmDeletion() {
   dropdownMenuButton.value?.hide()
   const confirmDialog = showConfirmDialog({
     headerProps: {
       title: 'Delete this model?'
     },
     props: {
-      confirmationText:
+      promptText: 'This model will be permanently removed from your library.'
-        'This model will be permanently removed from your library.'
     },
     footerProps: {
       confirmText: 'Delete',
@@ -182,7 +182,13 @@ async function confirmDeletion() {
       onCancel: () => {
         closeDialog(confirmDialog)
       },
-      onConfirm: () => {
+      onConfirm: async () => {
+        try {
+          await assetService.deleteAsset(asset.id)
+          // TODO: Remove this from the list on success.
+        } catch (err: unknown) {
+          console.error(err)
+        }
         closeDialog(confirmDialog)
       }
     }
@@ -194,9 +200,12 @@ function startAssetRename() {
   isEditing.value = true
 }
 
-function assetRename(newName?: string) {
+async function assetRename(newName?: string) {
   isEditing.value = false
   if (newName) {
+    await assetService.updateAsset(asset.id, {
+      name: newName
+    })
     newNameRef.value = newName
   }
 }

src/platform/assets/services/assetService.ts

@@ -281,6 +281,32 @@ function createAssetService() {
     }
   }
 
+  /**
+   * Updae metadata of an asset by ID
+   * Only available in cloud environment
+   *
+   * @param id - The asset ID (UUID)
+   * @param newData - The data to update
+   * @returns Promise<void>
+   * @throws Error if update fails
+   */
+  async function updateAsset(
+    id: string,
+    newData: Partial<AssetMetadata>
+  ): Promise<string> {
+    const res = await api.fetchApi(`${ASSETS_ENDPOINT}/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(newData)
+    })
+
+    if (!res.ok) {
+      throw new Error(
+        `Unable to update asset ${id}: Server returned ${res.status}`
+      )
+    }
+    return res.json()
+  }
+
   /**
    * Retrieves metadata from a download URL without downloading the file
    *
@@ -360,6 +386,7 @@ function createAssetService() {
     getAssetDetails,
     getAssetsByTag,
     deleteAsset,
+    updateAsset,
     getAssetMetadata,
     uploadAssetFromUrl
   }