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>