|
@@ -0,0 +1,128 @@
|
|
|
+<style>
|
|
|
+#outgoingEmailTemplate .ql-editor {
|
|
|
+ padding: 0 15px 15px 15px;
|
|
|
+}
|
|
|
+#outgoingEmailTemplate .ql-snow.ql-toolbar button,
|
|
|
+#outgoingEmailTemplate .ql-snow .ql-toolbar button {
|
|
|
+ min-width: initial;
|
|
|
+ border: none;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+}
|
|
|
+#outgoingEmailTemplate .ql-toolbar.ql-snow {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<div class="d-inline" id="outgoingEmailTemplate">
|
|
|
+ <div moe wide center class="ml-auto">
|
|
|
+ <a show href="" start>Send Email</a>
|
|
|
+ <form url="/api/imail/create">
|
|
|
+ <div id="outgoingEmailTemplateComponent" v-cloak>
|
|
|
+ <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="" class="control-label">Ougoing Email Template</label>
|
|
|
+ <select name="outgoingEmailTemplate" class="form-control input-sm" @change="setTemplate">
|
|
|
+ <option value=""></option>
|
|
|
+ <option v-for="(template,i) in templates" v-bind:value="i">@{{ template.default_subject_tpl }}</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="" class="control-label">From Email</label>
|
|
|
+ <input type="email" name="fromEmailAddress" class="form-control input-sm" v-model="template.default_from_email" />
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="" class="control-label">From Name</label>
|
|
|
+ <input class="form-control input-sm" type="text" name="fromName" v-model="template.default_from_name">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="" class="control-label">To Email</label>
|
|
|
+ <input class="form-control input-sm" type="email" name="toEmailAddress" value="{{$patient->email_address}}">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="" class="control-label">Subject</label>
|
|
|
+ <input class="form-control input-sm" type="text" name="subject" v-model="template.default_subject_tpl">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="" class="control-label">Body</label>
|
|
|
+ <div id="htmlBody"></div>
|
|
|
+ <input type="hidden" name="htmlBody" v-model="template.default_message_body_tpl" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <button class="btn btn-primary btn-sm" submit>Submit</button>
|
|
|
+ <button class="btn btn-primary btn-sm" cancel>Cancel</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ (function() {
|
|
|
+ function init() {
|
|
|
+ var outgoingEmailTemplate = new Vue({
|
|
|
+ el: '#outgoingEmailTemplateComponent',
|
|
|
+ data: {
|
|
|
+ templates: [],
|
|
|
+ template: {
|
|
|
+ default_from_email: 'carelink@leadershiphealth.org'
|
|
|
+ },
|
|
|
+ fromEmailAddresses: [
|
|
|
+ 'carelink@leadershiphealth.org'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setTemplate: function(evt) {
|
|
|
+ var self = this;
|
|
|
+ var input = evt.target;
|
|
|
+ var value = parseInt(evt.target.value);
|
|
|
+ if (isNaN(value)) {
|
|
|
+ self.template = {};
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ self.template = self.templates[value];
|
|
|
+ self.quill.root.innerHTML = self.template.default_message_body_tpl;
|
|
|
+ },
|
|
|
+ loadOugoingEmailTemplates: function() {
|
|
|
+ var self = this;
|
|
|
+ $.get("{{ route('outgoingEmailTemplates') }}", {}, function(response) {
|
|
|
+ self.templates = response.data;
|
|
|
+ }, 'json');
|
|
|
+ },
|
|
|
+ initQuillEditor: function() {
|
|
|
+ var self = this;
|
|
|
+ self.quill = new Quill('#htmlBody', {
|
|
|
+ theme: 'snow',
|
|
|
+ modules:{
|
|
|
+ 'syntax': true,
|
|
|
+ 'toolbar': [
|
|
|
+ [{ 'font': [] }, { 'size': [] }],
|
|
|
+ [ 'bold', 'italic', 'underline', 'strike' ],
|
|
|
+ [{ 'color': [] }, { 'background': [] }],
|
|
|
+ [{ 'script': 'super' }, { 'script': 'sub' }],
|
|
|
+ [{ 'header': '1' }, { 'header': '2' }],
|
|
|
+ [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
|
|
|
+ [ 'direction', { 'align': [] }],
|
|
|
+ [ 'link', 'image', 'video'],
|
|
|
+ [ 'clean' ]
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ self.quill.on('text-change', function (delta, oldDelta, source) {
|
|
|
+ $('[name="htmlBody"]').val(self.quill.root.innerHTML);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ init: function() {
|
|
|
+ this.loadOugoingEmailTemplates();
|
|
|
+ this.initQuillEditor();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ addMCInitializer('outgoingEmailTemplate', init);
|
|
|
+ })();
|
|
|
+</script>
|