Some form handling

src/components/JsonSchemaForm.vue

@@ -2,16 +2,30 @@
 import Form from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
 import { applyPureReactInVue } from "veaury";
+import { FormEvent } from "react";
+import useMessenger from "@/message/messenger.composable";
 
 const VeauryForm = applyPureReactInVue(Form);
 
 defineProps<{
   schema: any;
   data: any;
-  onChange?: () => {};
-  onSubmit?: () => {};
-  onError?: () => {};
+  onChange?: (event: FormEvent, fieldId: string) => {};
+  onSubmit?: (event: FormEvent) => {};
 }>();
+
+type Error = {
+  message: string;
+  property: string;
+};
+
+const { alert } = useMessenger();
+
+function onError(errors: Error[]) {
+  errors.forEach((error) =>
+    alert(`${error.property.split(".").pop()} ${error.message}`, "error"),
+  );
+}
 </script>
 
 <template>
@@ -23,7 +37,7 @@ defineProps<{
     :formData="data"
     :onChange
     :onSubmit
-    :onError
+    :onError="onError"
     :experimental_defaultFormStateBehavior="{
       allOf: 'populateDefaults',
     }"
@@ -55,4 +69,7 @@ defineProps<{
 ::v-deep(.unsupported-field) {
   @apply bg-red-50;
 }
+::v-deep(.has-error) {
+  @apply bg-red-50;
+}
 </style>

src/corpus/config/SchemaConfig.vue

@@ -1,25 +1,30 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
 import Yaml from "js-yaml";
+import { FormEvent } from "react";
 import schema from "@/assets/sparvconfig.schema.json";
 import useCorpusIdParam from "@/corpus/corpusIdParam.composable";
-import useMessenger from "@/message/messenger.composable";
 import useConfig from "@/corpus/config/config.composable";
 import JsonSchemaForm from "@/components/JsonSchemaForm.vue";
 
-const router = useRouter();
 const corpusId = useCorpusIdParam();
-const { config, uploadConfig } = useConfig(corpusId);
-const { alert, alertError } = useMessenger();
-const { t } = useI18n();
+const { config, uploadConfigRaw } = useConfig(corpusId);
 
 const configParsed = computed(() =>
   config.value ? Yaml.load(config.value) : undefined,
 );
+
+async function onSubmit(event: FormEvent) {
+  const configYaml = Yaml.dump(event.formData);
+  await uploadConfigRaw(configYaml);
+}
 </script>
 
 <template>
-  <JsonSchemaForm v-if="configParsed" :schema="schema" :data="configParsed" />
+  <JsonSchemaForm
+    v-if="configParsed"
+    :schema="schema"
+    :data="configParsed"
+    :on-submit="onSubmit"
+  />
 </template>