Merge pull request #262 from iceljc/features/refine-chat-window

add global event

Author: iceljc

src/lib/helpers/enums.js

@@ -127,4 +127,10 @@ const userAction = {
     Edit: "edit",
     Chat: "chat"
 };
-export const UserAction = Object.freeze(userAction);
+export const UserAction = Object.freeze(userAction);
+
+const globalEvent = {
+    Search: "search",
+    Chat: "chat"
+};
+export const GlobalEvent = Object.freeze(globalEvent);

src/lib/helpers/store.js

@@ -8,6 +8,10 @@ const conversationUserStatesKey = "conversation_user_states";
 const conversationSearchOptionKey = "conversation_search_option";
 const conversationUserMessageKey = "conversation_user_messages";
 
+/** @type {Writable<import('$commonTypes').GlobalEvent>} */
+export const globalEventStore = writable({ name: "", payload: {} });
+
+
 /** @type {Writable<import('$userTypes').UserModel>} */
 export const userStore = writable({ id: "", full_name: "", expires: 0, token: null });
 

src/lib/helpers/types/agentTypes.js

@@ -28,6 +28,7 @@
  * @typedef {Object} AgentFilter
  * @property {import('$commonTypes').Pagination} pager - Pagination
  * @property {string} [type]
+ * @property {string} [agentName]
  * @property {boolean} [isPublic]
  * @property {boolean} [disabled]
  * @property {string[]} [agentIds]

src/lib/helpers/types/commonTypes.js

@@ -31,4 +31,10 @@
  */
 
 
+/**
+ * @typedef {Object} GlobalEvent
+ * @property {string} name
+ * @property {any} payload
+ */
+
 export default {};

src/lib/scss/custom/pages/_users.scss

@@ -32,7 +32,7 @@
         }
 
         .basic-info {
-            margin: 15px 0px 8px 0px;
+            margin: 15px 0px 0px 0px;
             display: flex;
             flex-wrap: wrap;
 
@@ -46,6 +46,32 @@
             }
         }
 
+        .user-permission-container {
+            display: flex;
+            gap: 5px;
+
+            .permission-wrapper {
+                display: flex;
+                flex-direction: column;
+                gap: 3px;
+
+                .edit-wrapper {
+                    display: flex;
+                    gap: 3px;
+                }
+                
+                input[type="text"] {
+                    height: 30px;
+                    font-size: 12px;
+                }
+            }
+
+            
+            .list-add {
+                font-size: 18px;
+            }
+        }
+
         .user-agent-container {
             margin: 20px 0px;
             padding: 0px 2rem;

src/routes/VerticalLayout/Header.svelte

@@ -1,19 +1,24 @@
 <script>
 	import { browser } from '$app/environment';
-	import { Input, Dropdown, DropdownToggle, DropdownMenu, Row, Col } from '@sveltestrap/sveltestrap';
-	import Link from 'svelte-link';
+	import { _ } from 'svelte-i18n';
+	import { Input } from '@sveltestrap/sveltestrap';
 	import LanguageDropdown from '$lib/common/LanguageDropdown.svelte';
 	import FullScreenDropdown from '$lib/common/FullScreenDropdown.svelte';
 	import NotificationDropdown from '$lib/common/NotificationDropdown.svelte';
 	import ProfileDropdown from '$lib/common/ProfileDropdown.svelte';
 	import { OverlayScrollbars } from 'overlayscrollbars';
 	import { PUBLIC_LOGO_URL } from '$env/static/public';
-	import { _ } from 'svelte-i18n'
-	/**
- 	* @type {any}
- 	*/
+	import { globalEventStore } from '$lib/helpers/store';
+	import { GlobalEvent } from '$lib/helpers/enums';
+
+	/** @type {any} */
 	export let user;
-	export let toggleRightBar;
+
+	/** @type {() => void} */
+	export let toggleRightBar = () => {};
+
+	/** @type {string} */
+	let searchText = '';
 
 	const toggleSideBar = () => {
 		if (browser) {
@@ -42,6 +47,13 @@
 			}
 		}
 	};
+
+	/** @param {any} e */
+	const search = (e) => {
+		if (e.key !== 'Enter') return;
+
+		globalEventStore.set({ name: GlobalEvent.Search, payload: searchText });
+	}
 </script>
 
 <header id="page-topbar">
@@ -72,15 +84,22 @@
 				type="button"
 				class="btn btn-sm px-3 font-size-16 header-item waves-effect"
 				id="vertical-menu-btn"
-				on:click={toggleSideBar}
+				on:click={() => toggleSideBar()}
 			>
 				<i class="fa fa-fw fa-bars" />
 			</button>
 
 			<!-- App Search-->
 			<form class="app-search d-none d-lg-block">
 				<div class="position-relative">
-					<Input type="text" class="form-control" placeholder="{$_('Search')}..." />
+					<Input
+						type="text"
+						class="form-control"
+						placeholder="{$_('Search')}..."
+						maxlength={100}
+						bind:value={searchText}
+						on:keydown={e => search(e)}
+					/>
 					<span class="bx bx-search-alt" />
 				</div>
 			</form>

src/routes/VerticalLayout/Index.svelte

@@ -39,7 +39,7 @@
 </script>
 
 <div id="layout-wrapper">
-	<Header user={user} {toggleRightBar} />
+	<Header user={user} toggleRightBar={() => toggleRightBar()} />
 	{#if menu}
 	<Sidebar menu={menu}/>
 	{/if}
@@ -52,5 +52,5 @@
 		<Footer />
 	</div>
 
-	<RightSidebar {closebar} />
+	<RightSidebar closebar={() => closebar()} />
 </div>

src/routes/page/agent/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { Button, Col, Row } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
@@ -11,8 +11,9 @@
 	import { _ } from 'svelte-i18n'
 	import { goto } from '$app/navigation';
 	import Swal from 'sweetalert2';
-	import { UserPermission } from '$lib/helpers/enums';
+	import { GlobalEvent, UserPermission } from '$lib/helpers/enums';
 	import { ADMIN_ROLES } from '$lib/helpers/constants';
+	import { globalEventStore } from '$lib/helpers/store';
 	
 	
   	const firstPage = 1;
@@ -38,9 +39,26 @@
 	/** @type {import('$userTypes').UserModel} */
 	let user;
 
+	/** @type {any} */
+	let unsubscriber;
+
 	onMount(async () => {
 		user = await myInfo();
 		getPagedAgents();
+
+		unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
+			if (event.name !== GlobalEvent.Search) return;
+
+			filter = {
+				pager: { page: firstPage, size: pageSize, count: 0 },
+				agentName: event.payload || null
+			};
+			getPagedAgents();
+		});
+	});
+
+	onDestroy(() => {
+		unsubscriber?.();
 	});
 
   	function getPagedAgents() {

src/routes/page/users/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { onMount } from 'svelte';
+    import { onDestroy, onMount } from 'svelte';
     import {
 		Button,
 		Card,
@@ -19,6 +19,8 @@
 	import { getUsers, updateUser } from '$lib/services/user-service';
 	import UserItem from './user-item.svelte';
 	import { getAgents } from '$lib/services/agent-service';
+	import { globalEventStore } from '$lib/helpers/store';
+	import { GlobalEvent } from '$lib/helpers/enums';
 	
     const duration = 3000;
 	const firstPage = 1;
@@ -45,6 +47,9 @@
     /** @type {import('$commonTypes').IdName[]} */
 	let agents = [];
 
+	/** @type {any} */
+	let unsubscriber;
+
     let searchOption = {
 		userName: '',
 		externalId: '',
@@ -53,13 +58,33 @@
 	};
 
     onMount(async () => {
-        isLoading = true;
+		init();
+
+		unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
+			if (event.name !== GlobalEvent.Search) return;
+
+			const userNames = event.payload ? [event.payload] : undefined;
+			filter = {
+				page: firstPage,
+				size: pageSize,
+				user_names: userNames
+			};
+			getPagedUsers();
+		});
+    });
+
+	onDestroy(() => {
+		unsubscriber?.();
+	});
+
+	function init() {
+		isLoading = true;
         getPagedAgents().then(() => {
             getPagedUsers().then(() => {
                 isLoading = false;
             });
         });
-    });
+	}
 
     function getPagedUsers() {
         userItems = [];

src/routes/page/users/user-item.svelte

@@ -192,11 +192,28 @@
         const updated = {
             ...innerItem,
             role: lodash.trim(innerItem.role),
+            permissions: innerItem.permissions.filter(x => x?.length > 0),
             agent_actions: list
         };
         innerItem = { ...updated };
         return updated;
     }
+
+    function addPermission() {
+        innerItem = {
+            ...innerItem,
+            permissions: [ ...innerItem.permissions, '' ]
+        };
+    }
+
+    /** @param {number} index */
+    function deletePermission(index) {
+        const permissions = innerItem.permissions.filter((_, idx) => idx !== index);
+        innerItem = {
+            ...innerItem,
+            permissions: permissions
+        };
+    }
 </script>
 
 <tr in:fly={{ y: -5, duration: 800 }}>
@@ -283,15 +300,46 @@
                         </div>
                     </li>
                     {/if}
-                    {#if item.permissions}
+                </ul>
+                <ul>
                     <li>
-                        <div class="wrappable">
-                            <span class="fw-bold text-primary">{'Permissions:'}</span>
-                            <span>{item.permissions?.length > 0 ? item.permissions.join(', ') : 'N/A'}</span>
+                        <div class="user-permission-container">
+                            <div class="fw-bold text-primary">{'Permissions:'}</div>
+                            <div class="permission-wrapper">
+                                {#each innerItem.permissions as permission, index}
+                                    <div class="edit-wrapper">
+                                        <Input
+                                            type="text"
+                                            class="edit-text-box"
+                                            bind:value={permission}
+                                        />
+                                        <div class="line-align-center">
+                                            <i
+                                                class="bx bxs-no-entry text-danger"
+                                                role="link"
+                                                tabindex="0"
+                                                on:keydown={() => {}}
+                                                on:click={() => deletePermission(index)}
+                                            />
+                                        </div>
+                                    </div>
+                                {/each}
+                                {#if innerItem.permissions?.length < 5}
+                                    <div class="list-add line-align-center">
+                                        <i
+                                            class="bx bx bx-list-plus text-primary clickable"
+                                            role="link"
+                                            tabindex="0"
+                                            on:keydown={() => {}}
+                                            on:click={() => addPermission()}
+                                        />
+                                    </div>
+                                {/if}
+                            </div>
                         </div>
                     </li>
-                    {/if}
                 </ul>
+
                 {#if innerActions.length > 0}
                     <div class="user-agent-container">
                         <div class="action-row action-title">