feat: Add free text search for table

index.html

@@ -18,7 +18,10 @@ <h1>Gitlab Explorer</h1>
 			<div class="panel">
 				<div class="panel__head">
 					<h1 class="panel__title">Groups</h1>
-					<div class="panel__actions"><button id="load-groups">Load Groups</button></div>
+					<div class="panel__actions">
+						<div class="panel__actions-list" id="groups-filters"></div>
+						<button id="load-groups">Load Groups</button>
+					</div>
 				</div>
 				<div class="panel__content">
 					<div id="groups-content"></div>
@@ -47,7 +50,10 @@ <h1 class="panel__title">Projects</h1>
 			<div class="panel">
 				<div class="panel__head">
 					<h1 class="panel__title">Members</h1>
-					<div class="panel__actions"><button id="load-members">Load Members</button></div>
+					<div class="panel__actions">
+						<div class="panel__actions-list" id="members-filters"></div>
+						<button id="load-members">Load Members</button>
+					</div>
 				</div>
 				<div class="panel__content">
 					<div id="members-content" ></div>

scripts/base-component.js

@@ -1,5 +1,6 @@
 import { html, render } from '../web_modules/lit-html.js';
 import DataSource from './data-handler.js';
+import Utilities from './utilities.js';
 import db from './db.js';
 
 class Base {
@@ -10,8 +11,8 @@ class Base {
 			content: document.querySelector(`#${this.component}-content`),
 			actionsList: document.querySelector(`#${this.component}-filters`),
 		}
-
 		this.dataService = new DataSource();
+		this.searchListing = Utilities.debounce(this.searchListing, 250);
 		this.checkData();
 		this.bindEvents();
 	}
@@ -50,12 +51,14 @@ class Base {
 	}
 
 	prepareFilters() {
+		this.filters = [];
 		for (const key in this.filtrationKeys) {
-			this.drawFilter(key, this.filtrationKeys[key]);
+			this.filters.push(this.createFilter(key, this.filtrationKeys[key]));
 		}
+		render(this.filters, this.panel.actionsList);
 	}
 
-	drawFilter(key, details) {
+	createFilter(key, details) {
 		let container;
 		if (details.node === 'select') {
 			const orderedFilter = Object.entries(this.filtrationKeys[key].items).sort(function (a, b) {
@@ -80,8 +83,29 @@ class Base {
 					${optionsTemplate}
 				</select>
 			`;
-			render(container, this.panel.actionsList);
+		} else if (details.type === 'search') {
+			container = html`
+				<label class="visually-hidden" for="text-search-by-${key}">Search</label>
+				<input type="search" @keyup=${(ev) => { this.searchListing(ev, details.column) }} id="text-search-by-${key}" placeholder="Search" />
+			`
 		}
+		return container;
+	}
+
+	searchListing(ev, column) {
+		const filter = ev.target.value.toUpperCase();
+		const listing = this.panel.content.querySelector('table');
+		const rows = listing.querySelectorAll('tr');
+		rows.forEach(row => {
+			const cells = row.querySelectorAll(`td[data-key="${column}"]`);
+			cells.forEach(cell => {
+				if (cell.innerText.toUpperCase().indexOf(filter) > -1) {
+					row.style.display = 'table-row';
+				} else {
+					row.style.display = 'none';
+				}
+			});
+		});
 	}
 
 	updateListing(ev, key) {

scripts/groups.js

@@ -6,6 +6,12 @@ import Base from './base-component.js';
 class Groups extends Base {
 	constructor() {
 		super('groups');
+		this.filtrationKeys = {
+			name: {
+				type: 'search',
+				column: 'name',
+			},
+		};
 	}
 
 	static load() {
@@ -26,7 +32,7 @@ class Groups extends Base {
 			groupsTemplates.push(html`
 				<tr>
 					<td class="listing__avatar"><img src="${group.avatar_url || './images/group.svg'}" alt="${group.name}" /></td>
-					<td>${group.name}</td>
+					<td data-key="name">${group.name}</td>
 					<td class="listing__actions">
 						<button @click=${()=> {this.showProjects(group.id)}}>Projects</button>
 						<button @click=${()=> {this.showMembers(group.id)}}>Members</button>
@@ -50,6 +56,7 @@ class Groups extends Base {
 		render(nodes, document.querySelector('#groups-content'));
 		this.updateCount(groups.length);
 		this.updateLastModified();
+		this.prepareFilters();
 	}
 }
 

scripts/members.js

@@ -9,6 +9,12 @@ import db from './db.js';
 class Members extends Base {
 	constructor() {
 		super('members');
+		this.filtrationKeys = {
+			name: {
+				type: 'search',
+				column: 'name',
+			},
+		};
 	}
 
 	static load(groups) {
@@ -140,7 +146,7 @@ class Members extends Base {
 							<img src="${member.avatar_url}" alt="${member.name}" />
 						</a>
 					</td>
-					<td>${member.name}</td>
+					<td data-key="name">${member.name}</td>
 					<td class="member-activity">
 						${member.last_activity && member.last_activity !== 'NA' ?
 							timeAgo.format(Date.parse(member.last_activity)) :
@@ -177,6 +183,7 @@ class Members extends Base {
 		render(nodes, document.querySelector('#members-content'));
 		this.updateCount(members.length);
 		this.updateLastModified();
+		this.prepareFilters();
 	}
 }
 

scripts/projects.js

@@ -9,11 +9,15 @@ class Projects extends Base {
 	constructor() {
 		super('projects');
 		this.filtrationKeys = {
+			name: {
+				type: 'search',
+				column: 'name',
+			},
 			group: {
 				node: 'select',
 				type: 'list',
 				items: {},
-			}
+			},
 		};
 	}
 
@@ -35,7 +39,7 @@ class Projects extends Base {
 			projectsTemplates.push(html`
 				<tr>
 					<td class="listing__avatar"><img src="${project.avatar_url || './images/project.svg'}" alt="${project.name}" /></td>
-					<td>${project.name}</td>
+					<td data-key="name">${project.name}</td>
 					<td data-key="group" data-value="${group?.id}">${group?.name || '-'}</td>
 					<td>${timeAgo.format(Date.parse(project.last_activity_at))}</td>
 					<td class="listing__actions">

scripts/utilities.js

@@ -11,6 +11,22 @@ class Utilities {
 		});
 		return await response.json();
 	}
+
+	static debounce(func, wait, immediate) {
+		let timeout;
+		return function() {
+			const context = this;
+			const args = arguments;
+			const later = function() {
+				timeout = null;
+				if (!immediate) func.apply(context, args);
+			};
+			const callNow = immediate && !timeout;
+			clearTimeout(timeout);
+			timeout = setTimeout(later, wait);
+			if (callNow) func.apply(context, args);
+		};
+	}
 }
 
 export default Utilities;