Add Contact standard object, related lists, meilisearch, pagination, search, AI assistant

frontend/components/fields/FieldAttributesCommon.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="space-y-6">
+    <!-- Label -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Label</label>
+      <div class="col-span-3">
+        <input
+          v-model="formData.label"
+          type="text"
+          placeholder="Display name for this field"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+
+    <!-- API Name (Read-only if editing existing field) -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">API Name</label>
+      <div class="col-span-3">
+        <input
+          v-model="formData.apiName"
+          type="text"
+          placeholder="e.g., accountName"
+          :disabled="isEditing"
+          class="w-full px-3 py-2 border rounded-md text-sm disabled:bg-gray-100 disabled:text-gray-600"
+        />
+        <p v-if="isEditing" class="text-xs text-gray-500 mt-1">
+          Cannot change API name on existing fields
+        </p>
+      </div>
+    </div>
+
+    <!-- Description -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Description</label>
+      <div class="col-span-3">
+        <textarea
+          v-model="formData.description"
+          placeholder="Describe the purpose of this field"
+          rows="3"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+
+    <!-- Placeholder -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Placeholder</label>
+      <div class="col-span-3">
+        <input
+          v-model="formData.placeholder"
+          type="text"
+          placeholder="e.g., Enter account name"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+
+    <!-- Help Text -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Help Text</label>
+      <div class="col-span-3">
+        <textarea
+          v-model="formData.helpText"
+          placeholder="Additional guidance for users"
+          rows="2"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+
+    <!-- Display Order -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Display Order</label>
+      <div class="col-span-3">
+        <input
+          v-model.number="formData.displayOrder"
+          type="number"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+
+    <!-- Required -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Required</label>
+      <div class="col-span-3 flex items-center">
+        <input
+          v-model="formData.isRequired"
+          type="checkbox"
+          class="w-4 h-4 border rounded"
+        />
+        <span class="ml-2 text-sm text-gray-600">
+          {{ formData.isRequired ? 'Yes, this field is required' : 'No, this field is optional' }}
+        </span>
+        <p v-if="hasData && !wasRequired && formData.isRequired" class="ml-2 text-xs text-red-600">
+          ⚠️ Existing records may have empty values
+        </p>
+      </div>
+    </div>
+
+    <!-- Unique -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Unique</label>
+      <div class="col-span-3 flex items-center">
+        <input
+          v-model="formData.isUnique"
+          type="checkbox"
+          class="w-4 h-4 border rounded"
+        />
+        <span class="ml-2 text-sm text-gray-600">
+          {{ formData.isUnique ? 'Yes, values must be unique' : 'No, duplicate values allowed' }}
+        </span>
+        <p v-if="hasData && !wasUnique && formData.isUnique" class="ml-2 text-xs text-red-600">
+          ⚠️ Existing records may have duplicate values
+        </p>
+      </div>
+    </div>
+
+    <!-- Default Value -->
+    <div class="grid grid-cols-4 gap-4">
+      <label class="text-sm font-medium leading-8">Default Value</label>
+      <div class="col-span-3">
+        <input
+          v-model="formData.defaultValue"
+          type="text"
+          placeholder="Value used when field is not provided"
+          class="w-full px-3 py-2 border rounded-md text-sm"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+interface Props {
+  label?: string
+  apiName?: string
+  description?: string
+  placeholder?: string
+  helpText?: string
+  displayOrder?: number
+  isRequired?: boolean
+  isUnique?: boolean
+  defaultValue?: string
+  isEditing?: boolean
+  hasData?: boolean
+}
+
+interface Emits {
+  (e: 'update', data: any): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  apiName: '',
+  description: '',
+  placeholder: '',
+  helpText: '',
+  displayOrder: 0,
+  isRequired: false,
+  isUnique: false,
+  defaultValue: '',
+  isEditing: false,
+  hasData: false,
+})
+
+const emit = defineEmits<Emits>()
+
+const formData = ref({
+  label: props.label,
+  apiName: props.apiName,
+  description: props.description,
+  placeholder: props.placeholder,
+  helpText: props.helpText,
+  displayOrder: props.displayOrder,
+  isRequired: props.isRequired,
+  isUnique: props.isUnique,
+  defaultValue: props.defaultValue,
+})
+
+const wasRequired = ref(props.isRequired)
+const wasUnique = ref(props.isUnique)
+
+onMounted(() => {
+  wasRequired.value = props.isRequired
+  wasUnique.value = props.isUnique
+})
+
+watch(formData, (newVal) => {
+  emit('update', newVal)
+}, { deep: true })
+</script>