filter in ServiceFile

samples/react-tree-orgchart/src/services/GraphService.ts

@@ -5,10 +5,10 @@ export interface IGraphUser {
     mail?: string;
     displayName?: string;
     jobTitle?: string;
-    userPrincipalName?:string;
+    userPrincipalName?: string;
 }
 
-const graphUserSelect: string[] = ['displayName', 'mail', 'jobTitle','userPrincipalName'];
+const graphUserSelect: string[] = ['displayName', 'mail', 'jobTitle', 'userPrincipalName'];
 
 export default class GraphService {
 
@@ -28,9 +28,30 @@ export default class GraphService {
 
         return await graph.users.getById(upn).manager.select(...graphUserSelect).get() as IGraphUser;
     }
-    public async getUserDirectReports(upn: string) {
+    public async getUserDirectReports(upn: string, excludefilter?: boolean, filter?: string) {
+
+        /*
+        odata filter 
+         "code": "Request_UnsupportedQuery",
+        "message": "The specified filter to the reference property query is currently not supported.",
+        */
+        const directReports = await graph.users.getById(upn).directReports.select(...graphUserSelect).get() as IGraphUser[];
+        if (filter && filter.length > 0) {
+            if (excludefilter) {
+                return directReports.filter((user) => 
+                    user.userPrincipalName?.toLowerCase().indexOf(filter.toLowerCase()) === -1
+                );
+
+            } else {
+                return directReports.filter((user) => 
+                    user.userPrincipalName?.toLowerCase().indexOf(filter.toLowerCase()) !== -1
+                );
+
+            }
+
+        }
+        return directReports;
 
-        return await graph.users.getById(upn).directReports.select(...graphUserSelect).get() as IGraphUser[];
     }
 
 }

samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.ts

@@ -9,6 +9,7 @@ import { ITreeOrgChartProps } from './components/ITreeOrgChartProps';
 import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber';
 import { setup as pnpSetup } from '@pnp/common';
 import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneDropdown, PropertyPaneTextField, PropertyPaneToggle } from '@microsoft/sp-webpart-base';
+import { graph } from "@pnp/graph";
 
 export interface ITreeOrgChartWebPartProps {
   title: string;
@@ -29,7 +30,7 @@ export default class TreeOrgChartWebPart extends BaseClientSideWebPart<ITreeOrgC
     pnpSetup({
       spfxContext: this.context
     });
-
+    graph.setup(this.context as any);
     //Migration old Config Settings
     if (!this.properties.viewType) {
       const treetype = this.properties.currentUserTeam ? TreeOrgChartType.MyTeam : TreeOrgChartType.CompanyHierarchy;

samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx

@@ -144,7 +144,6 @@ export default class TreeOrgChart extends React.Component<
           this.treeData = [{ ...myteam }];
         break;
       case TreeOrgChartType.ShowOtherTeam:
-        debugger;
         if (this.props.teamLeader && this.props.teamLeader.length > 0) {
 
           const otherteam = await this.buildTeamLeaderOrganizationChart(
@@ -245,8 +244,8 @@ export default class TreeOrgChart extends React.Component<
   private async getDirectReportsUsers(upn?: string, level: number = 1, expanded: boolean = false): Promise<ITreeData[] | null> {
     if (!upn) { return null; }
 
-    //TODO Filter
-    const directReportsUser = await this.GraphService.getUserDirectReports(upn);
+   
+    const directReportsUser = await this.GraphService.getUserDirectReports(upn,this.props.excludefilter,this.props.filter);
     //this is already level 1
     if (directReportsUser && directReportsUser.length > 0) {
       return await Promise.all(directReportsUser.map(async (dr) => {
@@ -339,7 +338,6 @@ export default class TreeOrgChart extends React.Component<
             treeData={this.state.treeData}
             onChange={this.handleTreeOnChange.bind(this)}
             canDrag={false}
-            canDrop={false}
             rowHeight={70}
             maxDepth={this.props.maxLevels}
             generateNodeProps={rowInfo => {