diff --git a/src/lib/assets/images/jason-leung-Xaanw0s0pMk-unsplash.jpg b/src/lib/assets/images/jason-leung-Xaanw0s0pMk-unsplash.jpg deleted file mode 100644 index 75756be..0000000 Binary files a/src/lib/assets/images/jason-leung-Xaanw0s0pMk-unsplash.jpg and /dev/null differ diff --git a/src/lib/components/Footer/Footer.svelte b/src/lib/components/Footer/Footer.svelte index c6bcdf8..51d727a 100644 --- a/src/lib/components/Footer/Footer.svelte +++ b/src/lib/components/Footer/Footer.svelte @@ -7,7 +7,7 @@ import { cn } from '$lib/utils/cn'; -
+
diff --git a/src/lib/components/List/List.svelte b/src/lib/components/List/List.svelte index 835fd1d..1328485 100644 --- a/src/lib/components/List/List.svelte +++ b/src/lib/components/List/List.svelte @@ -21,7 +21,6 @@ {#if isModalOpen} +
+ import { cn } from '../../utils/cn'; + import Fa from 'svelte-fa'; + import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'; + import Dropdown from '../Dropdown/Dropdown.svelte'; + + export let Arrayitem: string[] = []; + export let pageChoice: string[] = ['5', '10', '15']; + export let itemsPerPage: string = '5'; + + let currentPage: number | string = 1; + let totalPages: number = Math.ceil(Arrayitem.length / parseInt(itemsPerPage)); + let paginatedItems: string[] = []; + + function changePage(page: number | string) { + currentPage = page; + paginateItems(); + } + + function paginateItems() { + const startIndex = (Number(currentPage) - 1) * parseInt(itemsPerPage); + const endIndex = startIndex + parseInt(itemsPerPage); + paginatedItems = Arrayitem.slice(startIndex, endIndex); + } + + function getVisiblePages(totalPages: number, currentPage: number) { + let pages = []; + if (totalPages <= 7) { + pages = Array.from({ length: totalPages }, (_, i) => i + 1); + } else { + pages.push(1); + if (currentPage > 4) { + pages.push('...'); + } + let startPage = Math.max(2, currentPage - 2); + let endPage = Math.min(totalPages - 1, currentPage + 2); + for (let i = startPage; i <= endPage; i++) { + pages.push(i); + } + if (currentPage < totalPages - 3) { + pages.push('...'); + } + pages.push(totalPages); + } + return pages; + } + + $: { + totalPages = Math.ceil(Arrayitem.length / parseInt(itemsPerPage)); + paginateItems(); + } + + $: if (!itemsPerPage || parseInt(itemsPerPage) < 1) { + itemsPerPage = '5'; + } + + $: paginateItems(); + + +
+
+
+ + +
+ {#each getVisiblePages(totalPages, Number(currentPage)) as page} + {#if page === '...'} + ... + {:else} + + {/if} + {/each} +
+ + +
+
+
+ (itemsPerPage = e.detail)} + /> +
+
/ page
+
+
+
+ +
+ {#each paginatedItems as item} +
+ {item} +
+ {/each} +
diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte index e0d75c3..3cccf6b 100644 --- a/src/lib/components/Playground.svelte +++ b/src/lib/components/Playground.svelte @@ -13,11 +13,11 @@ import TabsList from './Tabs/TabsList.svelte'; import TabsTrigger from './Tabs/TabsTrigger.svelte'; import TabsContent from './Tabs/TabsContent.svelte'; - import Navbar from './Navbar.svelte'; - import Footer from './Footer/Footer.svelte'; import AnnoucementCard from './AnnoucementCard/AnnoucementCard.svelte'; import thumbnail from '../assets/images/thumbnail.png'; import OrganizationCard from './OrganizationCard/OrganizationCard.svelte'; + import Pagination from './Pagination/Pagination.svelte'; + import Footer from './Footer/Footer.svelte'; modalShow.set(false); @@ -80,6 +80,38 @@ 'ปี 2564', 'ปีย้าวยาวววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววว' ]; + let PaginationMockitem: string[] = [ + '1', + '2', + '3', + '4', + '5', + '6', + '7', + '8', + '9', + '10', + '11', + '12', + '13', + '14', + '15', + '16', + '17', + '18', + '19', + '20', + '21', + '22', + '23', + '24', + '25', + '26', + '27', + '28', + '29', + '30' + ]; const annoucementCard = Array(3).fill({ imageURL: thumbnail, @@ -101,7 +133,6 @@
-

Typography Variants

{#each typographyVariants as variant} @@ -308,6 +339,10 @@
+
+

Pagination

+ +
diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts new file mode 100644 index 0000000..52cbc7e --- /dev/null +++ b/src/lib/utils/date.ts @@ -0,0 +1,10 @@ +import dayjs from 'dayjs'; +import buddhistEra from 'dayjs/plugin/buddhistEra'; +import 'dayjs/locale/th'; +import 'dayjs/locale/th'; + +dayjs.extend(buddhistEra); + +export function formatDateTH(dateString: string): string { + return dayjs(dateString).locale('th').format('DD MMMM BBBB'); +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 04af337..1699c49 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,11 @@ - +
+ + +
+
diff --git a/src/routes/announcement/+page.svelte b/src/routes/announcement/+page.svelte index 71507fd..7c5af23 100644 --- a/src/routes/announcement/+page.svelte +++ b/src/routes/announcement/+page.svelte @@ -136,7 +136,6 @@
-
diff --git a/src/routes/document/+page.svelte b/src/routes/document/+page.svelte index e098535..84f0fc4 100644 --- a/src/routes/document/+page.svelte +++ b/src/routes/document/+page.svelte @@ -113,10 +113,10 @@
+
-

เอกสาร

diff --git a/src/routes/document/[id]/+page.svelte b/src/routes/document/[id]/+page.svelte new file mode 100644 index 0000000..7f0106c --- /dev/null +++ b/src/routes/document/[id]/+page.svelte @@ -0,0 +1,53 @@ + + + +

+ +
+

+ {document?.title} +

+
+
+

+ โดย {document?.author.first_name} +

+

{formatDateTH(document?.updated_at || '')}

+
+
+ +
+ +
+

{document?.content.repeat(8)}

+
+ + {#if modalShow} + + {/if} +
+ diff --git a/src/routes/document/[id]/+page.ts b/src/routes/document/[id]/+page.ts new file mode 100644 index 0000000..a475129 --- /dev/null +++ b/src/routes/document/[id]/+page.ts @@ -0,0 +1,8 @@ +import { documents } from '$lib/mock/document'; +import type { PageLoad } from './$types'; +import 'dayjs/locale/th'; + +export const load: PageLoad = async ({ params }) => { + const document = documents.find((doc) => doc.id === params.id); + return { params, document }; +};