implement export view in new UI

packages/i18n/src/locales/en/app.yaml

@@ -77,7 +77,6 @@ dragAndDropImageHere: Drag and drop an image here, or select one manually with t
 emailAddress: E-mail address
 emailWorksToo: "If you don't know your username, you can also use your E-mail address to login"
 enterEmailPickPassword: Enter your E-mail address, and pick a password
-export: Export
 exportTiledPDF: Export tiled PDF
 faq: Frequently asked questions
 fieldRemoved: '{field} removed'
@@ -260,8 +259,6 @@ recreate: Recreate
 recreateThing: Recreate {thing}
 recreateThingForPerson: Recreate {thing} for {person}
 seeYouLaterUser: See you later {user}
-exportForPrinting: Export for printing
-exportForEditing: Export for editing
 startWithNeckTitle: Start with the neck circumference
 startWithNeckDescription: Based on your neck circumference, we can help you spot mistakes in your measurements.
 whatYouNeed: What you need
@@ -275,7 +272,6 @@ loadingMagic: We are loading the magic
 estimate: Estimate
 actual: Actual
 weEstimateYM2B: 'We estimate your {measurement} to be around:'
-exportAsData: Export as data
 availablePatterns: Available patterns
 browseCollection: Browse collection
 browseYourPatterns: Browse your patterns
@@ -307,9 +303,7 @@ cloneDescription: Recreate an exact copy, using the measurements of the original
 furtherReading: Further reading
 saveAsNewPattern: Save As New Pattern
 saveAsNewPattern-txt: Store (a copy of) this pattern in your FreeSewing account
-exportPattern: Export pattern
 printPattern: Print pattern
-exportPattern-txt: Export a PDF suitable for your printer, or download this pattern in a variety of formats
 editThing: 'Edit {thing}'
 editPattern-txt: Load this pattern in the pattern editor
 featureRequiresAccount: This feature requires a FreeSewing account

sites/shared/components/workbench/exporting/export-handler.mjs

@@ -16,7 +16,7 @@ import get from 'lodash.get'
 
 export const ns = ['cut', 'plugin', 'common']
 export const exportTypes = {
-  exportForPrinting: ['a4', 'a3', 'a2', 'a1', 'a0', 'letter', 'tabloid'],
+  exportForPrinting: ['a4', 'a3', 'a2', 'a1', 'a0', 'letter', 'legal', 'tabloid'],
   exportForEditing: ['svg', 'pdf'],
   exportAsData: ['json', 'yaml', 'github gist'],
 }
@@ -191,13 +191,13 @@ export const handleExport = async ({
       if (format !== 'svg' && pageSettings.cutlist) {
         workerArgs.cutLayouts = generateCutLayouts(pattern, Design, settings, format, t, ui)
       }
-
-      // post a message to the worker with all needed data
-      worker.postMessage(workerArgs)
     } catch (err) {
       console.log(err)
       if (typeof stopLoading === 'function') stopLoading()
       onError && onError(err)
     }
   }
+
+  // post a message to the worker with all needed data
+  worker.postMessage(workerArgs)
 }

sites/shared/components/workbench/index.mjs

@@ -12,12 +12,13 @@ import { WorkbenchHeader } from './header.mjs'
 import { ErrorView } from 'shared/components/error/view.mjs'
 import { ModalSpinner } from 'shared/components/modal/spinner.mjs'
 // Views
-import { DraftView, ns as draftNs } from 'shared/components/workbench/views/draft/index.mjs'
-import { SaveView, ns as saveNs } from 'shared/components/workbench/views/save/index.mjs'
-import { PrintView, ns as printNs } from 'shared/components/workbench/views/print/index.mjs'
-import { CutView, ns as cutNs } from 'shared/components/workbench/views/cut/index.mjs'
+import { DraftView, ns as draftNs } from './views/draft/index.mjs'
+import { SaveView, ns as saveNs } from './views/save/index.mjs'
+import { PrintView, ns as printNs } from './views/print/index.mjs'
+import { CutView, ns as cutNs } from './views/cut/index.mjs'
+import { ExportView, ns as exportNs } from './views/exporting/index.mjs'
 
-export const ns = ['account', 'workbench', ...draftNs, ...saveNs, ...printNs, ...cutNs]
+export const ns = ['account', 'workbench', ...draftNs, ...saveNs, ...printNs, ...cutNs, ...exportNs]
 
 const defaultUi = {
   renderer: 'react',
@@ -27,6 +28,7 @@ const views = {
   draft: DraftView,
   print: PrintView,
   cut: CutView,
+  export: ExportView,
 }
 
 const draftViews = ['draft', 'test']
@@ -86,6 +88,9 @@ export const Workbench = ({ design, Design, baseSettings, DynamicDocs, from }) =
     case 'save':
       viewContent = <SaveView {...viewProps} from={from} />
       break
+    case 'export':
+      viewContent = <ExportView {...viewProps} />
+      break
     default: {
       const layout = ui.layouts?.[view] || settings.layout || true
       // Generate the pattern here so we can pass it down to both the view and the options menu

sites/shared/components/workbench/views/exporting/exporting.en.yaml

@@ -0,0 +1,6 @@
+export: Export
+exportForPrinting: Export for printing
+exportForEditing: Export for editing
+exportAsData: Export as data
+exportPattern-txt: Export a PDF suitable for your printer, or download this pattern in a variety of formats
+exportPattern: Export pattern

sites/shared/components/workbench/views/exporting/index.mjs

@@ -1,40 +1,50 @@
-import { useState } from 'react'
+import { useState, useContext } from 'react'
 import { useTranslation } from 'next-i18next'
 import { Popout } from 'shared/components/popout.mjs'
 import { WebLink } from 'shared/components/web-link.mjs'
-import { exportTypes, handleExport } from './export-handler.mjs'
+import { LoadingContext } from 'shared/context/loading-context.mjs'
+import { useToast } from 'shared/hooks/use-toast.mjs'
+import {
+  exportTypes,
+  handleExport,
+  ns as exportNs,
+} from 'shared/components/workbench/exporting/export-handler.mjs'
 
-export const ExportDraft = ({ gist, design, app }) => {
+export const ns = ['exporting', exportNs]
+
+export const ExportView = ({ settings, ui, design, Design }) => {
   const [link, setLink] = useState(false)
-  const [error, setError] = useState(false)
   const [format, setFormat] = useState(false)
+  const { loading, startLoading, stopLoading } = useContext(LoadingContext)
+  const toast = useToast()
 
-  const { t } = useTranslation(['app', 'plugin'])
+  const { t } = useTranslation(ns)
   const doExport = (format) => {
     setLink(false)
     setError(false)
     setFormat(format)
-    // handleExport(
-    //   format,
-    //   gist,
-    //   design,
-    //   t,
-    //   app,
-    //   (e) => {
-    //     if (e.data.link) {
-    //       setLink(e.data.link)
-    //     }
-    //   },
-    //   (e) => {
-    //     if (e.data?.error) {
-    //       setError(true)
-    //     }
-    //   }
-    // )
+    handleExport({
+      format,
+      settings,
+      design,
+      t,
+      Design,
+      ui,
+      startLoading,
+      stopLoading,
+      onComplete: (e) => {
+        if (e.data.link) {
+          setLink(e.data.link)
+        }
+      },
+      onError: (e) => {
+        if (e.data?.error) toast.error(e.data.error.message)
+      },
+    })
   }
 
   return (
-    <div className="max-w-screen-xl m-auto">
+    <div className="max-w-screen-xl m-auto py-8">
       <h2>{t('export')}</h2>
       <p className="text-lg sm:text-xl">{t('exportPattern-txt')}</p>
       {link && (
@@ -43,12 +53,6 @@ export const ExportDraft = ({ gist, design, app }) => {
           <WebLink href={link} txt={link} />
         </Popout>
       )}
-      {error && (
-        <Popout warning compact>
-          <span className="font-bold mr-4 uppercase text-sm">{t('error')}:</span>
-          {t('somethingWentWrong')}
-        </Popout>
-      )}
       <div className="flex flex-row flex-wrap gap-8">
         {Object.keys(exportTypes).map((type) => (
           <div key={type} className="flex flex-col gap-2 w-full sm:w-auto">