chrono/src/components/editors/EventEditorParticipants.vue

<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>