Merge pull request #135 from iceljc/features/add-user-avatar

Features/add user avatar

Author: Oceania2018

src/lib/common/MessageImageGallery.svelte

@@ -1,8 +1,8 @@
 <script>
     import { onMount } from 'svelte';
 	import FileGallery from '$lib/common/FileGallery.svelte';
-	import { getUserStore } from '$lib/helpers/store';
 	import { PUBLIC_SERVICE_URL } from '$env/static/public';
+	import { userStore } from '$lib/helpers/store';
 
     /** @type {string} */
     export let galleryClasses = '';
@@ -19,15 +19,13 @@
     let token = "";
 
     onMount(() => {
-        const user = getUserStore();
-        token = user.token;
         if (fetchFiles != null && fetchFiles != undefined) {
             fetchFiles().then(data => {
                 // @ts-ignore
                 files = data?.filter(item => !!item.file_url)?.map(item => {
                     return {
                         ...item,
-                        file_data: `${PUBLIC_SERVICE_URL}${item.file_url}?access_token=${token}`
+                        file_data: `${PUBLIC_SERVICE_URL}${item.file_url}?access_token=${$userStore?.token}`
                     };
                 }) || [];
             });

src/lib/common/ProfileDropdown.svelte

@@ -3,18 +3,25 @@
 	import { resetLocalStorage } from '$lib/helpers/store';
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
+	import { userStore } from '$lib/helpers/store';
+	import { PUBLIC_SERVICE_URL } from '$env/static/public';
 	import { _ } from 'svelte-i18n';
+	import { buildUrl } from '$lib/helpers/utils/common';
 	
-	/**
-	 * @type {{ full_name: any; }}
-	 */
-	 export let user;
+	/** @type {any} */
+	export let user;
+
 	function logout() {
 		if (browser){	
 			resetLocalStorage(true);
 		}
 		goto('login');
 	};
+
+	/** @param {any} e */
+	function handleAvatarLoad(e) {
+		e.target.src = 'images/users/user-dummy.jpg';
+	}
 </script>
 
 <Dropdown class="d-inline-block">
@@ -24,7 +31,12 @@
 		class="btn header-item waves-effect"
 		id="page-header-user-dropdown"
 	>
-		<img class="rounded-circle header-profile-user" src='images/users/user-dummy.jpg' alt="Header Avatar" />
+		<img
+			class="rounded-circle header-profile-user"
+			src={`${buildUrl(PUBLIC_SERVICE_URL, user?.avatar)}?access_token=${$userStore?.token}`}
+			alt=""
+			on:error={e => handleAvatarLoad(e)}
+		/>
 		<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>

src/lib/helpers/types.js

@@ -412,6 +412,13 @@ IRichContent.prototype.quick_replies;
  * @property {string?} [payload] - The payload message.
  */
 
+/**
+ * @typedef {Object} FileModel
+ * @property {string} file_name - The plugin full name.
+ * @property {string} file_data - The plugin name.
+ * @property {string} file_url - Row count.
+ */
+
 /**
  * Invoked when a new conersation is created.
  * This callback type is called `requestCallback` and is displayed as a global symbol.

src/lib/helpers/utils/common.js

@@ -1,3 +1,11 @@
 export function range(size = 3, startAt = 0) {
     return [...Array(size).keys()].map((i) => i + startAt);
-};
+};
+
+/**
+ * @param {string} baseUrl
+ * @param {string} relativePath
+ */
+export function buildUrl(baseUrl, relativePath) {
+    return new URL(relativePath, baseUrl);
+}

src/lib/services/api-endpoints.js

@@ -6,6 +6,7 @@ export const endpoints = {
     tokenUrl: `${host}/token`,
     myInfoUrl: `${host}/user/me`,
     usrCreationUrl: `${host}/user`,
+    userAvatarUrl: `${host}/user/avatar`,
 
     // setting
     settingListUrl: `${host}/settings`,

src/lib/services/auth-service.js

@@ -66,7 +66,7 @@ export async function myInfo() {
  * @param {string} lastName
  * @param {string} email
  * @param {string} password
- * @param {function} onSucceed()
+ * @param {function} onSucceed
  */
 export async function register(firstName, lastName, email, password, onSucceed) {
     let data = JSON.stringify({
@@ -91,4 +91,12 @@ export async function register(firstName, lastName, email, password, onSucceed)
         }
     })
     .catch(error => alert(error.message));
+}
+
+/**
+ * @param {import('$types').FileModel} file
+ */
+export async function uploadUserAvatar(file) {
+    const response = await axios.post(endpoints.userAvatarUrl, { ...file });
+    return response?.data;
 }

src/routes/chat/[agentId]/[conversationId]/chat-image/chat-image-gallery.svelte

@@ -39,5 +39,6 @@
         files={files}
         disabled={disabled}
         needDelete
-        onDelete={deleteFile} />
+        onDelete={deleteFile}
+    />
 </div>

src/routes/page/conversation/[conversationId]/+page.svelte

@@ -15,7 +15,7 @@
     const params = $page.params;
 
     /** @type {import('$types').ConversationModel} */
-    export let conversation;
+    let conversation;
 
     onMount(async () => {
         conversation = await getConversation(params.conversationId);

src/routes/page/user/me/+page.svelte

@@ -1,15 +1,20 @@
 <script>
-	import { PUBLIC_BRAND_NAME, PUBLIC_LOGIN_IMAGE } from '$env/static/public';
+	import { onMount } from 'svelte';
+	import { PUBLIC_BRAND_NAME } from '$env/static/public';
 	import { Row, Col, Card, CardBody, CardTitle, Table } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import { onMount } from 'svelte';
-	import { myInfo } from '$lib/services/auth-service';
+	import FileDropZone from '$lib/common/FileDropZone.svelte';
+	import { myInfo, uploadUserAvatar } from '$lib/services/auth-service';
 	import { _ } from 'svelte-i18n';
-
+	import { userStore } from '$lib/helpers/store';
+	import { PUBLIC_SERVICE_URL } from '$env/static/public';
+	import { buildUrl } from '$lib/helpers/utils/common';
+	
 	/** @type {import('$types').UserModel} */
 	let currentUser;
 	let isLoading = false;
+
 	onMount(async () => {
 		isLoading = true;
 		await myInfo()
@@ -20,6 +25,21 @@
 				isLoading = false;
 			});
 	});
+
+	/** @param {any} e */
+    async function handleFileDrop(e) {
+        const { acceptedFiles } = e.detail;
+		const file = acceptedFiles[0];
+		if (!!!file) return;
+
+		await uploadUserAvatar(file);
+		window.location.reload();
+    }
+
+	/** @param {any} e */
+	function handleAvatarLoad(e) {
+		e.target.src = 'images/users/user-dummy.jpg';
+	}
 </script>
 
 <HeadTitle title="{$_('My Profile')}" />
@@ -41,11 +61,23 @@
 				<Row>
 					<Col sm={4}>
 						<div class="avatar-md profile-user-wid mb-4">
-							<img
-								src="images/users/user-dummy.jpg"
-								alt="avatar"
-								class="img-thumbnail rounded-circle"
-							/>
+							<FileDropZone
+								accept="image/*"
+								disableDefaultStyles
+								containerStyles={'width: 100%; height: 100%;'}
+								noDrag
+								multiple={false}
+								fileLimit={1}
+								on:drop={e => handleFileDrop(e)}
+							>
+								<img
+									src={`${buildUrl(PUBLIC_SERVICE_URL, currentUser?.avatar || '').href}?access_token=${$userStore?.token}`}
+									alt=""
+									class="img-thumbnail rounded-circle"
+									style="width: 100%; height: 100%;"
+									on:error={e => handleAvatarLoad(e)}
+								/>
+							</FileDropZone>
 						</div>
 						<h5 class="font-size-15 text-truncate">{currentUser?.full_name}</h5>
 						<p class="text-muted mb-0 text-truncate">{currentUser?.role ?? 'Role: N/A'}</p>