add Searchbar for projects list and sitemaps list (#151)

* views changes to add Searchbar

* add logic for searchbar

* add messages for searchbar placeholder

* add better logic for searchbar based on regex. Also add highlight for matches

* edit placeholder message

* placeholder fix

* refactor initSearchbar: remove bulky if-construction

* better styles for searchbar

* :(

* disable search for buttons

* fixed with for columns

* disable highlight for buttons

* remove unnecessary css classes

src/_locales/en/messages.json

@@ -381,5 +381,11 @@
 	},
 	"sitemap_template_create_nav_button": {
 		"message": "Load news template"
+	},
+	"searchbar_placeholder_message_for_sitemaps": {
+		"message": "Search for sitemaps..."
+	},
+	"searchbar_placeholder_message_for_projects": {
+		"message": "Search for projects..."
 	}
 }

src/_locales/ru/messages.json

@@ -415,5 +415,11 @@
 	},
 	"sitemap_template_create_nav_button": {
 		"message": "Загрузить новостной шаблон"
+	},
+	"searchbar_placeholder_message_for_sitemaps": {
+		"message": "Поиск карт обхода..."
+	},
+	"searchbar_placeholder_message_for_projects": {
+		"message": "Поиск проектов..."
 	}
 }

src/devtools/panel.css

@@ -33,8 +33,15 @@ tbody tr {
 
 .table-condensed tbody > tr > td {
 	padding: 1px 5px;
+	overflow-wrap: anywhere;
+}
+#projects .table-condensed {
+	width: 100%;
+	table-layout: fixed;
+}
+#sitemaps .table-condensed {
+	width: 100%;
 }
-
 body {
 	font-size: 12px;
 }
@@ -182,3 +189,23 @@ select[size] {
 	font-style: normal;
 	font-weight: normal;
 }
+.searchbar {
+	margin: 5px;
+	width: 20em;
+	padding: 0.5em 1em;
+	border: 2px solid #ccc;
+	border-radius: 4px;
+	box-sizing: border-box;
+	font-size: 1em;
+	color: #333;
+	transition: border-color 0.2s ease, box-shadow 0.2s ease;
+	&:focus {
+		border-color: #007bff;
+		box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);
+		outline: none;
+	}
+	&::placeholder {
+		color: #888;
+		font-style: italic;
+	}
+}

src/devtools/views/ProjectList.html

@@ -1,5 +1,10 @@
 <div id="projects">
+	<input class="searchbar" id="searchbar" />
 	<table class="table table-bordered table-condensed table-hover">
+		<colgroup>
+			<col style="width: 30%" />
+			<col style="width: 70%" />
+		</colgroup>
 		<thead>
 			<tr>
 				<th data-i18n="projectlist_id"></th>

src/devtools/views/SitemapList.html

@@ -1,5 +1,11 @@
 <div id="sitemaps">
+	<input class="searchbar" id="searchbar" />
 	<table class="table table-bordered table-condensed table-hover">
+		<colgroup>
+			<col style="width: 30%" />
+			<col style="max-width: 60%" />
+			<col style="width: auto" />
+		</colgroup>
 		<thead>
 			<tr>
 				<th data-i18n="sitemaplist_id"></th>

src/devtools/views/SitemapListItem.html

@@ -1,7 +1,7 @@
 <tr>
 	<td class="id">{{_id}}</td>
 	<td>{{#startUrls}} {{.}}, {{/startUrls}}{{^startUrls}}{{urlPattern}}{{/startUrls}}</td>
-	<td>
+	<td class="actions">
 		<div class="actions-block">
 			<button
 				action="browse-sitemap-data"

src/scripts/Controller.js

@@ -827,6 +827,19 @@ export default class SitemapController {
 		});
 		$('#viewport').html($projectListPanel);
 		Translator.translatePage();
+
+		$('table').searcher({
+			inputSelector: '#searchbar',
+			toggle: (item, containsText) => {
+				$(item).unhighlight();
+				$(item).toggle(containsText);
+				$(item).highlight($('#searchbar').val());
+			},
+		});
+		$('#searchbar').attr(
+			'placeholder',
+			Translator.getTranslationByKey('searchbar_placeholder_message_for_projects')
+		);
 	}
 
 	getCurrentProjectId() {
@@ -872,8 +885,24 @@ export default class SitemapController {
 			$('#viewport').html($sitemapListPanel);
 			Translator.translatePage();
 		}
+		$('table').searcher({
+			inputSelector: '#searchbar',
+			textSelector: 'td:not(td.actions)',
+			toggle: (item, containsText) => {
+				$(item).unhighlight();
+				$(item).toggle(containsText);
+				$(item)
+					.find('td:not(.actions)')
+					.each(function () {
+						$(this).highlight($('#searchbar').val());
+					});
+			},
+		});
+		$('#searchbar').attr(
+			'placeholder',
+			Translator.getTranslationByKey('searchbar_placeholder_message_for_sitemaps')
+		);
 	}
-
 	getSitemapFromMetadataForm() {
 		const metadata = {};
 		const $form = $('#viewport form');