FDS-667 infinite scroll bug fixed (#270)

* FDS-667 infinite scroll bug fixed * FDS-667 search bar width fixed * FDS-667 search bar made stikcy
ollionorg · May 9, 2024 · 8b03c25 · 8b03c25
1 parent 6107154
commit 8b03c25
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 28 deletions.
diff --git a/packages/flow-table/CHANGELOG.md b/packages/flow-table/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 # Change Log
 
+## [2.4.3] - 2024-05-03
+
+### Improvements
+
+- Made the search bar sticky.
+- Implemented a loader for infinite scroll.
+
+### Bug Fixes
+
+- `f-table-schema` infinie scroll issue fixed.
+
 ## [2.4.2] - 2024-03-20
 
 ### Bug Fixes

diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-table",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "Table component for flow library",
   "module": "dist/flow-table.es.js",
   "main": "dist/flow-table.cjs.js",

diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema-global.scss b/packages/flow-table/src/components/f-table-schema/f-table-schema-global.scss
@@ -6,6 +6,7 @@ f-table-schema {
 	max-width: 100%;
 	display: flex;
 	overflow: auto;
+	flex-direction: column;
 }
 
 f-div[direction="column"] {

diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.scss b/packages/flow-table/src/components/f-table-schema/f-table-schema.scss
@@ -1,9 +1,13 @@
+@import "../../../../flow-core/src/mixins/scss/mixins";
+
 :host {
 	f-table {
 		height: fit-content;
 		width: 100%;
 	}
 	> div.f-table-schema-wrapper {
-		flex: 1 1 auto;
+		flex: 1 1;
+		overflow: auto;
+		@include scrollbar();
 	}
 }
diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts
@@ -188,9 +188,15 @@ export class FTableSchema extends FRoot {
 	@query("f-div.load-more")
 	loadMoreButton?: FDiv;
 
+	@query("#pagination-loader")
+	paginationLoader!: FDiv;
+
 	@query("#f-table-element")
 	tableElement?: FTable;
 
+	@query(".f-table-schema-wrapper")
+	fTableWrapper!: HTMLDivElement;
+
 	nextEmitted = false;
 
 	get max() {
@@ -431,20 +437,24 @@ export class FTableSchema extends FRoot {
 			return html`<f-text state="warning"> Warning: The 'data' property is required.</f-text>`;
 		}
 		return html`
+			<slot name="search">
+				${this.showSearchBar
+					? html`<f-div
+							padding="medium none"
+							style="position: sticky;left: 0px;"
+							.width=${this.offsetWidth + "px"}
+					  >
+							<f-search
+								.scope=${["all", ...Object.keys(this.data.header)]}
+								.selected-scope=${this.searchScope}
+								.value=${this.searchTerm}
+								variant="round"
+								@input=${this.search}
+							></f-search>
+					  </f-div>`
+					: nothing}
+			</slot>
 			<div class="f-table-schema-wrapper">
-				<slot name="search">
-					${this.showSearchBar
-						? html`<f-div padding="medium none">
-								<f-search
-									.scope=${["all", ...Object.keys(this.data.header)]}
-									.selected-scope=${this.searchScope}
-									.value=${this.searchTerm}
-									variant="round"
-									@input=${this.search}
-								></f-search>
-						  </f-div>`
-						: nothing}
-				</slot>
 				<f-table
 					id="f-table-element"
 					.variant=${this.variant}
@@ -458,6 +468,7 @@ export class FTableSchema extends FRoot {
 				>
 					${this.header} ${this.rowsHtml} ${this.noDataTemplate}
 				</f-table>
+				<f-div height="36px" loading="loader" id="pagination-loader" style="display:none"></f-div>
 				<f-div class="load-more" style="display:none" align="middle-left" padding="medium none">
 					<f-button @click=${this.paginate} label="load more" category="outline"></f-button>
 				</f-div>
@@ -467,11 +478,35 @@ export class FTableSchema extends FRoot {
 	protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.updated(changedProperties);
 
-		this.onscroll = () => {
-			if (this.scrollTop + this.offsetHeight >= this.scrollHeight) {
-				this.paginate();
+		const handleLoadMoreButton = () => {
+			if (
+				this.fTableWrapper.scrollHeight === this.fTableWrapper.offsetHeight &&
+				this.filteredRows.length < this.searchedRows.length
+			) {
+				this.loadMoreButton?.style.removeProperty("display");
+			} else if (this.loadMoreButton) {
+				this.loadMoreButton.style.display = "none";
+			}
+		};
+
+		this.fTableWrapper.onscroll = () => {
+			handleLoadMoreButton();
+
+			// offset difference added , instead of exact equal
+			if (
+				this.fTableWrapper.scrollHeight -
+					(this.fTableWrapper.scrollTop + this.fTableWrapper.offsetHeight) <
+				24
+			) {
+				if (this.filteredRows.length !== this.searchedRows.length) {
+					this.paginationLoader.style.width = this.offsetWidth + "px";
+					this.paginationLoader.style.display = "flex";
+				}
+				// settimeout added to display above loader first
+				setTimeout(() => this.paginate());
 			}
 			if (this.filteredRows.length === this.searchedRows.length && !this.nextEmitted) {
+				this.paginationLoader.style.display = "none";
 				setTimeout(() => {
 					this.nextEmitted = true;
 					const toggle = new CustomEvent("next", {
@@ -484,14 +519,7 @@ export class FTableSchema extends FRoot {
 			}
 		};
 		void this.updateComplete.then(async () => {
-			if (
-				this.scrollHeight === this.offsetHeight &&
-				this.filteredRows.length < this.searchedRows.length
-			) {
-				this.loadMoreButton?.style.removeProperty("display");
-			} else if (this.loadMoreButton) {
-				this.loadMoreButton.style.display = "none";
-			}
+			handleLoadMoreButton();
 			if (this.tableElement) {
 				await this.tableElement.updateHeaderSelectionCheckboxState();
 			}

diff --git a/stories/flow-table/f-table-schema.stories.ts b/stories/flow-table/f-table-schema.stories.ts
@@ -48,7 +48,13 @@ export const Playground = {
 				</f-div>
 			</f-popover>
 			<f-button style="display:none" label="download" @click=${downloadFile}></f-button>
-			<f-div state="default" id="reportTemplate" direction="column" overflow="scroll">
+			<f-div
+				state="default"
+				id="reportTemplate"
+				.maxHeight=${"100%"}
+				direction="column"
+				overflow="scroll"
+			>
 				<f-div state="warning" padding="large" variant="curved">
 					<f-text state="inherit"
 						>'f-table-schema' supports all properties and events of 'f-table'</f-text
@@ -170,7 +176,7 @@ export const Playground = {
 		["highlight-column-hover"]: true,
 		["sticky-header"]: true,
 		["rows-per-page"]: 20,
-		data: getFakeUsers(10),
+		data: getFakeUsers(100),
 		["sort-by"]: "firstName",
 		["sort-order"]: "asc",
 		["search-term"]: "",