293 lines
8.5 KiB
Vue
293 lines
8.5 KiB
Vue
<template>
|
|
<v-container fluid>
|
|
<!-- Header -->
|
|
<v-row class="mb-6">
|
|
<v-col>
|
|
<h1 class="text-h3 font-weight-bold mb-2">Board Meetings</h1>
|
|
<p class="text-body-1 text-medium-emphasis">Schedule and manage board meetings</p>
|
|
</v-col>
|
|
<v-col cols="auto">
|
|
<v-btn
|
|
color="primary"
|
|
variant="flat"
|
|
prepend-icon="mdi-calendar-plus"
|
|
@click="showScheduleDialog = true"
|
|
>
|
|
Schedule Meeting
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Meeting Tabs -->
|
|
<v-tabs v-model="activeTab" color="primary" class="mb-6">
|
|
<v-tab value="upcoming">Upcoming</v-tab>
|
|
<v-tab value="past">Past Meetings</v-tab>
|
|
<v-tab value="calendar">Calendar View</v-tab>
|
|
</v-tabs>
|
|
|
|
<v-window v-model="activeTab">
|
|
<!-- Upcoming Meetings -->
|
|
<v-window-item value="upcoming">
|
|
<v-row>
|
|
<v-col
|
|
v-for="meeting in upcomingMeetings"
|
|
:key="meeting.id"
|
|
cols="12"
|
|
>
|
|
<v-card elevation="2" class="mb-3">
|
|
<v-card-text>
|
|
<v-row align="center">
|
|
<v-col cols="auto">
|
|
<v-avatar color="primary" size="56">
|
|
<v-icon>mdi-calendar</v-icon>
|
|
</v-avatar>
|
|
</v-col>
|
|
<v-col>
|
|
<h3 class="text-h6 mb-1">{{ meeting.title }}</h3>
|
|
<div class="text-body-2 text-medium-emphasis mb-2">
|
|
<v-icon size="small" class="mr-1">mdi-calendar</v-icon>
|
|
{{ formatDate(meeting.date) }}
|
|
<v-icon size="small" class="ml-3 mr-1">mdi-clock</v-icon>
|
|
{{ meeting.time }}
|
|
<v-icon size="small" class="ml-3 mr-1">mdi-map-marker</v-icon>
|
|
{{ meeting.location }}
|
|
</div>
|
|
<div class="text-body-2">
|
|
<v-chip size="small" variant="tonal" class="mr-2">
|
|
<v-icon start size="small">mdi-account-group</v-icon>
|
|
{{ meeting.attendees }} Confirmed
|
|
</v-chip>
|
|
<v-chip size="small" variant="tonal" color="info">
|
|
{{ meeting.type }}
|
|
</v-chip>
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="auto">
|
|
<v-btn variant="outlined" color="primary" class="mr-2" @click="viewMeeting(meeting)">
|
|
View Details
|
|
</v-btn>
|
|
<v-btn variant="flat" color="primary" @click="joinMeeting(meeting)">
|
|
Join Meeting
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-window-item>
|
|
|
|
<!-- Past Meetings -->
|
|
<v-window-item value="past">
|
|
<v-data-table
|
|
:headers="pastMeetingHeaders"
|
|
:items="pastMeetings"
|
|
class="elevation-2"
|
|
hover
|
|
>
|
|
<template v-slot:item.title="{ item }">
|
|
<div class="font-weight-medium">{{ item.title }}</div>
|
|
</template>
|
|
<template v-slot:item.date="{ item }">
|
|
{{ formatDate(item.date) }}
|
|
</template>
|
|
<template v-slot:item.attendees="{ item }">
|
|
<v-chip size="small" variant="tonal">
|
|
{{ item.attendees }}/{{ item.totalInvited }}
|
|
</v-chip>
|
|
</template>
|
|
<template v-slot:item.actions="{ item }">
|
|
<v-btn icon="mdi-file-document" size="small" variant="text" @click="viewMinutes(item)" />
|
|
<v-btn icon="mdi-download" size="small" variant="text" @click="downloadMaterials(item)" />
|
|
</template>
|
|
</v-data-table>
|
|
</v-window-item>
|
|
|
|
<!-- Calendar View -->
|
|
<v-window-item value="calendar">
|
|
<v-card elevation="2">
|
|
<v-card-text>
|
|
<div class="text-center py-12">
|
|
<v-icon size="64" color="primary" class="mb-4">mdi-calendar-month</v-icon>
|
|
<h3 class="text-h5 mb-2">Calendar View</h3>
|
|
<p class="text-body-1 text-medium-emphasis">
|
|
Interactive calendar view coming soon
|
|
</p>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-window-item>
|
|
</v-window>
|
|
|
|
<!-- Schedule Meeting Dialog -->
|
|
<v-dialog v-model="showScheduleDialog" max-width="600">
|
|
<v-card>
|
|
<v-card-title>Schedule Board Meeting</v-card-title>
|
|
<v-card-text>
|
|
<v-form ref="meetingForm">
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
v-model="meetingForm.title"
|
|
label="Meeting Title"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-select
|
|
v-model="meetingForm.type"
|
|
label="Meeting Type"
|
|
:items="['Regular', 'Special', 'Emergency', 'Annual']"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="meetingForm.date"
|
|
label="Date"
|
|
type="date"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="meetingForm.time"
|
|
label="Time"
|
|
type="time"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
v-model="meetingForm.location"
|
|
label="Location"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-textarea
|
|
v-model="meetingForm.agenda"
|
|
label="Agenda"
|
|
variant="outlined"
|
|
rows="3"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-form>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn variant="text" @click="showScheduleDialog = false">Cancel</v-btn>
|
|
<v-btn color="primary" variant="flat" @click="scheduleMeeting">Schedule</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'board',
|
|
middleware: 'board'
|
|
});
|
|
|
|
// State
|
|
const activeTab = ref('upcoming');
|
|
const showScheduleDialog = ref(false);
|
|
|
|
// Form data
|
|
const meetingForm = ref({
|
|
title: '',
|
|
type: '',
|
|
date: '',
|
|
time: '',
|
|
location: '',
|
|
agenda: ''
|
|
});
|
|
|
|
// Mock data
|
|
const upcomingMeetings = ref([
|
|
{
|
|
id: 1,
|
|
title: 'Monthly Board Meeting - February',
|
|
date: new Date('2024-02-15'),
|
|
time: '10:00 AM',
|
|
location: 'Board Room / Zoom',
|
|
type: 'Regular',
|
|
attendees: 8
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Strategic Planning Session',
|
|
date: new Date('2024-02-28'),
|
|
time: '2:00 PM',
|
|
location: 'Conference Center',
|
|
type: 'Special',
|
|
attendees: 12
|
|
}
|
|
]);
|
|
|
|
const pastMeetings = ref([
|
|
{
|
|
id: 3,
|
|
title: 'Monthly Board Meeting - January',
|
|
date: new Date('2024-01-15'),
|
|
time: '10:00 AM',
|
|
attendees: 9,
|
|
totalInvited: 10
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Annual General Meeting',
|
|
date: new Date('2024-01-05'),
|
|
time: '6:00 PM',
|
|
attendees: 45,
|
|
totalInvited: 50
|
|
}
|
|
]);
|
|
|
|
// Table headers
|
|
const pastMeetingHeaders = [
|
|
{ title: 'Meeting', key: 'title' },
|
|
{ title: 'Date', key: 'date' },
|
|
{ title: 'Time', key: 'time' },
|
|
{ title: 'Attendance', key: 'attendees' },
|
|
{ title: 'Actions', key: 'actions', align: 'end' }
|
|
];
|
|
|
|
// Methods
|
|
const formatDate = (date: Date) => {
|
|
return new Date(date).toLocaleDateString('en-US', {
|
|
weekday: 'long',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
|
|
const viewMeeting = (meeting: any) => {
|
|
console.log('View meeting:', meeting);
|
|
};
|
|
|
|
const joinMeeting = (meeting: any) => {
|
|
console.log('Join meeting:', meeting);
|
|
};
|
|
|
|
const viewMinutes = (meeting: any) => {
|
|
console.log('View minutes:', meeting);
|
|
};
|
|
|
|
const downloadMaterials = (meeting: any) => {
|
|
console.log('Download materials:', meeting);
|
|
};
|
|
|
|
const scheduleMeeting = () => {
|
|
console.log('Schedule meeting:', meetingForm.value);
|
|
showScheduleDialog.value = false;
|
|
};
|
|
</script> |