Add Form Submit Functionality

client/src/components/NiceForm.vue

@@ -15,14 +15,16 @@ const props = defineModel<{
     }[],
   }[],
   modelValue: any,
+  submit: (value: any) => boolean,
+  discard: () => void,
 }>();
 
-let { sections } = $(props);
+let { sections, submit, discard } = $(props);
 
 </script>
 
 <template>
-  <ValidationForm as="div" v-slot="{ values }" @submit="false">
+  <ValidationForm as="form" v-slot="{ values }" @submit="submit">
     <template v-for="(section, index) in sections" :key="index">
       <h4 v-if="section.title">{{ section.title }}</h4>
       <div class="section">
@@ -35,17 +37,39 @@ let { sections } = $(props);
         </template>
       </div>
     </template>
+    <div class="actions">
+      <div class="flex-grow"/>
+      <button>Submit</button>
+      <div class="space"/>
+      <button @click="discard">Discard</button>
+      <div class="flex-grow"/>
+    </div>
     <p>{{ values }}</p>
   </ValidationForm>
 </template>
 
 <style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+}
 .section {
   display: grid;
   grid-template-columns: auto 1fr;
   padding: 0.5rem;
   gap: 0.5rem;
 }
+.actions {
+  flex-direction: row;
+}
+
+.space {
+  padding: 0.2rem;
+}
+
+.actions > button {
+  flex-grow: true;
+}
 
 h4,
 p {

client/src/definitions.ts

@@ -1,7 +1,8 @@
 export const editTypes: { [key: string]: { [key: string]: any } } = {
   "firewall": {
+    name: "Firewall",
     "forwardrules": {
-      title: "Forward Rule",
+      name: "ForwardRule",
       sections: [
         { 
           fields: [
@@ -15,8 +16,9 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
     },
   },
   "network": {
+    name: "Network",
     "interfaces": {
-      title: "Interfaces",
+      name: "Interface",
       sections: [
         {
           fields: [

client/src/pages/[subsystem]/[entity]/edit/[id].vue

@@ -14,11 +14,11 @@ async function update() {
 </script>
 <template>
   <div v-if="editTypes[subsystem][entity]">
-    <PageHeader :title="'Edit ' + editTypes[subsystem][entity].title">
+    <PageHeader :title="'Edit ' + editTypes[subsystem][entity].name">
       <button @click="update">Update</button>
       <button @click="$router.go(-1)">Discard</button>
     </PageHeader>
-    <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :sections="editTypes[subsystem][entity].sections" v-model="data"/>
+    <NiceForm class="scroll cl-secondary" :sections="editTypes[subsystem][entity].sections" v-model="data"/>
   </div>
   <div v-else>
     <PageHeader title="Error"/>

client/src/pages/[subsystem]/[entity]/edit/index.vue

@@ -1,23 +1,32 @@
 <script setup lang="ts">
 import { editTypes } from "../../../../definitions";
+import { apiCall } from "../../../../api";
+import { useToast } from 'vue-toast-notification';
+
+const $toast = useToast();
 
 const props = $defineProps<{subsystem: string, entity: string}>();
 const { subsystem, entity } = $(props);
 
 let data = $ref({});
 
-async function create() {
-  
+async function create(value: any) {
+  console.debug("value", value);
+  let res = await apiCall(editTypes[subsystem].name +".Create"+ editTypes[subsystem][entity].name, value);
+  if (res.Error === null) {
+    $toast.success("Created " + entity);
+    $router.go(-1)
+  } else {
+    console.debug("error", res);
+  }
 }
 
 </script>
 <template>
   <div v-if="editTypes[subsystem][entity]">
-    <PageHeader :title="'Edit ' + editTypes[subsystem][entity].title">
-      <button @click="create">Create</button>
-      <button @click="$router.go(-1)">Discard</button>
+    <PageHeader :title="'Create ' + editTypes[subsystem][entity].name">
     </PageHeader>
-    <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :sections="editTypes[subsystem][entity].sections" v-model="data"/>
+    <NiceForm class="scroll cl-secondary" :submit="create" :discard="() => $router.go(-1)" :sections="editTypes[subsystem][entity].sections" v-model="data"/>
   </div>
   <div v-else>
     <PageHeader title="Error"/>