Updated DataReference and Semantic Link to display as label and value (#337)

* Updated DataReference and Semantic Link to display as label and value

* Handling label in single reference component

---------

Co-authored-by: mohas22 <[email protected]>
Co-authored-by: tumms2021389 <[email protected]>

Author: 3 people

eslint.config.mjs

@@ -89,7 +89,7 @@ export default defineConfig([
       'prettier/prettier': 'off',
 
       // Disable rules from shared configs we're not ready for yet.
-      'sonarjs/cognitive-complexity': ['warn', 20],
+      'sonarjs/cognitive-complexity': ['error', 20],
       'sonarjs/no-duplicate-string': 'off',
 
       //
@@ -152,8 +152,7 @@ export default defineConfig([
       'import/no-relative-packages': 'off',
       'react/jsx-fragments': 'off',
       'react/react-in-jsx-scope': 'off',
-      'react-hooks/exhaustive-deps': 'off',
-      'sonarjs/cognitive-complexity': ['warn', 45]
+      'react-hooks/exhaustive-deps': 'off'
     }
   },
   {

package.json

@@ -17,10 +17,10 @@
     "build:dev": "run-p -l lint build-angularsdk",
     "build:dev:ci": "npm run clean && npm install && npm run build:dev",
     "lint": "run-p -cl lint:*",
-    "lint:es": "eslint --color --cache --cache-location node_modules/.cache/eslint/ \"projects/angular-test-app/src/**\" \"packages/angular-sdk-components/src/**\"",
+    "lint:es": "eslint --color --cache --cache-location node_modules/.cache/eslint/ \"projects/angular-test-app/src/**\" \"packages/angular-sdk-components/src/**\" --max-warnings=0",
     "lint:format": "prettier --log-level warn -c .",
     "fix": "run-s -cl fix:*",
-    "fix:es": "eslint --color --fix --cache --cache-location node_modules/.cache/eslint/ \"projects/angular-test-app/src/**\" \"packages/angular-sdk-components/src/**\"",
+    "fix:es": "eslint --color --fix --cache --cache-location node_modules/.cache/eslint/ \"projects/angular-test-app/src/**\" \"packages/angular-sdk-components/src/**\" --max-warnings=0",
     "fix:format": "prettier --log-level warn -w .",
     "start-dev": "ng serve --port 3500",
     "start-dev-https": "ng serve --port 3500 --ssl --ssl-key ./keys/sdk-a.key --ssl-cert ./keys/sdk-a.crt",

packages/angular-sdk-components/src/lib/_components/field/auto-complete/auto-complete.component.ts

@@ -42,7 +42,8 @@ interface AutoCompleteProps extends PConnFieldProps {
     MatAutocompleteModule,
     MatOptionModule,
     forwardRef(() => ComponentMapperComponent)
-  ]
+  ],
+  providers: [DatapageService]
 })
 export class AutoCompleteComponent extends FieldBase implements OnInit {
   protected dataPageService = inject(DatapageService);

packages/angular-sdk-components/src/lib/_components/field/multiselect/utils.ts

@@ -85,6 +85,31 @@ function prepareSearchResults(listObjData, displayFieldMeta) {
   return searchResults;
 }
 
+function handleGroupedDataSearch(dataApiObj, searchText, clickedGroup, initialCaseClass, itemsTree) {
+  const localDataApiObj = cloneDeep(dataApiObj);
+  localDataApiObj.fetchedNQData = false;
+  localDataApiObj.cache = {};
+
+  if (!searchText && !clickedGroup) {
+    return { shouldReturn: true, value: itemsTree };
+  }
+
+  localDataApiObj.parameters[Object.keys(localDataApiObj.parameters)[1]] = searchText;
+  localDataApiObj.parameters[Object.keys(localDataApiObj.parameters)[0]] = initialCaseClass;
+
+  if (clickedGroup) {
+    if (!searchText) {
+      const containsData = itemsTree.find(item => item.id === clickedGroup);
+      if (containsData?.items?.length) {
+        return { shouldReturn: true, value: itemsTree };
+      }
+    }
+    localDataApiObj.parameters[Object.keys(localDataApiObj.parameters)[0]] = JSON.stringify([clickedGroup]);
+  }
+
+  return { shouldReturn: false, value: localDataApiObj };
+}
+
 async function doSearch(
   searchText,
   clickedGroup,
@@ -96,61 +121,44 @@ async function doSearch(
   showSecondaryInSearchOnly,
   selected
 ) {
-  let searchTextForUngroupedData = '';
-  if (dataApiObj) {
-    // creating dataApiObject in grouped data cases
-    if (isGroupData) {
-      dataApiObj = cloneDeep(dataApiObj);
-      dataApiObj.fetchedNQData = false;
-      dataApiObj.cache = {};
-
-      // if we have no search text and no group selected, return the original tree
-      if (searchText === '' && clickedGroup === '') {
-        return itemsTree;
-      }
+  if (!dataApiObj) {
+    return itemsTree;
+  }
 
-      // setting the inital search text & search classes in ApiObject
-      dataApiObj.parameters[Object.keys(dataApiObj.parameters)[1]] = searchText;
-      dataApiObj.parameters[Object.keys(dataApiObj.parameters)[0]] = initialCaseClass;
-
-      // if we have a selected group
-      if (clickedGroup) {
-        // check if the data for this group is already present and no search text
-        if (searchText === '') {
-          const containsData = itemsTree.find(item => item.id === clickedGroup);
-          // do not make API call when items of respective group are already fetched
-          if (containsData?.items?.length) return itemsTree;
-        }
+  let searchTextForApi = '';
+  let localDataApiObj = dataApiObj;
 
-        dataApiObj.parameters[Object.keys(dataApiObj.parameters)[0]] = JSON.stringify([clickedGroup]);
-      }
-    } else {
-      searchTextForUngroupedData = searchText;
+  if (isGroupData) {
+    const groupResult = handleGroupedDataSearch(dataApiObj, searchText, clickedGroup, initialCaseClass, itemsTree);
+    if (groupResult.shouldReturn) {
+      return groupResult.value;
     }
+    localDataApiObj = groupResult.value;
+  } else {
+    searchTextForApi = searchText;
+  }
 
-    // search API call
-    const response = await dataApiObj.fetchData(searchTextForUngroupedData).catch(() => {
-      return itemsTree;
-    });
+  const response = await localDataApiObj.fetchData(searchTextForApi).catch(() => ({ data: undefined }));
 
-    let listObjData = response.data;
-    let newItemsTree = [];
-    if (isGroupData) {
-      if (searchText) {
-        listObjData = prepareSearchResults(listObjData, displayFieldMeta);
-      } else {
-        newItemsTree = putItemsDataInItemsTree(listObjData, displayFieldMeta, itemsTree, showSecondaryInSearchOnly, selected);
-        return newItemsTree;
-      }
-    }
-    const showSecondaryData = showSecondaryInSearchOnly ? !!searchText : true;
-    if (listObjData !== undefined && listObjData.length > 0) {
-      newItemsTree = listObjData.map(entry => createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected));
+  let listObjData = response.data;
+  if (!listObjData) {
+    return itemsTree;
+  }
+
+  if (isGroupData) {
+    if (searchText) {
+      listObjData = prepareSearchResults(listObjData, displayFieldMeta);
+    } else {
+      return putItemsDataInItemsTree(listObjData, displayFieldMeta, itemsTree, showSecondaryInSearchOnly, selected);
     }
-    return newItemsTree;
   }
 
-  return itemsTree;
+  if (listObjData.length === 0) {
+    return [];
+  }
+
+  const showSecondaryData = showSecondaryInSearchOnly ? !!searchText : true;
+  return listObjData.map(entry => createSingleTreeObejct(entry, displayFieldMeta, showSecondaryData, selected));
 }
 
 function setValuesToPropertyList(searchText, assocProp, items, columns, actions, updatePropertyInRedux = true) {