Initial commit

src/components/editors/PersonEditorEmails.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  emails: Record<string, any>
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-email': []
+  'remove-email': [key: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+</script>
+
+<template>
+  <div v-if="Object.keys(emails || {}).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Emails</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-email')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Email
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(email, key) in emails" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-email" size="small" class="mr-2" />
+            <strong>{{ email.address || 'No address' }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === key ? 'success' : undefined"
+            @click="copyToClipboard(email.address || '', key as string)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          Context: {{ email.context || 'Not set' }} |
+          Priority: {{ email.priority || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(email, index) in emails" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Email</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-email', index)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="email.address"
+              label="Address"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="email.context"
+              label="Context"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model.number="email.priority"
+              label="Priority"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>