@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/ui/datatable/Datatable.svelte

@@ -0,0 +1,516 @@
+<script lang="ts" module>
+	export function refetchDatatable(params?: TableFilter) {
+		window.dispatchEvent(
+			new CustomEvent('reFetchTableData', {
+				detail: params
+			})
+		);
+	}
+</script>
+
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import {
+		AlertDialog,
+		Button,
+		Datepicker,
+		Drawer,
+		extractQueryParam,
+		Input,
+		loadFromLocalStorage,
+		Paginate,
+		saveToLocalStorage,
+		Select,
+		Table,
+		TableLoader,
+		type DatatableProps,
+		type IFormChangeProp,
+		type TableFilter
+	} from '../../index.js';
+	import { PageInfo } from '../../utils/paginate.svelte.js';
+	import debounce from 'lodash/debounce';
+	import { onMount } from 'svelte';
+	import { writable } from 'svelte/store';
+	import { slide } from 'svelte/transition';
+
+	let {
+		persitFiltersToUrl = false,
+		showTopActionsBackground = true,
+		fillSpace = true,
+		onAfterAction,
+		hideSearchBox = false,
+		showAdd = true,
+		addButtonLabel = 'Add New',
+		searchPlaceholder = 'Search...',
+		addNewHeading = 'Add New Record',
+		updateHeading = 'Update',
+		headerColor = 'blue',
+		newRecord = {},
+		query = $bindable(''),
+		hiddenColumns = [],
+		customFilterValues = {},
+		onAddNew,
+		busy = false,
+		showFilterDateRange = false,
+		loadingBodySize = 10,
+		loadingHeaderSize = 6,
+		allowLoadAfterCreate = true,
+		allowDispatchAfterAction = false,
+		modalSize = 'md',
+		take = 15,
+		onActionClicked,
+		onRowClicked,
+		onView,
+		onEdit,
+		onDelete,
+		editor,
+		customFilter,
+		read = $bindable((skip?: number, take?: number, filter?: TableFilter<any>) => {
+			return null;
+		}),
+		updateEntry = (x: any) => {
+			return null;
+		},
+		createEntry = async (x: any) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		deleteEntry = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		...otherProps
+	}: DatatableProps = $props();
+
+	const PAGE_SIZE_KEY = 'customTablePageSize';
+	let editorHeading = $state('');
+	let hideForm = $state(true);
+	let editing = $state(false);
+	let activeEntry = $state<any>({});
+	let pageInfo = new PageInfo();
+	const rangeDate = $derived(getRange());
+	let allColumns = $state(writable<any>([]));
+	let pathname = $state('');
+	let search = $state('');
+	let pageNumber = $state(0);
+	let searchParams = $state<any>(null);
+	let showAlert = $state(false);
+	let tableData = $state<any[]>([]);
+	let isLoading = $state(false);
+	let deleteLoading = $state(false);
+	let isValid = $state(false);
+	let viewing = $state(false);
+
+	function addNew() {
+		if (onAddNew) {
+			onAddNew();
+			return;
+		}
+		editorHeading = addNewHeading;
+		activeEntry = (newRecord && { ...newRecord }) || null;
+		editing = false;
+		hideForm = false;
+		viewing = false;
+	}
+
+	async function fetchData(page: number, params: TableFilter) {
+		try {
+			let currentPage = 0;
+			busy = true;
+			if (params.search) {
+				pageInfo.setCurrentPage(1);
+				currentPage = pageInfo.currentPage;
+			} else {
+				currentPage = page || pageInfo.currentPage;
+			}
+			let newParams: any = {
+				page: currentPage,
+				pageSize: pageInfo.pageSize,
+				search: params.search ?? '',
+				filter: params.filter ?? {},
+				order: params.order ?? []
+			};
+			const ret = await read(newParams.page, newParams.pageSize, {
+				...params,
+				filter: { ...customFilterValues },
+				search: newParams.search ?? ''
+			});
+			if (!ret?.success) {
+				// showError(ret?.message || 'Failed to load data');
+				return true;
+			}
+			const xs = ret.data;
+			// console.log({xs})
+			pageInfo.totalItems = xs.totalCount;
+			pageInfo.setHasNextPage(xs.pageInfo.hasNextPage);
+			pageInfo.setHasPrevPage(xs.pageInfo.hasPreviousPage);
+			tableData = xs.items;
+		} catch (e: any) {
+			// showError(e.message || e);
+		} finally {
+			busy = false;
+		}
+	}
+
+	const debouncedSearch = debounce(fetchData, 300);
+
+	function onSearchChange(e: Event) {
+		const target = e.target as HTMLInputElement | null;
+		const value = target ? target.value : '';
+		debouncedSearch(pageNumber, { search: value });
+	}
+
+	function getRange() {
+		return { from: undefined, to: undefined };
+	}
+	function handleDateRangeChange(e) {
+		console.log({ e });
+	}
+
+	async function handlePageSize(val: number) {
+		pageInfo.setPageSize(val);
+		await fetchData(pageInfo.currentPage, { search: query });
+
+		saveToLocalStorage(PAGE_SIZE_KEY, { pageSize: val });
+	}
+
+	async function getMore() {
+		if (pageInfo.gotoNext()) {
+			const value = pageInfo.currentPage;
+			if (persitFiltersToUrl) {
+				const current = new URLSearchParams(Array.from(searchParams.entries()) as any);
+
+				if (!value) {
+					current.delete('page');
+				} else {
+					current.set('page', String(value));
+				}
+
+				const search = current.toString();
+				const page = search ? `?${search}` : '';
+				await goto(`${pathname}${page}`);
+			}
+			await fetchData(value, { search: query });
+		}
+	}
+
+	async function getLess() {
+		if (pageInfo.gotoPrev()) {
+			const value = pageInfo.currentPage;
+			if (persitFiltersToUrl) {
+				const current = new URLSearchParams(Array.from(searchParams.entries()) as any);
+				if (!value) {
+					current.delete('page');
+				} else {
+					current.set('page', String(value));
+				}
+				const search = current.toString();
+				const page = search ? `?${search}` : '';
+				await goto(`${pathname}${page}`);
+			}
+			await fetchData(value, { search: query });
+		}
+	}
+
+	function handleExternalFetch(event: CustomEvent) {
+		const { page: customPage, params: customParams } = event.detail || {};
+		const fetchPage = customPage !== undefined ? customPage : pageNumber;
+		const fetchParams = customParams || { search: query };
+
+		fetchData(fetchPage, fetchParams);
+	}
+
+	function handleEdit(val: any) {
+		if (onEdit) {
+			onEdit(val);
+			return;
+		}
+		activeEntry = val;
+		editorHeading = updateHeading;
+		editing = true;
+		hideForm = false;
+		viewing = false;
+	}
+	function handleView(val: any) {
+		if (onView) {
+			onView(val);
+			return;
+		}
+		activeEntry = val;
+		editorHeading = 'View Record';
+		editing = true;
+		hideForm = false;
+		viewing = true;
+	}
+
+	function handleRowClicked(val: any) {
+		if (onRowClicked) {
+			onRowClicked(val);
+			return;
+		}
+		activeEntry = val;
+		editorHeading = addNewHeading;
+		editing = true;
+		hideForm = false;
+	}
+	function handleDelete(val: any) {
+		if (onDelete) {
+			onDelete(val);
+			return;
+		}
+		activeEntry = val;
+		showAlert = true;
+		// editorHeading = updateHeading;
+		// editing = true;
+		// hideForm = true;
+	}
+
+	function closeSideModal() {
+		hideForm = true;
+		activeEntry = null;
+		viewing = false;
+	}
+
+	async function handleAction({ action, data }: { action: string; data: FormData }) {
+		let formData = Object.fromEntries(data.entries());
+
+		try {
+			isLoading = true;
+			const ret = editing
+				? await updateEntry({ ...formData, id: activeEntry.id })
+				: await createEntry(formData);
+
+			if (ret?.success) {
+				const successMessage = allowLoadAfterCreate
+					? editing
+						? 'Successfully updated record'
+						: 'Successfully added record'
+					: '';
+				// showSuccess(ret.message || successMessage);
+				allowLoadAfterCreate && (await fetchData(pageNumber, { search: query }));
+
+				allowDispatchAfterAction &&
+					onAfterAction &&
+					onAfterAction({ type: 'create', values: formData, data: ret.data });
+
+				hideForm = true;
+				activeEntry = {};
+				closeSideModal();
+			} else {
+				// showError(ret.message);
+			}
+		} catch (error) {
+			// showError(ret.message);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function closeAlert() {
+		activeEntry = {};
+		if (showAlert) showAlert = false;
+		if (deleteLoading) deleteLoading = false;
+	}
+
+	async function doDelete(id: string) {
+		try {
+			deleteLoading = true;
+			const ret = await deleteEntry(id);
+			if (!ret?.success) {
+				// showError(ret.message);
+				return;
+			}
+			// showSuccess(ret.message);
+			closeAlert();
+			await fetchData(pageNumber, { search: query });
+		} catch (error: any) {
+			// showError(error?.message || error);
+		} finally {
+			deleteLoading = false;
+		}
+	}
+
+	function handleFormChange(val: IFormChangeProp<any>) {
+		const { values, isValid: validForm } = val;
+		isValid = validForm;
+	}
+
+	$effect(() => {
+		searchParams = page.url.searchParams;
+		search = page.url.search;
+		pathname = page.url.pathname;
+
+		pageNumber = extractQueryParam(page.url.search, 'page')
+			? Number(extractQueryParam(page.url.search, 'page'))
+			: pageInfo.currentPage;
+	});
+
+	onMount(() => {
+		const res = loadFromLocalStorage<{ pageSize: string }>(PAGE_SIZE_KEY);
+		if (res?.pageSize) {
+			pageInfo.setPageSize(Number(res?.pageSize));
+		} else {
+			pageInfo.setPageSize(take);
+		}
+
+		if (pageNumber) {
+			pageInfo.setCurrentPage(pageNumber);
+			fetchData(pageNumber, { search: query });
+		} else {
+			fetchData(pageInfo.currentPage, { search: query });
+		}
+
+		// Listen for custom event from parent
+		window.addEventListener('reFetchTableData', handleExternalFetch as EventListener);
+
+		// Cleanup on destroy
+		return () => {
+			window.removeEventListener('reFetchTableData', handleExternalFetch as EventListener);
+		};
+	});
+</script>
+
+<div class="flex h-full w-full flex-col gap-2">
+	<div
+		class="flex w-full flex-col gap-2"
+		class:custom-container={!fillSpace}
+		class:px-4={fillSpace}
+		class:table-background={showTopActionsBackground}
+		class:py-2={!showTopActionsBackground}
+	>
+		<div class="flex w-full flex-col gap-2 sm:justify-between lg:flex-row lg:items-center">
+			<div class="flex w-full flex-col gap-2 sm:flex-row">
+				<div class:hidden={hideSearchBox} class="w-full lg:max-w-lg">
+					<Input
+						value={query}
+						oninput={onSearchChange}
+						placeholder={searchPlaceholder}
+						class="h-9.5 ps-8"
+					>
+						{#snippet left()}
+							<iconify-icon icon="eva:search-outline" class="text-xl text-gray-500"></iconify-icon>
+						{/snippet}
+					</Input>
+				</div>
+				<div class:hidden={!showFilterDateRange} class="w-full sm:max-w-60">
+					<Datepicker
+						placeholder="Date Range"
+						onselect={handleDateRangeChange}
+						range
+						rangeFrom={rangeDate.from}
+						rangeTo={rangeDate.to}
+					/>
+				</div>
+			</div>
+
+			<div class="flex shrink-0 flex-col gap-4 sm:flex-row sm:items-center">
+				<div class="flex items-center gap-2">
+					<div class="text-sm">Page Size</div>
+					<Select
+						value={pageInfo.pageSize}
+						clearable={false}
+						searchable={false}
+						options={[
+							{ value: 15, label: '15' },
+							{ value: 20, label: '20' },
+							{ value: 25, label: '25' },
+							{ value: 30, label: '30' },
+							{ value: 40, label: '40' },
+							{ value: 45, label: '45' },
+							{ value: 50, label: '50' },
+							{ value: 100, label: '100' }
+						]}
+						placeholder="15"
+						onChange={(e) => {
+							const { value } = e;
+							handlePageSize(value);
+						}}
+					/>
+				</div>
+				<div>
+					<Paginate
+						onNextPage={getMore}
+						onPreviousPage={getLess}
+						currentPage={pageInfo.currentPage}
+						totalPages={pageInfo.totalPages}
+						hasNextPage={pageInfo.hasNextPage}
+						hasPreviousPage={pageInfo.hasPrevPage}
+						recordCount={pageInfo.totalItems}
+						refresh={() => {
+							fetchData(pageNumber, { search: query });
+						}}
+						tableColumns={$allColumns}
+						bind:hiddenColumns
+					/>
+				</div>
+				<div class:hidden={!showAdd} class="shrink-0">
+					<Button onclick={addNew}>{addButtonLabel}</Button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class:custom-container={!fillSpace} class="flex h-full w-full flex-col gap-2">
+		{@render customFilter?.({
+			pageSize: pageInfo.pageSize ?? 0,
+			currentPage: pageInfo.currentPage ?? 0,
+			search: query ?? ''
+		})}
+		{#if busy}
+			<TableLoader bodySize={loadingBodySize} headerSize={loadingHeaderSize} />
+		{:else}
+			<div class="h-full w-full flex-grow overflow-y-auto">
+				<Table
+					data={tableData}
+					{headerColor}
+					bind:hiddenColumns
+					onEdit={handleEdit}
+					onView={handleView}
+					onDelete={handleDelete}
+					onRowClicked={handleRowClicked}
+					{onActionClicked}
+					handleCheckbox={(val) => {}}
+					{...otherProps}
+				/>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<Drawer
+	bind:hidden={hideForm}
+	placement="right"
+	activateClickOutside={false}
+	title={editorHeading}
+	size={modalSize}
+	onclose={closeSideModal}
+	form
+	transitionType={slide}
+	transitionParams={{
+		duration: 300,
+		axis: 'x'
+	}}
+	onaction={handleAction}
+>
+	{@render editor?.({
+		recordId: activeEntry.id,
+		data: activeEntry,
+		onChange: handleFormChange as any,
+		readonly: viewing
+	})}
+
+	{#snippet footer()}
+		{#if !viewing}
+			<Button disabled={!isValid} loading={isLoading} type="submit" class="w-full" value="submit"
+				>Submit</Button
+			>
+		{/if}
+	{/snippet}
+</Drawer>
+
+<AlertDialog
+	bind:open={showAlert}
+	message="Are you sure you want to delete this?"
+	icon="ion:trash"
+	onCancel={closeAlert}
+	busy={deleteLoading}
+	onYes={() => doDelete(activeEntry?.id)}
+/>

package/dist/ui/datatable/Datatable.svelte.d.ts

@@ -0,0 +1,5 @@
+export declare function refetchDatatable(params?: TableFilter): void;
+import { type DatatableProps, type TableFilter } from '../../index.js';
+declare const Datatable: import("svelte").Component<DatatableProps<any>, {}, "query" | "read">;
+type Datatable = ReturnType<typeof Datatable>;
+export default Datatable;

package/dist/ui/datatable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Datatable } from './Datatable.svelte';
+export { refetchDatatable } from './Datatable.svelte';

package/dist/ui/datatable/index.js

@@ -0,0 +1,2 @@
+export { default as Datatable } from './Datatable.svelte';
+export { refetchDatatable } from './Datatable.svelte';