From c4546055d271399cff3f0f2c36db48e535fdc113 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 5 Oct 2023 12:32:43 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=88=E0=B8=B1=E0=B8=94=20colume=20layout?=
 =?UTF-8?q?=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B9=80?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=A7=E0=B8=88=E0=B8=AA=E0=B8=AD=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cms/src/routes/qualifying/+page.server.ts   |   2 +-
 cms/src/routes/qualifying/[id]/+page.svelte | 109 +++++++++++++-------
 2 files changed, 73 insertions(+), 38 deletions(-)

diff --git a/cms/src/routes/qualifying/+page.server.ts b/cms/src/routes/qualifying/+page.server.ts
index 573a8b4..77bfaab 100644
--- a/cms/src/routes/qualifying/+page.server.ts
+++ b/cms/src/routes/qualifying/+page.server.ts
@@ -23,7 +23,7 @@ export const load: PageServerLoad = async ({ fetch }) => {
 		}
 		if (ex.payment_startDate) {
 			const start = ex.payment_startDate;
-			const end = ex.payment_endDate;
+			const end = dayjs(ex.payment_endDate).add(1, 'day').format('YYYY-MM-DD');
 			events.push({ id, title: 'ชำระเงิน:' + title, start, end, url, backgroundColor: '#D2B4DE' });
 		}
 		if (ex.examDate) {
diff --git a/cms/src/routes/qualifying/[id]/+page.svelte b/cms/src/routes/qualifying/[id]/+page.svelte
index 2c0d131..6607c34 100644
--- a/cms/src/routes/qualifying/[id]/+page.svelte
+++ b/cms/src/routes/qualifying/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	export let data: PageData;
+	let date = new Date().getFullYear();
 	import { env } from '$env/dynamic/public';
 	const positions_base_url = env.PUBLIC_URL_REGISTER_QUALIFY_EXAM + '/exam/';
 	import dayjs from 'dayjs';
@@ -9,6 +10,14 @@
 		if (!end) return dayjs(start).format('DD MMM BBBB');
 		return dayjs(start).format('DD MMM BBBB') + ' - ' + dayjs(end).format('DD MMM BBBB');
 	}
+	function isEndDatePassed(endDate: string | undefined) {
+		if (endDate) {
+			const today = new Date();
+			const endDateDate = new Date(endDate);
+			return endDateDate.getTime() < today.getTime();
+		}
+		return false;
+	}
 </script>
 
 <section>
@@ -85,47 +94,73 @@
 				<div class="w-12/12 text-lg font-medium pt-6">สมัครสอบ</div>
 
 				<hr class="border-blueGray-200 my-2" />
-				<div class="grid grid-flow-col justify-stretch ...">
-					{#if data.positionsTrue}
-						{#each data.positionsTrue as p}
-							<div class="text-lg py-1">
-								<div class="w-12/12 text-lg font-medium pt-6">ปริญญาบัตรขึ้นไป</div>
-								<div class="flex flex-wrap items-center">
-									<a
-										class="btn btn-sm btn-outline btn-info cursor-pointe"
-										href={positions_base_url + p.path}
-										target="_blank"
-									>
-										<i class="fa-solid fa-pen-to-square text-sm pr-2" />
-										สมัครสอบ
-									</a>
-									<div class="pl-4">
-										<span>{p.title}</span>
+				<div class="grid grid-cols-2 justify-stretch ... gap-4">
+					<div>
+						{#if data.positionsTrue}
+							<div class="w-12/12 text-lg font-medium pt-6">ปริญญาบัตรขึ้นไป</div>
+							{#each data.positionsTrue as p}
+								<div class="text-lg py-1">
+									<div class="flex flex-wrap items-center">
+										{#if 'register_endDate' in data && isEndDatePassed(data.register_endDate)}
+											<a
+												class="btn btn-sm btn-outline btn-info cursor-pointe"
+												href={positions_base_url + p.path}
+												target="_blank"
+											>
+												<i class="fa-solid fa-pen-to-square text-sm pr-2" />
+												ตรวจสอบ
+											</a>
+										{:else}
+											<a
+												class="btn btn-sm btn-outline btn-info cursor-pointe"
+												href={positions_base_url + p.path}
+												target="_blank"
+											>
+												<i class="fa-solid fa-pen-to-square text-sm pr-2" />
+												สมัครสอบ
+											</a>
+										{/if}
+										<div class="pl-2">
+											<span>{p.title}</span>
+										</div>
 									</div>
 								</div>
-							</div>
-						{/each}
-					{/if}
-					{#if data.positionsFalse}
-						{#each data.positionsFalse as a}
-							<div class="text-lg py-1">
-								<div class="w-12/12 text-lg font-medium pt-6">ต่ำกว่าปริญญาบัตร</div>
-								<div class="flex flex-wrap items-center">
-									<a
-										class="btn btn-sm btn-outline btn-info cursor-pointe"
-										href={positions_base_url + a.path}
-										target="_blank"
-									>
-										<i class="fa-solid fa-pen-to-square text-sm pr-2" />
-										สมัครสอบ
-									</a>
-									<div class="pl-4">
-										<span>{a.title}</span>
+							{/each}
+						{/if}
+					</div>
+					<div>
+						{#if data.positionsFalse}
+							<div class="w-12/12 text-lg font-medium pt-6">ต่ำกว่าปริญญาบัตร</div>
+							{#each data.positionsFalse as a}
+								<div class="text-lg py-1">
+									<div class="flex flex-wrap items-center">
+										{#if 'register_endDate' in data && isEndDatePassed(data.register_endDate)}
+											<a
+												class="btn btn-sm btn-outline btn-info cursor-pointe"
+												href={positions_base_url + a.path}
+												target="_blank"
+											>
+												<i class="fa-solid fa-pen-to-square text-sm pr-2" />
+												ตรวจสอบ
+											</a>
+										{:else}
+											<a
+												class="btn btn-sm btn-outline btn-info cursor-pointe"
+												href={positions_base_url + a.path}
+												target="_blank"
+											>
+												<i class="fa-solid fa-pen-to-square text-sm pr-2" />
+												สมัครสอบ
+											</a>
+										{/if}
+										<div class="pl-2">
+											<span>{a.title}</span>
+										</div>
 									</div>
 								</div>
-							</div>
-						{/each}
-					{/if}
+							{/each}
+						{/if}
+					</div>
 				</div>
 
 				<div class="pb-7" />