Fixed bugs and added align center

README.md

@@ -2,7 +2,7 @@
 
 ## Project setup
 
-1. Install npm
+1. Install npm (My npm version is 6.14.15)
   Please refer to this [guide](https://phoenixnap.com/kb/install-node-js-npm-on-windows).
 
 2. Download this repository / folder
@@ -46,6 +46,8 @@ npm install
 npm run electron:serve
 ```
 
+**Note: sometimes all inputs are unresponsive, then you need to click select file from email tab and click cancel.**
+
 ![image](https://user-images.githubusercontent.com/55322546/136893827-ccb22f22-6d89-41fd-b259-80f57e80683c.png)
 
 ## App features
@@ -57,8 +59,9 @@ npm run electron:serve
 
   ![image](https://user-images.githubusercontent.com/55322546/136894958-1703f309-d9d6-47df-8878-c89e8651c637.png)
 
-  - Select a csv file, if you wish to, you can change the separator
+  - Select a csv file, if you wish to, ~~you can change the separator~~
   - Select the people whom you wish to email to
+  - Remember not to select any empty rows at the end if there are any
 
   ![image](https://user-images.githubusercontent.com/55322546/136895028-20437009-aba3-4abd-a836-4647eea96497.png)
 
@@ -90,7 +93,12 @@ npm run electron:serve
   - Sometimes if the pdf is not updating, click any of the slider.
   - Due to unknown issue, the fonts are kinda above 0, so you must set Y to bigger than 0 to start seeing the words
   - The words in the file will be replaced with name column as specified in email setting
+  - You can set align center to true, then the X position will be used as the center of the texts. 
+  - Note: Sometimes the cert will be unresponsive, then you need to drag the X & Y slider and you'll see
+the preview being updated.
 
 <hr>
 
+
+
 * This app is made for APAC, but is free to be used & adapted by others.

design.json

@@ -1 +1 @@
-{"counters":{"u_column":3,"u_row":3,"u_content_heading":1,"u_content_image":1,"u_content_text":1},"body":{"rows":[{"cells":[1],"columns":[{"contents":[{"type":"heading","values":{"containerPadding":"10px","headingType":"h1","fontFamily":{"label":"Arial","value":"arial,helvetica,sans-serif"},"fontSize":"22px","textAlign":"left","lineHeight":"140%","linkStyle":{"inherit":true,"linkColor":"#0000ee","linkHoverColor":"#0000ee","linkUnderline":true,"linkHoverUnderline":true},"hideDesktop":false,"_meta":{"htmlID":"u_content_heading_1","htmlClassNames":"u_content_heading"},"selectable":true,"draggable":true,"duplicatable":true,"deletable":true,"hideable":true,"text":"<strong>Hello brainy girl</strong>"}}],"values":{"backgroundColor":"","padding":"0px","border":{},"_meta":{"htmlID":"u_column_1","htmlClassNames":"u_column"}}}],"values":{"displayCondition":null,"columns":false,"backgroundColor":"","columnsBackgroundColor":"","backgroundImage":{"url":"","fullWidth":true,"repeat":false,"center":true,"cover":false},"padding":"0px","hideDesktop":false,"_meta":{"htmlID":"u_row_1","htmlClassNames":"u_row"},"selectable":true,"draggable":true,"duplicatable":true,"deletable":true,"hideable":true}},{"cells":[1],"columns":[{"contents":[{"type":"text","values":{"containerPadding":"10px","textAlign":"left","lineHeight":"140%","linkStyle":{"inherit":true,"linkColor":"#0000ee","linkHoverColor":"#0000ee","linkUnderline":true,"linkHoverUnderline":true},"hideDesktop":false,"_meta":{"htmlID":"u_content_text_1","htmlClassNames":"u_content_text"},"selectable":true,"draggable":true,"duplicatable":true,"deletable":true,"hideable":true,"text":"<p style=\"font-size: 14px; line-height: 140%;\">Hi :D</p>"}}],"values":{"backgroundColor":"","padding":"0px","border":{},"_meta":{"htmlID":"u_column_2","htmlClassNames":"u_column"}}}],"values":{"displayCondition":null,"columns":false,"backgroundColor":"","columnsBackgroundColor":"","backgroundImage":{"url":"","fullWidth":true,"repeat":false,"center":true,"cover":false},"padding":"0px","hideDesktop":false,"_meta":{"htmlID":"u_row_2","htmlClassNames":"u_row"},"selectable":true,"draggable":true,"duplicatable":true,"deletable":true,"hideable":true}}],"values":{"textColor":"#000000","backgroundColor":"#e7e7e7","backgroundImage":{"url":"","fullWidth":true,"repeat":false,"center":true,"cover":false},"contentWidth":"900px","contentAlign":"center","fontFamily":{"label":"Arial","value":"arial,helvetica,sans-serif"},"preheaderText":"","linkStyle":{"body":true,"linkColor":"#0000ee","linkHoverColor":"#0000ee","linkUnderline":true,"linkHoverUnderline":true},"_meta":{"htmlID":"u_body","htmlClassNames":"u_body"}}},"schemaVersion":6}
+{"counters":{"u_column":1,"u_row":1,"u_content_text":2,"u_content_image":1},"body":{"id":"jKajbI6ZU7","rows":[{"id":"6MxIU7ekZa","cells":[1],"columns":[{"id":"5jNH9aVH7d","contents":[{"id":"0Oaot5ExzM","type":"text","values":{"containerPadding":"10px","textAlign":"left","lineHeight":"140%","linkStyle":{"inherit":true,"linkColor":"#0000ee","linkHoverColor":"#0000ee","linkUnderline":true,"linkHoverUnderline":true},"hideDesktop":false,"displayCondition":null,"_meta":{"htmlID":"u_content_text_1","htmlClassNames":"u_content_text"},"selectable":true,"draggable":true,"duplicatable":true,"deletable":true,"hideable":true,"text":"<p style=\"font-size: 14px; line-height: 140%;\">Hi ^*name*^,</p>\n<p style=\"font-size: 14px; line-height: 140%;\">&nbsp;</p>\n<p style=\"font-size: 14px; line-height: 140%;\">Thank you for your interest in becoming a part of APAC committee. </p>\n<p style=\"font-size: 14px; line-height: 140%;\">&nbsp;</p>\n<p style=\"font-size: 14px; line-height: 140%;\">We regret to inform you that your profile does not match the requirements we are looking for at this time so your application was <strong>REJECTED</strong>. We appreciate you for taking your time to apply for this recruitment drive and we wish you better luck next time. 🙂</p>\n<p style=\"font-size: 14px; line-height: 140%;\">&nbsp;</p>\n<p style=\"font-size: 14px; line-height: 140%;\">Yours Sincerely,</p>\n<p style=\"font-size: 14px; line-height: 140%;\">&nbsp;</p>\n<p style=\"font-size: 14px; line-height: 140%;\">APAC</p>\n<p style=\"font-size: 14px; line-height: 140%;\">&nbsp;</p>"}},{"id":"kP8PBQZ0Tu","type":"image","values":{"containerPadding":"10px","src":{"url":"https://s3.amazonaws.com/unroll-images-production/projects%2F0%2F1645716067964-apaclogo.png","width":259,"height":96},"textAlign":"left","altText":"","action":{"name":"web","values":{"href":"","target":"_blank"}},"hideDesktop":false,"displayCondition":null,"_meta":{"htmlID":"u_content_image_1","htmlClassNames":"u_content_image"},"selectable":true,"draggable":true,"duplicatable":true,"deletable":true,"hideable":true}},{"id":"ie50Mj0umP","type":"text","values":{"containerPadding":"10px","textAlign":"left","lineHeight":"140%","linkStyle":{"inherit":true,"linkColor":"#0000ee","linkHoverColor":"#0000ee","linkUnderline":true,"linkHoverUnderline":true},"hideDesktop":false,"displayCondition":null,"_meta":{"htmlID":"u_content_text_2","htmlClassNames":"u_content_text"},"selectable":true,"draggable":true,"duplicatable":true,"deletable":true,"hideable":true,"text":"<p style=\"font-size: 14px; line-height: 140%;\">Asia Pacific University of Technology and Innovation (APU/APIIT)</p>\n<p style=\"font-size: 14px; line-height: 140%;\">Jalan Teknologi 5, Taman Teknologi Malaysia,</p>\n<p style=\"font-size: 14px; line-height: 140%;\">57000 Kuala Lumpur, Wilayah Persekutuan Kuala Lumpur</p>\n<p style=\"font-size: 14px; line-height: 140%;\">📩 [email protected]</p>\n<p style=\"font-size: 14px; line-height: 140%;\">🌏 http://facebook.com/asiapacificanalyticsclub/</p>\n<p style=\"font-size: 14px; line-height: 140%;\">🌏https://www.instagram.com/apu.apac/</p>"}}],"values":{"backgroundColor":"","padding":"0px","border":{},"_meta":{"htmlID":"u_column_1","htmlClassNames":"u_column"}}}],"values":{"displayCondition":null,"columns":false,"backgroundColor":"","columnsBackgroundColor":"","backgroundImage":{"url":"","fullWidth":true,"repeat":false,"center":true,"cover":false},"padding":"0px","hideDesktop":false,"_meta":{"htmlID":"u_row_1","htmlClassNames":"u_row"},"selectable":true,"draggable":true,"duplicatable":true,"deletable":true,"hideable":true}}],"values":{"textColor":"#000000","backgroundColor":"#e7e7e7","backgroundImage":{"url":"","fullWidth":true,"repeat":false,"center":true,"cover":false},"contentWidth":"500px","contentAlign":"center","fontFamily":{"label":"Arial","value":"arial,helvetica,sans-serif"},"preheaderText":"","linkStyle":{"body":true,"linkColor":"#0000ee","linkHoverColor":"#0000ee","linkUnderline":true,"linkHoverUnderline":true},"_meta":{"htmlID":"u_body","htmlClassNames":"u_body"}}},"schemaVersion":7}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "apac-mailer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -13,11 +13,13 @@
   },
   "main": "background.js",
   "dependencies": {
+    "@fast-csv/parse": "^4.3.6",
     "core-js": "^3.6.5",
     "dns": "^0.2.2",
     "jspdf": "^2.4.0",
     "nodemailer": "^6.6.5",
     "nodemailer-smtp-transport": "^2.7.4",
+    "papaparse": "^5.3.1",
     "roboto-fontface": "*",
     "vue": "^2.6.11",
     "vue-email-editor": "^0.9.0",

src/App.vue

@@ -46,7 +46,7 @@
         <EmailDesign @html="setDesign"
                      :class="{'selected': currentRoute == 'design'}"
                       class="hide"></EmailDesign>
-        <CertDesign v-if="currentRoute == 'cert'"
+        <CertDesign
                     :class="{'selected': currentRoute == 'cert'}"
                     class="hide"
                     @cert="saveCert"></CertDesign>
@@ -96,10 +96,10 @@ export default {
       console.log(design);
       this.html = design;
     },
-    changeProgress(n, t) {
+    changeProgress({cur, total}) {
       this.sending = true;
-      this.progress = n + " / " + t;
-      this.cur = n / t;
+      this.progress = cur + " / " + total;
+      this.cur = cur / total;
     },
     completed(e) {
       console.log("Completed2");