@isoftdata/svelte-report-job-modal

Svelte ReportJobModal

This component is a modal for selecting a report, and printing, emailing, and previewing said report.

You should use it by calling the component's open or prompt method with a print job or array of print jobs, and any options that may apply.

Install

pnpm i @isoftdata/svelte-report-job-modal

Breaking changes

2.0.0

• Require Svelte 5
• Events -> Callbacks

Props

Name	Type	Description	Default Value
favoriteReportNames	Array<string>	Array of favorite report names. Clicking on the star icon in the modal will add to/subtract from this list.	[]
showPrint	boolean	Whether to show the print option	true
showEmail	boolean	Whether to show the email option	true
showPreview	boolean	Whether to show the preview option	true
showFavoriteButton	boolean	Whether to show the favorite report button	true
loadReports	(reportType: string) => Promise<Array<Report>>	Function to load reports based on the report type. Returns a Promise that resolves to a Report	Required
loadPrinters	(reportType: string) => Promise<Array<Printer>>	Function to load printers based on the report type. Returns a Promise that resolves to a Printer	Required
loadDefaultPrinter	(reportType: string) => Promise<string>	Function to load the default printer name based on the report type	Required
generatePdfPreview	(args: { id: number; name: string; type: string; parameters: Record<string, string> }) => Promise<{ data: string; mimeType: string; }>	Function to generate a PDF preview for a report	Required
saveReportJobs	(printJobs: Array<ReportJob>) => Promise<void>	Function to save report jobs. Takes an array of ReportJobs as input.	Required
savePrinterPreference	(printerName: string, reportType: string) => Promise<void>	Function to save the printer preference for a report type	Required

Callbacks

• confirm - Called when "Print" or "Email" is clicked
  • single argument is the action that was taken - either EMAIL or PRINT
• close - Called when either "Cancel" or "x" is clicked

Methods

• open - Opens the modal with a print job or array of print jobs, and any options that may apply. Takes the following arguments:
  • printJobOrJobs - A ReportJob or array of ReportJobs to print/email/preview
  • options - An object with the following optional properties:

export type OpenOptions = {
	emails?: Array<string>
	disablePrintQuantity?: boolean
	showPrint?: boolean
	showEmail?: boolean
	showPreview?: boolean
	showFavoriteButton?: boolean
}

• prompt(...args: Parameters<typeof open>) => Promise<boolean> - Accepts the exact same arguments as the open method. This method opens the modal and returns a promise that resolves once the user has completed their work. Return is true if the Print/Download/Email button is clicked, or false if the modal is closed/cancelled.

Types

There's some types you might need to use. They're declared at the top of ReportJobModal.svelte

Report

export type Report = {
	id: number
	type: string
	name: string
}

Printer

export type Printer = {
	name: string
	displayName?: string | null
	reportType?: string | null
}

ReportJob

export type ReportJob = {
	reportId?: number
	type: string
	name: string
	quantity: number
	sourceType: 'CRYSTAL' | 'QUERY'
	destinationType: 'DIRECTORY' | 'EMAIL' | 'EMAILCSV' | 'PRINTER'
	destination: string
	parameters: Record<string, string>
	// email
	title?: string
	emailBcc?: string
	emailSubject?: string
	emailBody?: string
	emailFrom?: string
}

Example

<script lang="ts">
	import ReportJobModal from '@isoftdata/svelte-report-job-modal'

	let reportJobModal: ReportJobModal

	function print() {
		reportJobModal.open({
			type: 'Work Order',
			parameters: {
				workorderid: '29760',
			},
		})
	}
</script>

<Button
	class="w-100"
	iconClass="print"
	on:click={() => print()}>Print</Button
>

<ReportJobModal
	loadReports={reportType => Promise.resolve(reports.filter(report => report.type === reportType))}
	loadPrinters={() => Promise.resolve(printers)}
	loadDefaultPrinter={() => Promise.resolve(printers[0].name)}
	saveReportJobs={() => Promise.resolve()}
	savePrinterPreference={() => Promise.resolve()}
	{generatePdfPreview}
	bind:favoriteReportNames
	bind:this={reportJobModal}
	close={() => console.log('close')}
	confirm={type => console.log(type)}
></ReportJobModal>