Print

[usu]

Requirements

• Handle page break reasonably
• Links should be working (ToC)
• Features in Future
• Good UX
• Perfomance on mobile
• Not to many tech stacks
• Comprehensive frameworks
• Beautiful pdfs
• Text should be selectable and copyable

Proposals: #2301 & #1924

Nuxt + Paged.js open issues

Tech

• Add browserless container or browserless.io to the deployment
• Verify if we want to use browserless container for deployment
• Investigate the best option for fonts
• Investigate queue behaviour on deployment: What happens when the queue is full? Can we autoscale the pod up to more instances? -> solved with nodejs
• Use a read-only TipTap or an html parser instead of v-html for rendering rich text fields
• Tailwind resets all HTML styles. For rendering Richtext, need to add some styles again - either manually or with typography plugin
• Harmonize ESLint / Prettier code style in print with the ESLint style in frontend
• Check if sentry still works (both for Nuxt & server middleware?)
• Throttle preview loading on changing config (in case preview is going to be available in production) preview removed from production
• nuxt print: Send config as POST-parameter #5065
• Optional: Replace v-calendar with a self-made picasso print component, and remove vuetify from print chore(print): replace vuetify calendar #3887
• Optional: Add tailwind as a CSS framework

Features

• Content
  • Deckblatt
  • Inhaltsverzeichnis
  • Picasso mit Tageschef
  • Roter Faden
  • print: Print day overview #5066
  • Komplettes Programm
  • Einzelaktivität Print single activity #1338
  • print: SafetyConcept overview #5067
• Check translation (which language is chosen)
• Overall styling + Footer + Header
• Links within PDF
  • TOC
  • Picasso zu event (attention: event could appear multiple times)
  • Tagesübersicht zu Event (in print: SafetyConcept overview #5067)
• Render the preview in the user's current UI language

Bugs

• ERROR activityResponsible.campCollaboration(...).user is not a function (non-accepted invitation). Consider property displayName on campCollaboration to avoid logic duplication in frontend/print
  fix(print): activityResponsible.campCollaboration(...).user is not a function #2579
• build(nuxt) in pdfGenerator.js doesn't include tailwind styles (only relevant for dev environment)
  chore(print): remove @nuxtjs/tailwindcss package and install tailwind manually #2652

React PDF open issues

Tech

• Broken on prod, because data is supposedly missing in the store? But that exact data is present in the fetched API response...
• Merge POC: printing with react-pdf #1924
• Can we do better than re-implement small read-only versions of hal-json-vuex and vue-i18n?
  • If we upgrade to vue-i18n v9, I think this will be possible: It has much better separation of concerns, and we should be able to instantiate vue-i18n without adding it to a Vue instance. But vue-i18n v9 only supports Vue 3... By using only the core library, Vue is not needed. Print react improvements #2478
  • For hal-json-vuex, maybe now the time has come to re-write that from scratch in Typescript, with similarly better separation of concerns?
• Fix the console errors about requestAnimationFrame when using the web worker in Firefox Print react improvements #2478
• Vite does not recompile the worker file, or does not correctly invalidate cache for it. May be due to vite-plugin-worker, or maybe we just need to add a custom hot reloading handler? Client-side printing with Vue #3532
• Vite warning during build: "Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification" - was fixed in upgrade yoga-layout to latest version  diegomura/react-pdf#2105
• Can't import named exports in jsx files: Print react improvements #2478

   // does not work
  import { sortBy } from 'lodash'
  // works
  import lodash from 'lodash'
  const { sortBy } = lodash

• Console log does not show up from worker (Chrome has a separate console for worker logs I think, but Firefox does not) In the Firefox JS console, at the bottom right there is a Dropdown menu saying "Top" by default, which can be used to view web worker logs
• Sentry in web worker - apparently this just works, at least we are getting sentry issues from dev: https://sentry.io/organizations/ecamp/issues/3035369131. But further improvements in Print react improvements #2478
• Fix sentry when errors are returned from worker
• Contribute globalWorkerShim.js to exogee-technology/vite-plugin-shim-react-pdf Enable usage of react-pdf inside a web worker exogee-technology/vite-plugin-shim-react-pdf#3 Print react improvements #2478
• Test performance on Android, web workers are reportedly slow to start there. Depending on the outcome, consider the following options:
  • client-print: reuse worker #5068
  • Render on the server side in a node.js service. But this would lose us many of the advantages of client-side rendering: New solutions for authentication, API access, i18n, storage, worker queues etc. would become necessary again then.
• The vite dev server sometimes crashes with out of memory when exchanging the root react component or some other large imports?
• Duplicate smarter API reloading for print-react

Features

• Better "progress" indicators Print react improvements #2478
• print: progress indicators and feedback for errors #5069
• Display rendering errors in LocalPdfDownloadButton and LocalPrintPreview to the user Print react improvements #2478
• Respect the print config (checkboxes) and adapt data fetching and output filename depending on the print config Print react improvements #2478
• Link to schedule entry detail when clicking a schedule entry in picasso Client-side printing with Vue #3532
• print: Auto-switch picasso between landscape and portrait, depending on duration #5070
• Auto-split picasso (when longer than 9 days?)
• Use a read-only React tiptap editor for rendering rich text fields parse the RichText HTML and render that Client-side printing with Vue #3532

Not in MVP

• Notizpapier (ecamp2)
• PDF upload (ecamp2)

[manuelmeister]

Meeting Notes

[carlobeltrame]

Übrigens, als Tipp beim Entwickeln der Print Preview: Die Firefox Dev Tools haben einen print simulations Modus, in dem man @media(print) simulieren kann.

[pmattmann]

MVP wird ja vermutlich nur mit "Vorschau und selber PDF erstellen" sein.
Falls ein Ausbau gemacht wird, möchte ich gerne folgende Alternative geprüft haben:

• https://cloudconvert.com/

Statt Worker-Queue und Print-Enginge selber betreuen, kann dies günstig eingekauft werden.
(~ 1 Cent pro PDF)

[carlobeltrame]

Eine weitere Alternative die es zu bedenken gibt: PDF direkt clientseitig generieren, mit einer eingebetteten React-Komponente die das kann: #1924

[manuelmeister]

Core Meeting Variantenentscheid

Haupt Risiken

Pagedjs #2021 (comment)

• Umbrüche mit Mehrspaltenlayout
• Keine Instant Previews
• Schriftensupport?

React PDF #2023 (comment)

• Rendern auf Client (Mobile)
• Reduced CSS set
• Zusätzlicher Framework Stack

Entscheidung

• Wir gehen mit beiden Varianten parallel
• Einschränkungen der Benutzerfunktionalität sind auch noch später möglich (zB bei Pagedjs Storyboard nicht in einem Mehrspalten-Layout)
• Vorschlag eines sinnvollen Benutzerflows / UI

Nuxt+Pagedjs: @usu
ReactPDF: @carlobeltrame

[BacLuc]

Not implemented features are tracked in new issues

[manuelmeister]

@BacLuc which ones?

[BacLuc]

e.g.

• client-print: reuse worker #5068
• print: Print day overview #5066
• print: SafetyConcept overview #5067
• print: progress indicators and feedback for errors #5069