Add DateProperty and EmailProperty components (#961)

* Files added

* apply formatting changes

* Date and email property components

* EmailProperty.vue Removed

* simplify code

* apply formatting changes

---------

Co-authored-by: Devesh0129 <Devesh0129@users.noreply.github.com>
Co-authored-by: Felix Neubauer <felix@neuby.de>
Co-authored-by: Logende <Logende@users.noreply.github.com>
Co-authored-by: Felix Neubauer <33369081+Logende@users.noreply.github.com>

Author: Devesh0129

meta_configurator/src/components/panels/gui-editor/properties/DateProperty.vue

@@ -0,0 +1,52 @@
+<!-- Date picker for string properties with date format -->
+<script setup lang="ts">
+import {ref, watch} from 'vue';
+import DatePicker from 'primevue/datepicker';
+import type {JsonSchemaWrapper} from '@/schema/jsonSchemaWrapper';
+import type {PathElement} from '@/utility/path';
+import type {ValidationResult} from '@/schema/validationService';
+import {isReadOnly} from '@/components/panels/gui-editor/configTreeNodeReadingUtils';
+
+const props = defineProps<{
+  propertyName: PathElement;
+  propertyData: string | undefined;
+  propertySchema: JsonSchemaWrapper;
+  validationResults: ValidationResult;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:propertyData', newValue: string | undefined): void;
+}>();
+
+// convert string to Date for the picker
+const dateValue = ref<Date | undefined>(
+  props.propertyData ? new Date(props.propertyData) : undefined
+);
+
+watch(
+  () => props.propertyData,
+  newVal => {
+    dateValue.value = newVal ? new Date(newVal) : undefined;
+  }
+);
+
+function updateValue(newDate: Date | undefined) {
+  if (!newDate) {
+    emit('update:propertyData', undefined);
+    return;
+  }
+  // convert Date back to ISO date string (YYYY-MM-DD)
+  const isoString = newDate.toISOString().split('T')[0];
+  emit('update:propertyData', isoString);
+}
+</script>
+
+<template>
+  <DatePicker
+    :class="{'underline decoration-wavy decoration-red-600': !props.validationResults.valid}"
+    class="h-8"
+    v-model="dateValue"
+    dateFormat="yy-mm-dd"
+    :disabled="isReadOnly(props.propertySchema)"
+    @update:modelValue="updateValue" />
+</template>

meta_configurator/src/components/panels/gui-editor/resolveCorrespondingComponent.ts

@@ -4,6 +4,7 @@ import StringProperty from '@/components/panels/gui-editor/properties/StringProp
 import NumberProperty from '@/components/panels/gui-editor/properties/NumberProperty.vue';
 import SimpleObjectProperty from '@/components/panels/gui-editor/properties/SimpleObjectProperty.vue';
 import SimpleArrayProperty from '@/components/panels/gui-editor/properties/SimpleArrayProperty.vue';
+import DateProperty from '@/components/panels/gui-editor/properties/DateProperty.vue';
 import type {
   AddItemTreeNodeData,
   ConfigTreeNodeData,
@@ -75,6 +76,20 @@ export function resolveCorrespondingComponent(
       ...propsObject,
     });
   }
+  if (nodeData.schema.hasType('string') && nodeData.schema.format === 'date') {
+    // @ts-ignore
+    return h(DateProperty, propsObject);
+  }
+
+  if (nodeData.schema.hasType('string') && nodeData.schema.format === 'email') {
+    if (!nodeData.schema.examples || nodeData.schema.examples.length === 0) {
+      // if there is no example e-mail provided, add one directly to the schema
+      const underlyingSchema = nodeData.schema.jsonSchema;
+      if (underlyingSchema) {
+        underlyingSchema.examples = ['example@email.com'];
+      }
+    }
+  }
 
   if (nodeData.schema.hasType('string')) {
     // @ts-ignore