From 66b1bb76bdbf0790bccc2433b8731fda22b24572 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Lu=C3=ADs?= <andreluis.silvap@gmail.com>
Date: Fri, 1 Dec 2023 19:43:06 -0300
Subject: [PATCH] Adicionando pesquisa de projetos

---
 src/assets/css/style.css             | 20 +++++++++++---
 src/projetos/assets/css/projetos.css | 41 ++++++++++++++++++++++++++++
 src/projetos/assets/js/app.js        | 28 +++++++++++++++++++
 src/projetos/index.html              | 16 ++++++++++-
 4 files changed, 100 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 4cd4a6b..82a7575 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -347,16 +347,28 @@ form .input-field label {
 	margin-top: 1em;
 }
 
+input,
+textarea,
+select {
+	outline: none;
+	border: 1px solid var(--grey);
+	border-radius: .5vmax;
+	padding: 0.5em;
+	font-size: 1.3em;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+	border: 2px solid var(--principal-blue);
+}
+
 form .input-field input,
 form .input-field textarea,
 form .input-field select {
 	max-width: 100%;
 	min-width: 100%;
 	margin-top: 0.5em;
-	padding: 0.5em;
-	border: 1px solid var(--grey);
-	border-radius: .5vmax;
-	font-size: 1.3em;
 }
 
 form button {
diff --git a/src/projetos/assets/css/projetos.css b/src/projetos/assets/css/projetos.css
index 22f4c6d..98a9dd9 100644
--- a/src/projetos/assets/css/projetos.css
+++ b/src/projetos/assets/css/projetos.css
@@ -1,3 +1,44 @@
+/* Search bar */
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin: 2em 0;
+}
+
+.actions .search-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.actions .search-bar>* {
+  margin: 0 .4em .6em;
+}
+
+.actions #add-project {
+  margin: auto .4em;
+}
+
+
+.search-bar>* {
+  font-size: 1em;
+}
+
+.search-bar select {
+  margin-left: 1em;
+  color: var(--black);
+}
+
+.search-bar button.search {
+  width: auto;
+  height: 100%;
+  margin: auto 1em;
+  padding: 0.5em 0.8em;
+	font-size: 1em;
+}
+
+
 .itens-list article p.dificuldade {
   display: inline-block;
 	padding: .3em .6em;
diff --git a/src/projetos/assets/js/app.js b/src/projetos/assets/js/app.js
index 9e7f0e9..52bc0f4 100644
--- a/src/projetos/assets/js/app.js
+++ b/src/projetos/assets/js/app.js
@@ -181,3 +181,31 @@ async function deleteProject() {
     }
   }
 }
+
+
+// SEARCH
+document.querySelector('.search-bar').addEventListener('input', search, false);
+
+
+function normalizeString(str) {
+  return str.toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '');
+}
+
+function search() {
+  const query = normalizeString(document.querySelector('.search-bar #search').value);
+  const difficulty = document.querySelector('#difficulty').value;
+
+  const filteredProjects = projectsList.filter(project => {
+    const { dificuldade, titulo, categoria, conteudo, autor } = project;
+    return normalizeString(dificuldade).includes(difficulty) && (
+      normalizeString(titulo).includes(query) ||
+      normalizeString(categoria).includes(query) ||
+      normalizeString(conteudo).includes(query) ||
+      normalizeString(autor).includes(query)
+    )
+  });
+
+  const textoHTML = filteredProjects.map(generateHTML).join('');
+
+  document.querySelector("#projects").innerHTML = textoHTML;
+}
diff --git a/src/projetos/index.html b/src/projetos/index.html
index 623f78b..0acf1c0 100644
--- a/src/projetos/index.html
+++ b/src/projetos/index.html
@@ -46,7 +46,21 @@
 		<section class="projects-list">
       <h2>Projetos</h2>
 
-      <button class="add-item" id="add-project">Novo Projeto</button>
+
+			<section class="actions">
+				<form class="search-bar">
+					<input type="text" id="search" placeholder="Pesquisar...">
+
+					<select name="difficulty" id="difficulty">
+						<option value="">Todos</option>
+						<option value="easy">Fácil</option>
+						<option value="medium">Médio</option>
+						<option value="hard">Difícil</option>
+					</select>
+				</form>
+
+				<button class="add-item" id="add-project">Novo Projeto</button>
+			</section>
 
       <section class="itens-list" id="projects">
 				<article>