Improve/fix some views for Messages per Vue.js theme

tailbone/templates/messages/archive/index.mako

@@ -5,9 +5,11 @@
 
 <%def name="extra_javascript()">
   ${parent.extra_javascript()}
+  % if not use_buefy:
   <script type="text/javascript">
     destination = "Inbox";
   </script>
+  % endif
 </%def>
 
 <%def name="context_menu_items()">
@@ -16,13 +18,5 @@
   <li>${h.link_to("Go to my Sent Messages", url('messages.sent'))}</li>
 </%def>
 
-<%def name="grid_tools()">
-  ${h.form(url('messages.move_bulk'), name='move-selected')}
-  ${h.csrf_token(request)}
-  ${h.hidden('destination', value='inbox')}
-  ${h.hidden('uuids')}
-  <button type="submit">Move 0 selected to Inbox</button>
-  ${h.end_form()}
-</%def>
 
 ${parent.body()}

tailbone/templates/messages/inbox/index.mako

@@ -1,13 +1,15 @@
-## -*- coding: utf-8 -*-
+## -*- coding: utf-8; -*-
 <%inherit file="/messages/index.mako" />
 
 <%def name="title()">Message Inbox</%def>
 
 <%def name="extra_javascript()">
   ${parent.extra_javascript()}
+  % if not use_buefy:
   <script type="text/javascript">
     destination = "Archive";
   </script>
+  % endif
 </%def>
 
 <%def name="context_menu_items()">
@@ -16,13 +18,5 @@
   <li>${h.link_to("Go to my Sent Messages", url('messages.sent'))}</li>
 </%def>
 
-<%def name="grid_tools()">
-  ${h.form(url('messages.move_bulk'), name='move-selected')}
-  ${h.csrf_token(request)}
-  ${h.hidden('destination', value='archive')}
-  ${h.hidden('uuids')}
-  <button type="submit">Move 0 selected to Archive</button>
-  ${h.end_form()}
-</%def>
 
 ${parent.body()}

tailbone/templates/messages/index.mako

@@ -3,6 +3,7 @@
 
 <%def name="extra_javascript()">
   ${parent.extra_javascript()}
+  % if not use_buefy:
   <script type="text/javascript">
 
     var destination = null;
@@ -43,6 +44,7 @@
     });
 
   </script>
+  % endif
 </%def>
 
 <%def name="context_menu_items()">
@@ -51,4 +53,54 @@
   % endif
 </%def>
 
+<%def name="grid_tools()">
+  % if request.matched_route.name in ('messages.inbox', 'messages.archive'):
+      % if use_buefy:
+          ${h.form(url('messages.move_bulk'), **{'@submit': 'moveMessagesSubmit'})}
+          ${h.csrf_token(request)}
+          ${h.hidden('destination', value='archive' if request.matched_route.name == 'messages.inbox' else 'inbox')}
+          ${h.hidden('uuids', v_model='selected_uuids')}
+          <b-button type="is-primary"
+                    native-type="submit"
+                    :disabled="moveMessagesSubmitting || !checkedRows.length">
+            {{ moveMessagesTextCurrent }}
+          </b-button>
+          ${h.end_form()}
+      % else:
+          ${h.form(url('messages.move_bulk'), name='move-selected')}
+          ${h.csrf_token(request)}
+          ${h.hidden('destination', value='archive' if request.matched_route.name == 'messages.inbox' else 'inbox')}
+          ${h.hidden('uuids')}
+          <button type="submit">Move 0 selected to ${'Archive' if request.matched_route.name == 'messages.inbox' else 'Inbox'}</button>
+          ${h.end_form()}
+      % endif
+  % endif
+</%def>
+
+<%def name="modify_this_page_vars()">
+  ${parent.modify_this_page_vars()}
+  % if request.matched_route.name in ('messages.inbox', 'messages.archive'):
+      <script type="text/javascript">
+
+        TailboneGridData.moveMessagesSubmitting = false
+        TailboneGridData.moveMessagesText = null
+
+        TailboneGrid.computed.moveMessagesTextCurrent = function() {
+            if (this.moveMessagesText) {
+                return this.moveMessagesText
+            }
+            let count = this.checkedRows.length
+            return "Move " + count.toString() + " selected to ${'Archive' if request.matched_route.name == 'messages.inbox' else 'Inbox'}"
+        }
+
+        TailboneGrid.methods.moveMessagesSubmit = function() {
+            this.moveMessagesSubmitting = true
+            this.moveMessagesText = "Working, please wait..."
+        }
+
+      </script>
+  % endif
+</%def>
+
+
 ${parent.body()}

tailbone/templates/messages/view.mako

@@ -3,6 +3,7 @@
 
 <%def name="extra_javascript()">
   ${parent.extra_javascript()}
+  % if not use_buefy:
   <script type="text/javascript">
 
     $(function() {
@@ -21,10 +22,24 @@
     });
 
   </script>
+  % endif
 </%def>
 
 <%def name="extra_styles()">
   ${parent.extra_styles()}
+  % if use_buefy:
+      <style type="text/css">
+        .everyone {
+            cursor: pointer;
+        }
+        .tailbone-message-body {
+            margin: 1rem auto;
+        }
+        .tailbone-message-body p {
+            margin-bottom: 1rem;
+        }
+      </style>
+  % else:
   <style type="text/css">
     .recipients .everyone {
         cursor: pointer;
@@ -44,6 +59,7 @@
         margin-bottom: 15px;
     }
   </style>
+  % endif
 </%def>
 
 <%def name="context_menu_items()">
@@ -51,7 +67,7 @@
       <li>${h.link_to("Send a new Message", url('messages.create'))}</li>
   % endif
   % if recipient:
-      % if recipient.status == rattail.enum.MESSAGE_STATUS_INBOX:
+      % if recipient.status == enum.MESSAGE_STATUS_INBOX:
           <li>${h.link_to("Back to Message Inbox", url('messages.inbox'))}</li>
           <li>${h.link_to("Go to my Message Archive", url('messages.archive'))}</li>
           <li>${h.link_to("Go to my Sent Messages", url('messages.sent'))}</li>
@@ -69,18 +85,44 @@
 
 <%def name="message_tools()">
   % if recipient:
+      % if use_buefy:
+          <div class="buttons">
+            % if request.has_perm('messages.create'):
+                <once-button type="is-primary"
+                             tag="a" href="${url('messages.reply', uuid=instance.uuid)}"
+                             text="Reply">
+                </once-button>
+                <once-button type="is-primary"
+                             tag="a" href="${url('messages.reply_all', uuid=instance.uuid)}"
+                             text="Reply to All">
+                </once-button>
+            % endif
+            % if recipient.status == enum.MESSAGE_STATUS_INBOX:
+                <once-button type="is-primary"
+                             tag="a" href="${url('messages.move', uuid=instance.uuid)}?dest=archive"
+                             text="Move to Archive">
+                </once-button>
+            % else:
+                <once-button type="is-primary"
+                             tag="a" href="${url('messages.move', uuid=instance.uuid)}?dest=inbox"
+                             text="Move to Inbox">
+                </once-button>
+            % endif
+          </div>
+      % else:
           <div class="message-tools">
             % if request.has_perm('messages.create'):
                 ${h.link_to("Reply", url('messages.reply', uuid=instance.uuid), class_='button')}
                 ${h.link_to("Reply to All", url('messages.reply_all', uuid=instance.uuid), class_='button')}
             % endif
-      % if recipient.status == rattail.enum.MESSAGE_STATUS_INBOX:
+            % if recipient.status == enum.MESSAGE_STATUS_INBOX:
                 ${h.link_to("Move to Archive", url('messages.move', uuid=instance.uuid) + '?dest=archive', class_='button')}
             % else:
                 ${h.link_to("Move to Inbox", url('messages.move', uuid=instance.uuid) + '?dest=inbox', class_='button')}
             % endif
           </div>
       % endif
+  % endif
 </%def>
 
 <%def name="message_body()">
@@ -89,14 +131,39 @@
 
 <%def name="page_content()">
   ${parent.page_content()}
-
+  % if use_buefy:
+      <br />
+      <div style="margin-left: 5rem;">
+        ${self.message_tools()}
+        <div class="tailbone-message-body">
+          ${self.message_body()}
+        </div>
+        ${self.message_tools()}
+      </div>
+  % else:
       ${self.message_tools()}
-
       <div class="message-body">
         ${self.message_body()}
       </div>
-
       ${self.message_tools()}
+  % endif
+</%def>
+
+<%def name="modify_this_page_vars()">
+  ${parent.modify_this_page_vars()}
+  <script type="text/javascript">
+
+    TailboneFormData.showingAllRecipients = false
+
+    TailboneForm.methods.showMoreRecipients = function() {
+        this.showingAllRecipients = true
+    }
+
+    TailboneForm.methods.hideMoreRecipients = function() {
+        this.showingAllRecipients = false
+    }
+
+  </script>
 </%def>
 
 

tailbone/views/messages.py

@@ -139,6 +139,9 @@ class MessagesView(MasterView):
             return 'you'
         return six.text_type(sender)
 
+    def render_subject_bold(self, message, field):
+        return HTML.tag('span', c=message.subject, style='font-weight: bold;')
+
     def render_recipients(self, message, column_name):
         recipients = message.recipients
         if recipients:
@@ -156,18 +159,44 @@ class MessagesView(MasterView):
         recipients = message.recipients
         if not recipients:
             return ""
+
+        use_buefy = self.get_use_buefy()
+
+        # remove current user from displayed list, even if they're a recipient
         recips = [r for r in recipients
                   if r.recipient is not self.request.user]
+
+        # sort recipients by display name
         recips = sorted([r.recipient.display_name for r in recips])
+
+        # if we *did* remove current user from list, insert them at front of list
         if len(recips) < len(recipients) and (
                 message.sender is not self.request.user or not recips):
             recips.insert(0, 'you')
+
+        # we only want to show the first 5 recipients by default, with
+        # client-side JS allowing the user to view all if they want
         max_display = 5
         if len(recips) > max_display:
+            if use_buefy:
+                basic = HTML.tag('span', c="{}, ".format(', '.join(recips[:max_display-1])))
+                more = tags.link_to("({} more)".format(len(recips[max_display-1:])), '#', **{
+                    'v-show': '!showingAllRecipients',
+                    '@click.prevent': 'showMoreRecipients()',
+                })
+                everyone = HTML.tag('span', c=', '.join(recips[max_display-1:]), **{
+                    'v-show': 'showingAllRecipients',
+                    '@click': 'hideMoreRecipients()',
+                    'class_': 'everyone',
+                })
+                return HTML.tag('div', c=[basic, more, everyone])
+            else:
                 basic = HTML.literal("{}, ".format(', '.join(recips[:max_display-1])))
                 more = tags.link_to("({} more)".format(len(recips[max_display-1:])), '#', class_='more')
                 everyone = HTML.tag('span', class_='everyone', c=', '.join(recips[max_display-1:]))
                 return basic + more + everyone
+
+        # show the full list if there are few enough recipients for that
         return ', '.join(recips)
 
     # TODO!!
@@ -181,6 +210,7 @@ class MessagesView(MasterView):
 
     def configure_form(self, f):
         super(MessagesView, self).configure_form(f)
+        use_buefy = self.get_use_buefy()
 
         # we have custom logic to disable submit button
         f.auto_disable = False
@@ -196,6 +226,9 @@ class MessagesView(MasterView):
         f.set_renderer('recipients', self.render_recipients_full)
         f.set_label('recipients', "To")
 
+        if use_buefy:
+            f.set_renderer('subject', self.render_subject_bold)
+
         f.set_widget('body', dfwidget.TextAreaWidget(cols=50, rows=15))
 
         if self.creating:
@@ -317,8 +350,15 @@ class MessagesView(MasterView):
 
     def template_kwargs_view(self, **kwargs):
         message = kwargs['instance']
-        return {'message': message,
+        recipient = self.get_recipient(message)
-                'recipient': self.get_recipient(message)}
+
+        kwargs['message'] = message
+        kwargs['recipient'] = recipient
+
+        if recipient.status == self.enum.MESSAGE_STATUS_ARCHIVE:
+            kwargs['index_url'] = self.request.route_url('messages.archive')
+
+        return kwargs
 
     def reply(self):
         """