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

Nice form (#11)

Browse source 
* 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
This commit is contained in:
Samuel Lorch 2023-04-03 22:59:20 +02:00 • committed by GitHub
parent 2fb089ba73
commit 4c78d1da66
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 153 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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"/>

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

@ -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"/>

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

@ -1,21 +1,37 @@
<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(){
apiCall("Firewall.GetForwardRules", {});
}
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>
@ -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>