From 9b6223d35ce090af1f8ea5d7ee63a629bb2a023f Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Tue, 17 Nov 2020 19:56:58 +0100
Subject: 0.0.2

---
 grid/index.js     | 10 ++++++++--
 grid/package.json |  2 +-
 grid/src/grid.ts  | 31 +++++++++++++++++++++++++------
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/grid/index.js b/grid/index.js
index ca61d83..8ee315f 100644
--- a/grid/index.js
+++ b/grid/index.js
@@ -3,7 +3,12 @@ import Grid from "./src/grid";
 const grid = new Grid({
     data: [
         { id: "1", firstName: "Ivar", lastName: "Løvlie" },
-        { id: "2", firstName: "Sebastian", lastName: "" },
+        {
+            id: "2",
+            firstName:
+                "SebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastian",
+            lastName: "",
+        },
         { id: "3", firstName: "Heidi", lastName: "" },
         { id: "4", firstName: "Frank", lastName: "" },
         { id: "5", firstName: "Ivar", lastName: "Løvlie" },
@@ -31,10 +36,11 @@ const grid = new Grid({
         {
             dataId: "firstName",
             minWidth: "350px",
+            maxWidth: "350px",
             columnName: "Fornavn",
         },
         {
-            cellValue: (row) => row.lastName,
+            dataId: "lastName",
             minWidth: "150px",
             columnName: "Etternavn",
         },
diff --git a/grid/package.json b/grid/package.json
index b339f43..a097b70 100644
--- a/grid/package.json
+++ b/grid/package.json
@@ -1,6 +1,6 @@
 {
     "name": "grid",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "author": {
         "email": "ivar@ivarlovlie.no",
         "name": "Ivar Løvlie",
diff --git a/grid/src/grid.ts b/grid/src/grid.ts
index 0953268..4623dda 100644
--- a/grid/src/grid.ts
+++ b/grid/src/grid.ts
@@ -21,7 +21,6 @@ interface GridConfiguration {
 interface SearchConfiguration {
     dataIds: Array<string>;
 }
-
 interface GridColumn {
     dataId?: string;
     columnName: string | Function;
@@ -46,6 +45,7 @@ export default class Grid {
     private configuration: GridConfiguration;
     private domElement: Element;
     public currentPage: number = 0;
+    private searchIndex: JsSearch.Search;
 
     constructor(props: GridProps) {
         this.setOptions(props);
@@ -152,8 +152,17 @@ export default class Grid {
         wrapper.appendChild(row);
     }
 
-    private renderBody(data: Array<Object> = null): void {
-        const wrapper = this.domElement.querySelector("table tbody");
+    private renderBody(data: Array<Object> = null, isSearchResult: boolean = false): void {
+        let wrapper = this.domElement.querySelector("table tbody");
+        if (isSearchResult) {
+            this.domElement.querySelector("table tbody:not(.search-results)").classList.add("d-none");
+            this.domElement.querySelector("table tbody.search-results").classList.remove("d-none");
+            wrapper = this.domElement.querySelector("table tbody.search-results");
+        } else {
+            this.domElement.querySelector("table tbody.search-results")?.classList.add("d-none");
+            this.domElement.querySelector("table tbody:not(.search-results)").classList.remove("d-none");
+            wrapper = this.domElement.querySelector("table tbody:not(.search-results)");
+        }
         wrapper.innerHTML = "";
         let items = data ?? this.configuration.data;
         if (this.configuration.pageSize !== 0) {
@@ -170,6 +179,7 @@ export default class Grid {
                 if (typeof val.dataId === "string" && val.dataId.length > 0) {
                     val.cellValue = item[val.dataId];
                 }
+                cell.className = "text-break";
 
                 if (typeof val.cellValue === "string" || typeof val.cellValue === "number") {
                     cell.innerText = val.cellValue;
@@ -215,7 +225,12 @@ export default class Grid {
         this.domElement.appendChild(wrapper);
     }
 
-    private searchIndex: JsSearch.Search;
+    private renderSearchResultWrapper() {
+        if (this.configuration.search.dataIds.length < 1) return;
+        const searchWrapper = document.createElement("tbody");
+        searchWrapper.className = "search-results";
+        this.domElement.querySelector("table").appendChild(searchWrapper);
+    }
 
     private populateSearchIndex() {
         if (this.configuration.search.dataIds.length < 1) return;
@@ -229,8 +244,11 @@ export default class Grid {
     public search(query: string): void {
         if (this.configuration.search.dataIds.length < 1) return;
         let result = this.searchIndex.search(query);
-        if (result.length === 0) result = this.configuration.data;
-        this.renderBody(result);
+        if (result.length === 0) {
+            this.renderBody(this.configuration.data);
+        } else {
+            this.renderBody(result, true);
+        }
     }
 
     public navigate(pageNumber): void {
@@ -274,6 +292,7 @@ export default class Grid {
             this.renderBody();
             this.renderPaginator();
             this.renderCurrentPageIndicator();
+            this.renderSearchResultWrapper();
             this.log("Grid was rendered");
         } else {
             throw new GridError("render is not allowed due to invalid props");
-- 
cgit v1.3