refactor: improve setup and maintainability (#1067)

ui/src/components/form/JSONSchemaFormFields.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { Checkbox } from '@/components/ui/checkbox'
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+
+import { onMounted, ref, watch } from 'vue'
+
+import type { JSONSchema } from '@/lib/types'
+
+const model = defineModel<Record<string, any>>()
+
+const props = defineProps<{
+  schema: JSONSchema
+}>()
+
+const formdata = ref<Record<string, any>>({})
+
+onMounted(() => {
+  if (!model.value) return
+
+  for (const key in props.schema.properties) {
+    formdata.value[key] = model.value[key]
+  }
+})
+
+watch(
+  formdata,
+  (newVal) => {
+    model.value = { ...newVal }
+  },
+  { deep: true }
+)
+</script>
+
+<template>
+  <div v-for="(property, key) in schema.properties" :key="key">
+    <FormField
+      v-if="property.type === 'string'"
+      :name="key"
+      v-slot="{ componentField }"
+      v-model="formdata[key]"
+    >
+      <FormItem>
+        <FormLabel :for="key" class="text-right">
+          {{ property.title }}
+        </FormLabel>
+        <Input :id="key" class="col-span-3" v-bind="componentField" />
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <FormField
+      v-else-if="property.type === 'boolean'"
+      :name="key"
+      v-slot="{ value, handleChange }"
+      type="checkbox"
+      v-model="formdata[key]"
+    >
+      <FormItem class="flex flex-row items-start gap-x-3 space-y-0 py-4">
+        <FormControl>
+          <Checkbox :checked="value" @update:checked="handleChange" />
+        </FormControl>
+        <div class="space-y-1 leading-none">
+          <FormLabel>
+            {{ property.title }}
+          </FormLabel>
+          <FormMessage />
+        </div>
+      </FormItem>
+    </FormField>
+  </div>
+</template>