Global search (SAP#1496)

core/fundamentalStyleClasses.js

@@ -24,8 +24,9 @@ module.exports = [
   //'./node_modules/fundamental-styles/dist/form-message.css',
   //'./node_modules/fundamental-styles/dist/form-select.css',
   //'./node_modules/fundamental-styles/dist/inline-help.css',
-  //'./node_modules/fundamental-styles/dist/input.css',
-  //'./node_modules/fundamental-styles/dist/input-group.css',
+  './node_modules/fundamental-styles/dist/input.css',
+  './node_modules/fundamental-styles/dist/input-group.css',
+  //'./node_modules/fundamental-styles/dist/label.css',
   //'./node_modules/fundamental-styles/dist/layout-grid.css',
   //'./node_modules/fundamental-styles/dist/layout-panel.css',
   './node_modules/fundamental-styles/dist/link.css',

core/package.json

@@ -79,7 +79,7 @@
     },
     {
       "path": "./public-ie11/luigi-ie11.js",
-      "maxSize": "550 kB",
+      "maxSize": "560 kB",
       "compression": "none"
     },
     {

core/src/App.html

@@ -60,6 +60,15 @@
     pathParams="{pathParams}"
     on:handleClick="{handleNavClick}"
     on:resizeTabNav="{onResizeTabNav}"
+    on:toggleSearch="{toggleSearch}"
+    on:closeSearchResult="{closeSearchResult}"
+    on:handleSearchNavigation="{handleSearchNavigation}"
+    bind:isSearchFieldVisible
+    bind:displaySearchResult
+    bind:displayCustomSearchResult
+    bind:searchResult
+    bind:inputElem
+    bind:luigiCustomSearchRenderer__slot
   />
   {#if !(hideNav||hideSideNav)}
   <LeftNav
@@ -104,7 +113,12 @@
     IframeHelpers,
     AuthHelpers
   } from './utilities/helpers';
-  import { LuigiI18N, LuigiConfig, LuigiElements } from './core-api';
+  import {
+    LuigiI18N,
+    LuigiConfig,
+    LuigiElements,
+    LuigiGlobalSearch
+  } from './core-api';
   import { Navigation } from './navigation/services/navigation';
   import { Routing } from './services/routing';
   import { Iframe } from './services/iframe';
@@ -158,6 +172,13 @@
   let tabNav;
   let resizeTabNavToggle = false;
   let thirdPartyCookiesCheck;
+  let searchProvider;
+  export let isSearchFieldVisible;
+  export let inputElem;
+  export let luigiCustomSearchRenderer__slot;
+  export let displaySearchResult;
+  export let displayCustomSearchResult = true;
+  export let searchResult;
 
   const prepareInternalData = config => {
     const iframeConf = config.iframe.luigi;
@@ -476,6 +497,121 @@
 
   setContext('handleNavigation', handleNavigation);
 
+  ////GLOBALSEARCH
+
+  const checkSearchProvider = searchProvider => {
+    if (!searchProvider) {
+      console.warn('No search provider defined.');
+      return false;
+    } else {
+      return true;
+    }
+
+    // check for required searchProvider keys here.
+  };
+  export const closeSearchField = () => {
+    if (checkSearchProvider(searchProvider)) {
+      isSearchFieldVisible = false;
+    }
+  };
+
+  export const openSearchField = () => {
+    if (checkSearchProvider(searchProvider)) {
+      if (inputElem) {
+        isSearchFieldVisible = true;
+        inputElem.focus();
+      }
+    }
+  };
+
+  export const clearSearchField = () => {
+    if (checkSearchProvider(searchProvider)) {
+      if (inputElem) {
+        inputElem.value = '';
+        closeSearchResult();
+      }
+    }
+  };
+
+  export const toggleSearch = () => {
+    isSearchFieldVisible = !isSearchFieldVisible;
+    LuigiGlobalSearch.clearSearchField();
+  };
+
+  export const getGlobalSearchString = () => {
+    if (checkSearchProvider(searchProvider)) {
+      if (inputElem) {
+        return inputElem.value;
+      }
+    }
+  };
+
+  export const setGlobalSearchString = searchString => {
+    if (checkSearchProvider(searchProvider)) {
+      if (inputElem) {
+        inputElem.value = searchString;
+        if (GenericHelpers.isFunction(searchProvider.onInput)) {
+          searchProvider.onInput();
+        } else {
+          console.error(
+            'onInput is not a function. Please check the global search configuration.'
+          );
+        }
+      }
+    }
+  };
+
+  export const showSearchResult = arr => {
+    if (checkSearchProvider(searchProvider)) {
+      if (arr && arr.length > 0) {
+        if (
+          GenericHelpers.isFunction(searchProvider.customSearchResultRenderer)
+        ) {
+          displayCustomSearchResult = true;
+          let searchApiObj = {
+            fireItemSelected: item => {
+              searchProvider.onSearchResultItemSelected(item);
+            }
+          };
+          searchProvider.customSearchResultRenderer(
+            arr,
+            luigiCustomSearchRenderer__slot,
+            searchApiObj
+          );
+        } else {
+          displaySearchResult = true;
+          searchResult = arr;
+        }
+      } else {
+        console.warn('Search result array is empty.');
+      }
+    }
+  };
+
+  export const closeSearchResult = () => {
+    if (checkSearchProvider(searchProvider)) {
+      displaySearchResult = false;
+      searchResult = [];
+      if (luigiCustomSearchRenderer__slot) {
+        while (luigiCustomSearchRenderer__slot.lastElementChild) {
+          luigiCustomSearchRenderer__slot.removeChild(
+            luigiCustomSearchRenderer__slot.lastElementChild
+          );
+        }
+      }
+    }
+  };
+
+  export const handleSearchNavigation = event => {
+    let node = event.detail.node;
+    let data = {
+      params: {
+        link: node.link,
+        nodeParams: node.params
+      }
+    };
+    handleNavigation(data);
+  };
   //// SPLIT VIEW
   export const openSplitView = (nodepath, settings) => {
     if (mfSplitView.displayed) {
@@ -1098,6 +1234,7 @@
   };
 
   onMount(() => {
+    searchProvider = LuigiConfig.getConfigValue('globalSearch.searchProvider');
     responsiveNavSetting = LuigiConfig.getConfigValue(
       'settings.responsiveNavigation'
     );

core/src/core-api/globalsearch.js

@@ -0,0 +1,88 @@
+/**
+ * Functions to use Luigi Global Search
+ * @name GlobalSearch
+ */
+class LuigiGlobalSearch {
+  /**
+   * Opens the global search field.
+   * @memberof GlobalSearch
+   * @since NEXTRELEASE
+   * @example Luigi.globalSearch().openSearchField();
+   */
+  openSearchField() {
+    Luigi.openSearchField();
+  }
+
+  /**
+   * Closes the global search field.
+   * @memberof GlobalSearch
+   * @since NEXTRELEASE
+   * @example Luigi.globalSearch().closeSearchField();
+   */
+  closeSearchField() {
+    Luigi.closeSearchField();
+  }
+
+  /**
+   * Clears the global search field.
+   * @memberof GlobalSearch
+   * @since NEXTRELEASE
+   * @example Luigi.globalSearch().clearSearchField();
+   */
+  clearSearchField() {
+    Luigi.clearSearchField();
+  }
+
+  /**
+   * Opens the global search result. By standard it is a popover.
+   * @memberof GlobalSearch
+   * @param {Array} searchResultItems
+   * @since NEXTRELEASE
+   * @example
+   * let searchResultItem = {
+   *   pathObject: {
+   *     link,
+   *     params: {}
+   *   },
+   *   label,
+   *   description
+   * }
+   *
+   * Luigi.globalSearch().showSearchResult([searchResultItem1, searchResultItem2]);
+   */
+  showSearchResult(searchResultItems) {
+    Luigi.showSearchResult(searchResultItems);
+  }
+
+  /**
+   * Closes the global search result. By standard it is rendered as a popover.
+   * @memberof GlobalSearch
+   * @since NEXTRELEASE
+   * @example Luigi.globalSearch().closeSearchResult();
+   */
+  closeSearchResult() {
+    Luigi.closeSearchResult();
+  }
+
+  /**
+   * Gets the value of the search input field.
+   * @memberof GlobalSearch
+   * @since NEXTRELEASE
+   * @example Luigi.globalSearch().getSearchString();
+   */
+  getSearchString() {
+    return Luigi.getGlobalSearchString();
+  }
+
+  /**
+   * Sets the value of the search input field.
+   * @memberof GlobalSearch
+   * @param searchString search value
+   * @since NEXTRELEASE
+   * @example Luigi.globalSearch().setSearchString('searchString');
+   */
+  setSearchString(searchString) {
+    Luigi.setGlobalSearchString(searchString);
+  }
+}
+export const globalSearch = new LuigiGlobalSearch();

core/src/core-api/index.js

@@ -5,6 +5,7 @@ import { navigation } from './navigation';
 import { i18n } from './i18n';
 import { customMessages } from './custom-messages';
 import { ux } from './ux';
+import { globalSearch } from './globalsearch';
 
 export const LuigiConfig = config;
 export const LuigiAuth = auth;
@@ -13,6 +14,7 @@ export const LuigiNavigation = navigation;
 export const LuigiI18N = i18n;
 export const LuigiCustomMessages = customMessages;
 export const LuigiUX = ux;
+export const LuigiGlobalSearch = globalSearch;
 
 // Expose it window for user app to call Luigi.setConfig()
 window.Luigi = config;
@@ -22,3 +24,4 @@ window.Luigi.navigation = () => navigation;
 window.Luigi.i18n = () => i18n;
 window.Luigi.customMessages = () => customMessages;
 window.Luigi.ux = () => ux;
+window.Luigi.globalSearch = () => globalSearch;

core/src/main.js

@@ -66,6 +66,33 @@ const configReadyCallback = () => {
           return app.$$.ctx.showModal(settings);
         };
 
+        Luigi.closeSearchField = () => {
+          return app.$$.ctx.closeSearchField();
+        };
+        Luigi.openSearchField = () => {
+          return app.$$.ctx.openSearchField();
+        };
+
+        Luigi.getGlobalSearchString = () => {
+          return app.$$.ctx.getGlobalSearchString();
+        };
+
+        Luigi.setGlobalSearchString = searchString => {
+          app.$$.ctx.setGlobalSearchString(searchString);
+        };
+
+        Luigi.showSearchResult = arr => {
+          return app.$$.ctx.showSearchResult(arr);
+        };
+
+        Luigi.closeSearchResult = () => {
+          app.$$.ctx.closeSearchResult();
+        };
+
+        Luigi.clearSearchField = () => {
+          app.$$.ctx.clearSearchField();
+        };
+
         Luigi.splitView = {
           openAsSplitView: (path, settings) =>
             app.$$.ctx.openSplitView(path, settings),