Feat/manage docs

src/lib/api/getAll.ts

@@ -0,0 +1,24 @@
+export async function getAllUsers(token: string) {
+	try {
+		const response = await fetch(
+			'https://sucu-backend-2024-689509857491.asia-southeast1.run.app/api/v1/users',
+			{
+				method: 'GET',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${token}`
+				}
+			}
+		);
+
+		if (!response.ok) {
+			const errorData = await response.json();
+			throw new Error(`Error: ${errorData.message}`);
+		}
+
+		const data = await response.json();
+		return data;
+	} catch (error) {
+		console.error('Failed to fetch users:', error);
+	}
+}

src/lib/components/Pagination/Pagination.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
 	import { cn } from '../../utils/cn';
 	import Fa from 'svelte-fa';
 	import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
@@ -12,9 +13,12 @@
 	let totalPages: number = Math.ceil(Arrayitem.length / parseInt(itemsPerPage));
 	let paginatedItems: string[] = [];
 
+	const dispatch = createEventDispatcher();
+
 	function changePage(page: number | string) {
 		currentPage = page;
 		paginateItems();
+		dispatch('pageChange', { paginatedItems, itemsPerPage });
 	}
 
 	function paginateItems() {
@@ -45,9 +49,17 @@
 		return pages;
 	}
 
+	function changeItemsPerPage(newItemsPerPage: string) {
+		itemsPerPage = newItemsPerPage;
+		totalPages = Math.ceil(Arrayitem.length / parseInt(itemsPerPage));
+		paginateItems();
+		dispatch('pageChange', { paginatedItems, itemsPerPage });
+	}
+
 	$: {
 		totalPages = Math.ceil(Arrayitem.length / parseInt(itemsPerPage));
 		paginateItems();
+		dispatch('pageChange', { paginatedItems, itemsPerPage });
 	}
 
 	$: if (!itemsPerPage || parseInt(itemsPerPage) < 1) {
@@ -100,18 +112,10 @@
 					items={pageChoice}
 					bind:currentChoice={itemsPerPage}
 					outerClass="w-20 bg-opacity-50 "
-					on:change={(e) => (itemsPerPage = e.detail)}
+					on:change={(e) => changeItemsPerPage(e.detail)}
 				/>
 			</div>
 			<div class="flex items-center">/ page</div>
 		</div>
 	</div>
 </div>
-
-<div class="items-list mt-5">
-	{#each paginatedItems as item}
-		<div class="item">
-			{item}
-		</div>
-	{/each}
-</div>

src/routes/+layout.svelte

@@ -1,11 +1,68 @@
-<script>
+<script lang="ts">
 	import Footer from '$lib/components/Footer/Footer.svelte';
 	import Navbar from '$lib/components/Navbar.svelte';
+	import Sidebar from '$lib/components/Sidebar/Sidebar.svelte';
+	import { getMe } from '$lib/api/getme';
+	import { getDecryptedToken } from '$lib/api/getToken';
 	import '../styles/app.css';
+	import { onMount } from 'svelte';
+
+	let isAdminPage = false;
+	let isAuthLoginPage = false;
+	let menuItems = [
+		{ title: 'ประกาศ', href: '/admin' },
+		{ title: 'เอกสาร', href: '/admin/documents' },
+		{ title: 'สถิติ และ งบประมาณ', href: '/admin/stats' },
+		{ title: 'จัดการผู้ใช้งาน', href: '/admin/users' }
+	];
+
+	let user = {
+		name: 'Not found',
+		lastname: 'Not found',
+		role: 'Not found',
+		id: 'Not found'
+	};
+
+	onMount(async () => {
+		const pathname = window.location.pathname;
+		isAdminPage = pathname.startsWith('/admin');
+		isAuthLoginPage = pathname === '/auth/login';
+
+		if (isAdminPage) {
+			const token = getDecryptedToken();
+			if (token) {
+				try {
+					const userData = await getMe(token);
+					user = {
+						name: userData.result.first_name,
+						lastname: userData.result.last_name,
+						role: userData.result.role,
+						id: userData.result.id
+					};
+				} catch (error) {
+					console.error('Failed to fetch user data:', error);
+				}
+			} else {
+				console.log('No token found');
+				window.location.replace('/auth/login');
+			}
+		}
+	});
 </script>
 
-<div>
-	<Navbar />
-	<slot />
-	<Footer />
-</div>
+{#if isAdminPage}
+	<div class="min-h-screen bg-white z-50 w-full">
+		<Sidebar {menuItems} {user} />
+		<slot />
+	</div>
+{:else if isAuthLoginPage}
+	<div>
+		<slot />
+	</div>
+{:else}
+	<div>
+		<Navbar />
+		<slot />
+		<Footer />
+	</div>
+{/if}