Add tags to the calendar

Author: Dlurak

src/lib/components/calendar/List/CalEventListBox.svelte

@@ -6,6 +6,7 @@
 	import { stringify } from '$lib/utils/dates/custom';
 	import { Icon, MapPin } from 'svelte-hero-icons';
 	import Updates from '$lib/components/utils/Updates.svelte';
+	import TagLabel from '$lib/components/tags/TagLabel.svelte';
 
 	export let event: Calendar;
 
@@ -24,7 +25,7 @@
 >
 	<h4>{event.title}</h4>
 
-	<div class="grid grid-cols-2">
+	<div class="grid grid-cols-2 gap-2">
 		<span>
 			{#if event.ending}
 				<Store
@@ -57,6 +58,14 @@
 				<Store store={i(`calendar.priority.${event.priority}`)} />
 			</span>
 		{/if}
+
+		{#if event.tags}
+			<div class="flex flex-wrap gap-1">
+				{#each event.tags as tag (tag.tag)}
+					<TagLabel {tag} />
+				{/each}
+			</div>
+		{/if}
 	</div>
 
 	{#if event.summary}

src/lib/components/calendar/List/EditModal.svelte

@@ -18,18 +18,25 @@
 	export let showEditModal = false;
 	export let event: Calendar;
 
+	const initialTitle = event.title;
+
 	const ts = (d: CustomDateTime | null) => {
 		return customDateToNormal(d ?? UNIX_TIME_EPOCHE_START).getTime();
 	};
 
 	$: beginningIsEarlierThenEnding = event.ending ? ts(event.beginning) < ts(event.ending) : true;
-
 	$: isEnabled = !!event.title && !!event.beginning && beginningIsEarlierThenEnding;
 </script>
 
 <Modal bind:isOpen={showEditModal}>
+	<div slot="title">
+		<Store store={i('calendar.edit.title', { title: initialTitle })} />
+	</div>
+
 	<div class="flex flex-col gap-2" slot="body">
 		<NewInner
+			className={event.class.name}
+			schoolName={event.class.school.name}
 			bind:title={event.title}
 			bind:beginning={event.beginning}
 			bind:ending={event.ending}
@@ -40,6 +47,7 @@
 				event.location = detail;
 			}}
 			bind:priority={event.priority}
+			bind:tags={event.tags}
 		/>
 
 		<hr class="border-zinc-300 dark:border-zinc-700" />
@@ -55,14 +63,16 @@
 					ending:
 						safeMap(event.ending, (ending) => customDateToNormal(ending).getTime()) ?? undefined,
 					location: event.location ?? undefined,
-					priority: event.priority ?? undefined
+					priority: event.priority ?? undefined,
+					tags: event.tags
 				})
 					.then(() => {
 						sendToast({
 							type: 'success',
 							content: i('calendar.update.success'),
 							timeout: 5_000
 						});
+						showEditModal = false;
 						invalidateAll();
 					})
 					.catch(sendDefaultErrorToast);

src/lib/components/calendar/SidePanel/New.svelte

@@ -16,6 +16,7 @@
 	import NewInner from './NewInner.svelte';
 	import { i } from '$lib/i18n/store';
 	import Store from '$lib/components/utils/Store.svelte';
+	import type { Tag } from '$lib/components/tags/types';
 
 	export let query: {
 		school: string;
@@ -35,6 +36,7 @@
 	let summary = '';
 	let location = '';
 	let priority: Priority | null = null;
+	let tags: Tag[] = [];
 
 	const ts = (d: CustomDateTime | null) => {
 		return customDateToNormal(d ?? UNIX_TIME_EPOCHE_START).getTime();
@@ -65,7 +67,17 @@
 			<SingleClass bind:selectedClass school={query.school} filter={showClass} />
 		{/if}
 
-		<NewInner bind:title bind:beginning bind:ending bind:summary bind:location bind:priority />
+		<NewInner
+			schoolName={query.school}
+			className={selectedClass}
+			bind:title
+			bind:beginning
+			bind:ending
+			bind:summary
+			bind:location
+			bind:priority
+			bind:tags
+		/>
 
 		<hr class="border-zinc-300 dark:border-zinc-700" />
 
@@ -75,6 +87,7 @@
 				if (!selectedClass || !beginning) return;
 
 				createCalendar({
+					tags,
 					school: query.school,
 					class: selectedClass,
 					title: title,
@@ -90,6 +103,16 @@
 							content: i('calendar.create.success'),
 							timeout: 5_000
 						});
+
+						title = '';
+						beginning = null;
+						ending = null;
+						summary = '';
+						location = '';
+						priority = null;
+						tags = [];
+
+						isOpen = false;
 						return invalidateAll();
 					})
 					.catch(sendDefaultErrorToast);

src/lib/components/calendar/SidePanel/NewInner.svelte

@@ -11,13 +11,19 @@
 	import { type CustomDateTime } from '$lib/utils/dates/custom';
 	import type { Priority } from '$lib/types/priority';
 	import { createEventDispatcher } from 'svelte';
+	import type { Tag } from '$lib/components/tags/types';
+	import ChooseTag from '$lib/components/tags/ChooseTag.svelte';
+
+	export let className: string | null;
+	export let schoolName: string;
 
 	export let title: string = '';
 	export let beginning: CustomDateTime | null = null;
 	export let ending: CustomDateTime | null = null;
 	export let summary = '';
 	export let location = '';
 	export let priority: Priority | null = null;
+	export let tags: Tag[] = [];
 
 	const dispatch = createEventDispatcher<{
 		summary: string | null;
@@ -74,5 +80,11 @@
 			}))}
 			bind:value={priority}
 		/>
+
+		{#if className}
+			<!-- TODO: i18n -->
+			<h4>Tags</h4>
+			<ChooseTag bind:selected={tags} {className} {schoolName} />
+		{/if}
 	</div>
 </Collapseable>

src/lib/dlool/calendar/create.ts

@@ -1,6 +1,7 @@
 import { Method, getApibase, getAuthHeader } from '$lib/utils/api';
 import type { Priority } from '$lib/types/priority';
 import { z } from 'zod';
+import type { Tag } from '$lib/components/tags/types';
 
 const scheme = z.object({
 	status: z.literal('success'),
@@ -15,6 +16,7 @@ interface NewCalendarProps {
 	class: string;
 	title: string;
 	beginning: number;
+	tags?: Tag[];
 	ending?: number;
 	summary?: string;
 	location?: string;
@@ -26,7 +28,7 @@ export async function createCalendar(props: NewCalendarProps) {
 		method: Method.POST,
 		body: JSON.stringify({
 			...props,
-			tags: []
+			tags: props.tags?.map(({ tag }) => tag) ?? []
 		}),
 		headers: {
 			Authorization: getAuthHeader(),

src/lib/dlool/calendar/list.ts

@@ -62,7 +62,12 @@ const calendarScheme = z.object({
 			time: z.number().int()
 		})
 	),
-	tags: z.array(z.unknown()),
+	tags: z.array(
+		z.object({
+			tag: z.string(),
+			color: z.string()
+		})
+	),
 	id: z.string()
 });
 

src/lib/dlool/calendar/update.ts

@@ -1,3 +1,4 @@
+import type { Tag } from '$lib/components/tags/types';
 import type { Priority } from '$lib/types/priority';
 import { getApibase, getAuthHeader } from '$lib/utils/api';
 import { z } from 'zod';
@@ -11,6 +12,7 @@ interface CalendarProps {
 	ending?: number;
 	location?: string;
 	priority?: Priority;
+	tags?: Tag[];
 }
 
 const scheme = z.object({
@@ -26,7 +28,10 @@ export async function updateCalendar({ id, ...body }: CalendarProps) {
 			'Content-Type': 'application/json'
 		},
 		method: 'PATCH',
-		body: JSON.stringify(body)
+		body: JSON.stringify({
+			...body,
+			tags: body.tags?.map(({ tag }) => tag) ?? []
+		})
 	}).then((r) => r.json());
 
 	return scheme.parse(res);

src/lib/locales/de.ts

@@ -429,6 +429,8 @@ const de = {
 
 	'calendar.noData': 'Es gibt keine Kalender Erreignisse',
 
+	'calendar.edit.title': 'Editiere das Kalendererreignis $title',
+
 	'settings.noneSelected': 'Wähle eine Kategorie aus',
 	'settings.profile': 'Profil',
 

src/lib/locales/en.ts

@@ -419,6 +419,8 @@ const en = {
 
 	'calendar.noData': 'There are no calendar events',
 
+	'calendar.edit.title': 'Edit the calendar event $title',
+
 	'settings.noneSelected': 'Select a category',
 	'settings.profile': 'Account',
 

src/routes/calendar/[id]/+page.svelte

@@ -15,6 +15,7 @@
 	import EditModal from '$lib/components/calendar/List/EditModal.svelte';
 	import MetaData from '$lib/components/utils/MetaData.svelte';
 	import Updates from '$lib/components/utils/Updates.svelte';
+	import TagLabel from '$lib/components/tags/TagLabel.svelte';
 
 	export let data: PageData;
 
@@ -123,6 +124,12 @@
 			<Updates updates={event.updates} />
 		</div>
 
+		<div class="flex gap-1 empty:hidden">
+			{#each event.tags as tag (tag.tag)}
+				<TagLabel {tag} />
+			{/each}
+		</div>
+
 		{#if event.summary}
 			<span>{event.summary}</span>
 		{/if}