Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace ckeditor with vuetify textarea #35

Merged
merged 1 commit into from
Apr 16, 2024
Merged

Replace ckeditor with vuetify textarea #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22,519 changes: 8,668 additions & 13,851 deletions app/frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 0 additions & 11 deletions app/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
64 changes: 0 additions & 64 deletions app/frontend/src/components/ches/Ckeditor.vue
View file
Open in desktop

This file was deleted.

33 changes: 1 addition & 32 deletions app/frontend/src/components/ches/EmailForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -286,7 +275,6 @@ export default {
'Please enter all valid email addresses',
],
bodyRequiredRule: [(v) => !!v || 'Email Body is required'],
bodyHtmlErrors: [],
}),

computed: {
Expand All @@ -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']),
Expand Down Expand Up @@ -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;
}
Expand Down
54 changes: 8 additions & 46 deletions app/frontend/src/components/ches/MergeForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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,
},

Expand All @@ -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',
Expand All @@ -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']),
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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: [],
Expand Down Expand Up @@ -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)
) {
Expand Down
2 changes: 1 addition & 1 deletion app/frontend/src/store/modules/ches.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default {
mergeForm: {
attachments: [],
bodyHtml: '',
bodyText: '',
body: '',
bodyType: 'html',
priority: 'normal',
recipients: [],
Expand Down
5 changes: 2 additions & 3 deletions app/frontend/src/views/merge/MergeAbout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Loading
Loading