microsoftgraph / microsoft-graph-toolkit

Authentication Providers and UI components for Microsoft Graph 🦒
https://docs.microsoft.com/graph/toolkit/overview
Other
936 stars 296 forks source link

[BUG] mgt-file-list for channel documents #2409

Closed LALITAMITTAL18 closed 1 year ago

LALITAMITTAL18 commented 1 year ago

Describe the bug I am trying to list all files in folder of a channel using graph api : https://graph.microsoft.com/v1.0/teams/{id}/channels/{id}/filesFolder.

This api doesnt support OData query Parameters hence the above call fails when internally it tries to add Top in the query. Hence not able to use file-list-query. files and files-queries - not showing all document, browsing is also not supported.

Error: enable browsing doesnt work. I am not seeing all the documents listed in channel.

Can anyone help. Upload file works as expected.

To Reproduce

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Graph Toolkit</title><style type="text/css"></style>
<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
<style>
    body {
        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
          'Helvetica Neue', sans-serif;
      }
      ul.breadcrumb {
        margin: 0;
        padding: 10px 16px;
        list-style: none;
        background-color: #ffffff;
        font-size: 12px;
      }
      ul.breadcrumb li {
        display: inline;
      }
      ul.breadcrumb li + li:before {
        padding: 8px;
        color: black;
        content: '/';
      }

      ul.breadcrumb li a {
        color: #0275d8;
        text-decoration: none;
      }
      ul.breadcrumb li a:hover {
        color: #01447e;
        text-decoration: underline;
      }

</style>
<script type="text/javascript">
    function setEventListenerToFiles(){
        const fileList = document.querySelector('mgt-file-list');
        const nav = document.getElementById('nav');
        const home = document.getElementById('home');

        let homeListId;
        if (fileList.itemId) {
            homeListId = fileList.itemId;
        } else {
            homeListId = null;
        }

        // handle default file list menu item
        home.addEventListener('click', e => {
            fileList.itemId = homeListId;
            removeListItems(1);
        });

        // handle create and remove menu items
        fileList.addEventListener('itemClick', e => {
            if (e.detail && e.detail.folder) {
                const id = e.detail.id;
                const name = e.detail.name;

                // render new file list
                fileList.itemId = id;

                // create breadcrumb menu item
                const li = document.createElement('li');
                const a = document.createElement('a');
                li.setAttribute('id', id);
                a.appendChild(document.createTextNode(name));
                li.appendChild(a);
                nav.appendChild(li);

                // remove breadcrumb menu items and render file list based on clicked item
                a.addEventListener('click', e => {
                    const nodes = Array.from(nav.children);
                    const index = nodes.indexOf(li);
                    if (e.target) {
                        removeListItems(index + 1);
                        fileList.itemId = li.id;
                    }
                });
            }
        });
    }

// remove li of ul where index is larger than n
function removeListItems(n) {
    while (nav.getElementsByTagName('li').length > n) {
        nav.removeChild(nav.lastChild);
    }
}

</script>
</head>
<body>
 <input class="" type="checkbox"  id="enableCacheCheck">
<mgt-msal2-provider client-id=""></mgt-msal2-provider>
<mgt-login></mgt-login>
<ul class="breadcrumb" id="nav" onclick="setEventListenerToFiles()">
    <li><a id="home">Files</a></li>
</ul>
<mgt-file-list  id="fileList"                               
file-queries="teams/{teamid}/channels/{channelid}/filesFolder" 
                                        enable-file-upload
                                        enable-browsing>
                                    </mgt-file-list>

</body>
</html>
ghost commented 1 year ago

Hello LALITAMITTAL18, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌