From 6de685b970e066d741602aa1442f07b81224b81f Mon Sep 17 00:00:00 2001
From: Alisson Nunes <alynva@gmail.com>
Date: Sun, 29 Sep 2024 23:28:25 +0000
Subject: [PATCH] =?UTF-8?q?Testando=20duas=20op=C3=A7=C3=B5es=20para=20rea?=
 =?UTF-8?q?lizar=20a=20filtragem=20da=20biblioteca?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                         |  46 +++--
 package.json                              |   3 +-
 src/pages/teste/biblioteca-filtro-1.astro | 194 ++++++++++++++++++++++
 src/pages/teste/biblioteca-filtro-2.astro | 183 ++++++++++++++++++++
 4 files changed, 413 insertions(+), 13 deletions(-)
 create mode 100644 src/pages/teste/biblioteca-filtro-1.astro
 create mode 100644 src/pages/teste/biblioteca-filtro-2.astro

diff --git a/package-lock.json b/package-lock.json
index a74f62e..f6427a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,8 @@
         "datatables.net-dt": "^2.1.7",
         "datatables.net-fixedheader-dt": "^4.0.1",
         "datatables.net-responsive-dt": "^3.0.3",
-        "datatables.net-searchbuilder-dt": "^1.8.0",
+        "datatables.net-searchpanes-dt": "^2.3.2",
+        "datatables.net-select-dt": "^2.1.0",
         "jquery": "^3.7.1",
         "papaparse": "^5.4.1",
         "typescript": "^5.6.2"
@@ -2748,24 +2749,45 @@
         "jquery": ">=1.7"
       }
     },
-    "node_modules/datatables.net-searchbuilder": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/datatables.net-searchbuilder/-/datatables.net-searchbuilder-1.8.0.tgz",
-      "integrity": "sha512-NQ8dkXImmOfANAffnDdkUE4rSFrBx+rvVI0ohBlPrC0I9mvMzUgpMEvmjjj5NuusV1k4ibhOHnqGjdDPyjExCw==",
+    "node_modules/datatables.net-searchpanes": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/datatables.net-searchpanes/-/datatables.net-searchpanes-2.3.2.tgz",
+      "integrity": "sha512-I1sgKL3JiXtQhGJT3sbIpkN+czCjAox+gmyV6UBgHFQcAyspHhl1KnPdm/nWmABhPAIIM2RLotyh4U+A/0Z4hQ==",
       "license": "MIT",
       "dependencies": {
-        "datatables.net": "^2.1",
+        "datatables.net": "^2",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-searchpanes-dt": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/datatables.net-searchpanes-dt/-/datatables.net-searchpanes-dt-2.3.2.tgz",
+      "integrity": "sha512-0TAS7XG95+vU+Lt7y3LYlN2jcPfIl4zmwAiAaZBRtonR4j99nHCNn9e0aKYo32eOiN33+bmhICzsRljY2m9xZw==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net-dt": "^2",
+        "datatables.net-searchpanes": "2.3.2",
+        "jquery": ">=1.7"
+      }
+    },
+    "node_modules/datatables.net-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/datatables.net-select/-/datatables.net-select-2.1.0.tgz",
+      "integrity": "sha512-6B1sI5pfvBen+8kySl1T0hkGoUmrw+5YGqaW4NCg+1srMw+48YV5SdWPiyCQDoev2ajBdKzHuG/wzD2INMbmJw==",
+      "license": "MIT",
+      "dependencies": {
+        "datatables.net": "^2",
         "jquery": ">=1.7"
       }
     },
-    "node_modules/datatables.net-searchbuilder-dt": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/datatables.net-searchbuilder-dt/-/datatables.net-searchbuilder-dt-1.8.0.tgz",
-      "integrity": "sha512-KQylT/H7d0n428VKfI4a9oznz7yBaOmGo05B6ETxeSyu/w9qavomT5Kbg0HZCB2itP16k13H8XVJ4No9zPuw1g==",
+    "node_modules/datatables.net-select-dt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/datatables.net-select-dt/-/datatables.net-select-dt-2.1.0.tgz",
+      "integrity": "sha512-vYnYpD2Zy7UsuQ8RIoiEfehSuXYEZDAIOs4rvG6KLiBEnyfob9nyAE8TP361rH4bK8evecNufK7YuhYQPI4gvA==",
       "license": "MIT",
       "dependencies": {
-        "datatables.net-dt": "^2.1",
-        "datatables.net-searchbuilder": "1.8.0",
+        "datatables.net-dt": "^2",
+        "datatables.net-select": "2.1.0",
         "jquery": ">=1.7"
       }
     },
diff --git a/package.json b/package.json
index ba8e684..2ddbc62 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "datatables.net-dt": "^2.1.7",
     "datatables.net-fixedheader-dt": "^4.0.1",
     "datatables.net-responsive-dt": "^3.0.3",
-    "datatables.net-searchbuilder-dt": "^1.8.0",
+    "datatables.net-searchpanes-dt": "^2.3.2",
+    "datatables.net-select-dt": "^2.1.0",
     "jquery": "^3.7.1",
     "papaparse": "^5.4.1",
     "typescript": "^5.6.2"
diff --git a/src/pages/teste/biblioteca-filtro-1.astro b/src/pages/teste/biblioteca-filtro-1.astro
new file mode 100644
index 0000000..b354cc1
--- /dev/null
+++ b/src/pages/teste/biblioteca-filtro-1.astro
@@ -0,0 +1,194 @@
+---
+import Carregando from '../../components/Carregando.astro';
+import Observacao from '../../components/Observacao.astro';
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Biblioteca IsF - Idiomas sem Fronteiras">
+    <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.1.6/b-3.1.2/cr-2.0.4/fh-4.0.1/r-3.0.3/datatables.min.css" slot="head" />
+    
+	<Observacao title="Esta é uma biblioteca pública. Compartilhe com quem quiser!">
+		Se você possui algum trabalho sobre ou do IsF que gostaria de compartilhar, colabore enviando-o <a href="https://forms.gle/d4KfCsrDfZC4dnkM6" target="_blank">aqui</a>.
+	</Observacao>
+
+	<Carregando id="data-table-loader" />
+	
+	<table id="data">
+	</table>
+</Layout>
+
+<style is:global>
+main {
+	background: #fff;
+    border: 1px solid #bbb;
+    border-radius: 10px;
+    padding: 20px;
+    margin: 30px auto 60px;
+	box-shadow: 0px 2px 8px 2px lightgrey;
+}
+
+div:has(table#data) {
+	overflow-x: auto;
+}
+table#data a {
+    word-break: break-all;
+}
+
+div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow,
+div.dt-button-collection.dtb-collection-closeable div.dtsb-group {
+    padding-right: 50px;
+}
+div.dt-container div.dt-layout-row:first-child {
+	margin-top: 0;
+}
+div.dt-container div.dt-layout-row:last-child {
+	margin-bottom: 0;
+}
+
+.tag {
+	border-radius: 16px;
+	padding: 4px 8px 5px 8px;
+	font-size: 12px;
+	white-space: nowrap;
+    display: inline-block;
+	max-width: 120px;
+    overflow: hidden;
+	text-overflow: ellipsis;
+}
+</style>
+
+<script>
+import DataTable from 'datatables.net-dt'
+import 'datatables.net-buttons-dt'
+import 'datatables.net-colreorder-dt'
+import 'datatables.net-fixedheader-dt'
+import 'datatables.net-responsive-dt'
+import Papa from 'papaparse'
+
+const ID_DA_PLANILHA = '1zL6CXcemierW0aKoGgYMJ2U0iAn_89QF9EVOPniPk34'
+const ID_DA_ABA = 1622766549
+const URL_DA_PLANILHA = `https://docs.google.com/spreadsheets/d/${ID_DA_PLANILHA}/pub?gid=${ID_DA_ABA}&single=true&output=csv&t=${Date.now()}`
+
+const TAGS = {
+	// [text_color, bg_color]
+	
+	// == CATEGORIA ==
+	"Artigo": ['#666666', '#E5E5E5'],
+	"Monografia": ['#437406', '#CAF0CC'],
+	"Dissertação": ['#8F6200', '#FFEBC0'],
+	"Tese": ['#0068B8', '#D4E7F6'],
+	"Entrevista": ['#FFFFFF', '#BE79B3'],
+	"TCC": ['#FFFFFF', '#4F6BED'],
+	"Capítulo": ['#FFFFFF', '#9E6C00'],
+	"Livro": ['#FFFFFF', '#CA5010'],
+	"Palestra": ['#FFFFFF', '#005E50'],
+	// == CATEGORIA ==
+	
+	// == IDIOMA ==
+	"alemão": ['#8F6200', '#FFEBC0'],
+	"espanhol": ['#437406', '#CAF0CC'],
+	"francês": ['#FFFFFF', '#0078D4'],
+	"inglês": ['#FFFFFF', '#373277'],
+	"italiano": ['#AA272B', '#F5CCCF'],
+	"japonês": ['#FFFFFF', '#D13438'],
+	"português para estrangeiros": ['#FFFFFF', '#038387'],
+	"TODOS": ['#FFFFFF', '#BE79B3'],
+	// == IDIOMA ==
+}
+
+type LibraryRecord = {
+	Ano: number
+	Categoria: string
+	Idioma: string
+	Referência: string
+	Arquivo: string
+}
+
+Papa.parse<LibraryRecord>(URL_DA_PLANILHA, {
+	download: true,
+	header: true,
+	complete: function(results) {
+		if (results.errors.length) {
+			console.error(results);
+			window.alert("Erro ao carregar dados.")
+		} else {
+			new DataTable('#data', {
+				language: {
+					url: '//cdn.datatables.net/plug-ins/2.1.6/i18n/pt-BR.json',
+				},
+				layout: {
+					topEnd: {
+						search: {
+							processing: true,
+							placeholder: "Buscar na biblioteca"
+						}
+					},
+				},
+				responsive: true,
+				fixedHeader: true,
+				data: results.data,
+				columns: Object.keys(results.data[0]).map((x, i) => ({
+					data: x,
+					title: x,
+					footer: "_",
+					className: ['desktop', 'min-tablet-p', 'min-tablet-l', 'all', 'min-mobile-l'][i],
+					render: (d, t) =>
+						t === 'display' ?
+							['Categoria', 'Idioma'].includes(x) ?
+								createTag(d)
+								: replaceUrlsWithLinks(d, x === 'Arquivo' ? 'Link' : undefined)
+									: d,
+				})),
+				initComplete: function(settings) {
+					document.querySelector("#data-table-loader")?.remove()
+					const api = new DataTable.Api(settings)
+
+					api.columns()
+						.every(function () {
+							const column = this;
+
+							if (!["Ano", "Categoria", "Idioma"].includes(column.title())) {
+								column.footer().replaceChildren("")
+								return
+							}
+
+							const select = document.createElement('select');
+							select.add(new Option(''));
+							column.footer().replaceChildren(select);
+			
+							select.addEventListener('change', function () {
+								column
+									.search(select.value, { exact: true })
+									.draw();
+							});
+			
+							column
+								.data()
+								.unique()
+								.sort()
+								.each(function (d) {
+									select.add(new Option(d));
+								});
+						});
+				}
+			});
+		}
+	}
+});
+
+function replaceUrlsWithLinks(text: string, label: string | undefined = undefined) {
+	var urlRegex = /((http|https):\/\/[^\s]+)(?=\s|\.|$)/gi;
+	return text.replace(urlRegex, function(url) {
+        const cleanedUrl = url.replace(/[\.,!?;:)>]+$/, '');
+		const trailingPunctuation = url.slice(cleanedUrl.length);
+        return `<a href="${cleanedUrl}" target="_blank" rel="noopener noreferrer">${label || cleanedUrl}</a>${trailingPunctuation}`;
+    });
+}
+
+function createTag(text: string) {
+	return text
+		.split(";")
+		.map(t => t.trim())
+		.map(t => t in TAGS ? `<span class="tag" style="color: ${TAGS[t as keyof typeof TAGS][0]}; background-color: ${TAGS[t as keyof typeof TAGS][1]}" title="${t}">${t}</span>` : t)
+		.join(" ")
+}
+</script>
diff --git a/src/pages/teste/biblioteca-filtro-2.astro b/src/pages/teste/biblioteca-filtro-2.astro
new file mode 100644
index 0000000..0801c04
--- /dev/null
+++ b/src/pages/teste/biblioteca-filtro-2.astro
@@ -0,0 +1,183 @@
+---
+import Carregando from '../../components/Carregando.astro';
+import Observacao from '../../components/Observacao.astro';
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title="Biblioteca IsF - Idiomas sem Fronteiras">
+    <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.1.6/b-3.1.2/cr-2.0.4/fh-4.0.1/r-3.0.3/sp-2.3.2/sl-2.1.0/datatables.min.css" slot="head" />
+    
+	<Observacao title="Esta é uma biblioteca pública. Compartilhe com quem quiser!">
+		Se você possui algum trabalho sobre ou do IsF que gostaria de compartilhar, colabore enviando-o <a href="https://forms.gle/d4KfCsrDfZC4dnkM6" target="_blank">aqui</a>.
+	</Observacao>
+
+	<Carregando id="data-table-loader" />
+	
+	<table id="data">
+	</table>
+</Layout>
+
+<style is:global>
+main {
+	background: #fff;
+    border: 1px solid #bbb;
+    border-radius: 10px;
+    padding: 20px;
+    margin: 30px auto 60px;
+	box-shadow: 0px 2px 8px 2px lightgrey;
+}
+
+div:has(table#data) {
+	/* overflow-x: auto; */
+}
+table#data a {
+    word-break: break-all;
+}
+
+div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow,
+div.dt-button-collection.dtb-collection-closeable div.dtsb-group {
+    padding-right: 50px;
+}
+div.dt-container div.dt-layout-row:first-child {
+	margin-top: 0;
+}
+div.dt-container div.dt-layout-row:last-child {
+	margin-bottom: 0;
+}
+
+.tag {
+	border-radius: 16px;
+	padding: 4px 8px 5px 8px;
+	font-size: 12px;
+	white-space: nowrap;
+    display: inline-block;
+	max-width: 120px;
+    overflow: hidden;
+	text-overflow: ellipsis;
+}
+</style>
+
+<script>
+import DataTable from 'datatables.net-dt'
+import 'datatables.net-buttons-dt'
+import 'datatables.net-colreorder-dt'
+import 'datatables.net-fixedheader-dt'
+import 'datatables.net-responsive-dt'
+import 'datatables.net-searchpanes-dt'
+import 'datatables.net-select-dt';
+import Papa from 'papaparse'
+
+const ID_DA_PLANILHA = '1zL6CXcemierW0aKoGgYMJ2U0iAn_89QF9EVOPniPk34'
+const ID_DA_ABA = 1622766549
+const URL_DA_PLANILHA = `https://docs.google.com/spreadsheets/d/${ID_DA_PLANILHA}/pub?gid=${ID_DA_ABA}&single=true&output=csv&t=${Date.now()}`
+
+const TAGS = {
+	// [text_color, bg_color]
+	
+	// == CATEGORIA ==
+	"Artigo": ['#666666', '#E5E5E5'],
+	"Monografia": ['#437406', '#CAF0CC'],
+	"Dissertação": ['#8F6200', '#FFEBC0'],
+	"Tese": ['#0068B8', '#D4E7F6'],
+	"Entrevista": ['#FFFFFF', '#BE79B3'],
+	"TCC": ['#FFFFFF', '#4F6BED'],
+	"Capítulo": ['#FFFFFF', '#9E6C00'],
+	"Livro": ['#FFFFFF', '#CA5010'],
+	"Palestra": ['#FFFFFF', '#005E50'],
+	// == CATEGORIA ==
+	
+	// == IDIOMA ==
+	"alemão": ['#8F6200', '#FFEBC0'],
+	"espanhol": ['#437406', '#CAF0CC'],
+	"francês": ['#FFFFFF', '#0078D4'],
+	"inglês": ['#FFFFFF', '#373277'],
+	"italiano": ['#AA272B', '#F5CCCF'],
+	"japonês": ['#FFFFFF', '#D13438'],
+	"português para estrangeiros": ['#FFFFFF', '#038387'],
+	"TODOS": ['#FFFFFF', '#BE79B3'],
+	// == IDIOMA ==
+}
+
+type LibraryRecord = {
+	Ano: number
+	Categoria: string
+	Idioma: string
+	Referência: string
+	Arquivo: string
+}
+
+Papa.parse<LibraryRecord>(URL_DA_PLANILHA, {
+	download: true,
+	header: true,
+	complete: function(results) {
+		if (results.errors.length) {
+			console.error(results);
+			window.alert("Erro ao carregar dados.")
+		} else {
+			new DataTable('#data', {
+				language: {
+					url: '//cdn.datatables.net/plug-ins/2.1.6/i18n/pt-BR.json',
+					// @ts-ignore
+					searchPanes: {
+						// @ts-ignore
+						collapse: { 0: 'Filtros', _: 'Filtros (%d)' }
+					},
+				},
+				layout: {
+					topStart: {
+						buttons: [
+							{
+								extend: 'searchPanes',
+								config: {
+									cascadePanes: true,
+									collapse: false,
+								},
+							}
+						],
+						pageLength: {},
+					},
+					topEnd: {
+						search: {
+							processing: true,
+							placeholder: "Buscar na biblioteca"
+						}
+					},
+				},
+				responsive: true,
+				fixedHeader: true,
+				data: results.data,
+				columns: Object.keys(results.data[0]).map((x, i) => ({
+					data: x,
+					title: x,
+					className: ['desktop', 'min-tablet-p', 'min-tablet-l', 'all', 'min-mobile-l'][i],
+					render: (d, t) =>
+						t === 'display' ?
+							['Categoria', 'Idioma'].includes(x) ?
+								createTag(d)
+								: replaceUrlsWithLinks(d, x === 'Arquivo' ? 'Link' : undefined)
+									: d,
+				})),
+				initComplete: function() {
+					document.querySelector("#data-table-loader")?.remove()
+				}
+			});
+		}
+	}
+});
+
+function replaceUrlsWithLinks(text: string, label: string | undefined = undefined) {
+	var urlRegex = /((http|https):\/\/[^\s]+)(?=\s|\.|$)/gi;
+	return text.replace(urlRegex, function(url) {
+        const cleanedUrl = url.replace(/[\.,!?;:)>]+$/, '');
+		const trailingPunctuation = url.slice(cleanedUrl.length);
+        return `<a href="${cleanedUrl}" target="_blank" rel="noopener noreferrer">${label || cleanedUrl}</a>${trailingPunctuation}`;
+    });
+}
+
+function createTag(text: string) {
+	return text
+		.split(";")
+		.map(t => t.trim())
+		.map(t => t in TAGS ? `<span class="tag" style="color: ${TAGS[t as keyof typeof TAGS][0]}; background-color: ${TAGS[t as keyof typeof TAGS][1]}" title="${t}">${t}</span>` : t)
+		.join(" ")
+}
+</script>