Question

因此，我正在研究伪造示例：https://github.com/Autodesk-Forge/bim360-csharp-issues

我正在努力整理PropertyPanel中描述的问题。我问我不确定该怎么做？

当前该示例使用查看器加载您的BIM36O文档，在查看器上有一个扩展名，单击该扩展名可以一一显示所有问题。这些问题当前按（Issue1，Issue2，Issue3）排序。

在面板上显示问题之前，我已经手动使用以下代码对问题进行了排序：

 _this.issues = _.sortBy(_this.issues, function (i) { return i.attributes.title });

我还介绍了带有onclick事件的面板按钮，单击按钮后如何对问题进行排序，并在面板上重新显示现在已排序的问题？

这是我的面板代码：

function BIM360IssuePanel(viewer, container, id, title, options) {

    this.viewer = viewer;
    Autodesk.Viewing.UI.PropertyPanel.call(this, container, id, title, options);
    var _this = this;
    this.scrollContainer.style.height = 'calc(100% - 100px)';
    const controlsContainer = document.createElement('div');
    controlsContainer.classList.add('docking-panel-container-solid-color-a');
    controlsContainer.style.height = '30px';
    controlsContainer.style.padding = '4px';

    const titleButton = document.createElement('button');
    const assignedToButton = document.createElement('button');
    const dueDateButton = document.createElement('button');
    const createdAtButton = document.createElement('button');
    const versionButton = document.createElement('button');

    titleButton.innerText = 'Title';
    versionButton.innerText = 'Version';
    assignedToButton.innerText = 'Assigned To';
    dueDateButton.innerText = 'Due Date';
    createdAtButton.innerText = 'Created At';

    titleButton.style.color = 'black';
    versionButton.style.color = 'black';
    assignedToButton.style.color = 'black';
    dueDateButton.style.color = 'black';
    createdAtButton.style.color = 'black';

    controlsContainer.appendChild(titleButton);
    controlsContainer.appendChild(versionButton);
    controlsContainer.appendChild(assignedToButton);
    controlsContainer.appendChild(dueDateButton);
    controlsContainer.appendChild(createdAtButton);
    this.container.appendChild(controlsContainer);    

    assignedToButton.onclick = function (e) {

    };
    titleButton.onclick = function (e) {

    };
    createdAtButton.onclick = function (e) {

    };

    dueDateButton.onclick = function (e) {

    };
    versionButton.onclick = function (e) {
    };

}

showIssues（）的代码：

BIM360IssueExtension.prototype.showIssues = function () {
    var _this = this;

    //remove the list of last time
    var pushPinExtension = _this.viewer.getExtension(_this.pushPinExtensionName);
    pushPinExtension.removeAllItems();
    pushPinExtension.showAll();
    var selected = getSelectedNode();




    //sorting issues
    _this.issues = _.sortBy(_this.issues, function (i) { return i.attributes.title });
    //_this.issues = _.sortBy(_this.issues, function (i) { if (i.attributes.due_date === null) return ''; else return Date.parse(i.attributes.due_date) }); 
    //_this.issues = _.sortBy(_this.issues, function (i) { return i.attributes.assigned_to_name });
    //_this.issues = _.sortBy(_this.issues, function (i) { return i.attributes.starting_version });
   // _this.issues = _.sortBy(_this.issues, function (i) { return i.attributes.dateCreated });



    _this.issues.forEach(function (issue) {
        var dateCreated = moment(issue.attributes.created_at);

        // show issue on panel
        if (_this.panel) {

            _this.panel.addProperty('Title', issue.attributes.title, 'Issue ' + issue.attributes.identifier);
            _this.panel.addProperty('Assigned to', issue.attributes.assigned_to_name, 'Issue ' + issue.attributes.identifier);
            _this.panel.addProperty('Version', 'V' + issue.attributes.starting_version + (selected.version != issue.attributes.starting_version ? ' (Not current)' : ''), 'Issue ' + issue.attributes.identifier)
            _this.panel.addProperty('Due Date', issue.attributes.due_date, 'Issue ' + issue.attributes.identifier);
            _this.panel.addProperty('Created at', dateCreated.format('MMMM Do YYYY, h:mm a'), 'Issue ' + issue.attributes.identifier);

        }



        // add the pushpin
        var issueAttributes = issue.attributes;
        var pushpinAttributes = issue.attributes.pushpin_attributes;
        if (pushpinAttributes) {
            issue.type = issue.type.replace('quality_', ''); // temp fix during issues > quality_issues migration
            pushPinExtension.createItem({
                id: issue.id,
                label: issueAttributes.identifier,
                status: issue.type && issueAttributes.status.indexOf(issue.type) === -1 ? `${issue.type}-${issueAttributes.status}` : issueAttributes.status,
                position: pushpinAttributes.location,
                type: issue.type,
                objectId: pushpinAttributes.object_id,
                viewerState: pushpinAttributes.viewer_state
            });




        }

    })
    }

Answer 1

只需对源代码进行快速检查，有2个快速思路：

如果在单击“排序”按钮时对问题进行某些更新，我建议添加状态为当前排序顺序（ sortOrder ），并根据不同的方式对问题进行排序在 showIssues 方法中的 sortOrder 上，单击不同的排序按钮时，您可以仅调用 BIM360IssueExtension.prototype.loadIssues（）方法进行刷新面板中的所有问题。
如果在单击“排序”按钮时不会更新问题列表，我建议缓存当前的问题列表，并添加新的方法，例如 sortIssueInPanel（），以对按钮进行排序，主要步骤应该是清理“问题面板”，对缓存的问题列表进行排序，然后将这些问题一一添加到“问题面板”中，示例代码片段应如下所示，但是请注意，这只是显示主要内容的代码片段步骤，我没有测试或验证它，仅供参考：

  var sortIssueInPanel = function(sortOrder){
    var issueExtension = NOP_VIEWER.getExtension('BIM360IssueExtension');
    issueExtension.panel.removeAllProperties()

    // Sort the cached issues by sortOrder
    switch(sortOrder){
      case SORT_ORDER.BY_TITLE:
        issuesCached = _.sortBy(issuesCached, function (i) { return i.attributes.title });
        break;

      case SORT_ORDER.BY_DUE_DATE:
      issuesCached = _.sortBy(issuesCached, function (i) { if (i.attributes.due_date === null) return ''; else return Date.parse(i.attributes.due_date) }); 
        break;

      case SORT_ORDER.BY_ASSIGNED_TO_NAME:
      issuesCached = _.sortBy(issuesCached, function (i) { return i.attributes.assigned_to_name });
        break;

      case SORT_ORDER.BY_DATECREATED:
      issuesCached = _.sortBy(issuesCached, function (i) { return i.attributes.dateCreated });
        break;
        
      default:
        break;
    }


    issuesCached.forEach(function (issue) {
      var dateCreated = moment(issue.attributes.created_at);

      // show issue on panel
      if (issueExtension.panel) {

        issueExtension.panel.addProperty('Title', issue.attributes.title, 'Issue ' + issue.attributes.identifier);
        issueExtension.panel.addProperty('Assigned to', issue.attributes.assigned_to_name, 'Issue ' + issue.attributes.identifier);
        issueExtension.panel.addProperty('Version', 'V' + issue.attributes.starting_version + (selected.version != issue.attributes.starting_version ? ' (Not current)' : ''), 'Issue ' + issue.attributes.identifier)
        issueExtension.panel.addProperty('Due Date', issue.attributes.due_date, 'Issue ' + issue.attributes.identifier);
        issueExtension.panel.addProperty('Created at', dateCreated.format('MMMM Do YYYY, h:mm a'), 'Issue ' + issue.attributes.identifier);
      }
    })
  };

希望有帮助。

通过Forge对BIM 360进行排序

1 个答案: