move validation to form

src/components/graph/selectionToolbox/nodeModelsMetadata/NodeModelsPopover.vue

@@ -1,8 +1,8 @@
 <template>
-  <template v-if="selectedModelNode">
+  <template v-if="node">
     <div ref="contentRef" class="flex flex-col overflow-y-auto px-4 py-2">
-      <div class="mb-2">
-        {{ $t('nodeMetadata.models.title') }}
+      <div class="mb-2 flex items-center justify-between">
+        <span>{{ $t('nodeMetadata.models.title') }}</span>
       </div>
       <div class="flex flex-col gap-2">
         <template
@@ -12,12 +12,10 @@
           <ModelForm
             :model="model"
             :index="index"
-            :is-first="index === 0"
+            :node-id="node.id"
             :is-last="isLastModel(index)"
-            :show-save-button="shouldShowSaveButton(index)"
-            @submit="submitModel(index, $event)"
             @remove="removeModel(index)"
-            @add="nodeModels.push({ name: '', url: '', directory: '' })"
+            @add="addEmptyModel"
           />
         </template>
         <div v-if="nodeModels.length === 0" class="flex items-center">
@@ -27,17 +25,9 @@
               icon="pi pi-plus"
               text
               size="small"
-              @click="nodeModels.push({ name: '', url: '', directory: '' })"
+              @click="addEmptyModel"
             />
           </div>
-          <Button
-            type="submit"
-            icon="pi pi-check"
-            severity="primary"
-            size="small"
-            v-tooltip="$t('nodeMetadata.models.save')"
-            form="node-models-form"
-          />
         </div>
       </div>
     </div>
@@ -45,25 +35,34 @@
 </template>
 
 <script setup lang="ts">
-import type { FormSubmitEvent } from '@primevue/forms'
+import { LGraphNode } from '@comfyorg/litegraph'
 import { useResizeObserver } from '@vueuse/core'
 import Button from 'primevue/button'
-import { useToast } from 'primevue/usetoast'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { onMounted, ref } from 'vue'
 
 import ModelForm from '@/components/graph/selectionToolbox/nodeModelsMetadata/ModelForm.vue'
 import type { ModelFile } from '@/schemas/comfyWorkflowSchema'
-import { app } from '@/scripts/app'
 import { useCanvasStore } from '@/stores/graphStore'
 import { isModelNode } from '@/utils/litegraphUtil'
 
-const { t } = useI18n()
-const toast = useToast()
 const canvasStore = useCanvasStore()
 
 const contentRef = ref<HTMLElement>()
+const nodeModels = ref<ModelFile[]>([])
+const node = ref<LGraphNode | null>(null)
+
+const isLastModel = (index: number) => index === nodeModels.value.length - 1
 const formatMaxHeight = (top: number) => `calc(100vh - ${top}px)`
+
+const addEmptyModel = () => {
+  nodeModels.value.push({ name: '', url: '', directory: '' })
+}
+const removeModel = (index: number) => {
+  nodeModels.value.splice(index, 1)
+  const models = node.value?.properties?.models as ModelFile[]
+  if (models) models.splice(index, 1)
+}
+
 useResizeObserver(contentRef, () => {
   if (contentRef.value) {
     contentRef.value.style.maxHeight = formatMaxHeight(
@@ -72,52 +71,12 @@ useResizeObserver(contentRef, () => {
   }
 })
 
-const selectedModelNode = computed(() => {
+onMounted(() => {
   const nodes = canvasStore.selectedItems.filter(isModelNode)
-  if (!nodes.length) return null
-  return app.graph.getNodeById(nodes[0].id)
+  node.value = nodes[0]
+
+  if (node.value?.properties?.models) {
+    nodeModels.value = [...(node.value.properties.models as ModelFile[])]
+  }
 })
-
-const nodeModels = ref<ModelFile[]>([
-  ...((selectedModelNode.value?.properties?.models as ModelFile[]) ?? [])
-])
-
-const isEmpty = computed(() => nodeModels.value.length === 0)
-const isLastModel = (index: number) => index === nodeModels.value.length - 1
-const shouldShowSaveButton = (index: number) =>
-  isLastModel(index) || isEmpty.value
-
-const updateNodeProperties = () => {
-  if (!selectedModelNode.value) return
-  if (!selectedModelNode.value.properties) {
-    selectedModelNode.value.properties = {}
-  }
-  selectedModelNode.value.properties.models = nodeModels.value
-}
-
-const removeModel = (index: number) => {
-  nodeModels.value.splice(index, 1)
-  updateNodeProperties()
-}
-
-const submitModel = (index: number, event: FormSubmitEvent) => {
-  if (event.valid) {
-    try {
-      nodeModels.value[index] = event.values
-      updateNodeProperties()
-      toast.add({
-        severity: 'success',
-        summary: t('nodeMetadata.models.modelUpdated'),
-        life: 3000
-      })
-    } catch (error) {
-      toast.add({
-        severity: 'error',
-        summary: t('nodeMetadata.models.modelUpdateFailed'),
-        detail: error instanceof Error ? error.message : String(error),
-        life: 3000
-      })
-    }
-  }
-}
 </script>