Messages: first cut

2018-08-01 19:19:53 +05:30
parent 4d4791ab39
commit 2a81b4acd6
3 changed files with 155 additions and 4 deletions
--- a/erpnext/public/js/hub/pages/messages.js
+++ b/erpnext/public/js/hub/pages/messages.js
@@ -1,7 +1,118 @@
 import SubPage from './subpage';
+import { make_search_bar } from '../helpers';

 erpnext.hub.Messages = class Messages extends SubPage {
-    refresh() {
+    make_wrapper() {
+        super.make_wrapper();

+        const html = `
+            <div class="row">
+                <div class="col-md-5">
+                    <div class="seller-list"></div>
+                </div>
+                <div class="col-md-7">
+                    ${get_message_area_html()}
+                </div>
+            </div>
+        `;
+
+        make_search_bar({
+            wrapper: this.$wrapper,
+            on_search: keyword => {
+
+            },
+            placeholder: __('Search for messages')
+        })
+
+        this.$wrapper.append(html);
+
+        this.message_input = new frappe.ui.CommentArea({
+            parent: this.$wrapper.find('.message-input'),
+            on_submit: (message) => {
+                this.message_input.reset();
+
+                // append message html
+                const $message_list = this.$wrapper.find('.message-list');
+                const message_html = get_message_html({
+                    sender: hub.settings.company_email,
+                    content: message
+                });
+                $message_list.append(message_html);
+                frappe.dom.scroll_to_bottom($message_list);
+
+                const to_seller = frappe.get_route()[2];
+                hub.call('send_message', {
+                    from_seller: hub.settings.company_email,
+                    to_seller,
+                    message
+                });
+            },
+            no_wrapper: true
+        });
    }
+
+    refresh() {
+        this.get_interactions()
+            .then(sellers => {
+                const html = sellers.map(get_list_item_html).join('');
+                this.$wrapper.find('.seller-list').html(html);
+            });
+
+        this.get_messages()
+            .then(messages => {
+                const $message_list = this.$wrapper.find('.message-list');
+                const html = messages.map(get_message_html).join('');
+                $message_list.html(html);
+                frappe.dom.scroll_to_bottom($message_list);
+            });
+    }
+
+    get_interactions() {
+        return hub.call('get_sellers_with_interactions', { for_seller: hub.settings.company_email });
+    }
+
+    get_messages() {
+        const against_seller = frappe.get_route()[2];
+        if (!against_seller) return Promise.resolve([]);
+
+        return hub.call('get_messages', {
+            for_seller: hub.settings.company_email,
+            against_seller: against_seller
+        });
+    }
+}
+
+function get_message_area_html() {
+    return `
+        <div class="message-area border padding flex flex-column">
+            <div class="message-list">
+            </div>
+            <div class="message-input">
+            </div>
+        </div>
+    `;
+}
+
+function get_list_item_html(seller) {
+    const active_class = frappe.get_route()[2] === seller.email ? 'active' : '';
+
+    return `
+        <div class="message-list-item ${active_class}" data-route="marketplace/messages/${seller.email}">
+            <div class="list-item-left">
+                <img src="${seller.image || 'https://picsum.photos/200?random'}">
+            </div>
+            <div class="list-item-body">
+                ${seller.company}
+            </div>
+        </div>
+    `;
+}
+
+function get_message_html(message) {
+    return `
+        <div>
+            <h5>${message.sender}</h5>
+            <p>${message.content}</p>
+        </div>
+    `;
 }