From 8b89745ad5f2b4e2536fd5648738806c22e9472a Mon Sep 17 00:00:00 2001
From: PrabalSingh <praba170107045@iitg.ac.in>
Date: Fri, 24 Jul 2020 19:58:23 +0530
Subject: [PATCH 1/2] feat: customize height and width of the certificate

---
 frontend/components/layouts/LayoutEditor.js | 34 ++++++++++++++++-----
 src/plugins/worker/handlers.js              |  4 +--
 src/services/layouts/schema.js              | 32 +++++++++++++++++--
 3 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/frontend/components/layouts/LayoutEditor.js b/frontend/components/layouts/LayoutEditor.js
index 875cb5d..a1214b8 100644
--- a/frontend/components/layouts/LayoutEditor.js
+++ b/frontend/components/layouts/LayoutEditor.js
@@ -6,7 +6,13 @@ import { updateLayout, createLayout } from '~/store/actions/layouts';
 export default props => {
   const { layout } = props
   const dispatch = useDispatch()
-  const [editingLayout, setEditingLayout] = React.useState({ name: layout.name, content: layout.content, params: layout.params })
+  const [editingLayout, setEditingLayout] = React.useState({
+    name: layout.name,
+    content: layout.content,
+    params: layout.params,
+    height: layout.height ? layout.height : 408,
+    width: layout.width ? layout.width : 842
+  })
   const [loading, setLoading] = React.useState(false)
 
   const saveLayout = async () => {
@@ -29,15 +35,29 @@ export default props => {
     <div>
       <div className='container'>
         <div className='row'>
-          <div className='d-flex pl-0 col-12 col-md-6 col-lg-4 input-group align-items-center'>
+          <div className='d-flex pl-0 col-12 col-md-5 input-group align-items-center'>
             <label>Template Name: </label>
-            <input 
-              className='input-text'
-              value={editingLayout.name} 
+            <input
+              className='input-text col-lg-4'
+              value={editingLayout.name}
               onChange={e => setEditingLayout({ ...editingLayout, name: e.target.value})} 
             />
+            <label>Width</label>
+            <input
+                className='input-text col-lg-2'
+                type='number'
+                value={editingLayout.width}
+                onChange={e => setEditingLayout({ ...editingLayout, width: e.target.value})}
+            />
+            <label>Height</label>
+            <input
+                className='input-text col-lg-2'
+                type='number'
+                value={editingLayout.height}
+                onChange={e => setEditingLayout({ ...editingLayout, height: e.target.value})}
+            />
           </div>
-          <div className='d-flex col-12 col-md-6 col-lg-4 justify-content-center'>
+          <div className='d-flex col-12 col-md-4 col-lg-1 justify-content-center'>
             <button className='button-solid' disabled={loading} onClick={saveLayout}>
               {loading ? 'Saving' : 'Save'}
             </button>
@@ -55,7 +75,7 @@ export default props => {
           />
         </div>
         <div className='col-6'>
-          <iframe srcDoc={editingLayout.content} className='w-100' style={{ height: '75vh' }}>
+          <iframe srcDoc={editingLayout.content} width={editingLayout.width} height={editingLayout.height}>
           </iframe>
         </div>
       </div>
diff --git a/src/plugins/worker/handlers.js b/src/plugins/worker/handlers.js
index f41190a..93c756e 100644
--- a/src/plugins/worker/handlers.js
+++ b/src/plugins/worker/handlers.js
@@ -79,8 +79,8 @@ module.exports = {
       template: layout.content,
       context: data.substitutions,
       options: {
-        height: '408px', 
-        width: '842px',
+        height: layout.height ? `${layout.height}px` :'408px',
+        width: layout.width ? `${layout.width}px` : '842px',
         printBackground: true,
         path: outPath  
       }
diff --git a/src/services/layouts/schema.js b/src/services/layouts/schema.js
index 34cd91d..394370a 100644
--- a/src/services/layouts/schema.js
+++ b/src/services/layouts/schema.js
@@ -1,8 +1,12 @@
 module.exports = {
   GET: {
     querystring: {
-      offset: {type: 'number'},
-      limit: {type: 'number'}
+      offset: {
+        type: 'number'
+      },
+      limit: {
+        type: 'number'
+      }
     }
   },
   GETById: {
@@ -32,6 +36,12 @@ module.exports = {
         },
         content: {
           type: 'string'
+        },
+        height: {
+          type: 'number'
+        },
+        width: {
+          type: 'number'
         }
       }
     },
@@ -56,6 +66,12 @@ module.exports = {
               },
               content: {
                 type: 'string'
+              },
+              height: {
+                type: 'number'
+              },
+              width: {
+                type: 'number'
               }
             }
           }
@@ -79,6 +95,12 @@ module.exports = {
         },
         content: {
           type: 'string'
+        },
+        height: {
+          type: 'number'
+        },
+        width: {
+          type: 'number'
         }
       }
     },
@@ -103,6 +125,12 @@ module.exports = {
               },
               content: {
                 type: 'string'
+              },
+              height: {
+                type: 'number'
+              },
+              width: {
+                type: 'number'
               }
             }
           }

From 69cbaab6740e488c7a2e7520a23740ae2b3eb811 Mon Sep 17 00:00:00 2001
From: PrabalSingh <praba170107045@iitg.ac.in>
Date: Sat, 25 Jul 2020 13:15:11 +0530
Subject: [PATCH 2/2] LayoutEditor-Preview: set a fixed width and adjust height
 according to the aspect ratio

---
 frontend/components/layouts/LayoutEditor.js | 10 +++++-----
 src/plugins/worker/handlers.js              |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/components/layouts/LayoutEditor.js b/frontend/components/layouts/LayoutEditor.js
index a1214b8..6984e94 100644
--- a/frontend/components/layouts/LayoutEditor.js
+++ b/frontend/components/layouts/LayoutEditor.js
@@ -10,8 +10,8 @@ export default props => {
     name: layout.name,
     content: layout.content,
     params: layout.params,
-    height: layout.height ? layout.height : 408,
-    width: layout.width ? layout.width : 842
+    height: layout.height || 408,
+    width: layout.width || 842
   })
   const [loading, setLoading] = React.useState(false)
 
@@ -42,14 +42,14 @@ export default props => {
               value={editingLayout.name}
               onChange={e => setEditingLayout({ ...editingLayout, name: e.target.value})} 
             />
-            <label>Width</label>
+            <label className='ml-2'>Width:&nbsp;</label>
             <input
                 className='input-text col-lg-2'
                 type='number'
                 value={editingLayout.width}
                 onChange={e => setEditingLayout({ ...editingLayout, width: e.target.value})}
             />
-            <label>Height</label>
+            <label className='ml-2'>Height:&nbsp;</label>
             <input
                 className='input-text col-lg-2'
                 type='number'
@@ -75,7 +75,7 @@ export default props => {
           />
         </div>
         <div className='col-6'>
-          <iframe srcDoc={editingLayout.content} width={editingLayout.width} height={editingLayout.height}>
+          <iframe srcDoc={editingLayout.content} className='w-100' style={{height: `${50*editingLayout.height/editingLayout.width}vw`}}>
           </iframe>
         </div>
       </div>
diff --git a/src/plugins/worker/handlers.js b/src/plugins/worker/handlers.js
index 93c756e..0048e67 100644
--- a/src/plugins/worker/handlers.js
+++ b/src/plugins/worker/handlers.js
@@ -79,8 +79,8 @@ module.exports = {
       template: layout.content,
       context: data.substitutions,
       options: {
-        height: layout.height ? `${layout.height}px` :'408px',
-        width: layout.width ? `${layout.width}px` : '842px',
+        height: `${+layout.height || 408}px`,
+        width: `${+layout.width || 842}px`,
         printBackground: true,
         path: outPath  
       }