Nice form (#11)

* wip

* vee-validate experiments

* get test enabled form working

* Make PillBar Properly work with ModelValue

* Register NumberBox Globally

* Rework NiceForm

* Use new form props

* Rework Definitions for new Form

client/src/components/NiceForm.vue

@@ -1,39 +1,61 @@
 <script setup lang="ts">
 
 const props = defineModel<{
+  title: string
+  sections: {
     title: string
     fields: {
       key: string,
       label: string,
-    component: () => Component,
+      as: string,
       props: any,
-  }[]
+      default: any,
+      enabled?: (values: Record<string, any>) => Boolean,
+      rules?: (value: any) => true | string,
+    }[],
+  }[],
+  modelValue: any,
 }>();
-let { title, fields } = $(props);
+
+let { sections } = $(props);
 
 </script>
 
 <template>
-  <div class="form">
+  <ValidationForm as="div" v-slot="{ values }" @submit="false">
-    <h2>{{ title }}</h2>
+    <template v-for="(section, index) in sections" :key="index">
-    <template v-for="(field, index) in fields" :key="index">
+      <h4 v-if="section.title">{{ section.title }}</h4>
-      <label :for="field.key" v-text="field.label"/>
+      <div class="section">
-      <component :name="field.key" :is="field.component()" v-bind="field.props"/>
+        <template v-for="(field, index) in section.fields" :key="index">
+          <template v-if="field.enabled ? field.enabled(values) : true">
+            <label :for="field.key" v-text="field.label" />
+            <Field :name="field.key" :as="field.as" :rules="field.rules" v-bind="field.props" />
+            <ErrorMessage :name="field.key" />
+          </template>
         </template>
       </div>
+    </template>
+    <p>{{ values }}</p>
+  </ValidationForm>
 </template>
 
 <style scoped>
-.form {
+.section {
   display: grid;
   grid-template-columns: auto 1fr;
   padding: 0.5rem;
   gap: 0.5rem;
 }
-.form > :is(button, .button, h2) {
+
+h4,
+p {
   grid-column: 1 / 3;
 }
-.form > :is(label) {
+
-  grid-column: 1;
+h4 {
+  background-color: var(--cl-bg-hl);
+  padding: 0.3rem;
+  padding-left: 0.5rem;
+  ;
 }
 </style>

client/src/components/inputs/PillBar.vue

@@ -10,25 +10,17 @@ const props = defineModel<{
 }>();
 let { options, modelValue } = $(props);
 
-const emit = defineEmits<{
+onMounted(async() => {
-  (event: 'selectionChanged'): void
+  if (modelValue === undefined) {
-}>();
+    modelValue = 0
-
-function select(option: any, index: number) {
-  for(let opt of options) {
-    opt.selected = false;
   }
-  option.selected = true;
+});
-  modelValue = index;
-  emit('selectionChanged');
-  console.debug("selected", options);
-}
 
 </script>
 
 <template>
   <div>
-    <button class="option" v-for="(option, index) in options" :key="index" :class="{selected:option.selected}" @click="select(option, index)">
+    <button class="option" v-for="(option, index) in options" :key="index" :class="{selected: modelValue == index}" @click="modelValue = index">
       <i class="material-icons" v-if="option.icon">{{ option.icon }}</i>
       {{ option.name }}
     </button>

client/src/definitions.ts

@@ -1,35 +1,42 @@
-import PillBar from "./components/inputs/PillBar.vue";
+export const editTypes: { [key: string]: { [key: string]: any } } = {
-import TextBox from "./components/inputs/TextBox.vue";
-import NumberBox from "./components/inputs/NumberBox.vue";
-import MultilineTextBox from "./components/inputs/MultilineTextBox.vue";
-import CheckBox from "./components/inputs/CheckBox.vue";
-
-export const editTypes: { [key: string]: {[key: string]: any} } = {
   "firewall": {
     "forwardrules": {
       title: "Forward Rule",
+      sections: [
+        { 
           fields: [
-          {key: "name", label: "Name", component: () => TextBox },
+          { key: "name", label: "Name", as: "TextBox" },
-          {key: "verdict", label: "Verdict", component: () => PillBar, props: {options: [{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]}},
+          { key: "verdict", label: "Verdict", as: "PillBar", props: { options: [{ name: 'Accept' }, { name: 'Drop' }, { name: 'Continue' }] } },
-          {key: "counter", label: "Counter", component: () => CheckBox },
+          { key: "counter", label: "Counter", as: "CheckBox", },
-          {key: "comment", label: "Comment", component: () => MultilineTextBox },
+          { key: "comment", label: "Comment", as: "MultilineTextBox", },
         ],
-      }
+      },
+      ],
+    },
   },
   "network": {
     "interfaces": {
       title: "Interfaces",
+      sections: [
+        {
           fields: [
-          {key: "name", label: "Name", component: () => TextBox },
+            { key: "name", label: "Name", as: "TextBox", default: "placeholder" },
-          {key: "type", label: "Type", component: () => PillBar, props: {options: [{name: 'Hardware', selected: true}, {name: 'VLAN'}, {name: 'Bond'}, {name: 'Brdige'}]}},
+            { key: "type", label: "Type", as: "PillBar", props: { options: [{ name: 'Hardware' }, { name: 'VLAN' }, { name: 'Bond' }, { name: 'Bridge' }] } },
-          {key: "hardware_interface", label: "Hardware Interface", component: () => TextBox },
+            { key: "hardware_interface", label: "Hardware Interface", as: "TextBox", enabled: (values: any) => (values["type"] == 0) },
-          {key: "vlan_id", label: "VLAN ID", component: () => NumberBox, props: {min: 1, max: 4094} },
+            { key: "vlan_id", label: "VLAN ID", as: "NumberBox", props: { min: 1, max: 4094 }, enabled: (values: any) => (values["type"] == 1) },
-          {key: "bond_members", label: "Nond Members", component: () => TextBox },
+            { key: "bond_members", label: "Bond Members", as: "TextBox", enabled: (values: any) => (values["type"] == 2) },
-          {key: "bridge_members", label: "Bridge Memebers", component: () => TextBox },
+            { key: "bridge_members", label: "Bridge Members", as: "TextBox", enabled: (values: any) => (values["type"] == 3) },
-          {key: "addressing_mode", label: "Addressing Mode", component: () => PillBar, props: {options: [{name: 'None', selected: true}, {name: 'Static'}, {name: 'DHCP'}]}},
+          ],
-          {key: "address", label: "Address", component: () => TextBox },
+        },
-          {key: "comment", label: "Comment", component: () => MultilineTextBox },
+        {
+          title: "Addressing",
+          fields: [
+            { key: "addressing_mode", label: "Addressing Mode", as: "PillBar", props: { options: [{ name: 'None', selected: true }, { name: 'Static' }, { name: 'DHCP' }] } },
+            { key: "address", label: "Address", as: "TextBox", enabled: (values: any) => (values["addressing_mode"] == 1) },
+            { key: "comment", label: "Comment", as: "MultilineTextBox" },
           ],
         }
+      ],
     },
-  };
+  },
+};

client/src/main.ts

@@ -5,6 +5,14 @@ import './global-styles/mlfe.css';
 import './global-styles/transitions.css';
 import 'vue-toast-notification/dist/theme-default.css';
 
+import PillBar from "./components/inputs/PillBar.vue";
+import TextBox from "./components/inputs/TextBox.vue";
+import NumberBox from "./components/inputs/NumberBox.vue";
+import MultilineTextBox from "./components/inputs/MultilineTextBox.vue";
+import CheckBox from "./components/inputs/CheckBox.vue";
+
+import { Form, Field, ErrorMessage  } from 'vee-validate';
+
 import App from './App.vue';
 import { createHead } from '@vueuse/head';
 import { createRouter, createWebHistory } from 'vue-router';
@@ -22,4 +30,14 @@ app.use(router);
 app.use(head);
 app.use(ToastPlugin);
 
+// Global Components
+app.component('PillBar', PillBar)
+app.component('TextBox', TextBox)
+app.component('NumberBox', NumberBox)
+app.component('MultilineTextBox', MultilineTextBox)
+app.component('CheckBox', CheckBox)
+app.component('ValidationForm', Form)
+app.component('Field', Field)
+app.component('ErrorMessage', ErrorMessage)
+
 app.mount('#app');

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

@@ -5,6 +5,8 @@ import { editTypes } from "../../../../definitions";
 const props = $defineProps<{subsystem: string, entity: string, id: string}>();
 const { subsystem, entity, id } = $(props);
 
+let data = $ref({} as {});
+
 async function update() {
   
 }
@@ -16,7 +18,7 @@ async function update() {
       <button @click="update">Update</button>
       <button @click="$router.go(-1)">Discard</button>
     </PageHeader>
-    <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields"/>
+    <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :sections="editTypes[subsystem][entity].sections" v-model="data"/>
   </div>
   <div v-else>
     <PageHeader title="Error"/>

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

@@ -4,6 +4,8 @@ import { editTypes } from "../../../../definitions";
 const props = $defineProps<{subsystem: string, entity: string}>();
 const { subsystem, entity } = $(props);
 
+let data = $ref({});
+
 async function create() {
   
 }
@@ -15,7 +17,7 @@ async function create() {
       <button @click="create">Create</button>
       <button @click="$router.go(-1)">Discard</button>
     </PageHeader>
-    <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :fields="editTypes[subsystem][entity].fields"/>
+    <NiceForm class="scroll cl-secondary" :title="editTypes[subsystem][entity].title" :sections="editTypes[subsystem][entity].sections" v-model="data"/>
   </div>
   <div v-else>
     <PageHeader title="Error"/>

client/src/pages/index.vue

@@ -1,21 +1,37 @@
 <script setup lang="ts">
 import { apiCall } from "../api";
-import PillBar from "../components/inputs/PillBar.vue";
+import { Form as ValidationForm, Field, ErrorMessage  } from 'vee-validate';
-import TextBox from "../components/inputs/TextBox.vue";
-import MultilineTextBox from "../components/inputs/MultilineTextBox.vue";
-import CheckBox from "../components/inputs/CheckBox.vue";
 
 async function doShit(){
   apiCall("Firewall.GetForwardRules", {});
 }
 
 let fields = $ref([
-  {key: "name", label: "Name", component: () => TextBox },
+  {key: "name", label: "Name", as: "TextBox", rules: validateEmail},
-  {key: "verdict", label: "Verdict", component: () => PillBar, props: {options: [{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]}},
+  {key: "verdict", label: "Verdict", as: "PillBar", props: {options: [{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]}},
-  {key: "counter", label: "Counter", component: () => CheckBox },
+  {key: "counter", label: "Counter", as: "CheckBox" },
-  {key: "comment", label: "Comment", component: () => MultilineTextBox },
+  {key: "comment", label: "Comment", as: "MultilineTextBox", enabled: (values: Record<string, any>) => (values["verdict"] == 2) as Boolean },
 ]);
 
+
+function validateEmail(value: any) {
+  // if the field is empty
+  if (!value) {
+    return 'This field is required';
+  }
+
+  // if the field is not a valid email
+  const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
+  if (!regex.test(value)) {
+    return 'This field must be a valid email';
+  }
+
+  // All is good
+  return true;
+}
+
+
+
 </script>
 
 <template>
@@ -23,10 +39,30 @@ let fields = $ref([
     <PageHeader title="Dashboard">
       <button @click="doShit">Example Buttons</button>
     </PageHeader>
-    <NiceForm class="scroll cl-secondary" title="Testasdfdsfsdf" :fields="fields"/>
+    <ValidationForm class="form" v-slot="{ values }">
+      <template v-for="(field, index) in fields" :key="index">
+        <template v-if="field.enabled ? field.enabled(values) : true">
+          <label :for="field.key" v-text="field.label"/>
+          <Field :name="field.key" :as="field.as" :rules="field.rules" v-bind="field.props"/>
+          <ErrorMessage :name="field.key" />
+        </template>
+      </template>
+      {{ values }}
+    </ValidationForm>
   </div>
 </template>
 
 <style scoped>
-
+ValidationForm {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  padding: 0.5rem;
+  gap: 0.5rem;
+}
+ValidationForm > :is(button, .button, h2) {
+  grid-column: 1 / 3;
+}
+ValidationForm > :is(label) {
+  grid-column: 1;
+}
 </style>