fix: correct promise page detail and add promise status tag story (#147)

* fix: adjust wording and spacing * feat: add promise status tag story * refactor: use svelte expression in attribute --------- Co-authored-by: Th1nkK1D <[email protected]>
wevisdemo · Oct 22, 2024 · 286a59c · 286a59c
1 parent 2a09b48
commit 286a59c
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 30 deletions.
diff --git a/src/components/PromiseDetail/PromiseProgressTimeline.svelte b/src/components/PromiseDetail/PromiseProgressTimeline.svelte
@@ -86,8 +86,10 @@
 								href={progress.url}
 								target="_blank"
 								rel="noopener noreferrer"
-								class="label-01 underline">{progress.url}</a
+								class="label-01 break-all underline"
 							>
+								{progress.url}
+							</a>
 						</div>
 					{/if}
 				</div>

diff --git a/src/components/PromiseDetail/PromiseStatusModal.svelte b/src/components/PromiseDetail/PromiseStatusModal.svelte
@@ -1,41 +1,18 @@
 <script lang="ts">
 	import { Modal } from 'carbon-components-svelte';
 	import PromiseStatusTag from './PromiseStatusTag.svelte';
-	import type { PromiseStatus } from '$models/promise';
+	import { promiseStatusList } from '../../constants/promise';
 
 	export let open = false;
 	export let onClose: () => void;
-
-	const statusList = [
-		{
-			label: 'รอคำชี้แจงเพิ่มเติม',
-			text: 'เราพบว่าคำสัญญานี้มีความคลุมเครือและกำลังอยู่ในระหว่างการขอคำชี้แจงเพิ่มเติม'
-		},
-		{
-			label: 'ไม่พบความเคลื่อนไหว',
-			text: 'เราไม่พบข้อมูลความเคลื่อนไหวที่เกี่ยวกับคำสัญญานี้'
-		},
-		{
-			label: 'กำลังดำเนินการ',
-			text: 'เราพบข้อมูลความคืบหน้า แต่ยังไม่บรรลุเป้าหมายที่ได้สัญญาไว้'
-		},
-		{
-			label: 'ดำเนินการแล้ว',
-			text: 'เราพบข้อมูลความคืบหน้า และข้อมูลที่ชี้ว่าได้บรรลุเป้าหมายที่ได้สัญญาไว้แล้ว'
-		},
-		{
-			label: 'เลิกดำเนินการ',
-			text: 'เราพบข้อมูลความคืบหน้า ที่ชี้ว่ามีการเลิกดำเนินการเพื่อบรรลุเป้าหมายตามคำสัญญานี้แล้ว'
-		}
-	] as { label: PromiseStatus; text: string }[];
 </script>
 
 <Modal {open} passiveModal hasScrollingContent size="xs" on:close={onClose}>
 	<div slot="heading">
 		<div class="heading-03">สถานะคำสัญญา</div>
 	</div>
 	<div class="mt-4 flex flex-col gap-4">
-		{#each statusList as status}
+		{#each promiseStatusList as status}
 			<div>
 				<PromiseStatusTag status={status.label} />
 				<div class="body-02 mt-2">{status.text}</div>

diff --git a/src/components/PromiseDetail/PromiseStatusTag.story.svelte b/src/components/PromiseDetail/PromiseStatusTag.story.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Hst } from '@histoire/plugin-svelte';
+	import PromiseStatusTag from './PromiseStatusTag.svelte';
+	import { promiseStatusList } from '../../constants/promise';
+
+	export let Hst: Hst;
+</script>
+
+<Hst.Story
+	title="PromiseStatusTag"
+	layout={{
+		type: 'grid'
+	}}
+>
+	{#each promiseStatusList as status}
+		<Hst.Variant title={status.label}>
+			<PromiseStatusTag status={status.label} />
+		</Hst.Variant>
+	{/each}
+</Hst.Story>
diff --git a/src/constants/promise.ts b/src/constants/promise.ts
@@ -0,0 +1,24 @@
+import { PromiseStatus } from '$models/promise';
+
+export const promiseStatusList = [
+	{
+		label: PromiseStatus.clarifying,
+		text: 'เราพบว่าคำสัญญานี้มีความคลุมเครือและกำลังอยู่ในระหว่างการขอคำชี้แจงเพิ่มเติม'
+	},
+	{
+		label: PromiseStatus.notStarted,
+		text: 'เราไม่พบข้อมูลความเคลื่อนไหวที่เกี่ยวกับคำสัญญานี้'
+	},
+	{
+		label: PromiseStatus.inProgress,
+		text: 'เราพบข้อมูลความคืบหน้า แต่ยังไม่บรรลุเป้าหมายที่ได้สัญญาไว้'
+	},
+	{
+		label: PromiseStatus.fulfilled,
+		text: 'เราพบข้อมูลความคืบหน้า และข้อมูลที่ชี้ว่าได้บรรลุเป้าหมายที่ได้สัญญาไว้แล้ว'
+	},
+	{
+		label: PromiseStatus.unhonored,
+		text: 'เราพบข้อมูลความคืบหน้า ที่ชี้ว่ามีการเลิกดำเนินการเพื่อบรรลุเป้าหมายตามคำสัญญานี้แล้ว'
+	}
+] as { label: PromiseStatus; text: string }[];
diff --git a/src/routes/promises/[id]/+page.svelte b/src/routes/promises/[id]/+page.svelte
@@ -7,6 +7,7 @@
 	import { Breadcrumb, BreadcrumbItem, Button } from 'carbon-components-svelte';
 	import { SendAlt } from 'carbon-icons-svelte';
 	import PromiseClarificationLog from '$components/PromiseDetail/PromiseClarificationLog.svelte';
+	import { promiseStatusList } from '../../../constants/promise.js';
 
 	export let data;
 
@@ -20,6 +21,8 @@
 		promise?.statements?.[0]?.length > TITLE_MAX_LENGTH
 			? promise.statements[0].slice(0, TITLE_MAX_LENGTH) + '...'
 			: promise.statements?.[0];
+
+	$: promiseText = promiseStatusList.find((status) => status.label === promise.status)?.text;
 </script>
 
 <Breadcrumb
@@ -43,7 +46,9 @@
 		/>
 		<div class="body-01">พรรค{promise.party.name}</div>
 	</div>
-	<div class="mt-4 flex flex-nowrap gap-3 overflow-x-auto overflow-y-hidden">
+	<div
+		class="-mx-4 mt-4 flex flex-nowrap gap-3 overflow-x-auto overflow-y-hidden px-4 md:mx-0 md:px-0"
+	>
 		{#each promise.statements as statement}
 			<div class="flex min-w-[80%] gap-3">
 				<div class="flex flex-none flex-col items-center gap-2">
@@ -59,7 +64,7 @@
 	<div class="mt-4 flex flex-col gap-2 xl:flex-row xl:items-center">
 		<PromiseStatusTag status={promise.status} />
 		<div class="body-01 text-text-01">
-			[A definition that helps viewers understand the meaning and criteria of the status]
+			{promiseText}
 		</div>
 		<button
 			class="helper-text-01 w-fit flex-none text-link-01 underline"
@@ -81,13 +86,21 @@
 			<div class="flex flex-wrap gap-1">
 				<div class="heading-01 mt-1">คีย์เวิร์ด</div>
 				{#each promise.keywords as keyword}
-					<span class="label-01 rounded-3xl bg-gray-10 px-2 py-1">{keyword}</span>
+					<a
+						href="/promises/explore?keyword={keyword}"
+						class="label-01 rounded-3xl bg-gray-10 px-2 py-1 text-text-01"
+					>
+						{keyword}
+					</a>
 				{/each}
 			</div>
 			<div class="flex flex-wrap gap-1">
 				<div class="heading-01 mt-1">หมวด</div>
 				{#each promise.categories as category}
-					<span class="label-01 rounded-3xl border px-2 py-1">{category}</span>
+					<a
+						href="/promises/explore?category={category}"
+						class="label-01 rounded-3xl border border-black px-2 py-1 text-text-01">{category}</a
+					>
 				{/each}
 			</div>
 			<div class="flex flex-col gap-1 md:flex-row">