fix: temporary match sheets bills with politigraph people

Th1nkK1D · Th1nkK1D · commit efa1a60fcb55 · 2025-09-08T21:28:43.000+07:00
diff --git a/src/components/BillCard/BillCard.svelte b/src/components/BillCard/BillCard.svelte
@@ -3,8 +3,7 @@
 	import BillStatusTag from '$components/BillStatusTag/BillStatusTag.svelte';
 	import { BillStatus, type Bill } from '$models/bill';
 	import { twMerge } from 'tailwind-merge';
-	import Proposer from '$components/Proposer/Proposer.svelte';
-	import { getProposerFromBill } from '$lib/model-component-adapters/bill-proposer';
+	// import Proposer from '$components/Proposer/Proposer.svelte';
 
 	export let id: string;
 	export let nickname: string;
@@ -45,8 +44,9 @@
 			<h3 class="fluid-heading-03 text-text-01">{nickname}</h3>
 		</a>
 		<p class="text-sm text-text-02"><span class="mr-1 font-bold">ชื่อทางการ</span>{title}</p>
-		<p class="font-semibold">เสนอโดย</p>
-		<Proposer proposer={getProposerFromBill(bill)} />
+		<!-- TODO: Waiting for new Bill data from Politigraph -->
+		<!-- <p class="font-semibold">เสนอโดย</p>
+		<Proposer proposer={getProposerFromBill(bill)} /> -->
 	</div>
 
 	<div
diff --git a/src/components/Proposer/Proposer.story.svelte b/src/components/Proposer/Proposer.story.svelte
@@ -14,9 +14,8 @@
 			{orientation}
 			proposer={{
 				id: 'พริษฐ์-วัชรสินธุ',
-				firstname: 'พริษฐ์',
-				lastname: 'วัชรสินธุ',
-				avatar: 'https://via.placeholder.com/64',
+				name: 'พริษฐ์ วัชรสินธุ',
+				image: 'https://via.placeholder.com/64',
 				assembly: {
 					id: 'สภาผู้แทนราษฎร-26',
 					abbreviation: 'ส.ส.',
@@ -32,8 +31,7 @@
 			{orientation}
 			proposer={{
 				id: 'คณะรัฐมนตรี-64',
-				isCabinet: true,
-				abbreviation: 'คณะรัฐมนตรี',
+				abbreviation: 'ครม.',
 				term: 64,
 				startedAt: new Date('04/09/2024')
 			}}
@@ -44,8 +42,7 @@
 			{orientation}
 			proposer={{
 				id: 'สภาผู้แทนราษฎร-26',
-				isCabinet: false,
-				abbreviation: 'ส.ส.',
+				abbreviation: 'สส.',
 				term: 26,
 				startedAt: new Date('01/01/2023')
 			}}
diff --git a/src/components/Proposer/Proposer.svelte b/src/components/Proposer/Proposer.svelte
@@ -1,24 +1,22 @@
 <script context="module" lang="ts">
 	export type PoliticianProposer = {
 		id: string;
-		firstname: string;
-		lastname: string;
-		avatar: string;
+		name: string;
+		image: string | null;
 		assembly?: {
 			id: string;
-			abbreviation: string;
-			term: number;
-			startedAt: Date;
+			abbreviation: string | null;
+			term: number | null;
+			startedAt: Date | string | null;
 		};
 		partyName?: string;
 	};
 
 	export type AssemblyProposer = {
 		id: string;
-		isCabinet: boolean;
 		abbreviation: string;
 		term: number;
-		startedAt: Date;
+		startedAt: Date | string | null;
 	};
 
 	export type PeopleProposer = {
@@ -44,47 +42,57 @@
 
 	$: isLandscape = orientation === 'landscape';
 
-	function getBudistYear(date: Date) {
+	function getBudistYear(date: string | Date) {
 		return dayjs(date).format('BBBB');
 	}
 </script>
 
-<div class="flex {isLandscape ? 'flex-col gap-x-2 md:flex-row' : 'flex-col'}">
+<div class="flex items-center {isLandscape ? 'flex-col gap-x-2 md:flex-row' : 'flex-col'}">
 	{#if proposer === undefined}
 		<p class="text-sm text-gray-60">ไม่พบข้อมูล</p>
-	{:else if 'firstname' in proposer}
-		{@const { id, firstname, lastname, avatar, assembly, partyName } = proposer}
+	{:else if 'image' in proposer}
+		{@const { id, name, image, assembly, partyName } = proposer}
 		<figure class="h-6 w-6 shrink-0 overflow-hidden rounded-full bg-gray-20">
-			<img src={avatar} alt="{firstname} {lastname}" class="h-full w-full" loading="lazy" />
+			<img
+				src={image || '/images/politicians/_placeholder.webp'}
+				alt=""
+				class="h-full w-full"
+				loading="lazy"
+			/>
 		</figure>
-		<div>
-			<p class="text-sm">
-				<a href="/politicians/{id}" class="text-black">
-					{firstname}
-					{lastname}
+		<p class="text-sm">
+			<a href="/politicians/{id}" class="text-black">
+				{name}
+			</a>
+			{#if assembly}
+				<a href="/assemblies/{assembly.id}" class="text-sm text-black underline">
+					{assembly.abbreviation} ชุดที่ {assembly.term}
+					{#if assembly.startedAt}
+						({getBudistYear(assembly.startedAt)})
+					{/if}
 				</a>
-				{#if assembly}
-					<a href="/assemblies/{assembly.id}" class="text-sm text-black underline">
-						{assembly.abbreviation} ชุดที่ {assembly.term} ({getBudistYear(assembly.startedAt)})
-					</a>
-				{/if}
-			</p>
-			{#if partyName}
-				<span class="text-sm text-gray-60">พรรค{partyName}</span>
 			{/if}
-		</div>
+		</p>
+		{#if partyName}
+			<span class="text-sm text-gray-60">พรรค{partyName}</span>
+		{/if}
 	{:else if 'term' in proposer}
-		{@const { id, abbreviation, term, isCabinet, startedAt } = proposer}
+		{@const { id, abbreviation, term, startedAt } = proposer}
 		<div class="flex h-6 w-6 items-center justify-center rounded-full bg-black">
 			<svelte:component
-				this={isCabinet ? GeneralIcon : PoliticianIcon}
+				this={abbreviation === 'ครม.' ? GeneralIcon : PoliticianIcon}
 				class="stroke-white"
 				size={16}
 			/>
 		</div>
 		<a href="/assemblies/{id}" class="text-sm text-black">
 			{abbreviation}
-			<span class="underline">ชุดที่ {term} ({getBudistYear(startedAt)})</span>
+			<span class="underline"
+				>ชุดที่ {term}
+				{#if startedAt}
+					({getBudistYear(startedAt)})
+				{/if}
+			</span>
 		</a>
 	{:else}
 		{@const { ledBy, signatoryCount } = proposer}
diff --git a/src/components/bills/CoPartyProposer.svelte b/src/components/bills/CoPartyProposer.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type { Politician } from '$models/politician';
-
-	export let name: string;
-	export let politicians: (Politician | string)[];
-
-	$: party =
-		typeof politicians[0] === 'object'
-			? politicians[0].partyRoles.find((e) => !e.endedAt)?.party
-			: undefined;
+	export let politicianCount: number;
+	export let party:
+		| {
+				id?: string;
+				name: string;
+				logo?: string;
+		  }
+		| undefined = undefined;
 </script>
 
 <div class="flex gap-2">
@@ -18,8 +17,11 @@
 		<img src={party?.logo || '/images/politicians/_placeholder.webp'} alt="" />
 	</div>
 	<div class="flex">
-		<!-- TODO: link to party when implemented -->
-		<p>{party ? 'พรรค' : ''}{name}</p>
-		<p class="body-02 ml-1 text-text-02">{politicians.length} คน</p>
+		{#if party?.id}
+			<a href="/party?/{party?.id}">พรรค{party?.name}</a>
+		{:else}
+			<p>พรรค{party?.name}</p>
+		{/if}
+		<p class="body-02 ml-1 text-text-02">{politicianCount} คน</p>
 	</div>
 </div>
diff --git a/src/components/bills/CoProposer.svelte b/src/components/bills/CoProposer.svelte
@@ -1,18 +1,10 @@
 <script lang="ts">
-	import type { Politician } from '$models/politician';
-
 	export let index: number;
-	export let politician: Politician | string;
-	export let billProposedOn: Date;
-
-	$: party =
-		typeof politician === 'object'
-			? politician.partyRoles?.find(
-					({ startedAt, endedAt }) =>
-						billProposedOn.getTime() >= startedAt.getTime() &&
-						(!endedAt || billProposedOn.getTime() <= endedAt.getTime())
-				)?.party
-			: undefined;
+	export let politician: {
+		id?: string;
+		name: string;
+	};
+	export let partyLogo: string | null = null;
 </script>
 
 <tr>
@@ -23,14 +15,12 @@
 				class="flex items-center justify-center overflow-hidden rounded-full border border-gray-30"
 				style="width: 16px; height: 16px;"
 			>
-				<img src={party?.logo || '/images/politicians/_placeholder.webp'} alt="" />
+				<img src={partyLogo || '/images/politicians/_placeholder.webp'} alt="" />
 			</div>
-			{#if typeof politician === 'object'}
-				<a class="text-black underline" href="/politicians/{politician.id}"
-					>{politician.firstname} {politician.lastname}</a
-				>
+			{#if politician.id}
+				<a class="text-black underline" href="/politicians/{politician.id}">{politician.name}</a>
 			{:else}
-				<p>{politician}</p>
+				<p>{politician.name}</p>
 			{/if}
 		</div>
 	</td>
diff --git a/src/components/bills/ModalListCoProposers.svelte b/src/components/bills/ModalListCoProposers.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
 	import { showModalListCoProposer } from '$components/bills/store';
-	import type { Politician } from '$models/politician';
 	import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
 	import CoProposer from './CoProposer.svelte';
+	import type { ComponentProps } from 'svelte';
 
-	export let coProposedByPoliticians: (Politician | string)[];
-	export let billProposedOn: Date;
+	export let coProposedByPoliticians: ComponentProps<CoProposer>['politician'][];
 </script>
 
 {#if $showModalListCoProposer}
@@ -32,7 +31,7 @@
 				<div class="flex flex-col pb-5 pl-8 pr-5">
 					<table class="w-full">
 						{#each coProposedByPoliticians as politician, i}
-							<CoProposer index={i + 1} {politician} {billProposedOn} />
+							<CoProposer index={i + 1} {politician} />
 						{/each}
 					</table>
 				</div>
diff --git a/src/lib/model-component-adapters/bill-proposer.ts b/src/lib/model-component-adapters/bill-proposer.ts
diff --git a/src/routes/bills/[id]/+page.server.ts b/src/routes/bills/[id]/+page.server.ts
@@ -7,6 +7,7 @@ import { queryPoliticiansVote } from '$lib/politigraph/vote/with-politician';
 import { createSeo } from '$lib/seo';
 import type { Bill } from '$models/bill';
 import { BillEventType, type BillEvent } from '$models/bill-event';
+import type { Politician } from '$models/politician';
 import type { ComponentProps } from 'svelte';
 
 export async function entries() {
@@ -71,8 +72,26 @@ export async function load({ params }) {
 		}))
 	);
 
+	// TODO: workaround to temporary match old sheet politician id with new politician politigraph id
+	const proposedLedByPolitician = bill.proposedLedByPolitician
+		? await mapOldPoliticianToNewPolitician(bill.proposedOn, bill.proposedLedByPolitician)
+		: undefined;
+	const coProposedByPoliticians = bill.coProposedByPoliticians
+		? await Promise.all(
+				bill.coProposedByPoliticians.map((politician) =>
+					typeof politician === 'string'
+						? { name: politician }
+						: mapOldPoliticianToNewPolitician(bill.proposedOn, politician)
+				)
+			)
+		: undefined;
+
 	return {
-		bill,
+		bill: {
+			...bill,
+			proposedLedByPolitician,
+			coProposedByPoliticians
+		},
 		// TODO: merged bill data is not ready yet
 		mergedBills: [] as Bill[], // Bills that got merged into this bill.
 		// TODO: Remove this when we migrate bill to Politigraph
@@ -93,3 +112,60 @@ export async function load({ params }) {
 		})
 	};
 }
+
+async function mapOldPoliticianToNewPolitician(billProposedDate: Date, politician: Politician) {
+	const { memberships, ...rest } = (
+		await graphql.query({
+			people: {
+				__args: {
+					where: {
+						firstname_EQ: politician.firstname,
+						lastname_EQ: politician.lastname
+					}
+				},
+				id: true,
+				name: true,
+				image: true,
+				memberships: {
+					__args: {
+						where: {
+							start_date_LTE: billProposedDate.toUTCString(),
+							OR: [{ end_date_EQ: null }, { end_date_GTE: billProposedDate.toUTCString() }]
+						}
+					},
+					posts: {
+						label: true,
+						organizations: {
+							id: true,
+							name: true,
+							image: true,
+							term: true,
+							abbreviation: true,
+							classification: true,
+							founding_date: true
+						}
+					}
+				}
+			}
+		})
+	).people[0];
+
+	const assembly = memberships.find(
+		(m) => m.posts[0].organizations[0].classification !== 'POLITICAL_PARTY'
+	);
+
+	return {
+		...rest,
+		party: memberships.find((m) => m.posts[0].organizations[0].classification === 'POLITICAL_PARTY')
+			?.posts[0].organizations[0],
+		assembly: assembly
+			? {
+					id: assembly.posts[0].organizations[0].id,
+					abbreviation: assembly.posts[0].organizations[0].abbreviation,
+					term: assembly.posts[0].organizations[0].term,
+					startedAt: assembly.posts[0].organizations[0].founding_date,
+					postLabel: assembly.posts[0].label
+				}
+			: undefined
+	};
+}
diff --git a/src/routes/bills/[id]/+page.svelte b/src/routes/bills/[id]/+page.svelte
