mgt-file-list MultiSelect support

[musale]

Issue #1678 by @jbk75 about multi-select support has got me thinking about some previous issues which I would like to address. Before that, it's good to note that these are just my personal realizations as I was trying to come up with a workaround for the issue.

You cannot select multiple files in mgt-file-list. However, with a little haggling depending on your UI, you can come close to the functionality using the itemClicked event it emits. We have had issues with the event previously that we addressed and fixed. The issue was #1484 which made the itemClicked event unavailable when you template mgt-file. This was fixed in #1523 by @Mnickii. However, thinking about it now, the design and fix of the issue does not go hand in hand with the event.

When you do:

document.querySelector("mgt-file-list").addEventlistener("itemClicked", function(event) {
  const eventTarget = event.target; // this points to mgt-file-list.
  const eventDetail = event.detail; // this gives you an object of the file clicked details.
});

Clearly, the event.target should point to mgt-file because that is what you have clicked.

In the event you want to implement a multi-select functionality, you cannot handle that with the itemClicked event as it is. Say you want to click multiple files and then you gray them out/ remove them from the file list, having the event target as mgt-file-list makes that near impossible.

My thoughts are:

• Move the itemClicked event to the mgt-file. This way, the event is triggered with mgt-file as the target node.
• Wrap the templating of mgt-file into a div with the handleItemSelect method as the value for the onclick event fired.
  This can be done in

  microsoft-graph-toolkit/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

  Line 631 in 148aa7d

  this.renderTemplate('file', { file }, file.id) ||

  
  like

  ...
  <div @click=${e => this.handleItemSelect(file, e)}> this.renderTemplate('file', { file }, file.id) || <mgt-file>...
  ...