110 lines
3.5 KiB
Vue
110 lines
3.5 KiB
Vue
<template>
|
|
<div v-if="events.length" v-for="(event, i) in events" :key="event.name">
|
|
<div
|
|
class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-3 sm:px-10"
|
|
>
|
|
<div
|
|
class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
|
|
:class="i != events.length - 1 ? 'before:h-full' : 'before:h-4'"
|
|
>
|
|
<div
|
|
class="flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
|
|
>
|
|
<CalendarIcon class="h-4 w-4" />
|
|
</div>
|
|
</div>
|
|
<div class="mb-5">
|
|
<div
|
|
class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base"
|
|
>
|
|
<div class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5">
|
|
<Avatar
|
|
:image="event.owner.image"
|
|
:label="event.owner.label"
|
|
size="md"
|
|
/>
|
|
<span class="font-medium text-ink-gray-8 ml-1">
|
|
{{ event.owner.label }}
|
|
</span>
|
|
<span>{{ 'has created an event' }}</span>
|
|
</div>
|
|
<div class="ml-auto whitespace-nowrap">
|
|
<Tooltip :text="formatDate(event.creation)">
|
|
<div class="text-sm text-ink-gray-5">
|
|
{{ __(timeAgo(event.creation)) }}
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex gap-2 border cursor-pointer border-outline-gray-modals rounded-lg bg-surface-cards px-2.5 py-2.5 text-ink-gray-9"
|
|
@click="showEvent(event)"
|
|
>
|
|
<div
|
|
class="flex w-[2px] rounded-lg"
|
|
:style="{ backgroundColor: event.color || '#30A66D' }"
|
|
/>
|
|
<div class="flex-1 flex flex-col gap-1 text-base">
|
|
<div
|
|
class="flex items-center justify-between gap-2 font-medium text-ink-gray-7"
|
|
>
|
|
<div>{{ event.subject }}</div>
|
|
<MultipleAvatar
|
|
v-if="event.participants?.length > 1"
|
|
:avatars="event.participants"
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="flex justify-between gap-2 items-center text-ink-gray-6"
|
|
>
|
|
<div>
|
|
{{
|
|
startEndTime(event.starts_on, event.ends_on, event.all_day)
|
|
}}
|
|
</div>
|
|
<div>{{ startDate(event.starts_on) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="flex h-full flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-ink-gray-4"
|
|
>
|
|
<CalendarIcon class="h-10 w-10" />
|
|
<span>{{ __('No Events Scheduled') }}</span>
|
|
<Button :label="__('Schedule an Event')" @click="showEvent()" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
|
|
import MultipleAvatar from '@/components/MultipleAvatar.vue'
|
|
import { useEvent, showEventModal, activeEvent } from '@/composables/event'
|
|
import { formatDate, timeAgo } from '@/utils'
|
|
import { Tooltip, Avatar } from 'frappe-ui'
|
|
|
|
const props = defineProps({
|
|
doctype: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
docname: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
function showEvent(e = {}) {
|
|
showEventModal.value = true
|
|
activeEvent.value = e
|
|
}
|
|
|
|
const { events, startEndTime, startDate } = useEvent(
|
|
props.doctype,
|
|
props.docname,
|
|
)
|
|
</script>
|