Merge pull request #29 from prabalsingh24/master

feat: customize height and width of the certificate
coding-blocks · Jul 28, 2020 · 818d5ba · 818d5ba
2 parents bb9b075 + c31a497
commit 818d5ba
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 12 deletions.
diff --git 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 || 408,
+    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 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 className='ml-2'>Height:&nbsp;</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} 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
@@ -79,8 +79,8 @@ module.exports = {
       template: layout.content,
       context: data.substitutions,
       options: {
-        height: '408px', 
-        width: '842px',
+        height: `${+layout.height || 408}px`,
+        width: `${+layout.width || 842}px`,
         printBackground: true,
         path: outPath  
       }

diff --git a/src/services/layouts/schema.js b/src/services/layouts/schema.js
@@ -1,9 +1,15 @@
 module.exports = {
   GET: {
     querystring: {
-      q: {type: 'string'},
-      offset: {type: 'number'},
-      limit: {type: 'number'}
+      q: {
+        type: 'string'
+      },
+      offset: {
+        type: 'number'
+      },
+      limit: {
+        type: 'number'
+      }
     }
   },
   GETById: {
@@ -33,6 +39,12 @@ module.exports = {
         },
         content: {
           type: 'string'
+        },
+        height: {
+          type: 'number'
+        },
+        width: {
+          type: 'number'
         }
       }
     },
@@ -57,6 +69,12 @@ module.exports = {
               },
               content: {
                 type: 'string'
+              },
+              height: {
+                type: 'number'
+              },
+              width: {
+                type: 'number'
               }
             }
           }
@@ -80,6 +98,12 @@ module.exports = {
         },
         content: {
           type: 'string'
+        },
+        height: {
+          type: 'number'
+        },
+        width: {
+          type: 'number'
         }
       }
     },
@@ -104,6 +128,12 @@ module.exports = {
               },
               content: {
                 type: 'string'
+              },
+              height: {
+                type: 'number'
+              },
+              width: {
+                type: 'number'
               }
             }
           }