Initial commit
This commit is contained in:
root
@@ -0,0 +1,206 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
mode: 'edit' | 'view'
|
||||
organizer: any | null
|
||||
participants: Record<string, any>
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:organizer': [organizer: any | null]
|
||||
'add-participant': []
|
||||
'remove-participant': [key: string]
|
||||
}>()
|
||||
|
||||
const roleOptions = [
|
||||
{ title: 'Owner', value: 'owner' },
|
||||
{ title: 'Chair', value: 'chair' },
|
||||
{ title: 'Attendee', value: 'attendee' },
|
||||
{ title: 'Optional', value: 'optional' },
|
||||
{ title: 'Informational', value: 'informational' },
|
||||
{ title: 'Contact', value: 'contact' }
|
||||
]
|
||||
|
||||
const statusOptions = [
|
||||
{ title: 'None', value: 'none' },
|
||||
{ title: 'Accepted', value: 'accepted' },
|
||||
{ title: 'Declined', value: 'declined' },
|
||||
{ title: 'Tentative', value: 'tentative' },
|
||||
{ title: 'Delegated', value: 'delegated' }
|
||||
]
|
||||
|
||||
const typeOptions = [
|
||||
{ title: 'Unknown', value: 'unknown' },
|
||||
{ title: 'Individual', value: 'individual' },
|
||||
{ title: 'Group', value: 'group' },
|
||||
{ title: 'Resource', value: 'resource' },
|
||||
{ title: 'Location', value: 'location' }
|
||||
]
|
||||
|
||||
const hasParticipants = () => {
|
||||
return props.organizer || Object.keys(props.participants || {}).length > 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="hasParticipants() || mode === 'edit'" class="event-editor-section">
|
||||
<div class="text-subtitle-1 mb-2">Participants</div>
|
||||
|
||||
<!-- Organizer -->
|
||||
<div v-if="organizer || mode === 'edit'" class="mb-4">
|
||||
<div class="text-subtitle-2 mb-2">Organizer</div>
|
||||
|
||||
<!-- Read-only view -->
|
||||
<div v-if="mode === 'view' && organizer" class="pa-2 border rounded">
|
||||
<div class="mb-1"><strong>{{ organizer.name || organizer.address }}</strong></div>
|
||||
<div class="text-caption text-grey">{{ organizer.address }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else-if="mode === 'edit'" class="pa-3 border rounded">
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="organizer.name"
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="organizer.address"
|
||||
label="Email/Address"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[v => !!v || 'Address is required']"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Participants List -->
|
||||
<div v-if="Object.keys(participants || {}).length > 0 || mode === 'edit'">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<div class="text-subtitle-2">Attendees</div>
|
||||
<v-btn v-if="mode === 'edit'"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@click="$emit('add-participant')">
|
||||
<v-icon left>mdi-plus</v-icon>
|
||||
Add Participant
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- Read-only view -->
|
||||
<div v-if="mode === 'view'">
|
||||
<div v-for="(participant, key) in participants" :key="key" class="mb-2 pa-2 border rounded">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<div class="mb-1"><strong>{{ participant.name || participant.address }}</strong></div>
|
||||
<div class="text-caption text-grey">
|
||||
{{ participant.address }}
|
||||
<span v-if="participant.type"> | {{ participant.type }}</span>
|
||||
</div>
|
||||
<div v-if="participant.roles && participant.roles.length > 0" class="mt-1">
|
||||
<v-chip
|
||||
v-for="role in participant.roles"
|
||||
:key="role"
|
||||
size="x-small"
|
||||
class="mr-1"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ role }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
<v-chip
|
||||
v-if="participant.status && participant.status !== 'none'"
|
||||
:color="participant.status === 'accepted' ? 'success' : participant.status === 'declined' ? 'error' : 'warning'"
|
||||
size="small"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ participant.status }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else>
|
||||
<div v-for="(participant, key) in participants" :key="key" class="mb-3 pa-3 border rounded">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<strong>{{ participant.name || 'Participant' }}</strong>
|
||||
<v-btn
|
||||
icon="mdi-delete"
|
||||
size="small"
|
||||
color="error"
|
||||
variant="text"
|
||||
@click="$emit('remove-participant', key)">
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-row dense class="mb-2">
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="participant.name"
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="participant.address"
|
||||
label="Email/Address"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[v => !!v || 'Address is required']"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row dense class="mb-2">
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="participant.type"
|
||||
:items="typeOptions"
|
||||
label="Type"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="participant.status"
|
||||
:items="statusOptions"
|
||||
label="Status"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-select
|
||||
v-model="participant.roles"
|
||||
:items="roleOptions"
|
||||
label="Roles"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
multiple
|
||||
chips
|
||||
closable-chips
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.event-editor-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user