Sorting BIM 360Issues through Forge - autodesk-forge

Question

So I am working on this sample of forge: https://github.com/Autodesk-Forge/bim360-csharp-issues
I am struggling to sort the issues portrayed within the PropertyPanel. I am asking how I should go about doing this as I'm unsure?
Currently the sample loads your BIM36O document with the viewer, on the viewer there is an extension which when clicked shows all the issues one by one.
These issues are currently sorted by (Issue1,Issue2,Issue3).
I have manually used this line of code to sort the issues before they're shown on the panel:
_this.issues = _.sortBy(_this.issues, function (i) { return i.attributes.title });
I have also introduced panel buttons with onclick events, how do I sort the issues once the button is clicked and reshow the now sorted issues on the panel?
Here is my code for the panel:
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) {
};
}
Code for 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

Just did a quick check with the source code, there are 2 quick ideas:
If there would be some updates to issues while clicking the sort button, I would suggest to add a status of current sort order(sortOrder), and sorting the issues with different ways depending on sortOrder in the method showIssues, while clicking the different sort buttons, you may just call the BIM360IssueExtension.prototype.loadIssues() method to refresh all the issues in panel.
If the issue list would not be updated while clicking the sort button, I would suggest to cache the current issue list, and add a new method like sortIssueInPanel() to sort button, the main steps should be cleaning up the Issue Panel, sort the cached issue list, and add these issues one by one to the Issue Panel, the sample code snip should be something as follow, but be noted that's just code snip to show the main steps, i did not test or verify it, just for your reference:
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);
}
})
};
Hope it helps.