feat: hide empty promise status and link (#140)

Author: greatng

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>
 

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>