CardAdvanceMeetingSchedule.vue
2.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar3 from '@images/avatars/avatar-3.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar7 from '@images/avatars/avatar-7.png'
import avatar8 from '@images/avatars/avatar-8.png'
const meetingSchedules = [
{
profile: avatar4,
with: 'Call with Woods',
dateTime: '21 Jul | 08:20-10:30',
type: 'Business',
},
{
profile: avatar8,
with: 'Call with hilda',
dateTime: '24 Jul | 11:30-12:00',
type: 'Meditation',
},
{
profile: avatar7,
with: 'Conference call',
dateTime: '28 Jul | 05:00-6:45',
type: 'Dinner',
},
{
profile: avatar3,
with: 'Meeting with Mark',
dateTime: '03 Aug | 07:00-8:30',
type: 'Meetup',
},
{
profile: avatar2,
with: 'Meeting in Oakland',
dateTime: '14 Aug | 04:15-05:30',
type: 'Dinner',
},
{
profile: avatar1,
with: 'Meeting with Carl',
dateTime: '05 Oct | 10:00-12:45',
type: 'Business',
},
]
const meetingTypeUiColors = {
Business: 'primary',
Meditation: 'success',
Meetup: 'secondary',
Dinner: 'error',
}
</script>
<template>
<VCard>
<!-- SECTION Card Header and Menu -->
<VCardItem>
<!-- 👉 Title -->
<VCardTitle>Meeting Schedule</VCardTitle>
<!-- 👉 menu -->
<template #append>
<div class="me-n3">
<MoreBtn />
</div>
</template>
</VCardItem>
<!-- !SECTION -->
<!-- SECTION Meting Schedule -->
<VCardText>
<VList
lines="two"
class="card-list"
>
<VListItem
v-for="meeting in meetingSchedules"
:key="meeting.type"
>
<!-- 👉 Avatar -->
<template #prepend>
<VAvatar
:size="38"
:image="meeting.profile"
/>
</template>
<!-- 👉 Title and Subtitle -->
<VListItemTitle class="font-weight-medium mb-1">
{{ meeting.with }}
</VListItemTitle>
<VListItemSubtitle class="me-2">
<VIcon
size="16"
start
icon="ri-calendar-line"
/>
{{ meeting.dateTime }}
</VListItemSubtitle>
<!-- 👉 Business Types -->
<template #append>
<VListItemAction>
<VChip
size="small"
:color="meetingTypeUiColors[meeting.type]"
>
{{ meeting.type }}
</VChip>
</VListItemAction>
</template>
</VListItem>
</VList>
</VCardText>
<!-- !SECTION -->
</VCard>
</template>
<style lang="scss" scoped>
.card-list {
--v-card-list-gap: 1.5rem;
}
</style>