Skip to content

Export profiles UI

Context

#703 gives the broader context in relation to integration with Lulu. For the purposes of this UI development the context is as follows:

In Ketida 2 there are currently two available export options:

A. PDF
B. Epub

The following choices are available:

  • Size (for PDF only)
  • Content (title page, copyright, and table of contents)
  • Template selection

Once the user has made these choices, a PDF or Epub can be downloaded. However if the user has the intention of creating multiple exports that have different variants of the settings above, we need a way to save these different profiles of export settings (call them export profiles). Once saved each of these profiles can be connected with a unique Lulu project external to Ketida, for distribution.

Proposal

Please see the latest prototype here with explanatory video attached, but note the description below which is the most accurate. lulu_export_settings__720p_

User Journey

  1. The user will create a book and after adding content in the producer page, will click 'Preview & Export'
  2. Since the user has never saved an export profile, they will see a default preview and the New Export sidebar as shown below. They can make changes to any of the export settings (format, size (for PDF only), content, and template) except the name because it isn't saved yet.

Screen_Shot_2023-08-18_at_13.09.24

  1. The line of templates should have a right arrow allowing you to carousel to the right to see more than the 3 templates in view (not shown in mockup or prototype above).
  2. The format and size dropdowns work as shown in the prototype above which is also here.
  3. The content dropdown should use the multiple selection as in the Ant design library here instead of the checkboxes shown in the mockup and prototype.
  4. The user can download the export they've created.
  5. The user can go back to the book as usual from the top left of the page. When they return to the export page the default values are shown again.
  6. The 'Add members' button in the top navigation bar should not be there, and can be disregarded from the mockups and prototype.
  7. The user can save their new export.
  8. Once the user clicks 'Save' a modal appears allowing them to enter the name.

Screen_Shot_2023-08-18_at_13.19.04

  1. Once the user has entered and saved their name the naming modal disappears, and they still see the same preview and sidebar, but added to the sidebar are now a) an edit button next to the name of the export, which reopens the naming modal, b) a print and publish section which includes an 'Upload to Lulu' button
  2. If the user clicks 'Upload to Lulu', they will be redirected to a flow external to our system in a new tab, and once a successful response is returned to us, the print and publish section will show information indicating that the project has been synced and allowing the user to open their Lulu project.

Screen_Shot_2023-08-18_at_13.23.37

  1. Since the user has only created one export, at every stage up to now, the dropdown of the export names should show a message 'No other exports saved yet' (not shown in mockups or prototype). The 'Create a new export profile' button is not relevant because they are in the stage of creating a new export profile.
  2. When the user clicks 'Create a new export profile' from the export names dropdown, very similarly to above, they will see a default preview and the New Export sidebar. They can make changes to any of the export settings (format, size (for PDF only), content, and template) except the name because it isn't saved yet. The process is the same as above except for point 13 because the export names dropdown now shows the already saved export profile as well.
  3. If the user now navigates away from their new export while setting it up (for example going to another already saved export via the export names dropdown), they will need to click 'Create a new export profile' again to return to creating the new profile.
  4. Once a profile has been created and synced with Lulu, if the content of the book or the settings of the export profile have been updated since the 'Upload to Lulu' was performed, the print and publish section will show information indicating that the project is out of sync, allowing them to perform a sync, and allowing them to open their Lulu project.

Screen_Shot_2023-08-18_at_13.32.16

  1. As above, if the content of the book or the settings of the export profile have been updated since the last sync to Lulu was performed, the print and publish section will show information indicating that the project is out of sync, allowing them to perform a sync again, and allowing them to open their Lulu project.
  2. The sidebar at all stages is collapsible.
  3. The preview changes whenever you switch between profiles (to show a preview using those settings) and whenever the selected profile's settings are updated.
  4. If you are viewing an existing export and go back to your book or leave the system, the next time you visit 'Preview and export' that is the export you will see, instead of the New Export sidebar which is only the default when a user doesn't have any saved exports yet.

Implementation (if applicable)

Modifications should be made:

  • https://gitlab.coko.foundation/ketida/ketida/-/blob/master/app/pages/Exporter.page.js
  • https://gitlab.coko.foundation/ketida/ketida/-/tree/master/app/ui/preview
  • For the collapsable side panel this should be used
  • For the custom dropdown this should be used
  • For the multiple select this
  • For the template selection area this
  • For icons antd/icons should be used and more specifically the following <MenuFoldOutlined />, <MenuUnfoldOutlined />, <DownloadOutlined />, <DeleteOutlined />, <EditOutlined />. Check this
  • The modal implementation for changing the display name of a profile, should be similar to this
  • When a use selects a profile from the dropdown then this should be stored in browser's local storage (this info should be associated with the bookId and userId)
  • When changes to a selected profile are made but the user forgets to save them, when clicking on something that will take him away from that page then a modal should appear informing him that changes will be lost if not saved.
  • The buttons for Upload to Lulu and Sync with Lulu should utilize the loading attribute as defined here. If the operation is successful then the info should be placed to the relevant area e.g. the successful action of Upload to Lulu will return the the corresponding project id witch will be displayed as presented in the wireframes. If any errors occur then a error modal with a user friendly info should be presented instead
  • The button of Open Lulu project will trigger a new browser tab with a certain URL
  • The button of Connect to Lulu will trigger a new browser window which will provide the SSO functionality

As a general comment if something is missing on the data layer (e.g. Exporter.page.js) then a mock function should be created which will be replaced when the actual query will be implemented.

Alternative approaches (if applicable)

Edited by Alexandros Georgantas