Move rule editing into a modal dialog

app/models/rule.rb

@@ -61,21 +61,14 @@ class DiscourseChat::Rule < DiscourseChat::PluginModel
     end
   end
 
-  # Don't want this to end up as anything other than an integer
+  # These are only allowed to be integers
-  def category_id=(val)
+  %w(channel_id category_id group_id).each do |name|
-    if val.nil? or val.blank?
+    define_method "#{name}=" do |val|
-      super(nil)
+      if val.nil? or val.blank?
-    else
+        super(nil)
-      super(val.to_i)
+      else
-    end
+        super(val.to_i)
-  end
+      end
-
-  # Don't want this to end up as anything other than an integer
-  def channel_id=(val)
-    if val.nil? or val.blank?
-      super(nil)
-    else
-      super(val.to_i)
     end
   end
 

assets/javascripts/admin/components/channel-data.js.es6

@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  classNames: ['channel-info'],
+});

assets/javascripts/admin/components/channel-details.js.es6

@@ -26,8 +26,11 @@ export default Ember.Component.extend({
     },
 
     createRule(channel){
-      var newRule = this.get('store').createRecord('rule',{channel_id: channel.id});
+      this.sendAction('createRule', channel)
-      channel.rules.pushObject(newRule)
+    },
+
+    editRule(rule){
+      this.sendAction('editRule', rule, this.get('channel'))
     },
 
     showError(error_key){

assets/javascripts/admin/components/rule-row.js.es6

@@ -2,37 +2,21 @@ import { popupAjaxError } from 'discourse/lib/ajax-error';
 
 export default Ember.Component.extend({
   tagName: 'tr',
-  editing: false,
-
-  autoEdit: function(){
-    if(!this.get('rule').id){
-      this.set('editing', true);
-    }
-  }.on('init'),
 
   actions: {
     edit: function(){
-      this.set('editing', true);
+      this.sendAction('edit', this.get('rule'))
     },
-
-    cancel: function(){
-      this.send('refresh');
-    },
-
-    save: function(){
-      this.get('rule').save().then(result => {
-        this.send('refresh');
-      }).catch(popupAjaxError);
-    },
-
     delete(rule){
       rule.destroyRecord().then(() => {
         this.send('refresh');
       }).catch(popupAjaxError)
     },
-
     refresh: function(){
       this.sendAction('refresh');
     }
+
+
+
   }
 });

assets/javascripts/admin/controllers/admin-plugins-chat-provider.js.es6

@@ -35,6 +35,17 @@ export default Ember.Controller.extend({
       showModal('admin-plugins-chat-test', { model: model, admin: true });
     },
 
+    createRule(channel){
+      this.set('modalShowing', true);
+      var model = {rule: this.store.createRecord('rule',{channel_id: channel.id}), channel:channel, provider:this.get('model.provider')};
+      showModal('admin-plugins-chat-edit-rule', { model: model, admin: true });
+    },
+    editRule(rule, channel){
+      this.set('modalShowing', true);
+      var model = {rule: rule, channel:channel, provider:this.get('model.provider')};
+      showModal('admin-plugins-chat-edit-rule', { model: model, admin: true });
+    },
+
   }
 
 });

assets/javascripts/admin/controllers/modals/admin-plugins-chat-edit-rule.js.es6

@@ -0,0 +1,42 @@
+import Rule from 'discourse/plugins/discourse-chat-integration/admin/models/rule'
+import ModalFunctionality from 'discourse/mixins/modal-functionality';
+import { ajax } from 'discourse/lib/ajax';
+import { extractError } from 'discourse/lib/ajax-error';
+import InputValidation from 'discourse/models/input-validation';
+
+export default Ember.Controller.extend(ModalFunctionality, {
+
+  setupKeydown: function() {
+    Ember.run.schedule('afterRender', () => {
+      $('#chat_integration_edit_channel_modal').keydown(e => {
+        if (e.keyCode === 13) {
+          this.send('save');
+        }
+      });
+    });
+  }.on('init'),
+
+
+  saveDisabled: function(){
+    return false;
+  }.property(),
+
+  actions: {
+    cancel: function(){
+      this.send('closeModal');
+    },
+
+    save: function(){
+      if(this.get('saveDisabled')){return};
+
+    	const self = this;
+
+    	this.get('model.rule').save().then(function(result) {
+        self.send('closeModal');
+      }).catch(function(error) {
+        self.flash(extractError(error), 'error');
+      });
+
+    }
+  }
+});

assets/javascripts/admin/models/rule.js.es6

@@ -30,12 +30,12 @@ export default RestModel.extend({
   },
 
   updateProperties() {
-    var prop_names = ['category_id','tags','filter'];
+    var prop_names = ['category_id','group_id','tags','filter'];
     return this.getProperties(prop_names);
   },
 
   createProperties() {
-    var prop_names = ['channel_id', 'category_id','tags','filter'];
+    var prop_names = ['channel_id', 'category_id','group_id','tags','filter'];
     return this.getProperties(prop_names);
   }
 

assets/javascripts/admin/templates/modal/admin-plugins-chat-edit-rule.hbs

@@ -0,0 +1,81 @@
+{{#d-modal-body id="chat_integration_edit_rule_modal" title="chat_integration.edit_rule_modal.title"}}
+  <div>
+    <form {{action "save" on="submit"}}>
+      <table>
+
+      	<tr class="input">
+          <td class="label"><label for='provider'>{{i18n "chat_integration.edit_rule_modal.provider"}}</label></td>
+          <td>
+          	{{i18n (concat 'chat_integration.provider.' model.channel.provider '.title')}}
+          </td>
+        </tr>
+        <tr class="instructions">
+          <td></td>
+          <td></td>
+        </tr>
+
+        <tr class="input">
+          <td class="label"><label for='channel'>{{i18n "chat_integration.edit_rule_modal.channel"}}</label></td>
+          <td>
+            {{channel-data provider=model.provider channel=model.channel}}
+          </td>
+        </tr>
+        <tr class="instructions">
+          <td></td>
+          <td></td>
+        </tr>
+
+        <tr class="input">
+          <td class="label"><label for='filter'>{{i18n "chat_integration.edit_rule_modal.filter"}}</label></td>
+          <td>
+            {{combo-box name="filter" content=model.rule.available_filters value=model.rule.filter}}
+          </td>
+        </tr>
+        <tr class="instructions">
+          <td></td>
+          <td><label>{{i18n 'chat_integration.edit_rule_modal.instructions.filter'}}</label></td>
+        </tr>
+
+        <tr class="input">
+          <td class="label"><label for='category'>{{i18n "chat_integration.edit_rule_modal.category"}}</label></td>
+          <td>
+            {{category-chooser
+              name="category"
+              value=model.rule.category_id
+              rootNoneLabel="chat_integration.all_categories"
+              rootNone=true
+              overrideWidths=false
+              }} 
+          </td>
+        </tr>
+        <tr class="instructions">
+          <td></td>
+          <td><label>{{i18n 'chat_integration.edit_rule_modal.instructions.category'}}</label></td>
+        </tr>
+
+        {{#if siteSettings.tagging_enabled}}
+          <tr class="input">
+            <td class="label"><label for='tags'>{{i18n "chat_integration.edit_rule_modal.tags"}}</label></td>
+            <td>
+              {{tag-chooser placeholderKey="chat_integration.all_tags" name="tags" tags=model.rule.tags}}
+            </td>
+          </tr>
+          <tr class="instructions">
+            <td></td>
+            <td><label>{{i18n 'chat_integration.edit_rule_modal.instructions.tags'}}</label></td>
+          </tr>
+        {{/if}}
+
+      </table>
+
+    </form>
+  </div>	
+{{/d-modal-body}}
+
+<div class="modal-footer">
+
+	{{d-button id="save_channel" class='btn-primary btn-large' action="save" title="chat_integration.edit_rule_modal.save" label="chat_integration.edit_rule_modal.save" disabled=saveDisabled}}
+
+	{{d-button class="btn-large" action="cancel" title="chat_integration.edit_rule_modal.cancel" label="chat_integration.edit_rule_modal.cancel"}}
+
+</div>

assets/javascripts/discourse/templates/admin/plugins-chat-provider.hbs

@@ -14,6 +14,8 @@
         refresh='refresh' 
         edit='editChannel' 
         test='testChannel' 
+        createRule='createRule'
+        editRule='editRule'
         }}
     
   {{/each}}

assets/javascripts/discourse/templates/components/channel-data.hbs

@@ -0,0 +1,7 @@
+{{# each provider.channel_parameters as |param|}}
+  {{#if param.hidden}}{{else}}
+    <span class='field-name'>{{i18n (concat 'chat_integration.provider.' channel.provider '.param.' param.key '.title')}}:</span>
+    <span class='field-value'>{{get channel.data param.key}}</span> 
+    <br/>
+  {{/if}}
+{{/each}}

assets/javascripts/discourse/templates/components/channel-details.hbs

@@ -12,14 +12,7 @@
     {{/if}}
 
 
-    {{# each provider.channel_parameters as |param|}}
+    {{channel-data provider=provider channel=channel}}
-    
-      {{#if param.hidden}}{{else}}
-        <span class='field-name'>{{i18n (concat 'chat_integration.provider.' channel.provider '.param.' param.key '.title')}}:</span>
-        <span class='field-value'>{{get channel.data param.key}}</span> 
-        <br/>
-      {{/if}}
-    {{/each}}
 
   </span>
   
@@ -43,7 +36,7 @@
 
   
   {{#each channel.rules as |rule|}}
-    {{rule-row rule=rule refresh=refresh}}
+    {{rule-row rule=rule edit='editRule' refresh='refresh'}}
     
   {{/each}}
 

assets/javascripts/discourse/templates/components/rule-row.hbs

@@ -1,53 +1,31 @@
 
 <td>
-  {{#if editing}}
+  {{rule.filterName}}
-    {{combo-box name="filter" content=rule.available_filters value=rule.filter}}
-  {{else}}
-    {{rule.filterName}}
-  {{/if}}
 </td>
   
-
 <td>
-  {{#if editing}}
+  {{#if rule.category}}
-    {{category-chooser
+    {{category-link rule.category allowUncategorized="true" link="false"}}
-      name="category"
+  {{else if rule.group_id}}
-      value=rule.category_id
+    {{i18n "chat_integration.group_prefix"}} {{rule.group_name}}
-      rootNoneLabel="chat_integration.all_categories"
-      rootNone=true
-      overrideWidths=false
-      }} 
   {{else}}
-    {{#if rule.category}}
+    {{i18n "chat_integration.all_categories"}}
-      {{category-link rule.category allowUncategorized="true" link="false"}}
-    {{else}}
-      {{i18n "chat_integration.all_categories"}}
-    {{/if}}
   {{/if}}
 </td>
 
 
 {{#if siteSettings.tagging_enabled}}
   <td>
-    {{#if editing}}
+    {{#if rule.tags}}
-      {{tag-chooser placeholderKey="chat_integration.all_tags" name="tags" tags=rule.tags}}
+      {{rule.tags}}
     {{else}}
-      {{#if rule.tags}}
+      {{i18n "chat_integration.all_tags"}}
-        {{rule.tags}}
-      {{else}}
-        {{i18n "chat_integration.all_tags"}}
-      {{/if}}
     {{/if}}
   </td>
 {{/if}}
 
-
 <td>
-  {{#if editing}}
+  {{d-button action="edit" actionParam=rule icon="pencil" class="edit" title="chat_integration.rule_table.edit_rule"}}
-    {{d-button action="save" actionParam=rule icon="check" class="ok" title="chat_integration.rule_table.save_rule"}}
+  {{d-button action="delete" actionParam=rule icon="trash-o" class="delete" title="chat_integration.rule_table.delete_rule"}}
-    {{d-button action="cancel" actionParam=rule icon="times" class="cancel" title="chat_integration.rule_table.cancel_edit"}}
+
-  {{else}}
-    {{d-button action="edit" actionParam=rule icon="pencil" class="edit" title="chat_integration.rule_table.edit_rule"}}
-    {{d-button action="delete" actionParam=rule icon="trash-o" class="delete" title="chat_integration.rule_table.delete_rule"}}
-  {{/if}}
 </td>

assets/stylesheets/chat-integration-admin.scss

@@ -53,7 +53,7 @@
 
 }
 
-#chat_integration_edit_channel_modal, #chat_integration_test_modal{
+#chat_integration_edit_channel_modal, #chat_integration_test_modal, #chat_integration_edit_rule_modal{
 		table{
 			width:100%;
 
@@ -90,5 +90,8 @@
 			margin-top: 0px;
 		}
 
+    .field-name{
+      font-weight: bold;
+    }
 
 	}

config/locales/client.en.yml

@@ -6,6 +6,7 @@ en:
       no_providers: "You need to enable some providers in the plugin settings"
       channels_with_errors: "Some channels for this provider failed last time messages were sent. Click the error icon(s) to learn more."
       channel_exception: "An unknown error occured when a message was last sent to this channel. Check the site logs for more information."
+      group_prefix: "Group:"
       all_categories: "(all categories)"
       all_tags: "(all tags)"
       create_rule: "Create Rule"
@@ -39,6 +40,19 @@ en:
         channel_validation:
           ok: "Valid"
           fail: "Invalid format"
+      edit_rule_modal:
+        title: Edit Rule
+        save: Save Rule
+        cancel: Cancel
+        provider: Provider
+        channel: Channel
+        filter: Filter
+        category: Category
+        tags: Tags
+        instructions:
+          filter: "Notification level. Mute overrides other matching rules."
+          category: "This rule will only apply to topics in the specified category."
+          tags: "If specified, this rule will only apply to topics which have at least one of these tags."
 
       provider: