feat: calendar

frontend/components.d.ts

@@ -31,6 +31,8 @@ declare module 'vue' {
     AttachmentCapsule: typeof import('./src/components/AttachmentCapsule.vue')['default']
     AttachmentViewer: typeof import('./src/components/AttachmentViewer.vue')['default']
     AudioIcon: typeof import('./src/components/Icons/AudioIcon.vue')['default']
+    CalendarLogo: typeof import('./src/components/Icons/CalendarLogo.vue')['default']
+    CalendarSidebar: typeof import('./src/components/CalendarSidebar.vue')['default']
     ChangePasswordModal: typeof import('./src/components/Modals/ChangePasswordModal.vue')['default']
     ComposeMailEditor: typeof import('./src/components/ComposeMailEditor.vue')['default']
     ComposeMailToolbar: typeof import('./src/components/ComposeMailToolbar.vue')['default']
@@ -50,6 +52,11 @@ declare module 'vue' {
     EditSignatureModal: typeof import('./src/components/Modals/EditSignatureModal.vue')['default']
     EmailContent: typeof import('./src/components/EmailContent.vue')['default']
     EmojiPicker: typeof import('./src/components/EmojiPicker.vue')['default']
+    EventAlertList: typeof import('./src/components/EventAlertList.vue')['default']
+    EventModal: typeof import('./src/components/Modals/EventModal.vue')['default']
+    EventParticipantList: typeof import('./src/components/EventParticipantList.vue')['default']
+    EventPopoverContent: typeof import('./src/components/EventPopoverContent.vue')['default']
+    EventRepeatSettingsModal: typeof import('./src/components/Modals/EventRepeatSettingsModal.vue')['default']
     ExportSettings: typeof import('./src/components/Settings/ExportSettings.vue')['default']
     FrappeLogo: typeof import('./src/components/Icons/FrappeLogo.vue')['default']
     HeaderActions: typeof import('./src/components/HeaderActions.vue')['default']

frontend/src/components/AppSidebar.vue

@@ -75,8 +75,8 @@ import { useRoute, useRouter } from 'vue-router'
 import { useStorage } from '@vueuse/core'
 import { Button, Dropdown, Sidebar, SidebarItem, createResource } from 'frappe-ui'
 
-import { toTitleCase } from '@/utils'
 import { useScreenSize, useSidebar } from '@/utils/composables'
+import { toTitleCase } from '@/utils/format'
 import { sessionStore } from '@/stores/session'
 import { userStore } from '@/stores/user'
 import MailLogo from '@/components/Icons/MailLogo.vue'

frontend/src/components/CalendarSidebar.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, h, inject } from 'vue'
+import { Eye, EyeOff, LayoutGrid, LogOut } from 'lucide-vue-next'
+import { Sidebar, createResource } from 'frappe-ui'
+
+import { toTitleCase } from '@/utils/format'
+import { sessionStore } from '@/stores/session'
+import CalendarLogo from '@/components/Icons/CalendarLogo.vue'
+
+const { calendars, visibleCalendars } = defineProps<{
+	calendars: any[]
+	visibleCalendars: string[]
+}>()
+
+const emit = defineEmits(['update:visibleCalendars'])
+
+const { branding, logout } = sessionStore()
+
+const user = inject('$user')
+
+const title = computed(() =>
+	branding.data?.brand_name && branding.data?.brand_name != 'Frappe'
+		? branding.data.brand_name
+		: 'Calendar',
+)
+
+const apps = createResource({ url: 'mail.api.get_apps', cache: 'otherApps', auto: true })
+
+const menuItems = computed(() => [
+	{
+		icon: LayoutGrid,
+		label: __('Apps'),
+		submenu: apps.data?.map?.((app) => ({
+			label: app.title,
+			icon: app.logo,
+			component: h(
+				'a',
+				{
+					class: 'flex items-center gap-2 p-1.5 rounded hover:bg-surface-gray-2',
+					href: app.route,
+				},
+				[
+					h('img', { src: app.logo, class: 'size-6' }),
+					h('span', { class: 'max-w-18 text-sm w-full truncate' }, app.title),
+				],
+			),
+		})),
+		condition: () => user.data.is_system_manager,
+	},
+	{
+		icon: LogOut,
+		label: __('Log Out'),
+		onClick: logout.submit,
+	},
+])
+
+const sidebarItems = computed(() => [
+	{
+		label: __('Calendars'),
+		items:
+			calendars.map((calendar) => ({
+				label: calendar._name,
+				icon: visibleCalendars.includes(calendar.name) ? Eye : EyeOff,
+				onClick: () => emit('update:visibleCalendars', calendar.name),
+			})) || [],
+	},
+])
+</script>
+
+<template>
+	<Sidebar
+		:header="{
+			title,
+			subtitle: toTitleCase(user.data.full_name),
+			menuItems,
+			logo: branding.data?.brand_html || CalendarLogo,
+		}"
+		:sections="sidebarItems"
+		:disable-collapse="true"
+	/>
+</template>

frontend/src/components/ComposeMailEditor.vue

@@ -268,14 +268,14 @@ import {
 
 import { getAttachmentUrl } from '@/resources'
 import {
-	formatBytes,
 	isOverlayPresent,
 	processInlineImages,
 	raiseToast,
 	randomString,
 	validateEmail,
 } from '@/utils'
 import { useScreenSize, useVisualViewport } from '@/utils/composables'
+import { formatBytes } from '@/utils/format'
 import { CustomParagraphExtension } from '@/utils/text-editor'
 import { userStore } from '@/stores/user'
 import ComposeMailToolbar from '@/components/ComposeMailToolbar.vue'

frontend/src/components/Controls/MultiselectInputControl.vue

@@ -153,7 +153,6 @@ const mailContacts = createResource({
 	}),
 	transform: (data) =>
 		data.map((option) => ({ label: option.full_name || option.email, value: option.email })),
-	auto: false,
 })
 
 const debouncedSearch = useDebounceFn((text: string) => mailContacts.reload(text), 300)

frontend/src/components/EventAlertList.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { Button, FormControl } from 'frappe-ui'
+
+const { alerts } = defineProps<{ alerts: any[] }>()
+
+const emit = defineEmits(['update:alerts'])
+
+const updateAlert = (i: number, field: string, value: any) => {
+	const updated = alerts.map((a, idx) => (idx === i ? { ...a, [field]: value } : a))
+	emit('update:alerts', updated)
+}
+
+const removeAlert = (i: number) => {
+	const updated = alerts.filter((_, idx) => idx !== i)
+	emit('update:alerts', updated)
+}
+
+const ALERT_ACTION_OPTIONS = [
+	{ label: __('Screen Pop-up'), value: 'Display' },
+	{ label: __('Email Notice'), value: 'Email' },
+	{ label: __('Sound Alert'), value: 'Audio' },
+]
+
+const UNIT_OPTIONS = [
+	{ label: __('Minutes'), value: 'minutes' },
+	{ label: __('Hours'), value: 'hours' },
+	{ label: __('Days'), value: 'days' },
+	{ label: __('Weeks'), value: 'weeks' },
+]
+
+const DIRECTION_OPTIONS = [
+	{ label: __('Before'), value: -1 },
+	{ label: __('After'), value: 1 },
+]
+
+const RELATIVE_TO_OPTIONS = [
+	{ label: __('Start'), value: 'Start' },
+	{ label: __('End'), value: 'End' },
+]
+</script>
+
+<template>
+	<div v-for="(alert, i) in alerts" :key="i" class="flex space-x-2">
+		<FormControl
+			:model-value="alert.action"
+			:label="i === 0 ? (alerts.length > 1 ? __('Alerts') : __('Alert')) : ''"
+			type="select"
+			:options="ALERT_ACTION_OPTIONS"
+			class="w-40 shrink-0"
+			@update:model-value="updateAlert(i, 'action', $event)"
+		/>
+		<template v-if="alert.type === 'OffsetTrigger'">
+			<FormControl
+				:model-value="alert.number"
+				type="number"
+				class="mt-auto w-16 shrink-0"
+				@update:model-value="updateAlert(i, 'number', $event)"
+			/>
+			<FormControl
+				:model-value="alert.unit"
+				type="select"
+				:options="UNIT_OPTIONS"
+				class="mt-auto w-full"
+				@update:model-value="updateAlert(i, 'unit', $event)"
+			/>
+			<FormControl
+				:model-value="alert.direction"
+				type="select"
+				:options="DIRECTION_OPTIONS"
+				class="mt-auto w-full"
+				@update:model-value="updateAlert(i, 'direction', $event)"
+			/>
+			<FormControl
+				:model-value="alert.relative_to"
+				type="select"
+				:options="RELATIVE_TO_OPTIONS"
+				class="mt-auto w-full"
+				@update:model-value="updateAlert(i, 'relative_to', $event)"
+			/>
+		</template>
+		<template v-else>
+			<span class="text-ink-gray-8 mb-1.5 mt-auto text-base">{{ __('on') }}</span>
+			<FormControl
+				:model-value="alert.date"
+				type="date"
+				class="mt-auto w-full"
+				@update:model-value="updateAlert(i, 'date', $event)"
+			/>
+			<span class="text-ink-gray-8 mb-1.5 mt-auto text-base">{{ __('at') }}</span>
+			<FormControl
+				:model-value="alert.time"
+				type="time"
+				class="mt-auto w-full"
+				@update:model-value="updateAlert(i, 'time', $event)"
+			/>
+		</template>
+		<Button icon="x" class="mt-auto" @click="removeAlert(i)" />
+	</div>
+</template>

frontend/src/components/EventParticipantList.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Check, Minus, X } from 'lucide-vue-next'
+import { Avatar, Button } from 'frappe-ui'
+
+import { extractNameFromEmail } from '@/utils/format'
+import { userStore } from '@/stores/user'
+
+const { participants, dontShowRemove } = defineProps<{
+	participants: any[]
+	dontShowRemove?: boolean
+}>()
+
+defineEmits(['removeParticipant'])
+
+const { identities } = userStore()
+
+const organizer = computed(() => participants.find((p) => p.isOrganizer)?.email)
+
+const isUserOrganizer = computed(() =>
+	identities.data.some((id) => id.email === organizer.value?.replace('mailto:', '')),
+)
+
+const showRemoveParticipant = (participant: any) =>
+	!participant.isOrganizer && (isUserOrganizer.value || participant.isNew) && !dontShowRemove
+
+const getParticipantStatusValues = (status: string) => {
+	if (status === 'ACCEPTED') return { icon: Check, class: 'bg-surface-green-1 text-ink-green-3' }
+	if (status === 'TENTATIVE') return { icon: Minus, class: 'bg-surface-gray-1 text-ink-gray-6' }
+	return { icon: X, class: 'bg-surface-red-1 text-ink-red-3' }
+}
+</script>
+<template>
+	<div v-for="p in participants" :key="p.email">
+		<div class="flex items-center justify-between text-left">
+			<div class="flex items-center space-x-2">
+				<Avatar :image="p.user_image" :label="p._name || p.email" size="xl" />
+				<div class="flex flex-col space-y-0.5">
+					<div class="flex items-center space-x-1">
+						<span class="text-sm font-medium">
+							{{ extractNameFromEmail(p._name || p.email) }}
+						</span>
+						<span v-if="p.email === organizer" class="text-ink-gray-4 text-xs">
+							({{ __('Organizer') }})
+						</span>
+
+						<div
+							v-if="
+								p.participation_status && p.participation_status !== 'NEEDS-ACTION'
+							"
+							class="rounded-full p-px"
+							:class="getParticipantStatusValues(p.participation_status).class"
+						>
+							<component
+								:is="getParticipantStatusValues(p.participation_status).icon"
+								class="h-3 w-3"
+							/>
+						</div>
+					</div>
+					<span class="text-ink-gray-4 text-sm">{{ p.email }}</span>
+				</div>
+			</div>
+
+			<Button
+				v-if="showRemoveParticipant(p)"
+				variant="ghost"
+				icon="x"
+				@click="$emit('removeParticipant', p.email)"
+			/>
+		</div>
+	</div>
+</template>