feat: Option to add custom timeline contents (#10677)

frappe/desk/form/load.py

@@ -100,6 +100,7 @@ def get_docinfo(doc=None, doctype=None, name=None):
 		"shared": frappe.share.get_users(doc.doctype, doc.name),
 		"views": get_view_logs(doc.doctype, doc.name),
 		"energy_point_logs": get_point_logs(doc.doctype, doc.name),
+		"additional_timeline_content": get_additional_timeline_content(doc.doctype, doc.name),
 		"milestones": get_milestones(doc.doctype, doc.name),
 		"is_document_followed": is_document_followed(doc.doctype, doc.name, frappe.session.user),
 		"tags": get_tags(doc.doctype, doc.name),
@@ -277,3 +278,14 @@ def get_document_email(doctype, name):
 
 def get_automatic_email_link():
 	return frappe.db.get_value("Email Account", {"enable_incoming": 1, "enable_automatic_linking": 1}, "email_id")
+
+def get_additional_timeline_content(doctype, docname):
+	contents = []
+	hooks = frappe.get_hooks().get('additional_timeline_content', {})
+	methods_for_all_doctype = hooks.get('*', [])
+	methods_for_current_doctype = hooks.get(doctype, [])
+
+	for method in methods_for_all_doctype + methods_for_current_doctype:
+		contents.extend(frappe.get_attr(method)(doctype, docname) or [])
+
+	return contents

frappe/public/js/frappe/form/footer/timeline.js

@@ -120,9 +120,11 @@ frappe.ui.form.Timeline = class Timeline {
 	display_automatic_link_email() {
 		let docinfo = this.frm.get_docinfo();
 
-		if (docinfo.document_email){
+		if (docinfo.document_email) {
 			let link = __("Send an email to {0} to link it here", [`<b><a class="timeline-email-import-link copy-to-clipboard">${docinfo.document_email}</a></b>`]);
-			$('.timeline-email-import').html(link);
+			const email_link = $('.timeline-email-import');
+			email_link.removeClass('hide');
+			email_link.html(link);
 		}
 	}
 
@@ -180,12 +182,15 @@ frappe.ui.form.Timeline = class Timeline {
 		// append energy point logs
 		timeline = timeline.concat(this.get_energy_point_logs());
 
+		// custom contents
+		timeline = timeline.concat(this.get_additional_timeline_content());
+
 		// append milestones
 		timeline = timeline.concat(this.get_milestones());
 
 		// sort
 		timeline
-			.filter(a => a.content)
+			.filter(a => a.content || a.template)
 			.sort((b, c) => me.compare_dates(b, c))
 			.forEach(d => {
 				d.frm = me.frm;
@@ -407,7 +412,10 @@ frappe.ui.form.Timeline = class Timeline {
 				c.original_content = c.content;
 				c.content = frappe.utils.toggle_blockquote(c.content);
 			}
-			if(!frappe.utils.is_html(c.content)) {
+
+			if (c.template) {
+				c.content_html = frappe.render_template(c.template, c.template_data);
+			} else if (!frappe.utils.is_html(c.content)) {
 				c.content_html = frappe.markdown(__(c.content));
 			} else {
 				c.content_html = c.content;
@@ -529,6 +537,10 @@ frappe.ui.form.Timeline = class Timeline {
 		return energy_point_logs;
 	}
 
+	get_additional_timeline_content() {
+		return this.frm.get_docinfo().additional_timeline_content || [];
+	}
+
 	get_milestones() {
 		let milestones = this.frm.get_docinfo().milestones;
 		milestones.map(log => {

frappe/public/js/frappe/form/templates/timeline.html

@@ -17,9 +17,7 @@
 			{% } %}
 		{% } %}
 	</div>
-	<div class="timeline-email-import text-muted small">
-
-	</div>
+	<div class="timeline-email-import text-muted small hide"></div>
 	<div class="timeline-items">
 
 	</div>

frappe/public/js/frappe/form/templates/timeline_item.html

@@ -1,4 +1,6 @@
-<div class="media timeline-item {% if (data.user_content) { %} user-content {% } else { %} notification-content {% } %} {{ data.color || "" }}"
+<div class="media timeline-item
+	{% if (data.user_content || data.template) { %} user-content {% } else { %} notification-content {% } %}
+	{% if (data.template) { %} show-indicator {% }%} {{ data.color || "" }}"
 	data-doctype="{{ data.doctype }}" data-name="{{ data.name }}" data-communication-type = "{{ data.communication_type }}">
 	{% if (data.user_content) { %}
 	<span class="pull-left avatar avatar-medium hidden-xs" style="margin-top: 1px">
@@ -186,7 +188,7 @@
 						{% } %}
 						{%= __("Liked by {0}", [data.fullname]) %}
 					</span>
-					{% } else if (data.comment_type == "Energy Points") { %}
+					{% } else if (data.comment_type == "Energy Points" || data.template) { %}
 						{{ data.content_html }}
 					{% } else { %}
 						<b title="{{ data.comment_by }}">{%= data.fullname %}</b>
@@ -200,8 +202,11 @@
 							</a>
 						{% } %}
 					{% } %}
-					<span class="text-muted commented-on" style="font-weight: normal;">
-					&ndash; {%= data.comment_on %}</span>
+					{% if (!data.template) { %}
+						<span class="text-muted commented-on" style="font-weight: normal;">
+							&ndash; {%= data.comment_on %}
+						</span>
+					{% } %}
 				</div>
 			{% } %}
 		</div>

frappe/public/less/form.less

@@ -349,6 +349,9 @@ h6.uppercase, .h6.uppercase {
 	.form-section {
 		padding: 15px 7px;
 	}
+	.hide-border {
+		padding-top: 0;
+	}
 }
 
 .help ol {
@@ -573,7 +576,13 @@ h6.uppercase, .h6.uppercase {
 		margin-left: 5px;
 	}
 
-	.media-body:after, .media-body:before {
+	.media-body {
+		.left-arrow;
+	}
+}
+
+.left-arrow {
+	&::after, &::before {
 		right: 100%;
 		top: 15px;
 		border: solid transparent;
@@ -584,13 +593,13 @@ h6.uppercase, .h6.uppercase {
 		pointer-events: none;
 	}
 
-	.media-body:after {
+	&::after {
 		border-color: rgba(136, 183, 213, 0);
 		border-right-color: #fafbfc;
 		border-width: 6px;
 		margin-top: -6px;
 	}
-	.media-body:before {
+	&::before {
 		border-color: rgba(194, 225, 245, 0);
 		border-right-color: @border-color;
 		border-width: 7px;
@@ -638,6 +647,18 @@ h6.uppercase, .h6.uppercase {
 	top: 5px;
 }
 
+.timeline-item.user-content.show-indicator {
+	position: relative;
+	.media-body {
+		margin-left: 50px;
+	}
+	&::before {
+		.timeline-indicator();
+		left: 13px;
+		top: 13px;
+	}
+}
+
 .timeline-item.notification-content::before {
 	.timeline-indicator();
 }