0

我正在更新火箭聊天应用程序，以便在部门列表页面上有一个部门过滤器。我遇到了一个问题，我的过滤器似乎与结果集绑定到同一个集合。因此，当我更新过滤器时，所有其他过滤器选项都被删除。我不确定最好的方法，所以过滤器只影响结果列表，而不是两者。

前： 在此处输入图像描述

之后： 在此处输入图像描述 HTML

<template name="livechatDepartments">
{{#requiresPermission 'view-livechat-manager'}}
<fieldset>
<form class="form-inline" method="post">
    <div class="form-group">
        <label for="department">{{_ "Department"}}</label>
        <select name="department">
            <option value=""></option>
            {{#each departmentsDDL}}
                <option value="{{_id}}">{{name}}</option>
            {{/each}}
        </select>
    </div>

    <div class="form-group">
        <label for="agent">{{_ "Served_By"}}</label>
        <select name="agent">
            <option value=""></option>
            {{#each agents}}
                <option value="{{_id}}">{{username}}</option>
            {{/each}}
        </select>
    </div>
    <button class="button">{{_ "Filter"}}</button>
</form>
</fieldset>
    <div class="list">
        <table>
            <thead>
                <tr>
                    <th width="20%">{{_ "Name"}}</th>
                    <th width="30%">{{_ "Description"}}</th>
                    <th width="10%">{{_ "Num_Agents"}}</th>
                    <th width="10%">{{_ "Num_Available_Agents"}}</th>
                    <th width="20%">{{_ "Enabled"}}</th>
                    <th width="20%">{{_ "Show_on_registration_page"}}</th>
                    <th>{{_ "Delete"}}</th>
                </tr>
            </thead>
            <tbody>
                {{#each departments}}
                    <tr class="department-info row-link" data-id="{{_id}}">
                        <td>{{name}}</td>
                        <td>{{description}}</td>
                        <td>{{numAgents}}</td>
                        <!--<td>{{}}</td>-->
                        <td>{{#if enabled}}{{_ "Yes"}}{{else}}{{_ "No"}}{{/if}}</td>
                        <td>{{#if showOnRegistration}}{{_ "Yes"}}{{else}}{{_ "No"}}{{/if}}</td>
                        <td><a href="#remove" class="remove-department"><i class="icon-trash"></i></a></td>
                    </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
    <div class="text-center">
        <button class="button load-more">{{_ "Load_more"}}</button>
    </div>
    <a href="{{pathFor 'livechat-department-new'}}" class="button primary">{{_ "New_Department"}}</a>
{{/requiresPermission}}

JS：

Template.livechatDepartments.helpers({
  departmentsDDL() {
    return LivechatDepartment.find({}, { sort: { name: -1 } });
  },

  departments() {
    return LivechatDepartment.find({}, { sort: { name: -1 } });
  },

  agents() {
    return AgentUsers.find({}, { sort: { name: 1 } });
  }
});

Template.livechatDepartments.events({
  'click .remove-department' (e /*, instance*/ ) {
    e.preventDefault();
    e.stopPropagation();
    swal({
      title: t('Are_you_sure'),
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#DD6B55',
      confirmButtonText: t('Yes'),
      cancelButtonText: t('Cancel'),
      closeOnConfirm: false,
      html: false
    }, () => {
      Meteor.call('livechat:removeDepartment', this._id, function(error /*, result*/ ) {
        if (error) { return handleError(error); }
        swal({
          title: t('Removed'),
          text: t('Department_removed'),
          type: 'success',
          timer: 1000,
          showConfirmButton: false
        });
      });
    });
  },

  'click .department-info' (e /*, instance*/ ) {
    e.preventDefault();
    FlowRouter.go('livechat-department-edit', { _id: this._id });
  },

  'submit form' (e, instance) {
    e.preventDefault();
    const filter = {};
    $(':input', event.currentTarget)
      .each(function() {
        if (this.name) {
          filter[this.name] = $(this)
            .val();
        }
      });
    instance.filter.set(filter);
    instance.limit.set(20);
  }
});

Template.livechatDepartments.onCreated(function() {
  this.limit = new ReactiveVar(20);
  this.filter = new ReactiveVar({});

  this.subscribe('livechat:agents');

  this.autorun(() => {
    this.subscribe('livechat:departments', this.filter.get(), 0, this.limit.get());
  });
});

流星法：

Meteor.publish("livechat:departments", function(filter = {}, offset = 0, limit = 20) {
      if (!this.userId) {
        return this.error(
          new Meteor.Error("error-not-authorized", "Not authorized", {
            publish: "livechat:agents"
          })
        );
      }

      if (!RocketChat.authz.hasPermission(this.userId, "view-l-room")) {
        return this.error(
          new Meteor.Error("error-not-authorized", "Not authorized", {
            publish: "livechat:agents"
          })
        );
      }

      check(filter, {
        agent: Match.Maybe(String), // agent _id who is serving
        department: Match.Maybe(String)
      });

      const query = {};
      if (filter.agent) {

        const DepartmentFilter = [];
        RocketChat.models.LivechatDepartmentAgents
          .find({
            agentId: filter.agent
          })
          .forEach(department => {
            DepartmentFilter.push(department);
          });

        var depts = DepartmentFilter.map(function(dep) {
          return dep.departmentId;
        });
4

1 回答 1

1

正如您在问题中所述，您的过滤器与您的结果集绑定到同一个集合。那么，你怎么能解决这个问题呢？

解决方案 1 - 简单，如果livechat:departments收集的数据不是太大，可能是最好的：

  • 还原您的订阅代码以获取所有数据（未过滤），并在departments帮助函数中过滤

    // in Template.livechatDepartments.onCreated
this.subscribe('livechat:departments');

// in Template.livechatDepartments.helpers
departments() {
  const departmentFilter = Template.instance().filter.get().department;
    if (departmentFilter){
      return LivechatDepartment.find({name: departmentFilter }, { sort: { name: -1 } });
    } 
    else {
      return LivechatDepartment.find({}, { sort: { name: -1 } });
    } 
}

  • 解决方案 2 - 使用解决方案 1 中的过滤器保留departments助手，但现在订阅两次livechat:departments

您可以为过滤的部门列表重用当前发布（添加回您过滤的订阅），并创建一个发布所有部门的新发布/订阅频道，但只需要发送用于填充选择选项的名称 + _id 字段。

于 2017-06-15T05:01:46.320 回答