From 7891c1e229d211b9caa424e125f95a66d82d5cc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20K=C3=BChl?= <s.kuehl@tms-bonn.de>
Date: Wed, 28 May 2025 16:08:53 +0200
Subject: [PATCH] added CrudField.vue component

---
 app/src/components/CrudField.vue | 37 ++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 app/src/components/CrudField.vue

diff --git a/app/src/components/CrudField.vue b/app/src/components/CrudField.vue
new file mode 100644
index 0000000..17c7b9d
--- /dev/null
+++ b/app/src/components/CrudField.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { IonInput, IonItem } from '@ionic/vue';
+import { Field, useField } from 'vee-validate';
+
+interface Props {
+  name: string; // The name of the field for validation
+  label: string; // The label text
+  labelPlacement?: string; // Placement of the label (optional)
+  type?: string; // Input type, e.g., "text", "number", etc.
+}
+
+const props = defineProps<Props>(); // Define props for the component
+const { value, errorMessage, ...fieldAttrs } = useField(props.name); // Setup field logic using vee-validate
+</script>
+
+<template>
+  <ion-item>
+    <Field name="name">
+      <IonInput
+          :label="label"
+          :label-placement="labelPlacement || 'stacked'"
+          v-model="value"
+          v-bind="fieldAttrs"
+          :type="type || 'text'"
+      >
+        <small v-if="errorMessage" class="error-message">{{ errorMessage }}</small>
+      </IonInput>
+    </Field>
+  </ion-item>
+</template>
+
+<style scoped>
+.error-message {
+  color: red;
+  font-size: 12px;
+}
+</style>