feat: optimize model editing

- close dialog after delete or rename
- keep editing if model update fails
- show more error message

src/components/DialogModelDetail.vue

@@ -72,8 +72,8 @@ const handleCancel = () => {
 }
 
 const handleSave = async (data: BaseModel) => {
-  editable.value = false
   await update(props.model, data)
+  editable.value = false
 }
 
 const handleDelete = async () => {

src/hooks/model.ts

@@ -7,7 +7,7 @@ import { cloneDeep } from 'lodash'
 import { app } from 'scripts/comfyAPI'
 import { bytesToSize, formatDate, previewUrlToFile } from 'utils/common'
 import { ModelGrid } from 'utils/legacy'
-import { resolveModelTypeLoader } from 'utils/model'
+import { genModelKey, resolveModelTypeLoader } from 'utils/model'
 import {
   computed,
   inject,
@@ -20,7 +20,7 @@ import {
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-export const useModels = defineStore('models', () => {
+export const useModels = defineStore('models', (store) => {
   const { data, refresh } = useRequest<Model[]>('/models', { defaultValue: [] })
   const { toast, confirm } = useToast()
   const { t } = useI18n()
@@ -28,6 +28,7 @@ export const useModels = defineStore('models', () => {
 
   const updateModel = async (model: BaseModel, data: BaseModel) => {
     const formData = new FormData()
+    let oldKey: string | null = null
 
     // Check current preview
     if (model.preview !== data.preview) {
@@ -45,6 +46,7 @@ export const useModels = defineStore('models', () => {
       model.fullname !== data.fullname ||
       model.pathIndex !== data.pathIndex
     ) {
+      oldKey = genModelKey(model)
       formData.append('type', data.type)
       formData.append('pathIndex', data.pathIndex.toString())
       formData.append('fullname', data.fullname)
@@ -59,19 +61,25 @@ export const useModels = defineStore('models', () => {
       method: 'PUT',
       body: formData,
     })
-      .catch(() => {
+      .catch((err) => {
+        const error_message = err.message ?? err.error
         toast.add({
           severity: 'error',
           summary: 'Error',
-          detail: 'Failed to update model',
+          detail: `Failed to update model: ${error_message}`,
           life: 15000,
         })
+        throw new Error(error_message)
       })
       .finally(() => {
         loading.hide()
       })
 
-    await refresh()
+    if (oldKey) {
+      store.dialog.close({ key: oldKey })
+    }
+
+    refresh()
   }
 
   const deleteModel = async (model: BaseModel) => {
@@ -90,6 +98,7 @@ export const useModels = defineStore('models', () => {
           severity: 'danger',
         },
         accept: () => {
+          const dialogKey = genModelKey(model)
           loading.show()
           request(`/model/${model.type}/${model.pathIndex}/${model.fullname}`, {
             method: 'DELETE',
@@ -101,6 +110,7 @@ export const useModels = defineStore('models', () => {
                 detail: `${model.fullname} Deleted`,
                 life: 2000,
               })
+              store.dialog.close({ key: dialogKey })
               return refresh()
             })
             .then(() => {
@@ -118,7 +128,9 @@ export const useModels = defineStore('models', () => {
               loading.hide()
             })
         },
-        reject: () => {},
+        reject: () => {
+          resolve(void 0)
+        },
       })
     })
   }