@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/layout/mailing/MailingMessageCard.svelte

@@ -1,112 +1,112 @@
-<script lang="ts">
-	import { Checkbox } from '../../forms/checkbox/index.js';
-	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
-	import dayjs from 'dayjs';
-	import { type MailingMessageCardProps } from './index.js';
-
-	let {
-		id = 0,
-		sender = '',
-		subject = '',
-		date,
-		message = '',
-		isStared = false,
-		isImportant = false,
-		isRead = false,
-		isChecked = false,
-		onItemChecked,
-		toggelImportant,
-		toggleFavorited,
-		onItemSelected,
-		showCheckbox = true,
-		showMarkAsFavorite = true,
-		showMarkAsImportant = true
-	}: MailingMessageCardProps = $props();
-
-	function handleClik(e: any) {
-		if (e.target.tagName !== 'INPUT' && e.target.localName !== 'iconify-icon') onItemSelected?.(id);
-	}
-
-	function formatDate(date: Date | string): string {
-		const messageDate = dayjs(date);
-		const today = dayjs();
-
-		if (messageDate.isSame(today, 'day')) {
-			return messageDate.format('HH:mm');
-		} else if (messageDate.isSame(today.subtract(1, 'day'), 'day')) {
-			return 'Yesterday';
-		} else if (messageDate.isSame(today, 'year')) {
-			return messageDate.format('MMM DD');
-		} else {
-			return messageDate.format('DD/MM/YYYY');
-		}
-	}
-</script>
-
-<div
-	class:hover:bg-gray-200={!isChecked}
-	class="flex items-center border border-gray-300 bg-white px-2 shadow"
-	role="button"
-	tabindex="0"
-	onkeydown={handleClik}
-	onclick={handleClik}
->
-	{#if showCheckbox}
-		<Checkbox
-			checked={isChecked}
-			class="cursor-pointer border-2 border-gray-400 transition-colors hover:ring-4 hover:ring-gray-400 focus:ring-0"
-			onchange={(e) => {
-				const target = e.target;
-				onItemChecked?.({ checked: target.checked, id });
-			}}
-		/>
-	{/if}
-	<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">
-				<div class="mr-4 flex items-center gap-1 space-x-1">
-					<button
-						class:hidden={!showMarkAsFavorite}
-						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
-						class:hidden={!showMarkAsImportant}
-						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>
-
-			<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}>
-				{formatDate(date)}
-			</span>
-		</div>
-	</div>
-</div>
+<script lang="ts">
+	import { Checkbox } from '../../forms/checkbox/index.js';
+	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
+	import dayjs from 'dayjs';
+	import { type MailingMessageCardProps } from './index.js';
+
+	let {
+		id = 0,
+		sender = '',
+		subject = '',
+		date,
+		message = '',
+		isStared = false,
+		isImportant = false,
+		isRead = false,
+		isChecked = false,
+		onItemChecked,
+		toggelImportant,
+		toggleFavorited,
+		onItemSelected,
+		showCheckbox = true,
+		showMarkAsFavorite = true,
+		showMarkAsImportant = true
+	}: MailingMessageCardProps = $props();
+
+	function handleClik(e: any) {
+		if (e.target.tagName !== 'INPUT' && e.target.localName !== 'iconify-icon') onItemSelected?.(id);
+	}
+
+	function formatDate(date: Date | string): string {
+		const messageDate = dayjs(date);
+		const today = dayjs();
+
+		if (messageDate.isSame(today, 'day')) {
+			return messageDate.format('HH:mm');
+		} else if (messageDate.isSame(today.subtract(1, 'day'), 'day')) {
+			return 'Yesterday';
+		} else if (messageDate.isSame(today, 'year')) {
+			return messageDate.format('MMM DD');
+		} else {
+			return messageDate.format('DD/MM/YYYY');
+		}
+	}
+</script>
+
+<div
+	class:hover:bg-gray-200={!isChecked}
+	class="flex items-center border border-gray-300 bg-white px-2 shadow"
+	role="button"
+	tabindex="0"
+	onkeydown={handleClik}
+	onclick={handleClik}
+>
+	{#if showCheckbox}
+		<Checkbox
+			checked={isChecked}
+			class="cursor-pointer border-2 border-gray-400 transition-colors hover:ring-4 hover:ring-gray-400 focus:ring-0"
+			onchange={(e) => {
+				const target = e.target;
+				onItemChecked?.({ checked: target.checked, id });
+			}}
+		/>
+	{/if}
+	<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">
+				<div class="mr-4 flex items-center gap-1 space-x-1">
+					<button
+						class:hidden={!showMarkAsFavorite}
+						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
+						class:hidden={!showMarkAsImportant}
+						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>
+
+			<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}>
+				{formatDate(date)}
+			</span>
+		</div>
+	</div>
+</div>

package/dist/layout/mailing/MailingMessageViewer.svelte

@@ -1,87 +1,87 @@
-<script lang="ts">
-	import { PageLoader } from '../../ui/pageLoader/index.js';
-	import { slide } from 'svelte/transition';
-	import type { MailingHeaderData, MailingMessageViewerProps, MailingReplyType } from './index.js';
-	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 = $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?.({
-				currentPage: 1,
-				pageSize: 1,
-				totalCount: 1,
-				hasNextPage: false,
-				hasPreviousPage: false
-			});
-
-			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 {
-			busy = false;
-		}
-	});
-</script>
-
-<div class="h-full w-full">
-	{#if busy}
-		<PageLoader size={50} />
-	{:else}
-		<div class="flex h-full w-full flex-col gap-2" in:slide>
-			<div class:hidden={!showHeader}>
-				<MailingHeader bind:replyType={inputType} data={header} {showReplies} />
-			</div>
-			<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) || !showReplies}>
-						<div class=" rounded-md bg-white p-4">
-							Reply
-							<!-- <Reply {inputType} /> -->
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	{/if}
-</div>
+<script lang="ts">
+	import { PageLoader } from '../../ui/pageLoader/index.js';
+	import { slide } from 'svelte/transition';
+	import type { MailingHeaderData, MailingMessageViewerProps, MailingReplyType } from './index.js';
+	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 = $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?.({
+				currentPage: 1,
+				pageSize: 1,
+				totalCount: 1,
+				hasNextPage: false,
+				hasPreviousPage: false
+			});
+
+			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 {
+			busy = false;
+		}
+	});
+</script>
+
+<div class="h-full w-full">
+	{#if busy}
+		<PageLoader size={50} />
+	{:else}
+		<div class="flex h-full w-full flex-col gap-2" in:slide>
+			<div class:hidden={!showHeader}>
+				<MailingHeader bind:replyType={inputType} data={header} {showReplies} />
+			</div>
+			<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) || !showReplies}>
+						<div class=" rounded-md bg-white p-4">
+							Reply
+							<!-- <Reply {inputType} /> -->
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>