Merge pull request #16 from iceljc/features/refine-conversation-elements

Features/refine conversation elements

Author: Oceania2018

package-lock.json

@@ -49,6 +49,7 @@
 		"chart.js": "^4.4.0",
 		"drawflow": "^0.0.59",
 		"fullcalendar": "^6.1.9",
+		"lodash": "^4.17.21",
 		"moment": "^2.30.1",
 		"overlayscrollbars": "^2.4.4",
 		"overlayscrollbars-svelte": "^0.5.2",

package.json

@@ -4,7 +4,6 @@
 		Col,
 		Row,
 	} from '@sveltestrap/sveltestrap';
-	import { afterUpdate } from 'svelte';
 
     /** @type {import('$lib/helpers/types').Pagination} */    
     export let pagination = { page: 1, size: 10, count: 0 };
@@ -23,9 +22,9 @@
     /** @type {number[]} */
     $: pages = Array.from({ length: maxPage - minPage + 1 }, (_, i) => minPage + i);
     /** @type {boolean} */
-    $: disableBackward = pagination.page === firstPage;
+    $: disableBackward = pagination.page === firstPage || pagination.count === 0;
     /** @type {boolean} */
-    $: disableForward = pagination.page === totalPages;
+    $: disableForward = pagination.page === totalPages || pagination.count === 0;
 
     /**
 	 * @param {any} e

src/lib/common/LoadingToResult.svelte renamed to src/lib/common/LoadingToComplete.svelte

@@ -13,7 +13,7 @@
     /** @type {number} */
     $: totalPages = Math.ceil(pagination.count / pagination.size);
     /** @type {number} */
-    $: start = (pagination.page - 1) * pagination.size + 1;
+    $: start = pagination.count <= 0 ? 0 : (pagination.page - 1) * pagination.size + 1;
     /** @type {number} */
     $: end = Math.min(pagination.page * pagination.size, pagination.count);
     /** @type {number} */
@@ -23,9 +23,9 @@
     /** @type {number[]} */
     $: pages = Array.from({ length: maxPage - minPage + 1 }, (_, i) => minPage + i);
     /** @type {boolean} */
-    $: disableBackward = pagination.page === firstPage;
+    $: disableBackward = pagination.page === firstPage || pagination.count === 0;
     /** @type {boolean} */
-    $: disableForward = pagination.page === totalPages;
+    $: disableForward = pagination.page === totalPages || pagination.count === 0;
 
     /**
 	 * @param {any} e

src/routes/page/plugin/plugin-pagination.svelte renamed to src/lib/common/PlainPagination.svelte

@@ -84,6 +84,7 @@
 
 /** 
  * @typedef {Object} AgentFilter
+ * @property {Pagination} pager - Pagination
  * @property {boolean} [isRouter]
  * @property {boolean} [isEvaluator]
  * @property {boolean} [allowRouting]

src/lib/common/Pager.svelte renamed to src/lib/common/TablePagination.svelte

@@ -11,16 +11,20 @@ export async function getSettings() {
     return response.data;
 }
 
+/**
+ * Get conversation list
+ * @param {import('$types').ConversationFilter} filter
+ * @returns {Promise<import('$types').PagedItems<import('$types').ConversationModel>>}
+ */
+
 /**
  * Get agent list
  * @param {import('$types').AgentFilter} filter
- * @returns {Promise<import('$types').AgentModel[]>}
+ * @returns {Promise<import('$types').PagedItems<import('$types').AgentModel>>}
  */
 export async function getAgents(filter) {
     let url = endpoints.agentListUrl;
-    const response = await axios.get(url, {
-        params: filter
-    });
+    const response = await axios.post(url, { ...filter });
     return response.data;
 }
 

src/lib/helpers/types.js

@@ -6,6 +6,7 @@
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { _ } from 'svelte-i18n'
+	import { isMenuButton } from 'svelte-jsoneditor';
 
 	/** @type {import('$types').PluginMenuDefModel[]} */
 	export let menu
@@ -131,6 +132,11 @@
 	};
 
 	const removeActiveDropdown = () => {
+		document.querySelectorAll('.vertical-menu .mm-active').forEach((menu) => {
+			menu.querySelectorAll('.active').forEach(child => child.classList.remove('active'));
+			menu.classList.remove('mm-active');
+		});
+
 		document.querySelectorAll('.vertical-menu .has-arrow').forEach((menu) => {
 			if (menu.nextElementSibling) {
 				menu.nextElementSibling.classList.add('mm-collapse');

src/lib/services/agent-service.js

@@ -22,6 +22,7 @@
 	import Swal from 'sweetalert2/dist/sweetalert2.js';
 	import "sweetalert2/src/sweetalert2.scss";
 	import { replaceNewLine } from '$lib/helpers/http';
+	import _ from "lodash";
 
 	const options = {
 		scrollbars: {
@@ -203,7 +204,7 @@
 				</div>
 			</div>
 
-			<div class="scrollbar" style="height: 75vh">
+			<div class="scrollbar" style="height: 80vh">
 				<div class="chat-conversation p-3">
 					<ul class="list-unstyled mb-0">
 						<li>
@@ -269,7 +270,7 @@
 				</div>
 			</div>
 
-			<div class="p-3 chat-input-section" style="height: 15vh">
+			<div class="p-3 chat-input-section" style="height: 10vh">
 				<div class="row">
 					<div class="col-auto">
 						<button
@@ -280,8 +281,8 @@
 						</button>
 					</div>
 					<div class="col">
-						<div class="position-relative">						
-							<textarea rows={3} maxlength={500} class="form-control chat-input" bind:value={text} on:keydown={e => onSendMessage(e)} placeholder="Enter Message..." />
+						<div class="position-relative">
+							<textarea rows={1} maxlength={500} class="form-control chat-input" bind:value={text} on:keydown={e => onSendMessage(e)} placeholder="Enter Message..." />
 							<div class="chat-input-links" id="tooltip-container">
 								<ul class="list-inline mb-0">
 									<li class="list-inline-item">
@@ -295,8 +296,9 @@
 						<button
 							type="submit"
 							class="btn btn-primary btn-rounded chat-send waves-effect waves-light"
+							disabled={!!!_.trim(text)}
 							on:click={sendTextMessage}
-							><span class="d-none d-sm-inline-block me-2">Send</span>
+						><span class="d-none d-sm-inline-block me-2">Send</span>
 							<i class="mdi mdi-send" />
 						</button>
 					</div>

src/routes/VerticalLayout/Sidebar.svelte

@@ -5,21 +5,79 @@
 	import CardAgent from './card-agent.svelte';
   import { getAgents } from '$lib/services/agent-service.js';
   import { onMount } from 'svelte';
+	import PlainPagination from '$lib/common/PlainPagination.svelte';
 
-  /** @type {import('$types').AgentModel[]} */
-  let agents = [];
+  const firstPage = 1;
+	const pageSize = 12;
+
+	/** @type {import('$types').PagedItems<import('$types').AgentModel>} */
+  let agents = { items: [], count: 0 };
+
+	/** @type {import('$types').AgentFilter} */
+	const initFilter = {
+		pager: { page: firstPage, size: pageSize, count: 0 },
+    isEvaluator: false
+	};
+
+  /** @type {import('$types').AgentFilter} */
+  let filter = { ... initFilter };
+
+	/** @type {import('$types').Pagination} */
+	let pager = filter.pager;
 
   onMount(async () => {
-    agents = await getAgents({
-      isEvaluator: false
-    });
+    await getPagedAgents();
   });
+
+  async function getPagedAgents() {
+    agents = await getAgents(filter);
+		refresh();
+	}
+
+	function refresh() {
+		refreshAgents();
+		refreshPager(agents.count, filter.pager.page, filter.pager.size);
+	}
+
+	function refreshAgents() {
+		agents = {
+			items: agents?.items?.map(t => { return { ...t }; }) || [],
+			count: agents?.count || 0
+		};
+	}
+
+	/** @param {number} totalItemsCount */
+	function refreshPager(totalItemsCount, page = firstPage, pageCount = pageSize) {
+		pager = {
+			page: page,
+			size: pageCount || 0,
+			count: totalItemsCount || 0
+		};
+	}
+
+	/**
+	 * @param {number} pageNum
+	 */
+	function pageTo(pageNum) {
+		pager = {
+			...pager,
+			page: pageNum
+		};
+
+		filter = {
+      ...filter,
+			pager: pager
+		};
+
+		getPagedAgents();
+	}
 </script>
 
 <HeadTitle title="Agent List" />
-
 <Breadcrumb title="Agent" pagetitle="List" />
 
 <Row>
-	<CardAgent agents={agents} />
-</Row>
+	<CardAgent agents={agents.items} />
+</Row>
+
+<PlainPagination pagination={pager} pageTo={pageTo} />