feat(workbench): Show page count on layout

packages/freesewing.shared/components/workbench/layout/print/index.js

@@ -43,7 +43,7 @@ const PrintLayout = props => {
         }
       </h2>
       <div className="m-4">
-        <Settings {...props} />
+        <Settings {...props} draft={draft}/>
       </div>
       <Draft
         draft={draft}

packages/freesewing.shared/components/workbench/layout/print/plugin.js

@@ -68,7 +68,8 @@ const pagesPlugin = (size='a4', orientation='portrait') => ({
         }
         y += h
       }
-      this.pages = { cols, rows, count: (cols+1)*(rows+1) }
+      // Store page count in part
+      this.pages = { cols, rows, count: cols*rows }
     }
   }
 })

packages/freesewing.shared/components/workbench/layout/print/settings.js

@@ -1,18 +1,30 @@
 import { useTranslation } from 'next-i18next'
 import PageSizePicker from './pagesize-picker'
 import OrientationPicker from './orientation-picker'
+import PrintIcon from 'shared/components/icons/print'
+import RightIcon from 'shared/components/icons/right'
 
 const PrintLayoutSettings = props => {
   const settingsProps = {
     gist: props.gist,
     updateGist: props.updateGist
   }
+  const { cols, rows, count } = props.draft.parts.pages.pages
 
   return (
-    <div className="flex flex-row gap-4 justify-center">
+    <div className="flex flex-row gap-8 justify-center">
       <PageSizePicker {...props} />
       <OrientationPicker {...props} />
-      <pre>{JSON.stringify(props.gist, null ,2)}</pre>
+      <div className="flex flex-row font-bold items-center px-0 text-xl">
+        <PrintIcon />
+        <span className="ml-2">{count}</span>
+        <span className="mx-6 opacity-50">|</span>
+        <RightIcon />
+        <span className="ml-2">{cols}</span>
+        <span className="mx-6 opacity-50">|</span>
+        <div className="rotate-90"><RightIcon /></div>
+        <span className="text-xl ml-2">{rows}</span>
+      </div>
     </div>
   )
 }