108 lines
3.0 KiB
Vue
108 lines
3.0 KiB
Vue
<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> |