feat: add list view for promise list (#110)

* feat: add list view for promise list * fix: edit getStyle in promiseCard and edit list view button
wevisdemo · Sep 30, 2024 · d133917 · d133917
1 parent cae4048
commit d133917
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 63 deletions.
diff --git a/src/components/PromiseList/PromiseCard.svelte b/src/components/PromiseList/PromiseCard.svelte
@@ -3,16 +3,16 @@
 	import { PromiseStatus } from '$models/promise';
 	import Quotes from 'carbon-icons-svelte/lib/Quotes.svelte';
 	export let promiseSummary: PromiseSummary;
-
+	export let isList: boolean;
 	const formatDate = (date: Date) =>
 		date.toLocaleDateString('th-TH', {
 			year: 'numeric',
 			month: 'short',
 			day: 'numeric'
 		});
 
-	const getStyles = (status: PromiseStatus) => {
-		switch (status) {
+	$: style = (() => {
+		switch (promiseSummary.status) {
 			case PromiseStatus.inProgress:
 				return {
 					tag: 'bg-yellow-20 text-black',
@@ -34,53 +34,73 @@
 					footer: 'bg-gray-20'
 				};
 		}
-	};
+	})();
 </script>
 
-<div class="flex w-full shrink-0 cursor-pointer flex-col">
-	<div class="h-1 {getStyles(promiseSummary.status).tag}"></div>
-
-	<div class="group bg-ui-background px-6 hover:bg-ui-03">
-		<a href="/promises/explore?party={promiseSummary.party.name}">
-			<button class="flex items-center gap-2 py-4">
-				<img
-					src={promiseSummary.party.logo}
-					alt=""
-					class="h-8 w-8 rounded-full border border-gray-30"
-				/>
-				<p class="body-01 text-text-01">พรรค{promiseSummary.party.name}</p>
-			</button>
-		</a>
-		<div class="flex flex-col gap-2">
-			<div class="flex gap-2">
-				<Quotes class="text-text-03" />
-				<div
-					class="w-full translate-y-[50%] border-t border-ui-03 duration-200 group-hover:border-ui-01"
-				></div>
-			</div>
-			<div class="flex h-[165px] items-center justify-center">
-				<p class="textCustom heading-compact-02 block h-full overflow-hidden">
-					{promiseSummary.statements}
-				</p>
-			</div>
-			<div class="flex flex-row-reverse gap-2">
-				<Quotes class="rotate-180 text-text-03" />
-				<div
-					class="w-full translate-y-[50%] border-t border-ui-03 duration-200 group-hover:border-ui-01"
-				></div>
+<div class="{isList ? 'flex-row' : 'flex-col'} flex h-full w-full">
+	<div class="{isList ? 'w-1' : 'h-1 w-full'} {style.tag} shrink-0" />
+	<div
+		class="{isList
+			? 'grid h-[117px] grid-cols-7 gap-2 p-4 '
+			: 'flex flex-col'} group w-full shrink-0 cursor-pointer bg-ui-background duration-100 hover:bg-ui-03"
+	>
+		<div class="{isList ? 'col-span-3 flex-row gap-2' : 'flex-col px-6'} flex">
+			<a href="/promises/explore?party={promiseSummary.party.name}" class="shrink-0">
+				<button class="flex items-center gap-2 {isList ? '' : 'py-4 '}">
+					<img
+						src={promiseSummary.party.logo}
+						alt=""
+						class="h-8 w-8 rounded-full border border-gray-30"
+					/>
+					{#if !isList}
+						<p class="body-01 text-text-01">พรรค{promiseSummary.party.name}</p>
+					{/if}
+				</button>
+			</a>
+			<div class="flex flex-col gap-2">
+				{#if !isList}
+					<div class="flex gap-2">
+						<Quotes class="text-text-03" />
+						<div
+							class="w-full translate-y-[50%] border-t border-ui-03 duration-200 group-hover:border-ui-01"
+						></div>
+					</div>
+				{/if}
+				<div class="flex {isList ? '' : 'h-[165px] items-center justify-center'}">
+					<p
+						class="{isList
+							? 'line-clamp-3 max-h-[calc(2.9*1.5em)]'
+							: 'line-clamp-[7] max-h-[calc(6.85*1.5em)]'} heading-compact-02 h-auto overflow-hidden leading-6"
+					>
+						{promiseSummary.statements}
+					</p>
+				</div>
+				{#if !isList}
+					<div class="flex flex-row-reverse gap-2">
+						<Quotes class="rotate-180 text-text-03" />
+						<div
+							class="w-full translate-y-[50%] border-t border-ui-03 duration-200 group-hover:border-ui-01"
+						></div>
+					</div>
+				{/if}
 			</div>
 		</div>
 
-		<div class="flex flex-col gap-[5px] pb-4 pt-3">
+		<div
+			class="{isList ? 'grid grid-cols-2' : 'flex flex-col px-6 pb-4 pt-3'} col-span-2 gap-[5px]"
+		>
 			{#each [{ label: 'คีย์เวิร์ด', items: promiseSummary.keywords }, { label: 'หมวด', items: promiseSummary.categories }] as { label, items } (label)}
-				<div class="flex flex-wrap items-center gap-[2px]">
-					<p class="body-01 text-text-02">{label}</p>
+				<div class="{isList ? 'h-fit' : 'items-center'} flex flex-wrap gap-[2px]">
+					{#if !isList}
+						<p class="body-01 text-text-02">{label}</p>
+					{/if}
 					{#each items as item, itemIndex (itemIndex)}
 						{#if item}
 							<a
 								href="/promises/explore?{label === 'คีย์เวิร์ด'
 									? `keyword=${item}`
 									: `category=${item}`}"
+								class="leading-none"
 							>
 								<button
 									class="label-01 rounded-full py-[1px] text-text-01 {label === 'คีย์เวิร์ด'
@@ -93,29 +113,22 @@
 				</div>
 			{/each}
 		</div>
-	</div>
 
-	<div class="{getStyles(promiseSummary.status).footer} grid grid-cols-2 gap-2 px-6 py-4">
-		<div class="flex flex-col gap-1">
-			<p class="heading-01">สถานะ</p>
-			<div class="{getStyles(promiseSummary.status).tag} label-01 w-fit rounded-full px-2 py-[3px]">
-				{promiseSummary.status}
+		<div class="col-span-2 {isList ? '' : `${style.footer} px-6 py-4`} grid grid-cols-2 gap-2">
+			<div class="flex flex-col gap-1">
+				{#if !isList}
+					<p class="heading-01">สถานะ</p>
+				{/if}
+				<div class="{style.tag} label-01 w-fit rounded-full px-2 py-[3px]">
+					{promiseSummary.status}
+				</div>
+			</div>
+			<div class="flex flex-col gap-1">
+				{#if !isList}
+					<p class="heading-01">เคลื่อนไหวล่าสุด</p>
+				{/if}
+				<div class="body-01">{formatDate(promiseSummary.latestProgressDate.date)}</div>
 			</div>
-		</div>
-		<div class="flex flex-col gap-1">
-			<p class="heading-01">เคลื่อนไหวล่าสุด</p>
-			<div class="body-01">{formatDate(promiseSummary.latestProgressDate.date)}</div>
 		</div>
 	</div>
 </div>
-
-<style>
-	.textCustom {
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 7;
-		line-height: 1.5;
-		height: auto;
-		max-height: calc(7 * 1.5em);
-	}
-</style>
diff --git a/src/components/PromiseList/PromiseList.svelte b/src/components/PromiseList/PromiseList.svelte
@@ -36,12 +36,22 @@
 				return data;
 		}
 	})();
+
+	let isList = false;
+
+	const handleChangeView = (label: string) => {
+		if (label === 'List') {
+			isList = true;
+		} else if (label === 'Grid') {
+			isList = false;
+		}
+	};
 </script>
 
 <div class="mx-auto max-w-[1280px] px-4 py-6 md:px-16">
 	<div class="flex flex-col justify-between gap-1 pb-4 md:flex-row md:items-center">
 		<p class="fluid-heading-03 font-bold">ผลลัพธ์ {sortedData.length} คำสัญญา</p>
-		<div class="flex items-center gap-[15px]">
+		<div class="flex items-center gap-[16px]">
 			<div class="flex items-center gap-1">
 				<p class="body-compact-01 text-text-02">เรียงตาม</p>
 				<Select
@@ -57,16 +67,29 @@
 			</div>
 			<div class="hidden items-center gap-2 md:flex">
 				{#each [{ icon: List, label: 'List' }, { icon: Grid, label: 'Grid' }] as { icon, label } (label)}
-					<button class="h-8 w-8 rounded-[2px] p-1 duration-200 hover:bg-[#CACACA]">
+					<button
+						class="h-8 w-8 rounded-[2px] p-1 duration-200 hover:bg-[#CACACA]
+						{(isList && label === 'List') || (!isList && label === 'Grid') ? 'bg-[#CACACA]' : 'bg-none'}"
+						on:click={() => handleChangeView(label)}
+					>
 						<svelte:component this={icon} class="h-6 w-6" />
 					</button>
 				{/each}
 			</div>
 		</div>
 	</div>
-	<div class="mx-auto grid w-fit gap-6 md:grid-cols-3">
+	{#if isList}
+		<div class="body-01 grid grid-cols-7 gap-2 px-5 pb-2 text-text-02">
+			<p class="col-span-3">พรรค</p>
+			<p class="">คีย์เวิร์ด</p>
+			<p>หมวด</p>
+			<p>สถานะ</p>
+			<p>เคลื่อนไหวล่าสุด</p>
+		</div>
+	{/if}
+	<div class="{isList ? 'flex flex-col gap-[2px]' : 'grid gap-6 md:grid-cols-3'} mx-auto w-fit">
 		{#each sortedData as promiseSummary, index (index)}
-			<PromiseCard {promiseSummary} />
+			<PromiseCard {promiseSummary} {isList} />
 		{/each}
 	</div>
 </div>