Added instant search functionality

2sky · Mar 14, 2017 · f3a2c83 · f3a2c83
1 parent 478809e
commit f3a2c83
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 1 deletion.
diff --git a/src/Libs/Vidyano/service.ts b/src/Libs/Vidyano/service.ts
@@ -927,6 +927,13 @@
             return data.d;
         }
 
+        async getInstantSearch(search: string): Promise<IInstantSearchResult[]> {
+            const uri = this._createUri(`Instant?q=${encodeURIComponent(search)}`);
+
+            const data = await this._getJSON(uri);
+            return data.d;
+        }
+
         static getDate = function (yearString: string, monthString: string, dayString: string, hourString: string, minuteString: string, secondString: string, msString: string) {
             const year = parseInt(yearString, 10);
             const month = parseInt(monthString || "1", 10) - 1;
@@ -1208,6 +1215,13 @@
         hideType?: boolean;
     }
 
+    export interface IInstantSearchResult {
+        id: string;
+        label: string;
+        objectId: string;
+        breadcrumb: string;
+    }
+
     export interface IRetryAction {
         title: string;
         message: string;

diff --git a/src/Libs/Vidyano/vidyano.d.ts b/src/Libs/Vidyano/vidyano.d.ts
@@ -919,6 +919,7 @@ declare namespace Vidyano {
         executeQuery(parent: PersistentObject, query: Query, asLookup?: boolean, throwExceptions?: boolean): Promise<any>;
         executeAction(action: string, parent: PersistentObject, query: Query, selectedItems: Array<QueryResultItem>, parameters?: any, skipHooks?: boolean): Promise<PersistentObject>;
         getReport(token: string, {filter, orderBy, top, skip, hideIds, hideType}?: IReportOptions): Promise<any[]>;
+        getInstantSearch(search: string): Promise<IInstantSearchResult[]>;
         static getDate: (yearString: string, monthString: string, dayString: string, hourString: string, minuteString: string, secondString: string, msString: string) => Date;
         static fromServiceString(value: string, typeName: string): any;
         static toServiceString(value: any, typeName: string): string;
@@ -956,6 +957,12 @@ declare namespace Vidyano {
         hideIds?: boolean;
         hideType?: boolean;
     }
+    interface IInstantSearchResult {
+        id: string;
+        label: string;
+        objectId: string;
+        breadcrumb: string;
+    }
     interface IRetryAction {
         title: string;
         message: string;

diff --git a/src/WebComponents/Menu/menu.html b/src/WebComponents/Menu/menu.html
@@ -26,6 +26,11 @@
         <template is="dom-if" if="[[!collapsed]]">
             <div class="horizontal layout flex relative">
                 <vi-scroller class="flex programUnits" no-horizontal>
+                    <div class="instantSearch" hidden$="[[!instantSearchResults]]">
+                        <template is="dom-repeat" items="[[instantSearchResults]]" as="item">
+                            <a href$="[[item.href]]" class="layout horizontal"><div class="flex" inner-h-t-m-l="[[item.match]]"></div><span class="label">[[item.label]]</span></a>
+                        </template>
+                    </div>
                     <template is="dom-repeat" items="[[programUnits]]" as="programUnit">
                         <vi-menu-item class="program-unit" item="[[programUnit]]" filter="[[filter]]" program-unit="[[activeProgramUnit]]" collapsed="[[collapsed]]" items="[[programUnit.items]]" collapse-groups-on-tap></vi-menu-item>
                         <template is="dom-if" if="[[_computeIsFirstRunProgramUnit(app.service.application, programUnit)]]">

diff --git a/src/WebComponents/Menu/menu.scss b/src/WebComponents/Menu/menu.scss
@@ -15,6 +15,8 @@ $backgroundColor: $blue-grey-900;
         width: var(--vi-menu--expand-width, 17em);
 
         header {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
             #toggleCollapse {
                 background-color: transparent;
             }
@@ -35,6 +37,54 @@ $backgroundColor: $blue-grey-900;
                 background-color: rgba(0, 0, 0, 0.1);
             }
         }
+
+        .instantSearch {
+            position: relative;
+            margin-bottom: var(--theme-h5);
+            padding: var(--theme-h5) 0;
+            background-color: rgba(0,0,0,0.2);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+
+            a {
+                cursor: pointer;
+                color: var(--vi-menu-color, $color);
+                line-height: var(--theme-h2);
+                padding: 0 var(--theme-h4);
+                text-decoration: none;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                div {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    padding-right: var(--theme-h5);
+                }
+
+                span {
+                    &.match {
+                        color: #FFDD00;
+                        font-weight: bold;
+                    }
+
+                    &.label {
+                        font-size: 11px;
+                        font-weight: 100;
+                        text-transform: uppercase;
+                        line-height: var(--theme-h2);
+                        transform: translateY(1px);
+                    }
+                }
+
+                &:hover {
+                    background-color: rgba(0, 0, 0, 0.1);
+                }
+            }
+
+            & + vi-menu-item {
+                margin-top: var(--theme-h5);
+            }
+        }
     }
 
     &[collapsed] {
@@ -148,7 +198,6 @@ $backgroundColor: $blue-grey-900;
             margin-right: calc(var(--theme-h4) - var(--theme-h4) / 2);
             margin-bottom: calc(var(--theme-h4) / 2);
             margin-left: calc(var(--theme-h4) - var(--theme-h4) / 2);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }'};
 
         --vi-input-search-input: #{'{

diff --git a/src/WebComponents/Menu/menu.ts b/src/WebComponents/Menu/menu.ts
@@ -18,6 +18,14 @@ namespace Vidyano.WebComponents {
                 type: Boolean,
                 computed: "_computeHasGlobalSearch(app.service.application.globalSearchId)"
             },
+            instantSearchDelay: {
+                type: Number,
+                computed: "_computeInstantSearchDelay(app.service.application)"
+            },
+            instantSearchResults: {
+                type: Array,
+                readOnly: true
+            },
             filter: {
                 type: String,
                 observer: "_filterChanged"
@@ -45,6 +53,8 @@ namespace Vidyano.WebComponents {
         private static _minResizeWidth: number;
         private _resizeWidth: number;
         readonly isResizing: boolean; private _setIsResizing: (val: boolean) => void;
+        readonly instantSearchDelay: number;
+        readonly instantSearchResults: IInstantSearchResult[]; private _setInstantSearchResults: (results: IInstantSearchResult[]) => void;
         filter: string;
         filtering: boolean;
         activeProgramUnit: ProgramUnit;
@@ -81,6 +91,29 @@ namespace Vidyano.WebComponents {
 
         private _filterChanged() {
             this.filtering = !StringEx.isNullOrEmpty(this.filter);
+
+            if (this.filtering) {
+                if (this.instantSearchDelay) {
+                    const filter = this.filter;
+                    this.debounce("Menu.InstantSearch", async () => {
+                        const results = await this.app.service.getInstantSearch(filter);
+                        if (filter !== this.filter)
+                            return;
+
+                        const exp = new RegExp(`(${filter})`, "gi");
+                        this._setInstantSearchResults(results.length > 0 ? results.map(r => {
+                            r["match"] = r.breadcrumb.replace(exp, "<span class='style-scope vi-menu match'>$1</span>");
+                            r["href"] = `${Vidyano.Path.routes.rootPath}PersistentObject.${r.id}/${r.objectId}`;
+
+                            return r;
+                        }) : null);
+                    }, this.instantSearchDelay);
+                }
+            }
+            else {
+                this.cancelDebouncer("Menu.InstantSearch");
+                this._setInstantSearchResults(null);
+            }
         }
 
         private _search() {
@@ -98,6 +131,10 @@ namespace Vidyano.WebComponents {
             return globalSearchId !== "00000000-0000-0000-0000-000000000000";
         }
 
+        private _computeInstantSearchDelay(application: Vidyano.Application): number {
+            return application.getAttributeValue("InstantSearchDelay");
+        }
+
         private _computeCollapsedWithGlobalSearch(collapsed: boolean, hasGlobalSearch: boolean): boolean {
             return collapsed && hasGlobalSearch;
         }