Skip to content

Commit

Permalink
Merge pull request #399 from Badsender-com/feat-display-listing-profi…
Browse files Browse the repository at this point in the history
…le-editor

Feat display listing profile editor
  • Loading branch information
medamineziraoui committed Jun 28, 2021
2 parents 7f3a977 + 6bd8c65 commit 22350cd
Show file tree
Hide file tree
Showing 29 changed files with 817 additions and 63 deletions.
1 change: 1 addition & 0 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ const mosaicoLibList = [
'node_modules/blueimp-file-upload/js/jquery.fileupload-process.js',
'node_modules/blueimp-file-upload/js/jquery.fileupload-image.js',
'node_modules/blueimp-file-upload/js/jquery.fileupload-validate.js',
'node_modules/materialize-css/dist/js/materialize.min.js',
'node_modules/knockout-jqueryui/dist/knockout-jqueryui.js',
'node_modules/tinymce/tinymce.js',
];
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
"http-errors": "1.7.3",
"i18n": "0.8.3",
"lodash": "4.17.15",
"materialize-css": "^1.0.0-rc.2",
"mime-types": "2.1.24",
"moment": "2.24.0",
"mongoose": "5.12.0",
Expand Down
4 changes: 4 additions & 0 deletions packages/editor/src/css/badsender-colorpicker.less
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
@import (less)
'../../../../node_modules/@easylogic/colorpicker/dist/colorpicker.css';

.material-css {
@import (less) '../../../../node_modules/materialize-css/dist/css/materialize.min.css';
}

.badsender-colorpicker__bucket {
border-radius: 50%;
width: 30px;
Expand Down
2 changes: 2 additions & 0 deletions packages/editor/src/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ var utilPlugin = require('./ext/util.js');
var inlinerPlugin = require('./ext/inliner.js');

var localStorageLoader = require('./ext/localstorage.js');
const vuePlugin = require("./vue/vuePlugin");

if (typeof ko == 'undefined') throw 'Cannot find knockout.js library!';
if (typeof $ == 'undefined') throw 'Cannot find jquery library!';
Expand Down Expand Up @@ -180,6 +181,7 @@ var start = function (
colorPlugin,
utilPlugin,
inlinerPlugin,
vuePlugin,
];
if (typeof customExtensions !== 'undefined')
for (var k = 0; k < customExtensions.length; k++)
Expand Down
12 changes: 2 additions & 10 deletions packages/editor/src/js/template-loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -345,14 +345,6 @@ var templateCompiler = function (
if (typeof html !== 'string')
throw 'Template system: cannot create new template ' + id;
var trash = html.match(/(data)?-ko-[^ =:]*/g);
if (trash) {
console.error(
'ERROR: found unexpected -ko- attribute in compiled template',
id,
', you probably mispelled it:',
trash
);
}
templateSystem.addTemplate(id, html);
createdTemplates.push(id);
},
Expand Down Expand Up @@ -524,7 +516,7 @@ var templateCompiler = function (
// everything's ready, start knockout bindings.
plugins.push(bindingPluginMaker(performanceAwareCaller));

pluginsCall(plugins, 'viewModel', [viewModel]);
pluginsCall(plugins, 'viewModel', [viewModel, ko]);

if (incompatibleTemplate) {
$('#incompatible-template').dialog({
Expand All @@ -543,7 +535,7 @@ var templateCompiler = function (
return {
model: viewModel,
init: function () {
pluginsCall(plugins, 'init', undefined, true);
pluginsCall(plugins, 'init', [viewModel], true);
// If the mail doesn't have preview contain then execute the request for the first time the save mail and generate preview
if(!metadata.hasHtmlPreview && viewModel.save && viewModel.save.execute) {
viewModel.save.execute();
Expand Down
129 changes: 129 additions & 0 deletions packages/editor/src/js/vue/components/esp/esp-send-mail.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
var Vue = require('vue/dist/vue.common');
var { SENDINBLUEComponent } = require('./providers/SendinBlueComponent');
var { ProfileListComponent } = require('../esp/profile-list');
var { getEspIds } = require('../../utils/apis');
var { SEND_MODE } = require('../../constant/send-mode');
var axios = require('axios');

const EspComponent = Vue.component('esp-form', {
components: {
SENDINBLUEComponent,
ProfileListComponent
},
props: {
vm: { type: Object, default: () => ({}) },
},
template: `
<div>
<profile-list
:select-profile="handleProfileSelect"
:vm="vm"
></profile-list>
<div class="material-css">
<div id="modal1" class="modal modal-fixed-footer" ref="modalRef">
<component
:key="selectedProfile.id"
:vm="vm"
:type="type"
:is="espComponent"
v-if="!!selectedProfile"
:selectedProfile="selectedProfile"
:campaignId="campaignId"
:closeModal="closeModal"
:campaignMailName="''"
@submit="submitEsp"
>
</component>
</div>
</div>
</div>
`,
data: () => ({
espComponent: 'SendinBlueComponent',
mailingId: null,
selectedProfile: null,
dialog: false,
modalInstance: null,
type: SEND_MODE.CREATION,
campaignId: null,
espIds: []
}),
mounted() {
this.mailingId = this.vm?.metadata?.id;

const modalRef = this.$refs.modalRef;
const options = {
dismissible: false
};
this.modalInstance = M.Modal.init(modalRef, options);
this.fetchData();
},
methods: {
fetchData() {
axios.get(getEspIds({mailingId: this.mailingId }))
.then((response)=> {
this.espIds = (response?.data.result || []);
}).catch((error) => {
// handle error
this.vm.notifier.error(this.vm.t('error-server'));
});
},
handleProfileSelect(profile) {
this.selectedProfile = profile;
this.fetchData();
this.checkIfAlreadySendMailWithProfile();
this.openModal();
},
checkIfAlreadySendMailWithProfile() {
if(!this.selectedProfile?.id || !this.espIds) {
return;
}
this.type = SEND_MODE.CREATION;
this.espIds.forEach((espId) => {
if (espId?.profileId === this.selectedProfile?.id) {
console.log('found match espIds')
this.campaignId = espId.mailCampaignId.toString()
this.type = SEND_MODE.EDIT
}
});
},
openModal() {
this.modalInstance?.open();
},
closeModal() {
this.modalInstance?.close();
},
submitEsp(profile) {

if(!this.vm?.metadata?.url?.sendCampaignMail) {
return;
}

const unprocessedHtml = this.vm.exportHTML();

axios.post(this.vm.metadata.url.sendCampaignMail, {
html: unprocessedHtml,
actionType: this.type,
profileId: profile?.id,
type: profile.type,
espSendingMailData: {
campaignMailName: profile.campaignMailName,
subject: profile.subject,
}
})
.then((response)=> {
// handle success
this.vm.notifier.success(this.vm.t('success-esp-send'));
this.closeModal();
}).catch((error) => {
// handle error
this.vm.notifier.error(this.vm.t('error-server'));
});
}
},
});

module.exports = {
EspComponent
}
44 changes: 44 additions & 0 deletions packages/editor/src/js/vue/components/esp/profile-list.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
var Vue = require('vue/dist/vue.common');
var axios = require('axios');

const ProfileListComponent = Vue.component('profile-list', {
props: {
vm: { type: Object, default: () => ({}) },
selectProfile: { type: Function, default: () => {}}
},
template: `
<div>
<a
v-for="profile in profiles" :key="profile.id" @click.prevent="() => selectProfile(profile)"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover ui-state-focus">
{{ profile.name }}
</a>
</div>
`,
data: () => ({
profiles: [],
}),
mounted() {
this.fetchData();
},
methods: {
fetchData() {
const vm = this.vm;
if(!this.vm?.metadata?.url?.profileList) {
return;
}

axios.get(this.vm.metadata.url.profileList)
.then((response) => {
this.profiles = response?.data?.result;
}).catch((error) => {
// handle error
vm.notifier.error(this.vm.t('error-server'));
});
}
},
});

module.exports = {
ProfileListComponent
}
Empty file.
Loading

0 comments on commit 22350cd

Please sign in to comment.