initial commit

2024-12-30 20:56:44 -07:00
commit d95928f3e8
41 changed files with 6473 additions and 0 deletions
--- a/web/src/components/FormBuilder.vue
+++ b/web/src/components/FormBuilder.vue
@ -0,0 +1,142 @@
+<template>
+  <div class="min-h-screen bg-gray-100 flex flex-row items-start p-4">
+    <div class="flex-col flex-1 items-center justify-center p-4">
+      <h2 class="text-xl font-bold mb-4">Form Builder</h2>
+      <DynamicForm :formInputs="formBuilderInputs" @send="handleFormBuilderSubmit" />
+    </div>
+
+    <div v-if="generatedFormInputs.length" class="flex-col flex-1 items-center justify-center p-4">
+      <h2 class="text-xl font-bold mb-4">Generated Form</h2>
+      <DynamicForm :formInputs="generatedFormInputs" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import DynamicForm from './DynamicForm.vue';
+import type {FormInput} from "@/components/DynamicForm.vue";
+
+const formBuilderInputs = ref<FormInput[]>([
+  {
+    id: 'fieldType',
+    label: 'Field Type',
+    type: 'select',
+    required: true,
+    options: [
+      { label: 'Text', value: 'text' },
+      { label: 'Email', value: 'email' },
+      { label: 'Password', value: 'password' },
+      { label: 'Number', value: 'number' },
+      { label: 'Textarea', value: 'textarea' },
+      { label: 'Select', value: 'select' },
+      { label: 'Radio', value: 'radio' },
+      { label: 'Checkbox', value: 'checkbox' },
+      { label: 'Multi-Input', value: 'multi-input' },
+      { label: 'URL', value: 'url' },
+      { label: 'Telephone', value: 'tel' },
+      { label: 'Search', value: 'search' },
+      { label: 'Color', value: 'color' },
+      { label: 'Date', value: 'date' },
+      { label: 'Datetime-local', value: 'datetime-local' },
+      { label: 'Month', value: 'month' },
+      { label: 'Time', value: 'time' },
+      { label: 'Week', value: 'week' }
+    ]
+  },
+  {
+    id: 'fieldLabel',
+    label: 'Field Label',
+    type: 'text',
+    required: true
+  },
+  {
+    id: 'fieldID',
+    label: 'Field ID',
+    type: 'text',
+    required: true
+  },
+  {
+    id: 'placeholder',
+    label: 'Placeholder',
+    type: 'text',
+    required: false
+  },
+  {
+    id: 'required',
+    label: 'Required',
+    type: 'checkbox',
+    required: false,
+    showLabel: false,
+    options: [{ label: 'Required', value: 'true' }]
+  },
+  {
+    id: 'showLabel',
+    label: 'Show Label',
+    type: 'checkbox',
+    required: false,
+    showLabel: false,
+    defaultValue: ['true'],
+    options: [{ label: 'Show Label', value: 'true' }]
+  },
+  {
+    id: 'defaultValue',
+    label: 'Default Value',
+    type: 'text',
+    required: false
+  },
+  {
+    id: 'min',
+    label: 'Min (for Number, Date, etc.)',
+    type: 'text',
+    required: false
+  },
+  {
+    id: 'max',
+    label: 'Max (for Number, Date, etc.)',
+    type: 'text',
+    required: false
+  },
+  {
+    id: 'options',
+    label: 'Options (for Select, Radio, Checkbox)',
+    type: 'multi-input',
+    required: false
+  }
+]);
+
+const generatedFormInputs = ref<FormInput[]>([]);
+
+const handleFormBuilderSubmit = (formData: Record<string, any>) => {
+  const newField: FormInput = {
+    id: formData.fieldID,
+    label: formData.fieldLabel,
+    type: formData.fieldType,
+    placeholder: formData.placeholder || undefined,
+    required: formData.required && formData.required.includes('true'),
+    showLabel: formData.showLabel && formData.showLabel.includes('true'),
+    defaultValue: formData.defaultValue || undefined,
+    min: formData.min || undefined,
+    max: formData.max || undefined,
+    options: formData.options ? formData.options.map((opt: string) => ({ label: opt, value: opt })) : undefined
+  };
+
+  generatedFormInputs.value.push(newField);
+
+  // Reset form builder fields
+  formBuilderInputs.value.forEach(input => {
+    if (input.type === 'checkbox' || input.type === 'multi-input') {
+      formData[input.id] = [];
+      if (input.id === 'showLabel') { // showLabel should default to true
+        formData[input.id] = ['true'];
+      }
+    } else {
+      formData[input.id] = '';
+    }
+  });
+};
+</script>
+
+<style scoped>
+/* Add any additional styling if needed */
+</style>