CrmMeetingSchedule.vue
3.01 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
128
129
130
131
132
133
134
135
136
137
138
139
140
<script setup lang="ts">
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'
interface UiColors {
Business: string
Meditation: string
Meetup: string
Dinner: string
}
interface MeetingSchedule {
profile: string
with: string
dateTime: string
type: keyof UiColors
}
const meetingSchedules: MeetingSchedule[] = [
{
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: UiColors = {
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>