speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-13 19:48:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

get test enabled form working

Browse source
This commit is contained in:
Samuel Lorch 2023-04-03 17:12:36 +02:00
parent b319e9573d
commit 85c1693664
1 changed files with 35 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
client/src/pages/index.vue
View file

@ -1,9 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { apiCall } from "../api"; import { apiCall } from "../api";
import PillBar from "../components/inputs/PillBar.vue";
import TextBox from "../components/inputs/TextBox.vue";
import MultilineTextBox from "../components/inputs/MultilineTextBox.vue";
import CheckBox from "../components/inputs/CheckBox.vue";
import { Form as ValidationForm, Field, ErrorMessage } from 'vee-validate'; import { Form as ValidationForm, Field, ErrorMessage } from 'vee-validate';
async function doShit(){ async function doShit(){
@ -11,12 +7,31 @@ async function doShit(){
} }
let fields = $ref([ 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> </script>
<template> <template>
@ -24,26 +39,30 @@ let fields = $ref([
<PageHeader title="Dashboard"> <PageHeader title="Dashboard">
<button @click="doShit">Example Buttons</button> <button @click="doShit">Example Buttons</button>
</PageHeader> </PageHeader>
<ValidationForm class="form"> <ValidationForm class="form" v-slot="{ values }">
<Field name="email" as="TextBox" /> <template v-for="(field, index) in fields" :key="index">
<ErrorMessage name="email" /> <template v-if="field.enabled ? field.enabled(values) : true">
<Field name="email" as="MultilineTextBox" /> <label :for="field.key" v-text="field.label"/>
<ErrorMessage name="email" /> <Field :name="field.key" :as="field.as" :rules="field.rules" v-bind="field.props"/>
<ErrorMessage :name="field.key" />
</template>
</template>
{{ values }}
</ValidationForm> </ValidationForm>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.form { ValidationForm {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
padding: 0.5rem; padding: 0.5rem;
gap: 0.5rem; gap: 0.5rem;
} }
.form > :is(button, .button, h2) { ValidationForm > :is(button, .button, h2) {
grid-column: 1 / 3; grid-column: 1 / 3;
} }
.form > :is(label) { ValidationForm > :is(label) {
grid-column: 1; grid-column: 1;
} }
</style> </style>