Merge pull request #35 from bcgov/html-editor

Replace ckeditor with vuetify textarea
bcgov · Apr 16, 2024 · d762a0f · d762a0f
2 parents fb76ffe + ea3ab75
commit d762a0f
Show file tree

Hide file tree

Showing 8 changed files with 8,680 additions and 14,079 deletions.
diff --git a/app/frontend/package-lock.json b/app/frontend/package-lock.json
diff --git a/app/frontend/package.json b/app/frontend/package.json
@@ -19,17 +19,6 @@
   },
   "dependencies": {
     "@bcgov/bc-sans": "^2.1.0",
-    "@ckeditor/ckeditor5-basic-styles": "^41.2.1",
-    "@ckeditor/ckeditor5-dev-utils": "^27.1.1",
-    "@ckeditor/ckeditor5-dev-webpack-plugin": "^31.1.13",
-    "@ckeditor/ckeditor5-editor-classic": "^41.2.1",
-    "@ckeditor/ckeditor5-essentials": "^41.2.1",
-    "@ckeditor/ckeditor5-link": "^41.2.1",
-    "@ckeditor/ckeditor5-paragraph": "^41.2.1",
-    "@ckeditor/ckeditor5-source-editing": "^41.2.1",
-    "@ckeditor/ckeditor5-table": "^41.2.1",
-    "@ckeditor/ckeditor5-theme-lark": "^41.2.1",
-    "@ckeditor/ckeditor5-vue2": "^3.0.1",
     "@vue/cli-plugin-vuex": "^4.5.19",
     "axios": "^1.6.7",
     "core-js": "^3.36.0",

diff --git a/app/frontend/src/components/ches/Ckeditor.vue b/app/frontend/src/components/ches/Ckeditor.vue
diff --git a/app/frontend/src/components/ches/EmailForm.vue b/app/frontend/src/components/ches/EmailForm.vue
@@ -184,7 +184,6 @@
         <!-- body -->
         <v-col cols="12" md="12" class="bodyDiv">
           <v-textarea
-            v-if="form.bodyFormat === 'text'"
             v-model="form.body"
             :rules="bodyRequiredRule"
             hide-details="auto"
@@ -193,14 +192,6 @@
             value="Enter your email body here."
             class="mb-3"
           ></v-textarea>
-          <div v-else :class="bodyHtmlErrors.length > 0 ? 'errorBorder' : ''">
-            <Ckeditor
-              v-model="form.body"
-              :value.sync="form.body"
-            />
-          </div>
-          <VMessages v-if="form.bodyFormat === 'html'" :value="bodyHtmlErrors" color="error" class="ma-2" />
-
         </v-col>
       </v-row>
 
@@ -242,14 +233,12 @@ import { Regex } from '../../utils/constants';
 
 import DatetimePicker from '@/components/vuetify/DatetimePicker';
 import Upload from '@/components/ches/Upload';
-import Ckeditor from '@/components/ches/Ckeditor';
 
 export default {
   name: 'EmailForm',
   components: {
     Upload,
     'v-datetime-picker': DatetimePicker,
-    Ckeditor,
   },
   data: () => ({
     // form data fields
@@ -286,7 +275,6 @@ export default {
         'Please enter all valid email addresses',
     ],
     bodyRequiredRule: [(v) => !!v || 'Email Body is required'],
-    bodyHtmlErrors: [],
   }),
 
   computed: {
@@ -300,13 +288,6 @@ export default {
     }
   },
 
-  watch: {
-    // show validation message if bodyHtml is empty
-    computedBody: function () {
-      this.validateHtmlBody();
-    },
-  },
-
   methods: {
     ...mapActions('alert', ['showAlert', 'clearAlert']),
     ...mapActions('ches', ['addTransaction']),
@@ -384,23 +365,11 @@ export default {
       window.scrollTo(0, 0);
     },
 
-    // add vuetify-like error to html body editor
-    validateHtmlBody() {
-      if (this.form.bodyFormat === 'html' && this.form.body === '') {
-        this.bodyHtmlErrors = ['Email Body is required'];
-        return false;
-      } else {
-        this.bodyHtmlErrors = [];
-        return true;
-      }
-    },
 
     validateForm() {
       if (
         // if vuetify rules pass
-        this.$refs.form.validate() &&
-        // and body is valid
-        this.validateHtmlBody()
+        this.$refs.form.validate()
       ) {
         return true;
       }

diff --git a/app/frontend/src/components/ches/MergeForm.vue b/app/frontend/src/components/ches/MergeForm.vue
@@ -139,24 +139,13 @@
 
               <!-- text -->
               <v-textarea
-                v-if="bodyType === 'text'"
-                v-model="bodyText"
-                :rules="bodyTextRequiredRule"
+                v-model="body"
+                :rules="[(v) => !!v || 'Body is required']"
                 outlined
                 dense
                 rows="8"
                 class="mb-3"
               />
-              <!-- html -->
-              <div v-else class="bodyDiv">
-                <div :class="bodyHtmlErrors.length > 0 ? 'errorBorder' : ''">
-                  <Ckeditor
-                    v-model="bodyHtml"
-                    :value.sync="bodyHtml"
-                  />
-                </div>
-                <VMessages :value="bodyHtmlErrors" color="error" class="ma-2" />
-              </div>
             </v-tab-item>
 
             <v-tab-item>
@@ -229,15 +218,13 @@ import * as Utils from '@/utils/utils';
 
 import Upload from '@/components/ches/Upload';
 import UploadContexts from '@/components/ches/UploadContexts';
-import Ckeditor from '@/components/ches/Ckeditor';
 import MergePreviewDialog from '@/components/ches/MergePreviewDialog';
 
 export default {
   name: 'MergeForm',
   components: {
     Upload,
     UploadContexts,
-    Ckeditor,
     MergePreviewDialog,
   },
 
@@ -254,19 +241,16 @@ export default {
     // validation
     jsonContextDataRules: [
       (v) => !!v || 'A JSON array containing Contexts data is required',
-      (v) => Utils.validJson(v) || 'Must be a valid JSON array.',
-      (v) => Utils.validateContexts(v) || 'The Contexts for the mail merge are not defined correctly'
+      (v) => Boolean(Utils.validJson(v)) || 'Must be a valid JSON array.',
+      (v) => Boolean(Utils.validateContexts(v)) || 'The Contexts for the mail merge are not defined correctly'
     ],
-    bodyTextRequiredRule: [(v) => !!v || 'Email Body is required'],
-    bodyHtmlErrors: [],
   }),
 
   computed: {
     // get form data from vuex
     ...mapFields('ches', [
       'mergeForm.attachments',
-      'mergeForm.bodyHtml',
-      'mergeForm.bodyText',
+      'mergeForm.body',
       'mergeForm.bodyType',
       'mergeForm.priority',
       'mergeForm.recipients',
@@ -288,13 +272,6 @@ export default {
     },
   },
 
-  watch: {
-    // show validation message if bodyHtml is empty
-    bodyHtml: function () {
-      this.validateHtmlBody();
-    },
-  },
-
   methods: {
     // ches actions in vuex
     ...mapActions('ches', ['addTransaction']),
@@ -311,7 +288,7 @@ export default {
           const formData = {
             attachments: this.attachments,
             bodyType: this.bodyType,
-            body: this.bodyType == 'text' ? this.bodyText : this.bodyHtml,
+            body: this.body,
             from: this.currentUserEmail,
             subject: this.subject,
             priority: this.priority,
@@ -348,7 +325,7 @@ export default {
           const email = {
             attachments: this.attachments,
             bodyType: this.bodyType,
-            body: this.bodyType === 'html' ? this.bodyHtml : this.bodyText,
+            body: this.body,
             contexts: Utils.getContextsObject(this.contexts),
             from: this.currentUserEmail,
             priority: this.priority,
@@ -408,15 +385,13 @@ export default {
     // reset form
     reloadForm() {
       this.$refs.form.resetValidation();
-      this.bodyHtmlErrors = [];
 
       // reset store:
       this.mergeForm = {
         ...this.mergeForm,
         ...{
           attachments: [],
-          bodyHtml: '',
-          bodyText: '',
+          body: '',
           bodyType: 'html',
           priority: 'normal',
           recipients: [],
@@ -444,25 +419,12 @@ export default {
       window.scrollBy(0, -80);
     },
 
-    // add vuetify-like error to html body editor
-    validateHtmlBody() {
-      if (this.bodyType === 'html' && this.bodyHtml === '') {
-        this.bodyHtmlErrors = ['Email Body is required'];
-        return false;
-      } else {
-        this.bodyHtmlErrors = [];
-        return true;
-      }
-    },
-
     validateForm() {
       // make JSON contexts element visible to show error if empty
       if (this.contexts === '') this.contextsType = 'json';
       if (
         // if vuetify rules pass
         this.$refs.form.validate() &&
-        // and body is valid
-        this.validateHtmlBody() &&
         // check contexts JSON string contains required properties
         Utils.validateContexts(this.contexts)
       ) {

diff --git a/app/frontend/src/store/modules/ches.js b/app/frontend/src/store/modules/ches.js
@@ -19,7 +19,7 @@ export default {
     mergeForm: {
       attachments: [],
       bodyHtml: '',
-      bodyText: '',
+      body: '',
       bodyType: 'html',
       priority: 'normal',
       recipients: [],

diff --git a/app/frontend/src/views/merge/MergeAbout.vue b/app/frontend/src/views/merge/MergeAbout.vue
@@ -37,9 +37,8 @@
             <li>On the merge screen, drag/upload the data file into the contexts field.</li>
             <li>Review the contents of the table.</li>
             <li>Click the JSON radio button to review the contents - this the context list sent to CHES.</li>
-            <li>For the body, use the html format editor.<br />
-              Click the 'Source' button in the editor's toolbar to insert the html from the example template</li>
-            <li>For the Subject, enter &quot;ATTN&#58; &#123;&#123;scope&#125;&#125;&#33;&quot;</li>
+            <li>For the body of the emails, insert the html from the example template, or use plain text.<br />The contexts can be inserted into the email body using the curly braces syntax. for example: <span v-pre>'Dear: {{ firstName }} {{ lastName }}'</span></li>
+            <li>For the Subject, you can enter <span v-pre>'ATTN: {{ scope }}'</span></li>
             <li>Click Preview</li>
           </ol>