@rkosafo/cai.components 0.0.71 → 0.0.73

package/dist/layout/mailing/MailingMessageCard.svelte

@@ -46,6 +46,7 @@
 	class:bg-white={!isRead && !isChecked}
 	class:shadow={!isRead && !isChecked}
 	class:border={!isRead && !isChecked}
+	class:border-gray-300={!isRead && !isChecked}
 	class="flex items-center border-y px-2"
 	role="button"
 	tabindex="0"
@@ -61,7 +62,7 @@
 		}}
 	/>
 	<div class="my-1 flex w-full cursor-pointer items-center justify-between p-1">
-		<div class="flex w-full  items-center">
+		<div class="flex w-full items-center">
 			<div class="flex">
 				<div class="mr-4 flex items-center gap-1 space-x-1">
 					<button
@@ -98,7 +99,7 @@
 				<span class="mx-1">-</span>
 			</div>
 
-			<p class=" truncate max-l xl:max-w-2xl 2xl:max-w-5xl  text-sm text-gray-600">{message}</p>
+			<p class=" max-l truncate text-sm text-gray-600 xl:max-w-2xl 2xl:max-w-5xl">{message}</p>
 		</div>
 		<div class="flex w-32 shrink-0 items-center justify-end">
 			<span class="text-sm" class:font-bold={!isRead} class:text-gray-500={isRead}>

package/dist/layout/mailing/MailingModule.svelte

@@ -17,6 +17,7 @@
 	import { PageInfo } from '../../utils/paginate.svelte.js';
 	import AlertDialog from '../../ui/alertDialog/AlertDialog.svelte';
 	import MailingMessageViewer from './MailingMessageViewer.svelte';
+	import debounce from 'lodash/debounce';
 
 	let {
 		showSidePanel = true,
@@ -42,7 +43,7 @@
 		toggleArchieve = async (id: string | number) => {
 			return { success: false, data: null, error: null } as any;
 		},
-		toggleAsRead = async (id: string | number) => {
+		toggleAsRead = async (id: string | number, type?: MailMarkReadToggleType) => {
 			return { success: false, data: null, error: null } as any;
 		},
 		toggleFavourite = async (id: string | number) => {
@@ -73,6 +74,8 @@
 	let selectedMessages = $state<number[]>([]);
 	let messageSelected = $state<number>(0);
 
+	let paginationInfo = new PageInfo();
+
 	function toggleSideBar(val: MailMenu) {
 		const { title } = val;
 		if (title === 'Inbox') activeBox = 'inbox';
@@ -197,7 +200,7 @@
 				const results = [];
 
 				for (const msg of selectedMessages) {
-					const res = await toggleAsRead(msg);
+					const res = await toggleAsRead(msg, val);
 					results.push(res);
 				}
 				selectedMessages = [];
@@ -318,11 +321,31 @@
 
 	function updatePageInfo(val: MailPageInfo) {
 		// console.log({ val });
-		pageInfo.totalItems = 1;
-		pageInfo.setHasNextPage(val.hasNextPage);
-		pageInfo.setHasPrevPage(val.hasPreviousPage);
-		pageInfo.setTotalPages(1);
-		pageInfo.setPageSize(1);
+		paginationInfo.totalItems = 1;
+		paginationInfo.setHasNextPage(val.hasNextPage);
+		paginationInfo.setHasPrevPage(val.hasPreviousPage);
+		paginationInfo.setTotalPages(1);
+		paginationInfo.setPageSize(1);
+	}
+
+	const debouncedSearch = debounce(fetchData, 300);
+
+	function handleSearch(val: string) {
+		// query = val;
+		debouncedSearch(pageNumber, { search: val }, activeBox);
+	}
+
+	async function getIsRead(id: number): Promise<boolean> {
+		let status = false;
+		try {
+			const ret = await readAMessage(id);
+			if (!ret?.success) {
+				return false;
+			}
+			status = ret.data?.isRead || false;
+			return status;
+		} catch (error) {}
+		return status;
 	}
 
 	$effect(() => {
@@ -333,15 +356,13 @@
 <div class="h-full w-full">
 	<div class="flex h-full w-full gap-2">
 		<div class:hidden={!showSidePanel} class="loginbox h-full w-20 rounded-md bg-white">
-			<MailSidebar onClick={toggleSideBar} menus={menutItems} {setActiveMenu}
-			
-			/>
+			<MailSidebar onClick={toggleSideBar} menus={menutItems} {setActiveMenu} />
 		</div>
 		<div class="flex w-full flex-grow flex-col gap-1">
 			<div class="loginbox h-14 rounded bg-white px-4">
 				<MailToolBar
 					isFavoriteActive={false}
-					isReadActive={false}
+					isReadActive={async () => await getIsRead(messageSelected)}
 					showBackButton={Boolean(messageSelected)}
 					{showPagination}
 					{showComposeButton}
@@ -357,7 +378,8 @@
 					onMarkAsSpamClick={handleMarkAsSpam}
 					onToggleMarkReadClick={handleMarkAsRead}
 					onToggleFavoriteClick={handleMarkAsFavorite}
-					onBackClick={async () => {
+					onsearchChange={handleSearch}
+					onBackClick={() => {
 						messageSelected = 0;
 						selectedMessages = [];
 					}}
@@ -367,11 +389,11 @@
 					}}
 					selectedMails={selectedMessages}
 					pageInfo={{
-						currentPage: pageInfo.currentPage,
-						pageSize: pageInfo.pageSize,
-						totalCount: pageInfo.totalItems,
-						hasNextPage: pageInfo.hasNextPage,
-						hasPreviousPage: pageInfo.hasPrevPage
+						currentPage: !messageSelected ? pageInfo.currentPage : paginationInfo.currentPage,
+						pageSize: !messageSelected ? pageInfo.pageSize : paginationInfo.pageSize,
+						totalCount: !messageSelected ? pageInfo.totalItems : paginationInfo.totalItems,
+						hasNextPage: !messageSelected ? pageInfo.hasNextPage : paginationInfo.hasNextPage,
+						hasPreviousPage: !messageSelected ? pageInfo.hasPrevPage : paginationInfo.hasPrevPage
 					}}
 				/>
 			</div>

package/dist/layout/mailing/types.d.ts

@@ -67,7 +67,7 @@ export interface MailingModuleProps {
     toggleArchieve?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
     toggleSpam?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
     deleteEntry?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
-    toggleAsRead?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
+    toggleAsRead?: (id: string | number, type?: MailMarkReadToggleType) => Promise<CrudResult<any>> | CrudResult<any> | null;
     toggleFavourite?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
     toggelImportant?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
     readAMessage: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "files": [
     "dist",
     "!dist/**/*.test.*",