Merge pull request #2812 from mbauskar/inbox-view

Inbox view

frappe/boot.py

@@ -12,6 +12,7 @@ import frappe.desk.desk_page
 from frappe.desk.form.load import get_meta_bundle
 from frappe.utils.change_log import get_versions
 from frappe.translate import get_lang_dict
+from frappe.email.inbox import get_email_accounts
 from frappe.core.doctype.feedback_trigger.feedback_trigger import get_enabled_feedback_trigger
 
 def get_bootinfo():
@@ -66,10 +67,9 @@ def get_bootinfo():
 	bootinfo.error_report_email = frappe.get_hooks("error_report_email")
 	bootinfo.calendars = sorted(frappe.get_hooks("calendars"))
 	bootinfo.treeviews = frappe.get_hooks("treeviews") or []
-	bootinfo.email_accounts = frappe.get_all('User Email', fields=['email_account', 'email_id'],
-		filters=dict(parent=frappe.session.user))
 	bootinfo.lang_dict = get_lang_dict()
 	bootinfo.feedback_triggers = get_enabled_feedback_trigger()
+	bootinfo.update(get_email_accounts(user=frappe.session.user))
 
 	return bootinfo
 

frappe/core/doctype/communication/communication.js

@@ -53,6 +53,27 @@ frappe.ui.form.on("Communication", {
 		frm.add_custom_button(__("Relink"), function() {
 			frm.trigger('show_relink_dialog');
 		});
+
+		if(frm.doc.communication_type=="Communication" 
+			&& frm.doc.communication_medium == "Email"
+			&& frm.doc.sent_or_received == "Received") {
+
+			frm.add_custom_button(__("Mark as {0}", [frm.doc.seen? "Unread": "Read"]), function() {
+				frm.trigger('mark_as_read_unread');
+			}, "Actions");
+
+			frm.add_custom_button(__("Reply"), function() {
+				frm.trigger('reply');
+			}, "Actions");
+
+			frm.add_custom_button(__("Reply-All"), function() {
+				frm.trigger('reply_all');
+			}, "Actions");
+
+			frm.add_custom_button(__("Forward"), function() {
+				frm.trigger('forward_mail');
+			}, "Actions");
+		}
 	},
 	show_relink_dialog: function(frm){
 		var lib = "frappe.email";
@@ -100,5 +121,67 @@ frappe.ui.form.on("Communication", {
 			}
 		});
 		d.show();
+	},
+
+	mark_as_read_unread: function(frm) {
+		action = frm.doc.seen? "Unread": "Read";
+		flag = "(\\SEEN)";
+
+		return frappe.call({
+			method: "frappe.email.inbox.create_email_flag_queue",
+			args: {
+				'names': [frm.doc.name],
+				'action': action,
+				'flag': flag
+			},
+			freeze: true
+		});
+	},
+
+	reply: function(frm) {
+		args = frm.events.get_mail_args(frm);
+		$.extend(args, {
+			subject: __("Re: {0}", [frm.doc.subject]),
+			recipients: frm.doc.sender
+		})
+
+		new frappe.views.CommunicationComposer(args);
+	},
+
+	reply_all: function(frm) {
+		args = frm.events.get_mail_args(frm)
+		$.extend(args, {
+			subject: __("Re: {0}", [frm.doc.subject]),
+			recipients: frm.doc.sender,
+			cc: frm.doc.cc
+		})
+		new frappe.views.CommunicationComposer(args);
+	},
+
+	forward_mail: function(frm) {
+		args = frm.events.get_mail_args(frm)
+		$.extend(args, {		
+			forward: true,
+			subject: __("Fw: {0}", [frm.doc.subject]),
+		})
+
+		new frappe.views.CommunicationComposer(args);
+	},
+
+	get_mail_args: function(frm) {
+		sender_email_id = ""
+		$.each(frappe.boot.email_accounts, function(idx, account) {
+			if(account.email_account == frm.doc.email_account) {
+				sender_email_id = account.email_id
+				return
+			}
+		});
+
+		return {
+			doc: frm.doc,
+			last_email: frm.doc,
+			sender: sender_email_id,
+			attachments: frm.doc.attachments
+		}
 	}
 });

frappe/core/doctype/communication/communication.py

@@ -53,6 +53,7 @@ class Communication(Document):
 			self.subject = strip_html((self.content or "")[:141])
 
 		if not self.sent_or_received:
+			self.seen = 1
 			self.sent_or_received = "Sent"
 
 		self.set_status()

frappe/core/doctype/communication/communication_list.js

@@ -1,4 +1,20 @@
 frappe.listview_settings['Communication'] = {
-	add_fields: ["sent_or_received", "recipients", "subject", "communication_medium", "communication_type"],
-	filters: [["status", "=", "Open"]]
+	add_fields: [
+		"sent_or_received","recipients", "subject",
+		"communication_medium", "communication_type",
+		"sender", "seen"
+	],
+
+	filters: [["status", "=", "Open"]],
+
+	onload: function(listview) {
+		method = "frappe.email.inbox.create_email_flag_queue"
+
+		listview.page.add_menu_item(__("Mark as Read"), function() {
+			listview.call_for_selected_items(method, { action: "Read" })
+		});
+		listview.page.add_menu_item(__("Mark as Unread"), function() {
+			listview.call_for_selected_items(method, { action: "Unread" })
+		});
+	}
 };

frappe/email/inbox.py

@@ -0,0 +1,79 @@
+import frappe
+import json
+
+def get_email_accounts(user=None):
+	if not user:
+		user = frappe.session.user
+
+	email_accounts = []
+
+	accounts = frappe.get_all("User Email", filters={ "parent": user },
+		fields=["email_account", "email_id"],
+		distinct=True, order_by="idx")
+
+	if not accounts:
+		return {
+			"email_accounts": [],
+			"all_accounts": ""
+		}
+
+	email_accounts.append({
+		"email_account": "Sent",
+		"email_id": "Sent Mail"
+	})
+
+	all_accounts = ",".join([ account.get("email_account") for account in accounts ])
+	if len(accounts) > 1:
+		email_accounts.append({
+			"email_account": all_accounts,
+			"email_id": "All Accounts"
+		})
+
+	email_accounts.extend(accounts)
+
+	return {
+		"email_accounts": email_accounts,
+		"all_accounts": all_accounts
+	}
+
+@frappe.whitelist()
+def create_email_flag_queue(names, action, flag="(\\Seen)"):
+	""" create email flag queue to mark email either as read or unread """
+	class Found(Exception):
+		pass
+
+	if not all([names, action, flag]):
+		return
+
+	for name in json.loads(names or []):
+		uid, seen_status = frappe.db.get_value("Communication", name, 
+			["ifnull(uid, -1)", "ifnull(seen, 0)"])
+
+		if not uid or uid == -1:
+			continue
+
+		seen = 1 if action == "Read" else "Unread"
+		# check if states are correct
+		if (action =='Read' and seen_status == 0) or (action =='Unread' and seen_status == 1):
+			try:
+				queue = frappe.db.sql("""select name, action, flag from `tabEmail Flag Queue`
+					where communication = %(name)s""", {"name":name}, as_dict=True)
+				for q in queue:
+					# is same email with same flag
+					if q.flag == flag:
+						# to prevent flag local and server states being out of sync
+						if q.action != action:
+							frappe.delete_doc("Email Flag Queue", q.name)
+						raise Found
+
+				flag_queue = frappe.get_doc({
+					"doctype": "Email Flag Queue",
+					"communication": name,
+					"action": action,
+					"flag": flag
+				})
+				flag_queue.save(ignore_permissions=True);
+				frappe.db.set_value("Communication", name, "seen", seen, 
+					update_modified=False)
+			except Found:
+				pass

frappe/email/page/email_inbox/email_inbox.json

@@ -1,23 +0,0 @@
-{
- "content": null, 
- "creation": "2016-04-14 10:22:57.308665", 
- "docstatus": 0, 
- "doctype": "Page", 
- "icon": "fa fa-inbox", 
- "idx": 0, 
- "modified": "2017-01-16 22:46:18.276855", 
- "modified_by": "Administrator", 
- "module": "Email", 
- "name": "email_inbox", 
- "owner": "Administrator", 
- "page_name": "email_inbox", 
- "roles": [
-  {
-   "role": "All"
-  }
- ], 
- "script": null, 
- "standard": "Yes", 
- "style": null, 
- "title": "Email Inbox"
-}

frappe/email/page/email_inbox/inbox_email.html

@@ -1,60 +0,0 @@
-<div class="pull-left media-body" style="max-width: 100%; padding-right: 0px;min-height: 200px;">
-    <div class="media-content-wrapper">
-            <div class="comment-header small" >
-                <span title="{%= data.sender %}">{%= data.sender_full_name?data.sender_full_name:data.sender %}</span>
-                <span class="text-muted" style="font-weight: normal;">
-                    &ndash; {%= data.comment_on %}</span>
-                {% if(data.doctype=="Communication") { %}
-                    {% if (frappe.model.can_read(\'Communication\')) { %}
-                    <a href="#Form/{%= data.doctype %}/{%= data.name %}"
-                        class="text-muted">
-                    {% } %}
-
-                        {% if (data.delivery_status) {
-                            if (in_list(["Sent", "Opened", "Clicked"], data.delivery_status)) {
-                                var indicator_class = "green";
-                            } else {
-                                var indicator_class = "red";
-                            }
-                        %}
-                        <span class="text-muted">&ndash;</span>
-                        <span class="indicator-right {%= indicator_class %} delivery-status-indicator"
-                            title="{%= data.delivery_status %}">
-                            {%= data.delivery_status %}</span>
-
-                        {% } else { %}
-                            {% if (frappe.model.can_read(\'Communication\')) { %}
-                            <span class="text-muted">&ndash;</span>
-                            {%= __("Details") %}
-                            {% } %}
-                        {% } %}
-
-                    {% if (frappe.model.can_read(\'Communication\')) { %}
-                    </a>
-                    {% } %}
-                {% } %}
-            </div>
-
-        {% if(data.attachments && data.attachments.length) { %}
-        <div style="margin: 10px 0px">
-            {% $.each(data.attachments, function(i, a) { %}
-            <div class="ellipsis">
-                <a href="{%= a.file_url.replace(/#/g, \'%23\') %}" class=" small" target="_blank">
-                    <i class="fa fa-paperclip"></i>
-                    {%= a.file_url.split("/").slice(-1)[0] %}
-                    {% if (a.is_private) { %}
-                    <i class="fa fa-lock text-warning"></i>
-                    {% } %}
-                </a>
-            </div>
-            {% }); %}
-        </div>
-        {% } %}
-
-        <div class="reply">
-            <div>
-                {%= data.comment_html %}
-            </div>
-        </div>
-    </div>
-</div>

frappe/email/page/email_inbox/inbox_email_actions.html

@@ -1,11 +0,0 @@
-<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Actions
-    <span class="caret"/>
-</button>
-<ul class="dropdown-menu" style="min-width: 100px">
-    <li class="user-action reply-link"><a>Reply</a></li>
-    <li class="user-action reply-all-link"><a>Reply-All</a></li>
-    <li class="user-action forward-link"><a>Forward</a></li>
-    <li class="user-action delete-link"><a>Delete</a></li>
-    <li class="user-action company-link"><a>{%= data.timeline_label ? "Rematch" : "Match" %}</a></li>
-    <li class="user-action relink-link"><a>{%= data.reference_name ? "Relink": "Link" %} </a></li>
-</ul>

frappe/email/page/email_inbox/inbox_filter.html

@@ -1,8 +0,0 @@
-<div class="list-filters" style="display: none;">
-		<div class="show_filters">
-			<div class="set-filters">
-				<button class="btn btn-default btn-xs show-filter-dashboard text-muted" style="margin-right: 10px;">
-					{%= __("Show Filter Dashboard") %}</button>
-			</div>
-		</div>
-	</div>

frappe/email/page/email_inbox/inbox_footer.html

@@ -1,9 +0,0 @@
-<footer class="footer hidden-xs" style="position: fixed;left: 0;bottom: 0;width: 100%;height: 60px;background-color: #f5f5f5;">
-	<div class="container" >
-		<div class="col-sm-2 hidden-sm"/>
-		<div class="col-sm-7">
-			<ul class="foot-con"/>
-			<div class="footer-numbers" style="vertical-align: middle;float:right;margin: 20px 0"/>
-		</div>
-	</div>
-</footer>

frappe/email/page/email_inbox/inbox_headers.html

@@ -1,27 +0,0 @@
-<div class="list-row list-row-head">
-    <div class="row">
-        <div class="col-mg-5  col-sm-12  list-row-left">
-            <div class="row">
-                <div class="col-sm-2 list-col ellipsis text-muted h6 col-xs-12">
-                    <input class="list-select-all" type="checkbox" style="margin: 0 7px 0 0;" title="Select All">
-                    <span class="list-value" style="vertical-align: top;">Sender</span>
-                </div>
-                <div class="col-sm-4 list-col ellipsis h6 text-muted col-xs-12">
-                    <span class="list-value">Subject</span>
-                </div>
-                <div class="col-sm-2 list-col ellipsis h6 text-muted hidden-xs" title="Company/user this sender will be match to for history">
-                    <span class="list-value">Company/User</span>
-                </div>
-                <div class="col-sm-2 list-col ellipsis h6 text-muted hidden-xs" title="Document this email will display on">
-                    <span class="list-value">Linked Document</span>
-                </div>
-                <div class="col-sm-1 list-col ellipsis h6 text-muted hidden-xs" title="Does the e-mail contain attachment/s">
-                    <span class="list-value"><i class="fa fa-paperclip fa-large"></i></span>
-                </div>
-                <div class="col-sm-1 list-col ellipsis h6 text-muted hidden-xs" title="Time the e-mail was sent">
-                    <span class="list-value">Sent</i></span>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

frappe/public/build.json

@@ -245,6 +245,7 @@
 		"public/js/frappe/views/calendar/calendar.js",
 		"public/js/frappe/views/image/image_view.js",
 		"public/js/frappe/views/kanban/kanban_view.js",
+		"public/js/frappe/views/inbox/inbox_view.js",
 
 		"public/js/frappe/list/header_select_all_like_filter.html",
 		"public/js/frappe/list/item_assigned_to_comment_count.html",
@@ -253,6 +254,9 @@
 		"public/js/frappe/views/image/image_view_item_row.html",
 		"public/js/frappe/views/image/image_view_item_main_head.html",
 		"public/js/frappe/views/image/photoswipe_dom.html",
+
+		"public/js/frappe/views/inbox/inbox_view_item_row.html",
+		"public/js/frappe/views/inbox/inbox_view_item_main_head.html",
 		
 		"public/js/frappe/views/kanban/kanban_board.html",
 		"public/js/frappe/views/kanban/kanban_column.html",

frappe/public/js/frappe/list/list_sidebar.html

@@ -34,18 +34,16 @@
 			</ul>
 		</div>
 	</li>
-	{% if(doctype == "Communication") { %}
-	<li class="hide list-link" data-view="Email Inbox">
+	<li class="hide list-link" data-view="Inbox">
 		<div class="btn-group">
 			<a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 				{{ __("Email Inbox") }} <span class="caret"></span>
 			</a>
-			<ul class="dropdown-menu inbox-dropdown" style="max-height: 300px; overflow-y: auto;">
-				<li class="new-kanban-board"><a>{{ __("New Kanban Board") }}</a></li>
+			<ul class="dropdown-menu email-account-dropdown" style="max-height: 300px; overflow-y: auto;">
+				<li class="new-email-account"><a>{{ __("New Email Account") }}</a></li>
 			</ul>
 		</div>
 	</li>
-	{% } %}
 	<li class="assigned-to-me">
 		<a>{%= __("Assigned To Me") %}</a>
 	</li>

frappe/public/js/frappe/list/list_sidebar.js

@@ -27,7 +27,7 @@ frappe.views.ListSidebar = Class.extend({
 		this.setup_assigned_to_me();
 		this.setup_views();
 		this.setup_kanban_boards();
-
+		this.setup_email_inbox();
 	},
 	setup_views: function() {
 		var show_list_link = false;
@@ -39,6 +39,10 @@ frappe.views.ListSidebar = Class.extend({
 		}
 		//show link for kanban view
 		this.sidebar.find('.list-link[data-view="Kanban"]').removeClass('hide');
+		if(this.doctype === "Communication"){
+			this.sidebar.find('.list-link[data-view="Inbox"]').removeClass('hide');
+			show_list_link = true;
+		}
 
 		if(frappe.treeview_settings[this.doctype]) {
 			this.sidebar.find(".tree-link").removeClass("hide");
@@ -46,11 +50,13 @@ frappe.views.ListSidebar = Class.extend({
 
 		this.current_view = 'List';
 		var route = frappe.get_route();
-		if(route.length > 2 && in_list(['Gantt', 'Image', 'Kanban', 'Calendar'], route[2])) {
+		if(route.length > 2 && in_list(['Gantt', 'Image', 'Kanban', 'Calendar', 'Inbox'], route[2])) {
 			this.current_view = route[2];
 
 			if(this.current_view === 'Kanban') {
 				this.kanban_board = route[3];
+			} else if (this.current_view === 'Inbox') {
+				this.email_account = route[3] || frappe.boot.all_accounts;
 			}
 		}
 
@@ -59,7 +65,7 @@ frappe.views.ListSidebar = Class.extend({
 			.attr('disabled', 'disabled').addClass('disabled');
 
 		//enable link for Kanban view
-		this.sidebar.find('.list-link[data-view="Kanban"] a')
+		this.sidebar.find('.list-link[data-view="Kanban"] a, .list-link[data-view="Inbox"] a')
 			.attr('disabled', null).removeClass('disabled')
 
 		// show image link if image_view
@@ -234,6 +240,30 @@ frappe.views.ListSidebar = Class.extend({
 			}
 		});
 	},
+	setup_email_inbox: function() {
+		// get active email account for the user and add in dropdown
+		if(this.doctype != "Communication")
+			return;
+
+		var $dropdown = this.page.sidebar.find('.email-account-dropdown');
+		var divider = false;
+		accounts = frappe.boot.email_accounts;
+
+		accounts.forEach(function(account) {
+			var route = ["List", "Communication", "Inbox", account.email_account].join('/');
+			if(!divider) {
+				$('<li role="separator" class="divider"></li>').appendTo($dropdown);
+				divider = true;
+			}
+			$('<li><a href="#'+ route + '">'+account.email_id+'</a></li>').appendTo($dropdown);
+			if(account.email_id === "Sent Mail")
+				divider = false
+		});
+
+		$dropdown.find('.new-email-account').click(function() {
+			frappe.new_doc("Email Account")
+		});
+	},
 	setup_assigned_to_me: function() {
 		var me = this;
 		this.page.sidebar.find(".assigned-to-me a").on("click", function() {

frappe/public/js/frappe/list/list_view.js

@@ -185,6 +185,8 @@ frappe.views.ListView = frappe.ui.BaseList.extend({
 			this.list_renderer = new frappe.views.ImageView(opts);
 		} else if (this.current_view === 'Kanban') {
 			this.list_renderer = new frappe.views.KanbanView(opts);
+		} else if (this.current_view === 'Inbox') {
+			this.list_renderer = new frappe.views.InboxView(opts)
 		}
 	},
 
@@ -210,6 +212,9 @@ frappe.views.ListView = frappe.ui.BaseList.extend({
 			if (us.last_view === 'Kanban') {
 				route.push(us['Kanban'].last_kanban_board);
 			}
+
+			if (us.last_view === 'Inbox')
+				route.push(us['Inbox'].last_email_account)
 		}
 
 		frappe.set_route(route);
@@ -266,10 +271,13 @@ frappe.views.ListView = frappe.ui.BaseList.extend({
 	set_filters: function (filters) {
 		var me = this;
 		$.each(filters, function (i, f) {
+			hidden = false
 			if (f.length === 3) {
 				f = [me.doctype, f[0], f[1], f[2]]
+			} else if (f.length === 5) {
+				hidden = f.pop(4) || false
 			}
-			me.filter_list.add_filter(f[0], f[1], f[2], f[3]);
+			me.filter_list.add_filter(f[0], f[1], f[2], f[3], hidden);
 		});
 	},
 
@@ -447,7 +455,7 @@ frappe.views.ListView = frappe.ui.BaseList.extend({
 
 		if (!this.list_renderer.settings.use_route) {
 			var route = frappe.get_route();
-			if (route[2] && !in_list(['Image', 'Gantt', 'Kanban', 'Calendar'], route[2])) {
+			if (route[2] && !in_list(['Image', 'Gantt', 'Kanban', 'Calendar', 'Inbox'], route[2])) {
 				$.each(frappe.utils.get_args_dict_from_url(route[2]), function (key, val) {
 					me.set_filter(key, val, true);
 				});

frappe/public/js/frappe/ui/base_list.js

@@ -354,7 +354,7 @@ frappe.ui.BaseList = Class.extend({
 		}
 
 		this.wrapper.find('.list-paging-area')
-			.toggle(values.length > 0 || this.start > 0);
+			.toggle(values.length > 0|| this.start > 0);
 
 		// callbacks
 		if (this.onrun) this.onrun();
@@ -411,7 +411,7 @@ frappe.ui.BaseList = Class.extend({
 		} else {
 			// no filter for this item,
 			// setup one
-			if (['_user_tags', '_comments', '_assign', '_liked_by'].includes(fieldname)) {
+			if (['_user_tags', '_comments', '_assign', '_liked_by'].ƒincludes(fieldname)) {
 				this.filter_list.add_filter(this.doctype, fieldname, 'like', '%' + label + '%');
 			} else {
 				this.filter_list.add_filter(this.doctype, fieldname, '=', label);

frappe/public/js/frappe/views/communication.js

@@ -85,10 +85,14 @@ frappe.views.CommunicationComposer = Class.extend({
 		];
 
 		// add from if user has access to multiple email accounts
-		if(frappe.boot.email_accounts && frappe.boot.email_accounts.length > 1) {
+		email_accounts = frappe.boot.email_accounts.filter(function(account, idx){
+			return !inList(["All Accounts", "Sent"], account.email_account)
+		})
+		if(frappe.boot.email_accounts && email_accounts.length > 1) {
+
 			fields = [
 				{label: __("From"), fieldtype: "Select", reqd: 1, fieldname: "sender",
-					options: frappe.boot.email_accounts.map(function(e) { return e.email_id; }) }
+					options: accounts.map(function(e) { return e.email_id; }) }
 			].concat(fields);
 		}
 
@@ -104,6 +108,7 @@ frappe.views.CommunicationComposer = Class.extend({
 		this.setup_last_edited_communication();
 		this.setup_standard_reply();
 		$(this.dialog.fields_dict.recipients.input).val(this.recipients || "").change();
+		$(this.dialog.fields_dict.cc.input).val(this.cc || "").change();
 		if(this.dialog.fields_dict.sender) {
 			$(this.dialog.fields_dict.sender.input).val(this.sender || "").change();
 		}
@@ -116,6 +121,7 @@ frappe.views.CommunicationComposer = Class.extend({
 
 		if(!this.forward && !this.recipients && this.last_email) {
 			this.recipients = this.last_email.sender;
+			this.cc = this.last_email.cc;
 		}
 
 		if(!this.forward && !this.recipients) {

frappe/public/js/frappe/views/inbox/inbox_view.js

@@ -0,0 +1,100 @@
+/**
+ * frappe.views.EmailInboxView
+ */
+
+ frappe.provide("frappe.views");
+
+frappe.views.InboxView = frappe.views.ListRenderer.extend({
+	name: 'Inbox',
+	render_view: function(values) {
+		var me = this;
+		var email_account = this.get_email_account();
+		this.emails = values;
+		// save email account in user_settings
+		frappe.model.user_settings.save("Communication", 'Inbox', {
+			last_email_account: email_account
+		});
+
+		this.render_inbox_view();
+	},
+	render_inbox_view: function() {
+		var html = this.emails.map(this.render_email_row.bind(this)).join("");
+		this.container = $('<div>')
+			.addClass('inbox-container')
+			.appendTo(this.wrapper);
+		this.container.append(html);
+	},
+	render_email_row: function(email) {
+		if(!email.css_seen && email.seen)
+			email.css_seen = "seen"
+		if(email.has_attachment)
+			email.attachment_html = '<span class="text-muted"><i class="fa fa-paperclip fa-large"></i></span>'
+
+		return frappe.render_template("inbox_view_item_row", {
+			data: email,
+			is_sent_emails: this.is_sent_emails,
+		});
+	},
+	set_defaults: function() {
+		this._super();
+		this.show_no_result = false;
+		this.page_title = __("Email Inbox");
+	},
+
+	init_settings: function() {
+		this._super();
+		this.filters = this.get_inbox_filters();
+	},
+	should_refresh: function() {
+		var to_refresh = this._super();
+		if(!to_refresh) {
+			this.last_email_account = this.current_email_account || '';
+			this.current_email_account = this.get_email_account();
+			this.is_sent_emails = this.current_email_account === "Sent"? true: false
+
+			to_refresh = this.current_email_account !== this.last_email_account;
+		}
+
+		if(to_refresh){
+			this.list_view.page.main.find(".list-headers").empty();
+			this.list_view.init_headers();
+		}
+		return to_refresh;
+	},
+	get_inbox_filters: function() {
+		var email_account = this.get_email_account();
+		var default_filters = [
+			["Communication", "communication_type", "=", "Communication", true],
+			["Communication", "communication_medium", "=", "Email", true],
+			
+		]
+		var filters = []
+		if (email_account === "Sent")
+			filters = default_filters.concat([
+				["Communication", "sent_or_received", "=", "Sent", true]
+			])
+		else
+			filters = default_filters.concat([
+				["Communication", "sent_or_received", "=", "Received", true],
+				["Communication", "email_account", "=", email_account, true]
+			])
+
+		return filters
+	},
+	get_header_html: function() {
+		var header = frappe.render_template('inbox_view_item_main_head', {
+			_checkbox: ((frappe.model.can_delete(this.doctype) || this.settings.selectable)
+				&& !this.no_delete),
+			is_sent_emails: this.is_sent_emails
+		});
+		return header;
+	},
+	get_email_account: function() {
+		var route = frappe.get_route();
+		if(!route[3] || !frappe.boot.email_accounts.find(b => b.email_account === route[3])) {
+			frappe.throw(__(`Email Account <b>${route[3] || ''}</b> not found`));
+			return;
+		}
+		return route[3];
+	}
+});

frappe/public/js/frappe/views/inbox/inbox_view_item_main_head.html

@@ -0,0 +1,24 @@
+<div class="list-row list-row-head" data-list-renderer="Inbox">
+    <div class="row doclist-row">
+        <div class="col-sm-10 list-row-left">
+            <!-- title + columns -->
+			<div class="row">
+				<div class="col-sm-8 col-xs-12 list-col ellipsis h6 text-muted">
+					<div class="list-value">
+						{% if (_checkbox) { %}
+						<input class="list-select-all" type="checkbox"
+							title="{%= __("Select All") %}">
+						{% } %}
+						<span class="list-col-title">{%= __("Subject") %}</span>
+					</div>
+				</div>
+				<div class="col-sm-4 hidden-xs list-col ellipsis h6 text-muted">
+					<div class="list-value">
+						<span class="list-col-title">{%= __(is_sent_emails ? "To": "From") %}</span>
+					</div>
+				</div>
+			</div>
+        </div>
+        <div class="col-sm-2 hidden-xs list-row-right"></div>
+    </div>
+</div>

frappe/public/js/frappe/views/inbox/inbox_view_item_row.html

@@ -0,0 +1,34 @@
+<div class="list-row">
+	<div class="row doclist-row {% if (data._checkbox) { %} has-checkbox {% } %}">
+		<div class="col-sm-10 col-xs-10 list-row-left">
+			<div class="row">
+				<div class="col-sm-8 list-col ellipsis h6 text-muted">
+					<span class="list-value">
+						{% if (data._checkbox) { %}
+						<input class="list-row-checkbox" type="checkbox" data-name="{{data.name}}">
+						{% } %}
+						<a class="grey list-id {{ data.css_seen }}" href="#Form/{%= data._doctype_encoded %}/{%= data._name_encoded %}">
+							{%= data.subject %}
+						</a>
+					</span>
+				</div>
+				<div class="col-sm-4  hidden-xs list-col ellipsis h6 text-muted">
+					<span class="filterable text-muted" data-filter="sender,=,{%= data.sender %}">
+						{%= is_sent_emails? data.recipients: data.sender %}
+					</span>
+				</div>
+			</div>
+		</div>
+		<div class="col-sm-2 col-xs-2 text-right list-row-right" style="padding-left:0px">
+			<div class="visible-xs">
+				{%= data.attachment_html %}
+			</div>
+			<div class="hidden-xs">
+				{%= data.attachment_html %}
+				<span class="list-row-modified text-muted">
+					{%= comment_when(data.modified, true) %}
+				</span>
+			</div>
+		</div>
+	</div>
+</div>