From 79329afa41c9e816ffbbf8edf960a72f273fbffe Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <nhnkhoa@live.com>
Date: Sat, 13 Jan 2024 22:31:10 +0000
Subject: [PATCH 1/2] use filter query for empty search

---
 .../PolyLookup/ControlManifest.Input.xml      |  2 +-
 .../components/PolyLookupControl.tsx          | 29 +++++--------
 .../PolyLookup/services/DataverseService.ts   | 41 ++++++-------------
 .../PolyLookup/types/handlebars.ts            | 25 ++++++++---
 4 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/PolyLookupComponent/PolyLookup/ControlManifest.Input.xml b/PolyLookupComponent/PolyLookup/ControlManifest.Input.xml
index 824990b..7bd8f61 100644
--- a/PolyLookupComponent/PolyLookup/ControlManifest.Input.xml
+++ b/PolyLookupComponent/PolyLookup/ControlManifest.Input.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <manifest>
-  <control namespace="DCEPCF" constructor="PolyLookup" version="1.2.1" display-name-key="PolyLookup v1.2.1" description-key="Multi-select lookup supporting different type of many-to-many relationships" control-type="virtual" >
+  <control namespace="DCEPCF" constructor="PolyLookup" version="1.2.2" display-name-key="PolyLookup v1.2.2" description-key="Multi-select lookup supporting different type of many-to-many relationships" control-type="virtual" >
     <!--external-service-usage node declares whether this 3rd party PCF control is using external service or not, if yes, this control will be considered as premium and please also add the external domain it is using.
     If it is not using any external service, please set the enabled="false" and DO NOT add any domain below. The "enabled" will be false by default.
     Example1:
diff --git a/PolyLookupComponent/PolyLookup/components/PolyLookupControl.tsx b/PolyLookupComponent/PolyLookup/components/PolyLookupControl.tsx
index 98bb6b0..c1e0a81 100644
--- a/PolyLookupComponent/PolyLookup/components/PolyLookupControl.tsx
+++ b/PolyLookupComponent/PolyLookup/components/PolyLookupControl.tsx
@@ -1,4 +1,3 @@
-import React, { useCallback } from "react";
 import {
   IBasePickerStyles,
   IBasePickerSuggestionsProps,
@@ -9,6 +8,8 @@ import {
   ValidationState,
 } from "@fluentui/react";
 import { QueryClient, QueryClientProvider, useMutation } from "@tanstack/react-query";
+import Handlebars from "handlebars";
+import React, { useCallback } from "react";
 import {
   associateRecord,
   createRecord,
@@ -18,11 +19,9 @@ import {
   retrieveMultipleFetch,
   useMetadata,
   useSelectedItems,
-  useSuggestions,
 } from "../services/DataverseService";
-import { SuggestionInfo } from "./SuggestionInfo";
 import { IMetadata } from "../types/metadata";
-import Handlebars from "handlebars";
+import { SuggestionInfo } from "./SuggestionInfo";
 
 const queryClient = new QueryClient();
 const parser = new DOMParser();
@@ -143,21 +142,13 @@ const Body = ({
 
   const fetchXmlTemplate = Handlebars.compile(associatedFetchXml ?? "");
 
-  // get top 50 suggestions from associated table
-  const { data: suggestions, isLoading: isLoadingSuggestions } = useSuggestions(
-    relationshipName,
-    associatedTableSetName,
-    fetchXmlTemplate,
-    pageSize
-  );
-
   // get selected items
   const {
     data: selectedItems,
     isInitialLoading: isLoadingSelectedItems,
     isSuccess: isLoadingSelectedItemsSuccess,
     refetch: selectedItemsRefetch,
-  } = useSelectedItems(currentTable, currentRecordId, metadata, formType);
+  } = useSelectedItems(metadata, currentRecordId, formType);
 
   if (isLoadingSelectedItemsSuccess && onChange) {
     onChange(
@@ -179,7 +170,6 @@ const Body = ({
       if (!lookupView && metadata?.associatedView.querytype === 64) {
         shouldDefaultSearch = true;
       } else {
-        const currentRecord = getCurrentRecord();
         if (
           !fetchXml.includes("{{PolyLookupSearch}}") &&
           !fetchXml.includes("{{ PolyLookupSearch}}") &&
@@ -189,6 +179,8 @@ const Body = ({
           shouldDefaultSearch = true;
         }
 
+        const currentRecord = getCurrentRecord();
+
         fetchXml = fetchXmlTemplate({
           ...currentRecord,
           PolyLookupSearch: searchText,
@@ -286,9 +278,10 @@ const Body = ({
 
   const showAllSuggestions = useCallback(
     async (selectedTags?: ITag[]): Promise<ITag[]> => {
-      return getSuggestionTags(suggestions, metadata);
+      const results = await filterQuery.mutateAsync({ searchText: "", pageSizeParam: pageSize });
+      return getSuggestionTags(results, metadata);
     },
-    [suggestions, metadata?.associatedEntity.PrimaryIdAttribute]
+    [metadata?.associatedEntity.PrimaryIdAttribute]
   );
 
   const onPickerChange = useCallback(
@@ -419,7 +412,7 @@ const Body = ({
     return ValidationState.invalid;
   };
 
-  const isDataLoading = (isLoadingMetadata || isLoadingSuggestions || isLoadingSelectedItems) && !shouldDisable();
+  const isDataLoading = (isLoadingMetadata || isLoadingSelectedItems) && !shouldDisable();
 
   return (
     <TagPicker
@@ -499,7 +492,7 @@ function getSuggestionTags(
           key: i[metadata?.associatedEntity.PrimaryIdAttribute ?? ""] ?? "",
           name: i[metadata?.associatedEntity.PrimaryNameAttribute ?? ""] ?? "",
           data: i,
-        } as ITagWithData)
+        }) as ITagWithData
     ) ?? []
   );
 }
diff --git a/PolyLookupComponent/PolyLookup/services/DataverseService.ts b/PolyLookupComponent/PolyLookup/services/DataverseService.ts
index e6b0848..cead5cd 100644
--- a/PolyLookupComponent/PolyLookup/services/DataverseService.ts
+++ b/PolyLookupComponent/PolyLookup/services/DataverseService.ts
@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import {
   IEntityDefinition,
@@ -8,7 +9,6 @@ import {
   IViewDefinition,
   IViewLayout,
 } from "../types/metadata";
-import { useQuery } from "@tanstack/react-query";
 
 const nToNColumns = [
   "SchemaName",
@@ -51,41 +51,19 @@ export function useMetadata(
   lookupView: string | undefined
 ) {
   return useQuery({
-    queryKey: [
-      `${relationshipName}_${lookupView}_metadata`,
-      { currentTable, relationshipName, relationship2Name, lookupView },
-    ],
+    queryKey: ["metadata", currentTable, relationshipName, relationship2Name, lookupView],
     queryFn: () => getMetadata(currentTable, relationshipName, relationship2Name, lookupView),
     enabled: !!currentTable && !!relationshipName,
   });
 }
 
-export function useSuggestions(
-  relationshipName: string,
-  associatedTableSetName: string,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  fetchXmlTemplate: HandlebarsTemplateDelegate<any>,
-  pageSize: number | undefined
-) {
-  return useQuery({
-    queryKey: [`${relationshipName}_suggestionItems`, { associatedTableSetName, pageSize }],
-    queryFn: () => {
-      const currentRecord = getCurrentRecord();
-      const fetchXml = fetchXmlTemplate(currentRecord);
-      return retrieveMultipleFetch(associatedTableSetName, fetchXml, 1, pageSize);
-    },
-    enabled: !!relationshipName && !!associatedTableSetName,
-  });
-}
-
 export function useSelectedItems(
-  currentTable: string,
-  currentRecordId: string,
   metadata: IMetadata | undefined,
+  currentRecordId: string,
   formType: XrmEnum.FormType | undefined
 ) {
   return useQuery({
-    queryKey: [`${metadata?.relationship1.SchemaName}_selectedItems`, { currentTable, currentRecordId }],
+    queryKey: ["selectedItems", metadata, currentRecordId, formType],
     queryFn: () =>
       retrieveAssociatedRecords(
         currentRecordId,
@@ -485,10 +463,15 @@ export function deleteRecord(entitySetName: string | undefined, recordId: string
   });
 }
 
-export function getCurrentRecord(): ComponentFramework.WebApi.Entity {
+export function getCurrentRecord(attributes?: string[]): ComponentFramework.WebApi.Entity {
+  let entityAttributes = Xrm.Page.data.entity.attributes.get();
+
+  if (attributes?.length) {
+    entityAttributes = entityAttributes.filter((a) => attributes.includes(a.getName()));
+  }
+
   return Object.fromEntries(
-    /* global Xrm */
-    Xrm.Page.data.entity.attributes.get().map((attribute) => {
+    entityAttributes.map((attribute) => {
       const attributeType = attribute.getAttributeType();
       if (attributeType === "lookup") {
         const lookupVal = (attribute as Xrm.Attributes.LookupAttribute).getValue()?.at(0);
diff --git a/PolyLookupComponent/PolyLookup/types/handlebars.ts b/PolyLookupComponent/PolyLookup/types/handlebars.ts
index ae92dfd..d35f209 100644
--- a/PolyLookupComponent/PolyLookup/types/handlebars.ts
+++ b/PolyLookupComponent/PolyLookup/types/handlebars.ts
@@ -1,5 +1,20 @@
-declare module "handlebars/lib/handlebars" {
-  // Re-export the types from the existing handlebars module
-  import Handlebars = require("handlebars");
-  export default Handlebars;
-}
+import Handlebars from "handlebars";
+
+export const getHBVars = (value: string) => {
+  const ast = Handlebars.parse(value);
+  const keys = [];
+
+  for (const i in ast.body) {
+    if (ast.body[i].type === "MustacheStatement") {
+      const statement = ast.body[i] as hbs.AST.MustacheStatement;
+      if (statement.path.type === "PathExpression") {
+        const varName = (statement.path as hbs.AST.PathExpression).original;
+        const attr = varName.split(".").at(0);
+        if (attr) {
+          keys.push(attr);
+        }
+      }
+    }
+  }
+  return Array.from(new Set<string>(keys));
+};

From 0ec26ef6c627318d2e05f884e0ddc9d9d8405f1c Mon Sep 17 00:00:00 2001
From: Khoa Nguyen <nhnkhoa@live.com>
Date: Sat, 13 Jan 2024 22:31:45 +0000
Subject: [PATCH 2/2] upgrade prettier

---
 .vscode/settings.json                 |  2 +-
 PolyLookupComponent/.eslintrc.json    | 12 ++-----
 PolyLookupComponent/package-lock.json | 50 +++++++++++++++++++--------
 PolyLookupComponent/package.json      |  3 +-
 4 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1344b43..a3f76a0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "editor.formatOnSave": true
 }
diff --git a/PolyLookupComponent/.eslintrc.json b/PolyLookupComponent/.eslintrc.json
index eb7e094..fda6bee 100644
--- a/PolyLookupComponent/.eslintrc.json
+++ b/PolyLookupComponent/.eslintrc.json
@@ -3,12 +3,7 @@
     "browser": true,
     "es2021": true
   },
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
-    "plugin:react/recommended",
-    "prettier"
-  ],
+  "extends": ["plugin:@typescript-eslint/recommended", "plugin:react/recommended"],
   "globals": {
     "ComponentFramework": true
   },
@@ -17,11 +12,10 @@
     "ecmaVersion": 12,
     "sourceType": "module"
   },
-  "plugins": ["@microsoft/power-apps", "@typescript-eslint", "prettier"],
+  "plugins": ["@microsoft/power-apps", "@typescript-eslint"],
   "rules": {
     "no-unused-vars": "off",
-    "no-explicit-any": "off",
-    "prettier/prettier": "warn"
+    "no-explicit-any": "off"
   },
   "settings": {
     "react": {
diff --git a/PolyLookupComponent/package-lock.json b/PolyLookupComponent/package-lock.json
index 9e13e2f..f7ecb51 100644
--- a/PolyLookupComponent/package-lock.json
+++ b/PolyLookupComponent/package-lock.json
@@ -23,13 +23,14 @@
         "@typescript-eslint/eslint-plugin": "^5.39.0",
         "@typescript-eslint/parser": "^5.39.0",
         "eslint": "^8.24.0",
+        "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-promise": "^6.0.1",
         "eslint-plugin-react": "^7.31.8",
         "pcf-scripts": "^1",
         "pcf-start": "^1",
-        "prettier": "2.8.7",
+        "prettier": "3.0.3",
         "react": "^16.8",
         "typescript": "^4.8.4"
       }
@@ -4571,6 +4572,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.7",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
@@ -7244,15 +7257,15 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.7",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
-      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
+      "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
       "dev": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
@@ -8627,9 +8640,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -12578,6 +12591,13 @@
         }
       }
     },
+    "eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "requires": {}
+    },
     "eslint-import-resolver-node": {
       "version": "0.3.7",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
@@ -14557,9 +14577,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.8.7",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz",
-      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
+      "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
       "dev": true
     },
     "prop-types": {
@@ -15579,9 +15599,9 @@
       }
     },
     "tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "tsutils": {
       "version": "3.21.0",
diff --git a/PolyLookupComponent/package.json b/PolyLookupComponent/package.json
index d41cff0..edda883 100644
--- a/PolyLookupComponent/package.json
+++ b/PolyLookupComponent/package.json
@@ -27,13 +27,14 @@
     "@typescript-eslint/eslint-plugin": "^5.39.0",
     "@typescript-eslint/parser": "^5.39.0",
     "eslint": "^8.24.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.1",
     "eslint-plugin-react": "^7.31.8",
     "pcf-scripts": "^1",
     "pcf-start": "^1",
-    "prettier": "2.8.7",
+    "prettier": "3.0.3",
     "react": "^16.8",
     "typescript": "^4.8.4"
   }