Merge pull request #13 from visagang/main

Add local store session for UserProfile
SciSharp · Jan 22, 2024 · 5c4f187 · 5c4f187
2 parents b8fb8ab + a8dd6bc
commit 5c4f187
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 6 deletions.
diff --git a/src/lib/common/ProfileDropdown.svelte b/src/lib/common/ProfileDropdown.svelte
@@ -2,7 +2,10 @@
 	import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from '@sveltestrap/sveltestrap';
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
-
+	/**
+	 * @type {{ full_name: any; }}
+	 */
+	 export let user;
 	function logout() {
 		if (browser){	
 			localStorage.removeItem('authUser');
@@ -19,7 +22,7 @@
 		id="page-header-user-dropdown"
 	>
 		<img class="rounded-circle header-profile-user" src='/images/users/user-dummy.jpg' alt="Header Avatar" />
-		<span class="d-none d-xl-inline-block ms-1" key="t-henry">Henry</span>
+		<span class="d-none d-xl-inline-block ms-1" key="t-fullname">{user?.full_name}</span>
 		<i class="mdi mdi-chevron-down d-none d-xl-inline-block" />
 	</DropdownToggle>
 	<DropdownMenu end>

diff --git a/src/lib/helpers/store.js b/src/lib/helpers/store.js
@@ -2,7 +2,7 @@ import { writable } from 'svelte/store';
 import { browser } from '$app/environment';
 
 /** @type {Writable<import('$types').UserModel>} */
-export const userStore = writable({ id: "" });
+export const userStore = writable({ id: "", full_name: "" });
 
 /**
  * @returns {Writable<import('$types').UserModel>}

diff --git a/src/lib/services/auth-service.js b/src/lib/services/auth-service.js
@@ -47,6 +47,7 @@ export async function myInfo() {
     const response = await axios.get(endpoints.myInfoUrl);
     let user = getUserStore();
     user.id = response.data.id;
+    user.full_name = response.data.full_name;
     userStore.set(user);
     return response.data;
 }

diff --git a/src/routes/VerticalLayout/Header.svelte b/src/routes/VerticalLayout/Header.svelte
@@ -8,6 +8,10 @@
 	import ProfileDropdown from '$lib/common/ProfileDropdown.svelte';
 	import { OverlayScrollbars } from 'overlayscrollbars';
 	import { PUBLIC_LOGO_URL } from '$env/static/public';
+	/**
+	 * @type {any}
+	 */
+	 export let user;
 
 	const toggleSideBar = () => {
 		if (browser) {
@@ -83,7 +87,7 @@
 			<LanguageDropdown />
 			<FullScreenDropdown />
 			<NotificationDropdown />
-			<ProfileDropdown />
+			<ProfileDropdown user={user}/>
 		</div>
 	</div>
 </header>
diff --git a/src/routes/VerticalLayout/Index.svelte b/src/routes/VerticalLayout/Index.svelte
@@ -6,9 +6,14 @@
 	import Footer from './Footer.svelte';
 	import { onMount } from 'svelte';
 	import { getPluginMenu } from '$lib/services/plugin-service';
+	import { myInfo } from '$lib/services/auth-service';
 
 	/** @type {import('$types').PluginMenuDefModel[]} */
 	let menu;
+	/**
+	 * @type {import("$types").UserModel}
+	 */
+	let user;
 
 	const toggleRightBar = () => {
 		if (browser) {
@@ -26,14 +31,15 @@
 
 	onMount(async () => {
 		menu = await getPluginMenu();
+		user = await myInfo();
 		if (browser) {
 			document.body.setAttribute('data-layout', 'vertical');
 		}
 	});
 </script>
 
 <div id="layout-wrapper">
-	<Header {toggleRightBar} />
+	<Header user={user} {toggleRightBar} />
 	{#if menu}
 	<Sidebar menu={menu}/>
 	{/if}

diff --git a/src/routes/page/dashboard/+page.svelte b/src/routes/page/dashboard/+page.svelte
@@ -25,13 +25,16 @@
 		PUBLIC_BRAND_NAME
 	} from '$env/static/public';
 	import { onMount } from 'svelte';
+	import { getUserStore } from '$lib/helpers/store';
 	
 	let subscribemodal = false;
+	let user = {full_name: ""};
 	const togglesubscribemodal = (() => {
 		subscribemodal = !subscribemodal;
 	})
 
 	onMount(() => {
+		user = getUserStore();
 		setTimeout(() => {
 			subscribemodal = true;
 		}, 1000);
@@ -64,7 +67,7 @@
 						<div class="avatar-md profile-user-wid mb-4">
 							<Image src='/images/users/user-dummy.jpg' alt="" class="img-thumbnail rounded-circle" />
 						</div>
-						<h5 class="font-size-15 text-truncate">Henry Price</h5>
+						<h5 class="font-size-15 text-truncate">{user?.full_name}</h5>
 						<p class="text-muted mb-0 text-truncate">Agent Manager</p>
 					</Col>
 					<Col sm={8}>