feat: show promises in search results component (#155)

* feat: show promises in search results component * feat: update PromiseStatusTag story after adding a new prop * feat: make isLarge in PromiseStatusTag align with others tag components convention
wevisdemo · Nov 5, 2024 · da671a5 · da671a5
1 parent a356823
commit da671a5
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 8 deletions.
diff --git a/src/components/PromiseDetail/PromiseStatusModal.svelte b/src/components/PromiseDetail/PromiseStatusModal.svelte
@@ -14,7 +14,7 @@
 	<div class="mt-4 flex flex-col gap-4">
 		{#each promiseStatusList as status}
 			<div>
-				<PromiseStatusTag status={status.label} />
+				<PromiseStatusTag isLarge status={status.label} />
 				<div class="body-02 mt-2">{status.text}</div>
 			</div>
 		{/each}

diff --git a/src/components/PromiseDetail/PromiseStatusTag.story.svelte b/src/components/PromiseDetail/PromiseStatusTag.story.svelte
@@ -4,6 +4,7 @@
 	import { promiseStatusList } from '../../constants/promise';
 
 	export let Hst: Hst;
+	let isLarge = false;
 </script>
 
 <Hst.Story
@@ -14,7 +15,10 @@
 >
 	{#each promiseStatusList as status}
 		<Hst.Variant title={status.label}>
-			<PromiseStatusTag status={status.label} />
+			<PromiseStatusTag isLarge status={status.label} />
 		</Hst.Variant>
 	{/each}
+	<svelte:fragment slot="controls">
+		<Hst.Checkbox title="isLarge" bind:value={isLarge} />
+	</svelte:fragment>
 </Hst.Story>
diff --git a/src/components/PromiseDetail/PromiseStatusTag.svelte b/src/components/PromiseDetail/PromiseStatusTag.svelte
@@ -3,15 +3,17 @@
 	import { twMerge } from 'tailwind-merge';
 
 	export let status: PromiseStatus;
+	export let isLarge = false;
 </script>
 
 <div
 	class={twMerge(
-		'heading-02 w-fit flex-none rounded-3xl bg-gray-30 px-2 py-1',
+		'heading-02 w-fit flex-none rounded-3xl bg-gray-30 px-2 py-1 text-text-01',
 		[PromiseStatus.clarifying, PromiseStatus.notStarted].includes(status) && 'bg-gray-30',
 		status === PromiseStatus.inProgress && 'bg-yellow-20',
 		status === PromiseStatus.fulfilled && 'bg-green-50 text-white',
-		status === PromiseStatus.unhonored && 'bg-magenta-50 text-white'
+		status === PromiseStatus.unhonored && 'bg-magenta-50 text-white',
+		!isLarge && 'text-xs font-normal'
 	)}
 >
 	{status}

diff --git a/src/components/SearchResult/SearchResult.story.svelte b/src/components/SearchResult/SearchResult.story.svelte
@@ -4,6 +4,7 @@
 	import type { SearchResults } from '$models/search';
 	import { BillStatus } from '$models/bill';
 	import { DefaultVotingResult } from '$models/voting';
+	import { PromiseStatus } from '$models/promise';
 	export let Hst: Hst;
 
 	const noResults: SearchResults = {};
@@ -57,6 +58,18 @@
 				proposedBillsCount: 1,
 				url: '#n'
 			}
+		],
+		promises: [
+			{
+				heading: 'โครงการ 1 อำเภอ 1 ทุน (ODOS: One District One Scholarship)',
+				promiseStatus: PromiseStatus.notStarted,
+				url: '#o'
+			},
+			{
+				heading: '“รถไฟฟ้า กทม.” 20 บาทตลอดสาย',
+				promiseStatus: PromiseStatus.inProgress,
+				url: '#p'
+			}
 		]
 	};
 </script>

diff --git a/src/components/SearchResult/SearchResult.svelte b/src/components/SearchResult/SearchResult.svelte
@@ -3,6 +3,7 @@
 	import SearchResultGroup from '$components/SearchResultGroup/SearchResultGroup.svelte';
 	import LawIcon from '$components/icons/LawIcon.svelte';
 	import PoliticianIcon from '$components/icons/PoliticianIcon.svelte';
+	import PromiseIcon from '$components/icons/PromiseIcon.svelte';
 	import VoteIcon from '$components/icons/VoteIcon.svelte';
 	import type { SearchResults } from '$models/search';
 	import { twMerge } from 'tailwind-merge';
@@ -39,6 +40,11 @@
 					<VoteIcon slot="icon" class="fill-interactive-01" />
 				</SearchResultGroup>
 			{/if}
+			{#if searchResults.promises}
+				<SearchResultGroup heading="คำสัญญา" items={searchResults.promises}>
+					<PromiseIcon slot="icon" class="fill-interactive-01" />
+				</SearchResultGroup>
+			{/if}
 		{:else}
 			<NoResultItemsFound />
 		{/if}

diff --git a/src/components/SearchResultGroup/ResultItem.svelte b/src/components/SearchResultGroup/ResultItem.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import BillStatusTag from '$components/BillStatusTag/BillStatusTag.svelte';
+	import PromiseStatusTag from '$components/PromiseDetail/PromiseStatusTag.svelte';
 	import VotingResultTag from '$components/VotingResultTag/VotingResultTag.svelte';
 	import type { SearchResultItem } from '$models/search';
 	import HightlightText from './HightlightText.svelte';
@@ -20,7 +21,7 @@
 					<p class="text-xs text-text-03">{item.description}</p>
 				{/if}
 			</div>
-			{#if item.billStatus !== undefined || item.voteResult !== undefined || item.proposedBillsCount !== undefined}
+			{#if item.billStatus !== undefined || item.voteResult !== undefined || item.proposedBillsCount !== undefined || item.promiseStatus !== undefined}
 				<div class="shrink-0">
 					{#if item.billStatus}
 						<BillStatusTag status={item.billStatus} />
@@ -31,6 +32,9 @@
 					{#if item.proposedBillsCount}
 						<p class="label-02 text-text-02">{item.proposedBillsCount} ร่าง</p>
 					{/if}
+					{#if item.promiseStatus}
+						<PromiseStatusTag status={item.promiseStatus} />
+					{/if}
 				</div>
 			{/if}
 		</div>

diff --git a/src/models/search.ts b/src/models/search.ts
@@ -1,4 +1,5 @@
 import type { BillStatus } from './bill';
+import type { PromiseStatus } from './promise';
 
 export enum SearchIndexCategory {
 	Politicians = 'politicians',
@@ -42,37 +43,50 @@ interface PoliticianSearchResultItem extends BaseSearchResultItem {
 	billStatus?: never;
 	voteResult?: never;
 	proposedBillsCount?: never;
+	promiseStatus?: never;
 }
 
 interface BillSearchResultItem extends BaseSearchResultItem {
 	billStatus: BillStatus;
 	voteResult?: never;
 	proposedBillsCount?: never;
+	promiseStatus?: never;
 }
 
 interface VotingSearchResultItem extends BaseSearchResultItem {
 	billStatus?: never;
 	voteResult?: string;
 	proposedBillsCount?: never;
+	promiseStatus?: never;
 }
 
 interface BillProposerSearchResultItem extends BaseSearchResultItem {
 	billStatus?: never;
 	voteResult?: never;
 	proposedBillsCount: number;
+	promiseStatus?: never;
+}
+
+interface PromiseSearchResultItem extends BaseSearchResultItem {
+	billStatus?: never;
+	voteResult?: never;
+	proposedBillsCount?: never;
+	promiseStatus: PromiseStatus;
 }
 
 export type SearchResultItem =
 	| PoliticianSearchResultItem
 	| BillSearchResultItem
 	| VotingSearchResultItem
-	| BillProposerSearchResultItem;
+	| BillProposerSearchResultItem
+	| PromiseSearchResultItem;
 
 export interface SearchResults {
 	politicians?: PoliticianSearchResultItem[];
 	bills?: BillSearchResultItem[];
 	votings?: VotingSearchResultItem[];
 	billProposers?: BillProposerSearchResultItem[];
+	promises?: PromiseSearchResultItem[];
 }
 
 export interface ScoreResultItem<T> {

diff --git a/src/routes/promises/[id]/+page.svelte b/src/routes/promises/[id]/+page.svelte
@@ -62,7 +62,7 @@
 		{/each}
 	</div>
 	<div class="mt-4 flex flex-col gap-2 xl:flex-row xl:items-center">
-		<PromiseStatusTag status={promise.status} />
+		<PromiseStatusTag isLarge status={promise.status} />
 		<div class="body-01 text-text-01">
 			{promiseText}
 		</div>
@@ -130,7 +130,7 @@
 	<hr class="mt-4 border-gray-20" />
 	<div class="mb-4 mt-3 flex justify-between">
 		<div class="heading-02 flex flex-col gap-1 md:flex-row md:items-center">
-			สถานะ <PromiseStatusTag status={promise.status} />
+			สถานะ <PromiseStatusTag isLarge status={promise.status} />
 		</div>
 		<button
 			class="helper-text-01 h-fit text-link-01 underline"