@rkosafo/cai.components 0.0.69 → 0.0.70

package/dist/layout/mailing/MailingContent.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	interface Props {
+		content: any;
+	}
+	let { content }: Props = $props();
+</script>
+
+<div class="h-full w-full">
+	{@html content}
+</div>

package/dist/layout/mailing/MailingContent.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    content: any;
+}
+declare const MailingContent: import("svelte").Component<Props, {}, "">;
+type MailingContent = ReturnType<typeof MailingContent>;
+export default MailingContent;

package/dist/layout/mailing/MailingHeader.svelte

@@ -1,5 +1,55 @@
 <script lang="ts">
+	import { Avatar } from '../../ui/avatar/index.js';
+	import DropdownDivider from '../../ui/dropdown/DropdownDivider.svelte';
+	import { IconifyIcon } from '../../ui/icons/index.js';
 	import type { MailingHeaderProps } from './types.js';
 
-	let { data, replyType = $bindable(undefined) }: MailingHeaderProps = $props();
+	let { data, replyType = $bindable(undefined), showReplies }: MailingHeaderProps = $props();
 </script>
+
+<div class=" w-full bg-white p-4">
+	<div class="flex h-full w-full flex-col">
+		<p class="text-xl font-light">{data?.subject}</p>
+		<DropdownDivider />
+		<div class="flex justify-between pt-3">
+			<div class="flex items-center gap-2">
+				<Avatar class="h-10 w-10 bg-blue-600 text-white">{data?.user?.initials}</Avatar>
+				<div>
+					<p class="text-sm">
+						{`${data?.user?.firstName} ${data?.user?.surname} - ${data?.user?.staffNumber}`}
+					</p>
+					<div class="flex items-center gap-1">
+						<p class="text-xs text-gray-500 antialiased">to {data?.to}</p>
+						<button class="grid place-content-center rounded-full p-1.5 hover:bg-gray-200">
+							<IconifyIcon icon="solar:alt-arrow-down-bold" style="font-size: 14px;" />
+						</button>
+					</div>
+				</div>
+			</div>
+			<div class="flex items-center gap-3" class:hidden={!showReplies}>
+				<button
+					class="flex items-center gap-1 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+					onclick={() => (replyType = 'reply')}
+				>
+					<IconifyIcon icon="bi:reply" style="font-size: 17px;" />
+					Reply
+				</button>
+				<button
+					class="flex items-center gap-1 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+					onclick={() => (replyType = 'reply-all')}
+				>
+					<IconifyIcon icon="ri:reply-all-line" style="font-size: 17px;" />
+					Reply all
+				</button>
+				<button
+					class="flex items-center gap-1 rounded-lg border border-gray-300 px-2 py-1 text-sm text-gray-700 shadow transition duration-100 hover:bg-gray-200"
+					onclick={() => (replyType = 'forward')}
+				>
+					<IconifyIcon icon="mdi:forward-outline" style="font-size: 17px;" />
+					Forward
+				</button>
+			</div>
+		</div>
+		<!-- <Divider morePadding={false} /> -->
+	</div>
+</div>

package/dist/layout/mailing/MailingMessageCard.svelte

@@ -61,43 +61,46 @@
 		}}
 	/>
 	<div class="my-1 flex w-full cursor-pointer items-center justify-between p-1">
-		<div class="flex items-center">
-			<div class="mr-4 flex items-center gap-1 space-x-1">
-				<button
-					onclick={(e) => {
-						toggleFavorited?.(id);
-					}}
-					aria-label="Not starred"
-				>
-					<IconifyIcon
-						style="font-size: 24px"
-						icon={isStared ? 'mdi:star' : 'mdi:star-outline'}
-						class="flex justify-center transition-colors {isStared
-							? 'text-yellow-500 hover:text-yellow-600'
-							: 'text-gray-500 hover:text-gray-900'}"
-					/>
-				</button>
-				<button
-					onclick={(e) => {
-						toggelImportant?.(id);
-					}}
-					aria-label="Click to mark this email as important"
-				>
-					<IconifyIcon
-						style="font-size: 18px"
-						icon={isImportant ? 'ic:outline-bookmark' : 'solar:bookmark-broken'}
-						class="flex justify-center transition-colors {isImportant
-							? 'text-yellow-500 hover:text-yellow-600'
-							: 'text-gray-500 hover:text-gray-900'}"
-					/>
-				</button>
+		<div class="flex w-full  items-center">
+			<div class="flex">
+				<div class="mr-4 flex items-center gap-1 space-x-1">
+					<button
+						onclick={(e) => {
+							toggleFavorited?.(id);
+						}}
+						aria-label="Not starred"
+					>
+						<IconifyIcon
+							style="font-size: 24px"
+							icon={isStared ? 'mdi:star' : 'mdi:star-outline'}
+							class="flex justify-center transition-colors {isStared
+								? 'text-yellow-500 hover:text-yellow-600'
+								: 'text-gray-500 hover:text-gray-900'}"
+						/>
+					</button>
+					<button
+						onclick={(e) => {
+							toggelImportant?.(id);
+						}}
+						aria-label="Click to mark this email as important"
+					>
+						<IconifyIcon
+							style="font-size: 18px"
+							icon={isImportant ? 'ic:outline-bookmark' : 'solar:bookmark-broken'}
+							class="flex justify-center transition-colors {isImportant
+								? 'text-yellow-500 hover:text-yellow-600'
+								: 'text-gray-500 hover:text-gray-900'}"
+						/>
+					</button>
+				</div>
+				<span class="w-56 truncate pr-2" class:font-bold={!isRead}>{sender}</span>
+				<span class="w-64 truncate" class:font-bold={!isRead}>{subject}</span>
+				<span class="mx-1">-</span>
 			</div>
-			<span class="w-56 truncate pr-2" class:font-bold={!isRead}>{sender}</span>
-			<span class="w-64 truncate" class:font-bold={!isRead}>{subject}</span>
-			<span class="mx-1">-</span>
-			<span class="w-96 truncate text-sm text-gray-600">{message}</span>
+
+			<p class=" truncate max-l xl:max-w-2xl 2xl:max-w-5xl  text-sm text-gray-600">{message}</p>
 		</div>
-		<div class="flex w-32 items-center justify-end">
+		<div class="flex w-32 shrink-0 items-center justify-end">
 			<span class="text-sm" class:font-bold={!isRead} class:text-gray-500={isRead}>
 				{formatDate(date)}
 			</span>

package/dist/layout/mailing/MailingMessageViewer.svelte

@@ -5,18 +5,28 @@
 	import MailingHeader from './MailingHeader.svelte';
 	import { onMount } from 'svelte';
 	import toast from 'svelte-french-toast';
+	import { getInitials } from '../../index.js';
+	import MailingContent from './MailingContent.svelte';
 
-	let { readMessage, recordId, updatePageInfo }: MailingMessageViewerProps = $props();
+	let {
+		readMessage,
+		recordId = $bindable(0),
+		updatePageInfo,
+		showReplies = true,
+		showHeader = true
+	}: MailingMessageViewerProps = $props();
 
 	let busy = $state(true);
 	let header = $state<MailingHeaderData>({} as MailingHeaderData);
 	let inputType = $state<MailingReplyType | undefined>(undefined);
+	let content = $state('');
 
 	onMount(async () => {
 		try {
 			const ret = await readMessage(recordId);
 			if (!ret?.success) {
 				toast.error(ret?.message);
+				recordId = 0;
 				return;
 			}
 			updatePageInfo?.({
@@ -27,7 +37,18 @@
 				hasPreviousPage: false
 			});
 
-			console.log({ ret });
+			const { data } = ret;
+			header = {
+				subject: data?.subject ?? '',
+				user: {
+					firstName: data?.user.firstName ?? '',
+					surname: data?.user.surname ?? '',
+					staffNumber: data?.user.staffNumber ?? '',
+					initials: `${getInitials(data?.user.firstName)}${getInitials(data?.user.surname)}`
+				},
+				to: data?.to ?? ''
+			};
+			content = data.message ?? '';
 		} catch (error: any) {
 			toast.error(error?.message || error);
 		} finally {
@@ -41,23 +62,26 @@
 		<PageLoader size={50} />
 	{:else}
 		<div class="flex h-full w-full flex-col gap-2" in:slide>
-			<div class="h-28 px-4 pt-4">
-				<MailingHeader bind:replyType={inputType} data={header} />
+			<div class:hidden={!showHeader}>
+				<MailingHeader bind:replyType={inputType} data={header} {showReplies} />
 			</div>
-			<!-- <div class="fex-grow h-full w-full rounded bg-gray-100">
-				<div class="flex h-[71vh] w-full flex-col gap-4">
-					<div
-						class="scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch h-full flex-grow overflow-y-auto p-2"
-					>
-						<ContentSection {content} />
+			<div class="fex-grow h-full w-full">
+				<div
+					class:h-[71vh]={inputType}
+					class:h-full={!inputType}
+					class="flex w-full flex-col gap-4"
+				>
+					<div class="custom-scrollbar h-full flex-grow overflow-y-auto bg-white p-4">
+						<MailingContent {content} />
 					</div>
-					<div class="h-modal p-4 pt-2" class:hidden={!Boolean(inputType)}>
+					<div class="h-modal p-4 pt-2" class:hidden={!Boolean(inputType) || !showReplies}>
 						<div class=" rounded-md bg-white p-4">
-							<Reply {inputType} />
+							Reply
+							<!-- <Reply {inputType} /> -->
 						</div>
 					</div>
 				</div>
-			</div> -->
+			</div>
 		</div>
 	{/if}
 </div>

package/dist/layout/mailing/MailingMessageViewer.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { MailingMessageViewerProps } from './index.js';
-declare const MailingMessageViewer: import("svelte").Component<MailingMessageViewerProps, {}, "">;
+declare const MailingMessageViewer: import("svelte").Component<MailingMessageViewerProps, {}, "recordId">;
 type MailingMessageViewer = ReturnType<typeof MailingMessageViewer>;
 export default MailingMessageViewer;

package/dist/layout/mailing/MailingModule.svelte

@@ -9,7 +9,8 @@
 		type MailingMessage,
 		type MailMarkReadToggleType,
 		type MailFavariteToggleType,
-		type MailPageInfo
+		type MailPageInfo,
+		type MailingActiveBox
 	} from './index.js';
 	import MailingMessageCard from './MailingMessageCard.svelte';
 	import { toast, type CrudResult, type TableFilter } from '../../index.js';
@@ -28,6 +29,7 @@
 		showMarkReadButton = true,
 		showFavoriteButton = true,
 		showMarkAsSpamButton = true,
+		showReplies = true,
 		readInbox = $bindable((skip?: number, take?: number, filter?: TableFilter<any>) => {
 			return null;
 		}),
@@ -57,9 +59,7 @@
 		}
 	}: MailingModuleProps = $props();
 
-	type ActiveBox = 'inbox' | 'outbox';
-
-	let activeBox = $state<ActiveBox>('inbox');
+	let activeBox = $state<MailingActiveBox>('inbox');
 	let pageInfo = new PageInfo();
 	let menutItems = $state([
 		{ icon: 'bx:bxs-inbox', title: 'Inbox', count: 3, path: '' },
@@ -313,7 +313,7 @@
 	}
 
 	function updatePageInfo(val: MailPageInfo) {
-		console.log({ val });
+		// console.log({ val });
 		pageInfo.totalItems = 1;
 		pageInfo.setHasNextPage(val.hasNextPage);
 		pageInfo.setHasPrevPage(val.hasPreviousPage);
@@ -351,7 +351,7 @@
 					onMarkAsSpamClick={handleMarkAsSpam}
 					onToggleMarkReadClick={handleMarkAsRead}
 					onToggleFavoriteClick={handleMarkAsFavorite}
-					onBackClick={() => {
+					onBackClick={async () => {
 						messageSelected = 0;
 						selectedMessages = [];
 					}}
@@ -375,9 +375,11 @@
 					<PageLoader size={50} />
 				{:else if messageSelected}
 					<MailingMessageViewer
-						recordId={messageSelected}
+						bind:recordId={messageSelected}
 						readMessage={readAMessage}
 						{updatePageInfo}
+						{showReplies}
+						showHeader={activeBox === 'inbox'}
 					/>
 				{:else if messages.length}
 					<div class="custom-scrollbar h-full w-full overflow-auto" in:slide>

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

@@ -5,3 +5,4 @@ export { default as MailToolBar } from './MailToolBar.svelte';
 export { default as MailingModule } from './MailingModule.svelte';
 export { default as MailingHeader } from './MailingHeader.svelte';
 export { default as MailingMessageViewer } from './MailingMessageViewer.svelte';
+export { default as MailingContent } from './MailingContent.svelte';

package/dist/layout/mailing/index.js

@@ -5,3 +5,4 @@ export { default as MailToolBar } from './MailToolBar.svelte';
 export { default as MailingModule } from './MailingModule.svelte';
 export { default as MailingHeader } from './MailingHeader.svelte';
 export { default as MailingMessageViewer } from './MailingMessageViewer.svelte';
+export { default as MailingContent } from './MailingContent.svelte';

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

@@ -71,6 +71,7 @@ export interface MailingModuleProps {
     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;
+    showReplies?: boolean;
 }
 export interface MailingMessageCardChecked {
     id: number;
@@ -104,10 +105,13 @@ export interface MailingMessageCardProps extends MailingMessage {
     toggelImportant?: (id: number) => void;
     toggleFavorited?: (id: number) => void;
 }
+export type MailingActiveBox = 'inbox' | 'outbox';
 export interface MailingMessageViewerProps {
     readMessage: (id: number) => Promise<CrudResult<MailingMessage>> | CrudResult<MailingMessage> | null;
     recordId: number;
     updatePageInfo?: (val: MailPageInfo) => void;
+    showReplies?: boolean;
+    showHeader?: boolean;
 }
 export interface MailingHeaderData {
     subject: string;
@@ -123,4 +127,5 @@ export type MailingReplyType = 'reply' | 'reply-all' | 'forward';
 export interface MailingHeaderProps {
     data: MailingHeaderData;
     replyType: MailingReplyType | undefined;
+    showReplies?: boolean;
 }

package/package.json

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