Chat: Move chat forms from page to dialog

Part of issue: indico/indico#2596

chat/indico_chat/controllers/management.py

@@ -17,7 +17,7 @@
 from __future__ import unicode_literals
 
 from flask import session, flash, redirect, jsonify
-from flask_pluginengine import current_plugin
+from flask_pluginengine import current_plugin, render_plugin_template
 
 from indico.core.db import db
 from indico.core.db.sqlalchemy.util.models import attrs_changed
@@ -27,6 +27,7 @@ from indico.modules.events.logs import EventLogRealm, EventLogKind
 from indico.util.date_time import now_utc
 from indico.util.string import to_unicode
 from indico.web.forms.base import FormDefaults
+from indico.web.util import jsonify_data, jsonify_template
 
 from indico_chat import _
 from indico_chat.controllers.base import RHChatManageEventBase, RHEventChatroomMixin
@@ -82,10 +83,9 @@ class RHChatManageEventModify(RHEventChatroomMixin, RHChatManageEventBase):
             flash(_('Chatroom updated'), 'success')
             self.event.log(EventLogRealm.management, EventLogKind.change, 'Chat',
                            'Chatroom updated: {}'.format(self.chatroom.name), session.user)
-            return redirect(url_for_plugin('.manage_rooms', self.event))
-        return WPChatEventMgmt.render_template('manage_event_edit.html', self._conf, form=form,
-                                               event_chatroom=self.event_chatroom, event=self.event)
-
+            return jsonify_data(flash=False)
+        return jsonify_template('manage_event_edit.html', render_plugin_template, form=form,
+                                event=self.event, event_chatroom=self.event_chatroom)
 
 class RHChatManageEventRefresh(RHEventChatroomMixin, RHChatManageEventBase):
     """Synchronizes the local chatroom data with the XMPP server"""
@@ -136,8 +136,8 @@ class RHChatManageEventCreate(RHChatManageEventBase):
             self.event.log(EventLogRealm.management, EventLogKind.positive, 'Chat',
                            'Chatroom created: {}'.format(chatroom.name), session.user)
             flash(_('Chatroom created'), 'success')
-            return redirect(url_for_plugin('.manage_rooms', self.event))
-        return WPChatEventMgmt.render_template('manage_event_edit.html', self._conf, form=form, event=self.event)
+            return jsonify_data(flash=False)
+        return jsonify_template('manage_event_edit.html', render_plugin_template, form=form, event=self.event)
 
 
 class RHChatManageEventAttach(AttachChatroomMixin, RHChatManageEventBase):

chat/indico_chat/templates/manage_event.html

@@ -1,7 +1,6 @@
 {% extends 'layout/base.html' %}
 {% from 'forms/_form.html' import form_header, form_row, form_footer  %}
 
-{% block title %}{% trans %}Chat Rooms{% endtrans %}{% endblock %}
 {% block content %}
     <div class="plugin-chat chat-mgmt" style="margin-bottom: 2em;">
         {% if event_chatrooms %}
@@ -27,7 +26,13 @@
                                         {% if logs_enabled and not chatroom.custom_server %}
                                             <a href="{{ url_for_plugin('.manage_rooms_logs', event_chatroom) }}" class="i-button icon-file-content" title="{% trans %}Logs{% endtrans %}"></a>
                                         {% endif %}
-                                        <a href="{{ url_for_plugin('.manage_rooms_modify', event_chatroom) }}" class="i-button icon-edit" title="{%- trans %}Edit{% endtrans -%}"></a>
+                                        <a href="#" class="i-button icon-edit"
+                                           title="{% trans %}Edit{% endtrans %}"
+                                           data-href="{{ url_for_plugin('.manage_rooms_modify', event_chatroom) }}"
+                                           data-title="{% trans %}Edit chatroom{% endtrans %}"
+                                           data-ajax-dialog
+                                           data-reload-after>
+                                        </a>
                                         {% if not chatroom.custom_server %}
                                             <a href="#" class="i-button icon-loop js-chat-refresh-room" data-href="{{ url_for_plugin('.manage_rooms_refresh', event_chatroom) }}" title="{% trans %}Refresh{% endtrans %}"></a>
                                         {% endif %}
@@ -88,7 +93,13 @@
                 <div class="message-text">{% trans %}No chatrooms have been added yet.{% endtrans %}</div>
             </div>
         {% endif %}
-        <a class="i-button bottom icon-plus" href="{{ url_for_plugin('.manage_rooms_create', event) }}">{% trans %}Create new room{% endtrans %}</a>
+        <a class="i-button bottom icon-plus"
+           data-href="{{ url_for_plugin('.manage_rooms_create', event) }}"
+           data-title="{% trans %}Create chatroom{% endtrans %}"
+           data-ajax-dialog
+           data-reload-after>
+            {%- trans %}Create new room{% endtrans -%}
+        </a>
     </div>
 
     {% if attach_form %}

chat/indico_chat/templates/manage_event_edit.html

@@ -1,51 +1,38 @@
-{% extends 'layout/base.html' %}
 {% from 'forms/_form.html' import form_header, form_fieldset, form_footer, form_rows %}
 {% set chatroom = event_chatroom.chatroom if event_chatroom %}
 
-{% block title %}{% trans %}Chat Rooms{% endtrans %}{% endblock %}
+{{ form_header(form, id='chatroom-form') }}
 
-{% block subtitle %}
-    {%- if chatroom -%}
-        {% trans %}Edit chatroom{% endtrans %}
-    {%- else -%}
-        {% trans %}Create chatroom{% endtrans %}
-    {%- endif -%}
-{% endblock %}
+{% call form_fieldset(legend='Chatroom settings') %}
+    {{ form_rows(form, skip=form.event_specific_fields) }}
+{% endcall %}
 
-{% block content %}
-    {{ form_header(form, id='chatroom-form') }}
+{% call form_fieldset(legend='Event settings', description='These settings affect only the current event even if the chatroom is used in multiple events.') %}
+    {{ form_rows(form, fields=form.event_specific_fields) }}
+{% endcall %}
 
-    {% call form_fieldset(legend='Chatroom settings') %}
-        {{ form_rows(form, skip=form.event_specific_fields) }}
-    {% endcall %}
+{% call form_footer(form) %}
+    <input class="i-button big highlight" type="submit" value="{% trans %}Save{% endtrans %}"
+           {% if chatroom %}data-disabled-until-change{% endif %}>
+    <a href="{{ url_for_plugin('.manage_rooms', event) }}" class="i-button big">{% trans %}Cancel{% endtrans %}</a>
+{% endcall %}
 
-    {% call form_fieldset(legend='Event settings', description='These settings affect only the current event even if the chatroom is used in multiple events.') %}
-        {{ form_rows(form, fields=form.event_specific_fields) }}
-    {% endcall %}
+<script>
+    $('#chatroom-form').on('submit', function() {
+        $('.save-chatroom').prop('disabled', true).blur();
+    });
 
-    {% call form_footer(form) %}
-        <input class="i-button big highlight" type="submit" value="{% trans %}Save{% endtrans %}"
-               {% if chatroom %}data-disabled-until-change{% endif %}>
-        <a href="{{ url_for_plugin('.manage_rooms', event) }}" class="i-button big">{% trans %}Cancel{% endtrans %}</a>
-    {% endcall %}
+    $('#use_custom_server').on('change', function() {
+        var server = $('#custom_server');
+        server.prop('disabled', !this.checked);
+        if (!this.checked) {
+            // Hide the error tooltip in case it is active.
+            server.qtip('hide');
+            server.parent().parent().removeClass('has-error');
+        }
+    });
 
-    <script>
-        $('#chatroom-form').on('submit', function() {
-            $('.save-chatroom').prop('disabled', true).blur();
-        });
-
-        $('#use_custom_server').on('change', function() {
-            var server = $('#custom_server');
-            server.prop('disabled', !this.checked);
-            if (!this.checked) {
-                // Hide the error tooltip in case it is active.
-                server.qtip('hide');
-                server.parent().parent().removeClass('has-error');
-            }
-        });
-
-        $(document).ready(function() {
-            $('#custom_server').prop('disabled', !$('#use_custom_server').prop('checked'));
-        });
-    </script>
-{% endblock %}
+    $(document).ready(function() {
+        $('#custom_server').prop('disabled', !$('#use_custom_server').prop('checked'));
+    });
+</script>