AVEF/imports/ui/Admin/InternshipEditor.js

import './InternshipEditor.html';
import '/imports/ui/dialogs/SelectImageDialog.js';
import swal from "sweetalert2";

const PREFIX = "InternshipEditor_";

Tracker.autorun(function() {
	Meteor.subscribe("Internship");
});

Template.InternshipEditor.onCreated(function() {
	//this.internships = Meteor.collections.Internship.find({}, {sort: {name: 1}});
	Session.set(PREFIX + 'selectedInternship', null);
});
Template.InternshipEditor.helpers({
	internships: function() {
		//return Template.instance().internships;
		return Meteor.collections.Internship.find({}, {sort: {name: 1}});
	},
	selectedInternship: function() {
		return Session.get(PREFIX + "selectedInternship");
	}
});
Template.InternshipEditor.events({
	'click .deleteInternship': function(event, template) {
		let $li = template.$(event.target).parent();
		
		Meteor.call('removeInternship', $li.data('id'), function(error, id) {
			if(error) sAlert.error("Failed to create the internship!\n" + error);
		});
	},
	'click .internshipListItem': function(event, template) {
		let $li = template.$(event.currentTarget);
		
		$li.addClass('selected');
		$li.siblings().removeClass('selected');
		Session.set(PREFIX + "selectedInternship", Meteor.collections.Internship.findOne($li.data('id')));
	},
	'click .editPageText': function(event,template) {
		//
	},
	"keyup input[name='newInternshipName']" : function(event, template) {
		if(event.keyCode === 13) {
			event.preventDefault();
			$('.createInternship').trigger('click');
		}
	},
	"click .createInternship": function(event, template) {
		let $input = template.$('input[name="newInternshipName"]');
		
		if($input.hasClass('show')) {
			let name = $input.val();
			
			name = name ? name.trim() : undefined;
			name = name && name.length > 0 ? name : undefined;
			
			if(name) {
				let content = "<p><strong>Job Title:&nbsp;</strong></p>\n<p><strong>Supervisor / Sponsor:&nbsp;</strong></p>\n<p><strong>Location of Internship:&nbsp;</strong></p>\n<p><strong>Dates &amp; hours:&nbsp;</strong></p>\n<p><strong>Duties &amp; Activities:&nbsp;</strong></p>\n<p><strong>Desirable Qualities / Skills:&nbsp;</strong></p>";
				//Meteor.collections.Internship.insert({name, content});
				Meteor.call('addInternship', name, content, function(error, id) {
					if(error) sAlert.error("Failed to create the internship!\n" + error);
					else {
						//Clear the text editor.
						$input.val("");

						//Quick hack to attempt to allow the internship we created to be added to the list before we try to select it and edit it.
						let count = 0;
						let interval = setInterval(function() {
							let selected = Meteor.collections.Internship.findOne(id);

							if(selected) {
								//Select the sheet in the drop down.
								let $li = template.$('ul.internshipList li[data-id="' + id + '"]');
								
								$li.addClass("selected");
								$li.siblings().removeClass("selected");
								Session.set(PREFIX + "selectedInternship", selected);
								clearInterval(interval);
							}
							else count++;

							//Avoid infinite loop that should never happen.
							if(count > 100) clearInterval(interval);
						}, 100);
					}
				});
			}
			
			$input.removeClass('show');
			$(event.target).toggleClass('move');
		}
		else {
			$input.addClass('show');
			$(event.target).toggleClass('move');
			$input.focus();
		}
	}
});

Template.InternshipHtmlEditor.onCreated(function() {
	let template = this;
	
	this.showSelectImageDialog = new ReactiveVar(false);
	
	this.saveChanges = function(ask) {
		let data = this.$('.editor').val();
		let template = this;
		
		//Only ask the user if they want to update their changes if they actually have changes that have not yet been saved.
		//Note: This is only useful if the user was editing an internship.  If the user was looking at the list then template.currentHtml will be undefined.
		if(template.currentHtml && data !== template.currentHtml) {
			const changedData = data;
			
			//Ensure this does not get run twice.
			template.currentHtml = changedData;
			
			if(ask) {
				//Ask the user if they want to update the repository with their changes.
				swal({
					title: "Save Changes",
					text: "Would you like to save any changes you have made to this page?",
					type: "question",
					showCancelButton: true,
					confirmButtonColor: "#7cdd7f",
					confirmButtonText: "Yes",
					cancelButtonText: "No"
				}).then(
					function(isConfirm) {
						if(isConfirm) {
							Meteor.call('updateInternship', template.data.internship._id, changedData, function (error, result) {
								if (error) sAlert.error(error);
								else sAlert.success("Content Saved Successfully");
							});
						}
					},
					function(dismiss) {}
				);
			}
			else {
				Meteor.call('updateInternship', template.data.internship._id, changedData, function (error, result) {
					if (error) sAlert.error(error);
					else sAlert.success("Content Saved Successfully");
				});
			}
		}
	};
});
Template.InternshipHtmlEditor.onRendered(function() {
	let template = this;
	
	$('.editor').tinymce({
		inline: true,
		menubar: false,
		theme: 'inlite',
		plugins: [
			'autolink',
			'contextmenu',
			'link',
			'lists',
			'table',
			'textcolor'
		],
		toolbar: [
			'undo redo | bold italic underline | fontselect fontsizeselect',
			'forecolor backcolor | alignleft aligncenter alignright alignfull | link unlink | numlist bullist outdent indent'
		],
		table_default_attributes: {
			border: 0,
			cellpadding: 4
		},
		table_default_styles: {
			borderCollapse: "collapse"
		},
		insert_toolbar: 'quicktable',  //image
		selection_toolbar: 'bold italic | h1 h2 h3 | bullist numlist outdent indent | blockquote quicklink',
		contextmenu: 'InsertImage | inserttable | cell row column deletetable',  //image
		contextmenu_never_use_native: false,
		
		
		setup: function(editor) {
			editor.addMenuItem('InsertImage', {
				text: "Insert Image",
				context: 'tools',
				onclick: function() {
					template.showSelectImageDialog.set(true);
				}
			});
		}
		
	});
	
	Tracker.autorun(function() {
		//let data = Template.currentData().data;  //Note: Calling Template.currentData() is a reactive way to get the template parameters.
		let data = Blaze.getData(template.view).internship;
		
		if(data) {
			template.currentHtml = data.content;
			$('.editor').html(data.content && data.content.length > 0 ? data.content : "Change Me!");
		}
	});
});
Template.InternshipHtmlEditor.onDestroyed(function() {
	this.saveChanges(true);
});
Template.InternshipHtmlEditor.events({
	'click #save': function(event, template) {
		template.saveChanges(false);
	}
});
Template.InternshipHtmlEditor.helpers({
	showSelectImageDialog() {
		return Template.instance().showSelectImageDialog.get();
	},
	selectImageDialogArgs() {
		let template = Template.instance();
		return {
			onApply(value) {
				tinymce.activeEditor.insertContent('<img src="' + value + '"/>');
				template.showSelectImageDialog.set(false);
			},
			onClose() {
				template.showSelectImageDialog.set(false);
			}
		};
	},
	showInstructions() {
		return !Template.currentData().internship;
	}
});