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

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

Features

• Content
  • [x] Deckblatt
  • [x] Inhaltsverzeichnis
  • [x] Picasso mit Tageschef
  • [x] Roter Faden
  • [ ] Tagesübersicht
  • [x] Komplettes Programm
  • [x] Einzelaktivität #1338
  • [ ] (Siko-Übersicht)
• [x] Check translation (which language is chosen)
• [ ] Overall styling + Footer + Header
• [ ] Links within PDF
  • [x] TOC
  • [x] Picasso zu event (attention: event could appear multiple times)
  • [ ] Tagesübersicht zu Event
• [x] Render the preview in the user's current UI language

Bugs

• [x] ERROR activityResponsible.campCollaboration(...).user is not a function (non-accepted invitation). Consider property displayName on campCollaboration to avoid logic duplication in frontend/print #2579
• [x] build(nuxt) in pdfGenerator.js doesn't include tailwind styles (only relevant for dev environment) #2652

React PDF open issues

Tech

• [x] Broken on prod, because data is supposedly missing in the store? But that exact data is present in the fetched API response...
• [x] Merge #1924
• Can we do better than re-implement small read-only versions of hal-json-vuex and vue-i18n?
  • [x] 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. #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?
• [x] Fix the console errors about requestAnimationFrame when using the web worker in Firefox #2478
• [x] 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? #3532
• [x] Vite warning during build: "Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification" - was fixed in diegomura/react-pdf#2105
• [x] Can't import named exports in jsx files: #2478

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

• [x] 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
• [x] 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 #2478
• [ ] Fix sentry when errors are returned from worker
• [x] Contribute globalWorkerShim.js to exogee-technology/vite-plugin-shim-react-pdf https://github.com/exogee-technology/vite-plugin-shim-react-pdf/pull/3 #2478
• [ ] Test performance on Android, web workers are reportedly slow to start there. Depending on the outcome, consider the following options:
  • [ ] Start only one worker and re-use it, instead of starting a new worker for every PDF? https://medium.com/teads-engineering/the-most-accurate-way-to-schedule-a-function-in-a-web-browser-eadcd164da12#46e1
  • [ ] 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?
• [x] Duplicate smarter API reloading for print-react

Features

• [x] Better "progress" indicators #2478
• [ ] Even better progress indicators including messages about loading data and rendering pdf, maybe with estimates on how long each will take on a typical device?
• [x] Display rendering errors in LocalPdfDownloadButton and LocalPrintPreview to the user #2478
• [x] Respect the print config (checkboxes) and adapt data fetching and output filename depending on the print config #2478
• [x] Link to schedule entry detail when clicking a schedule entry in picasso #3532
• [ ] Auto-switch picasso between landscape and portrait, depending on duration
• [x] Auto-split picasso (when longer than 9 days?)
• [x] ~~Use a read-only React tiptap editor for rendering rich text fields~~ parse the RichText HTML and render that #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 https://github.com/ecamp/ecamp3/issues/2021#issuecomment-1025886295

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

React PDF https://github.com/ecamp/ecamp3/issues/2023#issuecomment-1017807837

• 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.

• https://github.com/ecamp/ecamp3/issues/5068
• https://github.com/ecamp/ecamp3/issues/5066
• https://github.com/ecamp/ecamp3/issues/5067
• https://github.com/ecamp/ecamp3/issues/5069