From 7e806a5f25cf815078028d8176060a4b9c50c69a Mon Sep 17 00:00:00 2001
From: "Paphawit Ngamchaliew (P-WIT)"
 <64273810+greatng@users.noreply.github.com>
Date: Mon, 21 Oct 2024 14:37:52 +0700
Subject: [PATCH] feat: hide empty promise status and link (#140)

---
 .../Home/PromiseMovementSection.svelte        | 44 ++++++++++---------
 .../Promise/Home/PromiseStatusCard.svelte     | 30 +++++++------
 2 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/src/components/Promise/Home/PromiseMovementSection.svelte b/src/components/Promise/Home/PromiseMovementSection.svelte
index fc8b81d9..a23ba4c1 100644
--- a/src/components/Promise/Home/PromiseMovementSection.svelte
+++ b/src/components/Promise/Home/PromiseMovementSection.svelte
@@ -146,27 +146,31 @@
 		</div>
 	</div>
 	<div class="flex flex-col gap-4 py-6 md:flex-row">
-		<div class="flex md:basis-1/2">
-			<OtherStatusCard
-				title="คำสัญญาที่ไม่พบความเคลื่อนไหว"
-				status="ไม่พบความเคลื่อนไหว"
-				statusCount={notStarted?.count || 0}
-				samples={notStarted?.samples}
-				description="เราไม่พบข้อมูลความเคลื่อนไหวที่เกี่ยวกับคำสัญญานี้"
-				on:buttonClick={handleClickViewAll}
-			/>
-		</div>
+		{#if notStarted}
+			<div class="flex md:basis-1/2">
+				<OtherStatusCard
+					title="คำสัญญาที่ไม่พบความเคลื่อนไหว"
+					status="ไม่พบความเคลื่อนไหว"
+					statusCount={notStarted.count}
+					samples={notStarted.samples}
+					description="เราไม่พบข้อมูลความเคลื่อนไหวที่เกี่ยวกับคำสัญญานี้"
+					on:buttonClick={handleClickViewAll}
+				/>
+			</div>
+		{/if}
 
-		<div class="flex md:basis-1/2">
-			<OtherStatusCard
-				title="คำสัญญาที่รอคำชี้แจงเพิ่มเติม"
-				status="รอคำชี้แจงเพิ่มเติม"
-				statusCount={clarifying?.count || 0}
-				samples={clarifying?.samples}
-				description="เราพบว่าคำสัญญานี้มีความคลุมเครือและกำลังอยู่ในระหว่างการขอคำชี้แจงเพิ่มเติม"
-				on:buttonClick={handleClickViewAll}
-			/>
-		</div>
+		{#if clarifying}
+			<div class="flex md:basis-1/2">
+				<OtherStatusCard
+					title="คำสัญญาที่รอคำชี้แจงเพิ่มเติม"
+					status="รอคำชี้แจงเพิ่มเติม"
+					statusCount={clarifying.count}
+					samples={clarifying.samples}
+					description="เราพบว่าคำสัญญานี้มีความคลุมเครือและกำลังอยู่ในระหว่างการขอคำชี้แจงเพิ่มเติม"
+					on:buttonClick={handleClickViewAll}
+				/>
+			</div>
+		{/if}
 	</div>
 </div>
 
diff --git a/src/components/Promise/Home/PromiseStatusCard.svelte b/src/components/Promise/Home/PromiseStatusCard.svelte
index 8c067c67..7e752077 100644
--- a/src/components/Promise/Home/PromiseStatusCard.svelte
+++ b/src/components/Promise/Home/PromiseStatusCard.svelte
@@ -27,19 +27,21 @@
 		style="width:{Math.round((statusCount / max) * 100)}%;"
 	/>
 	<p class="body-01 py-1 pt-2">{description}</p>
-	<div class="flex flex-col gap-1 py-1">
-		<p class="body-01 text-text-02">เช่น</p>
-		<ul class="list-disc space-y-2 pl-6">
-			{#each samples as s}
-				<li>
-					<a href="/promises/{s.id}" class="body-01 line-clamp-2 text-text-02 underline">
-						{s.statements}
-					</a>
-				</li>
-			{/each}
-		</ul>
-		<div class="py-1">
-			<button class="link-01 text-blue-60 underline" on:click={handleViewAll}>ดูทั้งหมด</button>
+	{#if statusCount}
+		<div class="flex flex-col gap-1 py-1">
+			<p class="body-01 text-text-02">เช่น</p>
+			<ul class="list-disc space-y-2 pl-6">
+				{#each samples as s}
+					<li>
+						<a href="/promises/{s.id}" class="body-01 line-clamp-2 text-text-02 underline">
+							{s.statements}
+						</a>
+					</li>
+				{/each}
+			</ul>
+			<div class="py-1">
+				<button class="link-01 text-blue-60 underline" on:click={handleViewAll}>ดูทั้งหมด</button>
+			</div>
 		</div>
-	</div>
+	{/if}
 </div>