feat: add promise global events (#157)

* feat: retrieve global events data

* feat: add global events in promise details page

* refactor: remove type error

* feat: show event links

* style: add border dashed for global events

---------

Co-authored-by: Th1nkK1D <[email protected]>
Co-authored-by: Poppap <[email protected]>

src/components/PromiseDetail/PromiseProgressTimeline.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import VoteCard from '$components/VoteCard/VoteCard.svelte';
 	import { formatThaiDate } from '$lib/date-parser';
+	import type { GlobalEvent } from '$models/global-event';
 	import { PromiseStatus, type Promise } from '$models/promise';
 	import { Bullhorn, CheckmarkFilled } from 'carbon-icons-svelte';
 	import { twMerge } from 'tailwind-merge';
 
 	export let promise: Promise;
+	export let globalEvents: GlobalEvent[];
 
-	$: timeline = promise.progresses.sort((a, b) => {
+	$: timeline = [...promise.progresses, ...globalEvents].sort((a, b) => {
 		return b.date > a.date ? 1 : -1;
 	});
 
@@ -26,11 +28,12 @@
 	};
 </script>
 
-{#each timeline as progress, index}
+{#each timeline as event, index}
+	{@const isProgress = 'type' in event}
 	<div
 		class={twMerge(
 			'p-4 pb-0 text-text-01',
-			progress.type === 'indirect' && 'text-gray-60',
+			isProgress && event.type === 'indirect' && 'text-gray-60',
 			index === 0 && promise.status === PromiseStatus.inProgress && 'bg-yellow-10',
 			index === 0 && promise.status === PromiseStatus.fulfilled && 'bg-green-10',
 			index === 0 && promise.status === PromiseStatus.unhonored && 'bg-magenta-10'
@@ -45,12 +48,12 @@
 					class={twMerge(
 						'absolute inset-0 mx-auto w-[1px] flex-1 border-l border-l-text-primary',
 						index !== 0 && '-top-4',
-						progress.type === 'indirect' && 'border-dashed',
+						isProgress && event.type === 'indirect' && 'border-dashed border-l-gray-60',
 						index === timeline.length - 1 && 'h-4',
-						progress.type === 'indirect' && 'border-l-gray-60'
+						!isProgress && 'border-dashed border-l-gray-60'
 					)}
-				></div>
-				{#if progress.type === 'checkpoint'}
+				/>
+				{#if isProgress && event.type === 'checkpoint'}
 					<CheckmarkFilled
 						size={24}
 						class={twMerge(
@@ -61,7 +64,7 @@
 						)}
 					/>
 				{/if}
-				{#if progress.type === 'indirect'}
+				{#if !isProgress || event.type === 'indirect'}
 					<Bullhorn
 						size={24}
 						class={twMerge(
@@ -75,35 +78,41 @@
 			</div>
 			<div class="flex flex-1 flex-col gap-6 md:flex-row">
 				<div class="mb-4 flex flex-1 flex-col gap-2">
-					<div class="body-01">{formatThaiDate(progress.date, true)}</div>
-					<div class="heading-02">{progress.title}</div>
-					{#if progress.description}
-						<div class="body-01">{progress.description}</div>
+					<div class={twMerge('body-01', !isProgress && 'text-text-02')}>
+						{formatThaiDate(event.date, true)}
+					</div>
+					<div class={twMerge('heading-02', !isProgress && 'text-text-02')}>
+						{event.title}
+					</div>
+					{#if event.description}
+						<div class={twMerge('body-01', !isProgress && 'text-text-02')}>
+							{event.description}
+						</div>
 					{/if}
-					{#if progress.url}
+					{#if event.url}
 						<div class="label-01 text-gray-60">
 							ที่มา: <a
-								href={progress.url}
+								href={event.url}
 								target="_blank"
 								rel="noopener noreferrer"
 								class="label-01 break-all underline"
 							>
-								{progress.url}
+								{event.url}
 							</a>
 						</div>
 					{/if}
 				</div>
-				{#if progress.votingSummary}
+				{#if isProgress && event.votingSummary}
 					<VoteCard
 						voting={{
-							id: progress.votingSummary.id,
-							nickname: progress.votingSummary.title || '',
-							date: progress.votingSummary.date,
-							result: progress.votingSummary.result
+							id: event.votingSummary.id,
+							nickname: event.votingSummary.title || '',
+							date: event.votingSummary.date,
+							result: event.votingSummary.result
 						}}
 						highlightedVoteByGroups={highlightedVoteByGroups(
-							progress.votingSummary.resultsByAffiliation,
-							progress.votingSummary.result
+							event.votingSummary.resultsByAffiliation,
+							event.votingSummary.result
 						)}
 						class="mb-4"
 					/>

src/lib/datasheets/fetchers/global-events.ts

@@ -0,0 +1,14 @@
+import type { GlobalEvent } from '$models/global-event';
+import { sheets, withCache } from './shared';
+import { asDate, asString, Column, Object } from 'sheethuahua';
+
+export const fetchGlobalEvents = withCache('Global Events', (): Promise<GlobalEvent[]> => {
+	const partySchema = Object({
+		title: Column('title', asString()),
+		description: Column('description', asString()),
+		date: Column('date', asDate()),
+		url: Column('url', asString())
+	});
+
+	return sheets.get('Global Events', partySchema);
+});

src/lib/datasheets/index.ts

@@ -3,6 +3,7 @@ import { error } from '@sveltejs/kit';
 export * from './fetchers/assembly';
 export * from './fetchers/bill';
 export * from './fetchers/bill-events';
+export * from './fetchers/global-events';
 export * from './fetchers/party';
 export * from './fetchers/politician';
 export * from './fetchers/promise';

src/models/global-event.ts

@@ -0,0 +1,6 @@
+export interface GlobalEvent {
+	title: string;
+	description: string;
+	date: Date;
+	url: string;
+}

src/routes/promises/[id]/+page.server.ts

@@ -1,9 +1,11 @@
-import { fetchFromIdOr404, fetchPromises } from '$lib/datasheets/index.js';
+import { fetchFromIdOr404, fetchGlobalEvents, fetchPromises } from '$lib/datasheets/index.js';
 
 export async function load({ params }) {
 	const promise = await fetchFromIdOr404(fetchPromises, params.id);
+	const globalEvents = await fetchGlobalEvents();
 
 	return {
-		promise
+		promise,
+		globalEvents
 	};
 }

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

@@ -11,7 +11,7 @@
 
 	export let data;
 
-	$: ({ promise } = data);
+	$: ({ promise, globalEvents } = data);
 
 	let showStatusListModal = false;
 
@@ -139,7 +139,7 @@
 			คำสัญญามีสถานะอะไรบ้าง?
 		</button>
 	</div>
-	<PromiseProgressTimeline {promise} />
+	<PromiseProgressTimeline {promise} {globalEvents} />
 	<div class="mt-8 flex flex-col justify-between gap-4 bg-gray-10 p-6 md:flex-row">
 		<div class="text-01">
 			<div class="heading-02">