fix: correct cabinet info section in promises page (#139)

* fix: cabinet info * refactor: code review
wevisdemo · Oct 22, 2024 · 973285d · 973285d
1 parent 7e806a5
commit 973285d
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 41 deletions.
diff --git a/src/components/Promise/Home/AboutCard.svelte b/src/components/Promise/Home/AboutCard.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
 	import PoliticianPicture from '$components/PoliticianPicture/PoliticianPicture.svelte';
 	import { ArrowRight } from 'carbon-icons-svelte';
-	import type { CabinetSummary } from '../../../routes/promises/+page.server';
-	import { formatThaiDate, shortMonthNames } from '$lib/date-parser';
+	import type {
+		CabinetSummary,
+		PreviousCabinetSummary
+	} from '../../../routes/promises/+page.server';
+	import { formatThaiDate } from '$lib/date-parser';
 
 	export let cabinet: CabinetSummary;
+	export let previousCabinet: PreviousCabinetSummary;
 	$: ({ primeMinister, policyStatement } = cabinet);
+	$: previousCabinetMemberCountsByParty = previousCabinet.cabinetMemberCountsByParty;
 </script>
 
 <div class="flex w-full flex-col gap-4 bg-ui-05 p-6 text-text-04">
@@ -14,7 +19,7 @@
 			<p class="heading-01">นายกรัฐมนตรี</p>
 			<div class="flex flex-col gap-2">
 				<div class="flex gap-2">
-					<PoliticianPicture size="64" party={primeMinister.party} />
+					<PoliticianPicture avatar={primeMinister.avatar} size="64" party={primeMinister.party} />
 					<div>
 						<p class="fluid-heading-04">{primeMinister.firstname} {primeMinister.lastname}</p>
 						<p class="body-01">
@@ -28,12 +33,14 @@
 				</div>
 				<div class="flex flex-wrap">
 					{#each cabinet.cabinetMemberCountsByParty as party}
-						<div class="flex gap-1 py-1 pr-2">
+						<div class="flex items-center gap-1 py-1 pr-3">
 							{#if typeof party.party != 'string'}
 								<img src={party.party.logo} class="block h-5 w-5 rounded-full" alt="" />
-								<p>{party.party.name}</p>
+								<p class="label-01">{party.party.name}</p>
+								<p class="label-01 text-text-03">{party.count}</p>
 							{:else}
-								<p>{party.party}</p>
+								<p class="label-01">{party.party}</p>
+								<p class="label-01 text-text-03">{party.count}</p>
 							{/if}
 						</div>
 					{/each}
@@ -59,21 +66,27 @@
 	</div>
 	<div class="flex flex-col gap-2 border-t border-ui-04 pt-3">
 		<p class="label-01 text-text-03">
-			รัฐบาลชุดที่ผ่านมาในสมัยการเลือกตั้ง {cabinet.startedAt.getFullYear() + 543}
+			รัฐบาลชุดที่ผ่านมาในสมัยการเลือกตั้ง {previousCabinet.startedAt.getFullYear() + 543}
 		</p>
 		<ul class="list-disc">
 			<li class="label-01 ml-5">
-				นายกรัฐมนตรี{primeMinister.firstname}
-				{primeMinister.lastname} และคณะรัฐมนตรีจาก
-				{#each cabinet.cabinetMemberCountsByParty as party}
-					{#if typeof party.party != 'string'}
-						{party.party.name} ({party.count} ตำแหน่ง),&nbsp;
+				นายกรัฐมนตรี{previousCabinet.primeMinister.firstname}
+				{previousCabinet.primeMinister.lastname} และคณะรัฐมนตรีจาก
+				{#each previousCabinetMemberCountsByParty as party, i}
+					{#if typeof party.party !== 'string'}
+						{party.party.name} ({party.count} ตำแหน่ง)
 					{:else}
-						{party.party}
+						{party.party} ({party.count} ตำแหน่ง)
+					{/if}
+					{#if i < previousCabinetMemberCountsByParty.length - 1}
+						,&nbsp
 					{/if}
 				{/each}
 				<p class="label-01 text-text-03">
-					{formatThaiDate(cabinet.startedAt, true)} - {formatThaiDate(new Date(), true)}
+					{formatThaiDate(previousCabinet.startedAt, true)} - {formatThaiDate(
+						previousCabinet.endedAt,
+						true
+					)}
 				</p>
 			</li>
 		</ul>

diff --git a/src/components/Promise/Home/AboutSection.svelte b/src/components/Promise/Home/AboutSection.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-	import type { CabinetSummary } from '../../../routes/promises/+page.server';
+	import type {
+		CabinetSummary,
+		PreviousCabinetSummary
+	} from '../../../routes/promises/+page.server';
 	import AboutCard from './AboutCard.svelte';
 	export let cabinet: CabinetSummary;
+	export let previousCabinet: PreviousCabinetSummary;
 </script>
 
 <div class="flex flex-col items-center gap-2 py-3">
 	<p class="fluid-heading-04">เกี่ยวกับรัฐบาล</p>
-	<AboutCard {cabinet} />
+	<AboutCard {cabinet} {previousCabinet} />
 </div>
diff --git a/src/routes/promises/+page.server.ts b/src/routes/promises/+page.server.ts
@@ -1,22 +1,28 @@
 import { fetchAssemblies, fetchParties, fetchPoliticians, fetchPromises } from '$lib/datasheets';
-import { getAssemblyMembers } from '$lib/datasheets/assembly-member';
+import { getAssemblyMembers, type AssemblyMember } from '$lib/datasheets/assembly-member';
+import type { Assembly } from '$models/assembly';
 import type { Party } from '$models/party';
 import type { Politician } from '$models/politician';
 import { PromiseStatus, type Promise, type PromiseSummary } from '$models/promise';
 import { error } from '@sveltejs/kit';
-import type { Assembly } from 'carbon-icons-svelte';
 import { groups } from 'd3';
 import dayjs from 'dayjs';
 
 const MAX_PROMISES_SAMPLE = 3;
 
 export interface CabinetSummary extends Pick<Assembly, 'id' | 'startedAt'> {
-	primeMinister: Pick<Politician, 'firstname' | 'lastname'> & { party?: Party };
+	primeMinister: Pick<Politician, 'firstname' | 'lastname' | 'avatar'> & { party?: Party };
 	cabinetMemberCount: number;
 	cabinetMemberCountsByParty: { party: Party | 'ไม่สังกัดพรรค'; count: number }[];
 	policyStatement: string;
 }
 
+export interface PreviousCabinetSummary extends Pick<Assembly, 'id' | 'startedAt'> {
+	primeMinister: Pick<Politician, 'firstname' | 'lastname'> & { party?: Party };
+	cabinetMemberCountsByParty: { party: Party | 'ไม่สังกัดพรรค'; count: number }[];
+	endedAt: Date;
+}
+
 export type PromiseSample = Pick<Promise, 'id' | 'statements'>;
 export type PromiseCountByStatus = {
 	[PromiseStatus.inProgress]: number;
@@ -36,26 +42,23 @@ export interface PromisesByCategory {
 	count: number;
 }
 
-const CURRENT_CABINET_ASSEMBLY_ID = 'คณะรัฐมนตรี-64';
-
-export async function load() {
-	const cabinetAssembly = (await fetchAssemblies()).find(
-		(a) => a.id === CURRENT_CABINET_ASSEMBLY_ID
-	);
-	if (!cabinetAssembly) {
-		error(500, `Cannot find the current cabinet: ${CURRENT_CABINET_ASSEMBLY_ID}`);
+function findPrimeMinister(cabinetMembers: AssemblyMember[]) {
+	const primeMinister = cabinetMembers.find((m) => m.assemblyRole?.role === 'นายกรัฐมนตรี');
+	if (!primeMinister) {
+		error(500, `Cannot find the prime minister in the given cabinet`);
 	}
+	return primeMinister;
+}
 
-	const politicians = await fetchPoliticians();
-	const parties = await fetchParties();
-	const promises = await fetchPromises();
-
-	const cabinetMembers = getAssemblyMembers(cabinetAssembly, politicians).filter(
+function getCabinetMembers(cabinetAssembly: Assembly, politicians: Politician[]) {
+	return getAssemblyMembers(cabinetAssembly, politicians).filter(
 		({ assemblyRole }) =>
 			!assemblyRole?.endedAt ||
 			(cabinetAssembly.endedAt && !dayjs(cabinetAssembly.endedAt).isAfter(assemblyRole.endedAt))
 	);
+}
 
+function getCabinetMemberCountsByParty(cabinetMembers: AssemblyMember[], parties: Party[]) {
 	const cabinetMemberCountsByPartyName = cabinetMembers
 		.map((m) => m.partyRole?.party.name)
 		.reduce(
@@ -67,7 +70,7 @@ export async function load() {
 			{} as { [partyName: string]: number }
 		);
 
-	const cabinetMemberCountsByParty = Object.entries(cabinetMemberCountsByPartyName).map(
+	return Object.entries(cabinetMemberCountsByPartyName).map(
 		([name, count]): { party: Party | 'ไม่สังกัดพรรค'; count: number } => {
 			const party =
 				name === 'ไม่สังกัดพรรค' ? 'ไม่สังกัดพรรค' : parties.find((p) => p.name === name);
@@ -76,16 +79,27 @@ export async function load() {
 			}
 			return {
 				party,
-				count
+				count: count as number
 			};
 		}
 	);
+}
 
-	const primeMinister = cabinetMembers.find((m) => m.assemblyRole?.role === 'นายกรัฐมนตรี');
+export async function load() {
+	const assemblies: Assembly[] = await fetchAssemblies();
+	const politicians: Politician[] = await fetchPoliticians();
+	const parties: Party[] = await fetchParties();
+	const promises: Promise[] = await fetchPromises();
 
-	if (!primeMinister) {
-		error(500, `Cannot find the current prime minister in the given cabinet`);
-	}
+	const currentAndPreviousAssembiles = assemblies
+		.filter((assembly) => assembly.name == 'คณะรัฐมนตรี')
+		.sort((a, b) => b.term - a.term)
+		.slice(0, 2);
+
+	const cabinetAssembly = currentAndPreviousAssembiles[0];
+	const cabinetMembers = getCabinetMembers(cabinetAssembly, politicians);
+	const cabinetMemberCountsByParty = getCabinetMemberCountsByParty(cabinetMembers, parties);
+	const primeMinister = findPrimeMinister(cabinetMembers);
 
 	const mockPolicyStatement =
 		'นางสาวแพทองธาร ชินวัตร นายกรัฐมนตรี ได้แถลงนโยบายต่อรัฐสภาเมื่อวันที่ 12 กันยายน 2567 โดยเน้นความท้าทายที่ประเทศไทยต้องเผชิญ เช่น การเติบโตทางเศรษฐกิจที่ต่ำกว่าศักยภาพ ปัญหาหนี้สิน ความเหลื่อมล้ำ และสิ่งแวดล้อม โดยรัฐบาลตั้งใจจะเปลี่ยนความท้าทายเหล่านี้ให้เป็นโอกาสและความเสมอภาคทางเศรษฐกิจและสังคม นโยบายเร่งด่วนของรัฐบาลประกอบด้วย 10 ข้อ อาทิ การปรับโครงสร้างหนี้ การกระตุ้นเศรษฐกิจผ่านดิจิทัลวอลเล็ต การลดราคาพลังงาน และการส่งเสริมการท่องเที่ยว รวมถึงแผนระยะยาวเพื่อพัฒนาเศรษฐกิจดิจิทัล ยานยนต์ไฟฟ้า และพลังงานสะอาด ';
@@ -96,13 +110,38 @@ export async function load() {
 		primeMinister: {
 			firstname: primeMinister.firstname,
 			lastname: primeMinister.lastname,
-			party: primeMinister.partyRole?.party
+			party: primeMinister.partyRole?.party,
+			avatar: primeMinister.avatar
 		},
 		cabinetMemberCount: cabinetMembers.length,
 		cabinetMemberCountsByParty,
 		policyStatement: mockPolicyStatement
 	};
 
+	const previousCabinetAssembly = currentAndPreviousAssembiles[1];
+	const previousCabinetMembers = getCabinetMembers(previousCabinetAssembly, politicians);
+	const previousCabinetMemberCountsByParty = getCabinetMemberCountsByParty(
+		previousCabinetMembers,
+		parties
+	);
+	const previousPrimeMinister = findPrimeMinister(previousCabinetMembers);
+
+	if (!previousCabinetAssembly.endedAt) {
+		error(500, `Previous cabinet not have endedAt`);
+	}
+
+	const previousCabinet: PreviousCabinetSummary = {
+		id: previousCabinetAssembly.id,
+		startedAt: previousCabinetAssembly.startedAt,
+		endedAt: previousCabinetAssembly.endedAt,
+		primeMinister: {
+			firstname: previousPrimeMinister.firstname,
+			lastname: previousPrimeMinister.lastname,
+			party: previousPrimeMinister.partyRole?.party
+		},
+		cabinetMemberCountsByParty: previousCabinetMemberCountsByParty
+	};
+
 	const byStatus: PromisesByStatus[] = groups(promises, (p) => p.status).map(
 		([status, promisesByStatus]) => ({
 			status,
@@ -146,6 +185,7 @@ export async function load() {
 
 	return {
 		cabinet,
+		previousCabinet,
 		byStatus,
 		byCategory,
 		activeCount: promises.filter(({ status }) => status !== PromiseStatus.notStarted).length,

diff --git a/src/routes/promises/+page.svelte b/src/routes/promises/+page.svelte
@@ -8,7 +8,8 @@
 
 	export let data;
 
-	$: ({ cabinet, activeCount, count, byStatus, byCategory, promiseSummaries } = data);
+	$: ({ cabinet, previousCabinet, activeCount, count, byStatus, byCategory, promiseSummaries } =
+		data);
 
 	let defaultFilterBy = {
 		status: 'ทุกสถานะ',
@@ -75,7 +76,7 @@
 </ContentSection>
 
 <ContentSection id="about">
-	<AboutSection {cabinet} />
+	<AboutSection {cabinet} {previousCabinet} />
 </ContentSection>
 
 <ContentSection id="movement">