speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-11 02: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">
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';
async function doShit(){
@ -11,12 +7,31 @@ async function doShit(){
}
let fields = $ref([
{key: "name", label: "Name", component: () => TextBox },
{key: "verdict", label: "Verdict", component: () => PillBar, props: {options: [{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]}},
{key: "counter", label: "Counter", component: () => CheckBox },
{key: "comment", label: "Comment", component: () => MultilineTextBox },
{key: "name", label: "Name", as: "TextBox", rules: validateEmail},
{key: "verdict", label: "Verdict", as: "PillBar", props: {options: [{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]}},
{key: "counter", label: "Counter", as: "CheckBox" },
{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>
@ -24,26 +39,30 @@ let fields = $ref([
<PageHeader title="Dashboard">
<button @click="doShit">Example Buttons</button>
</PageHeader>
<ValidationForm class="form">
<Field name="email" as="TextBox" />
<ErrorMessage name="email" />
<Field name="email" as="MultilineTextBox" />
<ErrorMessage name="email" />
<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>
.form {
ValidationForm {
display: grid;
grid-template-columns: auto 1fr;
padding: 0.5rem;
gap: 0.5rem;
}
.form > :is(button, .button, h2) {
ValidationForm > :is(button, .button, h2) {
grid-column: 1 / 3;
}
.form > :is(label) {
ValidationForm > :is(label) {
grid-column: 1;
}
</style>