From a4906eac64a73191aa3a9ae4c79a965025ad960a Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Sun, 20 Feb 2022 19:29:14 +0100
Subject: [PATCH] feat(workbench): Show page count on layout

---
 .../freesewing.shared/components/icons/print.js  |  7 +++++++
 .../components/workbench/layout/print/index.js   |  2 +-
 .../components/workbench/layout/print/plugin.js  |  3 ++-
 .../workbench/layout/print/settings.js           | 16 ++++++++++++++--
 4 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 packages/freesewing.shared/components/icons/print.js

diff --git a/packages/freesewing.shared/components/icons/print.js b/packages/freesewing.shared/components/icons/print.js
new file mode 100644
index 00000000000..835644cf9e1
--- /dev/null
+++ b/packages/freesewing.shared/components/icons/print.js
@@ -0,0 +1,7 @@
+const PrintIcon = props => (
+  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+  </svg>
+)
+
+export default PrintIcon
diff --git a/packages/freesewing.shared/components/workbench/layout/print/index.js b/packages/freesewing.shared/components/workbench/layout/print/index.js
index 2e39cb1e498..6979f940671 100644
--- a/packages/freesewing.shared/components/workbench/layout/print/index.js
+++ b/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}
diff --git a/packages/freesewing.shared/components/workbench/layout/print/plugin.js b/packages/freesewing.shared/components/workbench/layout/print/plugin.js
index f95af82525c..c947efcd6e2 100644
--- a/packages/freesewing.shared/components/workbench/layout/print/plugin.js
+++ b/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 }
     }
   }
 })
diff --git a/packages/freesewing.shared/components/workbench/layout/print/settings.js b/packages/freesewing.shared/components/workbench/layout/print/settings.js
index f7c82d616ce..10b197dad4e 100644
--- a/packages/freesewing.shared/components/workbench/layout/print/settings.js
+++ b/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>
   )
 }